:root{
  --bg:#0B1220;
  --panel:#0e1628cc;
  --text:#F2F7FF;
  --muted:#98a4c4;
  --teal:#00F0FF;
  --acid:#7CFF4F;
  --glass: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.12);
  --shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px var(--border);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--text); background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,255,79,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(0,240,255,.18), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0b1220 100%);
  background-color: var(--bg);
}
a{color:var(--teal); text-decoration:none}
.container{width:min(1120px, 92vw); margin:0 auto}
/* NAV */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg, rgba(12,20,35,.85), rgba(12,20,35,.55));
  border-bottom:1px solid var(--border);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.4px}
.logo{height: 80px; width: auto; object-fit: contain}
.nav-cta{display:flex; gap:8px; align-items:center}
.social-icons{display:flex; gap:8px; margin-left:12px}
.social-icon{display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:var(--glass); border:1px solid var(--border); transition:.2s transform, .2s background}
.social-icon:hover{transform:translateY(-1px); background:var(--panel)}
.social-img{width:20px; height:20px; object-fit:contain}
.btn{
  appearance:none; border:1px solid var(--border); color:var(--text); background:linear-gradient(180deg, #15213d, #0f1a33);
  padding:10px 14px; border-radius:12px; font-weight:700; cursor:pointer; transition:.2s transform, .2s box-shadow, .2s border-color;
  box-shadow: var(--shadow);
}
.btn:hover{transform:translateY(-1px); border-color:rgba(0,240,255,.5)}
.btn.primary{background:linear-gradient(180deg, #00f0ff33, #00f0ff14); border-color:#00f0ff66; box-shadow:0 0 24px #00f0ff24, var(--shadow)}
.btn.ghost{background:transparent}
.pill{padding:6px 10px; border:1px dashed var(--border); border-radius:999px; color:var(--muted); font-size:12px}
/* HERO */
.hero{min-height:92vh; display:grid; align-items:center; position:relative; padding:0; background-image: url('img/banner.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat}
.hero-content{max-width: 600px; margin-left: auto; margin-right: 150px; text-align: left}
.kicker{color:var(--teal); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:12px}
h1{font-size: clamp(36px, 4.6vw, 64px); margin:8px 0 10px; line-height:1.05}
.sub{font-size: clamp(16px, 1.8vw, 18px); color:#d7def8; max-width:58ch}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 24px}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.countdown{display:flex; gap:10px; margin:18px 0 24px}
.timebox{min-width:78px; text-align:center; padding:10px; border-radius:12px; background:var(--glass); border:1px solid var(--border)}
.timebox .num{font-size:28px; font-weight:700}
.timebox .lab{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
/* SECTION */
section{padding:72px 0}
#what{background-image: url('img/potion-key-bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 500px}
#how{background-image: url('img/key-bg.png'); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 300px}
.section-title{font-size:28px; margin:0 0 32px}
.section-sub{color:#c9d2f2; margin:0 0 24px}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.card{background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow: var(--shadow)}
.label{display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.card .label{color:var(--acid)}
/* STEPPER */
.stepper{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; position:relative}
.step{background: var(--panel); border:1px solid var(--border); padding:18px; border-radius:16px; position:relative; display:flex; gap:16px; align-items:center}
.step::before{
  content: attr(data-step); position:absolute; top:-10px; left:14px; background: var(--teal); color:#00262a; font-weight:700; font-size:12px;
  border-radius:10px; padding:4px 8px; box-shadow:0 0 18px #00f0ff55
}
.step-image{flex: 0 0 30%; text-align:center}
.step-img{width:100%; max-width:120px; height:auto; object-fit:contain; border-radius:8px}
.step-content{flex: 1; min-width:0}
.step-content h3{margin:0 0 8px; font-size:18px}
.step-content p{margin:0; color:var(--muted); line-height:1.5}
/* TIER TABLE */
.tier-wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:20px; margin-top:40px}
table{width:100%; border-collapse:collapse; background: var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden}
th, td{padding:14px 12px; border-bottom:1px solid var(--border)}
th{background: linear-gradient(180deg, #142037, #0f1a31); text-align:left; font-size:13px; color:#dbe6ff}
tr:last-child td{border-bottom:none}
.tier-visual{text-align:center; padding:20px; min-height:200px; display:flex; align-items:center; justify-content:center}
.tier-img{width:100%; max-width:400px; height:auto; object-fit:contain; border-radius:12px; border:1px solid var(--border); background:var(--glass)}
/* STATS */
.stats{display:grid; grid-template-columns: 1fr; gap:16px}
.dash{background: var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px}
.grid-5{display:grid; grid-template-columns: repeat(5,1fr); gap:10px}
.tile{background: var(--glass); border:1px solid var(--border); border-radius:12px; padding:12px}
.tile .v{font-size:22px; font-weight:700}
/* LORE */
.lore{display:grid; grid-template-columns: .9fr 1.1fr; gap:20px}
.wire-visual{text-align:center; padding:20px; min-height:300px; display:flex; align-items:center; justify-content:center}
.wire-img{width:100%; max-width:400px; height:auto; object-fit:contain; border-radius:16px; border:1px solid var(--border); background:var(--glass)}
.lab-content{padding-top:40px}
.spacer{height:14px}
.tier-table{flex:1}
.tier-image{flex:1}
/* TRAITS */
.traits{display:grid; grid-template-columns: repeat(3,1fr); gap:12px}
.trait{position:relative; border:1px solid var(--border); border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#0f1932,#0b1326); aspect-ratio: 3/2}
.trait::before{content:"[REDACTED]"; position:absolute; z-index:2; top:10px; right:10px; font-size:11px; letter-spacing:.1em; color:#ffdddd; border:1px solid #ff8a9f; padding:4px 6px; border-radius:6px; background:#2a1016}
.trait .thumb{height:85%; background:
  repeating-linear-gradient(135deg, #14223b, #14223b 8px, #0e1a31 8px, #0e1a31 16px);
  filter: contrast(1.1) brightness(.95); display:flex; align-items:center; justify-content:center}
.trait-img{width:100%; height:100%; object-fit:cover; border-radius:8px}
.trait .veil{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.2)); transition:.2s opacity}
.trait:hover .veil{opacity:.85}
.trait .cap{padding:12px 12px 4px 12px; color:#cfe2ff; height:28px; display:flex; align-items:center; font-size:18px; line-height:1.0}
/* ROADMAP */
.road{position:relative; padding-top:20px}
.line{position:absolute; left:10px; right:10px; top:46px; height:2px; background:linear-gradient(90deg, #00f0ff55, transparent 60%, #7b61ff55)}
.nodes{display:grid; grid-template-columns: repeat(5,1fr); gap:8px}
.node{background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px; position:relative}
.dot{position:absolute; width:12px; height:12px; border-radius:50%; background: var(--teal); top:-7px; left:calc(50% - 6px); box-shadow:0 0 14px #00f0ff88}
/* FAQ */
.faq .item{border:1px solid var(--border); border-radius:12px; margin-bottom:10px; overflow:hidden; background: var(--panel)}
.faq summary{padding:14px; font-weight:600; cursor:pointer; list-style:none; color:var(--acid)}
.faq summary::-webkit-details-marker{display:none}
.faq .ans{padding:0 14px 14px; color:#cfe1ff}
/* FOOTER CTA */
.final{padding:84px 0; text-align:center; background:
  radial-gradient(600px 280px at 50% 0%, rgba(123,97,255,.15), transparent 70%),
  linear-gradient(180deg, #0b1220, #0b1220)}
.fine{color:var(--muted); font-size:12px; margin-top:10px}
.note{font-size:12px; color:#b9c7ea}
.row{display:flex; gap:10px; flex-wrap:wrap}
.center{display:flex; justify-content:center; align-items:center}
@media (max-width: 980px){
  .hero{
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4)), url('img/banner.jpg');
  }
  .hero-content{max-width: 100%; padding: 0 20px}
  .tier-wrap, .stats, .lore{grid-template-columns:1fr}
  .cards, .stepper, .traits{grid-template-columns:1fr}
  .grid-5{grid-template-columns:1fr 1fr}
  .nodes{grid-template-columns:1fr; gap:12px}
}