/* ============================================================
   FACET — Landing
   ============================================================ */

/* ---------------- Splash / заставка ---------------- */
#splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--paper);
  transition: clip-path 1.1s var(--e-inout), opacity .6s var(--e-out);
  overflow:hidden;
}
#splash.done{ clip-path: inset(0 0 100% 0); pointer-events:none }
#splash::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(38% 42% at 28% 30%, rgba(107,77,251,.16), transparent 70%),
    radial-gradient(34% 38% at 74% 66%, rgba(22,200,216,.16), transparent 70%),
    radial-gradient(30% 34% at 60% 22%, rgba(255,164,36,.12), transparent 70%);
  filter:blur(18px); animation: splash-drift 9s var(--e-inout) infinite alternate;
}
@keyframes splash-drift{ to{ transform:translate3d(2%,-2%,0) scale(1.08) } }

.splash-inner{ position:relative; z-index:2; display:grid; justify-items:center; gap:26px; width:min(440px,84vw) }

/* Prism beam graphic */
.prism-stage{ width:190px; height:190px; position:relative; display:grid; place-items:center }
.prism-stage svg{ overflow:visible }
.beam-in{ stroke-dasharray:120; stroke-dashoffset:120; animation: draw 1s var(--e-out) .15s forwards }
.fan path{ stroke-dasharray:130; stroke-dashoffset:130; animation: draw .9s var(--e-out) forwards; animation-delay: calc(.85s + var(--i) * .07s) }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.gem-face{ opacity:0; transform-origin:24px 24px; animation: gem-in .75s var(--e-spring) forwards; animation-delay: calc(.2s + var(--i)*.1s) }
@keyframes gem-in{ from{opacity:0; transform:scale(.4) rotate(-22deg)} to{opacity:1; transform:none} }
.gem-spin{ animation: gem-spin 14s linear infinite; transform-origin:center }
@keyframes gem-spin{ to{ transform:rotate(360deg) } }

.splash-word{ display:flex; gap:.06em; font-size:clamp(2rem,7vw,3.2rem); font-weight:600; letter-spacing:.06em }
.splash-word span{
  display:inline-block; opacity:0; transform:translateY(22px) rotate(6deg);
  animation: letter-up .7s var(--e-spring) forwards; animation-delay: calc(.55s + var(--i)*.06s);
}
@keyframes letter-up{ to{opacity:1;transform:none} }

.splash-bar{ width:100%; height:2px; background:var(--sunk); border-radius:2px; overflow:hidden }
.splash-bar i{ display:block; height:100%; width:0%; background:var(--spectrum); background-size:200% 100%; transition:width .3s var(--e-out) }
.splash-meta{ display:flex; justify-content:space-between; width:100%; }
.splash-meta span{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4) }

/* ---------------- Nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:90;
  transition: transform .45s var(--e-out), background-color .4s, box-shadow .4s, backdrop-filter .4s;
}
.nav-in{
  display:flex; align-items:center; gap:18px; height:66px;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.nav.stuck{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(16px) saturate(1.5); -webkit-backdrop-filter:blur(16px) saturate(1.5);
  box-shadow: 0 1px 0 var(--line), var(--sh-1);
}
.nav.hidden{ transform:translateY(-104%) }

.logo{ display:flex; align-items:center; gap:9px; font-weight:600; letter-spacing:-.03em; font-size:1.0625rem }
.logo svg,.logo img{ width:26px;height:26px }
.logo b{ font-weight:600; letter-spacing:.01em }

.nav-links{ display:flex; gap:2px; margin-inline:auto }
.nav-links a{
  position:relative; padding:8px 13px; border-radius:var(--r-pill);
  font-size:.9062rem; color:var(--ink-3); font-weight:450;
  transition: color var(--t), background-color var(--t);
}
.nav-links a:hover{ color:var(--ink); background:var(--sunk) }
.nav-cta{ display:flex; align-items:center; gap:8px }

.burger{ display:none }
@media (max-width:920px){
  .nav-links{ display:none }
  .burger{ display:inline-flex }
}
.mobile-menu{
  position:fixed; inset:66px 0 0; z-index:89; background:var(--paper);
  padding:22px var(--gut); display:none; flex-direction:column; gap:4px;
  animation: fade-in .3s var(--e-out);
}
.mobile-menu.open{ display:flex }
.mobile-menu a{ padding:16px 4px; font-size:1.35rem; font-weight:500; letter-spacing:-.03em; border-bottom:1px solid var(--line) }

/* ---------------- Hero ---------------- */
.hero{ position:relative; padding:clamp(108px,15vh,170px) 0 clamp(40px,6vw,74px); overflow:hidden }
.hero-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
.hero-bg .glow.g1{ width:640px;height:640px;top:-240px;left:-140px; background:radial-gradient(circle,#8f7bff,transparent 66%); opacity:.36 }
.hero-bg .glow.g2{ width:560px;height:560px;top:-160px;right:-120px; background:radial-gradient(circle,#16c8d8,transparent 66%); opacity:.3 }
.hero-bg .glow.g3{ width:520px;height:520px;bottom:-280px;left:38%; background:radial-gradient(circle,#ffa424,transparent 66%); opacity:.22 }
.hero-grid-lines{
  position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px; opacity:.5;
  mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000 10%,transparent 78%);
}
.hero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(24px,4vw,56px); align-items:center }
@media (max-width:1040px){ .hero-in{ grid-template-columns:1fr; gap:36px } }

.hero-badge{
  display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 6px 0 12px;
  border-radius:var(--r-pill); background:var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-size:.8125rem; color:var(--ink-2); margin-bottom:22px;
}
.hero-badge em{ font-style:normal; color:var(--ink-4) }
.hero-badge .tagx{ background:var(--sunk); border-radius:var(--r-pill); padding:3px 9px; font-size:.75rem; font-weight:500 }

.hero h1{ margin-bottom:22px; font-size:clamp(2.3rem,5vw,4.5rem); letter-spacing:-.045em; line-height:.98 }
.hero h1 .ln{ display:block; overflow:hidden }
.hero h1 .w{ display:inline-block; transform:translateY(105%); opacity:0 }
.hero h1 .w.in{ transform:none; opacity:1; transition: transform 1s var(--e-out), opacity .7s var(--e-out); transition-delay:var(--d,0ms) }

.hero-lede{ max-width:50ch; margin-bottom:28px }
.hero-actions{ display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-bottom:26px }

.ca-pill{
  display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 14px;
  border-radius:var(--r-pill); background:var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  font-family:var(--mono); font-size:.75rem; color:var(--ink-3);
  transition: box-shadow var(--t), transform var(--t) var(--e-out);
}
.ca-pill:hover{ transform:translateY(-1px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-2) }
.ca-pill b{ color:var(--ink); font-weight:500 }
.ca-copy{ display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-pill);background:var(--sunk) }
.ca-copy svg{width:14px;height:14px}

.hero-proof{ display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--line); padding-top:20px }
.hero-proof > div{ padding-right:clamp(20px,3vw,40px); margin-right:clamp(20px,3vw,40px); border-right:1px solid var(--line) }
.hero-proof > div:last-child{ border:0; margin:0; padding:0 }
.hero-proof .k{ font-size:clamp(1.25rem,2vw,1.75rem); font-weight:600; letter-spacing:-.035em; line-height:1.1 }
.hero-proof .l{ font-size:.75rem; color:var(--ink-4); letter-spacing:.01em }

/* Hero visual: prism + floating cards */
.hero-visual{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; min-height:380px; max-height:560px }
#prismCanvas{ position:absolute; inset:0; width:100%; height:100%; }
.float-card{
  position:absolute; background:var(--paper); border-radius:var(--r-md); padding:11px 13px;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-3);
  display:flex; align-items:center; gap:10px; z-index:3;
  animation: bob 6s var(--e-inout) infinite alternate; animation-delay:var(--dl,0s);
  backdrop-filter:blur(8px);
}
@keyframes bob{ to{ transform:translateY(-14px) } }
.float-card .mark{ border-radius:9px }
.float-card .fc-t{ font-size:.8125rem; font-weight:600; letter-spacing:-.02em; line-height:1.2 }
.float-card .fc-s{ font-size:.6875rem; color:var(--ink-4) }
.float-card .fc-v{ margin-left:8px; text-align:right }
.float-card .fc-p{ font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums }
.float-card .fc-c{ font-size:.6875rem; font-variant-numeric:tabular-nums }
.fc1{ top:8%; left:-2% } .fc2{ top:40%; right:-6% } .fc3{ bottom:9%; left:8% }
@media (max-width:1040px){ .fc1{left:2%} .fc2{right:0} }
@media (max-width:560px){ .float-card{ transform:scale(.86) } .fc2{right:-2%} }

/* ---------------- Marquee ---------------- */
.marquee{
  position:relative; overflow:hidden; padding:16px 0; margin-top:clamp(20px,4vw,44px);
  border-block:1px solid var(--line); background:var(--paper);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{ display:flex; gap:0; width:max-content; animation: slide 46s linear infinite }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }
.mq-item{ display:flex; align-items:center; gap:10px; padding:0 22px; border-right:1px solid var(--line); white-space:nowrap }
.mq-item .mark{ border-radius:8px }
.mq-sym{ font-size:.8438rem; font-weight:600; letter-spacing:-.02em }
.mq-px{ font-size:.8438rem; font-variant-numeric:tabular-nums; color:var(--ink-2) }
.mq-ch{ font-size:.75rem; font-variant-numeric:tabular-nums; font-weight:500 }

/* ---------------- Sections ---------------- */
.sec{ padding:clamp(56px,8.5vw,120px) 0; position:relative }
.sec-head{ max-width:760px; margin-bottom:clamp(28px,4vw,52px) }
.sec-head .eyebrow{ display:block; margin-bottom:14px }
.sec-head .lede{ margin-top:14px }
.sec-tint{ background:var(--paper); border-block:1px solid var(--line) }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,20px); position:relative }
@media (max-width:820px){ .steps{ grid-template-columns:1fr } }
.step{ position:relative; padding:clamp(20px,2.4vw,30px); border-radius:var(--r-xl); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); overflow:hidden }
.step::after{ content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); opacity:.9 }
.step-n{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; color:var(--ink-4); margin-bottom:16px; display:block }
.step-ico{ width:52px;height:52px;border-radius:15px; display:grid;place-items:center; margin-bottom:18px; background:var(--cw); color:var(--c) }
.step-ico svg{ width:25px;height:25px }
.step h3{ margin-bottom:8px }
.step p{ font-size:.9375rem; color:var(--ink-3); line-height:1.6 }
.step-flow{ margin-top:18px; display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.75rem; color:var(--ink-4) }
.step-flow b{ color:var(--ink-2); font-weight:500 }

/* Market grid */
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:clamp(10px,1.2vw,14px) }
.mkt{
  display:block; padding:16px 17px; border-radius:var(--r-lg); background:var(--paper);
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out);
  position:relative; overflow:hidden;
}
.mkt:hover{ transform:translateY(-4px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--sh-3) }
.mkt::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(180px 90px at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--tint) 14%, transparent), transparent 70%);
  opacity:0; transition:opacity var(--t);
}
.mkt:hover::after{ opacity:1 }
.mkt-top{ display:flex; align-items:center; gap:11px; margin-bottom:14px }
.mkt-top .mark{ border-radius:11px; flex:none }
.mkt-nm{ font-size:.9375rem; font-weight:600; letter-spacing:-.024em; line-height:1.2 }
.mkt-co{ font-size:.75rem; color:var(--ink-4) }
.mkt-px{ font-size:1.375rem; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums; line-height:1.1 }
.mkt-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px }
.mkt-spark{ width:96px; height:34px; flex:none }
.mkt-foot{ display:flex; gap:16px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line) }
.mkt-foot div{ font-size:.75rem; color:var(--ink-4) }
.mkt-foot b{ display:block; font-size:.8125rem; color:var(--ink-2); font-weight:600; font-variant-numeric:tabular-nums }

/* Product showcase */
.show{ display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(20px,3vw,48px); align-items:center }
@media (max-width:960px){ .show{ grid-template-columns:1fr } }
.show-tabs{ display:flex; flex-direction:column; gap:6px }
.show-tab{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius:var(--r-lg);
  text-align:left; transition: background-color var(--t), box-shadow var(--t), transform var(--t) var(--e-out);
  position:relative;
}
.show-tab:hover{ background:var(--paper) }
.show-tab[aria-selected="true"]{ background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2) }
.show-tab::before{
  content:""; position:absolute; left:0; top:16px; bottom:16px; width:3px; border-radius:3px;
  background:var(--c); transform:scaleY(0); transform-origin:center; transition:transform .4s var(--e-spring);
}
.show-tab[aria-selected="true"]::before{ transform:scaleY(1) }
.show-ico{ width:40px;height:40px;border-radius:12px; display:grid;place-items:center; flex:none; background:var(--cw); color:var(--c) }
.show-ico svg{width:20px;height:20px}
.show-tab h4{ font-size:1rem; font-weight:600; letter-spacing:-.024em; margin-bottom:3px }
.show-tab p{ font-size:.875rem; color:var(--ink-3); line-height:1.5 }
.show-stage{ position:relative; border-radius:var(--r-2xl); overflow:hidden; background:var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3); min-height:430px }
.show-pane{ position:absolute; inset:0; padding:clamp(16px,2vw,26px); opacity:0; transform:translateY(14px) scale(.985); pointer-events:none; transition: opacity .45s var(--e-out), transform .55s var(--e-out) }
.show-pane.on{ opacity:1; transform:none; pointer-events:auto }

/* Mini app mockups inside the stage */
.mock{ background:var(--paper); border-radius:var(--r-lg); box-shadow: inset 0 0 0 1px var(--line), var(--sh-2); overflow:hidden; height:100% ; display:flex; flex-direction:column}
.mock-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--bg) }
.mock-bar i{ width:9px;height:9px;border-radius:99px;background:var(--line-strong) }
.mock-bar span{ margin-left:8px; font-family:var(--mono); font-size:.6875rem; color:var(--ink-4) }
.mock-body{ padding:clamp(12px,1.6vw,20px); flex:1; overflow:hidden }

/* Stats band */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow: inset 0 0 0 1px var(--line) }
@media (max-width:820px){ .stats{ grid-template-columns:repeat(2,1fr) } }
.stat{ background:var(--paper); padding:clamp(20px,2.6vw,32px) }
.stat .k{ font-size:clamp(1.75rem,3.6vw,2.9rem); font-weight:600; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums }
.stat .l{ font-size:.8125rem; color:var(--ink-3); margin-top:9px }
.stat .s{ font-size:.6875rem; color:var(--ink-4); margin-top:4px; font-family:var(--mono) }

/* Fee split */
.split{ display:grid; grid-template-columns:auto 1fr; gap:clamp(22px,3.4vw,52px); align-items:center }
@media (max-width:720px){ .split{ grid-template-columns:1fr; justify-items:center; text-align:center } }
.donut{ overflow:visible }
.ring-seg{ animation: ring-draw 1.1s var(--e-out) both; animation-delay: calc(var(--i) * .16s); transform-origin:center }
@keyframes ring-draw{ from{ opacity:0; stroke-dasharray:0 9999 } }
.split-legend{ display:grid; gap:14px }
.leg{ display:flex; align-items:flex-start; gap:13px }
.leg i{ width:11px;height:11px;border-radius:4px;flex:none;margin-top:6px }
.leg b{ display:block; font-size:1.0625rem; font-weight:600; letter-spacing:-.024em }
.leg span{ font-size:.875rem; color:var(--ink-3) }
.leg em{ font-style:normal; font-family:var(--mono); font-size:.8125rem; color:var(--ink-4); margin-left:6px }

/* Feature cards */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:clamp(12px,1.5vw,18px) }
.feat{ padding:clamp(20px,2.4vw,28px); border-radius:var(--r-xl); background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); position:relative; overflow:hidden; transition: transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out) }
.feat:hover{ transform:translateY(-5px); box-shadow: inset 0 0 0 1px var(--line), var(--sh-3) }
.feat-ico{ width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;background:var(--cw);color:var(--c); transition:transform .5s var(--e-spring) }
.feat:hover .feat-ico{ transform:rotate(-8deg) scale(1.08) }
.feat-ico svg{width:23px;height:23px}
.feat h3{ margin-bottom:8px }
.feat p{ font-size:.9062rem; color:var(--ink-3); line-height:1.6 }

/* FAQ */
.faq{ border-top:1px solid var(--line) }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; text-align:left; border-bottom:1px solid var(--line) }
.faq-q h3{ font-size:clamp(1rem,1.5vw,1.1875rem); font-weight:500; letter-spacing:-.024em }
.faq-q .pm{ width:30px;height:30px;border-radius:99px;background:var(--sunk);display:grid;place-items:center;flex:none;transition:transform .4s var(--e-spring), background-color var(--t) }
.faq-q[aria-expanded="true"] .pm{ transform:rotate(45deg); background:var(--brand); color:#fff }
.faq-q .pm svg{width:15px;height:15px}
.faq-a{ overflow:hidden; height:0; transition:height .45s var(--e-inout); border-bottom:1px solid var(--line) }
.faq-a > div{ padding:4px 0 24px; max-width:76ch; color:var(--ink-3); font-size:.9375rem; line-height:1.68 }

/* CTA */
.cta{ position:relative; border-radius:var(--r-2xl); overflow:hidden; padding:clamp(34px,6vw,76px); text-align:center; background:var(--ink); color:var(--paper) }
.cta::before{ content:""; position:absolute; inset:0; background:var(--spectrum); background-size:200% 100%; opacity:.92; animation: hue-drift 16s ease-in-out infinite alternate }
.cta::after{ content:""; position:absolute; inset:0; background:radial-gradient(70% 120% at 50% 0%, rgba(255,255,255,.42), transparent 62%) }
.cta > *{ position:relative; z-index:2 }
.cta h2{ color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.14) }
.cta p{ color:rgba(255,255,255,.88); max-width:52ch; margin:14px auto 28px }
.cta .btn{ --btn-bg:#fff; --btn-fg:#0c0c14; --btn-bd:transparent }
.cta .btn-2{ --btn-bg:rgba(255,255,255,.14); --btn-fg:#fff; --btn-bd:rgba(255,255,255,.4) }
.cta .btn-2:hover{ --btn-bg:rgba(255,255,255,.24) }

/* Footer */
.foot{ padding:clamp(40px,6vw,72px) 0 34px; border-top:1px solid var(--line); background:var(--paper) }
.foot-grid{ display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(20px,3vw,40px); margin-bottom:40px }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr } }
.foot h5{ font-family:var(--mono); font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4); margin-bottom:14px }
.foot li a{ display:block; padding:6px 0; font-size:.9062rem; color:var(--ink-3); transition:color var(--t), transform var(--t) var(--e-out) }
.foot li a:hover{ color:var(--ink); transform:translateX(3px) }
.foot-note{ font-size:.8125rem; color:var(--ink-4); max-width:46ch; margin-top:14px; line-height:1.6 }
.foot-bot{ display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:.8125rem; color:var(--ink-4) }
.foot-social{ display:flex; gap:8px }

/* Disclaimer strip */
.disclaim{ padding:18px 0; background:var(--bg-2); border-top:1px solid var(--line) }
.disclaim p{ font-size:.75rem; color:var(--ink-4); line-height:1.6; max-width:96ch }

/* Back to top */
.totop{ position:fixed; right:18px; bottom:18px; z-index:80; opacity:0; transform:translateY(12px) scale(.9); pointer-events:none; transition: all .4s var(--e-spring) }
.totop.on{ opacity:1; transform:none; pointer-events:auto }

/* Live value flash is defined once in base.css. */

/* ---------------- Mock UI inside showcase ---------------- */
.mock-head{ display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px }
.mock-head b{ font-size:1.0625rem; font-weight:600; letter-spacing:-.028em }

.mrows{ display:grid; gap:7px }
.mrow{
  display:flex; align-items:center; gap:12px; padding:11px 13px;
  border-radius:var(--r-md); background:var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: mrow-in .55s var(--e-out) both;
}
.mrow:nth-child(1){animation-delay:.04s}.mrow:nth-child(2){animation-delay:.1s}
.mrow:nth-child(3){animation-delay:.16s}.mrow:nth-child(4){animation-delay:.22s}
@keyframes mrow-in{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.mrow .mark{ border-radius:10px; flex:none }
.mrow-nm{ min-width:0; flex:1 }
.mrow-nm b{ display:block; font-size:.875rem; font-weight:600; letter-spacing:-.022em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mrow-nm span{ font-size:.6875rem; color:var(--ink-4) }
.mrow-k{ text-align:right; flex:none }
.mrow-k b{ display:block; font-size:.8125rem; font-weight:600; font-variant-numeric:tabular-nums }
.mrow-k span{ font-size:.625rem; color:var(--ink-4); text-transform:uppercase; letter-spacing:.06em }
@media (max-width:560px){ .mrow-k:nth-of-type(2){display:none} .mrow .btn{display:none} }

.swapbox{ display:grid; gap:9px }
.swapleg{ padding:14px 15px; border-radius:var(--r-md); background:var(--bg); box-shadow: inset 0 0 0 1px var(--line) }
.swapleg > span{ font-size:.75rem; color:var(--ink-4); display:block; margin-bottom:5px }
.swapleg > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.swapleg b{ font-size:1.5rem; font-weight:600; letter-spacing:-.035em; font-variant-numeric:tabular-nums }
.swapleg .tok{ font-size:.8125rem; font-weight:600; color:var(--ink-3); background:var(--sunk); padding:4px 10px; border-radius:var(--r-pill) }
.swaparrow{ display:grid; place-items:center; width:32px;height:32px;border-radius:99px; background:var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); margin:-19px auto; position:relative; z-index:2; color:var(--ink-3) }
.swaparrow svg{width:16px;height:16px}
.swapmeta{ display:flex; justify-content:space-between; font-size:.8125rem; padding:3px 3px }
.swapmeta span{ color:var(--ink-4) } .swapmeta b{ font-weight:500; font-variant-numeric:tabular-nums }

.bigapy{
  text-align:center; padding:clamp(18px,2.6vw,30px) 16px; border-radius:var(--r-lg); margin-bottom:14px;
  background:linear-gradient(145deg,#e4faf1,#e6f4ff); position:relative; overflow:hidden;
}
html[data-theme="dark"] .bigapy{ background:linear-gradient(145deg,#122f2a,#12233f) }
.bigapy.amber{ background:linear-gradient(145deg,#fff3e0,#ffe9ef) }
html[data-theme="dark"] .bigapy.amber{ background:linear-gradient(145deg,#3a2c12,#3a1626) }
.bigapy-k{ font-size:clamp(2.4rem,5vw,3.6rem); font-weight:600; letter-spacing:-.05em; line-height:1; font-variant-numeric:tabular-nums }
.bigapy-k small{ font-size:.42em; font-weight:500; margin-left:2px }
.bigapy-l{ font-size:.8125rem; color:var(--ink-3); margin-top:8px }

.kgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow: inset 0 0 0 1px var(--line) }
.kgrid > div{ background:var(--paper); padding:12px 14px }
.kgrid b{ display:block; font-size:1rem; font-weight:600; letter-spacing:-.024em; font-variant-numeric:tabular-nums }
.kgrid span{ font-size:.6875rem; color:var(--ink-4) }

.pairview{ display:flex; align-items:center; justify-content:center; gap:16px; padding:22px 0 14px }
.pairview .mark{ border-radius:16px; box-shadow:var(--sh-2) }
.pairx{ color:var(--ink-4) } .pairx svg{ width:22px;height:22px }
.pairlbl{ text-align:center; margin-bottom:16px }
.pairlbl b{ display:block; font-size:1.125rem; font-weight:600; letter-spacing:-.028em }
.pairlbl span{ font-size:.8125rem; color:var(--ink-4) }

/* ---------------- Overflow containment ----------------
   .hero-visual pairs aspect-ratio with min-height, which gives it
   a 380px min-width and widens the whole hero track on phones. */
.hero-in > *,.steps > *,.mkt-grid > *,.show > *,.stats > *,
.feats > *,.split > *,.foot-grid > *{ min-width:0 }
.hero-visual{ width:100%; min-width:0 }
@media (max-width:1040px){
  .hero-visual{ min-height:300px; max-height:400px }
}
@media (max-width:560px){
  .hero-visual{ min-height:240px }
  .hero-proof{ gap:14px }
  .hero-proof > div{ border-right:0; margin-right:0; padding-right:0; flex:1 1 40% }
  .hero-actions .btn{ flex:1 1 auto; justify-content:center }
  .ca-pill{ width:100% ; justify-content:space-between }
  .sec-head .lede{ font-size:.9375rem }
  .cta{ padding:32px 20px }
  .show-stage{ min-height:360px }
}