:root{
  --bg:#060a08; --bg2:#0a1310; --panel:#0d1712; --panel-hi:#122019;
  --border:#1c3327; --border-hi:#2b4d3a;
  --lime:#8CFF3D; --lime-dim:#4a8a26; --lime-glow:rgba(140,255,61,.35);
  --text:#e9ffe4; --muted:#7fa088; --faint:#3f5c4a;
  --danger:#ff5c5c; --gold:#ffcf5c;
  --disp:'Space Grotesk',sans-serif; --mono:'IBM Plex Mono',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%);
  color:var(--text); font-family:var(--disp); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--lime); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:1040px; margin:0 auto; padding:0 24px;}
header.site{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.15rem; letter-spacing:.02em;}
.brand .mark{font-size:1.4rem;}
nav.site-nav{display:flex; align-items:center; gap:18px; font-family:var(--mono); font-size:.85rem;}
nav.site-nav a{color:var(--muted);}
nav.site-nav a:hover{color:var(--lime);}
.btn{
  display:inline-block; font-family:var(--mono); font-weight:600; font-size:.85rem;
  padding:10px 18px; border-radius:8px; border:1px solid var(--border-hi);
  background:var(--panel-hi); color:var(--text); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, color .15s;
}
.btn:hover{border-color:var(--lime); color:var(--lime); text-decoration:none;}
.btn.primary{
  background:var(--lime); color:#04160a; border-color:var(--lime);
  box-shadow:0 0 24px var(--lime-glow);
}
.btn.primary:hover{color:#04160a; filter:brightness(1.08);}
.btn.block{display:block; width:100%; text-align:center;}
select.lang{
  font-family:var(--mono); font-size:.8rem; background:var(--panel);
  color:var(--muted); border:1px solid var(--border); border-radius:6px; padding:6px 8px;
}

.hero{padding:72px 24px 56px; text-align:center;}
.hero .eyebrow{
  font-family:var(--mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lime-dim); margin-bottom:14px;
}
.hero h1{
  font-size:clamp(2rem, 5vw, 3.4rem); line-height:1.08; margin:0 0 18px;
  text-wrap:balance;
}
.hero h1 .accent{color:var(--lime);}
.hero p.sub{color:var(--muted); font-size:1.05rem; max-width:620px; margin:0 auto 32px; line-height:1.6;}
.hero .cta-row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}

.section{padding:48px 24px;}
.section h2{font-size:1.5rem; margin:0 0 8px;}
.section p.lead{color:var(--muted); margin:0 0 32px; max-width:560px;}

.tier-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:14px;}
.tier-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:18px;
  display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.tier-card.soon > *:not(.soon-ribbon){opacity:.35; filter:grayscale(.4);}
.tier-card.soon .soon-ribbon{
  position:absolute; top:16px; right:-38px; width:160px; text-align:center;
  transform:rotate(40deg); transform-origin:center;
  background:var(--gold); color:#04160a; font-family:var(--mono); font-weight:700;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 0; box-shadow:0 2px 10px rgba(0,0,0,.5); z-index:2;
}
.tier-card .tier-mascot{width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; background:var(--bg2); margin-bottom:4px;}
.tier-card .name{font-weight:700; font-size:1.05rem;}
.tier-card .price{font-family:var(--mono); color:var(--lime); font-size:1.2rem;}
.tier-card .price small{color:var(--muted); font-size:.7rem; font-weight:400;}
.tier-card .limit{font-family:var(--mono); color:var(--muted); font-size:.78rem;}
.tier-card .caps{font-family:var(--mono); color:var(--muted); font-size:.72rem; border-top:1px dashed var(--border); padding-top:6px; margin-top:2px;}
.tier-card .caps:first-of-type{margin-top:8px;}
.tier-card.black{border-color:var(--gold); background:linear-gradient(160deg, var(--panel-hi), #1a1508);}
.tier-card.black .price{color:var(--gold);}

.nft-teaser{padding-top:8px;}
.nft-card{
  background:linear-gradient(155deg, var(--panel), #14100a 120%);
  border:1px solid var(--gold); border-radius:16px; padding:32px 28px;
  position:relative; overflow:hidden;
}
.nft-badge{
  display:inline-block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#04160a; background:var(--gold);
  padding:4px 10px; border-radius:20px; margin-bottom:14px; font-weight:600;
}
.nft-card h2{margin:0 0 8px; font-size:1.4rem;}
.nft-card .lead{margin:0 0 24px;}
.nft-perk-grid{display:flex; flex-direction:column; gap:1px; background:var(--border); border-radius:10px; overflow:hidden; border:1px solid var(--border);}
.nft-perk-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--bg2); padding:12px 16px; flex-wrap:wrap;
}
.nft-perk-row .tier-name{font-weight:600; font-size:.92rem;}
.nft-perk-row .perk{font-family:var(--mono); font-size:.82rem; color:var(--muted); text-align:right;}
.nft-perk-row .pct{color:var(--gold); font-weight:700; margin-right:4px;}
.nft-perk-row .community{color:var(--lime);}

footer.site{
  border-top:1px solid var(--border); padding:24px; text-align:center;
  color:var(--faint); font-family:var(--mono); font-size:.75rem;
}

.auth-shell{max-width:400px; margin:64px auto; padding:0 24px;}
.card{
  background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:28px;
}
.card h1{font-size:1.4rem; margin:0 0 6px;}
.card p.hint{color:var(--muted); font-size:.85rem; margin:0 0 24px;}
label{display:block; font-family:var(--mono); font-size:.78rem; color:var(--muted); margin:16px 0 6px;}
label:first-of-type{margin-top:0;}
input[type=email],input[type=password],input[type=text]{
  width:100%; padding:11px 12px; border-radius:8px; border:1px solid var(--border);
  background:var(--bg2); color:var(--text); font-family:var(--mono); font-size:.9rem;
}
input:focus{outline:none; border-color:var(--lime);}
.error-msg{
  background:rgba(255,92,92,.1); border:1px solid var(--danger); color:#ffb3b3;
  border-radius:8px; padding:10px 12px; font-size:.82rem; margin-top:16px; display:none;
}
.error-msg.show{display:block;}
.switch-link{text-align:center; margin-top:20px; font-size:.85rem; color:var(--muted);}

#welcomeMsg{overflow-wrap:anywhere; font-size:clamp(1.3rem, 4vw, 2rem);}
.dash-grid{display:grid; grid-template-columns:2fr 1fr; gap:18px; align-items:start;}
@media (max-width:760px){.dash-grid{grid-template-columns:1fr;}}
.stat-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px;}
.stat{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:16px 18px; flex:1; min-width:140px;
}
.stat .label{font-family:var(--mono); font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.stat .value{font-family:var(--mono); font-size:1.3rem; color:var(--lime); margin-top:4px;}
.ref-box{
  background:var(--panel); border:1px solid var(--border-hi); border-radius:12px; padding:18px;
}
.ref-code{
  font-family:var(--mono); background:var(--bg2); border:1px dashed var(--border-hi);
  border-radius:8px; padding:10px 12px; margin:10px 0; letter-spacing:.05em; word-break:break-all;
}
.admin-panel{
  margin-top:24px; border:1px solid var(--gold); border-radius:12px; padding:18px;
  background:rgba(255,207,92,.05);
}
.admin-panel h3{margin:0 0 4px; color:var(--gold); font-size:1rem;}
.admin-panel .row{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap;}
[hidden]{display:none!important;}