:root {
  --bg: #ffffff;
  --grey-25: #fcfcfc;
  --grey-100: #f4f4f5;
  --grey-200: #e4e4e7;
  --grey-300: #d1d1d6;
  --grey-400: #a0a0ab;
  --grey-500: #70707b;
  --grey-700: #3f3f46;
  --ink: #18181b;
  --blue-50: #eef2fc; --blue-200: #c8d4fa; --blue-600: #3a65eb; --navy: #0e106d;
  --purple-50: #f1ecfc; --purple-200: #d9ccf8; --purple-600: #6b32e4; --purple-800: #41159e;
  --gold-50: #fbf3e3; --gold-200: #ffe7bd; --gold-600: #aa8544; --gold-800: #421400;
  --green-50: #e9f8ee; --green-200: #a2ffc1; --green-600: #01a74d; --green-800: #102c22;
  --card: #ffffff; --on-ink: #ffffff; --nav: rgba(252,252,252,.85); --foot: #ededf0; --sec-alt: #f8f8f8; --dark-surface: #18181b; --blue-ink: #0e106d; --band-fade: #f8f8f8;
  --radius: 20px;
  --radius-xl: 32px;
  --max: 1180px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
section { padding: 120px 0; position: relative; }
h1, h2, h3 { margin: 0; letter-spacing: -0.025em; font-weight: 600; }
h1 { font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.04em; }
h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.06; }
h3 { font-size: 20px; }
p { margin: 0; }
.lede { font-size: 19px; color: var(--grey-700); max-width: 640px; margin-top: 22px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-500); font-weight: 600; margin-bottom: 20px; }
.eyebrow .ey { width: 20px; height: 20px; }
.muted { color: var(--grey-500); }
.x { font-size: .55em; color: var(--grey-400); margin: 0 .3em; }
.sec-grey { background: var(--grey-100); }
.sec-blue { background: var(--blue-50); }
.sec-dark { background: var(--dark-surface); color: #fff; }
.sec-faq { background: var(--sec-alt); }

/* cursor */
.cursor { position: fixed; z-index: 99; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); pointer-events: none;
  transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), opacity .25s; mix-blend-mode: difference; opacity: 0; }
body.has-cursor .cursor { opacity: 1; }
.cursor.big { width: 44px; height: 44px; background: #fff; }

/* buttons */
.btn { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font-weight: 500; font-size: 15px;
  background: var(--ink); color: var(--on-ink); transition: background .25s var(--ease), color .25s, transform .25s var(--ease); will-change: transform; }
.btn:hover { background: var(--grey-700); }
.btn.ghost { background: var(--grey-100); color: var(--ink); }
.btn.ghost:hover { background: var(--grey-200); }
.btn .arr { font-style: normal; display: inline-block; transition: transform .3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ===== NAV (0x layout) ===== */
.navbar { position: sticky; top: 0; z-index: 60; background: var(--nav); backdrop-filter: blur(14px) saturate(1.2); transition: box-shadow .3s; }
.navbar.scrolled { box-shadow: 0 1px 0 var(--grey-200); }
.nav-inner { display: flex; align-items: center; height: 64px; padding: 0 20px; max-width: 1400px; margin: 0 auto; }
.logo { flex: 1; display: flex; }
.logo img { width: 50px; height: 50px; border-radius: 12px; }
.announce { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 36px; padding: 6px 20px; background: #a2ffc1; color: #0b3d1f; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; transition: background .2s; }
.announce:hover { background: #8ff7b2; }
.announce .a-tag { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #0b3d1f; color: #a2ffc1; flex: none; }
.announce .a-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; flex: none; }
.announce .a-link i { font-style: normal; transition: transform .2s; }
.announce:hover .a-link i { transform: translateX(3px); }
.navbar .logo { align-self: center; margin-top: 0; }
.navbar .logo img { width: auto; height: 26px; border-radius: 0; box-shadow: none; background: none; }
.logo { flex: none; }
.menu { display: flex; align-items: center; margin-left: 18px; }
.cta { margin-left: auto; display: flex; justify-content: flex-end; }
.nb { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px; margin-right: 8px; border-radius: 8px; background: var(--grey-100);
  color: var(--ink); font-size: 14px; font-weight: 400; white-space: nowrap; transition: background .2s ease-out, color .2s; cursor: pointer; }
.nb:hover { background: var(--grey-200); }
.nb:active { background: var(--grey-300); }
.nb-left { border-radius: 22px 8px 8px 22px; padding-left: 18px; }
.nb-right { border-radius: 8px 22px 22px 8px; padding-right: 18px; margin-right: 0; }
.menu .nb[style] { background: var(--grey-200) !important; }
.nb-dark { background: var(--ink); color: var(--on-ink); font-weight: 500; letter-spacing: .2px; }
.nb-dark:hover { background: var(--grey-700); }
.nb.round { border-radius: 22px; }
.menu .nb.nb-right { margin-right: 0; }
.dd { position: relative; }
.dd.open .chev { transform: rotate(180deg); }
.dd.open > .nb { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(24,24,27,.08), 0 0 0 1px var(--grey-200); }
.chev { width: 10px; height: 6px; transition: transform .25s var(--ease); }
.dd-panel { position: absolute; left: 50%; top: calc(100% + 10px); transform: translate(-50%, 8px); width: 350px; padding: 12px; border-radius: 16px; background: var(--grey-25);
  border: 1px solid var(--grey-200); box-shadow: 0 0 38px rgba(38,39,43,.06), 0 1px 4px rgba(38,39,43,.05); opacity: 0; visibility: hidden; transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
  display: flex; flex-direction: column; gap: 4px; text-align: left; }
.dd.open .dd-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.dd-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: 10px; transition: background .2s; }
.dd-item:hover { background: var(--grey-100); }
.ico { flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--grey-100); border: 1px solid rgba(0,0,0,.04); display: grid; place-items: center; }
.ico svg { width: 26px; height: 26px; }
.ico.blue { background: var(--blue-50); } .ico.purple { background: var(--purple-50); } .ico.gold { background: var(--gold-50); } .ico.green { background: var(--green-50); }
.dd-txt { display: grid; gap: 2px; }
.dd-h { display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 15px; }
.dd-h em { font-style: normal; color: var(--grey-400); font-weight: 400; }
.dd-txt small { font-size: 13px; color: var(--grey-500); }
.spill { display: inline-flex; align-items: center; font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 50px; background: var(--grey-200); color: var(--grey-700); margin-left: 4px; }
.dd-sub { padding: 10px 12px 6px; border-top: 1px solid var(--grey-200); margin-top: 6px; }
.dd-sub p, .dev-list p, .dev-label { font-size: 13px; color: var(--grey-400); margin: 0 0 8px; }
.dd-sub a, .dev-list a { display: flex; align-items: center; font-size: 14px; padding: 5px 0; color: var(--ink); transition: color .2s; }
.dd-sub a:hover, .dev-list a:hover { color: var(--blue-600); }
.dd-panel.dev { width: 460px; padding: 0; overflow: hidden; gap: 0; }
.dev-top { padding: 12px; }
.dev-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 12px 6px; }
.dev-label { padding: 10px 12px 0; }
.dev-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px 6px; }
.dev-cards a { display: grid; gap: 8px; font-size: 13px; color: var(--grey-500); transition: color .2s; }
.dev-cards a:hover { color: var(--ink); }
.dev-bg { display: grid; place-items: center; height: 64px; border-radius: 10px; background: var(--blue-200); transition: transform .3s var(--ease); }
.dev-bg.purple { background: var(--purple-200); } .dev-bg.gold { background: var(--gold-200); }
.dev-bg svg { width: 30px; height: 30px; }
.dev-cards a:hover .dev-bg { transform: translateY(-2px); }
.dev-bottom { display: flex; gap: 18px; padding: 12px 20px; background: var(--grey-100); border-top: 1px solid var(--grey-200); }
.dev-bottom a { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--grey-700); }
.dev-bottom a:hover { color: var(--ink); }
.dev-bottom svg { width: 18px; height: 18px; }
.burger { display: none; width: 44px; height: 44px; border-radius: 22px; background: var(--grey-100); place-items: center; gap: 5px; margin-left: 10px; }
.burger i { display: block; width: 16px; height: 1.5px; background: var(--ink); }
.mobile { display: none; }

/* ===== HERO ===== */
.hero { padding: 88px 0 72px; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, #fcfcfc 0%, #f4f5fa 40%, #e9ecf5 72%, #ffffff 100%); }
.hero-bg::after { content: ""; position: absolute; inset: auto 0 0 0; height: 200px; background: linear-gradient(transparent, var(--bg)); }
.chip { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--grey-200);
  font-size: 13px; color: var(--grey-700); margin-bottom: 28px; box-shadow: 0 6px 20px -12px rgba(24,24,27,.3); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); position: relative; }
.chip .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--green-600); animation: ping 1.8s infinite; }
.chip .sep { width: 1px; height: 12px; background: var(--grey-200); }
@keyframes ping { 0% { transform: scale(.6); opacity: 1 } 100% { transform: scale(1.6); opacity: 0 } }
.hero-title { position: relative; display: block; width: 100%; }
.hero-title h1 { margin: 0; }
/* tv interference: band clones of the headline, a static canvas, and the provider slot */
.hero-title { user-select: none; }
.gband { position: absolute; inset: 0; margin: 0; visibility: hidden; pointer-events: none; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; will-change: transform, clip-path; }
.hero-title.glitching h1 { visibility: hidden; }
.hero-title.glitching .gband { visibility: visible; }
#heroNoise { display: none; }
.gnoise { position: absolute; inset: 0; margin: 0; visibility: hidden; pointer-events: none; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated; }
.hero-title.glitching .gnoise { visibility: visible; }
.gnoise img { visibility: hidden; }
.l2probe { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; white-space: nowrap; font-size: clamp(44px, 6.4vw, 84px); line-height: 1; letter-spacing: -0.04em; font-weight: 600; }
.l2probe .prov, .l2probe .fx { position: absolute; left: 0; top: 0; }
.l2 { display: inline-block; white-space: nowrap; transition: font-size .42s var(--ease); }
.slot { display: inline-block; vertical-align: bottom; overflow: hidden; height: 1em; transition: width .42s var(--ease); white-space: nowrap; text-align: left; }
.slot-in { position: relative; display: block; height: 1em; }
.prov { display: inline-flex; align-items: center; gap: .14em; height: 1em; white-space: nowrap; transition: transform .46s var(--ease), opacity .3s; }
.prov img { width: auto; display: inline-block; }
.prov img.ic { height: .8em; }
.prov img.wm { height: .66em; margin-left: .04em; }
.prov.enter { transform: translateY(105%); }
.prov.leave { position: absolute; left: 0; top: 0; transform: translateY(-105%); opacity: .4; }
h1.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
h1.split .word span { display: inline-block; transform: translateY(110%); }
.hero-ctas { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }

/* live demo */
.demo { position: relative; margin: 56px auto 0; max-width: 1040px; background: var(--card); border: 1px solid var(--grey-200); border-radius: 28px; padding: 26px;
  display: grid; grid-template-columns: 1.1fr .7fr 1.05fr; gap: 22px; align-items: center; box-shadow: 0 60px 120px -60px rgba(24,24,27,.35), 0 1px 3px rgba(24,24,27,.04); text-align: left; }
.demo-col.req { border-radius: 18px; background: var(--grey-100); padding: 18px 20px; }
.demo-head { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--grey-500); margin-bottom: 12px; }
.demo-head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue-600); }
.demo-head em { font-style: normal; font-family: var(--mono); font-size: 11px; margin-left: auto; color: var(--grey-400); }
.demo-text { font-size: 15px; line-height: 1.6; }
.demo-text mark { color: inherit; background: linear-gradient(var(--c), var(--c)) no-repeat 0 100% / 0% 100%; border-radius: 4px; padding: 1px 3px; margin: 0 -3px; }
mark.s1, .shard.s1, .sw.s1 { --c: var(--blue-200); }
mark.s2, .shard.s2, .sw.s2 { --c: var(--purple-200); }
mark.s3, .shard.s3, .sw.s3 { --c: var(--green-200); }
body.static .demo-text mark { background-size: 100% 100%; }
.demo-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.demo-meta span { font-family: var(--mono); font-size: 11px; padding: 4px 8px; border-radius: 6px; background: var(--card); border: 1px solid var(--grey-200); color: var(--grey-700); }
.demo-mid { display: grid; gap: 14px; justify-items: center; }
.analyzer { display: grid; justify-items: center; gap: 2px; padding: 14px 18px; border-radius: 16px; background: var(--dark-surface); color: #fff; width: 100%; text-align: center; }
.analyzer svg { width: 28px; height: 28px; margin-bottom: 4px; }
.analyzer span { font-size: 13px; font-weight: 600; }
.analyzer small { font-size: 11px; color: #8b8c98; }
.shards { display: grid; gap: 6px; width: 100%; }
.shard { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; border-radius: 10px; background: var(--c); font-size: 12px; font-weight: 600; }
.shard small { font-weight: 400; color: var(--grey-700); }
.demo-col.routes { display: grid; gap: 8px; }
.route { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--grey-200); }
.route img { height: 18px; width: 72px; object-fit: contain; object-position: left; }
.route span { display: grid; gap: 2px; flex: 1; }
.route b { font-size: 13px; }
.route small { font-size: 11px; color: var(--grey-500); }
.route .bar { display: block; height: 4px; border-radius: 2px; background: var(--grey-100); margin-top: 4px; overflow: hidden; }
.route .bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); border-radius: 2px; }
.route.r1 .bar i { background: var(--blue-600); } .route.r2 .bar i { background: var(--purple-600); } .route.r3 .bar i { background: var(--green-600); }
body.static .route .bar i { transform: none; }
.demo-out { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--green-800); background: var(--green-50); border-radius: 12px; padding: 10px; }
.demo-out svg { width: 18px; height: 18px; color: var(--green-600); }
body:not(.static) .demo .shard, body:not(.static) .demo .route, body:not(.static) .demo .demo-out { opacity: 0; }

.badge { position: absolute; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; background: var(--card); border: 1px solid var(--grey-200); border-radius: 14px; padding: 10px 14px; font-size: 12px;
  box-shadow: 0 20px 40px -24px rgba(24,24,27,.4); min-width: 130px; z-index: 2; }
.badge b { font-size: 13px; display: block; }
.badge > span { color: var(--grey-500); grid-column: 2; }
.badge > svg { width: 20px; height: 20px; grid-row: span 2; color: var(--grey-700); }
.badge.f1 { top: -18px; left: -26px; } .badge.f2 { bottom: -18px; right: -26px; animation-delay: -3s; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

/* ===== LOGOS + STATS ===== */
.logos { padding: 56px 0 0; }
.logos-label { text-align: center; font-size: 13px; color: var(--grey-500); margin-bottom: 26px; }
.marquee-wrap { position: relative; overflow: hidden; padding: 6px 0; }
.marquee-fade { position: absolute; top: 0; bottom: 0; width: 160px; z-index: 2; pointer-events: none; }
.marquee-fade.l { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee-fade.r { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
.marquee-track { display: flex; align-items: center; gap: 72px; width: max-content; white-space: nowrap; padding-right: 72px; }
.marquee-track span { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 20px; color: var(--ink); }
.marquee-track img { width: auto; }
.marquee-track img.wm { height: 22px; max-width: 150px; }
.marquee-wrap + .marquee-wrap { padding-top: 0; }
.marquee-track span.usdc { font-size: 22px; letter-spacing: -0.01em; color: #2775ca; gap: 9px; }
.h24 { height: 24px } .h26 { height: 26px } .h28 { height: 28px } .h30 { height: 30px } .h32 { height: 32px }
.h16 { height: 16px } .h18 { height: 18px } .h20 { height: 20px } .h22 { height: 22px }
.overview { margin-top: 64px; background: var(--grey-25); border: 1px solid var(--grey-200); border-radius: 28px; padding: 22px 28px 24px; }
.ov-head { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--grey-500); padding-bottom: 18px; border-bottom: 1px solid var(--grey-200); }
.ov-head em { font-style: normal; font-family: var(--mono); font-size: 11.5px; }
.live { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); box-shadow: 0 0 0 0 rgba(1,167,77,.5); animation: livep 2s infinite; }
@keyframes livep { 0% { box-shadow: 0 0 0 0 rgba(1,167,77,.45) } 100% { box-shadow: 0 0 0 10px rgba(1,167,77,0) } }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 26px 0 22px; text-align: left; }
.stat { padding: 0 20px; border-left: 1px solid var(--grey-200); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat b { display: block; font-size: 42px; letter-spacing: -0.04em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }
.stat > span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--grey-700); }
.stat small { display: block; margin-top: 6px; font-size: 12px; color: var(--grey-500); }
.stat small u { text-decoration: none; color: var(--green-600); font-weight: 600; }
.ov-foot { display: flex; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid var(--grey-200); font-size: 13px; color: var(--grey-500); flex-wrap: wrap; }
.ov-logos { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; opacity: .8; }
.ov-logos span { display: inline-flex; align-items: center; gap: 7px; }
.ov-logos img { width: auto; filter: grayscale(1); transition: filter .3s, opacity .3s; }
.ov-logos:hover img { filter: none; }
.marquee-track span { color: var(--ink); }
.ov-logos .hf { font-weight: 600; font-size: 14px; color: var(--grey-700); letter-spacing: -0.01em; }
.h14 { height: 14px; }

/* compare */
.compare { background: var(--bg); }
.cmp-wrap { margin-top: 48px; overflow-x: auto; border: 1px solid var(--grey-200); border-radius: 24px; background: var(--grey-25); }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.cmp th, .cmp td { padding: 14px 16px; border-bottom: 1px solid var(--grey-200); text-align: center; vertical-align: middle; }
.cmp th:first-child, .cmp td:first-child { text-align: left; color: var(--grey-700); width: 30%; }
.cmp thead th { font-weight: 600; font-size: 14px; padding: 18px 16px; background: var(--grey-100); }
.cmp thead th:first-child { border-top-left-radius: 24px; }
.cmp thead th:last-child { border-top-right-radius: 24px; }
.cmp thead th img { margin: 0 auto; width: auto; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp tbody tr:hover td { background: var(--card); }
.cmp .us { background: var(--blue-50); }
.cmp thead th.us { background: var(--navy); color: #fff; display: table-cell; }
.cmp thead th.us .cmp-logo { width: 26px; height: 26px; border-radius: 7px; display: inline-block; vertical-align: middle; margin-right: 8px; }
.cmp td em { display: block; font-style: normal; font-size: 11.5px; color: var(--grey-500); margin-top: 4px; }
.cmp td em.big { font-size: 13px; color: var(--ink); font-weight: 500; margin: 0; }
.cmp td i { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.cmp td i::before { font-size: 12px; font-weight: 700; }
.cmp td i.y { background: var(--green-200); color: var(--green-800); } .cmp td i.y::before { content: "✓"; }
.cmp td i.n { background: var(--grey-200); color: var(--grey-500); } .cmp td i.n::before { content: "✕"; font-size: 10px; }
.cmp td i.p { background: var(--gold-200); color: var(--gold-800); } .cmp td i.p::before { content: "~"; font-size: 14px; }
.cmp td i.u { background: var(--grey-100); color: var(--grey-400); } .cmp td i.u::before { content: "?"; }
.cmp-txt { font-weight: 600; }
.cmp-under { margin: 26px auto 0; max-width: 720px; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--ink); letter-spacing: -0.005em; }
.cmp-note { margin: 14px auto 0; max-width: 760px; text-align: center; font-size: 12.5px; color: var(--grey-500); }

/* ===== SHIELD ===== */
.diagram { margin-top: 56px; background: var(--card); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: 24px 36px 28px; overflow: hidden; }
.diagram-tools { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.pills { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--grey-100); }
.pill { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-family: var(--mono); color: var(--grey-700); transition: all .2s; }
.pill:hover { color: var(--ink); }
.pill.on { background: var(--ink); color: var(--on-ink); }
.diagram-hint { font-size: 13px; color: var(--grey-500); }
.diagram svg { width: 100%; height: auto; display: block; min-width: 760px; }
.diagram .node { transition: opacity .4s; cursor: default; }
.diagram .node.dim { opacity: .25; }
.diagram .shard rect { transition: stroke-width .2s; }
.diagram .shard:hover rect { stroke-width: 3; }
.wire { transition: opacity .4s; }
.wire.dim { opacity: .15; }
#packets circle { fill: var(--ink); }
#packets circle.pa { fill: var(--blue-600); } #packets circle.pb { fill: var(--purple-600); } #packets circle.pc { fill: var(--green-600); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.step { padding: 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--grey-200); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.step:hover { transform: translateY(-3px); box-shadow: 0 30px 40px -34px rgba(24,24,27,.3); }
.step .ico { margin-bottom: 16px; }
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--grey-700); }

/* ===== BENTO ===== */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.bcard { position: relative; overflow: hidden; border-radius: var(--radius-xl); border: 1px solid var(--grey-200); display: grid; grid-template-rows: auto 1fr; transform-style: preserve-3d;
  transition: box-shadow .3s var(--ease); text-align: left; }
.bcard:hover { box-shadow: 0 50px 80px -50px rgba(24,24,27,.35); }
.bcard.span2 { grid-column: span 2; }
.bcard.blue { background: var(--blue-50); } .bcard.purple { background: var(--purple-50); } .bcard.gold { background: var(--gold-50); } .bcard.green { background: var(--green-50); }
.bcard.span2 { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
.bvis { padding: 22px; min-height: 230px; display: grid; align-items: center; }
.bbody { padding: 26px 28px 30px; display: grid; gap: 10px; align-content: start; }
.bbody .ico { background: var(--card); margin-bottom: 4px; }
.bbody .tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-500); font-weight: 600; }
.bbody h3 { font-size: 24px; }
.bbody p { color: var(--grey-700); font-size: 15px; }
.more { font-size: 14px; font-weight: 500; display: inline-flex; gap: 6px; margin-top: 6px; }
.more .arr { font-style: normal; transition: transform .3s var(--ease); }
.more:hover .arr { transform: translateX(4px); }
.bcard.span2.green { grid-template-columns: 1fr 1.1fr; }

/* shield card: redaction */
.redact { background: var(--card); border: 1px solid var(--blue-200); border-radius: 18px; padding: 16px 18px; font-size: 14.5px; line-height: 1.7; }
.redact-bar { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--grey-500); margin-bottom: 10px; }
.redact-bar em { font-style: normal; color: var(--blue-600); }
.tok { position: relative; display: inline-block; vertical-align: bottom; height: 1.5em; line-height: 1.5em; overflow: hidden; padding: 0 5px; margin: 0 -1px; border-radius: 6px; background: var(--blue-50); white-space: nowrap; transition: background .4s; }
.tok::after { content: attr(data-alt); position: absolute; left: 0; top: 100%; padding: 0 5px; width: 100%; font-family: var(--mono); font-size: 12px; color: var(--blue-ink); transition: transform .5s var(--ease); }
.tok > * , .tok { transition: transform .5s var(--ease); }
.tok.on { background: var(--blue-200); color: transparent; }
.tok.on::after { transform: translateY(-100%); }
.redact-foot { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--grey-500); margin-top: 10px; }
.redact-outs { display: grid; gap: 8px; margin-top: 12px; }
.rout { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--blue-200); font-size: 12px; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.rout:hover { transform: translateX(4px); box-shadow: 0 14px 30px -20px rgba(24,24,27,.4); }
.rout i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.rout img { height: 14px; width: 64px; object-fit: contain; object-position: left; }
.rout span { color: var(--grey-500); text-align: right; font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.rout.s1 { --c: var(--blue-200); } .rout.s2 { --c: var(--purple-200); } .rout.s3 { --c: var(--green-200); }
.sw { width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-left: 8px; }
.sw:first-child { margin-left: 0; }

/* relay */
.relay-svg { width: 100%; height: auto; border-radius: 18px; background: var(--card); border: 1px solid var(--purple-200); }
.dash { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24 } }

/* vault */
.vault { background: var(--card); border: 1px solid var(--gold-200); border-radius: 18px; padding: 14px; display: grid; gap: 8px; position: relative; }
.vrow { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--gold-50); font-size: 12px; }
.vrow svg { width: 16px; height: 16px; color: var(--gold-600); grid-row: span 2; }
.vrow b { font-family: var(--mono); font-size: 11.5px; }
.vrow .mask { color: var(--grey-500); font-family: var(--mono); font-size: 11px; grid-column: 2; }
.vrow .grant { position: absolute; right: 10px; font-style: normal; font-size: 10.5px; padding: 3px 8px; border-radius: 50px; background: var(--grey-200); color: var(--grey-700); }
.vrow { position: relative; }
.vrow .grant.on { background: var(--gold-200); color: var(--gold-800); }
.vrow .grant.off { opacity: .6; }
.vrow .grant u { text-decoration: none; font-variant-numeric: tabular-nums; }
.vring { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--grey-500); margin-top: 2px; }
.vring svg { width: 22px; height: 22px; }

/* compute rack */
.rack { background: var(--dark-surface); color: #fff; border-radius: 18px; padding: 16px 18px; font-family: var(--mono); font-size: 11.5px; }
.rack-head, .rack-foot { display: flex; justify-content: space-between; gap: 10px; color: #8b8c98; }
.rack-head em { font-style: normal; color: var(--green-200); }
.bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; height: 110px; margin: 14px 0; }
.bars i { display: block; height: 20%; border-radius: 4px 4px 2px 2px; background: var(--green-600); transition: height 1.1s var(--ease), background .4s; }
.rack.gpu .bars i { background: var(--blue-600); }
.rack.gpu .rack-head em { color: var(--blue-200); }
.rack-foot b { color: #fff; font-weight: 600; }
.ctoggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--green-200); margin-top: 8px; }
.ctoggle button { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--grey-700); transition: all .2s; }
.ctoggle button.on { background: var(--ink); color: var(--on-ink); }

/* ===== ENVIRONMENT ===== */
.seg { position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr); margin-top: 36px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--grey-200); }
.seg button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--grey-700); transition: color .3s; }
.seg button svg { width: 18px; height: 18px; }
.seg button.on { color: var(--on-ink); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: 999px; background: var(--ink); }
.level-desc { margin-top: 14px; font-size: 15px; color: var(--grey-700); min-height: 24px; }
.terminal { position: relative; text-align: left; max-width: 760px; margin: 40px auto 0; background: var(--dark-surface); color: #e8ebf0; border-radius: 24px; padding: 22px 26px 26px; font-family: var(--mono); font-size: 13.5px; line-height: 1.8;
  box-shadow: 0 60px 100px -50px rgba(24,24,27,.6); min-height: 350px; }
.terminal .bar { display: flex; gap: 7px; align-items: center; margin-bottom: 16px; }
.terminal .bar i { width: 11px; height: 11px; border-radius: 50%; background: #2a2a31; display: block; }
.terminal .bar span { margin-left: 10px; font-size: 12px; color: #8b8c98; }
.terminal .bar em { margin-left: auto; font-style: normal; font-size: 11px; padding: 2px 10px; border-radius: 50px; background: #2a2a31; color: #8b8c98; }
.terminal pre { margin: 0; font: inherit; white-space: pre-wrap; }
.terminal .ok { color: #9be7b0; } .terminal .dim { color: #8a8a96; } .terminal .cmd { color: #fff; }
.terminal .ok svg { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; color: #9be7b0; }
.terminal .cur { display: inline-block; width: 8px; height: 15px; background: #fff; vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.terminal .badge { color: var(--ink); font-family: var(--font); line-height: 1.4; }
.badge.tb1 { right: -30px; top: 56px; }
.badge.tb2 { left: -30px; bottom: 44px; animation-delay: -3s; }
.tk { cursor: help; }
.terminal pre .tk { position: relative; }
.tk .hl, .terminal .hl { color: #fff; border-bottom: 1px dashed #6b6b78; padding-bottom: 1px; }
.terminal .hl svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; color: #8b8c98; }
.tk::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 10px); width: 250px; padding: 10px 12px; border-radius: 12px; background: var(--card); color: var(--ink); border: 1px solid var(--grey-200);
  font-family: var(--font); font-size: 12.5px; line-height: 1.45; white-space: normal; box-shadow: 0 20px 40px -20px rgba(24,24,27,.4); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); z-index: 5; }
.tk:hover::after { opacity: 1; transform: translateY(0); }
.badge.tb1.tk::after { left: auto; right: 0; }
.terminal pre .tk::after { bottom: auto; top: calc(100% + 8px); font-weight: 400; }

/* ===== DEVELOPERS ===== */
.code .eyebrow { color: #8b8c98; }
.code .lede { color: rgba(255,255,255,.7); }
.code-card { max-width: 860px; margin: 56px auto 0; background: var(--card); color: var(--ink); border-radius: 24px; overflow: hidden; box-shadow: 0 60px 100px -50px rgba(0,0,0,.8); text-align: left; }
.tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--grey-200); background: var(--grey-100); }
.tab { padding: 8px 14px; border-radius: 999px; font-size: 13px; font-family: var(--mono); color: var(--grey-700); transition: all .2s; }
.tab.on { background: var(--ink); color: var(--on-ink); }
.copy { margin-left: auto; font-size: 12px; font-family: var(--mono); color: var(--grey-500); padding: 8px 12px; border-radius: 999px; }
.copy:hover { background: var(--grey-200); color: var(--ink); }
.pane { display: none; } .pane.on { display: block; }
.code-card pre { margin: 0; padding: 24px; font-family: var(--mono); font-size: 13px; line-height: 1.65; overflow-x: auto; background: var(--card); }
.code-card code { font-family: var(--mono); }
.dev-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; max-width: 1040px; margin-left: auto; margin-right: auto; }
.feat { padding: 22px; border-radius: var(--radius); background: #232329; border: 1px solid #2e2e35; transition: transform .3s var(--ease), background .3s; }
.feat:hover { transform: translateY(-3px); background: #28282f; }
.feat .ico { margin-bottom: 14px; border-color: transparent; }
.feat b { display: block; font-size: 15px; margin-bottom: 4px; }
.feat p { font-size: 13px; color: #a0a1ad; }

/* ===== PRICING ===== */
.pricing { background: linear-gradient(var(--bg), var(--blue-50)); }
.calc { max-width: 760px; margin: 48px auto 0; padding: 28px 32px; border-radius: 24px; background: var(--card); border: 1px solid var(--grey-200); }
.calc label { display: flex; justify-content: space-between; font-size: 14px; color: var(--grey-700); margin-bottom: 14px; }
.calc label b { font-variant-numeric: tabular-nums; color: var(--ink); }
.calc input[type=range] { width: 100%; accent-color: var(--ink); }
.calc-out { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.calc-out div { padding: 14px 16px; border-radius: 14px; background: var(--grey-100); display: grid; gap: 2px; }
.calc-out div.hi { background: var(--green-50); }
.calc-out span { font-size: 12px; color: var(--grey-500); }
.calc-out b { font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px auto 0; max-width: 960px; }
.tiers.three { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
.tiers.three .tier { padding: 32px; }
.tiers.three .tier .big { font-size: 64px; }
.calc-note { margin: 14px 0 0; font-size: 12.5px; color: var(--grey-500); text-align: center; }
.cost-card { max-width: 1100px; margin: 18px auto 0; padding: 22px 28px; border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--grey-200); }
.cost-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 15px; }
.cost-head svg { width: 20px; height: 20px; color: var(--blue-600); }
.cost-head span { color: var(--grey-500); font-size: 13px; margin-left: auto; }
.cost-card table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-card th, .cost-card td { text-align: left; padding: 9px 10px; border-top: 1px solid var(--grey-200); }
.cost-card th { border-top: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey-500); font-weight: 600; }
.cost-card code { font-family: var(--mono); font-size: 12.5px; background: var(--grey-100); padding: 2px 6px; border-radius: 6px; }
.honest { max-width: 860px; margin: 28px auto 0; padding: 16px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--grey-200); font-size: 14px; color: var(--grey-700); line-height: 1.6; text-align: center; }
.honest b { color: var(--ink); }
.honest code { font-family: var(--mono); font-size: 12.5px; background: var(--grey-100); padding: 1px 6px; border-radius: 6px; }
.tier { background: var(--card); border: 1px solid var(--grey-200); border-radius: var(--radius-xl); padding: 40px; transform-style: preserve-3d; text-align: left; }
.tier .tag { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--grey-500); }
.tier.dark { background: var(--navy); color: #fff; border-color: var(--navy); }
.tier.dark .tag { color: var(--blue-200); }
.tier .big { font-size: 72px; font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin: 18px 0 6px; }
.tier .sub { font-size: 14px; opacity: .7; }
.tier ul { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 10px; font-size: 15px; }
.tier ul li::before { content: "✓"; margin-right: 10px; opacity: .6; font-size: 12px; }
.tier.dark .btn { background: #fff; color: var(--navy); }
.tier.dark .btn:hover { background: var(--blue-200); }

/* ===== FAQ ===== */
.faq-list { max-width: 760px; margin: 40px auto 0; border-top: 1px solid var(--grey-200); text-align: left; }
.acc { border-bottom: 1px solid var(--grey-200); }
.acc-h { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; padding: 22px 0; font-size: 18px; font-weight: 500; }
.acc-h i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--grey-200); background: var(--card); position: relative; flex: none; transition: transform .4s var(--ease), background .3s; }
.acc-h i::before, .acc-h i::after { content: ""; position: absolute; background: var(--ink); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.acc-h i::before { width: 12px; height: 1.5px; } .acc-h i::after { width: 1.5px; height: 12px; transition: opacity .3s; }
.acc.open .acc-h i { transform: rotate(180deg); background: var(--grey-100); }
.acc.open .acc-h i::after { opacity: 0; }
.acc-b { height: 0; overflow: hidden; }
.acc-b p { padding: 0 0 22px; color: var(--grey-700); max-width: 640px; }
.acc-b code { font-family: var(--mono); font-size: 13px; background: var(--grey-100); padding: 2px 6px; border-radius: 6px; }

/* ===== BAND ===== */
.band { position: relative; padding: 72px 0 0; min-height: 760px; background: url(../img/env.jpg) center bottom / cover no-repeat #f3f3f3; }
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--band-fade), transparent 22%, transparent 88%, var(--band-fade)); pointer-events: none; }
.band .inner { position: relative; max-width: 820px; margin: 0 auto; color: var(--ink); border-radius: 40px; overflow: hidden; min-height: 320px; display: grid; place-items: center; text-align: center;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 30px 60px -30px rgba(24,24,27,.35), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
@keyframes drift { 0%,100% { transform: translate(0,0) } 50% { transform: translate(8%, 12%) } }
.band-copy { position: relative; padding: 72px 32px; }
.band-copy h2 { color: var(--ink); }
.band-copy p { color: var(--grey-500); margin: 14px 0 6px; font-size: 18px; }
.band-copy .btn { background: #181818; color: #fff; }
.band-copy .btn:hover { background: #26272b; }
.band-copy .btn.ghost { background: var(--grey-100); color: var(--ink); }
.band-copy .btn.ghost:hover { background: var(--grey-200); }

/* ===== FOOTER ===== */
footer { position: relative; z-index: 2; margin-top: -36px; padding: 72px 0 36px; background: var(--foot); border-radius: 40px 40px 0 0; border-top: 1px solid rgba(24,24,27,.06); }
.foot { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 32px; }
.foot .logo { flex: none; }
.foot .logo img { height: 40px; width: auto; border-radius: 0; }
.foot .muted { margin-top: 16px; font-size: 14px; max-width: 260px; color: var(--grey-500); }
.foot-social { display: flex; gap: 8px; margin-top: 22px; }
.foot div.foot-social a { display: grid; margin: 0; width: 38px; height: 38px; border-radius: 12px; background: var(--card); border: 1px solid var(--grey-200); display: grid; place-items: center; color: var(--grey-700); transition: background .2s, color .2s, transform .2s var(--ease); }
.foot div.foot-social a[hidden] { display: none; }
.foot-social a svg { width: 17px; height: 17px; }
.foot div.foot-social a:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); transform: translateY(-2px); }
.foot h4 { margin: 4px 0 16px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-500); }
.foot a:not(.logo) { display: block; font-size: 14.5px; color: var(--grey-700); margin-bottom: 11px; transition: color .2s, transform .2s; }
.foot a:not(.logo):hover { color: var(--ink); transform: translateX(3px); }
.copy-line { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--grey-200); font-size: 13px; color: var(--grey-500); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.foot-status { display: inline-flex; align-items: center; gap: 8px; }
.foot-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); box-shadow: 0 0 0 3px rgba(1,167,77,.18); }
.foot-legal { display: flex; gap: 18px; }
.foot-legal a:hover { color: var(--ink); }

/* reveal */
.reveal { opacity: 0; transform: translateY(24px); }
body.static .reveal { opacity: 1; transform: none; }
body.static h1.split .word span { transform: none; }

@media (max-width: 1100px) {
  .menu, .cta, .navbar .nav-right .cta { display: none !important; }
  .burger { display: grid; }
  .nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .nav-inner { justify-content: space-between; }
}
@media (max-width: 960px) {
  section { padding: 80px 0; }
  .hero { padding-top: 56px; }
  .demo { grid-template-columns: 1fr; }
  .stats, .steps, .calc-out, .dev-feats { grid-template-columns: repeat(2, 1fr); }
  .bento, .tiers, .tiers.three { grid-template-columns: 1fr; }
  .bcard.span2, .bcard.span2.green { grid-column: span 1; grid-template-columns: 1fr; }
  .bcard.green .bbody { order: 2; }
  .foot { grid-template-columns: 1fr 1fr; }
  footer { border-radius: 28px 28px 0 0; }
  .badge.f1, .badge.tb2 { left: 8px; } .badge.f2, .badge.tb1 { right: 8px; }
  .cursor { display: none; }
  .seg button { padding: 11px 12px; }
}
@media (max-width: 560px) {
  .navbar .logo img { height: 18px; }
  .announce { padding: 8px 16px; justify-content: flex-start; text-align: left; font-size: 12px; }
  .announce .a-tag { display: none; }
  .stats, .steps, .foot, .calc-out, .dev-feats { grid-template-columns: 1fr; }
  .seg button span { display: none; }
  .badge.f1, .badge.f2 { display: none; }
  .try textarea { min-height: 72px; }
  .try { margin: -20px -20px 0; padding: 16px 18px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .float, .chip .dot::after, .cursor, .dash, .aurora i { animation: none; }
}

/* ===== WHY WISPR: problem / solution ===== */
.why-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.wstat { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--grey-200); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.wstat:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(24,24,27,.07); }
.wstat b { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.wstat span { font-size: 14px; color: var(--grey-700); line-height: 1.45; }
.wstat small { margin-top: 6px; font-size: 12px; color: var(--grey-500); display: inline-flex; gap: 4px; align-items: center; }
.wstat small i, .src a i, .wants li a i { font-style: normal; font-size: 11px; opacity: .7; }
/* slider of speech bubbles */
.ps-slider { margin-top: 20px; position: relative; }
.ps-track { position: relative; min-height: 320px; transition: height .45s var(--ease); }
.ps { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-items: start; opacity: 0; pointer-events: none; transition: opacity .35s; }
.ps.is-active { opacity: 1; pointer-events: auto; }
.bub { position: relative; padding: 26px 28px 24px; border-radius: 24px; display: flex; flex-direction: column; gap: 10px; }
.bub::after { content: ""; position: absolute; bottom: -10px; width: 22px; height: 22px; border-radius: 4px; transform: rotate(45deg); }
.bub-p { background: var(--card); border: 1px solid var(--grey-200); border-bottom-left-radius: 6px; transform: translateX(-24px); opacity: 0; transition: transform .5s var(--ease), opacity .5s; }
.bub-p::after { left: 26px; background: var(--card); border-right: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }
.bub-s { grid-column: 2; background: var(--navy); color: #fff; border-bottom-right-radius: 6px; transform: translateY(18px) scale(.96); opacity: 0; transition: transform .55s cubic-bezier(.2,1.2,.4,1), opacity .35s; transform-origin: 85% 100%; }
.bub-s::after { right: 26px; background: var(--navy); }
.bub.bub-s p, .bub-s p { color: #fff !important; }
.bub-s p b { font-weight: 600; color: #a2ffc1; }
.bub.bub-s p code { background: rgba(255,255,255,.14); color: #fff; }
.bub-s .ps-link { color: #a2ffc1; }
.ps.is-active .bub-p { transform: none; opacity: 1; }
.ps.show-sol .bub-s { transform: none; opacity: 1; }
.bub-typing { grid-column: 2; justify-self: end; display: inline-flex; gap: 5px; padding: 12px 16px; border-radius: 18px; border-bottom-right-radius: 6px; background: var(--blue-200); opacity: 0; transition: opacity .25s; }
.bub-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); opacity: .4; animation: typing 1s infinite; }
.bub-typing i:nth-child(2) { animation-delay: .15s; } .bub-typing i:nth-child(3) { animation-delay: .3s; }
.ps.is-active.typing .bub-typing { opacity: 1; }
.ps.show-sol .bub-typing { display: none; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.who { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--grey-500); }
.who i { width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
.who.us { color: #a2ffc1; }
.who.us img { width: 20px; height: 20px; border-radius: 6px; }
.cmp thead th.us .cmp-logo { border: 1px solid rgba(255,255,255,.18); }
.bub h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.2; }
.bub p { font-size: 15px; color: var(--grey-700); line-height: 1.6; }
.bub p code { font-family: var(--mono); font-size: 12.5px; background: var(--grey-100); padding: 1px 6px; border-radius: 6px; }
.st { display: inline-block; font-style: normal; letter-spacing: 0; text-transform: none; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; margin-left: 2px; }
.st.live { background: var(--green-200); color: var(--green-800); }
.st.beta { background: var(--gold-200); color: var(--gold-800); }
.st.build { background: var(--grey-200); color: var(--grey-700); }
.who.us .st.build { background: rgba(255,255,255,.16); color: #fff; }
.src { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 6px; }
.src a { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; background: var(--grey-100); border: 1px solid var(--grey-200); color: var(--grey-700); transition: background .2s, color .2s; }
.src a i { font-style: normal; font-size: 11px; opacity: .7; }
.src a:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ps-link { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--blue-600); }
.ps-link i { font-style: normal; transition: transform .2s var(--ease); }
.ps-link:hover i { transform: translateX(3px); }
.ps-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.ps-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--card); border: 1px solid var(--grey-200); display: grid; place-items: center; font-size: 16px; transition: background .2s, color .2s; }
.ps-btn:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ps-dots { display: flex; gap: 8px; }
.ps-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--grey-300); padding: 0; transition: width .25s var(--ease), background .25s; }
.ps-dots button.on { width: 24px; border-radius: 4px; background: var(--ink); }
/* feature cycler: list on the left, detail on the right, auto advances, click to pause */
.feat { margin-top: 36px; background: var(--dark-surface); color: #fff; border-radius: 28px; display: grid; grid-template-columns: 1fr 1.15fr; overflow: hidden; }
.feat-list { padding: 22px 14px 18px 22px; border-right: 1px solid rgba(255,255,255,.08); display: grid; gap: 4px; align-content: start; }
.feat-h { display: flex; align-items: center; gap: 8px; padding: 0 8px 12px; font-size: 14px; color: #8b8c98; }
.feat-h b { color: #fff; font-weight: 600; }
.fplay { margin-left: auto; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); } .fplay svg { width: 14px; height: 14px; } .fplay .ir { display: none; } .feat.paused .fplay .ip { display: none; } .feat.paused .fplay .ir { display: block; }
.frow { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; text-align: left; padding: 11px 12px; border-radius: 14px; color: #9a9ba7; font-size: 14.5px; overflow: hidden; transition: background .25s, color .25s; }
.frow:hover { background: rgba(255,255,255,.06); color: #fff; }
.frow.on { background: rgba(255,255,255,.1); color: #fff; }
.fic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: #9a9ba7; transition: background .25s, color .25s; } .fic svg { width: 17px; height: 17px; }
.frow.on .fic { background: #a2ffc1; color: #102c22; }
.fic.big { width: 48px; height: 48px; border-radius: 14px; background: #a2ffc1; color: #102c22; } .fic.big svg { width: 24px; height: 24px; }
.frow .ft { font-weight: 500; }
.frow .st, .fd .st { font-style: normal; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; letter-spacing: .02em; }
.st.live { background: #a2ffc1; color: #102c22; } .st.beta { background: var(--gold-200); color: var(--gold-800); } .st.dev { background: rgba(255,255,255,.14); color: #c9cad2; }
.frow .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #a2ffc1; }
.frow.on .bar { animation: fbar var(--fdur, 2.6s) linear forwards; } .feat.paused .frow.on .bar { animation-play-state: paused; }
@keyframes fbar { from { width: 0; } to { width: 100%; } }
.feat-detail { position: relative; padding: 34px 36px; min-height: 300px; }
.fd { position: absolute; inset: 34px 36px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s var(--ease); pointer-events: none; }
.fd.on { opacity: 1; transform: none; pointer-events: auto; }
.fd-h { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.fd h3 { margin: 6px 0 0; font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.fd-l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8b8c98; font-weight: 600; margin: 14px 0 4px; }
.fd p { margin: 0; color: #d4d5dc; font-size: 15px; line-height: 1.6; }
.fd p + .fd-l { margin-top: 16px; }
.why .cmp-note { margin-top: 22px; }
@media (max-width: 960px) {
  .why-stats { grid-template-columns: 1fr; }
  .ps { grid-template-columns: 1fr; }
  .bub-s, .bub-typing { grid-column: 1; }
}

/* ===== hero: try WISPR chatbox ===== */
.try { grid-column: 1 / -1; margin: -26px -26px 0; padding: 18px 26px 16px; border-bottom: 1px solid var(--grey-200); border-radius: 28px 28px 0 0; background: var(--card); text-align: left; }
.try:focus-within { background: var(--card); }
.demo-sep { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; margin: -6px 0 -8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-400); }
.demo-sep::before, .demo-sep::after { content: ""; flex: 1; height: 1px; background: var(--grey-200); }
.try-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 10px; }
.try-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey-500); }
.try-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--green-600); box-shadow: 0 0 0 3px var(--green-50); }
.try-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.try-opt { font-family: var(--mono); font-size: 11px; color: var(--grey-500); padding: 4px 9px; border-radius: 999px; background: var(--grey-100); }
.try-opt b { font-weight: 500; color: var(--ink); }
.try-row { display: flex; align-items: flex-end; gap: 10px; }
.try textarea { flex: 1; resize: none; border: 0; outline: 0; font: inherit; font-size: 15.5px; line-height: 1.5; color: var(--ink); background: transparent; padding: 8px 4px; min-height: 44px; max-height: 160px; }
.try textarea::placeholder { color: var(--grey-400); }
.try-send { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--on-ink); display: grid; place-items: center; transition: background .2s, transform .2s var(--ease); }
.try-send svg { width: 18px; height: 18px; }
.try-send:hover { background: var(--grey-700); transform: translateY(-1px); }
.try-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.try-chips button { font-size: 13px; padding: 7px 12px; border-radius: 999px; background: var(--grey-100); color: var(--grey-700); transition: background .2s, color .2s; }
.try-chips button:hover { background: var(--ink); color: var(--on-ink); }
.try-note { margin-top: 10px; font-size: 12px; color: var(--grey-400); }
.try.sent .try-note { color: var(--green-600); }

/* announce: spinning shield */
.a-ico { position: relative; width: 26px; height: 26px; flex: none; perspective: 120px; display: grid; place-items: center; }
.a-ico svg { width: 20px; height: 20px; transform-style: preserve-3d; animation: shieldSpin 3.4s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 2px 3px rgba(11,61,31,.25)); }
.a-ico i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: #3a65eb; border-bottom-color: #18181b; animation: shieldRing 2.2s linear infinite; }
.announce:hover .a-ico svg { animation-duration: 1.1s; }
.announce:hover .a-ico i { animation-duration: .8s; }
@keyframes shieldSpin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
@keyframes shieldRing { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .a-ico svg, .a-ico i { animation: none; } }
@media (max-width: 560px) { .a-ico { display: none; } }

/* band: WebGL ocean behind the glass card */
#ocean { position: absolute; inset: 0; width: 100%; height: 100%; display: none; }
#ocean.on { display: block; }
.band::before { z-index: 1; }
.band > .wrap { position: relative; z-index: 2; }
.band-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; opacity: 0; transition: opacity .6s; }
.band-video.on { opacity: 1; }

@media (max-width: 860px) { .feat { grid-template-columns: 1fr; } .feat-list { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); } .feat-detail { min-height: 340px; } }

/* ===== THEME: dark is the default on the homepage, light stays available; .keep sections stay light in dark ===== */
html[data-theme="dark"] { --bg: #16171b; --card: #1f2026; --on-ink: #16171b; --grey-25: #1b1c21; --grey-100: #24252c; --grey-200: #30313a; --grey-300: #41424d; --grey-400: #777887; --grey-500: #a0a1ad; --grey-700: #d4d5dc; --ink: #f3f3f6; --blue-ink: #c8d4fa; --nav: rgba(22,23,27,.82); --foot: #0f1014; --sec-alt: #131417; --band-fade: #16171b; --blue-50: #1c2238; --blue-200: #33489a; --purple-50: #241b3b; --purple-200: #56389f; --purple-800: #d9ccf8; --gold-50: #2b2416; --gold-200: #6a4f22; --gold-800: #ffe7bd; --green-50: #162a1f; --green-200: #1f8a4f; --green-600: #2fd47a; --green-800: #d7ffe4; color-scheme: dark; }
html[data-theme="dark"] .keep { color: var(--ink); --bg: #f2f2f4; --grey-25: #f8f8f9; --grey-100: #e8e8eb; --bg: #ffffff; --card: #ffffff; --on-ink: #ffffff; --grey-25: #fcfcfc; --grey-100: #f4f4f5; --grey-200: #e4e4e7; --grey-300: #d1d1d6; --grey-400: #a0a0ab; --grey-500: #70707b; --grey-700: #3f3f46; --ink: #18181b; --blue-ink: #0e106d; --blue-50: #eef2fc; --blue-200: #c8d4fa; --purple-50: #f1ecfc; --purple-200: #d9ccf8; --purple-800: #41159e; --gold-50: #fbf3e3; --gold-200: #ffe7bd; --gold-800: #421400; --green-50: #e9f8ee; --green-200: #a2ffc1; --green-600: #01a74d; --green-800: #102c22; }
html[data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; z-index: 98; pointer-events: none; opacity: .03; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-theme="dark"] .hero-bg { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23ffffff' stroke-opacity='.045'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23ffffff' stroke-opacity='.045'/%3E%3C/svg%3E") center / 56px 100px, linear-gradient(160deg, #16171b 0%, #1a1c23 45%, #1d1f28 75%, #16171b 100%); }
html[data-theme="dark"] .inv { filter: invert(1); }
html[data-theme="dark"] .keep .inv { filter: none; }
html[data-theme="dark"] .marquee-track img.wm, html[data-theme="dark"] .prov img.wm { filter: invert(1); }
html[data-theme="dark"] .ov-logos img.inv { filter: grayscale(1) invert(1); }
html[data-theme="dark"] .ov-logos:hover img.inv { filter: invert(1); }
html[data-theme="dark"] .ov-logos img.wm { filter: grayscale(1) invert(1); }
html[data-theme="dark"] .tier.dark { background: #1c2080; border-color: #1c2080; }
html[data-theme="dark"] .demo { box-shadow: 0 60px 120px -60px rgba(0,0,0,.8), 0 1px 3px rgba(0,0,0,.4); }
html[data-theme="dark"] .feat { border: 1px solid var(--grey-200); }
html[data-theme="dark"] .a-ico i { border-bottom-color: #0b3d1f; }
.only-dark { display: none !important; }
html[data-theme="dark"] .only-dark { display: block !important; }
html[data-theme="dark"] .only-light { display: none !important; }
.theme { width: 44px; padding: 0; justify-content: center; }
.theme svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme .sun { display: none; }
html[data-theme="dark"] .theme .sun { display: block; }
html[data-theme="dark"] .theme .moon { display: none; }
html[data-theme="dark"] .band .inner, html[data-theme="dark"] .band-copy h2 { color: #18181b; }
html[data-theme="dark"] .band-copy p { color: #70707b; }
html[data-theme="dark"] .band-copy .btn.ghost { background: #f4f4f5; color: #18181b; }
html[data-theme="dark"] .band-copy .btn.ghost:hover { background: #e4e4e7; }

/* ===== animated feature cards: pastel box, isometric scene, keywords that light up on hover ===== */
.ani-card { position: relative; display: grid; gap: 8px; align-content: start; padding: 14px 20px 22px; border-radius: 24px; background: var(--hue-bg); border: 1px solid var(--hue-line); text-align: left; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s; }
.ani-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(0,0,0,.5); border-color: var(--hue-kw); }
.ani-card .scene { height: 160px; margin: 0 -8px 2px; }
.ani-card .scene svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ani-card h3 { font-size: 18px; letter-spacing: -0.02em; }
.ani-card b { display: block; font-size: 15px; letter-spacing: -0.01em; }
.ani-card p { font-size: 14px; line-height: 1.55; color: var(--grey-700); }
.ani-card .kw { font-style: normal; font-weight: 600; color: inherit; transition: color .35s, background-color .35s; border-radius: 4px; padding: 0 2px; margin: 0 -2px; }
.ani-card:hover .kw { color: var(--hue-kw); background: var(--hue-kw-bg); }
.ani-card[data-hue="blue"] { --hue-bg: var(--blue-50); --hue-line: var(--blue-200); --hue-kw: #3a65eb; --hue-kw-bg: rgba(58,101,235,.1); }
.ani-card[data-hue="purple"] { --hue-bg: var(--purple-50); --hue-line: var(--purple-200); --hue-kw: #6b32e4; --hue-kw-bg: rgba(107,50,228,.1); }
.ani-card[data-hue="gold"] { --hue-bg: var(--gold-50); --hue-line: var(--gold-200); --hue-kw: #b8781a; --hue-kw-bg: rgba(217,150,30,.14); }
.ani-card[data-hue="green"] { --hue-bg: var(--green-50); --hue-line: var(--green-200); --hue-kw: #01a74d; --hue-kw-bg: rgba(1,167,77,.12); }
/* on the dark developer section and in dark theme the cards use deep tints and brighter keyword colours */
.sec-dark .ani-card[data-hue="blue"], html[data-theme="dark"] body > :not(.keep) .ani-card[data-hue="blue"] { --hue-bg: #1c2238; --hue-line: #2d3a6a; --hue-kw: #8fb0ff; --hue-kw-bg: rgba(143,176,255,.12); }
.sec-dark .ani-card[data-hue="purple"], html[data-theme="dark"] body > :not(.keep) .ani-card[data-hue="purple"] { --hue-bg: #241b3b; --hue-line: #4a3580; --hue-kw: #b495ff; --hue-kw-bg: rgba(180,149,255,.12); }
.sec-dark .ani-card[data-hue="gold"], html[data-theme="dark"] body > :not(.keep) .ani-card[data-hue="gold"] { --hue-bg: #2b2416; --hue-line: #5e4a1f; --hue-kw: #ffd27a; --hue-kw-bg: rgba(255,210,122,.12); }
.sec-dark .ani-card[data-hue="green"], html[data-theme="dark"] body > :not(.keep) .ani-card[data-hue="green"] { --hue-bg: #162a1f; --hue-line: #22563a; --hue-kw: #6ff5ac; --hue-kw-bg: rgba(111,245,172,.12); }
.sec-dark .ani-card p { color: #c3c4cc; }
.sec-dark .ani-card b { color: #fff; }
.dev-feats .ani-card .scene { height: 140px; }
.steps .ani-card .scene { height: 170px; }
@media (max-width: 560px) { .ani-card .scene { height: 140px; } }

/* ===== welcome overlay: honeycomb ripple around the W, page sharpens as it fades ===== */
#intro { position: fixed; inset: 0; z-index: 300; background: #16171b; transition: opacity .8s var(--ease); cursor: pointer; }
#intro.out { opacity: 0; pointer-events: none; }
#intro canvas { position: absolute; inset: 0; }
#intro img { position: absolute; left: 50%; top: 50%; width: min(44vw, 320px); height: auto; transform: translate(-50%, -50%); opacity: 0; will-change: transform, filter; }
.navbar, .announce, .hero, .logos { transition: filter .9s var(--ease); }
html.intro-on .navbar, html.intro-on .announce, html.intro-on .hero, html.intro-on .logos { filter: blur(14px); }

/* ===== code card in dark theme: Prism ships a light palette (black text, white text-shadow); flip it ===== */
html[data-theme="dark"] .code-card code[class*="language-"], html[data-theme="dark"] .code-card pre[class*="language-"] { color: #f3f3f6; text-shadow: none; }
html[data-theme="dark"] .code-card .token { text-shadow: none; }
html[data-theme="dark"] .code-card .token.comment, html[data-theme="dark"] .code-card .token.prolog, html[data-theme="dark"] .code-card .token.doctype, html[data-theme="dark"] .code-card .token.cdata { color: #7c8193; }
html[data-theme="dark"] .code-card .token.punctuation { color: #a0a1ad; }
html[data-theme="dark"] .code-card .token.operator, html[data-theme="dark"] .code-card .token.entity, html[data-theme="dark"] .code-card .token.url { color: #d4d5dc; background: none; }
html[data-theme="dark"] .code-card .token.string, html[data-theme="dark"] .code-card .token.char, html[data-theme="dark"] .code-card .token.attr-value, html[data-theme="dark"] .code-card .token.inserted { color: #c8d4fa; }
html[data-theme="dark"] .code-card .token.property, html[data-theme="dark"] .code-card .token.tag, html[data-theme="dark"] .code-card .token.boolean, html[data-theme="dark"] .code-card .token.number, html[data-theme="dark"] .code-card .token.constant, html[data-theme="dark"] .code-card .token.symbol, html[data-theme="dark"] .code-card .token.deleted { color: #ffe7bd; }
html[data-theme="dark"] .code-card .token.selector, html[data-theme="dark"] .code-card .token.builtin, html[data-theme="dark"] .code-card .token.keyword, html[data-theme="dark"] .code-card .token.atrule, html[data-theme="dark"] .code-card .token.attr-name { color: #b495ff; }
html[data-theme="dark"] .code-card .token.function, html[data-theme="dark"] .code-card .token.class-name { color: #a2ffc1; }
html[data-theme="dark"] .code-card .token.parameter, html[data-theme="dark"] .code-card .token.variable, html[data-theme="dark"] .code-card .token.environment { color: #ffd27a; }
html[data-theme="dark"] .code-card .token.important, html[data-theme="dark"] .code-card .token.bold { font-weight: 600; }

/* ===== phone pass 2026-10-29: things that only break under 560px ===== */
@media (max-width: 860px) {
  .diagram { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 16px 22px; }
  .diagram svg { min-width: 760px; }
  .diagram::after { content: "swipe sideways to follow the flow"; display: block; position: sticky; left: 0; width: min(100%, calc(100vw - 80px)); margin-top: 6px; text-align: center; font-size: 12px; color: var(--grey-500); }
  /* compare table: first column stays put, the rest scrolls under it */
  .cmp { min-width: 720px; font-size: 13px; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp th:first-child, .cmp td:first-child { position: sticky; left: 0; z-index: 2; width: 170px; min-width: 170px; background: var(--grey-25); box-shadow: 1px 0 0 var(--grey-200); }
  .cmp thead th:first-child { background: var(--grey-100); }
  .cmp td em { font-size: 11px; }
}
@media (max-width: 560px) {
  .badge.tb1, .badge.tb2 { display: none; }
  .seg { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); }
  .seg button { padding: 10px 4px; font-size: 13px; gap: 5px; }
  .seg button svg { width: 15px; height: 15px; }
  .vrow svg { grid-row: span 3; }
  .vrow .grant { position: static; grid-column: 2; justify-self: start; margin-top: 2px; }
  .frow { grid-template-columns: 30px 1fr; font-size: 14px; gap: 10px 12px; }
  .frow .st { grid-column: 2; justify-self: start; }
  .code-card pre { padding: 18px 16px; font-size: 12px; }
  .cmp-under { font-size: 14.5px; }
}

/* ===== environment: miniature workspace around the typed terminal ===== */
.terminal.mini-ws { max-width: 980px; padding: 0; overflow: hidden; border: 1px solid #2c2d35; font-size: 12.5px; line-height: 1.7; }
.terminal.mini-ws .bar { margin: 0; height: 38px; padding: 0 16px; border-bottom: 1px solid #2c2d35; background: #121317; }
.mw-body { display: grid; grid-template-columns: 150px 1fr; height: 560px; }
.mw-side { background: #121317; border-right: 1px solid #2c2d35; display: flex; flex-direction: column; padding: 14px 10px; font-family: var(--font); color: #c3c4cc; }
.mw-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; letter-spacing: .04em; color: #fff; padding: 0 6px 14px; } .mw-brand img { width: 20px; height: 20px; }
.mw-nav { display: grid; gap: 2px; } .mw-nav span { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px; border-radius: 8px; font-size: 12.5px; color: #9a9ba7; } .mw-nav span.on { background: #24252c; color: #fff; } .mw-nav svg { width: 14px; height: 14px; }
.mw-bal { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid #2c2d35; display: flex; justify-content: space-between; font-size: 12px; color: #9a9ba7; } .mw-bal b { color: #fff; font-family: var(--mono); }
.mw-main { display: grid; grid-template-rows: 1fr 1.25fr; min-width: 0; }
.mw-split { display: grid; grid-template-columns: 150px 1fr 1fr; min-height: 0; border-bottom: 1px solid #2c2d35; font-family: var(--font); color: #c3c4cc; }
.mw-tabs { display: flex; height: 32px; border-bottom: 1px solid #2c2d35; background: #121317; font-size: 11.5px; } .mw-tabs span { display: flex; align-items: center; padding: 0 12px; color: #8b8c98; border-right: 1px solid #2c2d35; font-family: var(--mono); } .mw-tabs span.on { color: #fff; background: #16171b; }
.mw-files { border-right: 1px solid #2c2d35; display: flex; flex-direction: column; min-width: 0; } .mw-files .mw-tabs span { font-family: var(--font); } .mw-files .mw-tabs span:not(.on) { display: none; }
.mw-tree { padding: 10px 10px; display: grid; gap: 3px; font-size: 12px; font-family: var(--mono); } .mw-tree em { font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #8b8c98; margin-bottom: 4px; font-family: var(--font); }
.mw-tree .d { color: #c3c4cc; } .mw-tree .f { color: #9a9ba7; padding-left: 14px; } .mw-tree .f.on { color: #fff; background: #24252c; border-radius: 6px; margin-left: 8px; padding-left: 6px; } .mw-tree .d + .f, .mw-tree .f + .f { padding-left: 14px; }
.mw-box { margin-top: auto; padding: 8px 10px; border-top: 1px solid #2c2d35; font-size: 11.5px; color: #fff; display: grid; grid-template-columns: 12px 1fr; align-items: center; column-gap: 4px; white-space: nowrap; } .mw-box small { grid-column: 2; } .mw-box i { width: 7px; height: 7px; border-radius: 50%; background: #2fd47a; } .mw-box small { color: #8b8c98; font-size: 10.5px; }
.mw-editor { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid #2c2d35; }
.mw-code { flex: 1; padding: 8px 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.65; overflow: hidden; } .mw-code .ln { display: grid; grid-template-columns: 34px 1fr; } .mw-code .ln i { font-style: normal; text-align: right; padding-right: 10px; color: #55565f; } .mw-code .ln span { white-space: pre; overflow: hidden; text-overflow: ellipsis; color: #f3f3f6; }
.mw-code b { font-weight: 400; } .mw-code .k { color: #b495ff; } .mw-code .s { color: #c8d4fa; } .mw-code .f { color: #a2ffc1; } .mw-code .c { color: #7c8193; } .mw-code .d { color: #ffd27a; }
.mw-status { height: 22px; border-top: 1px solid #2c2d35; display: flex; gap: 12px; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 10.5px; color: #8b8c98; } .mw-status .sp { flex: 1; }
.mw-agent { display: flex; flex-direction: column; min-width: 0; } .mw-agent .mw-tabs span { font-family: var(--font); }
.mw-msgs { flex: 1; padding: 12px 14px; display: grid; gap: 10px; align-content: end; font-size: 12.5px; line-height: 1.5; }
.mw-msgs .me { justify-self: end; max-width: 85%; padding: 8px 12px; border-radius: 12px; background: #24252c; color: #fff; } .mw-msgs .ai { color: #d4d5dc; } .mw-msgs .ai code { font-family: var(--mono); font-size: 11.5px; color: #fff; }
.mw-msgs .rc { font-family: var(--mono); font-size: 11.5px; color: #9a9ba7; } .mw-msgs .rc b { color: #fff; font-weight: 500; } .mw-msgs .rc i { font-style: normal; background: #a2ffc1; color: #102c22; border-radius: 999px; padding: 1px 7px; font-size: 10.5px; margin-left: 4px; }
.mw-composer { margin: 0 12px 12px; height: 34px; border: 1px solid #2c2d35; border-radius: 10px; display: flex; align-items: center; padding: 0 6px 0 12px; font-size: 12px; color: #8b8c98; } .mw-composer b { margin-left: auto; font-weight: 500; font-size: 11.5px; color: #fff; background: #24252c; padding: 3px 10px; border-radius: 999px; }
.mw-term { display: flex; flex-direction: column; min-height: 0; background: #0f0f12; }
.mw-th { display: flex; align-items: center; height: 30px; padding: 0 12px 0 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8b8c98; border-bottom: 1px solid #222228; } .mw-th .sp { flex: 1; } .mw-th svg { width: 14px; height: 14px; }
.mw-term pre { flex: 1; overflow: hidden; padding: 14px 18px; font-size: 13px; }
@media (max-width: 960px) { .mw-body { grid-template-columns: 1fr; height: 520px; } .mw-side { display: none; } .mw-split { grid-template-columns: 140px 1fr; } .mw-agent { display: none; } .mw-editor { border-right: 0; } }
@media (max-width: 560px) { .mw-body { height: auto; } .mw-main { grid-template-rows: auto; } .mw-split { display: none; } .mw-term pre { min-height: 300px; font-size: 12px; } }
/* the typed lines carry the cost and exit tooltips themselves, so the floating badges stay off the mini workspace */
.terminal.mini-ws .badge { display: none; }
.mw-files .mw-tabs span { border-right: 0; }

/* ===== phone chrome: header right cluster, full screen grouped menu, body lock ===== */
.nav-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-right .cta { display: flex; align-items: center; gap: 6px; }
.burger { position: relative; }
.burger i { position: absolute; left: 14px; top: 19px; width: 16px; height: 1.5px; transition: transform .25s var(--ease), top .25s var(--ease); }
.burger i:last-child { top: 24px; }
.navbar.menu-open .burger i { top: 21.25px; }
.navbar.menu-open .burger i:first-child { transform: rotate(45deg); }
.navbar.menu-open .burger i:last-child { transform: rotate(-45deg); }
html.menu-open, html.menu-open body { overflow: hidden; }
.mobile { position: fixed; left: 0; right: 0; top: var(--navh, 64px); bottom: 0; z-index: 59; background: var(--bg); display: none; flex-direction: column; }
html.menu-open .mobile { display: flex; }
.m-scroll { flex: 1; overflow: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; }
.m-group { border-bottom: 1px solid var(--grey-200); }
.m-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 4px; font-size: 17px; font-weight: 600; cursor: pointer; color: var(--ink); }
.m-group summary::-webkit-details-marker { display: none; }
.m-group summary svg { width: 18px; height: 18px; fill: none; stroke: var(--grey-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.m-group[open] summary svg { transform: rotate(180deg); }
.m-group a, .m-link { display: grid; gap: 2px; padding: 11px 12px; margin: 0 0 4px; border-radius: 12px; color: var(--ink); }
.m-group a:active, .m-link:active { background: var(--grey-100); }
.m-group a b, .m-link b { font-weight: 500; font-size: 15.5px; }
.m-group a small, .m-link small { font-size: 12.5px; color: var(--grey-500); }
.m-group > a:last-child { margin-bottom: 12px; }
.m-link { margin-top: 10px; }
.m-foot { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--grey-200); background: var(--bg); }
.m-foot .nb { height: 44px; justify-content: center; padding: 0 22px; }
.m-theme { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 6px; font-size: 14px; color: var(--grey-700); }
.m-theme .sw { width: 38px; height: 22px; border-radius: 11px; background: var(--grey-200); position: relative; transition: background .2s; }
.m-theme .sw i { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
html[data-theme="light"] .m-theme .sw { background: var(--ink); } html[data-theme="light"] .m-theme .sw i { transform: translateX(16px); }

/* ===== phone layout: tighter rhythm, readable type, composed footer ===== */
@media (max-width: 560px) {
  :root { --navh: 60px; }
  .wrap { padding: 0 16px; }
  section { padding: 56px 0; }
  .hero { padding: 36px 0 48px; }
  h1 { font-size: clamp(38px, 11.5vw, 48px); }
  h2 { font-size: clamp(28px, 8vw, 34px); }
  .lede { font-size: 16px; margin-top: 14px; }
  .eyebrow { font-size: 11px; }
  .hero-ctas { margin-top: 24px; gap: 10px; } .hero-ctas .btn { width: 100%; justify-content: center; }
  .nav-inner { height: 60px; }
  .announce { font-size: 12px; line-height: 1.35; }
  footer { margin-top: -20px; padding: 44px 0 28px; border-radius: 24px 24px 0 0; }
  .foot { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .foot > div:first-child { grid-column: 1 / -1; }
  .foot .logo img { height: 30px; }
  .foot .muted { margin-top: 10px; max-width: none; }
  .foot h4 { margin: 0 0 10px; }
  .foot a:not(.logo) { font-size: 14px; margin-bottom: 9px; }
  .copy-line { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 32px; padding-top: 16px; }
  .foot-legal { gap: 14px; }
  .cmp-note, .cmp-under { padding: 0 4px; }
  .code-card { border-radius: 16px; }
  .pricing .calc { padding: 20px 16px; }
}
@media (max-width: 560px) { br.bw { display: none; } }

/* ===== phone pass 3: diagram, code, tables ===== */
@media (max-width: 860px) {
  .diagram svg, .diagram::after { display: none; }
  .diagram { padding: 18px 16px; }
  .diagram-tools { justify-content: flex-start; }
  .diagram-hint { display: block; width: 100%; font-size: 14px; color: var(--grey-700); margin-top: 6px; }
}
@media (max-width: 560px) {
  .code-card pre code, .code-card pre { white-space: pre-wrap; word-break: break-word; }
  .terminal.mini-ws .bar span { display: none; }
  .mw-term pre { white-space: pre-wrap; word-break: break-word; font-size: 12px; padding: 12px 14px; }
  .why-stats .wstat b { font-size: 32px; }
  .calc label { flex-wrap: wrap; }
}