/* Extracted from index.html so every marketing page shares one cached
   copy instead of carrying its own 44 KB. */
/* ═════════════════════════════════════════════════════════════
   TOKENS
   ═════════════════════════════════════════════════════════════ */
:root{
  /* ── the descent: surface → abyss, applied section by section ── */
  --surface:#062340; --shelf:#041A31; --deep:#021024; --abyss:#000914;
  color-scheme:dark;

  /* ── glass + solid card grounds ── */
  --card:rgba(8,38,66,.62); --card-solid:#05203A;
  --card-2:rgba(4,26,48,.6); --card-2-solid:#03162A;
  --hair:rgba(0,231,255,.17);          /* glass hairline */
  --reef:#0C3253; --edge:#1A5C85;

  /* ── ink, biased toward the accent rather than neutral grey ── */
  --foam:#E4F2FF; --krill:#8FB2CC; --faint:#527A92;

  /* ── accent + semantics ── */
  --tail:#0091FF; --tail-2:#00E7FF; --sonar:#00E7FF;
  /* Meteora's brand orange, the action + heat accent.
     Verified from their docs theme config: "primary":"#F54B00" */
  --ember:#F54B00; --ember-2:#FF8A3D; --ember-hot:#FF6A1F;
  --up:#00FF9C; --down:#FF2E63;
  --glow:rgba(0,231,255,.17); --halo:rgba(0,231,255,.55);
  --ember-glow:rgba(245,75,0,.20); --ember-halo:rgba(245,75,0,.55);
  --contour:rgba(0,231,255,.06);
  --water-far:#0A3A66; --water-mid:#062745; --water-near:#04182D;
  --crest:rgba(170,255,246,.5);

  /* ── type ── */
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --text:"Newsreader",Georgia,"Iowan Old Style",serif;
  --mono:"Azeret Mono",ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace;

  --t-2xs:.6875rem; --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem;
  --t-md:1.0625rem; --t-lg:1.1875rem; --t-xl:1.375rem;
  --t-2xl:clamp(1.6rem,2.4vw,2.1rem);
  --t-3xl:clamp(2.05rem,4vw,3.15rem);
  --t-hero:clamp(2.7rem,7.4vw,5.75rem);

  --lh-tight:1.06; --lh-snug:1.28; --lh-body:1.68; --lh-lede:1.55;
  --ls-hero:-.045em; --ls-head:-.032em; --ls-body:-.006em; --ls-label:.16em;

  /* ── spacing, 4px base ── */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem;
  --sec-y:clamp(4.5rem,9vw,8rem);
  --card-p:clamp(1.5rem,2.8vw,2.25rem);
  --gut:clamp(1.25rem,4vw,3rem);
  --max:1220px; --measure:64ch;

  /* ── radii ── */
  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:26px;

  /* ── layered shadows ── */
  --sh-sm:0 1px 2px rgba(0,3,6,.55);
  --sh-md:0 6px 16px -4px rgba(0,3,6,.62), 0 2px 6px -2px rgba(0,3,6,.55);
  --sh-lg:0 20px 44px -14px rgba(0,3,6,.72), 0 8px 16px -8px rgba(0,3,6,.58);
  --sh-xl:0 38px 84px -28px rgba(0,3,6,.86), 0 14px 32px -14px rgba(0,3,6,.66);
  --sh-glow:0 0 0 1px var(--glow), 0 26px 70px -34px var(--halo);
  --blur:14px;
}

/* ═════════════════════════════════════════════════════════════
   BASE
   ═════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:5.5rem}
body{
  margin:0; background:var(--deep); color:var(--foam);
  font:400 var(--t-lg)/var(--lh-body) var(--text);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:800; text-wrap:balance}
h1{line-height:var(--lh-tight); letter-spacing:var(--ls-hero)}
h2{line-height:1.08; letter-spacing:var(--ls-head)}
h3,h4{line-height:var(--lh-snug); letter-spacing:-.024em}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
button,input{font-family:inherit}
:focus-visible{outline:2px solid var(--tail); outline-offset:3px; border-radius:6px}
::selection{background:var(--ember); color:#fff}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.eyebrow{
  font:500 var(--t-xs)/1 var(--mono); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--tail-2);
  text-shadow:0 0 20px var(--halo);
}
.eyebrow.mute{color:var(--krill)}
.n{font-family:var(--mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.up{color:var(--up)} .down{color:var(--down)}

/* deferred paint below the fold */
.defer{content-visibility:auto; contain-intrinsic-size:auto 720px}

/* ── glass, applied only to elements that DON'T repaint on scroll ── */
.glass{background:var(--card-solid); border:1px solid var(--reef)}
@supports (backdrop-filter:blur(2px)){
  .glass{
    background:var(--card); border-color:var(--hair);
    backdrop-filter:blur(var(--blur)) saturate(150%);
    -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);
  }
}
.glass-2{background:var(--card-2-solid); border:1px solid var(--reef)}
@supports (backdrop-filter:blur(2px)){
  .glass-2{background:var(--card-2); border-color:var(--hair); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px)}
}


/* ═════════════════════════════════════════════════════════════
   ATMOSPHERE — bathymetric contours, the depth-sounder motif.
   Pure CSS gradients, no filters, so it costs nothing to scroll.
   ═════════════════════════════════════════════════════════════ */
.contours{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    repeating-radial-gradient(circle at 78% 118%,
      transparent 0 46px, var(--contour) 46px 47px),
    repeating-radial-gradient(circle at 78% 118%,
      transparent 0 15px, var(--contour) 15px 15.6px);
  mask-image:radial-gradient(120% 96% at 78% 118%, #000 12%, transparent 74%);
  -webkit-mask-image:radial-gradient(120% 96% at 78% 118%, #000 12%, transparent 74%);
  opacity:.9;
}
.sec .contours{
  background:repeating-linear-gradient(96deg, transparent 0 84px, var(--contour) 84px 85px);
  mask-image:linear-gradient(180deg, #000, transparent 70%);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent 70%);
  opacity:.55;
}
.sec{position:relative}
.sec > .wrap{position:relative; z-index:1}

  14%{opacity:.5}
  100%{transform:translate(-50%,0) scale(1.5); opacity:0}
}

/* ═════════════════════════════════════════════════════════════
   PAGE LOAD — one orchestrated sequence, staggered by delay
   ═════════════════════════════════════════════════════════════ */
@keyframes rise{from{opacity:0; transform:translateY(22px)}to{opacity:1; transform:none}}
@keyframes wipe{from{opacity:0; transform:translateY(30px) scale(.985)}to{opacity:1; transform:none}}
.pl{animation:rise .85s cubic-bezier(.16,.84,.3,1) both}
.pl-1{animation-delay:.05s} .pl-2{animation-delay:.15s} .pl-3{animation-delay:.25s}
.pl-4{animation-delay:.36s} .pl-5{animation-delay:.48s}
.gap-card.pl{animation:wipe 1.05s cubic-bezier(.16,.84,.3,1) .3s both}
@media (prefers-reduced-motion:reduce){
  .pl,.gap-card.pl{animation:none}
}

/* ═════════════════════════════════════════════════════════════
   NAV
   ═════════════════════════════════════════════════════════════ */
.nav{position:sticky; top:0; z-index:60; background:var(--surface); border-bottom:1px solid var(--reef)}
.nav-in{display:flex; align-items:center; gap:var(--sp-6); height:72px}
.brand{
  display:flex; align-items:center; gap:.6rem; text-decoration:none; white-space:nowrap;
  font-family:var(--display); font-weight:800; font-size:var(--t-md); letter-spacing:-.035em;
}
.brand .fluke{width:28px; height:28px; flex:none; color:var(--tail); transition:transform .45s cubic-bezier(.2,.8,.25,1)}
.brand:hover .fluke{transform:rotate(-10deg) scale(1.09)}
.nav-links{display:none; align-items:center; gap:var(--sp-6); margin-left:auto; font:500 var(--t-xs)/1 var(--mono); letter-spacing:.09em; text-transform:uppercase}
.nav-links a{position:relative; color:var(--krill); text-decoration:none; padding-block:.4rem; transition:color .18s}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; border-radius:2px;
  background:var(--tail); transform:scaleX(0); transform-origin:left; transition:transform .28s cubic-bezier(.2,.8,.25,1);
}
.nav-links a:hover{color:var(--foam)}
.nav-links a:hover::after{transform:scaleX(1)}
@media (min-width:1060px){.nav-links{display:flex}}
/* NINE LINKS, NOT EIGHT. Adding "Start here" pushed the row past its width at
   the 1060 breakpoint and the nav wrapped to two lines between roughly 1060 and
   1240. Tightening the gap in exactly that band keeps every link reachable
   instead of demoting a whole class of laptop to the burger menu. */
@media (min-width:1060px) and (max-width:1279px){
  .nav-links{gap:var(--sp-3); font-size:var(--t-2xs); letter-spacing:.04em}
}
.nav-right{display:flex; align-items:center; gap:var(--sp-3); margin-left:auto}
/* Only "Start copying" is orange, in the hero and the mobile sticky bar —
   the header's own sign-in is a quiet text link, not a second CTA. */
.nav-signin{
  color:var(--foam); text-decoration:none; font-weight:600; font-size:.9rem;
  padding-block:.4rem; border-bottom:1px solid transparent; transition:border-color .18s;
}
.nav-signin:hover{ border-bottom-color:var(--krill) }
@media (min-width:1060px){.nav-right{margin-left:var(--sp-4)}}
.burger{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border:1px solid var(--reef); border-radius:var(--r-sm); background:transparent;
  color:var(--foam); cursor:pointer; transition:border-color .18s, background .18s;
}
.burger:hover{border-color:var(--tail); background:var(--glow)}
.burger svg{width:18px; height:18px}
@media (min-width:1060px){.burger{display:none}}
.drawer{
  display:none; border-bottom:1px solid var(--reef); background:var(--surface);
  position:sticky; top:72px; z-index:55;
}
.drawer.open{display:block}
@media (min-width:1060px){.drawer{display:none !important}}
.drawer-in{display:flex; flex-direction:column; padding-block:var(--sp-3) var(--sp-5); gap:var(--sp-1)}
.drawer-in a{
  padding:.9rem .25rem; text-decoration:none; color:var(--krill);
  font:500 var(--t-xs)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--reef); transition:color .18s, padding-left .18s;
}
.drawer-in a:last-of-type{border-bottom:0}
.drawer-in a:hover{color:var(--foam); padding-left:.6rem}

/* ═════════════════════════════════════════════════════════════
   BUTTONS
   ═════════════════════════════════════════════════════════════ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.82rem 1.4rem; border-radius:var(--r-sm); border:1px solid transparent;
  font-family:var(--mono); font-weight:700; font-size:var(--t-xs); letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; overflow:hidden;
  transition:transform .16s cubic-bezier(.2,.8,.25,1), box-shadow .22s, background .18s, border-color .18s;
}
.btn:hover{transform:translateY(-1.5px)}
.btn:active{transform:translateY(0)}
/* the primary action wears Meteora orange */
.btn-primary{
  /* dark ink on hot orange. Measured: worst stop 5.37:1, so the 12px
     uppercase label clears 4.5:1 across the whole gradient. White ink
     on this orange was 2.35:1 at the light end and failed. */
  background:linear-gradient(168deg,#FFA05C 0%,#FF6A1F 48%,var(--ember) 100%);
  color:#200800;
  box-shadow:0 0 0 1px var(--ember), 0 0 28px -6px var(--ember-halo), 0 14px 30px -14px var(--ember-halo);
}
.btn-primary:hover{box-shadow:0 0 0 1px var(--ember-2), 0 0 44px -4px var(--ember-halo), 0 20px 44px -16px var(--ember-halo)}
/* micro-interaction: a light sweep across the primary button on hover */
.btn-primary::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.24) 50%,transparent 62%);
  transform:translateX(-120%); transition:transform .62s cubic-bezier(.2,.8,.25,1);
}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{border-color:var(--edge); color:var(--foam); background:transparent}
.btn-ghost:hover{border-color:var(--tail-2); background:var(--glow); box-shadow:var(--sh-md)}
.btn-lg{padding:1rem 1.75rem; font-size:var(--t-base)}
.btn-block{width:100%}

/* ═════════════════════════════════════════════════════════════
   PERFORMANCE MARQUEE
   ═════════════════════════════════════════════════════════════ */
.perf{background:var(--shelf); border-bottom:1px solid var(--reef); overflow:hidden; display:flex; align-items:stretch}
.perf-tag{
  flex:none; display:flex; align-items:center; gap:.5rem; padding-inline:var(--sp-5);
  background:var(--abyss); border-right:1px solid var(--reef); color:var(--ember);
  font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
}
.perf-vp{flex:1; overflow:hidden; min-width:0}
.perf-rail{display:flex; width:max-content; will-change:transform; animation:marq 62s linear infinite}
.perf:hover .perf-rail{animation-play-state:paused}
@keyframes marq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.pc{
  display:flex; align-items:center; gap:.85rem; padding:.9rem 1.5rem;
  border-right:1px solid var(--reef); white-space:nowrap; transition:background .2s;
}
.pc:hover{background:var(--glow)}
.pc-sym{font:500 var(--t-xs)/1 var(--mono); letter-spacing:.06em; color:var(--krill)}
.pc-pct{font:700 var(--t-base)/1 var(--mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.pc-pct.up{text-shadow:0 0 16px color-mix(in srgb,var(--up) 46%,transparent)}
.pc-pct.down{text-shadow:0 0 16px color-mix(in srgb,var(--down) 40%,transparent)}
.pc-meta{font:400 var(--t-2xs)/1.2 var(--mono); color:var(--faint)}

/* ═════════════════════════════════════════════════════════════
   HERO
   ═════════════════════════════════════════════════════════════ */
.hero{position:relative; background:var(--surface); overflow:hidden; padding:clamp(4rem,9vw,7.5rem) 0 clamp(3.5rem,7vw,6rem)}
.hero-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 34% at 80% -14%, var(--halo) 0%, transparent 52%),
    radial-gradient(120% 26% at 40% 60%, var(--ember-halo) 0%, transparent 58%),
    radial-gradient(70% 30% at 40% 62%, color-mix(in srgb,var(--ember-2) 30%, transparent) 0%, transparent 46%),
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 92%, var(--tail)) 0%,
      var(--surface) 34%,
      color-mix(in srgb,var(--shelf) 70%, var(--surface)) 62%,
      var(--abyss) 100%);
}
#wake{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.hero-fluke{display:none}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; gap:clamp(3rem,5.5vw,5rem); align-items:center}
@media (min-width:1060px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.hero h1{font-size:var(--t-hero); margin-block:var(--sp-5) var(--sp-5)}
.hero h1 .lit{
  background:linear-gradient(96deg,var(--tail) 2%,var(--tail-2) 54%,#A8FFF4 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 28px var(--halo));
}
.lede{font-size:clamp(1.15rem,1.7vw,1.42rem); line-height:1.6; color:var(--krill); max-width:40ch}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-10)}
.trust{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-6); font:400 var(--t-xs)/1.6 var(--mono); color:var(--krill);
}
.trust b{color:var(--foam); font-weight:700}
.trust .sep{color:var(--edge)}

/* ── the follow gap ── */
.gap-card{border-radius:var(--r-xl); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-5); box-shadow:var(--sh-xl)}
.gap-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap}
.gap-head p{font:500 var(--t-xs)/1 var(--mono); letter-spacing:var(--ls-label); text-transform:uppercase}
.live{display:inline-flex; align-items:center; gap:.5rem; font:500 var(--t-xs)/1 var(--mono); color:var(--ember); letter-spacing:.14em; text-transform:uppercase}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 16px 3px currentColor; animation:blip 2.4s ease-in-out infinite}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.2}}
.track{display:grid; transition:opacity .28s}
.track.swap{opacity:.08}
.leg{display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-4); align-items:center; padding-block:var(--sp-4)}
.leg+.leg{border-top:1px dashed var(--reef)}
.pip{width:11px; height:11px; border-radius:50%; border:2px solid var(--sonar); background:var(--abyss); box-shadow:0 0 10px -1px var(--sonar)}
.leg.you .pip{border-color:var(--tail); background:var(--tail); box-shadow:0 0 12px 0 var(--halo)}
.leg-who{font:700 var(--t-2xs)/1.2 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sonar)}
.leg.you .leg-who{color:var(--tail)}
.leg-what{font:500 var(--t-xs)/1.55 var(--mono); margin-top:.34rem; letter-spacing:.01em}
.leg-what .sub{font-family:var(--mono); color:var(--krill); font-size:var(--t-xs)}
.leg-t{font:500 var(--t-xs)/1 var(--mono); color:var(--krill); text-align:right; font-variant-numeric:tabular-nums}
.lag{
  justify-self:start; margin-left:2.1rem; padding:.32rem .68rem; border-radius:99px;
  border:1px dashed var(--edge); font:500 var(--t-2xs)/1 var(--mono); color:var(--krill);
  letter-spacing:.1em; transition:color .28s, border-color .28s, box-shadow .28s;
}
.lag.hot{color:var(--ember); border-color:var(--ember); box-shadow:0 0 20px -6px var(--ember-halo)}
.gap-foot{font-size:var(--t-base); line-height:1.6; color:var(--krill); border-top:1px solid var(--reef); padding-top:var(--sp-4)}

/* ═════════════════════════════════════════════════════════════
   STAT STRIP
   ═════════════════════════════════════════════════════════════ */
.strip{background:var(--shelf); border-block:1px solid var(--reef)}
.strip-in{display:grid; grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.strip-in{grid-template-columns:repeat(4,1fr)}}
.stat{padding:var(--sp-8) var(--gut); border-left:1px solid var(--reef); transition:background .22s}
.stat:hover{background:var(--glow)}
.stat:first-child{border-left:0}
@media (max-width:859px){
  .stat:nth-child(odd){border-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--reef)}
}
.stat-v{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.stat-v.up{text-shadow:0 0 24px color-mix(in srgb,var(--up) 48%,transparent)}
.stat-k{margin-top:var(--sp-3); font:500 var(--t-2xs)/1.4 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--krill)}

/* ═════════════════════════════════════════════════════════════
   SECTIONS
   ═════════════════════════════════════════════════════════════ */
.sec{padding-block:var(--sec-y)}
.sec.deep{background:var(--deep)}
.sec.shelf{background:var(--shelf)}
.sec-head{max-width:var(--measure); display:flex; flex-direction:column; gap:var(--sp-4); margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head h2{font-size:var(--t-3xl)}
.sec-head p{color:var(--krill); font-size:clamp(1.1rem,1.5vw,1.3rem); line-height:1.62; max-width:58ch}
.chip{
  padding:.3rem .65rem; border-radius:99px; border:1px solid var(--edge);
  font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--krill); white-space:nowrap;
}

/* ═════════════════════════════════════════════════════════════
   TOKEN + CHART
   ═════════════════════════════════════════════════════════════ */
.tok-grid{display:grid; gap:clamp(1.75rem,3.2vw,2.75rem)}
@media (min-width:1000px){.tok-grid{grid-template-columns:310px 1fr; align-items:start}}
.tok-id{display:flex; flex-direction:column; gap:var(--sp-5)}
.tok-name{display:flex; align-items:center; gap:var(--sp-3)}
.tok-name .fluke{width:40px; height:40px; color:var(--tail); flex:none}
.tok-name b{display:block; font-family:var(--display); font-size:var(--t-xl); font-weight:800; letter-spacing:-.04em; line-height:1.15}
.tok-name i{font-style:normal; font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--krill)}
.price{font:700 clamp(2rem,4.2vw,2.7rem)/1 var(--mono); letter-spacing:-.055em; font-variant-numeric:tabular-nums}
.chg{align-self:flex-start; display:inline-flex; gap:.4rem; padding:.38rem .72rem; border-radius:99px; border:1px solid currentColor; font:700 var(--t-xs)/1 var(--mono)}
.mint{
  display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4);
  border-radius:var(--r); font:400 var(--t-xs)/1.6 var(--mono); color:var(--krill); word-break:break-all;
}
.copy{
  flex:none; border:1px solid var(--reef); background:transparent; color:var(--krill);
  border-radius:var(--r-sm); padding:.42rem .6rem; font:500 var(--t-2xs)/1 var(--mono);
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:color .18s, border-color .18s, background .18s;
}
.copy:hover{color:var(--tail); border-color:var(--tail); background:var(--glow)}

.chart-card{display:flex; flex-direction:column; gap:var(--sp-5); min-width:0; border-radius:var(--r-xl); padding:var(--card-p); box-shadow:var(--sh-lg)}
.card-top{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.tf{display:flex; gap:.3rem; margin-left:auto; border-radius:var(--r-sm); padding:.28rem}
.tf button{
  border:0; background:transparent; color:var(--krill); cursor:pointer; border-radius:8px;
  padding:.42rem .85rem; font:500 var(--t-xs)/1 var(--mono); letter-spacing:.1em; transition:color .18s, background .18s;
}
.tf button:hover{color:var(--foam)}
.tf button[aria-pressed="true"]{background:linear-gradient(168deg,var(--tail-2),var(--tail)); color:#00161D; box-shadow:0 0 20px -6px var(--halo)}
.plot{position:relative; width:100%; height:clamp(210px,26vw,270px)}
.plot canvas{width:100%; height:100%; display:block}
.tip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .14s;
  background:var(--abyss); border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:.55rem .75rem; font:400 var(--t-xs)/1.5 var(--mono); white-space:nowrap; z-index:3;
  box-shadow:var(--sh-lg);
}
.tip.on{opacity:1}
.tip i{display:block; font-style:normal; color:var(--krill); font-size:var(--t-2xs); letter-spacing:.08em}
.tok-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--reef); border:1px solid var(--reef); border-radius:var(--r); overflow:hidden}
@media (min-width:680px){.tok-stats{grid-template-columns:repeat(4,1fr)}}
.tok-stat{background:var(--card-2-solid); padding:var(--sp-4) var(--sp-5); transition:background .22s}
.tok-stat:hover{background:var(--card-solid)}
.tok-stat b{display:block; font:700 var(--t-base)/1.3 var(--mono); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.tok-stat span{font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--krill)}
.src{font:400 var(--t-2xs)/1.65 var(--mono); color:var(--faint); letter-spacing:.04em}

/* ═════════════════════════════════════════════════════════════
   SWAP
   ═════════════════════════════════════════════════════════════ */
.swap-grid{display:grid; gap:clamp(1.75rem,3.2vw,2.75rem)}
@media (min-width:1000px){.swap-grid{grid-template-columns:1fr 430px; align-items:start}}
.panel{border-radius:var(--r-xl); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-5); box-shadow:var(--sh-lg)}
.pay{display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-5); border-radius:var(--r); transition:border-color .2s, box-shadow .2s}
.pay:focus-within{border-color:var(--tail); box-shadow:0 0 0 3px var(--glow)}
.pay-l{font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--krill)}
.pay input{width:100%; margin-top:.4rem; background:transparent; border:0; color:var(--foam); font:700 var(--t-xl)/1.25 var(--mono); letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.pay input:focus{outline:none}
.sym{flex:none; display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem; border:1px solid var(--reef); border-radius:99px; background:var(--card-solid); font:700 var(--t-xs)/1 var(--mono)}
.sym.t{color:var(--tail); border-color:var(--tail); box-shadow:0 0 16px -8px var(--halo)}
.qrow{display:flex; justify-content:space-between; gap:var(--sp-4); font:400 var(--t-xs)/1.7 var(--mono); color:var(--krill)}
.qrow b{color:var(--foam); font-weight:500; font-variant-numeric:tabular-nums}
.qrow.fee b{color:var(--ember-2)}
.fee-card{
  border-radius:var(--r-xl); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-3);
  background:linear-gradient(158deg, color-mix(in srgb,var(--ember) 16%, var(--card-solid)), var(--card-solid));
  border:1px solid color-mix(in srgb,var(--ember) 40%, var(--edge));
  box-shadow:0 0 0 1px var(--ember-glow), 0 26px 70px -34px var(--ember-halo), var(--sh-lg);
}
.fee-big{
  font:700 clamp(2.9rem,6vw,4rem)/1 var(--mono); letter-spacing:-.07em;
  background:linear-gradient(158deg,var(--ember-2),var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 32px var(--ember-halo));
}
.fee-card h3{font-size:var(--t-md)}
.fee-card p{color:var(--krill); font-size:var(--t-base); line-height:1.65}
.calc{margin-top:var(--sp-3); padding-top:var(--sp-5); border-top:1px solid var(--reef); display:flex; flex-direction:column; gap:var(--sp-3)}
.calc-row{display:flex; justify-content:space-between; align-items:baseline; gap:var(--sp-4); font:400 var(--t-xs)/1 var(--mono); color:var(--krill)}
.calc-row b{font-size:var(--t-base); color:var(--foam); font-weight:700; font-variant-numeric:tabular-nums}
.calc input[type=range]{width:100%; accent-color:var(--ember); cursor:pointer}

/* ═════════════════════════════════════════════════════════════
   STEPS
   ═════════════════════════════════════════════════════════════ */
.steps{display:grid; gap:var(--sp-5)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{
  border-radius:var(--r-lg); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-3);
  box-shadow:var(--sh-md); transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s, border-color .28s;
}
.step:hover{transform:translateY(-4px); box-shadow:var(--sh-xl); border-color:var(--edge)}
.step-n{
  display:grid; place-items:center; width:36px; height:36px; border-radius:12px; margin-bottom:var(--sp-2);
  border:1px solid var(--tail-2); color:var(--tail-2); font:700 var(--t-xs)/1 var(--mono);
  background:var(--glow); box-shadow:0 0 24px -8px var(--halo), inset 0 0 20px -12px var(--halo);
}
.step h3{font-size:var(--t-lg)}
.step p{color:var(--krill); font-size:var(--t-base); line-height:1.68}

/* ═════════════════════════════════════════════════════════════
   RESULTS
   ═════════════════════════════════════════════════════════════ */
.res-hero{display:grid; gap:var(--sp-5); margin-bottom:clamp(2rem,4vw,3rem)}
@media (min-width:860px){.res-hero{grid-template-columns:auto 1fr; align-items:end; gap:clamp(2rem,4vw,3.5rem)}}
.res-big{
  /* 3.2rem floor was wider than a 360px screen once the figure got long. */
  font:700 clamp(2.35rem,8.5vw,5.75rem)/1 var(--mono); letter-spacing:-.07em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(158deg,var(--up) 6%,var(--sonar) 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 32px color-mix(in srgb,var(--up) 45%,transparent));
}
.res-sub{color:var(--krill); font-size:clamp(1.1rem,1.5vw,1.3rem); max-width:min(48ch,100%); line-height:1.6}
.res-sub b{color:var(--foam); font-weight:600}
.res-grid{display:grid; gap:var(--sp-4)}
@media (min-width:640px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.res-grid{grid-template-columns:repeat(4,1fr)}}
.rc{
  border-radius:var(--r-lg); padding:var(--sp-5) var(--sp-5) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2);
  box-shadow:var(--sh-md); transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s;
}
.rc:hover{transform:translateY(-4px); box-shadow:var(--sh-xl)}
.rc-top{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3)}
.rc-sym{font:500 var(--t-xs)/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--krill)}
.rc-pct{font:700 var(--t-xl)/1 var(--mono); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.rc-pct.up{text-shadow:0 0 22px color-mix(in srgb,var(--up) 52%,transparent)}
.rc-pct.down{text-shadow:0 0 22px color-mix(in srgb,var(--down) 46%,transparent)}
.rc-spark{display:block; width:100%; height:34px}
.rc-meta{display:flex; flex-wrap:wrap; gap:.3rem var(--sp-4); font:400 var(--t-2xs)/1.5 var(--mono); color:var(--faint); letter-spacing:.04em}

/* ═════════════════════════════════════════════════════════════
   BOARD
   ═════════════════════════════════════════════════════════════ */
.tbl-wrap{overflow-x:auto; border-radius:var(--r-xl); box-shadow:var(--sh-lg); -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; min-width:880px}
caption{
  caption-side:top; text-align:left; padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--reef);
  font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--krill);
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
}
th,td{padding:var(--sp-5) var(--sp-6); text-align:left; border-top:1px solid var(--reef)}
th{font:500 var(--t-2xs)/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--krill)}
td{font:500 var(--t-xs)/1.5 var(--mono); letter-spacing:.01em}
th.r,td.r{text-align:right}
td.r{font-family:var(--mono); font-variant-numeric:tabular-nums}
tbody tr{transition:background .18s}
tbody tr:hover{background:var(--glow)}
.wal{display:flex; align-items:center; gap:var(--sp-3)}
.wal-av{
  width:36px; height:36px; border-radius:12px; flex:none; display:grid; place-items:center;
  background:var(--glow); border:1px solid var(--edge); color:var(--tail-2); font:700 var(--t-xs)/1 var(--mono);
}
.wal b{display:block; font-family:var(--display); font-weight:700; font-size:var(--t-base); letter-spacing:-.025em}
.wal em{font-style:normal; font-family:var(--mono); font-size:var(--t-2xs); color:var(--faint)}
.bar{display:block; height:6px; border-radius:99px; background:var(--reef); overflow:hidden; margin-top:.45rem; min-width:80px}
.bar i{display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,var(--tail),var(--tail-2)); box-shadow:0 0 14px 0 var(--halo); transition:width 1s cubic-bezier(.2,.8,.25,1)}
.slots{display:flex; flex-direction:column; gap:.3rem; min-width:118px}
.slots-n{font:700 var(--t-2xs)/1 var(--mono); color:var(--krill); font-variant-numeric:tabular-nums; letter-spacing:.04em}
.slots.low .slots-n{color:var(--down)}
.slots.full .slots-n{color:var(--faint)}
.slots.low .bar i{background:linear-gradient(90deg,var(--down),#FF9A6B); box-shadow:none}
.slots.full .bar i{background:var(--edge); box-shadow:none}
.scroll-hint{margin-top:var(--sp-3); font:400 var(--t-2xs)/1 var(--mono); color:var(--faint); letter-spacing:.06em}
@media (min-width:940px){.scroll-hint{display:none}}

/* ═════════════════════════════════════════════════════════════
   PRICING
   ═════════════════════════════════════════════════════════════ */
.plans{display:grid; gap:var(--sp-5)}
@media (min-width:800px){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{
  border-radius:var(--r-xl); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-5);
  box-shadow:var(--sh-md); transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s;
}
.plan:hover{transform:translateY(-4px); box-shadow:var(--sh-xl)}
.plan.hot{
  background:linear-gradient(168deg, color-mix(in srgb,var(--ember) 14%, var(--card-solid)), var(--card-solid));
  border-color:color-mix(in srgb,var(--ember) 42%, var(--edge));
  box-shadow:0 0 0 1px var(--ember-glow), 0 26px 70px -34px var(--ember-halo), var(--sh-lg);
}
.plan-h{display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.plan-h h3{font-size:var(--t-lg)}
.plan-p{font:700 clamp(2rem,4.2vw,2.6rem)/1 var(--mono); letter-spacing:-.055em}
.plan-p small{font:500 var(--t-xs)/1 var(--mono); color:var(--krill); letter-spacing:.02em}
.feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.feats li{display:flex; gap:var(--sp-3); font-size:var(--t-base); line-height:1.6; color:var(--krill)}
.feats svg{width:17px; height:17px; flex:none; margin-top:.3rem; color:var(--tail)}
.feats.off svg{color:var(--faint)}
.plan .btn{margin-top:auto}





/* ═══ volume scenario ═══ */
.scen{display:grid; gap:1px; background:var(--reef); border:1px solid var(--reef); border-radius:var(--r); overflow:hidden}
@media (min-width:620px){.scen{grid-template-columns:repeat(3,1fr)}}
.scen-cell{background:var(--card-2-solid); padding:var(--sp-5); display:flex; flex-direction:column; gap:.3rem}
.scen-cell b{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.05em; font-variant-numeric:tabular-nums}
.scen-cell.pot b{color:var(--ember-2); text-shadow:0 0 24px var(--ember-halo)}
.scen-cell.mine b{color:var(--up); text-shadow:0 0 24px color-mix(in srgb,var(--up) 45%,transparent)}
.scen-cell.rate b{color:var(--tail-2); text-shadow:0 0 24px var(--halo)}
.scen-cell span{font:500 var(--t-2xs)/1.45 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--krill)}
.reality{
  display:flex; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-radius:var(--r);
  border:1px dashed var(--edge); font:400 var(--t-xs)/1.7 var(--mono); color:var(--krill);
  transition:border-color .25s, background .25s;
}
.reality b{color:var(--foam)}
.reality.warn{border-color:var(--ember); background:var(--ember-glow)}
.reality.warn b{color:var(--ember-2)}
.reality.stop{border-color:var(--down); background:color-mix(in srgb,var(--down) 12%, transparent)}
.reality.stop b{color:var(--down)}
.vol-marks{display:flex; justify-content:space-between; font:400 var(--t-2xs)/1 var(--mono); color:var(--faint); letter-spacing:.06em}
.vol-marks button{
  border:0; background:transparent; color:var(--faint); cursor:pointer; padding:.2rem .1rem;
  font:inherit; letter-spacing:inherit; transition:color .15s;
}
.vol-marks button:hover{color:var(--tail-2)}

/* ═══ reward mechanics ═══ */
.mech{display:grid; gap:1px; background:var(--reef); border:1px solid var(--reef); border-radius:var(--r); overflow:hidden}
@media (min-width:760px){.mech{grid-template-columns:repeat(4,1fr)}}
.mech-step{background:var(--card-2-solid); padding:var(--sp-5); display:flex; flex-direction:column; gap:.3rem}
.mech-step b{font:700 var(--t-xl)/1 var(--mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.mech-step:nth-child(1) b{color:var(--foam)}
.mech-step:nth-child(2) b{color:var(--ember-2)}
.mech-step:nth-child(3) b{color:var(--down)}
.mech-step:nth-child(4) b{color:var(--up); text-shadow:0 0 22px color-mix(in srgb,var(--up) 45%,transparent)}
.mech-step span{font:500 var(--t-2xs)/1.45 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--krill)}
.paid{display:grid; gap:1px; background:var(--reef); border:1px solid var(--reef); border-radius:var(--r); overflow:hidden}
@media (min-width:560px){.paid{grid-template-columns:repeat(3,1fr)}}
.paid-cell{background:var(--card-2-solid); padding:var(--sp-5); display:flex; flex-direction:column; gap:.3rem}
.paid-cell b{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.paid-cell.hero b{color:var(--up); text-shadow:0 0 24px color-mix(in srgb,var(--up) 45%,transparent)}
.paid-cell.pend b{color:var(--ember-2); font-size:var(--t-xl)}
.paid-cell.rate b{color:var(--tail-2); font-size:var(--t-xl)}
.paid-cell span{font:500 var(--t-2xs)/1.45 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--krill)}
.twofee{
  display:grid; gap:var(--sp-4); margin-top:var(--sp-5);
  padding:var(--sp-5); border-radius:var(--r); border:1px dashed var(--edge);
}
@media (min-width:720px){.twofee{grid-template-columns:repeat(2,1fr)}}
.twofee div{display:flex; flex-direction:column; gap:.35rem}
.twofee b{font:700 var(--t-xs)/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.twofee p{font:400 var(--t-xs)/1.7 var(--mono); color:var(--krill)}
.twofee .pool b{color:var(--up)}
.twofee .agent b{color:var(--ember-2)}

/* ═══ holder rewards ═══ */
.rw-grid{display:grid; gap:clamp(1.75rem,3.2vw,2.75rem)}
@media (min-width:1000px){.rw-grid{grid-template-columns:1fr 430px; align-items:start}}
.pairline{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); border-radius:var(--r);
  font:500 var(--t-xs)/1 var(--mono); letter-spacing:.04em; color:var(--krill);
}
.tk-pill{
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .7rem; border-radius:99px;
  border:1px solid var(--edge); background:var(--card-solid); font:700 var(--t-xs)/1 var(--mono); color:var(--foam);
}
.tk-pill.tail{color:var(--tail-2); border-color:var(--tail-2)}
.tk-pill.hub{color:var(--ember-2); border-color:var(--ember)}
.rw-share{
  display:grid; gap:1px; background:var(--reef); border:1px solid var(--reef);
  border-radius:var(--r); overflow:hidden;
}
@media (min-width:520px){.rw-share{grid-template-columns:repeat(2,1fr)}}
.rw-cell{background:var(--card-2-solid); padding:var(--sp-5); display:flex; flex-direction:column; gap:.35rem}
.rw-cell b{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.045em; font-variant-numeric:tabular-nums}
.rw-cell.share b{color:var(--tail-2); text-shadow:0 0 22px var(--halo)}
.rw-cell.tierok b{color:var(--up); text-shadow:0 0 22px color-mix(in srgb,var(--up) 45%,transparent); font-size:var(--t-xl)}
.rw-cell.tierno b{color:var(--krill); font-size:var(--t-xl); text-shadow:none}
.rw-cell span{font:500 var(--t-2xs)/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--krill)}
.pending{
  display:flex; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-radius:var(--r);
  border:1px dashed var(--ember); background:var(--ember-glow);
  font:400 var(--t-xs)/1.65 var(--mono); color:var(--foam);
}
.pending svg{width:16px; height:16px; flex:none; margin-top:.25rem; color:var(--ember)}

/* ═══ tiers ═══ */
@media (min-width:1040px){.plans{grid-template-columns:repeat(3,1fr)}}
.plan.free{background:linear-gradient(168deg, color-mix(in srgb,var(--tail) 12%, var(--card-solid)), var(--card-solid));
  border-color:color-mix(in srgb,var(--tail-2) 38%, var(--edge));
  box-shadow:0 0 0 1px var(--glow), 0 26px 70px -34px var(--halo), var(--sh-lg)}
.plan-p .zero{background:linear-gradient(158deg,var(--tail-2),var(--tail));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px var(--halo))}
.hold-cost{
  display:flex; flex-direction:column; gap:.3rem; padding:var(--sp-4);
  border-radius:var(--r); border:1px dashed var(--edge);
  font:400 var(--t-xs)/1.6 var(--mono); color:var(--krill);
}
.hold-cost b{font:700 var(--t-lg)/1.2 var(--mono); color:var(--tail-2); font-variant-numeric:tabular-nums}

/* ═══ referral ═══ */
.ref-grid{display:grid; gap:clamp(1.75rem,3.2vw,2.75rem)}
@media (min-width:1000px){.ref-grid{grid-template-columns:1fr 440px; align-items:start}}
.ref-link{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5); border-radius:var(--r);
  font:500 var(--t-xs)/1.6 var(--mono); color:var(--foam); word-break:break-all}
.ref-link span{flex:1; min-width:0}
.split{display:grid; gap:1px; background:var(--reef); border:1px solid var(--reef); border-radius:var(--r); overflow:hidden}
@media (min-width:560px){.split{grid-template-columns:repeat(2,1fr)}}
.split-cell{background:var(--card-2-solid); padding:var(--sp-5); display:flex; flex-direction:column; gap:.35rem}
.split-cell b{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.045em}
.split-cell.you b{color:var(--ember-2); text-shadow:0 0 22px var(--ember-halo)}
.split-cell.buy b{color:var(--tail-2); text-shadow:0 0 22px var(--halo)}
.split-cell span{font:500 var(--t-2xs)/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--krill)}

/* ═══ buyback flywheel ═══ */
.flow{display:grid; gap:var(--sp-5); counter-reset:fl}
@media (min-width:880px){.flow{grid-template-columns:repeat(3,1fr)}}
.fl{position:relative; border-radius:var(--r-lg); padding:var(--card-p); display:flex; flex-direction:column; gap:var(--sp-3);
  box-shadow:var(--sh-md); transition:transform .28s cubic-bezier(.2,.8,.25,1), box-shadow .28s}
.fl:hover{transform:translateY(-4px); box-shadow:var(--sh-xl)}
.fl-i{display:grid; place-items:center; width:38px; height:38px; border-radius:12px; flex:none;
  border:1px solid var(--ember); color:var(--ember); background:var(--ember-glow);
  box-shadow:0 0 22px -8px var(--ember-halo); font:700 var(--t-xs)/1 var(--mono)}
.fl:nth-child(3) .fl-i{border-color:var(--tail-2); color:var(--tail-2); background:var(--glow); box-shadow:0 0 22px -8px var(--halo)}
.fl h3{font-size:var(--t-lg)}
.fl p{color:var(--krill); font-size:var(--t-base); line-height:1.68}
/* the arrow between steps, horizontal on wide screens and vertical on narrow */
.fl::after{content:"\2193"; position:absolute; left:50%; bottom:calc(var(--sp-5) * -1); translate:-50% 0;
  color:var(--ember); font:700 1rem/1 var(--mono); opacity:.75}
.fl:last-child::after{content:"\21BA"; color:var(--tail-2)}
@media (min-width:880px){
  .fl::after{content:"\2192"; left:auto; right:calc(var(--sp-5) * -1); bottom:auto; top:50%; translate:0 -50%}
  .fl:last-child::after{display:none}
}

/* ═════════════════════════════════════════════════════════════
   HONEST
   ═════════════════════════════════════════════════════════════ */
.honest{display:grid; gap:var(--sp-6)}
@media (min-width:880px){.honest{grid-template-columns:repeat(3,1fr); gap:clamp(1.75rem,3vw,3rem)}}
.fact{position:relative; padding-left:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3)}
.fact::before{content:""; position:absolute; left:0; top:.3rem; bottom:.3rem; width:2px; border-radius:2px; background:var(--down)}
.fact:nth-child(2)::before{background:var(--sonar)}
.fact:nth-child(3)::before{background:var(--krill)}
.fact b{font:700 var(--t-2xl)/1 var(--mono); letter-spacing:-.045em}
.fact h3{font-size:var(--t-base)}
.fact p{color:var(--krill); font-size:var(--t-base); line-height:1.68}

/* ═════════════════════════════════════════════════════════════
   FINAL + FOOTER
   ═════════════════════════════════════════════════════════════ */
.final{padding-block:clamp(5rem,10vw,8.5rem); text-align:center; background:var(--abyss); position:relative; overflow:hidden}
.final-bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(48% 58% at 50% 116%, var(--ember-halo), transparent 62%),
    radial-gradient(70% 70% at 50% 118%, var(--glow), transparent 66%);
}
.final .wrap{position:relative}
.final h2{font-size:clamp(2.2rem,5.2vw,3.6rem); max-width:23ch; margin:var(--sp-5) auto 0}
.final p{color:var(--krill); font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.6; max-width:52ch; margin:var(--sp-5) auto var(--sp-10)}
.final .cta-row{justify-content:center; margin-top:0}
.foot{background:var(--abyss); border-top:1px solid var(--reef)}
.foot-in{display:flex; flex-wrap:wrap; gap:var(--sp-4) var(--sp-8); align-items:center; padding-block:var(--sp-10); font:400 var(--t-xs)/1.7 var(--mono); color:var(--krill)}
.foot-links{display:flex; gap:var(--sp-6); margin-left:auto; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.1em}
.foot a{text-decoration:none; transition:color .18s}
.foot a:hover{color:var(--foam)}

/* ═════════════════════════════════════════════════════════════
   MOTION
   ═════════════════════════════════════════════════════════════ */
.rv{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.2,.8,.25,1), transform .6s cubic-bezier(.2,.8,.25,1)}
.rv.in{opacity:1; transform:none}
.rv[data-d="1"]{transition-delay:.08s}
.rv[data-d="2"]{transition-delay:.16s}
.flash{animation:fl .9s ease-out}
@keyframes fl{0%{color:var(--up)}100%{color:inherit}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .rv{opacity:1; transform:none}
  .btn:hover,.step:hover,.rc:hover,.plan:hover{transform:none}
}
.paper-banner{
  background:linear-gradient(90deg, color-mix(in srgb, var(--ember) 18%, var(--abyss)), var(--abyss));
  border-bottom:1px solid color-mix(in srgb, var(--ember) 42%, transparent);
  font:500 var(--t-2xs)/1.45 var(--mono); letter-spacing:.01em;
  position:relative; z-index:60;
}
.paper-banner-in{display:flex; align-items:center; gap:.6rem; padding:.62rem 0}
.paper-banner b{color:var(--ember); font-weight:700}
.paper-dot{
  flex:none; width:7px; height:7px; border-radius:50%; background:var(--ember);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--ember) 24%, transparent);
}
@media (max-width:640px){ .paper-banner{font-size:11px} }

.risk-box{
  border:1px solid var(--ember-2, #ff6b35); border-radius:14px;
  padding:clamp(1.5rem,3.5vw,2.75rem);
  background:linear-gradient(180deg, rgba(255,70,46,.07), rgba(255,70,46,.02));
}
/* The one-pager's custody section uses a list inside a risk box; without this
   it inherits the browser default and sits flush against the left edge. */
/* Global `p{margin:0}` leaves consecutive paragraphs inside a callout running
   together as one block. Only consecutive ones are affected, so a single-
   paragraph box is untouched. */
/* The risk box means "this could cost you". A benefit shown in it reads as a
   warning, so the good-news variant takes the accent instead of the ember. */
.risk-box.good{border-color:var(--edge); background:linear-gradient(180deg, var(--glow), transparent)}
.risk-box.good h3{color:var(--tail-2)}
.risk-box p + p{margin-top:.7rem}
.risk-box ul{margin:.75rem 0 0; padding-left:1.2rem; display:grid; gap:.5rem}
.risk-box li{color:var(--krill, #8fb2cc); line-height:1.6}
.risk-box li strong{color:var(--foam, #e4f2ff)}
.risk-grid{display:grid; gap:var(--sp-4)}
@media (min-width:820px){.risk-grid{grid-template-columns:1fr 1fr; gap:var(--sp-4) clamp(2rem,4vw,3rem)}}
.risk-grid p{margin:0}
.risk-grid b{color:var(--foam, #fff)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOMEPAGE HERO
   ───────────────────────────────────────────────────────────────────────────
   Deep-ocean trading terminal. The look is deliberately between two worlds that
   the Solana tools sit at opposite ends of: pump.fun is bright and playful,
   Axiom is austere and dense. This is dark and dense like a terminal, with one
   living scene behind it that none of them have.

   Three rules from the research, visible in the code below:
     - ONE moment of motion, in the hero only. Restrained motion reads as
       control on a finance page; motion everywhere reads as a casino, and trust
       is decided in about 50ms mostly from motion behaviour.
     - Live numbers sit BESIDE the button, not in a section underneath.
     - Numbers are monospace and tabular, because a figure that shifts width as
       it updates reads as decoration rather than data.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── TERMINAL TOKENS ───────────────────────────────────────────────────
 * Scoped to the hero and the wake ticker only, not the whole site: a
 * full re-theme of 999 lines used across ten other pages is a different,
 * much riskier job than making the single highest-priority surface (the
 * homepage above the fold) read as a live trading venue. One accent, no
 * second hue, locked to the exact values asked for. */
.hero-deep, .ticker{
  --hx-bg:#070b14; --hx-bg-2:#0b1220; --hx-surface:#0f1728; --hx-surface-2:#121c30;
  --hx-line:rgba(255,255,255,.08);
  --hx-text:#f4f7fb; --hx-muted:#8b9bb4;
  --hx-accent:#ff6a1a; --hx-go:#3dff9a; --hx-bad:#ff5d6c; --hx-warn:#ffc14a;
}
.hero-deep{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 88vh, 900px);
  display:grid; align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--hx-line);
  background:var(--hx-bg);
}
#deep{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}
/* Vignette, so the type never sits on a light shaft.
   NAVY, NOT BLACK, was quietly killing the whole scene. This laid
   rgba(2,16,36,.72) — a blue wash — OVER the canvas, so the true-black ground the
   hero paints never reached the screen and the aurora behind the ribbon was
   invisible. It also double-vignetted: the canvas already darkens its own
   top-left to protect the headline, so this was subtracting contrast twice.
   Now black-based, weaker, and bottom-weighted only. */
.hero-deep::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 38%, rgba(3,5,10,.62) 0%, rgba(3,5,10,.30) 48%, transparent 76%),
    linear-gradient(to bottom, rgba(3,5,10,.48), rgba(3,5,10,.2) 26%, rgba(3,5,10,.74));
}
.hero-deep > .wrap{ position:relative; z-index:2; min-width:0 }

.hero-copy{ max-width:min(46rem, 92%) }

.hero-kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--hx-muted); margin:0 0 1.1rem;
  padding:.42rem .7rem; border-radius:999px;
  border:1px solid var(--hx-line);
  background:var(--hx-surface);
}
.hero-kicker .pulse{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--hx-accent); box-shadow:0 0 0 0 rgba(255,106,26,.7);
  animation:beat 2.4s ease-out infinite;
}
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(255,106,26,.55) }
  70%{ box-shadow:0 0 0 .55rem rgba(255,106,26,0) }
  100%{ box-shadow:0 0 0 0 rgba(255,106,26,0) }
}
@media (prefers-reduced-motion: reduce){
  .hero-kicker .pulse{ animation:none }
}

.hero-deep h1{
  font-size:clamp(2.6rem, 7.2vw, 5.4rem);
  line-height:.98; letter-spacing:-.025em; margin:0 0 1.1rem;
  text-wrap:balance; color:var(--hx-text);
}
.hero-deep h1 .lit{
  color:var(--hx-accent);
}
.hero-sub{
  font-size:clamp(1.05rem, 1.6vw, 1.32rem);
  line-height:1.5; color:var(--hx-muted); margin:0 0 1.6rem; max-width:36rem;
}

.hero-act{ display:flex; flex-wrap:wrap; gap:.9rem 1.3rem; align-items:center; margin-bottom:1.7rem }
.btn-huge{
  font-size:1.06rem; padding:1rem 1.9rem; border-radius:14px;
  background:var(--hx-accent); color:#0b0603; font-weight:700; border:none;
  box-shadow:0 0 0 1px rgba(255,106,26,.4), 0 14px 40px -12px rgba(255,106,26,.55);
  min-height:44px;
}
.hero-act .plain{
  color:var(--hx-muted); text-decoration:none; border-bottom:1px solid var(--hx-line);
  font-size:.95rem;
}
.hero-act .plain:hover{ color:var(--hx-text); border-bottom-color:var(--hx-accent) }

/* The huge stat row — the pitch, made of numbers instead of adjectives.
   See heroStats() in server.js: never a dash on first paint. Count-up runs
   once on load and is skipped entirely under reduced motion. */
/* Three columns, big number over a small label — never a sentence, never a
   wrap. The number reads 2-3x the label on every breakpoint down to phone
   width, which is why this is a grid of three fixed slots and not text that
   reflows. */
.hero-tagline{
  display:grid; grid-template-columns:repeat(3, auto); gap:0 2rem;
  padding-top:1.3rem; border-top:1px solid var(--hx-line);
  max-width:40rem;
}
.hero-tagline div{ display:flex; flex-direction:column; gap:.2rem }
.hero-tagline b{
  font-family:var(--mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem, 4vw, 2.1rem);
  font-weight:700; color:var(--hx-text); line-height:1;
}
.hero-tagline span{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:clamp(.68rem, 1.2vw, .78rem);
  color:var(--hx-muted); letter-spacing:.03em;
}

/* ── the live ticker ─────────────────────────────────────────────────────
   Real positions, seconds old. The only urgency on the page that cannot be
   faked, which is why it is the only urgency on the page. A miss is shown,
   never hidden — just quieter than a fill, which is what "honest, not
   equal-weight" looks like in a feed instead of a paragraph. */
.ticker{ margin-top:1.3rem; max-width:44rem }
.ticker-head{
  display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap;
  font-family:var(--mono, ui-monospace, monospace);
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--hx-muted); margin:0 0 .8rem;
}
.ticker-head b{ color:var(--hx-go); letter-spacing:.2em }
#ticker-rail{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
}
#ticker-rail li{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  font-family:var(--mono, ui-monospace, monospace); font-size:.85rem;
  color:var(--hx-muted);
  padding:.6rem .8rem; border-radius:12px;
  background:var(--hx-surface); border:1px solid var(--hx-line);
  animation:tk-in 200ms ease-out;
}
#ticker-rail li.miss, #ticker-rail li.skip{ font-size:.78rem; opacity:.72 }
#ticker-rail li.miss .tk-dot, #ticker-rail li.skip .tk-dot{
  background:var(--hx-bad); box-shadow:none;
}
#ticker-rail b{ color:var(--hx-text); font-variant-numeric:tabular-nums }
.tk-dot{
  width:.42rem; height:.42rem; border-radius:50%; flex:none;
  background:var(--hx-go); box-shadow:0 0 8px rgba(61,255,154,.7);
}
.tk-meta{ color:var(--hx-muted); font-size:.76rem; margin-left:auto }
.tk-lag{ color:var(--hx-accent); font-variant-numeric:tabular-nums }

/* ── mobile sticky CTA ─────────────────────────────────────────────────
   Desktop already has the button in view at all times, so this exists only
   below the breakpoint where scrolling can carry it off screen. Toggled by
   hero.js's stickyCta() adding/removing .is-visible after 40% scroll. */
.sticky-cta{
  display:none;
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:40;
  text-align:center; text-decoration:none;
  background:#ff6a1a; color:#0b0603; font-weight:700; font-size:1rem;
  padding:.95rem 1rem; border-radius:14px; min-height:44px;
  box-shadow:0 0 0 1px rgba(255,106,26,.4), 0 10px 30px -10px rgba(0,0,0,.6);
  transform:translateY(140%); transition:transform 200ms ease-out;
}
.sticky-cta.is-visible{ transform:translateY(0) }
@media (max-width:720px){
  .sticky-cta{ display:block }
}
@media (prefers-reduced-motion: reduce){
  .sticky-cta{ transition:none }
}
@keyframes tk-in{
  from{ opacity:0; transform:translateY(-4px); background:rgba(61,255,154,.16) }
  to{ opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
  #ticker-rail li{ animation:none }
}

/* ── live pool yields ────────────────────────────────────────────────────
   Fees paid over liquidity, last 24h. Labelled as backward looking, because a
   yield that already happened is not a yield on offer. */
#yield-bars{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.6rem }
#yield-bars li{
  display:grid; grid-template-columns:minmax(6.5rem,11rem) 1fr auto;
  align-items:center; gap:.9rem;
  font-family:var(--mono, ui-monospace, monospace); font-size:.86rem;
}
.yb-name{ color:var(--krill); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.yb-track{
  height:.6rem; border-radius:999px; background:var(--card-2, #03162A);
  border:1px solid rgba(26,92,133,.5); overflow:hidden;
}
.yb-fill{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--tail) 0%, var(--tail-2) 100%);
  box-shadow:0 0 14px -2px rgba(0,231,255,.75);
  /* Grows in once, on load. No looping animation: a bar that keeps moving stops
     reading as a measurement. */
  animation:grow .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes grow{ from{ transform:scaleX(0); transform-origin:left } to{ transform:scaleX(1) } }
.yb-val{
  color:var(--up, #00FF9C); font-variant-numeric:tabular-nums; min-width:3.6rem; text-align:right;
}

@media (prefers-reduced-motion: reduce){
  .hero-kicker .pulse{ animation:none }
  .yb-fill{ animation:none }
}

@media (max-width:640px){
  .hero-deep{ min-height:auto; padding-block:4.5rem 3rem }
  .hero-live{ gap:.9rem 1.4rem }
  .tk-meta{ margin-left:0; width:100% }
}


/* ── support ──────────────────────────────────────────────────────────────
   One human to talk to, named, on every page. A product that holds people's
   money and cannot be contacted reads as a product that might vanish with it —
   and a support route buried on one page is the same as no support route. */
.support-line{
  display:inline-flex; align-items:center; gap:.5rem;
  font:600 .8125rem/1 var(--mono, ui-monospace, monospace);
  color:var(--tail-2); text-decoration:none;
  padding:.55rem .8rem; border-radius:999px;
  border:1px solid rgba(0,231,255,.32); background:rgba(0,231,255,.07);
  transition:border-color .15s, background .15s, transform .15s;
}
.support-line:hover{border-color:var(--tail-2); background:rgba(0,231,255,.14); transform:translateY(-1px)}
.support-line svg{width:15px; height:15px; flex:none}
.foot-support{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin-top:1rem}
.foot-support span{color:var(--krill); font-size:.8125rem}

/* Whale style tags (2026-10-09) */
.tag-style{display:inline-block;margin-left:.4rem;vertical-align:middle;padding:.2rem .45rem;border-radius:99px;font:600 .625rem/1 var(--mono, monospace);letter-spacing:.06em;text-transform:uppercase;border:1px solid}
.tag-style.scalper{color:#FF6A6A;border-color:rgba(255,106,106,.55);background:rgba(255,106,106,.08)}
.tag-style.swinger{color:#F5B942;border-color:rgba(245,185,66,.55);background:rgba(245,185,66,.08)}
.tag-style.holder{color:#2BD9A4;border-color:rgba(43,217,164,.55);background:rgba(43,217,164,.08)}