/* 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}
@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.
   ═══════════════════════════════════════════════════════════════════════════ */

.hero-deep{
  position:relative; isolation:isolate;
  min-height:clamp(560px, 88vh, 900px);
  display:grid; align-items:center;
  overflow:hidden;
  border-bottom:1px solid var(--reef);
}
#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(0,6,12,.42) 0%, rgba(0,6,12,.14) 48%, transparent 76%),
    linear-gradient(to bottom, rgba(0,6,12,.30), transparent 26%, rgba(0,6,12,.55));
}
.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(--tail-2); margin:0 0 1.1rem;
  padding:.42rem .7rem; border-radius:999px;
  border:1px solid rgba(0,231,255,.30);
  background:rgba(0,231,255,.06);
}
.hero-kicker .pulse{
  width:.5rem; height:.5rem; border-radius:50%;
  background:var(--up, #00FF9C); box-shadow:0 0 0 0 rgba(0,255,156,.7);
  animation:beat 2.4s ease-out infinite;
}
@keyframes beat{
  0%{ box-shadow:0 0 0 0 rgba(0,255,156,.55) }
  70%{ box-shadow:0 0 0 .55rem rgba(0,255,156,0) }
  100%{ box-shadow:0 0 0 0 rgba(0,255,156,0) }
}

.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;
}
.hero-deep h1 .lit{
  background:linear-gradient(96deg, var(--tail-2) 0%, var(--tail) 55%, #7ad9ff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  font-size:clamp(1.02rem, 1.5vw, 1.28rem);
  line-height:1.55; color:var(--krill); margin:0 0 1.1rem; max-width:40rem;
}
/* The one urgency line. It states what is already true rather than promising
   an outcome: the wallets really are public and the lag really is measured. */
.hero-pitch{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:clamp(.86rem, 1.15vw, 1rem); line-height:1.6;
  color:var(--foam); margin:0 0 1.7rem; max-width:38rem;
}
.hero-pitch b{ color:var(--tail-2) }

.hero-act{ display:flex; flex-wrap:wrap; gap:.9rem 1.1rem; align-items:center; margin-bottom:1.5rem }
.btn-huge{
  font-size:1.06rem; padding:1rem 1.7rem; border-radius:14px;
  box-shadow:0 0 0 1px rgba(0,231,255,.35), 0 14px 40px -12px rgba(0,145,255,.65);
}
.hero-act .plain{
  color:var(--krill); text-decoration:none; border-bottom:1px solid rgba(143,178,204,.35);
  font-size:.95rem;
}
.hero-act .plain:hover{ color:var(--foam); border-bottom-color:var(--tail-2) }

/* Proof next to the action, per the research, not in a band below it. */
.hero-live{
  display:grid; gap:.1rem 2rem;
  /* min() IS LOAD-BEARING. `minmax(7.5rem, ...)` with auto-fit does NOT shrink
     below 7.5rem — auto-fit only collapses tracks that are EMPTY — so four
     stats demanded 4x120px plus 3x32px of gap = 576px, and the hero's
     overflow:hidden then sliced the headline off mid-word on every phone.
     `min(7.5rem, 100%)` lets a track fall below its ideal when there is not
     room, which is what auto-fit was meant to do here all along. */
  grid-template-columns:repeat(auto-fit, minmax(min(7.5rem, 100%), max-content));
  padding-top:1.1rem; border-top:1px solid rgba(26,92,133,.55);
  max-width:44rem;
}
.hero-live div{ display:flex; flex-direction:column; gap:.15rem }
.hero-live b{
  font-family:var(--mono, ui-monospace, monospace);
  font-variant-numeric:tabular-nums;
  font-size:clamp(1.15rem, 1.8vw, 1.5rem); color:var(--foam); line-height:1;
}
.hero-live span{
  font-family:var(--mono, ui-monospace, monospace);
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; color:var(--faint);
}

/* ── 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. */
.ticker{ background:var(--abyss, #000914); border-bottom:1px solid var(--reef) }
.ticker .wrap{ padding-block:1.15rem }
.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(--faint); margin:0 0 .8rem;
}
.ticker-head b{ color:var(--up, #00FF9C); letter-spacing:.2em }
#ticker-rail{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.5rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
}
#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(--krill);
  padding:.6rem .8rem; border-radius:10px;
  background:var(--card-2, #03162A); border:1px solid rgba(26,92,133,.45);
}
#ticker-rail b{ color:var(--foam); font-variant-numeric:tabular-nums }
.tk-dot{
  width:.42rem; height:.42rem; border-radius:50%; flex:none;
  background:var(--up, #00FF9C); box-shadow:0 0 8px rgba(0,255,156,.8);
}
.tk-meta{ color:var(--faint); font-size:.76rem; margin-left:auto }

/* ── 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}