/* ============================================================
   DBB V2 — "Aurora Ledger" design system  (shared by all pages)
   Deep-space twilight base · luminous teal/gold/violet accents
   glass surfaces · constellation motifs · big type moments
   ============================================================ */

:root{
  /* base */
  --void:#06070f;
  --night:#0b0d1c;
  --twilight:#131735;
  --depth:#1b1440;
  /* accents */
  --pulse:#3ee6cc;        /* teal — ledger / verification / life */
  --pulse-soft:rgba(62,230,204,.14);
  --ember:#e9b949;        /* gold — value / deed / CTA */
  --ember-soft:rgba(233,185,73,.14);
  --aura:#8b7cf8;         /* violet — aurora / tech */
  --aura-soft:rgba(139,124,248,.14);
  /* ink */
  --ink:#eef0fb;
  --ink-dim:rgba(238,240,251,.68);
  --ink-faint:rgba(238,240,251,.42);
  /* surfaces */
  --glass:rgba(19,23,53,.55);
  --glass-strong:rgba(19,23,53,.82);
  --edge:rgba(122,240,220,.14);
  --edge-gold:rgba(233,185,73,.32);
  /* type */
  --disp:'Space Grotesk',system-ui,sans-serif;
  --ui:'Inter',system-ui,sans-serif;
  --hindi:'Tiro Devanagari Hindi',serif;
  /* geometry */
  --r:18px;
  --r-lg:26px;
  --tap:56px;              /* min tap target */
  --wrap:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui);
  background:var(--void);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- typography ---------- */
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:-.015em}
.dev{font-family:var(--hindi)}
.mega{font-size:clamp(2.4rem,7vw,4.6rem);line-height:1.04;font-weight:700}
.sec-title{font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.12;font-weight:700}
.kicker{
  font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--pulse);margin-bottom:14px;
}
.kicker.gold{color:var(--ember)}
.sub{color:var(--ink-dim);font-size:1.06rem;max-width:640px}
.hindi-line{font-family:var(--hindi);color:var(--ink-faint);font-size:1.02rem;margin-top:4px}
.big-num{font-family:var(--disp);font-weight:700;font-size:clamp(2rem,5vw,3.2rem);
  background:linear-gradient(120deg,var(--pulse),var(--ember));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- aurora / constellation backdrop ---------- */
.aurora{position:relative;isolation:isolate;overflow:hidden}
.aurora::before{
  content:"";position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(46% 38% at 22% 18%, rgba(62,230,204,.10), transparent 70%),
    radial-gradient(50% 42% at 80% 12%, rgba(139,124,248,.13), transparent 70%),
    radial-gradient(42% 36% at 60% 92%, rgba(233,185,73,.07), transparent 70%);
  filter:blur(10px);
}
.stars{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5}

/* constellation divider — use inline: <svg class="const-line" ...> */
.const-line{display:block;width:100%;height:64px;opacity:.55}
.const-line .dot{fill:var(--pulse)}
.const-line .link{stroke:rgba(122,240,220,.28);stroke-width:1}

/* ---------- surfaces ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.glass-strong{background:var(--glass-strong)}
.gold-frame{border-color:var(--edge-gold);
  box-shadow:0 0 0 1px rgba(233,185,73,.08), 0 24px 60px -30px rgba(233,185,73,.25)}
.card-hover{transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.card-hover:hover{transform:translateY(-4px);
  box-shadow:0 24px 60px -24px rgba(62,230,204,.28)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--tap);padding:0 30px;border-radius:999px;
  font-family:var(--disp);font-weight:700;font-size:1.02rem;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,background .25s;
  will-change:transform;
}
.btn:active{transform:scale(.96)}
.btn-gold{
  background:linear-gradient(135deg,#f2cf6f,var(--ember) 55%,#c8952f);
  color:#221a04;
  box-shadow:0 10px 34px -10px rgba(233,185,73,.55);
}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 16px 44px -12px rgba(233,185,73,.7)}
.btn-pulse{
  background:var(--pulse-soft);color:var(--pulse);
  border:1px solid rgba(62,230,204,.4);
}
.btn-pulse:hover{background:rgba(62,230,204,.22)}
.btn-ghost{border:1px solid rgba(238,240,251,.22);color:var(--ink)}
.btn-ghost:hover{border-color:rgba(238,240,251,.5)}
.btn-block{width:100%}

/* ---------- nav ---------- */
nav.v2{
  position:sticky;top:0;z-index:50;
  background:rgba(6,7,15,.72);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(122,240,220,.10);
}
nav.v2 .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
nav.v2 .logo{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:1.05rem}
nav.v2 .logo svg{width:30px;height:30px}
nav.v2 .navlinks{display:flex;align-items:center;gap:26px;font-size:.95rem;color:var(--ink-dim)}
nav.v2 .navlinks a:hover{color:var(--pulse)}
nav.v2 .navlinks .btn{min-height:44px;padding:0 22px;font-size:.92rem}
nav.v2 .menu-btn{display:none;font-size:1.5rem;min-width:var(--tap);min-height:44px}
@media(max-width:840px){
  nav.v2 .menu-btn{display:block}
  nav.v2 .navlinks{
    display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:0;background:rgba(6,7,15,.97);padding:10px 22px 22px;
    border-bottom:1px solid var(--edge);
  }
  nav.v2 .navlinks.open{display:flex}
  nav.v2 .navlinks a{padding:15px 4px;border-bottom:1px solid rgba(238,240,251,.06)}
  nav.v2 .navlinks .btn{margin-top:14px}
}

/* ---------- sections ---------- */
section{padding:88px 0}
@media(max-width:640px){section{padding:60px 0}}

/* ---------- badges / chips ---------- */
.tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;font-size:.82rem;font-weight:600;
  background:var(--pulse-soft);color:var(--pulse);border:1px solid rgba(62,230,204,.35);
}
.tag.gold{background:var(--ember-soft);color:var(--ember);border-color:rgba(233,185,73,.4)}
.tag.aura{background:var(--aura-soft);color:#b3a8ff;border-color:rgba(139,124,248,.4)}
.illus{
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  color:var(--ink-faint);border:1px solid rgba(238,240,251,.18);
  border-radius:6px;padding:2px 7px;vertical-align:middle;
}
.testnet{
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:#b3a8ff;background:var(--aura-soft);border:1px solid rgba(139,124,248,.45);
  border-radius:6px;padding:2px 8px;
}

/* ---------- progress (goal gradient — never at 0) ---------- */
.bar{height:10px;border-radius:999px;background:rgba(238,240,251,.09);overflow:hidden}
.bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--pulse),var(--ember));
  box-shadow:0 0 14px rgba(62,230,204,.5);
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.steps-dots{display:flex;align-items:center;gap:8px}
.steps-dots .d{width:10px;height:10px;border-radius:50%;background:rgba(238,240,251,.16)}
.steps-dots .d.on{background:var(--pulse);box-shadow:0 0 10px rgba(62,230,204,.7)}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- footer ---------- */
footer.v2{
  border-top:1px solid rgba(122,240,220,.10);
  padding:54px 0 70px;color:var(--ink-faint);font-size:.92rem;
  background:linear-gradient(180deg,transparent,rgba(19,23,53,.5));
}
footer.v2 a{color:var(--ink-dim)}
footer.v2 a:hover{color:var(--pulse)}
.seal{margin-top:22px;font-size:.85rem}

/* ---------- animation utilities ---------- */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shimmer{
  background:linear-gradient(110deg,transparent 35%,rgba(233,185,73,.16) 50%,transparent 65%);
  background-size:200% 100%;animation:shimmer 3.2s linear infinite;
}
@keyframes popIn{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
.pop-in{animation:popIn .5s cubic-bezier(.34,1.56,.64,1) both}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}