:root{
/* Neutral charcoal base — not green-tinted black — so the accent colors read
   as deliberate choices sitting on a professional surface, not a wash of
   brand color over everything. This is the "premium wholesale provider" pass:
   deep emerald + gold + steel blue instead of neon mint/magenta/cyan, which
   read as consumer crypto-app rather than B2B infrastructure. */
--bg:#08090c;--bg-soft:#0c0e12;--surface:#111318;--surface-2:#171a20;--surface-3:#1f232b;
--text:#f1f2f5;--muted:#8b8fa0;--faint:#565a6b;
/* Emerald = money/growth, kept from the original identity but deepened from
   neon mint. Gold = premium/trust, replacing hot magenta. Steel blue = the
   cool counterpoint, replacing bright cyan. Violet is the fourth metric colour.
   Held as raw channels so every tint can be derived with rgb(var(--rgb-x) / a)
   rather than as a hand-written rgba literal that drifts away from the accent
   it belongs to — see app-ui.ts for the full account of why. */
--rgb-accent:14 164 114;--rgb-accent-2:212 149 46;--rgb-accent-3:59 130 246;--rgb-accent-4:124 92 245;
--accent:rgb(var(--rgb-accent));--accent-2:rgb(var(--rgb-accent-2));
--accent-3:rgb(var(--rgb-accent-3));--accent-4:rgb(var(--rgb-accent-4));
--accent-glow:rgb(var(--rgb-accent) / .35);--accent-2-glow:rgb(var(--rgb-accent-2) / .3);
--border:rgba(255,255,255,.07);--border-2:rgba(255,255,255,.11);
--border-lit:rgb(var(--rgb-accent) / .4);
--ok:#0ea472;--warn:#d4952e;--danger:#e5484d;
--radius:10px;--radius-sm:7px;--radius-xs:5px;
--shadow-1:0 1px 2px rgba(0,0,0,.4);
--shadow-2:0 4px 14px -6px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.4);
--shadow-3:0 18px 44px -22px rgba(0,0,0,.9),0 2px 8px rgba(0,0,0,.45);
--font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Icon SVGs have no intrinsic width/height, so a bare .ic dropped without a
   sizing wrapper renders at browser-default replaced-element size (huge).
   This floor makes that failure mode impossible; specific contexts still
   override it with a more specific selector. */
.ic{width:1.15em;height:1.15em;flex:none;vertical-align:-.15em}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
font-family:var(--font);background:var(--bg);color:var(--text);
line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
/* The scrolling price ticker animates via transform inside an overflow:hidden
   track; some engines still count its pre-transform layout box toward the
   document's scrollable area even though nothing is visibly cut off. This
   closes that stray horizontal scroll room at the source. */
overflow-x:hidden;
position:relative;
}
/* Flat, solid ground — a busy grid pattern read as noisy rather than like a
   product handling real money. Two large, very soft glows carry the same
   brand color without any texture. A fixed, viewport-sized pseudo-element
   (not background-attachment:fixed on body) so mobile browsers composite it
   once instead of repainting it against a 10,000px-tall document on every
   scroll frame — that repaint was what made long pages feel broken on phones. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
background-image:
radial-gradient(1100px 620px at 10% -12%,rgba(14,164,114,.1),transparent 60%),
radial-gradient(900px 520px at 100% 4%,rgba(124,92,245,.075),transparent 58%);
animation:bgDrift 26s ease-in-out infinite alternate}
@keyframes bgDrift{from{background-position:0 0,0 0}to{background-position:2% 2%,-2% -1%}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}
@media (max-width:760px){body::before{animation:none}}
/* Numbers read as data, not prose. */
.mono,.rate b,.price-hero b,.stat b,.balance{font-family:var(--mono);font-variant-numeric:tabular-nums}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;font-weight:700}

/* ===== motion =====
   Scroll-driven reveals use animation-timeline: view(), which is pure CSS —
   the public pages stay at zero JavaScript. Browsers without support simply
   show the content, since the base state is already visible. */
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes floatUp{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% center}}
@keyframes orbit{to{transform:rotate(360deg)}}

.hero-copy>*{animation:riseIn .7s cubic-bezier(.22,1,.36,1) backwards}
.hero-copy>*:nth-child(1){animation-delay:.04s}
.hero-copy>*:nth-child(2){animation-delay:.12s}
.hero-copy>*:nth-child(3){animation-delay:.2s}
.hero-copy>*:nth-child(4){animation-delay:.28s}
.hero-form{animation:floatUp .8s cubic-bezier(.22,1,.36,1) .18s backwards}

@supports (animation-timeline: view()){
  .sec{animation:riseIn linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  .card,.feature,.stat,.tile{animation:floatUp linear both;animation-timeline:view();animation-range:entry 2% entry 34%}
  /* Each item in a row starts fractionally later than the one before it, so a
     grid assembles itself instead of every cell arriving on the same frame.
     The range shift is what staggers them: a later entry range means the
     element has to travel further into view before its reveal completes. */
  .features>.feature:nth-child(2),.tiles>.tile:nth-child(2){animation-range:entry 5% entry 38%}
  .features>.feature:nth-child(3),.tiles>.tile:nth-child(3){animation-range:entry 8% entry 42%}
  .features>.feature:nth-child(4),.tiles>.tile:nth-child(4){animation-range:entry 11% entry 46%}
  .features>.feature:nth-child(5),.tiles>.tile:nth-child(5){animation-range:entry 14% entry 50%}
  .features>.feature:nth-child(6),.tiles>.tile:nth-child(6){animation-range:entry 17% entry 54%}
  /* Section headings get a rule that draws itself out from the left as the
     section arrives — a small thing, but it makes scrolling feel authored. */
  .sec-head::after{content:"";position:absolute;left:0;bottom:-10px;height:2px;width:100%;
  transform-origin:left;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent 70%);
  animation:ruleDraw linear both;animation-timeline:view();animation-range:entry 10% entry 46%}
}
@keyframes ruleDraw{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* Animated gradient on the headline accent only — the orbiting conic blob that used
   to live here was the exact "spinning element" the flat-background pass was supposed
   to remove; it survived by accident since it was declared separately from body's own
   background. Gone now. */
.hero h1 .grad,.hero-copy h1 .grad{background-size:200% auto;animation:shimmer 7s linear infinite}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
  transition-duration:.01ms !important;scroll-behavior:auto !important}
}
h1{font-size:clamp(2rem,5vw,3.25rem)}
h2{font-size:clamp(1.4rem,3vw,2rem);margin-bottom:.35em}
h3{font-size:1.02rem}

/* ---- shell ---- */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 24px}
header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
background:rgba(7,7,12,.78);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:1.26rem;
letter-spacing:-.05em;text-transform:lowercase}
.brand .mark{width:auto;height:26px;flex:none;
filter:drop-shadow(0 0 9px var(--accent-glow));transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.brand:hover .mark{transform:rotate(-10deg) scale(1.1)}
nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
nav a{padding:8px 13px;border-radius:9px;font-size:.92rem;color:var(--muted);
font-weight:500;transition:color .15s,background .15s}
nav a:hover{color:var(--accent);background:rgba(14,164,114,.07)}
nav a.cta{background:var(--accent);color:#fff;font-weight:700;
box-shadow:0 0 0 1px rgba(14,164,114,.5),0 6px 22px -8px var(--accent-glow)}
nav a.cta:hover{background:#14bd85;color:#fff;
box-shadow:0 0 0 1px rgba(14,164,114,.7),0 8px 28px -6px var(--accent-glow)}

/* Mobile menu — a checkbox and a label, so the public pages keep shipping zero
   JavaScript. Below 860px the inline nav turns into a drop panel; above that
   the button is display:none and none of this applies. */
.mnav-in{position:absolute;width:0;height:0;opacity:0;pointer-events:none}
.mnav-btn{display:none;width:42px;height:42px;flex:none;cursor:pointer;
border:1px solid var(--border-2);border-radius:11px;background:var(--surface);
align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.mnav-btn i{position:relative;display:block;width:17px;height:1.6px;border-radius:2px;
background:var(--text);transition:background .2s}
.mnav-btn i::before,.mnav-btn i::after{content:"";position:absolute;left:0;width:17px;
height:1.6px;border-radius:2px;background:var(--text);
transition:transform .28s cubic-bezier(.5,0,.2,1),top .22s,bottom .22s}
.mnav-btn i::before{top:-5.5px}
.mnav-btn i::after{bottom:-5.5px}
.mnav-in:checked ~ .mnav-btn i{background:transparent}
.mnav-in:checked ~ .mnav-btn i::before{top:0;transform:rotate(45deg)}
.mnav-in:checked ~ .mnav-btn i::after{bottom:0;transform:rotate(-45deg)}
.mnav-in:focus-visible ~ .mnav-btn{outline:2px solid var(--accent);outline-offset:2px}

main{padding:32px 0 64px}

/* ---- hero ---- */
.hero-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:38px;align-items:center;padding:14px 0 4px}
.hero-copy .eyebrow{margin-bottom:18px}
.hero-copy h1{font-size:clamp(2rem,4.4vw,3.1rem)}
.hero-copy .lead{margin:18px 0 0;max-width:520px}
.hero-copy .hero-actions{justify-content:flex-start;margin-top:26px}
.hero-form{align-self:start}
@media (max-width:880px){
.hero-split{grid-template-columns:1fr;gap:30px;padding-top:14px}
.hero-form{max-width:430px;width:100%}
}
.hero{text-align:center;padding:22px 0 4px}
.eyebrow,.hero .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;
color:var(--accent);background:rgba(14,164,114,.07);border:1px solid rgba(14,164,114,.26);
padding:6px 14px;border-radius:999px;font-weight:700;margin-bottom:22px;
letter-spacing:.11em;text-transform:uppercase;font-family:var(--mono)}
.hero .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 0 var(--accent-glow),0 0 10px var(--accent);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(14,164,114,0),0 0 10px var(--accent)}
100%{box-shadow:0 0 0 0 rgba(14,164,114,0),0 0 10px var(--accent)}}
h1,h2{text-wrap:balance}
.hero h1 .grad,.hero-copy h1 .grad{background:linear-gradient(100deg,var(--accent) 8%,var(--accent-3) 52%,var(--accent-2) 96%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 26px rgba(14,164,114,.28))}
.hero p.lead{color:var(--muted);font-size:clamp(1rem,2vw,1.14rem);max-width:600px;margin:18px auto 0}
.hero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 26px;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;
border:1px solid transparent;font-family:inherit;position:relative;overflow:hidden;
letter-spacing:.01em;transition:transform .14s,box-shadow .2s,background .18s,color .18s}
.btn .ic{width:17px;height:17px}
.btn:active{transform:translateY(1px) scale(.99)}
/* Solid neon fill on near-black text — the highest-contrast, most "lit" combination. */
.btn-primary{background:var(--accent);color:#fff;
box-shadow:0 0 0 1px rgba(14,164,114,.5),0 8px 30px -8px var(--accent-glow)}
.btn-primary:hover{background:#14bd85;
box-shadow:0 0 0 1px rgba(14,164,114,.7),0 10px 40px -6px var(--accent-glow)}
.btn-ghost{background:rgba(14,164,114,.05);border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:rgba(14,164,114,.11);border-color:var(--border-lit);
box-shadow:0 0 22px -8px var(--accent-glow)}
.btn-pink{background:var(--accent-2);color:#fff;
box-shadow:0 0 0 1px rgba(124,92,245,.5),0 8px 30px -8px var(--accent-2-glow)}
.btn-pink:hover{filter:brightness(1.1)}
.btn-sm{padding:9px 16px;font-size:.86rem;border-radius:8px}
.btn-sm .ic{width:15px;height:15px}
.btn-block{width:100%}

/* ---- stats strip ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:34px 0}
.stat{position:relative;overflow:hidden;background:var(--surface);box-shadow:var(--shadow-1);
border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;text-align:center;
transition:border-color .2s,box-shadow .2s}
.stat::after{content:"";position:absolute;inset:auto 0 0;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.6}
.stat:hover{border-color:var(--border-lit);box-shadow:0 0 30px -18px var(--accent-glow)}
.stat b{display:block;font-size:1.45rem;font-weight:750;letter-spacing:-.02em;
color:var(--accent);text-shadow:0 0 24px var(--accent-glow)}
.stat span{color:var(--faint);font-size:.7rem;text-transform:uppercase;
letter-spacing:.12em;font-weight:700;font-family:var(--mono)}

/* ---- section headers ---- */
.sec{margin:46px 0 0}
/* position:relative so the drawn rule above can anchor to it. */
.sec-head{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
margin-bottom:24px;flex-wrap:wrap}
.sec-head p{color:var(--muted);font-size:.95rem;margin-top:4px}
/* Long-form body copy on the geo and guide pages. Capped at a readable measure
   rather than the full grid width -- these sections are there to be read, not
   scanned like the cards above them. */
.prose{max-width:72ch}
.prose p{color:var(--muted);line-height:1.75;margin-bottom:14px}
.prose h3{font-size:1.05rem;margin:22px 0 8px;color:var(--text)}
.prose h3:first-child{margin-top:0}

/* ---- service cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.card{position:relative;background:linear-gradient(180deg,var(--surface),var(--bg-soft));
border:1px solid var(--border);border-radius:var(--radius);padding:20px;
display:flex;flex-direction:column;gap:12px;overflow:hidden;
transition:border-color .18s,transform .18s,box-shadow .18s}
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;
background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .18s}
.card:hover{transform:translateY(-3px);border-color:var(--border-lit);
box-shadow:0 16px 40px -22px var(--accent-glow)}
.card:hover::before{opacity:1}
.card .tag{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
font-family:var(--mono);
color:var(--accent-3);background:rgba(59,130,246,.08);
border:1px solid rgba(59,130,246,.24);padding:4px 9px;border-radius:5px}
.card h3{font-size:1rem;font-weight:650;letter-spacing:-.01em}
.card .rate{display:flex;align-items:baseline;gap:5px;margin-top:auto}
.card .rate b{font-size:1.42rem;font-weight:800;letter-spacing:-.03em}
.card .rate span{color:var(--faint);font-size:.83rem}
.card .meta{display:flex;gap:14px;font-size:.8rem;color:var(--faint);
padding-top:12px;border-top:1px solid var(--border)}
.card .meta b{color:var(--muted);font-weight:600}

/* ---- feature cards ---- */
/* Three across, not auto-fit. Every block using this grid holds three or six
   items, and auto-fit resolved to four columns on a wide screen — which left
   "Why smmtap" as a row of four and a stranded row of two. Three divides both. */
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:880px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.feature{position:relative;background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:22px;transition:border-color .2s,box-shadow .2s,transform .2s}
.feature:hover{border-color:var(--border-lit);transform:translateY(-2px);
box-shadow:0 14px 40px -26px var(--accent-glow)}
.feature .ico-box{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;
background:rgba(14,164,114,.09);border:1px solid rgba(14,164,114,.28);
color:var(--accent);margin-bottom:15px;transition:box-shadow .25s,transform .25s}
.feature:hover .ico-box{box-shadow:0 0 20px -4px var(--accent-glow);transform:scale(1.06)}
.feature .ico-box .ic{width:20px;height:20px}
.feature h3{margin-bottom:6px}
.feature p{color:var(--muted);font-size:.9rem}
/* Every other icon tile in magenta so the grid is not one flat colour. */
.features>.feature:nth-child(even) .ico-box{background:rgba(124,92,245,.09);
border-color:rgba(124,92,245,.28);color:var(--accent-2)}
.features>.feature:nth-child(even):hover .ico-box{box-shadow:0 0 20px -4px var(--accent-2-glow)}
/* Numbered steps read as sequence, not as another icon. */
.ico-box.num{font-family:var(--mono);font-size:1.05rem;font-weight:700;color:var(--accent)}
.step{position:relative}
.step::after{content:"";position:absolute;top:38px;right:-8px;width:16px;height:1px;
background:linear-gradient(90deg,var(--border-lit),transparent)}
.features>.step:last-child::after{display:none}
@media(max-width:760px){.step::after{display:none}}

/* ===== ambient life =====
   Slow, low-amplitude motion so the page never looks frozen. Every one of these
   is CSS-only and pauses under prefers-reduced-motion via the global override. */
/* Pulses the number's glow, not its opacity. Fading a real figure down to 55%
   and back reads as a skeleton still loading, which is the opposite of the
   "live readout" it was meant to suggest — and it made the figure genuinely
   hard to read for half of every cycle. */
@keyframes breathe{0%,100%{text-shadow:0 0 18px rgb(var(--rgb-accent) / .25)}
50%{text-shadow:0 0 30px rgb(var(--rgb-accent) / .6)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes hueShift{0%,100%{filter:hue-rotate(0deg)}50%{filter:hue-rotate(22deg)}}

/* A light sweep crossing each card on a long, staggered loop. */
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 38%,rgba(14,164,114,.07) 50%,transparent 62%);
animation:scan 7s ease-in-out infinite;animation-delay:calc(var(--i,0) * 1.1s)}
.grid>.card:nth-child(1){--i:0}.grid>.card:nth-child(2){--i:1}
.grid>.card:nth-child(3){--i:2}.grid>.card:nth-child(4){--i:3}
.grid>.card:nth-child(5){--i:4}.grid>.card:nth-child(6){--i:5}

/* Stat values pulse gently, like a live readout. */
.stat b{animation:breathe 3.6s ease-in-out infinite}
.stat:nth-child(2) b{animation-delay:.5s}
.stat:nth-child(3) b{animation-delay:1s}
.stat:nth-child(4) b{animation-delay:1.5s}

/* Icon tiles drift, offset from one another. */
.feature .ico-box{animation:floaty 5.5s ease-in-out infinite}
.features>.feature:nth-child(2) .ico-box{animation-delay:.7s}
.features>.feature:nth-child(3) .ico-box{animation-delay:1.4s}
.features>.feature:nth-child(4) .ico-box{animation-delay:2.1s}
.features>.feature:nth-child(5) .ico-box{animation-delay:2.8s}
.features>.feature:nth-child(6) .ico-box{animation-delay:3.5s}

/* The headline gradient slowly shifts hue, so the hero is never static. */
.hero h1 .grad,.hero-copy h1 .grad{animation:hueShift 11s ease-in-out infinite}

/* Border on the primary CTA glows in and out. */
@keyframes ctaGlow{0%,100%{box-shadow:0 0 0 1px rgba(14,164,114,.5),0 8px 30px -10px var(--accent-glow)}
50%{box-shadow:0 0 0 1px rgba(14,164,114,.85),0 10px 42px -6px var(--accent-glow)}}
.btn-primary{animation:ctaGlow 3.2s ease-in-out infinite}
.btn-primary:hover{animation:none}

/* ===== graphics engine =====
   Everything below is CSS/SVG only — no scripts, so the public pages keep
   their zero-JS budget while still moving. */

/* --- stat numbers: real text content, animated as a pop-in on scroll into
   view rather than faked via a CSS counter() that search engines and screen
   readers can't read. font-variant-numeric keeps digit widths steady so nothing
   jitters when the value has mixed digit widths. --- */
.count{display:inline-block;font-variant-numeric:tabular-nums}
@supports (animation-timeline: view()){
  .count{animation:countPop .5s cubic-bezier(.2,.8,.3,1) both;
  animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes countPop{from{opacity:0;transform:translateY(6px) scale(.92)}to{opacity:1;transform:none}}

/* --- live ticker: real catalog data scrolling, duplicated for a seamless loop --- */
.ticker{position:relative;overflow:hidden;margin:34px 0;padding:13px 0;
border-block:1px solid var(--border);
background:linear-gradient(90deg,rgba(14,164,114,.04),transparent 30%,transparent 70%,rgba(124,92,245,.04))}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.ticker-track{display:flex;gap:0;width:max-content;animation:slide 42s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.tick{display:inline-flex;align-items:center;gap:9px;padding:0 22px;
font-family:var(--mono);font-size:.82rem;white-space:nowrap;color:var(--muted)}
.tick b{color:var(--text);font-weight:600}
.tick .px{color:var(--accent);font-weight:700}
.tick .sep{width:4px;height:4px;border-radius:50%;background:var(--accent);opacity:.5;
box-shadow:0 0 8px var(--accent)}

/* --- self-drawing growth chart --- */
.chart-wrap{position:relative}
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart .line{stroke-dasharray:1000;stroke-dashoffset:1000;
animation:draw 2.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .fill{opacity:0;animation:fadeIn .9s ease 1.4s forwards}
.chart .dot{opacity:0;animation:popIn .45s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes popIn{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.chart .dot:nth-of-type(1){animation-delay:1.1s}
.chart .dot:nth-of-type(2){animation-delay:1.5s}
.chart .dot:nth-of-type(3){animation-delay:1.9s}
.chart .dot:nth-of-type(4){animation-delay:2.3s}
.chart .pulse-dot{transform-box:fill-box;transform-origin:center;
animation:ping 2.2s ease-out infinite 2.6s}
@keyframes ping{0%{r:4;opacity:.9}70%{r:15;opacity:0}100%{r:15;opacity:0}}
.chart .gridline{stroke:var(--border);stroke-width:1}

/* --- section dividers so sections stop bleeding together --- */
.rule{height:1px;margin:0;border:0;
background:linear-gradient(90deg,transparent,var(--border-lit),transparent);opacity:.5}

/* --- split feature row: breaks the endless-grid rhythm --- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:46px;align-items:center}
.split.flip>*:first-child{order:2}
@media(max-width:860px){.split{grid-template-columns:1fr;gap:28px}.split.flip>*:first-child{order:0}}
.checklist{display:flex;flex-direction:column;gap:13px;margin-top:20px}
.checklist li{display:flex;gap:11px;align-items:flex-start;list-style:none;
color:var(--muted);font-size:.93rem}
.checklist .ic{width:19px;height:19px;flex:none;color:var(--accent);margin-top:2px}

/* --- comparison table: the "we are pros" section --- */
.vs{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0;
border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vs>div{padding:14px 18px;border-bottom:1px solid var(--border);font-size:.9rem;
display:flex;align-items:center;gap:8px}
.vs>div:nth-child(3n+2){background:rgba(14,164,114,.045);border-inline:1px solid var(--border)}
.vs .hd{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
font-weight:700;color:var(--faint);background:var(--bg-soft)}
.vs .hd.us{color:var(--accent);background:rgba(14,164,114,.08)}
.vs .yes{color:var(--accent)}.vs .no{color:var(--faint)}
.vs .ic{width:17px;height:17px;flex:none}
.vs>div:nth-last-child(-n+3){border-bottom:none}
@media(max-width:700px){.vs{grid-template-columns:1.3fr .8fr .8fr;font-size:.82rem}
.vs>div{padding:11px 12px}}

/* --- avatar chips for testimonials --- */
.quote{position:relative;background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;
transition:border-color .2s,transform .2s,box-shadow .2s}
.quote:hover{border-color:var(--border-lit);transform:translateY(-2px);
box-shadow:0 14px 40px -26px var(--accent-glow)}
.quote .txt{color:var(--text);font-size:.93rem;line-height:1.62}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:auto;
padding-top:14px;border-top:1px solid var(--border)}
.quote .av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;
font-family:var(--mono);font-weight:700;font-size:.82rem;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent-3))}
.quote:nth-child(even) .av{background:linear-gradient(135deg,var(--accent-2),#ff7ab8);color:#fff}
.quote .nm{font-weight:650;font-size:.9rem}
.quote .rl{color:var(--faint);font-size:.8rem}

/* --- category tiles replace the loose button pile --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
/* Row layout with the network's own mark on the left. As a plain stack of two
   text lines these were the flattest block on the page — the same shape as the
   platform cards, minus everything that made those read as clickable. */
.tile{position:relative;overflow:hidden;display:flex;align-items:center;gap:11px;
padding:13px 34px 13px 14px;border-radius:var(--radius-sm);
background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-1);
transition:border-color .2s,transform .2s,box-shadow .2s}
.tile:hover{border-color:var(--border-lit);transform:translateY(-2px);box-shadow:var(--shadow-2)}
.tile .pglyph{width:30px;height:30px;border-radius:9px}
.tile .pglyph svg{width:16px;height:16px}
/* The geo tiles have no network of their own, so they take the house accent
   rather than a brand colour. */
.pglyph.geo{background:rgb(var(--rgb-accent) / .16);color:var(--accent)}
.pglyph.geo .ic{width:16px;height:16px}
.tile:hover .pglyph{transform:scale(1.08) rotate(-6deg)}
.tl-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.tile .pf{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--faint);font-weight:700}
.tile .ct{font-weight:650;font-size:.89rem;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .ar{position:absolute;right:13px;top:50%;translate:0 -50%;width:15px;height:15px;
color:var(--faint);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s}
.tile:hover .ar{opacity:1;transform:none;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.tile,.tile .pglyph,.tile .ar{transition:none}}

/* ---- FAQ accordion ---- */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow-1);overflow:hidden;transition:border-color .2s var(--ease)}
.faq[open]{border-color:var(--border-2)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:15px 18px;cursor:pointer;list-style:none;user-select:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary h2{font-size:.95rem;font-weight:650;color:var(--text);margin:0;line-height:1.4}
.faq summary:hover h2{color:var(--accent)}
/* Plus sign built from two rules so it can rotate into a minus, rather than
   swapping one glyph for another. */
.faq-x{position:relative;width:15px;height:15px;flex:none}
.faq-x::before,.faq-x::after{content:"";position:absolute;inset:50% 0 auto;height:2px;
border-radius:2px;background:var(--faint);transform:translateY(-50%);
transition:transform .25s var(--ease),background .2s var(--ease)}
.faq-x::after{transform:translateY(-50%) rotate(90deg)}
.faq[open] .faq-x::before,.faq[open] .faq-x::after{background:var(--accent)}
.faq[open] .faq-x::after{transform:translateY(-50%) rotate(0deg)}
.faq p{padding:0 18px 17px;color:var(--muted);font-size:.9rem;line-height:1.65;
animation:faqIn .28s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.faq p{animation:none}.faq-x::before,.faq-x::after{transition:none}}

/* --- marquee of platform names --- */
.mq{overflow:hidden;position:relative;padding:6px 0}
.mq-track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.mq-item{padding:0 30px;font-weight:750;font-size:1.32rem;letter-spacing:-.02em;
color:var(--surface-3);white-space:nowrap;transition:color .25s}
.mq:hover .mq-item{color:var(--faint)}

/* ---- panel / forms ---- */
.panel{background:linear-gradient(180deg,var(--surface),var(--bg-soft));
border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.panel-narrow{max-width:430px;margin:8px auto}
form{display:flex;flex-direction:column;gap:15px}
label{display:flex;flex-direction:column;gap:7px;font-size:.86rem;font-weight:600;color:var(--muted)}
input,select,textarea{font-family:inherit;font-size:.97rem;padding:12px 14px;
border-radius:var(--radius-sm);border:1px solid var(--border);
background:var(--surface-2);color:var(--text);transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px rgba(124,92,255,.15)}
input::placeholder{color:var(--faint)}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);
font-size:.8rem;margin:2px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.alt-link{text-align:center;font-size:.88rem;color:var(--muted)}
.alt-link a{color:var(--accent-2);font-weight:600}
.alt-link a:hover{text-decoration:underline}

/* ---- price display ---- */
.price-hero{display:flex;align-items:baseline;gap:8px;margin:6px 0 22px}
.price-hero b{font-size:2.4rem;font-weight:800;letter-spacing:-.03em;
background:linear-gradient(120deg,var(--accent),var(--accent-2));
-webkit-background-clip:text;background-clip:text;color:transparent}
.price-hero span{color:var(--faint);font-size:.95rem}
.balance{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;
background:linear-gradient(120deg,var(--accent),var(--accent-2));
-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- tables ---- */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);
background:var(--surface)}
table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:520px}
th{text-align:left;padding:13px 16px;font-size:.74rem;text-transform:uppercase;
letter-spacing:.07em;color:var(--faint);font-weight:700;
border-bottom:1px solid var(--border);background:var(--bg-soft);white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid var(--border);color:var(--muted);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.strong{color:var(--text);font-weight:600}
td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* Platform pill in the home price list — keeps the second column scannable
   without a second colour per row. */
.pf-tag{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.72rem;
font-weight:650;color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}

/* ---- service cards ---- */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.svc-card{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;
padding:18px;border-radius:var(--radius);background:var(--surface);
border:1px solid var(--border);box-shadow:var(--shadow-2);
transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.svc-card:hover{transform:translateY(-4px);border-color:var(--border-lit);box-shadow:var(--shadow-3)}
/* A highlight crosses the card on hover, left to right. Transform-only, so it
   composites without laying the card out again. */
.svc-card::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(105deg,transparent 40%,rgb(var(--rgb-accent) / .1) 50%,transparent 60%);
transform:translateX(-120%);transition:transform .7s var(--ease)}
.svc-card:hover::after{transform:translateX(120%)}
.sc-top{display:flex;align-items:center;gap:11px}
.pglyph{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
font-family:var(--mono);font-weight:800;font-size:.76rem;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent-3));
box-shadow:0 4px 14px -6px rgba(0,0,0,.8);
transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.pglyph svg{width:19px;height:19px}
.svc-card:hover .pglyph{transform:scale(1.09) rotate(-6deg)}
.sc-id{min-width:0}
.sc-pf{display:block;font-size:.84rem;font-weight:700;color:var(--text)}
.sc-cat{display:block;font-size:.72rem;color:var(--faint);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.svc-card h3{font-size:.94rem;font-weight:600;color:var(--text);line-height:1.35}
.sc-rate{display:flex;align-items:baseline;gap:6px}
.sc-rate b{font-family:var(--mono);font-size:1.5rem;font-weight:800;color:var(--accent);
letter-spacing:-.03em}
.sc-rate span{font-size:.74rem;color:var(--faint)}
.sc-meta{display:flex;gap:14px;font-size:.76rem;color:var(--faint);
padding-top:10px;border-top:1px solid var(--border)}
.sc-meta b{font-family:var(--mono);color:var(--muted);font-weight:700}
.sc-btn{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:auto;
padding:10px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:700;
color:var(--accent);background:rgb(var(--rgb-accent) / .1);
transition:background .18s var(--ease),color .18s var(--ease)}
.sc-btn .ic{width:15px;height:15px;transition:transform .22s var(--ease)}
.svc-card:hover .sc-btn{background:var(--accent);color:#fff}
.svc-card:hover .sc-btn .ic{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.svc-card,.svc-card::after,.pglyph,.sc-btn .ic{transition:none}}

/* ---- platform cards ----
   auto-fill rather than auto-fit, so a five-item row does not stretch four
   cards across the page and strand the fifth alone underneath at a different
   width — the orphan-card look that made this block read as unfinished. */
.plat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.plat{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
text-align:center;gap:4px;padding:20px 14px 16px;border-radius:var(--radius);
background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-2);
transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.plat:hover{transform:translateY(-4px);border-color:var(--border-lit);box-shadow:var(--shadow-3)}
.plat .pglyph{width:46px;height:46px;border-radius:14px;margin-bottom:8px}
.plat .pglyph svg{width:24px;height:24px}
.plat:hover .pglyph{transform:scale(1.09) rotate(-6deg)}
.plat-nm{font-size:1rem;font-weight:750;color:var(--text)}
.plat-n{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.plat-px{margin-top:8px;font-size:.76rem;color:var(--faint)}
.plat-px b{font-family:var(--mono);font-size:1.02rem;font-weight:800;color:var(--accent)}
.plat-px i{font-style:normal;font-size:.68rem}
/* A soft wash rises from the foot of the card on hover, so the whole tile
   responds rather than only the logo. */
.plat::before{content:"";position:absolute;inset:auto 0 0;height:0;pointer-events:none;
background:linear-gradient(0deg,rgb(var(--rgb-accent) / .12),transparent);
transition:height .28s var(--ease)}
.plat:hover::before{height:70%}
@media (prefers-reduced-motion:reduce){.plat,.plat::before,.plat .pglyph{transition:none}}


/* ---- badges & misc ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
font-size:.73rem;font-weight:700;text-transform:capitalize;letter-spacing:.02em}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.pending,.badge.processing{background:rgba(212,149,46,.11);color:var(--warn)}
.badge.completed{background:rgba(14,164,114,.11);color:var(--ok)}
.badge.partial{background:rgba(59,130,246,.11);color:var(--accent-2)}
.badge.canceled,.badge.refunded{background:rgba(229,72,77,.11);color:var(--danger)}
.chips{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.chip{padding:7px 15px;border-radius:999px;font-size:.85rem;font-weight:600;
color:var(--muted);background:var(--surface-2);border:1px solid var(--border)}
.muted{color:var(--muted);font-size:.9rem}
.faint{color:var(--faint);font-size:.84rem}
.error{color:var(--danger);font-size:.9rem;background:rgba(229,72,77,.09);
border:1px solid rgba(229,72,77,.22);padding:11px 14px;border-radius:var(--radius-sm)}
.success{color:var(--accent);font-size:.9rem;background:rgba(14,164,114,.09);
border:1px solid rgba(14,164,114,.24);padding:11px 14px;border-radius:var(--radius-sm)}
.empty{text-align:center;padding:48px 20px;color:var(--faint)}
.empty b{display:block;color:var(--muted);font-size:1rem;margin-bottom:6px;font-weight:600}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.crumb{font-size:.85rem;color:var(--faint);margin-bottom:14px}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent-2)}

/* ---- order pipeline ----
   Four stages down one rail. The rail fills, and each dot lights as the fill
   reaches it -- one shared 9s loop with staggered delays, so it reads as a
   single order travelling through rather than four things blinking. */
.pipeline{position:relative;display:grid;gap:26px;padding-left:44px}
.pl-rail{position:absolute;left:15px;top:8px;bottom:8px;width:2px;
background:var(--border);border-radius:2px;overflow:hidden}
.pl-rail i{position:absolute;inset:0 0 auto;height:100%;transform-origin:top;
transform:scaleY(0);background:linear-gradient(180deg,var(--accent),var(--accent-2));
animation:plFill 9s cubic-bezier(.5,0,.3,1) infinite}
@keyframes plFill{0%{transform:scaleY(0)}70%,100%{transform:scaleY(1)}}

.pl-stage{position:relative}
.pl-dot{position:absolute;left:-44px;top:1px;width:32px;height:32px;border-radius:50%;
display:grid;place-items:center;background:var(--bg);border:2px solid var(--border);
transition:border-color .4s var(--ease)}
.pl-dot span{width:9px;height:9px;border-radius:50%;background:var(--border-2);
animation:plDot 9s var(--ease) infinite;animation-delay:calc(var(--i) * 1.7s)}
@keyframes plDot{0%,8%{background:var(--border-2);box-shadow:none;transform:scale(1)}
16%{background:var(--accent);box-shadow:0 0 0 6px rgb(var(--rgb-accent) / .16);transform:scale(1.15)}
75%,100%{background:var(--accent);box-shadow:0 0 0 3px rgb(var(--rgb-accent) / .1);transform:scale(1)}}

.pl-txt h3{font-size:1.02rem;margin-bottom:5px}
.pl-txt p{color:var(--muted);font-size:.93rem;max-width:64ch}

@media (prefers-reduced-motion:reduce){
.pl-rail i{animation:none;transform:scaleY(1)}
.pl-dot span{animation:none;background:var(--accent)}
}
@media (max-width:640px){
.pipeline{padding-left:36px;gap:22px}
.pl-rail{left:12px}
.pl-dot{left:-36px;width:26px;height:26px}
.pl-txt p{font-size:.89rem}
}

/* ---- footer ---- */
footer{border-top:1px solid var(--border);padding:34px 0;margin-top:70px;
color:var(--faint);font-size:.86rem;background:rgba(7,7,12,.6)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot nav a{padding:0;font-size:.86rem}

/* ---- mobile ----
   The header used to keep its desktop shape all the way down: brand, four nav
   links and a filled CTA squeezed into a 390px flex row, wrapping into each
   other. Below 860px the links move into a drop panel behind the menu button,
   which is what leaves the bar itself readable. */
@media (max-width:860px){
.mnav-btn{display:flex}
.hdr{position:relative;gap:10px}
header nav{position:absolute;top:calc(100% + 10px);right:0;left:0;
flex-direction:column;align-items:stretch;gap:2px;padding:8px;
background:var(--surface);border:1px solid var(--border-2);border-radius:14px;
box-shadow:0 24px 48px -20px rgba(0,0,0,.9);
transform-origin:top right;transform:scale(.96) translateY(-8px);
opacity:0;visibility:hidden;
transition:opacity .2s ease,transform .24s cubic-bezier(.34,1.3,.64,1),visibility .24s}
.mnav-in:checked ~ nav{opacity:1;visibility:visible;transform:none}
header nav a{padding:13px 14px;border-radius:10px;font-size:.97rem;color:var(--text)}
header nav a.cta{margin-top:6px;text-align:center}
}

@media (max-width:640px){
main{padding:22px 0 48px}
.hdr{height:58px}
.wrap,.wrap-wide{padding:0 18px}
.sec{margin-top:34px}
.panel{padding:20px}

/* Sub-11px labels are unreadable at arm's length. These sit at .64–.68rem for
   the desktop grid; on a phone they get their floor back. The selectors have to
   match the specificity of the rules they override (.tile .pf, .card .tag) —
   a bare .pf here loses to those and silently changes nothing. */
.tile .pf,.card .tag,.plat-px i,.ex-px i{font-size:.72rem;letter-spacing:.06em}

/* Footer links were 22px tall with zero padding — under half the 44px target. */
.foot{justify-content:flex-start}
.foot nav{flex-wrap:wrap;gap:2px;margin-left:-10px}
.foot nav a{padding:10px;font-size:.88rem}

/* The comparison grid held three fixed columns, so a 152px label column wrapped
   every row to three lines. Label above, verdicts below. */
.vs{grid-template-columns:1fr 1fr}
.vs > div:nth-child(3n+1){grid-column:1 / -1;padding-bottom:2px;font-weight:600;
color:var(--text);border-bottom:0}
.vs > div:nth-child(3n+2),.vs > div:nth-child(3n+3){padding-top:2px}
.vs .hd{font-size:.74rem}
.vs .hd:first-child{display:none}
}

/* ===== hero shell ===== */
.hero-x{position:relative;display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:52px;align-items:center;padding:34px 0 18px}
@media(max-width:980px){.hero-x{grid-template-columns:1fr;gap:36px;padding-top:16px}}

.hero-x h1{font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.06;letter-spacing:-.035em}
.hero-x .lead{color:var(--muted);font-size:clamp(1rem,1.7vw,1.13rem);max-width:520px;margin-top:18px}
.hero-x .hero-actions{margin-top:28px}

/* trust strip under the CTAs */
.trust{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;
padding-top:22px;border-top:1px solid var(--border)}
.trust div{display:flex;align-items:center;gap:8px;font-size:.83rem;color:var(--muted)}
.trust .ic{width:16px;height:16px;color:var(--accent);flex:none}

/* login form embedded in the hero's right column — every high-volume panel
   in this market puts this here instead of behind a nav link. */
.hero-login{max-width:400px;justify-self:end;width:100%}
@media(max-width:980px){.hero-login{justify-self:stretch;max-width:none}}

/* blunt, oversized trust-signal numbers — deliberately plain (no gradient
   text, no icon) because that bluntness is what reads as "real activity"
   rather than "marketing site" in this category. */
/* Fixed counts, not auto-fit. With four cells auto-fit resolves to three
   columns plus a lone orphan across a wide band of tablet widths; 2x2 then 4
   across never strands one. */
.big-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;background:var(--border);border:1px solid var(--border);
border-radius:var(--radius);overflow:hidden;margin:38px 0}
.big-stat{position:relative;background:var(--bg);padding:22px 20px;text-align:center;
transition:background .2s var(--ease)}
.big-stat:hover{background:var(--surface)}
/* These are the page's proof that the panel is real, so the figure carries the
   accent and the weight. In plain --text at this size it read as a caption
   rather than as a number worth noticing. */
.big-stat b{display:block;font-family:var(--mono);font-weight:800;
font-size:clamp(1.9rem,4.2vw,2.7rem);letter-spacing:-.03em;color:var(--accent);
text-shadow:0 0 30px rgb(var(--rgb-accent) / .3);line-height:1.1}
/* Direct child only. counter() wraps its figure in <span class="count"> inside
   the <b>, so an unscoped .big-stat span caught the number too and rendered it
   at .72rem in --faint — the cell showed a caption-sized grey figure under a
   30px emerald rule that never applied to anything. */
.big-stat > span{display:block;margin-top:6px;font-size:.72rem;color:var(--faint);
text-transform:uppercase;letter-spacing:.1em;font-weight:750}
/* A hairline in the accent sweeps across the foot of each cell as it scrolls
   into view, one after the other. */
.big-stat::after{content:"";position:absolute;inset:auto 0 0;height:2px;
transform-origin:left;transform:scaleX(0);
background:linear-gradient(90deg,var(--accent),transparent)}
@supports (animation-timeline: view()){
  .big-stat::after{animation:statRule linear both;animation-timeline:view();
  animation-range:entry 15% entry 55%}
  .big-stat:nth-child(2)::after{animation-range:entry 20% entry 62%}
  .big-stat:nth-child(3)::after{animation-range:entry 25% entry 70%}
  .big-stat:nth-child(4)::after{animation-range:entry 30% entry 78%}
}
@media(min-width:820px){.big-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@keyframes statRule{to{transform:scaleX(1)}}

/* ===== animated order card ===== */
.demo{position:relative;perspective:1400px}
.demo-card{position:relative;padding:22px;border-radius:18px;
background:linear-gradient(168deg,var(--surface),var(--bg-soft));
border:1px solid var(--border-lit);
box-shadow:0 34px 90px -50px var(--accent-glow),0 0 0 1px rgba(14,164,114,.06);
transform:rotateY(-7deg) rotateX(3deg);
animation:tilt 13s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotateY(-7deg) rotateX(3deg) translateY(0)}
50%{transform:rotateY(-3deg) rotateX(1deg) translateY(-9px)}}

.demo-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid var(--border)}
.demo-ttl{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.95rem}
.demo-ttl .av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
font-family:var(--mono);font-size:.72rem;font-weight:800;color:#fff;
background:linear-gradient(135deg,var(--accent),var(--accent-3))}
.demo-st{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
font-weight:700;padding:5px 11px;border-radius:999px;position:relative;overflow:hidden}
/* status swaps text on a loop via three stacked labels */
.demo-st span{display:block;animation:stCycle 9s steps(1,end) infinite}
.demo-st .s1{color:var(--warn)}
.demo-st .s2{color:var(--accent-3);animation-delay:-6s}
.demo-st .s3{color:var(--accent);animation-delay:-3s}
.demo-st .s2,.demo-st .s3{position:absolute;inset:0;display:grid;place-items:center}
@keyframes stCycle{0%,33%{opacity:1}34%,100%{opacity:0}}

.demo-rows{display:flex;flex-direction:column;gap:11px}
.demo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.85rem}
.demo-row .k{color:var(--faint)}
.demo-row .v{font-family:var(--mono);font-weight:650;color:var(--text)}

/* count-up numbers */
@property --d1{syntax:'<integer>';initial-value:0;inherits:false}
@property --d2{syntax:'<integer>';initial-value:0;inherits:false}
.n-del{counter-reset:d var(--d1);animation:cDel 9s cubic-bezier(.25,.9,.3,1) infinite}
.n-del::after{content:counter(d)}
@keyframes cDel{0%{--d1:0}62%{--d1:5000}100%{--d1:5000}}
.n-pct{counter-reset:p var(--d2);animation:cPct 9s cubic-bezier(.25,.9,.3,1) infinite}
.n-pct::after{content:counter(p) "%"}
@keyframes cPct{0%{--d2:0}62%{--d2:100}100%{--d2:100}}

/* progress bar */
.demo-bar{height:7px;border-radius:99px;background:var(--surface-3);
overflow:hidden;margin-top:17px;position:relative}
.demo-bar i{display:block;height:100%;border-radius:99px;width:0;
/* One colour, lightening toward the leading edge. Running emerald into the
   steel-blue accent made the hero's focal element read as a stray rainbow
   against an otherwise single-accent page. */
background:linear-gradient(90deg,rgb(var(--rgb-accent) / .8),var(--accent));
box-shadow:0 0 16px -2px var(--accent-glow);
animation:fill 9s cubic-bezier(.25,.9,.3,1) infinite}
@keyframes fill{0%{width:0}62%{width:100%}100%{width:100%}}
.demo-bar::after{content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.32),transparent);
animation:barShine 2.1s linear infinite}
@keyframes barShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.demo-foot{display:flex;justify-content:space-between;align-items:baseline;
margin-top:16px;padding-top:15px;border-top:1px solid var(--border)}
.demo-foot .lbl{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--faint);font-weight:700}
.demo-foot .amt{font-family:var(--mono);font-size:1.5rem;font-weight:800;
color:var(--accent);text-shadow:0 0 26px var(--accent-glow)}

/* floating satellite chips around the card */
.chip-f{position:absolute;display:flex;align-items:center;gap:7px;
padding:8px 13px;border-radius:11px;font-size:.76rem;font-weight:650;white-space:nowrap;
background:rgba(11,18,24,.92);backdrop-filter:blur(10px);
border:1px solid var(--border-lit);box-shadow:0 14px 34px -20px rgba(0,0,0,.9)}
.chip-f .ic{width:14px;height:14px;color:var(--accent)}
.chip-f.c1{top:-16px;right:16px;animation:bob 6s ease-in-out infinite}
.chip-f.c2{bottom:34px;left:-26px;animation:bob 7.5s ease-in-out infinite .9s}
/* Anchored to the card's bottom edge, not to 44% of its height. Sitting at the
   vertical midpoint put this chip straight over the Rate row and hid the price
   — at every width, so it was never a breakpoint problem. The chips are meant
   to straddle the card's outline, which only works from an edge. */
.chip-f.c3{bottom:-19px;right:22px;animation:bob 6.8s ease-in-out infinite 1.7s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@media(max-width:520px){.chip-f.c2,.chip-f.c3{display:none}}

/* glow pad behind the card */
.demo::before{content:"";position:absolute;inset:8% -6% 6% -6%;z-index:-1;
border-radius:50%;filter:blur(58px);opacity:.4;
background:radial-gradient(circle at 40% 40%,rgba(14,164,114,.5),transparent 62%),
radial-gradient(circle at 70% 70%,rgba(124,92,245,.32),transparent 60%);
animation:breathe 7s ease-in-out infinite}

/* With motion suppressed the loop would rest on its first frame — an empty bar
   and a zero counter, which reads as broken rather than still. Pin the finished
   state instead, so the card still says something. */
@media (prefers-reduced-motion:reduce){
  /* animation:none is required, not just the static value — an animation's
     resting frame outranks a normal declaration in the cascade. */
  .demo-bar i,.demo-bar::after,.n-del,.n-pct,.demo-card,.chip-f,.demo::before,
  .demo-st span{animation:none}
  .demo-bar i{width:100%}
  .n-del{--d1:5000}
  .n-pct{--d2:100}
  .demo-st .s1,.demo-st .s2{display:none}
  .demo-st .s3{position:static;opacity:1}
  .demo-card{transform:none}
}
/* HERO_STYLE is concatenated after BASE_STYLE, so the mobile floor for these
   labels has to live here — the equivalent rule in the base sheet is emitted
   earlier and loses the cascade at equal specificity. */
@media (max-width:640px){
.demo-foot .lbl{font-size:.72rem}
.demo-st{font-size:.72rem}
.big-stat > span{font-size:.68rem;letter-spacing:.07em}
.big-stat{padding:18px 12px}
}