:root{
  --bg:#05070d; --bg2:#0a0f1c; --glass:rgba(14,22,40,.55); --glass2:rgba(20,30,54,.6);
  --line:rgba(120,200,255,.16); --line2:rgba(120,220,255,.32);
  --txt:#e9f1ff; --dim:#93a3bf; --dim2:#5f6f8c;
  --cy:#38e0ff; --cy2:#7af0ff; --gold:#f0b90b; --gold2:#ffd76a;
  --red:#ff6b6b; --ok:#3ee6a1; --rad:20px;
  --mono:ui-monospace,"JetBrains Mono","SFMono-Regular","Cascadia Code",Menlo,Consolas,monospace;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  margin:0; color:var(--txt); overflow-x:hidden; min-height:100vh;
  font:16px/1.65 -apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:
    radial-gradient(900px 600px at 78% -5%, rgba(240,185,11,.16), transparent 60%),
    radial-gradient(800px 600px at 0% 20%, rgba(56,224,255,.10), transparent 60%),
    url("img/bg.webp") center top / cover fixed,
    var(--bg);
}
#fx{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.8; }
.scan{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); mix-blend-mode:overlay; }
body::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(rgba(56,224,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(56,224,255,.05) 1px,transparent 1px);
  background-size:56px 56px; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%); mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 75%);
  animation:gridmove 18s linear infinite; }
@keyframes gridmove{ to{ background-position:0 56px, 56px 0; } }
.wrap{ max-width:1120px; margin:0 auto; padding:0 20px 36px; position:relative; z-index:1; }
a{ color:var(--cy); text-decoration:none; }
.mono{ font-family:var(--mono); }
.dim{ color:var(--dim2); }
em{ font-style:normal; background:linear-gradient(92deg,var(--gold2),var(--gold) 45%,var(--cy2)); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 18px rgba(240,185,11,.25)); }

/* top bar */
.top{ display:flex; align-items:center; justify-content:space-between; padding:18px 0; position:sticky; top:0; z-index:5;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); background:linear-gradient(180deg,rgba(5,7,13,.85),rgba(5,7,13,.35)); margin:0 -20px; padding-left:20px; padding-right:20px; border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.2em; font-size:17px; }
.brand small{ display:block; font:600 9.5px/1.2 var(--mono); letter-spacing:.24em; color:var(--cy); }
.brand img{ width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 1px rgba(240,185,11,.6),0 0 22px rgba(240,185,11,.35); }
.connect{ font:700 13.5px var(--mono); letter-spacing:.04em; color:#041018; background:linear-gradient(90deg,var(--cy),var(--cy2)); border:0; border-radius:999px; padding:10px 18px; cursor:pointer;
  box-shadow:0 0 22px rgba(56,224,255,.45); white-space:nowrap; }
.connect.on{ background:rgba(56,224,255,.08); color:var(--cy2); border:1px solid var(--line2); box-shadow:none; }

/* hero */
.hero{ display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:center; padding:46px 0 8px; margin-top:0; }
.tag{ display:inline-flex; align-items:center; gap:9px; font:600 11.5px var(--mono); letter-spacing:.2em; color:var(--cy2);
  border:1px solid var(--line2); border-radius:999px; padding:6px 13px; background:rgba(56,224,255,.06); }
.tag i{ width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); animation:pulse 1.8s infinite; }
@keyframes pulse{ 50%{ opacity:.3 } }
h1{ font-size:clamp(38px,6.4vw,70px); line-height:1.1; margin:18px 0 16px; font-weight:900; letter-spacing:.01em; }
.lede{ color:var(--dim); font-size:17px; margin:0 0 24px; }
.hud{ position:relative; }
.hud::before,.hud::after{ content:""; position:absolute; width:16px; height:16px; border:2px solid var(--cy); pointer-events:none; opacity:.85; }
.hud::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; border-top-left-radius:6px; }
.hud::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; border-bottom-right-radius:6px; }
.countdown{ max-width:460px; padding:16px 20px; border-radius:16px; background:var(--glass); border:1px solid var(--line2);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 0 40px rgba(56,224,255,.08) inset; }
.hud-top,.hud-bot{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--dim); letter-spacing:.12em; }
.cd-num{ font-size:clamp(40px,7vw,58px); font-weight:800; line-height:1.15; color:var(--gold2); letter-spacing:.04em; margin:6px 0;
  text-shadow:0 0 18px rgba(240,185,11,.55),0 0 42px rgba(240,185,11,.25); font-variant-numeric:tabular-nums; }
.cd-num.txt{ font-size:30px; }
.hero-actions{ display:flex; gap:12px; margin-top:22px; flex-wrap:wrap; }
.btn{ display:inline-block; padding:13px 26px; border-radius:12px; font-weight:800; letter-spacing:.06em; color:#130d00;
  background:linear-gradient(90deg,var(--gold),var(--gold2)); box-shadow:0 0 28px rgba(240,185,11,.4); }
.btn.ghost{ background:transparent; color:var(--cy2); border:1px solid var(--line2); box-shadow:none; }
.hero-art{ position:relative; aspect-ratio:1; max-width:500px; width:100%; justify-self:center; }
.hero-art img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 71%); mask-image:radial-gradient(circle,#000 55%,transparent 71%); }
.ring{ position:absolute; inset:4%; border-radius:50%; border:1px dashed rgba(56,224,255,.35); animation:spin 40s linear infinite; }
.ring.r2{ inset:-1%; border:1px solid rgba(240,185,11,.18); border-top-color:rgba(240,185,11,.7); animation-duration:14s; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* sections */
section{ margin-top:84px; }
.kick{ font-size:12px; color:var(--cy); letter-spacing:.24em; display:flex; align-items:center; gap:12px; }
.kick::after{ content:""; height:1px; flex:1; background:linear-gradient(90deg,var(--line2),transparent); }
h2{ font-size:clamp(28px,4.6vw,42px); margin:10px 0 8px; font-weight:900; line-height:1.2; }
.sec-sub{ color:var(--dim); margin:0 0 24px; font-size:16px; }
.card{ border-radius:var(--rad); padding:22px; }
.glass{ background:linear-gradient(180deg,var(--glass2),var(--glass)); border:1px solid var(--line);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05); }
.lbl{ font-size:12px; color:var(--dim); letter-spacing:.16em; }

/* progress */
.prog-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; gap:12px; }
.prog-head .big{ font-size:30px; font-weight:800; color:var(--cy2); text-shadow:0 0 16px rgba(56,224,255,.4); }
.prog-head .big small{ font-size:14px; color:var(--dim); text-shadow:none; }
.bar{ height:12px; border-radius:99px; overflow:hidden; position:relative; background:rgba(56,224,255,.06); border:1px solid var(--line2); }
.bar::before{ content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(56,224,255,.12) 9px 10px); }
.bar i{ display:block; height:100%; width:0; border-radius:99px; position:relative; min-width:14px;
  background:linear-gradient(90deg,var(--cy),var(--gold) 70%,var(--gold2)); box-shadow:0 0 14px rgba(56,224,255,.7),0 0 26px rgba(240,185,11,.4); transition:width .8s; }
.bar i::after{ content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.7) 50%,transparent 80%); transform:translateX(-100%); animation:shine 2.4s infinite; }
@keyframes shine{ 60%,100%{ transform:translateX(100%); } }
.bar i.empty{ min-width:0; box-shadow:none; }
.prog-sub{ display:flex; justify-content:space-between; color:var(--dim); font-size:12.5px; margin-top:8px; letter-spacing:.06em; }

/* mint */
.mint-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:20px; align-items:center; }
.art img{ width:100%; height:auto; display:block; border-radius:var(--rad);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 50%,transparent 78%); mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 50%,transparent 78%); }
.costbox{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:18px; }
.duobox{ background:rgba(5,10,20,.55); border:1px solid var(--line); border-radius:12px; padding:11px 14px; }
.duobox span{ display:block; color:var(--dim); font-size:12.5px; }
.duobox b{ font-size:17px; color:var(--gold2); word-break:break-all; }
.pick{ display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.stepper{ display:flex; align-items:center; border:1px solid var(--line2); border-radius:12px; overflow:hidden; background:rgba(5,10,20,.55); }
.stepper button{ width:42px; height:42px; background:rgba(56,224,255,.08); color:var(--cy2); border:0; font-size:20px; cursor:pointer; }
.stepper output{ width:52px; text-align:center; font-size:18px; font-weight:800; }
.quick{ display:grid; grid-template-columns:repeat(10,1fr); gap:6px; flex:1; min-width:240px; }
.quick button{ font:700 13.5px var(--mono); background:rgba(5,10,20,.55); border:1px solid var(--line); color:var(--txt); border-radius:9px; padding:9px 0; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.quick button:hover:not(:disabled){ border-color:var(--cy); }
.quick button.on{ background:rgba(56,224,255,.16); border-color:var(--cy); color:var(--cy2); box-shadow:0 0 14px rgba(56,224,255,.35); }
.quick button:disabled,.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.cta{ width:100%; margin-top:16px; border:0; border-radius:13px; padding:16px; font-size:17px; font-weight:800; letter-spacing:.06em; cursor:pointer;
  color:#130d00; background:linear-gradient(90deg,var(--gold),var(--gold2)); box-shadow:0 0 30px rgba(240,185,11,.4); }
.cta.free{ background:linear-gradient(90deg,var(--cy),var(--cy2)); color:#041018; box-shadow:0 0 30px rgba(56,224,255,.45); }
.cta:disabled{ background:rgba(148,163,191,.12); color:var(--dim); box-shadow:none; cursor:not-allowed; border:1px solid var(--line); }
#mintStatus{ font-size:14px; margin-top:10px; } #mintStatus:empty{ margin:0; }
.ok{ color:var(--ok); } .err{ color:var(--red); }
#myLine{ display:none; margin-top:8px; background:rgba(56,224,255,.06); border:1px solid var(--line2); border-radius:12px; padding:10px 14px; font-size:14px; }
.rules{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:6px; font-size:13.5px; color:var(--dim); }
.rules li{ padding-left:18px; position:relative; }
.rules li::before{ content:"◆"; position:absolute; left:0; color:var(--cy); font-size:10px; top:4px; }
.rules b{ color:var(--txt); }

/* invite */
.invite-card{ overflow:hidden; }
.invite-bg{ position:absolute; inset:0; background:url("img/invite.webp") center/cover; opacity:.28; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 75%); mask-image:linear-gradient(180deg,#000 0%,transparent 75%); }
.invite-card > *{ position:relative; }
.pool{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.pool-cell{ background:rgba(5,10,20,.6); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; min-width:0; }
.pool-cell.total{ border-color:rgba(240,185,11,.45); box-shadow:0 0 30px rgba(240,185,11,.12) inset; }
.pool-cell span{ display:block; font-size:12.5px; color:var(--dim); letter-spacing:.14em; }
.pool-cell b{ display:block; font-size:clamp(24px,3.6vw,38px); font-weight:800; line-height:1.25; margin:6px 0 2px; color:var(--cy2);
  text-shadow:0 0 18px rgba(56,224,255,.45); word-break:break-all; font-variant-numeric:tabular-nums; }
.pool-cell.total b{ color:var(--gold2); text-shadow:0 0 18px rgba(240,185,11,.5); }
.pool-cell small{ color:var(--dim2); font-size:12px; }
.invite-link{ display:flex; gap:8px; margin-top:18px; }
.invite-link code{ flex:1; min-width:0; background:rgba(5,10,20,.7); border:1px solid var(--line2); border-radius:11px; padding:11px 12px; font-size:13px; color:var(--cy2); word-break:break-all; }
.invite-link button,.ca button{ font:700 13px var(--mono); background:rgba(56,224,255,.1); color:var(--cy2); border:1px solid var(--line2); border-radius:11px; padding:8px 16px; cursor:pointer; white-space:nowrap; }
.invite-link button:disabled,.ca button:disabled{ opacity:.4; cursor:not-allowed; }
.lbcard{ margin-top:16px; }
.lbcard h3{ margin:0 0 10px; font-size:18px; } .lbcard h3 small{ font-size:11.5px; color:var(--cy); margin-left:8px; letter-spacing:.2em; }
.lbwrap{ overflow-x:auto; }
.lb{ width:100%; border-collapse:collapse; font-size:14px; }
.lb th{ text-align:left; color:var(--dim); font-weight:600; font-size:12px; letter-spacing:.1em; padding:9px 10px; border-bottom:1px solid var(--line2); }
.lb td{ padding:10px; border-bottom:1px solid var(--line); font-family:var(--mono); font-size:13.5px; }
.lb tr:last-child td{ border-bottom:0; }
.lb td:first-child{ color:var(--gold2); font-weight:800; width:60px; }
.lb tr.me td{ background:rgba(56,224,255,.08); }
.lbempty{ text-align:center; color:var(--dim2); padding:26px 10px !important; font-family:inherit !important; }
.quota{ text-align:center; color:var(--dim); font-size:13px; margin-top:8px; }

/* metrics */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.m{ position:relative; overflow:hidden; background:linear-gradient(180deg,var(--glass2),var(--glass)); border:1px solid var(--line); border-radius:16px; padding:16px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:border-color .2s, transform .2s; }
.m:hover{ border-color:var(--line2); transform:translateY(-2px); }
.m::before{ content:""; position:absolute; left:0; top:0; height:2px; width:38%; background:linear-gradient(90deg,var(--cy),transparent); }
.m span{ display:block; color:var(--dim); font-size:12.5px; letter-spacing:.1em; }
.m b{ display:block; font-size:22px; font-weight:800; color:var(--txt); margin-top:4px; white-space:nowrap; }
.m small{ display:block; color:var(--dim2); font-size:12px; margin-top:2px; }
.ca{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:16px; font-size:12.5px; letter-spacing:.14em; }
.ca code{ background:rgba(5,10,20,.7); border:1px solid var(--line2); border-radius:9px; padding:6px 11px; font-size:13px; color:var(--gold2); letter-spacing:0; word-break:break-all; }
.ca button{ padding:6px 12px; }
.scanlink{ font:700 13px var(--mono); }

/* faq */
.faq{ padding:6px 22px; }
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq details:last-child{ border-bottom:0; }
.faq summary{ font-weight:800; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"Q."; font-family:var(--mono); color:var(--cy); margin-right:8px; }
.faq summary::after{ content:"+"; color:var(--cy); font-family:var(--mono); margin-left:auto; }
.faq details[open] summary::after{ content:"−"; }
.faq p{ margin:6px 0 0 28px; color:var(--dim); font-size:14.5px; }

footer{ margin-top:56px; border-top:1px solid var(--line); padding-top:16px; color:var(--dim2); font-size:11.5px; text-align:center; letter-spacing:.12em; }

.rv{ opacity:0; transform:translateY(18px); transition:opacity .7s, transform .7s; } .rv.in{ opacity:1; transform:none; }

@media (max-width:900px){
  .hero{ grid-template-columns:1fr; padding-top:26px; text-align:center; }
  .hero-art{ order:-1; max-width:300px; }
  .countdown{ margin:0 auto; text-align:left; }
  .hero-actions{ justify-content:center; }
  .mint-grid{ grid-template-columns:1fr; }
  .mint-art{ display:none; }
  .metrics{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .wrap{ padding:0 16px 30px; } .top{ margin:0 -16px; padding:14px 16px; }
  .brand small{ display:none; }
  section{ margin-top:64px; }
  .pool{ grid-template-columns:1fr 1fr; } .pool-cell.total{ grid-column:1 / -1; }
  .quick{ grid-template-columns:repeat(5,1fr); min-width:0; flex-basis:100%; }
  .pick .stepper{ display:none; }
  .lb th,.lb td{ padding:8px 6px; } .lb td:first-child{ width:40px; }
  .faq{ padding:4px 16px; } .faq p{ margin-left:0; }
  .m b{ font-size:19px; }
  .hero-art{ max-width:240px; }
}
@media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }
.top{ margin:0; padding-left:0; padding-right:0; background:rgba(5,7,13,.72); box-shadow:0 0 0 100vmax rgba(5,7,13,.72); clip-path:inset(0 -100vmax); }
@media (max-width:640px){ .top{ margin:0; padding:14px 0; } }
.fine{ color:var(--dim2); font-size:12.5px; margin:10px 0 0; }
.m.hl{ border-color:rgba(240,185,11,.4); } .m.hl b{ color:var(--gold2); text-shadow:0 0 14px rgba(240,185,11,.35); } .m.hl::before{ background:linear-gradient(90deg,var(--gold),transparent); }
.rules b.mono{ font-size:12.5px; }
@media (max-width:640px){ .m b{ font-size:17px; } .m small{ font-size:11.5px; } }
.tag{ font-family:inherit; letter-spacing:.12em; font-size:12.5px; }
.kick{ font-family:inherit !important; letter-spacing:.18em; font-size:13px; }
.brand small{ font-family:inherit; letter-spacing:.18em; font-size:10px; }
.hud-top,.hud-bot{ letter-spacing:.06em; }

/* =====================================================================
   v5 · premium layer (更炫 · 科技感 · 质感)  — visual only
   ===================================================================== */
@property --ang{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
:root{ --metal:linear-gradient(100deg,#9c6b00 0%,#f0b90b 14%,#fff3c4 28%,#ffd76a 40%,#c8900a 55%,#fff6d8 70%,#f0b90b 82%,#7af0ff 100%);
  --chrome:linear-gradient(180deg,#ffffff 0%,#e3ecff 45%,#9fb0cf 100%); }
body{ position:relative; }
body{ background:
    radial-gradient(1100px 700px at 80% -8%, rgba(240,185,11,.14), transparent 60%),
    radial-gradient(900px 700px at -5% 18%, rgba(56,224,255,.10), transparent 60%),
    url("img/bg.webp") center top / cover fixed, #04060b; }

/* aurora / nebula layer (absolute -> spans whole page) */
.bgfx{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.au{ position:absolute; display:block; width:80vmax; height:80vmax; border-radius:50%; opacity:.55; will-change:transform;
  animation:drift 26s ease-in-out infinite alternate; }
.a1{ top:-30vmax; right:-25vmax; background:radial-gradient(closest-side,rgba(240,185,11,.30),rgba(240,120,11,.08) 55%,transparent); }
.a2{ top:18%; left:-38vmax; background:radial-gradient(closest-side,rgba(40,200,255,.26),rgba(60,90,255,.08) 55%,transparent); animation-duration:32s; animation-direction:alternate-reverse; }
.a3{ top:48%; right:-40vmax; background:radial-gradient(closest-side,rgba(140,80,255,.20),rgba(56,224,255,.06) 55%,transparent); animation-duration:38s; }
.a4{ top:78%; left:-30vmax; background:radial-gradient(closest-side,rgba(240,185,11,.16),rgba(56,224,255,.07) 55%,transparent); animation-duration:30s; }
@keyframes drift{ 0%{ transform:translate3d(0,0,0) scale(1); } 100%{ transform:translate3d(6vmax,4vmax,0) scale(1.12); } }
.grain{ position:fixed; inset:-50%; z-index:0; pointer-events:none; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.scan{ background:repeating-linear-gradient(180deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px); }

/* header */
.top{ background:rgba(4,6,11,.66); box-shadow:0 0 0 100vmax rgba(4,6,11,.66); border-bottom:0; }
.top::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,224,255,.55) 30%,rgba(255,215,106,.8) 50%,rgba(56,224,255,.55) 70%,transparent);
  background-size:200% 100%; animation:flow 6s linear infinite; }
@keyframes flow{ to{ background-position:-200% 0; } }
.brand > div{ background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand small{ -webkit-text-fill-color:var(--cy); }
.brand img{ animation:logoGlow 3.2s ease-in-out infinite; }
@keyframes logoGlow{ 50%{ box-shadow:0 0 0 1px rgba(255,215,106,.9),0 0 34px rgba(240,185,11,.6); } }
.connect{ position:relative; overflow:hidden; background:linear-gradient(100deg,#20c8ff,#7af0ff 50%,#c9fbff); box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 6px 24px rgba(56,224,255,.45); }

/* typography: chrome + metallic gold */
h1,h2{ background:var(--chrome); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.015em; }
h1{ filter:drop-shadow(0 6px 30px rgba(56,224,255,.12)); }
em{ background:var(--metal); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(240,185,11,.28)); animation:metal 7s linear infinite; }
@keyframes metal{ to{ background-position:-220% 0; } }
.lede{ color:#a9b7d1; }
.kick{ color:var(--cy2); }
.kick::before{ content:""; width:8px; height:8px; flex:none; background:var(--cy); box-shadow:0 0 12px var(--cy); transform:rotate(45deg); animation:pulse 2s infinite; }
.kick::after{ background:linear-gradient(90deg,rgba(56,224,255,.6),rgba(240,185,11,.25) 40%,transparent); }

/* hero headline glitch-in */
.glitch-in{ animation:glitch 1.3s steps(1) both; }
@keyframes glitch{
  0%{ opacity:0; clip-path:inset(0 0 100% 0); }
  8%{ opacity:1; clip-path:inset(10% 0 60% 0); transform:translate(-6px,0) skewX(-8deg); }
  16%{ clip-path:inset(55% 0 12% 0); transform:translate(6px,0); }
  24%{ clip-path:inset(0 0 40% 0); transform:translate(-3px,0) skewX(4deg); }
  32%{ clip-path:inset(30% 0 0 0); transform:translate(4px,0); filter:drop-shadow(-3px 0 0 rgba(255,40,140,.7)) drop-shadow(3px 0 0 rgba(56,224,255,.8)); }
  44%{ clip-path:inset(0 0 0 0); transform:translate(-2px,0); }
  52%{ transform:none; filter:drop-shadow(2px 0 0 rgba(255,40,140,.5)) drop-shadow(-2px 0 0 rgba(56,224,255,.6)); }
  64%,100%{ clip-path:none; transform:none; filter:drop-shadow(0 6px 30px rgba(56,224,255,.12)); }
}

/* hero perspective floor */
.hero{ position:relative; }
.hero::before{ content:""; position:absolute; left:-20px; right:-20px; bottom:-40px; height:340px; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(56,224,255,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(56,224,255,.28) 1px,transparent 1px);
  background-size:48px 48px; transform-origin:50% 100%; transform:perspective(420px) rotateX(62deg);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 85%); mask-image:linear-gradient(0deg,#000 0%,transparent 85%);
  animation:floor 3.5s linear infinite; opacity:.55; }
@keyframes floor{ to{ background-position:0 48px,0 0; } }

/* hero art */
.hero-art img{ position:relative; z-index:1; filter:saturate(1.1) contrast(1.05); animation:float 7s ease-in-out infinite; }
@keyframes float{ 50%{ transform:translateY(-10px); } }
.halo{ position:absolute; inset:8%; border-radius:50%; z-index:0;
  background:radial-gradient(closest-side,rgba(240,185,11,.35),rgba(56,224,255,.18) 55%,transparent 75%); filter:blur(18px); animation:halo 4.5s ease-in-out infinite; }
@keyframes halo{ 50%{ opacity:.6; transform:scale(1.06); } }
.ring{ z-index:2; pointer-events:none; }
.ring.r3{ inset:-7%; border:0; animation-duration:70s; animation-direction:reverse;
  background:repeating-conic-gradient(rgba(122,240,255,.55) 0 .6deg,transparent .6deg 6deg);
  -webkit-mask-image:radial-gradient(circle,transparent 66%,#000 66.5%,#000 68.5%,transparent 69%); mask-image:radial-gradient(circle,transparent 66%,#000 66.5%,#000 68.5%,transparent 69%); opacity:.7; }
.orbit{ position:absolute; inset:-1%; border-radius:50%; z-index:2; animation:spin 9s linear infinite; pointer-events:none; }
.orbit i{ position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:#fff6d6;
  box-shadow:0 0 10px #ffd76a,0 0 24px #f0b90b,0 0 48px rgba(240,185,11,.6); }

/* glass: deeper, inner highlight */
.glass,.m,.pool-cell,.duobox{ position:relative; }
.glass{ background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent) top center / 70% 1px no-repeat,
    linear-gradient(155deg,rgba(32,48,84,.62) 0%,rgba(12,19,36,.58) 45%,rgba(7,11,22,.72) 100%);
  border:1px solid rgba(140,210,255,.14);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 60px rgba(56,224,255,.035); }
.countdown{ background:
    linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent) top center / 70% 1px no-repeat,
    linear-gradient(155deg,rgba(34,40,62,.7),rgba(8,12,22,.78)); border-color:rgba(240,185,11,.28);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.8),inset 0 0 50px rgba(240,185,11,.05); max-width:480px; }
.hud::before,.hud::after{ border-color:var(--gold2); filter:drop-shadow(0 0 6px rgba(240,185,11,.7)); z-index:3; }

/* animated conic glow edge */
.fxc > .edge,.fxc > .spot{ position:absolute !important; inset:-1px; border-radius:inherit; pointer-events:none; }
.edge{ padding:1px; z-index:2;
  background:conic-gradient(from var(--ang),transparent 0deg,transparent 200deg,rgba(56,224,255,.9) 260deg,#fff6d6 300deg,rgba(240,185,11,.95) 330deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:ang 6s linear infinite; }
.m > .edge,.pool-cell > .edge{ animation-duration:8s; }
@keyframes ang{ to{ --ang:360deg; } }
.spot{ z-index:1; overflow:hidden; opacity:0; transition:opacity .35s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(122,240,255,.13),rgba(240,185,11,.05) 45%,transparent 70%); }
.fxc:hover > .spot{ opacity:1; }
/* scan beam on key panels */
.countdown > .spot,.mintcard > .spot{ opacity:1; background:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),rgba(122,240,255,.12),transparent 70%); }
.countdown > .spot::after,.mintcard > .spot::after{ content:""; position:absolute; left:0; right:0; height:70px; top:-80px;
  background:linear-gradient(180deg,transparent,rgba(56,224,255,.07) 70%,rgba(122,240,255,.35) 98%,transparent);
  animation:beam 5.5s cubic-bezier(.5,0,.5,1) infinite; }
.mintcard > .spot::after{ animation-duration:8s; }
@keyframes beam{ 0%{ transform:translateY(0); } 70%,100%{ transform:translateY(calc(100% * 0 + 900px)); } }
.countdown > .spot::after{ animation-name:beamS; }
@keyframes beamS{ 0%{ transform:translateY(0); } 70%,100%{ transform:translateY(320px); } }

/* segmented countdown */
.cd-src{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cd-tiles{ display:flex; align-items:flex-start; gap:8px; margin:12px 0 10px; }
.cd-tiles[hidden]{ display:none; }
.cd-grp{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cd-grp small{ font:600 11px/1 -apple-system,"PingFang SC","Noto Sans SC",sans-serif; color:var(--dim); letter-spacing:.3em; padding-left:.3em; }
.cd-digits{ display:flex; gap:5px; }
.cd-d{ position:relative; display:grid; place-items:center; width:48px; height:64px; border-radius:10px; overflow:hidden;
  font-size:42px; font-weight:800; color:#ffe6a0; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,rgba(46,40,24,.9) 0%,rgba(24,20,10,.95) 49.5%,rgba(14,12,6,.98) 50.5%,rgba(30,24,10,.95) 100%);
  border:1px solid rgba(240,185,11,.38);
  box-shadow:inset 0 1px 0 rgba(255,240,190,.25),inset 0 -10px 20px rgba(0,0,0,.45),0 0 18px rgba(240,185,11,.18),0 10px 20px -8px rgba(0,0,0,.8);
  text-shadow:0 0 14px rgba(240,185,11,.75),0 0 30px rgba(240,185,11,.35); }
.cd-d::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,.65); box-shadow:0 1px 0 rgba(255,215,106,.12); }
.cd-d.tick{ animation:tick .45s cubic-bezier(.2,.8,.2,1); }
@keyframes tick{ 0%{ transform:translateY(-35%) scaleY(.7); opacity:.2; filter:brightness(2); } 100%{ transform:none; opacity:1; filter:none; } }
.cd-sep{ font-size:34px; line-height:64px; color:var(--gold2); text-shadow:0 0 12px rgba(240,185,11,.8); animation:pulse 1s steps(1) infinite; }

/* buttons: metallic + sheen sweep */
.btn,.cta,.connect{ position:relative; overflow:hidden; isolation:isolate; transition:transform .2s, box-shadow .2s; }
.btn,.cta{ background:linear-gradient(100deg,#c98f00,#f0b90b 25%,#ffe9a8 50%,#f0b90b 75%,#c98f00); box-shadow:0 0 0 1px rgba(255,240,190,.4) inset,0 10px 32px -6px rgba(240,185,11,.55); }
.btn.ghost{ background:rgba(56,224,255,.05); border:1px solid rgba(122,240,255,.45); box-shadow:inset 0 0 20px rgba(56,224,255,.08); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.btn::after,.cta:not(:disabled)::after,.connect:not(.on)::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.75) 50%,transparent 70%); transform:translateX(-120%); animation:sweep 4.5s ease-in-out infinite; }
.btn.ghost::after{ background:linear-gradient(110deg,transparent 30%,rgba(122,240,255,.35) 50%,transparent 70%); }
@keyframes sweep{ 0%,55%{ transform:translateX(-120%); } 85%,100%{ transform:translateX(120%); } }
.btn:hover,.cta:not(:disabled):hover{ transform:translateY(-2px); }
.cta:disabled{ background:
  repeating-linear-gradient(135deg,rgba(148,163,191,.06) 0 8px,transparent 8px 16px), rgba(148,163,191,.08); }

/* progress bar */
.bar{ height:14px; background:rgba(4,10,20,.8); border-color:rgba(122,240,255,.3); box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 20px rgba(56,224,255,.08); }
.prog-head .big{ font-size:34px; }

/* inner panels */
.duobox,.pool-cell,.stepper,.invite-link code{ background:linear-gradient(180deg,rgba(10,18,34,.85),rgba(4,8,16,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -12px 24px rgba(0,0,0,.3); }
.duobox b{ font-size:18px; }
.pool-cell{ border-radius:16px; padding:20px 14px; }
.pool-cell b{ letter-spacing:.02em; }
.pool-cell.total b,.m.hl b{ background:var(--metal); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:none;
  filter:drop-shadow(0 0 14px rgba(240,185,11,.35)); animation:metal 7s linear infinite; }
.pool-cell.total{ background:linear-gradient(180deg,rgba(40,30,8,.55),rgba(6,8,14,.9)); }
.invite-bg{ opacity:.34; }
.mint-art img{ animation:float 8s ease-in-out infinite; filter:drop-shadow(0 30px 40px rgba(56,224,255,.18)); }
.mint-art{ position:relative; }
.mint-art::after{ content:""; position:absolute; left:15%; right:15%; bottom:-6%; height:18%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(56,224,255,.35),transparent); filter:blur(8px); animation:halo 4.5s ease-in-out infinite; }

/* leaderboard */
.lb thead th{ background:linear-gradient(180deg,rgba(56,224,255,.08),transparent); color:var(--cy2); }
.lb tbody tr{ transition:background .2s; } .lb tbody tr:hover td{ background:rgba(56,224,255,.05); }

/* metrics: tilt + holo */
.metrics{ perspective:1000px; }
.m{ border-radius:16px; padding:18px 16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent) top center / 70% 1px no-repeat,
    linear-gradient(155deg,rgba(30,44,76,.6),rgba(8,12,24,.75));
  border-color:rgba(140,210,255,.13); box-shadow:0 20px 40px -20px rgba(0,0,0,.8),inset 0 0 30px rgba(56,224,255,.03);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .25s ease-out,border-color .2s,box-shadow .25s; }
.m:hover{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(10px); border-color:rgba(122,240,255,.38);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.9),0 0 30px rgba(56,224,255,.12),inset 0 0 30px rgba(56,224,255,.05); }
.m > .spot{ background:
  radial-gradient(200px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),transparent 65%),
  linear-gradient(115deg,transparent 25%,rgba(255,110,220,.12) 40%,rgba(120,240,255,.16) 50%,rgba(255,215,106,.14) 60%,transparent 75%);
  background-size:100% 100%,300% 300%; background-position:0 0,100% 100%; transition:opacity .35s,background-position 1.2s ease; mix-blend-mode:screen; }
.m:hover > .spot{ background-position:0 0,0 0; }
.m b{ position:relative; z-index:2; }
.ca code{ box-shadow:0 0 18px rgba(240,185,11,.12); }

/* faq */
.faq details{ transition:background .2s; } .faq summary{ transition:color .2s; } .faq summary:hover{ color:var(--cy2); }
.faq summary::before{ text-shadow:0 0 10px rgba(56,224,255,.7); }
footer{ border-top:0; position:relative; }
footer::before{ content:""; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,rgba(56,224,255,.5),rgba(240,185,11,.5),transparent); }

/* scroll reveal (only when JS + motion allowed) */
.rv-on .reveal{ opacity:0; translate:0 26px; transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms), translate .8s cubic-bezier(.2,.7,.2,1) var(--d,0ms); }
.rv-on .reveal.shown{ opacity:1; translate:0 0; }

@media (max-width:900px){
  .hero::before{ height:260px; bottom:-20px; }
  .ring.r3{ inset:-5%; }
}
@media (max-width:640px){
  .au{ width:110vmax; height:110vmax; }
  .cd-tiles{ gap:5px; justify-content:center; }
  .cd-digits{ gap:4px; }
  .cd-d{ width:38px; height:52px; font-size:32px; border-radius:8px; }
  .cd-sep{ font-size:26px; line-height:52px; }
  .countdown{ padding:16px 14px; }
  .prog-head .big{ font-size:28px; }
  .grain{ opacity:.05; }
}
@media (hover:none){ .spot{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .rv-on .reveal{ opacity:1; translate:none; }
  .edge{ background:conic-gradient(from 210deg,transparent 0deg 200deg,rgba(56,224,255,.9) 260deg,#fff6d6 300deg,rgba(240,185,11,.95) 330deg,transparent 360deg); }
}
@media (max-width:640px){ .hero::before{ left:-16px; right:-16px; } }
@media (min-width:1100px){
  .metrics{ grid-template-columns:repeat(5,1fr); }
  .m b{ font-size:20px; }
}