/* =========================================================
   Dynamic Airdrop Landing — DARK THEME
   Colors are token-driven: --primary is extracted from the
   token logo at runtime. Everything else is neutral so the
   accent color reads clearly regardless of hue.
   ========================================================= */

:root{
  /* Neutrals (dark base) */
  --bg:            #0a0a0a;
  --bg-2:          #0e0e0f;
  --surface:       #131315;
  --surface-2:     #17171a;
  --surface-3:     #1c1c20;
  --border:        rgba(255,255,255,.07);
  --border-2:      rgba(255,255,255,.12);
  --fg:            #f4f4f5;
  --fg-2:          #d4d4d8;
  --muted:         #8a8a92;
  --muted-2:       #6a6a72;
  --pos:           #22c55e;
  --neg:           #ef4444;

  /* Neutral tan palette — locked so every token renders with the same
     design language as the reference PDF. Only --token-accent tracks the
     extracted logo color (used sparingly for the pill dot / focus states). */
  --primary:       #b39072;
  --primary-2:     #d0b394;
  --primary-dark:  #7a5d46;
  --primary-glow:  rgba(179,144,114,.28);
  --accent:        var(--primary);
  --on-primary:    #0a0a0a;
  --token-accent:  #b39072;
  --token-glow:    rgba(179,144,114,.35);

  --radius:        14px;
  --radius-lg:     20px;
  --radius-pill:   999px;



  --shadow-sm:     0 1px 2px rgba(0,0,0,.4);
  --shadow-md:     0 8px 30px rgba(0,0,0,.35);
  --shadow-glow:   0 0 40px var(--primary-glow);

  --nav-h:         76px;
  --maxw:          1200px;

  --font-sans:     "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:     ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Cascadia Mono", monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--fg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;color:var(--fg)}
p{margin:0;color:var(--fg-2)}
.mono{font-family:var(--font-mono);font-size:12px}
.muted{color:var(--muted)}
.small{font-size:12px}
.pos{color:var(--pos)}
.neg{color:var(--neg)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Background layers ---------- */
.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 65%);
}
.bg-glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 40% at 85% 12%, var(--primary-glow), transparent 60%),
    radial-gradient(50% 40% at 10% 8%, rgba(255,255,255,.04), transparent 60%);
  filter:blur(20px);
  opacity:.9;
}

/* ---------- LOADER ---------- */
.loader{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  background:var(--bg);
  transition:opacity .5s ease, visibility .5s;
}
.loader.hide{opacity:0;visibility:hidden;pointer-events:none}
.loader-stage{display:grid;justify-items:center;gap:22px}
.orbit-load{position:relative;width:110px;height:110px}
.orbit-load .core{
  position:absolute;inset:34%;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%, var(--primary-2), var(--primary));
  box-shadow:var(--shadow-glow);
}
.orbit-load .orb{
  position:absolute;top:50%;left:50%;
  width:10px;height:10px;border-radius:50%;
  background:var(--primary);
  transform-origin:0 0;
  animation:orbit 2.4s linear infinite;
  box-shadow:0 0 10px var(--primary-glow);
}
.orbit-load .o2{animation-delay:-.8s;background:var(--primary-2)}
.orbit-load .o3{animation-delay:-1.6s;opacity:.6}
@keyframes orbit{
  0%  {transform:rotate(0)   translate(48px) rotate(0)}
  100%{transform:rotate(360deg) translate(48px) rotate(-360deg)}
}
.loader-text{color:var(--muted);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.loader-bar{width:220px;height:3px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.loader-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));transition:width .6s ease}

/* ---------- APP ---------- */
.app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
body[data-state="loading"] .app{opacity:0}
body[data-state="ready"]   .app{opacity:1;transition:opacity .4s ease}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  height:var(--nav-h);
  background:rgba(10,10,10,.72);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-inner{
  height:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-badge{
  width:40px;height:40px;flex:0 0 40px;
  border-radius:50%;
  background:var(--surface-2);
  border:1px solid var(--border);
  display:grid;place-items:center;overflow:hidden;
}
.brand-badge img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.brand-name{font-weight:800;letter-spacing:.06em;font-size:15px}
.nav-menu{display:flex;gap:36px}
.nav-menu a{
  color:var(--fg-2);font-size:14px;font-weight:500;
  transition:color .2s;
}
.nav-menu a:hover{color:var(--fg)}
.nav-cta .btn{min-width:150px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;
  border-radius:10px;
  font-weight:600;font-size:14px;letter-spacing:.01em;
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor:pointer;white-space:nowrap;
  border:1px solid transparent;
}
.btn-sm{height:40px;padding:0 18px;font-size:13px}
.btn-primary{
  background:#fff;color:#0a0a0a;
  box-shadow:0 4px 16px rgba(255,255,255,.08);
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(255,255,255,.16)}
.btn-outline{
  background:var(--surface-2);
  color:var(--fg);
  border-color:var(--border-2);
}
.btn-outline:hover{background:var(--surface-3);border-color:rgba(255,255,255,.22)}

/* ---------- HERO ---------- */
.hero{padding:80px 0 40px;position:relative}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;
}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  height:34px;padding:0 14px;
  border-radius:var(--radius-pill);
  background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--fg-2);font-size:13px;font-weight:500;
}
.pill-dot{
  width:8px;height:8px;border-radius:50%;background:var(--token-accent);
  box-shadow:0 0 8px var(--token-glow);
}
.pill-dot.live{background:var(--pos);box-shadow:0 0 8px rgba(34,197,94,.6);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pill-sm{height:28px;padding:0 10px;font-size:11px;gap:6px}
.pill-sm.ok{color:var(--fg-2)}

.hero-title{
  margin:22px 0 20px;
  font-size:clamp(34px, 4.4vw, 54px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:-.03em;
}
.accent{color:var(--primary)}
.accent-soft{color:var(--primary-2)}
.lead{
  max-width:480px;
  color:var(--muted);
  font-size:15px;line-height:1.65;
  margin-bottom:30px;
}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Hero artwork — layered disc (fixed neutral tan, PDF-accurate scale) */
.hero-art{display:grid;place-items:center;position:relative;min-height:360px}
.disc-stage{
  position:relative;width:min(340px,78%);aspect-ratio:1/1;
}

.disc-shard{
  position:absolute;inset:0;
  background:linear-gradient(135deg, var(--surface-2), var(--surface-3));
  border:1px solid var(--border);
  border-radius:24px;
  transform:rotate(-8deg) translate(-6%,-6%);
  opacity:.75;
}
.disc-shard.s2{transform:rotate(6deg) translate(3%,4%);opacity:.55}
.disc-shard.s3{transform:rotate(-3deg) translate(6%,10%);opacity:.4}
.disc-outer{
  position:absolute;inset:8%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(135deg, var(--primary-dark), var(--primary));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 30px 80px -20px rgba(0,0,0,.7),
    var(--shadow-glow);
}
.disc-inner{
  position:absolute;inset:26%;
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--primary), var(--primary-2));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.disc-sheen{
  position:absolute;inset:8%;border-radius:50%;overflow:hidden;pointer-events:none;
}
.disc-sheen::before{
  content:"";position:absolute;top:-30%;left:-30%;width:160%;height:160%;
  background:linear-gradient(120deg, transparent 42%, rgba(255,255,255,.14) 50%, transparent 58%);
  transform:rotate(-18deg);
}
.disc-center{
  position:absolute;inset:36%;
  border-radius:50%;
  background:#fff;
  overflow:hidden;
  display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.4);
}
.disc-center img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.disc-orbit{
  position:absolute;left:-4%;right:-4%;bottom:22%;height:44%;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  transform:rotateX(72deg);
  pointer-events:none;
}

/* ---------- Partners ---------- */
.partners-band{
  padding:22px 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.015);
}
.partners{
  display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:18px 32px;
}
.p-logo{
  color:var(--muted);font-weight:700;font-size:15px;letter-spacing:.08em;
  opacity:.75;transition:opacity .2s, color .2s;
}
.p-logo:hover{opacity:1;color:var(--fg-2)}

/* ---------- SECTIONS ---------- */
.section{padding:96px 0;position:relative}
.section-title{font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.02em}
.section-lead{color:var(--muted);font-size:15px;line-height:1.7;max-width:520px;margin-top:14px}

.two-col{
  display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start;
}
.col-left .btn{margin-top:26px}

/* Feature cards */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.card:hover{border-color:var(--border-2);background:var(--surface-2)}
.feature .fi{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--primary);
  margin-bottom:16px;
}
.feature .fi svg{width:22px;height:22px}
.feature h3{font-size:16px;font-weight:700;margin-bottom:6px}
.feature p{color:var(--muted);font-size:13.5px;line-height:1.55}

/* ---------- Live Charts / Stats ---------- */
.stats-card{
  margin-top:36px;
  padding:36px;
  border-radius:24px;
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
}
.stats-head{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding-bottom:30px;
}
.stats-logo{
  width:96px;height:96px;border-radius:50%;
  background:#fff;overflow:hidden;
  border:3px solid rgba(255,255,255,.15);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
  display:grid;place-items:center;
}
.stats-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.stats-name{font-size:20px;font-weight:800;letter-spacing:.04em}

.metrics-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin-bottom:20px;
}
.metric{
  display:flex;align-items:center;gap:12px;
  padding:16px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.metric-icon{
  width:36px;height:36px;flex:0 0 36px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--surface-3);border:1px solid var(--border-2);
  color:var(--primary);
}
.metric-icon svg{width:18px;height:18px}
.metric-label{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.metric-value{font-size:15px;font-weight:700;color:var(--fg)}
.metric-value.pos{color:var(--pos)}
.metric-value.neg{color:var(--neg)}

/* Transactions */
.tx-panel{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:22px;
}
.tx-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.tx-head h3{font-size:16px;font-weight:700}
.tx-list{display:grid;gap:10px}
.tx-row{
  display:grid;
  grid-template-columns: 1.1fr 1.1fr 1.1fr 1.2fr auto;
  gap:16px;align-items:center;
  padding:14px 16px;
  background:var(--surface-3);
  border:1px solid var(--border);
  border-radius:12px;
}
.tx-col{display:flex;flex-direction:column;gap:4px;min-width:0}
.tx-col.tx-status{align-items:flex-end}
.tx-lbl{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2)}
.tx-col .mono{color:var(--fg-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:12px;max-width:100%}
.q{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  transition:border-color .2s;
}
.q[open]{border-color:var(--border-2);background:var(--surface-2)}
.q summary{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  cursor:pointer;list-style:none;
  font-size:15px;font-weight:600;color:var(--fg);
}
.q summary::-webkit-details-marker{display:none}
.q .chev{
  color:var(--muted);font-size:14px;
  transition:transform .25s ease;
}
.q[open] .chev{transform:rotate(180deg);color:var(--primary)}
.q p{margin-top:14px;color:var(--muted);font-size:14px;line-height:1.7}

/* ---------- FOOTER ---------- */
.footer{
  border-top:1px solid var(--border);
  background:var(--bg-2);
  padding:60px 0 30px;
  margin-top:40px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(4,1fr);
  gap:40px;
  padding-bottom:36px;
  border-bottom:1px solid var(--border);
}
.footer-brand p{margin-top:14px;font-size:13.5px;line-height:1.65;max-width:320px}
.socials{display:flex;gap:8px;margin-top:18px}
.socials a{
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:10px;
  background:var(--surface-2);border:1px solid var(--border);
  color:var(--fg-2);
  transition:background .2s, color .2s, border-color .2s;
}
.socials a:hover{background:var(--surface-3);color:var(--primary);border-color:var(--border-2)}
.socials svg{width:16px;height:16px}
.footer-col h4{font-size:14px;font-weight:700;margin-bottom:14px}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-col a{color:var(--muted);font-size:13.5px}
.footer-col a:hover{color:var(--fg-2)}
.footer-bottom{
  padding-top:24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.footer-stats{display:flex;gap:36px}
.footer-stats > div{display:flex;flex-direction:column;gap:2px}
.footer-stats b{font-size:15px;font-weight:700;letter-spacing:.02em}
.footer-stats span{letter-spacing:.08em}

/* ---------- Back to top ---------- */
.back-top{
  position:fixed;right:22px;bottom:22px;z-index:40;
  width:42px;height:42px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--border-2);
  color:var(--fg);font-size:18px;
  opacity:0;pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-2px);background:var(--surface-3)}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-art{order:-1;min-height:340px}
  .disc-stage{width:min(360px,80%)}
  .two-col{grid-template-columns:1fr;gap:40px}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .tx-row{grid-template-columns:1fr 1fr;gap:12px}
  .tx-col.tx-status{grid-column:1/-1;align-items:flex-start}
}
@media (max-width: 720px){
  .nav-menu{display:none}
  .nav-inner{gap:12px}
  .hero{padding:56px 0 20px}
  .section{padding:64px 0}
  .stats-card{padding:22px}
  .metrics-grid{grid-template-columns:1fr}
  .feature-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .footer-brand{grid-column:1/-1}
  .footer-stats{gap:22px}
  .hero-title{font-size:40px}
  .disc-stage{width:min(300px,80%)}
}

/* No-JS graceful reveal */
.no-js .reveal{opacity:1;transform:none}

/* ---------- GATE (index.html entry) ---------- */
.gate-body{
  min-height:100vh;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  display:grid;place-items:center;
  padding:40px 20px;
  position:relative;
}
.gate-wrap{
  position:relative;z-index:2;
  width:100%;max-width:560px;
}
.gate-card{
  background:linear-gradient(180deg, var(--surface), var(--bg-2));
  border:1px solid var(--border-2);
  border-radius:var(--radius-lg);
  padding:44px 40px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7), var(--shadow-glow);
  text-align:center;
}
.gate-logo{
  position:relative;width:78px;height:78px;margin:0 auto 24px;
  display:grid;place-items:center;
}
.gate-logo .ring,.gate-logo .r2{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--primary);opacity:.35;
  animation:gateSpin 6s linear infinite;
}
.gate-logo .r2{inset:12px;opacity:.6;animation-duration:4s;animation-direction:reverse}
.gate-logo .dot{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary-2),var(--primary));
  box-shadow:0 0 24px var(--primary-glow);
}
@keyframes gateSpin{to{transform:rotate(360deg)}}
.gate-card h1{
  font-size:28px;font-weight:800;letter-spacing:-.02em;
  margin-bottom:12px;
}
.gate-sub{
  color:var(--muted);font-size:14.5px;line-height:1.6;
  margin:0 auto 28px;max-width:420px;
}
.ca-form{display:grid;gap:12px}
#ca-input{
  width:100%;height:52px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  border-radius:12px;
  color:var(--fg);
  padding:0 18px;
  font:500 14px/1 var(--font-sans);
  outline:none;transition:border-color .2s, box-shadow .2s;
}
#ca-input::placeholder{color:var(--muted-2)}
#ca-input:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px var(--primary-glow);
}
.ca-actions{display:flex;gap:10px;justify-content:center}
.ca-actions .btn{flex:1;max-width:200px}
.btn-ghost{
  background:var(--surface-2);color:var(--fg-2);
  border:1px solid var(--border-2);
}
.btn-ghost:hover{background:var(--surface-3);color:var(--fg)}
.ca-error{
  min-height:18px;color:var(--neg);
  font-size:12.5px;letter-spacing:.02em;
}
.gate-foot{
  margin-top:26px;padding-top:22px;
  border-top:1px solid var(--border);
  color:var(--muted-2);font-size:12.5px;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;
}
.gate-foot code{
  font-family:var(--font-mono);font-size:11.5px;
  background:var(--surface-2);border:1px solid var(--border);
  padding:2px 8px;border-radius:6px;color:var(--fg-2);
}
.glass{backdrop-filter:blur(8px)}

@media (max-width:520px){
  .gate-card{padding:32px 22px}
  .gate-card h1{font-size:23px}
  .ca-actions{flex-direction:column}
  .ca-actions .btn{max-width:none}
}