/* ================= GLOBAL (SAFE) ================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

html,
body{
background:#000;
color:#fff;
line-height:1.5;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

a{
text-decoration:none;
}

/* ================= SOLANA ACCENT ================= */

:root{
--accent:#14f195;
--accent-hover:#39ffb1;
}

/* ================= HEADER ================= */

.header{
width:100%;
background:rgba(0,0,0,0.92);
position:fixed;
top:0;
left:0;
z-index:9999;
border-bottom:1px solid #111;
backdrop-filter:blur(10px);
}

.header-spacer{
height:64px;
}

.header .nav{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
padding:14px 20px;
}

/* LOGO */

.header .logo img{
height:38px;
}

/* ================= DESKTOP MENU ================= */

.header .menu-desktop{
display:flex;
gap:22px;
align-items:center;
}

.header .menu-desktop a{
color:#9ca3af;
font-size:13px;
position:relative;
transition:0.25s;
}

.header .menu-desktop a:hover{
color:#fff;
}

/* UNDERLINE */

.header .menu-desktop a::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0%;
height:2px;
background:var(--accent);
transition:0.25s;
}

.header .menu-desktop a:hover::after{
width:100%;
}

/* ================= DROPDOWN ================= */

.header .dropdown{
position:relative;
}

.header .dropdown-menu{
display:none;
position:absolute;
top:32px;
left:0;
background:#111;
border:1px solid #222;
border-radius:12px;
padding:8px 0;
min-width:190px;
z-index:9999;
box-shadow:0 10px 30px rgba(0,0,0,0.45);
}

.header .dropdown-menu a{
display:block;
padding:10px 16px;
color:#9ca3af;
font-size:13px;
}

.header .dropdown-menu a:hover{
background:#1a1a1a;
color:#fff;
}

.header .dropdown:hover .dropdown-menu{
display:block;
}

/* ================= HAMBURGER ================= */

.header .hamburger{
display:none;
flex-direction:column;
gap:5px;
cursor:pointer;
}

.header .hamburger span{
width:26px;
height:3px;
background:#fff;
border-radius:2px;
transition:0.3s ease;
}

.header .hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.header .hamburger.active span:nth-child(2){
opacity:0;
}

.header .hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}

/* ================= MOBILE MENU ================= */

.header .menu-mobile{
display:none;
position:absolute;
top:64px;
right:15px;
background:#111;
border:1px solid #222;
border-radius:12px;
width:230px;
max-height:80vh;
overflow-y:auto;
z-index:9999;
box-shadow:0 10px 30px rgba(0,0,0,0.5);
}

.header .menu-mobile a{
display:block;
padding:12px;
color:#9ca3af;
font-size:14px;
text-align:center;
transition:0.25s;
}

.header .menu-mobile a:hover{
background:#1a1a1a;
color:#fff;
}

.header .menu-mobile.show{
display:block;
}

/* ================= MOBILE DROPDOWN ================= */

.mobile-dropdown{
width:100%;
}

.mobile-dropdown-toggle{
width:100%;
background:none;
border:none;
padding:12px;
color:#9ca3af;
font-size:14px;
text-align:center;
cursor:pointer;
border-top:1px solid #222;
}

.mobile-dropdown-menu{
display:none;
background:#0d0d0d;
}

.mobile-dropdown-menu.open{
display:block;
}

.mobile-dropdown-menu a{
display:block;
padding:10px;
font-size:13px;
color:#9ca3af;
}

.mobile-dropdown-menu a:hover{
background:#1a1a1a;
color:#fff;
}

#faucetArrow{
display:inline-block;
margin-left:5px;
transition:0.3s;
}

#faucetArrow.rotate{
transform:rotate(180deg);
}

/* ================= CONTAINER ================= */

.container{
padding:56px 20px 40px;
text-align:center;
}

/* ================= LOGO ================= */

.container .logo{
width:104px;
margin:0 auto 14px;
display:block;

filter:
drop-shadow(
0 0 12px rgba(20,241,149,0.08)
);
}

/* ================= HERO ================= */

.container h1{
margin-bottom:10px;
font-size:30px;
font-weight:600;
line-height:1.2;
letter-spacing:-0.5px;
color:#fff;
}

.container .subtitle{
max-width:650px;
margin:0 auto 14px;
color:#9ca3af;
font-size:15px;
line-height:1.9;
}

.container .micro-top{
margin-bottom:18px;
font-size:13px;
color:var(--accent);
}

/* ================= STATS ================= */

.container .stats{
display:inline-block;
background:#111;
border:1px solid #222;
padding:8px 14px;
border-radius:10px;
font-size:13px;
color:#aaa;
margin-bottom:28px;
}

/* ================= CARD ================= */

.container .card{
background:#111;
padding:22px;
border-radius:14px;
border:1px solid #222;
max-width:420px;
margin:24px auto;

box-shadow:
0 0 0 1px rgba(255,255,255,0.01),
0 10px 30px rgba(0,0,0,0.35);
}

/* ================= INPUT ================= */

.container input{
width:100%;
padding:15px;
border-radius:10px;
border:none;
margin-bottom:14px;
font-size:14px;
text-align:center;
outline:none;
background:#fff;
color:#111;
}

.container input::placeholder{
color:#666;
}

/* ================= CAPTCHA ================= */

.container .captcha-box{
margin:16px 0;
display:flex;
justify-content:center;
}

/* ================= BUTTON ================= */

.container button{
width:100%;
padding:15px;
border:none;
border-radius:10px;
background:var(--accent);
color:#000;
font-weight:600;
cursor:pointer;
transition:0.2s;
font-size:14px;
}

.container button:hover{
background:var(--accent-hover);
}

/* ================= STATUS ================= */

.container .status{
margin-top:18px;
font-size:14px;
line-height:1.8;
}

.success{
color:#22c55e;
}

.error{
color:#ef4444;
}

.cooldown{
color:var(--accent);
}

/* ================= TX LINK ================= */

.tx-link{
display:inline-block;
margin-top:10px;
font-size:13px;
color:var(--accent);
}

/* ================= SPINNER ================= */

.spinner{
width:16px;
height:16px;
border:2px solid #000;
border-top:2px solid transparent;
border-radius:50%;
display:inline-block;
margin-right:8px;
animation:spin 0.6s linear infinite;
vertical-align:middle;
}

@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

/* ================= CONTENT ================= */

.container section{
max-width:800px;
margin:82px auto 0;
text-align:left;
padding:0 2px;
}

/* SECTION TITLE */

.container section h2{
margin-bottom:26px;
font-size:26px;
font-weight:600;
line-height:1.3;
letter-spacing:-0.4px;
color:#fff;
}

/* PARAGRAPH */

.container section p{
color:#a1a1aa;
font-size:15px;
line-height:2;
margin-bottom:28px;
font-weight:400;
letter-spacing:0.1px;
}

/* LAST PARAGRAPH */

.container section p:last-child{
margin-bottom:0;
}

/* LIST */

.container section ul{
color:#a1a1aa;
font-size:15px;
line-height:1.9;
padding-left:18px;
margin-bottom:24px;
}

/* LIST ITEM */

.container section ul li{
margin-bottom:10px;
padding-left:2px;
}

/* STRONG */

.container section b,
.container section strong{
color:#fff;
font-weight:600;
}

/* ================= FAQ ================= */

.container .faq-item{
border-top:1px solid #1b1b1b;
padding:18px 0;
}

.container .faq-question{
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
font-weight:500;
font-size:15px;
line-height:1.7;
color:#fff;
gap:20px;
}

.container .faq-question::after{
content:"+";
font-size:18px;
font-weight:600;
color:#fff;
flex-shrink:0;
}

.container .faq-item.active .faq-question::after{
content:"−";
}

.container .faq-answer{
display:none;
padding-top:14px;
}

.container .faq-answer p{
margin:0;
color:#a1a1aa;
font-size:14px;
line-height:1.95;
}

.container .faq-item.active .faq-answer{
display:block;
}

/* ================= INTERNAL LINKS ================= */

.container .faucet-links{
margin-top:56px;
font-size:13px;
text-align:center;
line-height:2.4;
padding:0 10px;
}

.container .faucet-links a{
color:var(--accent);
margin:0 5px;
transition:0.2s;
}

.container .faucet-links a:hover{
opacity:0.85;
}

/* ================= FOOTER ================= */

.footer{
width:100%;
margin-top:90px;
}

.footer-main{
background:#000;
text-align:center;
padding:42px 20px 34px;
border-top:1px solid #111;
}

/* MENU */

.footer-menu{
margin-bottom:24px;
font-size:13px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
}

.footer-menu a{
color:#9ca3af;
transition:0.25s;
}

.footer-menu a:hover{
color:#fff;
}

/* LOGO */

.footer-logo{
width:34px;
margin:0 auto 12px;
display:block;
}

/* TEXT */

.footer-title{
font-size:14px;
margin-bottom:4px;
}

.footer-title a{
color:#fff;
}

.footer-tagline{
color:#9ca3af;
font-size:11px;
margin-bottom:8px;
}

/* SUPPORTED */

.footer-supported{
color:#6b7280;
font-size:10px;
font-style:italic;
}

/* BOTTOM */

.footer-bottom{
background:#0b0b0b;
text-align:center;
padding:18px 10px;
border-top:1px solid #111;
}

.copyright{
color:#9ca3af;
font-size:13px;
}

.precision{
color:#6b7280;
font-size:11px;
}

/* ================= FIX COLOR ================= */

.precision,
.precision a,
.footer-supported,
.footer-supported a{
color:#6b7280;
}

.precision a:hover,
.footer-supported a:hover{
opacity:0.8;
}

/* ================= POPUP ================= */

#gate{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
display:none;
align-items:center;
justify-content:center;
z-index:2147483647;
pointer-events:auto;
background:rgba(0,0,0,0.65);
}

/* BOX */

#gate .verify-root{
background:#000;
padding:28px 24px;
border-radius:14px;
border:2px solid rgba(255,255,255,0.6);
max-width:340px;
width:92%;
text-align:center;

box-shadow:
0 0 25px rgba(0,0,0,0.6),
0 0 8px rgba(255,255,255,0.08);
}

/* CLOCK */

#gate .clock{
width:80px;
height:80px;
border:1px solid rgba(255,255,255,0.6);
border-radius:50%;
position:relative;
margin:0 auto 20px;
}

#gate .hand{
position:absolute;
bottom:50%;
left:50%;
transform-origin:bottom;
}

/* HAND */

#gate .hour{
width:2px;
height:20px;
background:var(--accent);
}

#gate .minute{
width:2px;
height:28px;
background:#ffffff;
}

#gate .second{
width:1px;
height:34px;
background:#ef4444;
}

#gate .clock::after{
content:"";
position:absolute;
width:4px;
height:4px;
background:#ffffff;
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

/* TEXT */

#gate .title{
font-size:15px;
margin-bottom:10px;
color:#fff;
}

#gate .subtitle{
font-size:12px;
color:#9ca3af;
margin-bottom:18px;
}

#gate .turnstile-wrap{
margin:18px 0;
display:flex;
justify-content:center;
}

#gate .desc{
font-size:11px;
color:var(--accent);
margin-top:10px;
}

/* ================= RESPONSIVE ================= */

@media(min-width:768px){

.container{
padding:88px 20px 50px;
}

.container h1{
font-size:34px;
}

.container .subtitle{
font-size:16px;
}

}

@media(max-width:768px){

.header .menu-desktop{
display:none;
}

.header .hamburger{
display:flex;
}

.container section{
margin:74px auto 0;
}

.container section h2{
font-size:22px;
margin-bottom:24px;
}

.container section p{
font-size:15px;
line-height:2.05;
margin-bottom:30px;
}

.container section ul{
font-size:15px;
line-height:1.9;
}

.container section ul li{
margin-bottom:10px;
}

.container .faq-question{
font-size:15px;
}

.container .faq-answer p{
font-size:14px;
line-height:1.95;
}

}