/* ==========================================================
   SOB — stylesheet
   Re-skin the whole site from the :root block below.
   The palette is sampled straight off the banner art.
   ========================================================== */
:root{
  /* the lime, straight off the banner */
  --lime-hi:  #e9ff17;
  --lime:     #c3ec12;
  --lime-mid: #a8dd08;
  --lime-dp:  #7fc801;
  --lime-ink: #4c7a00;

  --ink:      #14260a;     /* text on lime            */
  --ink-soft: #3d5a24;
  --ink-dim:  #6b8a4d;

  --white:    #ffffff;
  --off:      #f7fbef;

  --up:       #00a838;     /* their chart             */
  --down:     #e8433a;     /* your chart              */
  --tear:     #2f8cf0;
  --tear-hi:  #7cc0ff;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --r:   999px;
  --rc:  30px;             /* card radius */
  --rs:  18px;             /* small radius */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --maxw: 1120px;

  --shadow:    0 18px 44px rgba(30,60,0,.13), 0 3px 10px rgba(30,60,0,.07);
  --shadow-lg: 0 34px 80px rgba(30,60,0,.19), 0 6px 18px rgba(30,60,0,.09);
}

*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--lime);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

::selection{ background:var(--ink); color:var(--lime-hi); }

/* ==========================================================
   BACKGROUND — the banner's light, plus falling tears
   ========================================================== */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 88%, var(--lime-hi) 0%, rgba(233,255,23,0) 62%),
    radial-gradient(120% 90% at 50% 108%, var(--lime) 0%, var(--lime-mid) 46%, var(--lime-dp) 100%);
}
.rain{ position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.rain i{
  position:absolute; top:-8vh;
  width:9px; height:14px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:linear-gradient(180deg, var(--tear-hi), var(--tear));
  box-shadow:inset 0 -2px 4px rgba(255,255,255,.5);
  opacity:0; filter:blur(.2px);
  animation:fall linear infinite;
}
.rain i::before{
  content:""; position:absolute; left:50%; top:-9px; translate:-50% 0;
  width:3px; height:10px; border-radius:3px;
  background:linear-gradient(180deg, transparent, var(--tear-hi));
  opacity:.7;
}
@keyframes fall{
  0%   { transform:translateY(0) scale(.9); opacity:0; }
  10%  { opacity:.85; }
  86%  { opacity:.7; }
  100% { transform:translateY(112vh) scale(1.05); opacity:0; }
}

.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:1200;
  transform:scaleX(0); transform-origin:0 50%; will-change:transform;
  background:var(--ink);
}

.nav,.hero,.section,.footer,.drawer{ position:relative; z-index:5; }
.section,.hero{ scroll-margin-top:92px; }

/* ==========================================================
   REVEAL
   ========================================================== */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1.5s var(--ease-out), transform 1.5s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .rain{ display:none; }
  *{ animation-duration:.001s !important; }
}

/* ==========================================================
   NAV
   ========================================================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:18px clamp(14px,3.4vw,34px);
  transition:padding .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.nav.stuck{
  padding-top:11px; padding-bottom:11px;
  background:rgba(195,236,18,.82);
  backdrop-filter:blur(18px) saturate(1.4);
  box-shadow:0 1px 0 rgba(20,38,10,.1);
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:900; letter-spacing:-.02em;
  background:var(--white); color:var(--ink);
  padding:8px 17px 8px 9px; border-radius:var(--r);
  box-shadow:var(--shadow);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.brand:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.brand__face{ width:26px; height:26px; border-radius:50%; object-fit:cover; }

.nav__right{ display:flex; align-items:center; gap:7px; }
.navlink{
  font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink); padding:10px 16px; border-radius:var(--r);
  background:rgba(255,255,255,.42);
  transition:background .4s var(--ease), transform .4s var(--ease-out);
}
.navlink:hover{ background:var(--white); transform:translateY(-2px); }
.navlink--ca{
  font-variant-numeric:tabular-nums; font-weight:600;
  max-width:min(34vw,320px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  color:var(--ink-soft); cursor:pointer; border:0; font-family:inherit; font-size:12.5px;
  display:inline-flex; align-items:center; gap:8px;
}
.navlink--ca svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.navlink--ca.copied{ background:var(--ink); color:var(--lime-hi); }
.navlink--buy{ background:var(--ink); color:var(--lime-hi); }
.navlink--buy:hover{ background:#1d3510; }

.burger{
  display:none; width:44px; height:40px; border:0; cursor:pointer;
  background:var(--white); border-radius:14px; padding:12px 12px;
  box-shadow:var(--shadow);
}
.burger i{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--ease); }
.burger i+i{ margin-top:5px; }
.burger.open i:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.open i:nth-child(2){ transform:translateY(-3.5px) rotate(-45deg); }

.drawer{
  position:fixed; inset:62px 10px auto; z-index:999;
  background:var(--white); border-radius:22px; box-shadow:var(--shadow-lg);
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .42s var(--ease-out), opacity .3s var(--ease);
}
.drawer.open{ max-height:74vh; opacity:1; }
.drawer__inner{ display:flex; flex-direction:column; gap:6px; padding:14px; }
.drawer__inner .navlink{ justify-content:center; text-align:center; padding:15px; font-size:15px; background:var(--off); }

@media (max-width:880px){
  .nav__right{ display:none; }
  .burger{ display:block; }
}

/* ==========================================================
   HERO — the banner, brought to life
   ========================================================== */
.hero{
  min-height:100svh; display:flex; align-items:center; justify-content:center;
  padding:104px clamp(16px,4vw,40px) 96px; text-align:center;
}
.hero__inner{ width:100%; max-width:var(--maxw); }

.chip{
  display:inline-flex; align-items:center; gap:9px;
  font-size:11.5px; font-weight:800; letter-spacing:.16em;
  padding:9px 18px; border-radius:var(--r);
  background:var(--white); color:var(--ink-soft);
  box-shadow:var(--shadow); margin-bottom:clamp(18px,3vw,30px);
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--up); animation:pulse 3.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.3; transform:scale(.7) } }

/* the word + the angel in front of it — both sized off the same em so the
   letters always read on either side of him, exactly like the banner */
.stage{ position:relative; width:fit-content; max-width:100%; margin:0 auto; font-size:clamp(92px,25vw,330px); }
.stage__word{
  margin:0; font-size:1em; line-height:.8;
  font-weight:900; letter-spacing:-.01em;
  color:rgba(255,255,255,.13);
  -webkit-text-stroke:clamp(2px,.4vw,5px) var(--white);
  text-shadow:0 10px 44px rgba(60,110,0,.16);
  user-select:none;
}
.has-char .stage{ padding-top:.34em; }
.stage__char{
  position:absolute; left:50%; bottom:-.05em; translate:-50% 0;
  height:.92em; width:auto; max-width:none;
  filter:drop-shadow(0 26px 40px rgba(50,90,0,.26));
  pointer-events:none; user-select:none;
  animation:breathe 10s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-11px) } }

.hero__tagline{
  max-width:520px; margin:clamp(26px,4vw,40px) auto 0;
  font-size:clamp(17px,2.3vw,21px); font-weight:600; line-height:1.45;
  color:var(--ink); letter-spacing:-.015em;
}

.hero__cta{ display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:clamp(26px,4vw,36px); }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:17px 30px; border-radius:var(--r); cursor:pointer; border:0;
  font-size:13.5px; font-weight:800; letter-spacing:.06em;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), background .45s var(--ease);
}
.btn__ico{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.btn--ink{ background:var(--ink); color:var(--lime-hi); box-shadow:var(--shadow); }
.btn--ink:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); background:#1d3510; }
.btn--ink.copied{ background:var(--up); color:#fff; }
.btn--white{ background:var(--white); color:var(--ink); box-shadow:var(--shadow); }
.btn--white:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.btn--plain{ background:rgba(255,255,255,.4); color:var(--ink); }
.btn--plain:hover{ background:var(--white); transform:translateY(-3px); }

.hero__pair{
  margin-top:26px; font-size:12px; font-weight:800; letter-spacing:.2em;
  color:var(--ink-dim);
}
.hero__pair b{ color:var(--ink); font-weight:900; }

/* ==========================================================
   TICKER STRIP
   ========================================================== */
.ticker{
  position:absolute; bottom:0; left:0; right:0; overflow:hidden; display:flex;
  background:var(--white); padding:14px 0;
}
.ticker--dark{ position:relative; background:rgba(255,255,255,.08); }
.ticker__track{ display:flex; flex:none; animation:slide 70s linear infinite; }
.ticker:hover .ticker__track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-100%) } }
.ticker__item{
  font-size:12px; font-weight:800; letter-spacing:.24em; color:var(--ink-soft);
  padding:0 22px; white-space:nowrap; display:inline-flex; align-items:center; gap:22px;
}
.ticker--dark .ticker__item{ color:rgba(255,255,255,.62); }
.ticker__item img{ width:15px; height:15px; border-radius:50%; }

/* ==========================================================
   SECTIONS
   ========================================================== */
.section{ padding:clamp(72px,10vw,124px) clamp(16px,4vw,40px); }
.section > *{ max-width:var(--maxw); margin-left:auto; margin-right:auto; }
.section--white{
  background:var(--white); padding-left:0; padding-right:0;
  border-radius:clamp(30px,4vw,54px);
  margin:0 clamp(10px,2vw,22px);
  box-shadow:var(--shadow);
}
.section__hold{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,44px); }

.eyebrow{
  margin:0 auto 14px; text-align:center;
  font-size:11px; font-weight:900; letter-spacing:.26em; color:var(--lime-ink);
}
.section--white .eyebrow{ color:var(--lime-mid); }
.h2{
  margin:0 auto 14px; text-align:center; font-weight:900; letter-spacing:-.035em;
  font-size:clamp(30px,5.4vw,58px); line-height:1.02; color:var(--ink);
}
.sub{
  margin:0 auto clamp(38px,5vw,58px); text-align:center; color:var(--ink-soft);
  max-width:540px; font-size:16.5px; line-height:1.6; font-weight:500;
}

/* ==========================================================
   THE SPREAD — two position cards
   ========================================================== */
.spread{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2.4vw,26px);
  align-items:stretch; position:relative;
}
.pos{
  background:var(--white); border-radius:var(--rc); padding:clamp(22px,2.6vw,30px);
  box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease);
}
.pos:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.pos__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pos__label{ font-size:10.5px; font-weight:900; letter-spacing:.2em; color:var(--ink-dim); }
.pos__sym{
  font-size:12.5px; font-weight:900; letter-spacing:-.01em;
  background:var(--off); color:var(--ink); padding:6px 12px; border-radius:var(--r);
}
.pos__val{
  margin:20px 0 6px; font-size:clamp(28px,4vw,44px); font-weight:900;
  letter-spacing:-.04em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.pos__chg{
  display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.pos--down .pos__chg{ color:var(--down); }
.pos--up   .pos__chg{ color:var(--up); }
.pos__arrow{ font-size:12px; }

.pos__chart{ position:relative; margin:22px -6px 0; }
.pos__chart svg{ display:block; width:100%; height:auto; overflow:visible; }
.pos__chart path.line{
  fill:none; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 3.2s var(--ease-out) .35s;
}
.pos.in .pos__chart path.line{ stroke-dashoffset:0; }
.pos__chart path.area{ stroke:none; opacity:0; transition:opacity 1.8s var(--ease) 1.6s; }
.pos.in .pos__chart path.area{ opacity:1; }
.pos--down path.line{ stroke:var(--down); }
.pos--up   path.line{ stroke:var(--up); }

.pos__tip{
  position:absolute; width:44px; height:44px;
  display:grid; place-items:center; font-size:26px; line-height:1;
  translate:-50% -50%; opacity:0; transform:scale(.6);
  transition:opacity .9s var(--ease-out) 3.2s, transform .9s var(--ease-out) 3.2s;
}
.pos.in .pos__tip{ opacity:1; transform:scale(1); }
.pos--down .pos__tip{ animation:sniff 5.5s ease-in-out 4.2s infinite; }
@keyframes sniff{ 0%,100%{ translate:-50% -50% } 50%{ translate:-50% -58% } }

.pos__foot{
  margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(20,38,10,.09);
  font-size:13.5px; font-weight:500; line-height:1.5; color:var(--ink-dim);
}

.spread__note{
  margin:clamp(26px,3.4vw,40px) auto 0; max-width:460px; text-align:center;
  font-size:14.5px; font-weight:700; color:var(--lime-ink); line-height:1.5;
}

@media (max-width:760px){
  .spread{ grid-template-columns:1fr; }
}

/* ==========================================================
   STEPS
   ========================================================== */
.steps{
  list-style:none; counter-reset:s; margin:0 auto; padding:0;
  max-width:660px; display:flex; flex-direction:column; gap:12px;
}
.step{
  counter-increment:s; position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center;
  background:var(--white); border-radius:var(--rs); padding:20px 24px;
  box-shadow:var(--shadow);
  font-size:16px; line-height:1.55; font-weight:600; color:var(--ink);
  transition:transform .48s var(--ease-out), box-shadow .48s var(--ease);
}
.step:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.step::before{
  content:counter(s); display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  background:var(--ink); color:var(--lime-hi);
  font-size:14px; font-weight:900; font-variant-numeric:tabular-nums;
}
.step a{ color:var(--lime-ink); font-weight:800; box-shadow:inset 0 -2px 0 rgba(168,221,8,.6); }
.step a:hover{ box-shadow:inset 0 -2px 0 var(--lime-mid); }
.step b{ font-weight:900; }

.badge{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:clamp(30px,4vw,44px); }
.badge__face{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  box-shadow:var(--shadow-lg); animation:breathe 7s ease-in-out infinite;
}
.badge p{ margin:0; font-size:11.5px; font-weight:900; letter-spacing:.26em; color:var(--lime-ink); }

/* ==========================================================
   TOKENOMICS
   ========================================================== */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(206px,1fr)); gap:clamp(12px,1.8vw,18px); }
.stat{
  background:var(--off); border-radius:var(--rc); padding:clamp(24px,3vw,32px) 22px; text-align:center;
  transition:transform .5s var(--ease-out), background .5s var(--ease);
}
.stat:hover{ transform:translateY(-6px); background:#f0f7e4; }
.stat__emoji{
  width:54px; height:54px; margin:0 auto 18px; border-radius:18px;
  display:grid; place-items:center; font-size:26px; line-height:1;
  background:var(--white); box-shadow:var(--shadow);
}
.stat__v{ font-size:clamp(18px,2.3vw,22px); font-weight:900; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.stat__k{ margin-top:9px; font-size:10.5px; font-weight:900; letter-spacing:.22em; color:var(--ink-dim); }

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{
  margin:clamp(30px,5vw,60px) clamp(10px,2vw,22px) clamp(10px,2vw,22px);
  background:var(--ink); color:#fff;
  border-radius:clamp(30px,4vw,54px); overflow:hidden;
}
.footer__inner{ max-width:var(--maxw); margin:0 auto; padding:clamp(46px,6vw,68px) clamp(18px,4vw,44px) clamp(38px,5vw,54px); text-align:center; }
.footer__face{ width:64px; height:64px; border-radius:50%; margin:0 auto 20px; object-fit:cover; }
.footer__brand{ font-size:clamp(30px,5vw,46px); font-weight:900; letter-spacing:-.04em; color:var(--lime-hi); line-height:1; }
.footer__line{ margin:12px 0 0; font-size:15px; font-weight:600; color:rgba(255,255,255,.6); }
.footer__ca{
  display:inline-block; margin:26px 0 24px; max-width:100%; cursor:pointer;
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums;
  border:0; background:rgba(255,255,255,.1); border-radius:var(--r); padding:13px 22px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.footer__ca:hover{ background:rgba(255,255,255,.17); color:#fff; }
.footer__ca.copied{ background:var(--lime); color:var(--ink); }
.footer__links{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:32px; }
.footer__links a{
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.7); padding:10px 18px; border-radius:var(--r);
  background:rgba(255,255,255,.09);
  transition:background .25s var(--ease), color .25s var(--ease);
}
.footer__links a:hover{ background:var(--lime); color:var(--ink); }
.footer__disc{ max-width:600px; margin:0 auto 14px; font-size:12px; line-height:1.7; color:rgba(255,255,255,.4); }
.footer__year{ margin:0; font-size:11px; font-weight:800; letter-spacing:.2em; color:rgba(255,255,255,.32); }

/* ==========================================================
   TOAST
   ========================================================== */
.toast{
  position:fixed; left:50%; bottom:32px; translate:-50% 0; z-index:9500;
  padding:15px 26px; border-radius:var(--r);
  background:var(--ink); color:var(--lime-hi);
  font-size:12px; font-weight:800; letter-spacing:.16em;
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.toast.show{ opacity:1; transform:translateY(0); }

/* ==========================================================
   SMALL SCREENS
   ========================================================== */
@media (max-width:620px){
  body{ font-size:15px; }
  .hero{ padding-top:96px; padding-bottom:88px; }
  .stage{ font-size:29vw; }
  .btn{ padding:16px 24px; font-size:12.5px; }
  .hero__pair{ letter-spacing:.14em; }
  .step{ padding:17px 18px; gap:14px; font-size:15px; }
  .pos__chart{ margin-left:0; margin-right:0; }
}