/* NexFlo Cloud - site styles
   Layout modelled on a product-led SaaS site: dark sections, big brand-blue circles,
   real product UI (code, dashboards, messages) as the visuals. Each section sets its own
   palette (--bg, --ink, ...) so light/dark mode and the light-gray / blue sections all share components. */

:root {
  --blue: #006BFD;
  --blue-hover: #0058D6;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --max: 1200px;
  --r: 18px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --code-bg: #070C1B;
  --code-ink: #D6DDEA;
  --code-muted: #6E7A93;
  --code-line: rgba(255,255,255,.08);
  --green: #0B8A5C;
  --amber: #A35F00;

  /* light theme page palette */
  --bg: #FFFFFF;
  --bg2: #F5F7FA;
  --panel: #F2F4F8;
  --panel-2: #FFFFFF;
  --ink: #0A1122;
  --ink2: #485366;
  --muted: #6B7488;
  --line: #E2E6ED;
  --link: #0057D1;
  --field: #FFFFFF;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050B1A;
  --bg2: #081127;
  --panel: #0A1530;
  --panel-2: #0D1A39;
  --ink: #F1F4F9;
  --ink2: #AAB4C7;
  --muted: #7C879D;
  --line: rgba(255,255,255,.09);
  --link: #4D95FF;
  --field: rgba(255,255,255,.06);
  --green: #3CCB8F;
  --amber: #E0A23A;
}
/* Section palettes (same in both modes) */
.s-light { --bg: #F4F6F9; --bg2: #EDF0F5; --panel: #E9EDF3; --panel-2: #FFFFFF; --ink: #0A1122; --ink2: #485366; --muted: #6B7488; --line: #DEE3EA; --link: #0057D1; --field: #FFFFFF; --green: #0B8A5C; --amber: #A35F00; color-scheme: light; }
.s-accent { --bg: #006BFD; --bg2: #0062E8; --panel: rgba(255,255,255,.09); --panel-2: rgba(255,255,255,.14); --ink: #FFFFFF; --ink2: rgba(255,255,255,.84); --muted: rgba(255,255,255,.7); --line: rgba(255,255,255,.24); --link: #FFFFFF; --field: rgba(255,255,255,.14); color-scheme: dark; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { color: var(--ink); margin: 0 0 .5em; line-height: 1.06; letter-spacing: -.03em; font-weight: 650; }
h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.04em; line-height: 1; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
h3 { font-size: 1.2rem; letter-spacing: -.015em; }
p { margin: 0 0 1em; }
code { font-family: var(--mono); font-size: .88em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.narrow { max-width: 800px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; z-index: 100; border-radius: 8px; }
.skip:focus { left: 8px; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mt-4 { margin-top: 32px; } .mt-6 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.mono { font-family: var(--mono); }
html.theme-anim, html.theme-anim * { transition: background-color .35s ease, color .35s ease, border-color .35s ease !important; }
.eyebrow, .label { display: block; font-size: 1rem; font-weight: 500; color: var(--muted); margin-bottom: 14px; letter-spacing: -.005em; }
.lead { font-size: 1.15rem; color: var(--ink2); max-width: 640px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; gap: 24px; height: 68px; }
.brand { flex: none; }
.brand img { height: 40px; width: auto; }
.logo-dark { display: none !important; }
[data-theme="dark"] .logo-light { display: none !important; }
[data-theme="dark"] .logo-dark { display: block !important; }
.nav-panel { display: flex; align-items: center; flex: 1; gap: 16px; }
.nav-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 8px; font: 500 .95rem var(--font); color: var(--ink2); background: none; border: 0; cursor: pointer; white-space: nowrap; }
.nav-link:hover, .nav-item.open > .nav-link { color: var(--ink); background: var(--panel); text-decoration: none; }
.nav-link.active { color: var(--ink); }
.chev { width: 10px; height: 10px; flex: none; transition: transform .2s; }
.nav-item.open .chev { transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 10px); left: -6px; min-width: 350px; padding: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s var(--ease), visibility .18s; }
[data-theme="dark"] .dropdown { background: #0E1A36; }
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--ink); }
.dropdown a:hover { background: var(--panel); text-decoration: none; }
.dropdown .d-icon { display: none; }
.dropdown .d-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem; }
.dropdown .d-desc { display: block; font-size: .85rem; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.dropdown .d-foot { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.dropdown .d-foot a { color: var(--link); font-weight: 600; font-size: .88rem; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-login { font-weight: 500; font-size: .95rem; color: var(--ink2); padding: 8px; white-space: nowrap; }
.nav-login:hover { color: var(--ink); text-decoration: none; }
.theme-toggle { width: 38px; height: 38px; display: grid; place-items: center; background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); cursor: pointer; }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .i-sun { display: none; }
[data-theme="dark"] .theme-toggle .i-sun { display: block; }
[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.nav-toggle { display: none; margin-left: auto; width: 42px; height: 42px; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 2px; margin: 4px auto; background: var(--ink); transition: transform .2s, opacity .2s; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 1px solid transparent; border-radius: 10px; font: 600 .97rem var(--font); cursor: pointer; white-space: nowrap; transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { border-color: var(--ink2); }
.btn-white { background: #fff; color: #0A1122; }
.btn-white:hover { background: #EAF2FF; }
.s-accent .btn-primary { background: #fff; color: #0047B8; }
.s-accent .btn-primary:hover { background: #EAF2FF; }
.btn-ghost { color: var(--ink); padding-left: 4px; padding-right: 4px; }
.btn-sm { padding: 9px 15px; font-size: .9rem; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.arrow::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
a:hover .arrow::after, .arrow:hover::after { transform: translateX(3px); }
.link-arrow { font-weight: 600; color: var(--link); }
.link-arrow::after { content: " →"; display: inline-block; transition: transform .2s var(--ease); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--panel); color: var(--muted); white-space: nowrap; letter-spacing: 0; }
.badge-live { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.badge-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-blue { color: var(--link); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--ink); background: var(--panel); border-radius: 8px; padding: 6px 10px; }
.chip small { color: var(--muted); margin-left: 6px; }
.doc-chip { font-family: var(--mono); font-size: .76rem; font-weight: 600; color: var(--link); background: color-mix(in srgb, var(--blue) 12%, transparent); border-radius: 6px; padding: 2px 7px; }

/* ---------- Sections ---------- */
main section, .sec { position: relative; padding: 104px 0; background: var(--bg); color: var(--ink); }
.section-soft { background: var(--bg2); }
.section-head { max-width: 760px; margin-bottom: 52px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-head.center .lead { margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.split.top { align-items: start; }
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Panels (cards) */
.card, .feature, .step, .pain, .founder { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 28px; }
a.card { display: block; color: inherit; transition: border-color .2s, transform .25s var(--ease); }
a.card:hover { border-color: color-mix(in srgb, var(--blue) 55%, transparent); transform: translateY(-3px); text-decoration: none; }
.card.featured { border-color: color-mix(in srgb, var(--blue) 60%, transparent); }
.card h3, .feature h3, .pain h3 { margin: 0 0 8px; }
.card p, .feature p, .pain p, .step p { color: var(--ink2); margin: 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.card .more { display: inline-block; margin-top: 16px; font-weight: 600; color: var(--link); }
.icon { width: 42px; height: 42px; border-radius: 11px; background: var(--blue); color: #fff; display: grid; place-items: center; margin-bottom: 18px; }
.icon svg { width: 21px; height: 21px; }
.product-mark { font-weight: 700; font-size: 1.45rem; letter-spacing: -.03em; color: var(--ink); }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feature-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.feature h3 { font-size: 1.08rem; }
.feature p { font-size: .97rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: #fff; font-weight: 700; margin-bottom: 18px; }
.pain .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--link); font-weight: 700; margin-bottom: 16px; }
.checks, .plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li, .plain li { position: relative; padding-left: 28px; color: var(--ink2); }
.checks li::before, .plain li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--blue) 22%, transparent); box-shadow: inset 0 0 0 4px var(--bg), inset 0 0 0 14px var(--blue); }
.checks.two { grid-template-columns: 1fr 1fr; column-gap: 32px; }
.notice { display: block; padding: 18px 22px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--blue); color: var(--ink2); font-size: .97rem; }
.notice strong { color: var(--ink); }
blockquote { margin: 0; padding-left: 18px; border-left: 3px solid var(--blue); font-size: 1.15rem; color: var(--ink); }

/* ---------- Big brand circles ---------- */
.arc { position: absolute; left: 50%; border-radius: 50%; background: var(--blue); transform: translateX(-50%) scale(var(--s, 1)); transform-origin: 50% 0; pointer-events: none; will-change: transform; }

/* ---------- Home: hero ---------- */
.hero-s { position: relative; overflow: hidden; padding: 120px 0 0; text-align: center; background: var(--bg); }
.hero-lines { position: absolute; left: 50%; top: -620px; width: 1700px; height: 1700px; transform: translateX(-50%); color: var(--ink); opacity: .07; pointer-events: none; animation: spin 240s linear infinite; }
.hero-s h1 { max-width: 980px; margin: 0 auto; position: relative; z-index: 2; }
.hero-s h1 .w { display: inline-block; animation: rise .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.hero-s .sub { position: relative; z-index: 2; font-size: 1.3rem; color: var(--ink2); max-width: 640px; margin: 26px auto 36px; animation: rise .9s var(--ease) both .45s; }
.hero-s .signup { margin: 0 auto; position: relative; z-index: 2; animation: rise .9s var(--ease) both .55s; }
.hero-s .hero-note { position: relative; z-index: 2; font-size: .92rem; color: var(--muted); margin-top: 16px; animation: rise .9s var(--ease) both .65s; }
.hero-circle { top: 560px; width: 2000px; height: 2000px; animation: circleIn 1.4s var(--ease) both .2s; }
@keyframes circleIn { from { transform: translateX(-50%) scale(.82); opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.hero-stage { position: relative; z-index: 2; max-width: 960px; margin: 76px auto 0; text-align: left; animation: rise 1s var(--ease) both .8s; }
.hero-strip { position: relative; z-index: 2; padding: 56px 0 44px; color: #fff; }
.hero-strip p { font-size: 1rem; color: rgba(255,255,255,.88); margin: 0 0 22px; }

/* Ticker of document types */
.ticker { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-set { display: flex; gap: 12px; padding-right: 12px; }
.ticker-set span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 12px; background: rgba(255,255,255,.12); color: #fff; font-size: .92rem; white-space: nowrap; }
.ticker-set b { font-family: var(--mono); font-weight: 600; }
.ticker-set i { font-style: normal; font-size: .72rem; opacity: .75; background: rgba(0,0,0,.18); padding: 2px 7px; border-radius: 999px; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Live demo window (hero) */
.demo { background: var(--code-bg); color: var(--code-ink); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; font-family: var(--mono); font-size: .8rem; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0,10,40,.7); }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 16px 0 0; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: .74rem; }
.demo-bar .tab-name { padding: 12px 16px; color: var(--code-ink); border-right: 1px solid var(--code-line); background: rgba(255,255,255,.03); }
.demo-panes { display: grid; grid-template-columns: 1fr 1fr; }
.demo-pane { padding: 16px 18px; min-width: 0; }
.demo-pane + .demo-pane { border-left: 1px solid var(--code-line); }
.demo-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--code-muted); margin-bottom: 10px; }
.demo pre, .win pre, .code pre { margin: 0; white-space: pre; overflow-x: auto; line-height: 1.7; }
.demo-steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--code-line); }
.demo-steps li { position: relative; padding: 12px 16px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #4C5770; border-left: 1px solid var(--code-line); transition: color .2s; }
.demo-steps li:first-child { border-left: 0; }
.demo-steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.demo-steps li span { display: block; color: var(--code-muted); font-size: .64rem; margin-top: 2px; letter-spacing: .04em; }
.demo-steps li.on { color: #fff; }
.demo-steps li.on::before { transform: scaleX(1); }
.demo-steps li.done { color: #3CCB8F; }
.demo-steps li.done::before { transform: scaleX(1); background: #3CCB8F; }
.seg { color: #6FA8FF; font-weight: 600; }
.k { color: #9CC2FF; } .s { color: #A8E6C3; } .n { color: #F2C46D; } .c { color: #5E6A84; }
.ln { display: block; transition: opacity .16s var(--ease), background .15s; margin: 0 -6px; padding: 0 6px; border-radius: 3px; }
.is-animated .ln { opacity: 0; }
.is-animated .ln.on { opacity: 1; }
.ln.cur { background: rgba(0,107,253,.32); }

/* ---------- Feature rows ---------- */
.frows { display: grid; gap: 120px; }
.frow { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 72px; align-items: center; }
.frow.flip > .vis { order: 2; }
.frow-text h2 { font-size: clamp(1.9rem, 3.3vw, 2.8rem); }
.frow-text p { font-size: 1.12rem; color: var(--ink2); max-width: 500px; }
.vis { position: relative; overflow: hidden; border-radius: 26px; background: var(--panel); border: 1px solid var(--line); aspect-ratio: 5 / 4; display: grid; place-items: center; padding: 36px; }
.vis .arc { width: 140%; aspect-ratio: 1; top: 46%; }
.vis > :not(.arc) { position: relative; z-index: 1; width: 100%; }

/* Code window with filename tab and line numbers */
.win { background: var(--code-bg); color: var(--code-ink); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; font-family: var(--mono); font-size: .78rem; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,10,40,.8); text-align: left; }
.win-bar { display: flex; align-items: center; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: .72rem; }
.win-bar .tab-name { padding: 11px 16px; color: var(--code-ink); border-right: 1px solid var(--code-line); background: rgba(255,255,255,.03); }
.win-bar .win-meta { margin-left: auto; padding: 0 14px; }
.win pre { padding: 14px 16px 16px 0; counter-reset: ln; }
.win .ln { padding-left: 46px; position: relative; margin: 0; }
.win .ln::before { counter-increment: ln; content: counter(ln); position: absolute; left: 0; width: 30px; text-align: right; color: #3D4760; }

/* Message bubble (support) */
.chat { background: color-mix(in srgb, #fff 16%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.22); border-radius: 18px; padding: 22px; color: #fff; text-align: left; max-width: 420px; margin: 0 auto; min-height: 210px; }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 12px; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.msg + .msg { margin-top: 18px; }
.msg.show { opacity: 1; transform: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: #fff; color: #0047B8; }
.avatar.them { background: rgba(0,0,0,.25); color: #fff; }
.msg b { font-size: .95rem; }
.msg time { font-size: .78rem; opacity: .75; margin-left: 6px; }
.msg p { margin: 4px 0 0; font-size: .92rem; line-height: 1.5; color: rgba(255,255,255,.92); }
.msg code { background: rgba(0,0,0,.22); padding: 1px 6px; border-radius: 5px; font-size: .8rem; }
.typing { display: inline-flex; gap: 4px; padding: 8px 0 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .5; animation: dot 1s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { opacity: 1; transform: translateY(-3px); } }

/* Usage meter (pricing visual) */
.meter { background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 24px; text-align: left; max-width: 420px; margin: 0 auto; box-shadow: 0 30px 60px -30px rgba(0,10,40,.55); }
[data-theme="dark"] .meter { background: #0E1B3B; }
.meter-top { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); }
.meter-num { font-size: 2.6rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.meter-bar { height: 10px; border-radius: 999px; background: var(--panel); overflow: hidden; margin: 14px 0 18px; }
.meter-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--blue); transition: width 1.2s var(--ease); }
.meter-rows { display: grid; gap: 8px; font-size: .88rem; }
.meter-rows div { display: flex; justify-content: space-between; color: var(--ink2); border-top: 1px solid var(--line); padding-top: 8px; }
.meter-rows b { color: var(--ink); font-weight: 600; }

/* ---------- Orbit (trading partner network) ---------- */
.orbit-sec { text-align: center; overflow: hidden; }
.orbit { position: relative; width: min(620px, 92vw); aspect-ratio: 1; margin: 0 auto 56px; }
.orbit::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--blue) 18%, transparent), transparent 62%); }
.ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--line); transform: translate(-50%, -50%); animation: orbit var(--d) linear infinite; }
.ring.r1 { width: 40%; height: 40%; --d: 50s; }
.ring.r2 { width: 68%; height: 68%; --d: 80s; animation-direction: reverse; }
.ring.r3 { width: 96%; height: 96%; --d: 120s; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.node { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a))); }
.ring.r1 .node { --rad: calc(min(620px, 92vw) * .2); }
.ring.r2 .node { --rad: calc(min(620px, 92vw) * .34); }
.ring.r3 .node { --rad: calc(min(620px, 92vw) * .48); }
.node-in { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); animation: orbit-counter var(--d) linear infinite; white-space: nowrap; font-size: .8rem; font-weight: 600; padding: 7px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 24px -14px rgba(0,0,0,.5); }
[data-theme="dark"] .node-in { background: #0E1B3B; }
.ring.r2 .node-in { animation-direction: reverse; }
.node-in b { font-family: var(--mono); color: var(--link); margin-right: 6px; }
@keyframes orbit-counter { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.orbit-core { position: absolute; left: 50%; top: 50%; width: 21%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 26%; background: var(--blue); display: grid; place-items: center; box-shadow: 0 20px 50px -18px rgba(0,107,253,.8); }
.orbit-core img { width: 64%; filter: brightness(0) invert(1); }
.orbit-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--blue); animation: corePulse 2.8s ease-out infinite; }
@keyframes corePulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.8); opacity: 0; } }
.ray { position: absolute; left: 50%; top: 50%; width: 46%; height: 0; transform: rotate(var(--a)); transform-origin: 0 0; }
.ray i { position: absolute; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--link); animation: inbound var(--t, 3.2s) var(--ease) infinite; animation-delay: var(--dl, 0s); opacity: 0; }
.ray.out i { background: var(--green); animation-name: outbound; }
@keyframes inbound { 0% { left: 100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 22%; opacity: 0; } }
@keyframes outbound { 0% { left: 22%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* ---------- Document list ---------- */
.doclist { background: var(--panel); border: 1px solid var(--line); border-radius: 26px; padding: 12px 40px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.doc { padding: 28px 0; border-bottom: 1px solid var(--line); }
.doc:nth-last-child(-n+2) { border-bottom: 0; }
.doc h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.doc h3 code { font-family: var(--mono); font-size: 1rem; color: var(--ink); }
.doc p { margin: 0; color: var(--ink2); font-size: .98rem; }

/* ---------- Product tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.tile-art { position: relative; overflow: hidden; aspect-ratio: 16 / 11; border-radius: 22px; background: var(--panel); margin-bottom: 22px; display: grid; place-items: center; }
.tile-art .t-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid var(--line); transform: translate(-50%, -50%); }
.tile-art .t-ring.a { width: 70%; aspect-ratio: 1; }
.tile-art .t-ring.b { width: 115%; aspect-ratio: 1; }
.sq { position: relative; z-index: 2; width: 72px; height: 72px; border-radius: 18px; background: var(--blue); color: #fff; display: grid; place-items: center; box-shadow: 0 16px 34px -16px rgba(0,107,253,.9); }
.sq svg { width: 32px; height: 32px; }
.tile-art.soon .sq { background: #3B4558; box-shadow: none; }
.t-orb { position: absolute; left: 50%; top: 50%; width: 70%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: orbit 14s linear infinite; z-index: 1; }
.t-orb.slow { width: 115%; animation-duration: 26s; animation-direction: reverse; }
.t-orb span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); font-family: var(--mono); font-size: .68rem; font-weight: 600; padding: 4px 8px; border-radius: 8px; background: var(--panel-2); border: 1px solid var(--line); color: var(--link); white-space: nowrap; }
.t-orb span:nth-child(2) { top: 100%; }
.tile h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1.35rem; }
.tile p { color: var(--ink2); margin: 0 0 12px; }

/* ---------- Security cards ---------- */
.scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.scard { border: 1px solid var(--line); background: var(--panel); border-radius: 20px; padding: 30px; }
.scard h3 { font-size: 1.3rem; margin-bottom: 10px; }
.scard p { margin: 0; color: var(--ink2); }

/* ---------- Closing circle ---------- */
.cta-s { overflow: hidden; padding: 160px 0 0; text-align: center; }
.cta-circle { top: 60px; width: 2200px; height: 2200px; }
.cta-in { position: relative; z-index: 2; padding: 90px 0 120px; color: #fff; }
.cta-in h2 { color: #fff; font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 760px; margin: 0 auto 18px; }
.cta-in p { color: rgba(255,255,255,.86); font-size: 1.15rem; margin: 0 auto 32px; max-width: 560px; }
.cta-in .row { justify-content: center; }
.cta-in .btn-ghost { color: #fff; }

/* Closing band on inner pages */
.cta2 { overflow: hidden; }
.cta2 .cta2-box { position: relative; overflow: hidden; border-radius: 28px; background: var(--blue); color: #fff; padding: 64px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.cta2 .cta2-box .arc { width: 900px; height: 900px; top: 55%; left: 90%; background: rgba(255,255,255,.08); }
.cta2 .cta2-box > :not(.arc) { position: relative; z-index: 1; }
.cta2 h2 { color: #fff; font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.cta2 p { color: rgba(255,255,255,.86); margin: 0; }
.cta2 .small { margin-top: 14px; color: rgba(255,255,255,.8); }
.cta2 .small a { color: #fff; text-decoration: underline; }
.cta2 .signup { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.25); }
.cta2 .signup input { color: #fff; }
.cta2 .signup input::placeholder { color: rgba(255,255,255,.7); }
.cta2 .signup .btn-primary { background: #fff; color: #0047B8; }

/* ---------- Signup ---------- */
.signup { display: flex; gap: 6px; max-width: 480px; padding: 5px; border: 1px solid var(--line); border-radius: 13px; background: var(--field); }
.signup input { flex: 1; min-width: 0; border: 0; padding: 10px 12px; font: inherit; font-size: 1rem; color: var(--ink); background: transparent; }
.signup input::placeholder { color: var(--muted); }
.signup input:focus { outline: none; }
.signup:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.signup .btn { padding: 10px 18px; border-radius: 9px; }
.inline-success { display: none; margin-top: 12px; font-weight: 600; color: var(--green); }
form.sent + .inline-success { display: block; }
.hp { position: absolute; left: -9999px; }

/* ---------- Dashboard preview ---------- */
.dash { background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-size: .86rem; text-align: left; box-shadow: 0 30px 60px -30px rgba(0,10,40,.55); }
[data-theme="dark"] .dash { background: #0B1734; }
.dash .dots { display: none; }
.dash-top { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .72rem; color: var(--muted); }
.dash-top .badge { margin-left: auto; }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.dash-kpis > div { padding: 14px 16px; border-left: 1px solid var(--line); }
.dash-kpis > div:first-child { border-left: 0; }
.dash-kpis small { display: block; font-size: .72rem; color: var(--muted); }
.dash-kpis b { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-row { display: grid; grid-template-columns: 50px 1fr 1.7fr 104px; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dash-row:last-child { border-bottom: 0; }
.dash-row.head { font-size: .72rem; color: var(--muted); }
.dash-row .partner { font-weight: 600; }
.dash-row .doc-chip { margin-right: 6px; }
.dash-row.new { animation: rowIn .6s var(--ease); }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); background: color-mix(in srgb, var(--blue) 12%, transparent); } }
[data-rows] { min-height: 264px; }
.st { justify-self: start; font-size: .74rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; transition: background .3s, color .3s; }
.st-rec { background: var(--panel); color: var(--muted); }
.st-tr { background: color-mix(in srgb, var(--blue) 14%, transparent); color: var(--link); }
.st-ok { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.st-warn { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }

/* ---------- Code windows (product pages) ---------- */
.code { background: var(--code-bg); color: var(--code-ink); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; font-family: var(--mono); font-size: .8rem; overflow: hidden; min-width: 0; }
.code .dots { display: none; }
.code-head { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--code-line); color: var(--code-muted); font-size: .72rem; }
.code-head b { color: var(--code-ink); font-weight: 500; }
.code-head > span:last-child { margin-left: auto; }
.code pre { padding: 14px 16px; }
.code-tabs pre { min-height: 250px; }
.tab { background: none; border: 0; color: var(--code-muted); font: 500 .72rem var(--mono); padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.tab:hover { color: #fff; }
.tab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.1); }
.api-note { padding: 0 16px 14px; margin: 0; color: var(--code-muted); font-size: .72rem; }
.translate { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
.translate-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 22px; }
.translate-mid .pill { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.translate-mid .pill i { width: 44px; height: 44px; display: grid; place-items: center; font-style: normal; border-radius: 12px; background: var(--blue); color: #fff; transition: background .2s, box-shadow .2s; }
.translate.pulse .pill i { box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue) 22%, transparent); }
.translate.done .pill i { background: #12A26E; }
.translate-status { margin-top: 10px; min-height: 2.6em; max-width: 120px; text-align: center; font-size: .72rem; color: var(--muted); line-height: 1.35; }
.translate.done .translate-status { color: var(--green); }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; overflow: hidden; padding: 96px 0 80px; background: var(--bg); }
.page-hero .ph-arc { width: 760px; height: 760px; left: auto; right: -260px; top: 120px; transform: scale(var(--s, 1)); transform-origin: 50% 50%; animation: phIn 1.2s var(--ease) both .1s; opacity: .95; }
@keyframes phIn { from { transform: scale(.7); opacity: 0; } }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); max-width: 860px; animation: rise .8s var(--ease) both .05s; }
.page-hero .lead { margin-top: 18px; animation: rise .8s var(--ease) both .15s; }
.page-hero .actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; animation: rise .8s var(--ease) both .25s; }
.breadcrumbs { font-size: .88rem; color: var(--muted); margin-bottom: 20px; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--ink); }

/* Products overview rows */
.rows { display: grid; gap: 14px; }
.prow { display: grid; grid-template-columns: 56px 200px minmax(0, 1fr) 140px 24px; gap: 24px; align-items: center; padding: 26px 28px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--line); color: var(--ink); transition: border-color .2s, transform .25s var(--ease); }
.prow:hover { text-decoration: none; border-color: color-mix(in srgb, var(--blue) 55%, transparent); transform: translateY(-2px); }
.prow-num { width: 40px; height: 40px; border-radius: 11px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.prow-name { font-weight: 700; font-size: 1.5rem; letter-spacing: -.03em; }
.prow-desc { color: var(--ink2); }
.prow-go { color: var(--muted); transition: transform .2s var(--ease), color .15s; }
.prow:hover .prow-go { transform: translateX(4px); color: var(--link); }

/* Facts table */
.facts { margin: 0; }
.fact { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.fact dt { font-weight: 650; }
.fact dd { margin: 0; color: var(--ink2); }

/* ---------- Forms ---------- */
.form-card { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .88rem; font-weight: 600; }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; width: 100%; }
[data-theme="dark"] .field select option { background: #0E1A36; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 25%, transparent); }
.form-foot { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.form-foot small { color: var(--muted); }
.form-success { display: none; padding: 20px 4px; }
.form-success .tick { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); font-weight: 800; margin-bottom: 12px; }
form.sent .form-body { display: none; }
form.sent .form-success { display: block; }

/* ---------- Pricing ---------- */
.price-card { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: 30px; }
.price-card.featured { border-color: color-mix(in srgb, var(--blue) 60%, transparent); }
.price-card .price { font-size: 1.5rem; font-weight: 700; margin: 16px 0 4px; letter-spacing: -.02em; }
.price-card .price small { font-size: .9rem; font-weight: 500; color: var(--muted); }
.price-card .checks { margin: 18px 0 28px; font-size: .95rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-weight: 600; position: relative; font-size: 1.06rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 400; color: var(--link); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { color: var(--ink2); padding-bottom: 16px; max-width: 760px; }

/* ---------- Articles ---------- */
.article { max-width: 740px; margin: 0 auto; }
.article h2 { font-size: 1.7rem; margin-top: 2em; }
.article p, .article li { color: var(--ink2); font-size: 1.05rem; }
.article ul, .article ol { padding-left: 1.3em; }
.article li { margin-bottom: .4em; }
.article table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: .95rem; }
.article th, .article td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-size: .82rem; color: var(--muted); font-weight: 600; }
.article .code { margin: 1.4em 0; }
.meta { font-size: .88rem; color: var(--muted); }
.table-wrap { overflow-x: auto; }
table.article { width: 100%; max-width: none; border-collapse: collapse; }

/* ---------- Footer ---------- */
.site-footer { padding: 72px 0 36px; font-size: .95rem; background: var(--bg); color: var(--ink); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.foot-brand img { height: 40px; width: auto; margin-bottom: 18px; }
.foot-brand p { color: var(--ink2); margin: 0 0 6px; }
.foot-social { display: flex; gap: 12px; margin-top: 18px; }
.foot-social a { color: var(--ink); }
.foot-social svg { width: 20px; height: 20px; }
.foot-col h4 { font-size: .9rem; font-weight: 500; color: var(--muted); margin: 0 0 16px; letter-spacing: 0; }
.foot-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot-col a { color: var(--ink); }
.foot-news { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.foot-news p { margin: 0; color: var(--ink2); }
.foot-news .signup { min-width: min(420px, 100%); }
.foot-bottom { margin-top: 32px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.foot-bottom a { color: var(--muted); }

/* ---------- Portal / 404 ---------- */
.portal-wrap { min-height: calc(100vh - 68px); display: grid; place-items: center; padding: 64px 0; position: relative; overflow: hidden; }
.portal-card { max-width: 480px; width: 100%; position: relative; z-index: 1; }
.portal-card .signup { margin: 0 auto; }

/* ---------- Reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav-toggle { display: block; }
  .nav-panel { position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 68px); height: calc(100dvh - 68px); display: none; flex-direction: column; align-items: stretch; gap: 16px; padding: 12px 20px 32px; overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); }
  body.menu-open .nav-panel { display: flex; }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .nav-menu { flex-direction: column; align-items: stretch; flex: none; }
  .nav-link { width: 100%; justify-content: space-between; padding: 14px 6px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-link:hover, .nav-item.open > .nav-link { background: none; }
  .dropdown { position: static; display: none; min-width: 0; padding: 4px 0 8px; border: 0; box-shadow: none; background: none !important; opacity: 1; visibility: visible; transform: none; }
  .nav-item.open .dropdown { display: block; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { width: 100%; }
  .nav-login { padding: 12px 6px; }
  .theme-toggle { width: 100%; height: 46px; display: flex; gap: 10px; font: 600 .95rem var(--font); }
  .theme-toggle::after { content: "Dark mode"; }
  [data-theme="dark"] .theme-toggle::after { content: "Light mode"; }
}
@media (max-width: 960px) {
  main section, .sec { padding: 80px 0; }
  .hero-s { padding-top: 72px; }
  .hero-circle { top: 470px; width: 1400px; height: 1400px; }
  .hero-stage { margin-top: 56px; }
  .split, .frow, .cta2 .cta2-box { grid-template-columns: 1fr; gap: 40px; }
  .frow.flip > .vis { order: 0; }
  .frows { gap: 88px; }
  .frow-text { text-align: center; }
  .frow-text p { margin-left: auto; margin-right: auto; }
  .grid-3, .grid-4, .feature-grid, .feature-grid.four, .steps, .tiles { grid-template-columns: 1fr 1fr; }
  .doclist { grid-template-columns: 1fr; padding: 8px 28px; }
  .doc:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .scards { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .prow { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 8px 16px; }
  .prow-desc, .prow-status { grid-column: 2; }
  .prow-go { grid-row: 1; grid-column: 3; }
  .translate { grid-template-columns: 1fr; }
  .translate-mid { padding: 16px 0; }
  .translate-mid .pill i { transform: rotate(90deg); }
  .cta2 .cta2-box { padding: 40px 28px; }
  .page-hero .ph-arc { width: 480px; height: 480px; right: -280px; top: 40px; opacity: .6; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .container { padding: 0 18px; }
  .hero-s .sub { font-size: 1.12rem; }
  .hero-circle { top: 500px; width: 1100px; height: 1100px; }
  .grid-2, .grid-3, .grid-4, .feature-grid, .feature-grid.four, .steps, .form-grid, .checks.two, .tiles { grid-template-columns: 1fr; }
  .demo-panes { grid-template-columns: 1fr; }
  .demo-pane + .demo-pane { border-left: 0; border-top: 1px solid var(--code-line); }
  .demo { font-size: .7rem; }
  .demo-steps li { padding: 9px 8px; font-size: .58rem; }
  .demo-steps li span { display: none; }
  .vis { padding: 18px; aspect-ratio: auto; min-height: 340px; }
  .win { font-size: .68rem; }
  .fact { grid-template-columns: 1fr; gap: 6px; }
  .signup { flex-direction: column; }
  .signup .btn { width: 100%; }
  .form-card { padding: 22px; }
  .dash-row { grid-template-columns: 1fr 1.5fr 92px; }
  .dash-row > span:first-child { display: none; }
  .dash-kpis b { font-size: 1.1rem; }
  .doclist { padding: 4px 20px; border-radius: 20px; }
  .orbit .node-in { font-size: .66rem; padding: 5px 8px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .cta-s { padding-top: 110px; }
  .cta-circle { width: 1300px; height: 1300px; }
}

/* Theme switch (footer) */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.theme-switch button { width: 30px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer; transition: background .2s, color .2s; }
.theme-switch button svg { width: 14px; height: 14px; }
.theme-switch button:hover { color: var(--ink); }
.theme-switch button[aria-checked="true"] { background: var(--panel); color: var(--ink); }
.foot-bottom { align-items: center; }

/* fixes */
img { height: auto; }
.typing[hidden] { display: none; }
.frow-text p.small { font-size: .9rem; color: var(--muted); }
.vis .arc { width: 120%; top: 40%; }
.vis.tall { aspect-ratio: auto; }
.vis .dash-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) 100px; }
.vis .dash-row > span:first-child { display: none; }
.t-orb.slow { width: 94%; }
.t-orb span { animation: chipCounter 14s linear infinite; }
.t-orb.slow span { animation-duration: 26s; animation-direction: reverse; }
@keyframes chipCounter { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(-360deg); } }
.doc h3 code { color: var(--link); }
.hero-stage .hero-circle { top: -86px; z-index: -1; }
.hero-stage .demo { position: relative; }
@media (max-width: 960px) { .hero-stage .hero-circle { top: -70px; } }
@media (max-width: 640px) { .hero-stage .hero-circle { top: -56px; } }

/* Hero: converging flow lines + glow (replaces the rings) */
.hero-s::before { content: ""; position: absolute; left: 50%; top: 260px; width: 1200px; height: 760px; transform: translateX(-50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 20%, transparent), transparent); pointer-events: none; }
.hero-lines { position: absolute; left: 50%; top: 0; width: 1600px; height: 1000px; transform: translateX(-50%); opacity: 1; animation: none; color: inherit; }
.hl-base path { fill: none; stroke: var(--ink); stroke-opacity: .1; stroke-width: 1; }
.hl-pulse path { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 70 1700; stroke-dashoffset: 70; animation: flowDown var(--t, 4.5s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes flowDown { from { stroke-dashoffset: 70; } to { stroke-dashoffset: -1400; } }
.site-header .btn-white { border-color: var(--line); }
:root:not([data-theme="dark"]) .site-header .btn-white { background: transparent; color: var(--ink); }
@media (max-width: 640px) { .hero-lines { width: 1100px; } .hero-s::before { width: 700px; top: 200px; } }
.hero-lines { -webkit-mask-image: radial-gradient(ellipse 30% 26% at 50% 29%, transparent 45%, #000 100%); mask-image: radial-gradient(ellipse 30% 26% at 50% 29%, transparent 45%, #000 100%); }
.hero-stage { margin-top: 104px; }
.hero-stage .hero-circle { top: -64px; }
@media (max-width: 640px) { .hero-lines { -webkit-mask-image: radial-gradient(ellipse 48% 30% at 50% 30%, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 48% 30% at 50% 30%, transparent 40%, #000 100%); } .hero-stage { margin-top: 80px; } .hero-stage .hero-circle { top: -48px; } }

/* Orbit beside its text; document list as rows beside its heading */
.orbit-sec { text-align: left; }
.orbit-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: center; }
.orbit-split .orbit { margin: 0 auto; width: min(560px, 92vw); }
.orbit-split .orbit .ring.r1 .node { --rad: calc(min(560px, 92vw) * .2); }
.orbit-split .orbit .ring.r2 .node { --rad: calc(min(560px, 92vw) * .34); }
.orbit-split .orbit .ring.r3 .node { --rad: calc(min(560px, 92vw) * .48); }
.doc-split { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 64px; align-items: start; }
.doc-head { position: sticky; top: 120px; }
.doc-head .lead { margin-bottom: 20px; }
.doc-split .doclist { grid-template-columns: 1fr; padding: 8px 36px; }
.doc-split .doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.doc-split .doc:nth-last-child(2) { border-bottom: 1px solid var(--line); }
.doc-split .doc:last-child { border-bottom: 0; }
.doc-split .doc h3 { display: block; margin: 0; }
.doc-split .doc h3 span { display: block; font-size: .92rem; font-weight: 500; color: var(--ink2); margin-top: 4px; letter-spacing: 0; }
@media (max-width: 960px) {
  .orbit-split, .doc-split { grid-template-columns: 1fr; gap: 40px; }
  .orbit-split .frow-text { text-align: center; }
  .doc-head { position: static; text-align: center; }
  .doc-head .lead { margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) { .doc-split .doc { grid-template-columns: 1fr; gap: 6px; } .doc-split .doclist { padding: 4px 20px; } }
.orbit { --ow: min(620px, 92vw); width: var(--ow); }
.orbit-split .orbit { --ow: min(560px, 92vw); }
.ring.r1 .node, .orbit-split .orbit .ring.r1 .node { --rad: calc(var(--ow) * .2); }
.ring.r2 .node, .orbit-split .orbit .ring.r2 .node { --rad: calc(var(--ow) * .34); }
.ring.r3 .node, .orbit-split .orbit .ring.r3 .node { --rad: calc(var(--ow) * .48); }
@media (max-width: 640px) { .orbit-split .orbit { --ow: 72vw; margin-top: 24px; margin-bottom: 24px; } }
@media (max-width: 640px) { .orbit-core { width: 16%; border-radius: 24%; } }

/* How-it-works steps (inside a feature frame) */
.flow4-wrap { max-width: 440px; margin: 0 auto; }
.flow4 { list-style: none; margin: 0; padding: 18px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(0,10,40,.55); text-align: left; position: relative; }
[data-theme="dark"] .flow4 { background: #0E1B3B; }
.f4 { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 10px; border-radius: 12px; transition: background .4s; }
.f4:not(:last-child)::after { content: ""; position: absolute; left: 27px; top: 46px; bottom: -10px; width: 2px; background: var(--line); }
.f4-n { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: .9rem; background: var(--panel); color: var(--muted); transition: background .4s, color .4s, box-shadow .4s; position: relative; z-index: 1; }
.f4 b { display: block; font-size: .98rem; color: var(--ink); }
.f4 p { margin: 2px 0 0; font-size: .86rem; color: var(--ink2); line-height: 1.45; }
.f4.past .f4-n { background: color-mix(in srgb, var(--blue) 18%, transparent); color: var(--link); }
.f4.active { background: color-mix(in srgb, var(--blue) 10%, transparent); }
.f4.active .f4-n { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px color-mix(in srgb, var(--blue) 22%, transparent); }
.flow4-note { margin: 12px 0 0; font-size: .78rem; color: var(--muted); text-align: center; }
.tile-for { font-size: .9rem; color: var(--muted) !important; }
.tile-for b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.chat-note { margin: 16px 0 0; font-size: .74rem; color: rgba(255,255,255,.7); text-align: right; }
.price-block + .price-block { margin-top: 64px; }
.frow-text .small { font-size: .9rem; color: var(--muted); }
/* Header theme button: compact on desktop, labelled row in the mobile menu */
.site-header .theme-toggle { width: 36px; height: 36px; }
@media (max-width: 1080px) { .site-header .theme-toggle { width: 100%; height: 46px; } }

/* =====================================================================
   Revision: clouds, ribbons, upright orbits, compact layout, calmer motion
   ===================================================================== */

/* Decorative shapes are clouds now (orbit paths stay as ellipses) */
.arc { border-radius: 0; -webkit-mask: url("cloud-shape.svg") center top / 100% 100% no-repeat; mask: url("cloud-shape.svg") center top / 100% 100% no-repeat; }
.hero-circle, .cta-circle { -webkit-mask-image: url("cloud-wide.svg"); mask-image: url("cloud-wide.svg"); }
.hero-stage .hero-circle { width: 1500px; height: 1500px; top: -96px; }
.cta-circle { width: 1700px; height: 1700px; top: 40px; }
.vis .arc { width: 118%; height: auto; aspect-ratio: 240 / 140; top: 46%; }
.vis-blue { background: var(--blue) !important; border: 0 !important; }
.vis-blue .arc { background: rgba(255,255,255,.12); }
.page-hero .ph-arc { width: 620px; height: auto; aspect-ratio: 240 / 140; right: -140px; top: 150px; }
.cta2 .cta2-box .arc { width: 760px; height: auto; aspect-ratio: 240 / 140; top: 45%; left: 88%; }

/* Hero: tighter, ribbon flow instead of converging lines */
.hero-s { padding-top: 84px; }
.hero-s h1 .w { animation: rise 1.1s var(--ease) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
.hero-s h1 .w.accent { color: var(--link); }
.hero-s .sub { margin: 22px auto 30px; animation-duration: 1.1s; animation-delay: .6s; }
.hero-s .signup { animation-duration: 1.1s; animation-delay: .72s; }
.hero-s .hero-note { animation-duration: 1.1s; animation-delay: .84s; max-width: 560px; margin-left: auto; margin-right: auto; }
.hero-s .hero-note a { font-weight: 600; }
.hero-stage { margin-top: 72px; animation: rise 1.3s var(--ease) both 1s; }
.hero-strip { padding: 34px 0 30px; }
.hero-strip p { margin-bottom: 16px; }
/* The ribbons SVG is wider than any screen; the box is the screen width (never under 1600px) and the
   SVG is cropped to it, centred. The clear area behind the headline is sized in px so it stays the same. */
.hero-ribbons { position: absolute; left: 50%; top: 0; width: max(1600px, 100vw); height: 900px; transform: translateX(-50%); pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 544px 270px at 50% 270px, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 544px 270px at 50% 270px, transparent 40%, #000 100%); }
@media (max-width: 640px) { .hero-ribbons { -webkit-mask-image: radial-gradient(ellipse 374px 270px at 50% 270px, transparent 40%, #000 100%); mask-image: radial-gradient(ellipse 374px 270px at 50% 270px, transparent 40%, #000 100%); } }
/* Homepage flow: the product cards sit on the hero cloud, and below it the page is one dark canvas.
   Where blue meets the dark canvas it ends in a line of clouds (the band the hero cloud uses), not a straight cut. */
.hero-stage.products-stage { max-width: none; }
.hero-stage.products-stage .hero-circle { height: auto; bottom: -420px;
  -webkit-mask: url("cloud-hero.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .3) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x, linear-gradient(#000, #000) center calc(var(--cw) * .6) / 100% 100% no-repeat;
  mask: url("cloud-hero.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .3) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x, linear-gradient(#000, #000) center calc(var(--cw) * .6) / 100% 100% no-repeat; }
.products-stage .section-head { position: relative; max-width: 640px; }
.products-stage .s-light { position: relative; }
.edge-bottom { --edge-w: 480px; --edge-h: 104px; }
.edge-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; height: var(--edge-h); background: var(--edge-c, var(--bg)); pointer-events: none;
  -webkit-mask: url("cloud-band.svg") center top / var(--edge-w) calc(var(--edge-w) * 1.1667) repeat-x; mask: url("cloud-band.svg") center top / var(--edge-w) calc(var(--edge-w) * 1.1667) repeat-x; }
.hero-s.edge-bottom { padding-bottom: 72px; }
/* Support is the one light-gray section: it breaks up the dark run, and clouds carry the colour in and out. */
.edge-to-light { --edge-c: #F4F6F9; }
.edge-to-dark { --edge-c: #050B1A; }
main section.sec-tight.edge-bottom { padding-bottom: 140px; }
.cta-in { padding-bottom: 140px; }
.demo-s { overflow: hidden; }
.demo-stage { position: relative; max-width: 960px; margin: 0 auto; }
.demo-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 130%; height: 170%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 18%, transparent), transparent); pointer-events: none; }
.demo-stage .demo { position: relative; }
.sec-panel { padding: 56px 48px; border-radius: 28px; background: var(--bg); color: var(--ink); }
@media (max-width: 640px) {
  .edge-bottom { --edge-w: 260px; --edge-h: 58px; }
  .hero-s.edge-bottom { padding-bottom: 44px; }
  main section.sec-tight.edge-bottom { padding-bottom: 88px; }
  .sec-panel { padding: 36px 20px; border-radius: 22px; }
}
.hr-base path { fill: none; stroke: var(--link); stroke-opacity: .16; stroke-width: 1.2; }
.hr-pulse path { fill: none; stroke: #6FA8FF; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 70 2100; stroke-dashoffset: 70; animation: ribbonFlow var(--t, 6s) linear infinite; animation-delay: var(--dl, 0s); }
.hr-pulse path.rev { animation-direction: reverse; }
@keyframes ribbonFlow { to { stroke-dashoffset: -2100; } }
.ticker-track { animation-duration: 90s; }

/* Sections: less vertical space */
main section, .sec { padding: 84px 0; }
main section.sec-tight { padding: 72px 0; }
.section-head { margin-bottom: 36px; }
.frows { gap: 88px; }
.site-footer { padding: 56px 0 28px; }
.foot-bottom { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); }

/* Calmer scroll reveals */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 1.1s var(--ease), transform 1.25s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.rv.in { opacity: 1; transform: none; }
.page-hero h1, .page-hero .lead, .page-hero .actions { animation-duration: 1.1s; }

/* Orbits: ellipses with upright labels (positioned by motion.js) */
.orbit-view { position: relative; width: 100%; }
.o-paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o-paths ellipse { fill: none; stroke: color-mix(in srgb, var(--link) 34%, transparent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.o-paths ellipse:nth-child(2) { stroke-dasharray: 3 7; }
.o-item, .o-dot { position: absolute; left: 0; top: 0; z-index: 3; will-change: transform; transition: opacity .6s ease; }
.orbit-view:not(.ready) .o-item, .orbit-view:not(.ready) .o-dot { opacity: 0; }
.o-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .8rem; font-weight: 600; padding: 6px 11px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--ink); box-shadow: 0 10px 24px -16px rgba(0,0,0,.6); }
[data-theme="dark"] .o-item { background: #0E1B3B; }
.s-light .o-item { background: #fff; }
.o-item b { font-family: var(--mono); color: var(--link); }
.o-item .glyph { width: 16px; height: auto; color: var(--link); flex: none; }
.o-item.back { opacity: .5; }
.o-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--link); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 20%, transparent); }
.o-dot.ok { background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 20%, transparent); }
.o-dot.back { opacity: .35; }
.o-core { position: absolute; left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 18px 28px rgba(0,0,0,.45)); }
.o-plate { position: relative; aspect-ratio: 240 / 140; display: grid; place-items: center; padding-top: 9%; background: linear-gradient(165deg, #15295A, #0B1734); -webkit-mask: url("cloud-shape.svg") center / 100% 100% no-repeat; mask: url("cloud-shape.svg") center / 100% 100% no-repeat; }
.o-plate img { width: 50%; }
.o-halo { position: absolute; left: 50%; top: 55%; width: 170%; aspect-ratio: 2.4; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--blue) 26%, transparent), transparent); animation: halo 7s ease-in-out infinite; z-index: -1; }
@keyframes halo { 50% { transform: translate(-50%, -50%) scale(1.12); opacity: .7; } }
.o-home { max-width: 620px; margin: 0 auto; }
.orbit-split { gap: 48px; }

/* Product tiles: compact, cloud node in the middle */
.tiles { gap: 24px; }
.t-art { border-radius: 20px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; margin-bottom: 18px; }
.t-art .o-item { font-size: .72rem; padding: 4px 9px; border-radius: 8px; }
.t-node { position: absolute; left: 50%; top: 50%; width: 21%; transform: translate(-50%, -50%); z-index: 2; filter: drop-shadow(0 12px 20px rgba(0,60,180,.35)); }
.t-cloud { aspect-ratio: 240 / 140; display: grid; place-items: center; padding-top: 12%; background: var(--blue); color: #fff; -webkit-mask: url("cloud-shape.svg") center / 100% 100% no-repeat; mask: url("cloud-shape.svg") center / 100% 100% no-repeat; }
.t-cloud svg { width: 32%; height: auto; }
.t-art.soon .t-cloud { background: #475775; }
.t-art.soon .t-node { filter: none; }
.tile h3 { margin-bottom: 2px; }
.tile-sub { font-size: .9rem; font-weight: 600; color: var(--link) !important; margin: 0 0 8px !important; }
.tile p { margin-bottom: 10px; }

/* How it works: four steps in a row */
.how-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 30px; }
.how-head h2 { margin: 0; }
.how-head p { margin: 0; color: var(--ink2); font-size: 1.08rem; }
.flow4-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 0; background: none; border: 0; box-shadow: none; }
[data-theme="dark"] .flow4-row { background: none; }
.flow4-row::before { content: ""; position: absolute; left: 4%; right: 4%; top: 39px; height: 2px; background: linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); z-index: 0; }
.flow4-row::after { content: ""; position: absolute; top: 36px; left: 4%; width: 8px; height: 8px; border-radius: 50%; background: var(--link); animation: stepDot 10.4s linear infinite; z-index: 0; }
@keyframes stepDot { from { left: 4%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } to { left: 96%; opacity: 0; } }
.flow4-row .f4 { display: block; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; z-index: 1; transition: background .6s, border-color .6s; }
.flow4-row .f4::after { display: none; }
.flow4-row .f4-n { margin-bottom: 14px; }
.flow4-row .f4.active { background: color-mix(in srgb, var(--blue) 12%, var(--panel)); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.flow4-row .f4 b { font-size: 1.02rem; }
.flow4-row .f4 p { font-size: .9rem; margin-top: 4px; }
.flow4-note { text-align: left; margin: 16px 0 0; font-size: .85rem; }

/* Tabbed code window */
.win-bar[role="tablist"] { gap: 0; }
.win-tab { background: none; border: 0; border-right: 1px solid var(--code-line); padding: 11px 16px; color: var(--code-muted); font: 500 .74rem var(--mono); cursor: pointer; }
.win-tab:hover { color: var(--code-ink); }
.win-tab[aria-selected="true"] { color: var(--code-ink); background: rgba(255,255,255,.04); box-shadow: inset 0 -2px 0 var(--blue); }
.win-note { margin: 0; padding: 0 16px 12px; font-size: .7rem; color: var(--code-muted); text-align: right; font-family: var(--font); }
.win [role="tabpanel"] { min-height: 236px; }

/* Expandable details */
details.more { margin-top: 14px; }
details.more summary, .doc-more summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 8px; }
details.more summary::-webkit-details-marker, .doc-more summary::-webkit-details-marker { display: none; }
details.more summary::after, .doc-more summary::after { content: "+"; font-size: 1.2rem; font-weight: 400; transition: transform .3s; }
details.more[open] summary::after, .doc-more[open] summary::after { transform: rotate(45deg); }
details.more p { margin-top: 10px; font-size: .95rem; color: var(--muted); }
.doc-more summary { padding: 18px 0 10px; }
.doc-more[open] summary { font-size: 0; }
.doc-more[open] summary::before { content: "Show fewer"; font-size: .95rem; }
.doc-more[open] summary::after { font-size: 1.2rem; }
.doc-split .doc { padding: 20px 0; }

/* Pricing packages */
.pkg-how { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pkg-how li { display: flex; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.pkg-how li > span { flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; }
.pkg-how b { display: block; }
.pkg-how p { margin: 2px 0 0; color: var(--ink2); font-size: .92rem; }
.ptabs { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 20px; max-width: 100%; overflow-x: auto; }
.ptab { border: 0; background: none; color: var(--ink2); font: 600 .95rem var(--font); padding: 10px 18px; border-radius: 9px; cursor: pointer; white-space: nowrap; min-height: 44px; }
.ptab[aria-selected="true"] { background: var(--blue); color: #fff; }
.ppanel-head p { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--ink2); margin: 0 0 16px; }
.ppanel-head b { color: var(--ink); }
.price-card h3 { margin: 0 0 4px; }
.price-card .price { font-size: 1.2rem; margin: 18px 0 2px; }
.price-card.featured { box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 45%, transparent); }

/* Form messages */
.err-msg { margin: 4px 0 0; font-size: .82rem; color: #FF8A80; }
.signup + .err-msg { margin-top: 8px; }
[aria-invalid="true"] { border-color: #FF8A80 !important; }
.form-status { margin: 14px 0 0; font-size: .9rem; color: var(--ink2); }
.form-status.warn { color: #FFC56E; }
.hero-s .form-status, .hero-s .err-msg { text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  main section, .sec { padding: 64px 0; }
  main section.sec-tight { padding: 56px 0; }
  .frows { gap: 64px; }
  .hero-stage .hero-circle { width: 1200px; height: 1200px; top: -80px; }
  .how-head { grid-template-columns: 1fr; gap: 12px; }
  .flow4-row { grid-template-columns: 1fr 1fr; }
  .flow4-row::before, .flow4-row::after { display: none; }
  .pkg-how { grid-template-columns: 1fr; gap: 10px; margin-bottom: 28px; }
  .orbit-split { gap: 24px; }
  .page-hero { padding: 64px 0 52px; }
}
@media (max-width: 640px) {
  .hero-s { padding-top: 52px; }
  .hero-stage { margin-top: 56px; }
  .hero-stage .hero-circle { width: 980px; height: 980px; top: -60px; }
  .hero-ribbons { width: 1100px; }
  .demo-pane pre { max-height: 138px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
  main section, .sec { padding: 52px 0; }
  main section.sec-tight { padding: 44px 0; }
  .section-head { margin-bottom: 26px; }
  .frows { gap: 52px; }
  .tiles { gap: 28px; }
  .t-art { margin-bottom: 12px; }
  .flow4-row { grid-template-columns: 1fr; gap: 10px; }
  .flow4-row .f4 { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 14px; }
  .flow4-row .f4-n { margin: 0; width: 34px; height: 34px; }
  .o-item { font-size: .66rem; padding: 4px 8px; gap: 5px; }
  .o-item .glyph { width: 12px; }
  .o-core { width: 28%; }
  .vis { min-height: 0; padding: 16px; }
  .win [role="tabpanel"] { min-height: 0; }
  .cta-s { padding-top: 96px; }
  .cta-circle { width: 1100px; height: 1100px; }
  .cta-in { padding: 64px 0 80px; }
  .page-hero { padding: 48px 0 40px; }
  .page-hero .ph-arc { width: 360px; right: -170px; top: 30px; opacity: .55; }
  .ptab { padding: 10px 14px; font-size: .9rem; }
  .site-footer { padding: 44px 0 24px; }
  .foot-grid { gap: 24px 16px; }
  .foot-col ul { gap: 8px; }
}
@media (max-width: 380px) {
  h1 { font-size: 2.3rem; }
  .container { padding: 0 14px; }
}
@media (max-width: 640px) { .cta-in { padding-top: 120px; } .cta-in h2 { font-size: 2rem; } }
@media (max-width: 640px) { .page-hero .ph-arc { width: 190px; right: -48px; top: 6px; opacity: .45; } }
/* Hero cloud: the cloud keeps its shape at --cw, and on screens wider than that a low band of
   puffs (cloud-band.svg, repeated sideways) carries it to both edges, so it never ends in a hard cut. */
.hero-stage .hero-circle {
  --cw: 1500px;
  width: max(var(--cw), 100vw); height: var(--cw); top: -140px;
  -webkit-mask: url("cloud-hero.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .3) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x;
  mask: url("cloud-hero.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .3) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x;
}
@media (max-width: 960px) { .hero-stage .hero-circle { --cw: 1200px; top: -120px; } }
@media (max-width: 640px) { .hero-stage .hero-circle { --cw: 980px; top: -100px; } .hero-stage { margin-top: 84px; } }
/* Closing cloud: same idea as the hero. It is wider than the screen (130vw) so it still covers both
   edges while it grows from 80% to full size on scroll. */
.cta-s .cta-circle {
  --cw: 1700px;
  width: max(var(--cw), 130vw); height: var(--cw); top: 40px;
  -webkit-mask: url("cloud-wide.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .25) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x;
  mask: url("cloud-wide.svg") center top / calc(var(--cw) * 2) var(--cw) no-repeat, url("cloud-band.svg") center calc(var(--cw) * .25) / calc(var(--cw) * .6) calc(var(--cw) * .7) repeat-x;
}
@media (max-width: 640px) { .cta-s .cta-circle { --cw: 1100px; } }

/* Product boxes: one card per product, readable text */
.tile-box { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; color: var(--ink); transition: border-color .3s, transform .4s var(--ease), box-shadow .4s; box-shadow: 0 18px 40px -30px rgba(10,20,50,.45); }
.tile-box:hover { text-decoration: none; transform: translateY(-3px); border-color: color-mix(in srgb, var(--blue) 50%, transparent); box-shadow: 0 26px 50px -30px rgba(0,60,180,.45); }
.s-light .tile-box { background: #fff; }
.tile-box .t-art { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--panel); }
.tile-box .tile-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tile-head h3 { font-size: 1.45rem; margin: 0; }
.tile-box .tile-sub { font-size: .95rem; font-weight: 600; color: var(--link) !important; margin: 4px 0 12px !important; }
.tile-desc { font-size: 1.02rem; line-height: 1.6; color: var(--ink) !important; margin: 0 0 16px !important; }
.tile-box .tile-for { font-size: .92rem; line-height: 1.5; color: var(--ink2); padding: 12px 14px; border-radius: 12px; background: var(--panel); margin-bottom: 18px; }
.tile-box .tile-for span { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.tile-cta { margin-top: auto; font-weight: 600; color: var(--link); display: inline-flex; align-items: center; gap: 6px; }
.tile-cta i { font-style: normal; transition: transform .3s var(--ease); }
.tile-box:hover .tile-cta i { transform: translateX(4px); }
@media (max-width: 640px) { .tile-box .tile-body { padding: 18px 18px 20px; } .tile-head h3 { font-size: 1.3rem; } .tiles { gap: 18px; } }
.site-header, .site-header.scrolled { background: rgba(5, 11, 26, .97); }

/* ---------- TradeFlo: how it works diagram ---------- */
.tf { display: grid; grid-template-columns: minmax(170px, 210px) 56px minmax(0, 1fr) 56px minmax(170px, 210px); align-items: center; }
.tf ul { list-style: none; margin: 0; padding: 0; }
.tf small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; }
.tf-side { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; box-shadow: 0 18px 40px -30px rgba(10,20,50,.45); }
.tf-side h3 { font-size: .95rem; margin: 0 0 12px; }
.tf-side ul { display: grid; gap: 10px; }
.tf-conn { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid transparent; transition: background .5s var(--ease), border-color .5s var(--ease); }
.tf-conn b { font-size: .95rem; }
.tf-conn.on { background: color-mix(in srgb, var(--blue) 9%, #fff); border-color: color-mix(in srgb, var(--blue) 45%, transparent); }
.tf-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--blue) 12%, transparent); transition: background .5s var(--ease), color .15s; }
.tf-ico svg { width: 20px; height: 20px; }
.tf-conn.on .tf-ico { background: var(--blue); color: #fff; }

.tf-wire { position: relative; align-self: center; height: 24px; }
.tf-line { position: absolute; left: 6px; right: 10px; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--blue) 35%, transparent); }
.tf-line::after { content: ""; position: absolute; right: -8px; top: -4px; border: 5px solid transparent; border-left: 7px solid color-mix(in srgb, var(--blue) 60%, transparent); }
.tf-wire i { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); opacity: 0; animation: tfDot 2.4s linear infinite; }
.tf-wire i:nth-of-type(2) { animation-delay: .8s; }
.tf-wire i:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes tfDot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: calc(100% - 12px); opacity: 0; } }

.tf-engine { position: relative; padding: 28% 22px 22px; color: #fff; }
.tf-cloud { position: absolute; inset: 0; background: var(--blue); border-radius: 0 0 28px 28px; -webkit-mask: url("cloud-panel.svg") center top / 100% auto no-repeat; mask: url("cloud-panel.svg") center top / 100% auto no-repeat; }
.tf-head { position: absolute; left: 0; right: 0; top: 0; padding-top: 9.5%; text-align: center; }
.tf-head b { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.tf-head small { color: rgba(255,255,255,.82); font-size: .8rem; margin-top: 4px; }
.tf-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.tf-list { background: #fff; color: #0A1122; border-radius: 16px; padding: 12px; box-shadow: 0 20px 40px -24px rgba(0,20,80,.6); }
.tf-cap { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: #6B7488; margin: 2px 6px 8px; }
.tf-list ul { display: grid; gap: 4px; }
.tf-list li { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; transition: background .5s var(--ease); }
.tf-list li b { font-size: .9rem; }
.tf-list li small { color: #6B7488; font-size: .74rem; }
.tf-tag { flex: none; min-width: 44px; text-align: center; font-family: var(--mono); font-size: .7rem; font-weight: 700; padding: 5px 6px; border-radius: 7px; color: #0057D1; background: color-mix(in srgb, var(--blue) 10%, #fff); transition: background .5s var(--ease), color .15s; }
.tf-list li.on { background: color-mix(in srgb, var(--blue) 9%, #fff); }
.tf-list li.on .tf-tag { background: var(--blue); color: #fff; }

.tf-core { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tf-disc { position: relative; width: 82px; height: 82px; border-radius: 50%; background: #fff; color: var(--blue); display: grid; place-items: center; box-shadow: 0 16px 30px -12px rgba(0,20,80,.55); }
.tf-cico svg { width: 30px; height: 30px; display: block; }
.tf-ring { position: absolute; inset: -9px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.65); animation: tfSpin 16s linear infinite; }
@keyframes tfSpin { to { transform: rotate(360deg); } }
.tf.go .tf-disc { animation: tfGlow 1.1s var(--ease); }
@keyframes tfGlow { 40% { box-shadow: 0 0 0 10px rgba(255,255,255,.28), 0 16px 30px -12px rgba(0,20,80,.55); } }
.tf-pair { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(0,0,0,.2); white-space: nowrap; }
.tf-pair i { font-style: normal; opacity: .7; }
.tf-say { position: relative; text-align: center; margin: 18px auto 0; max-width: 520px; font-size: .98rem; color: #fff; min-height: 1.5em; transition: opacity .35s var(--ease); }
.tf-say.fade { opacity: 0; }

.tf-feats { list-style: none; margin: 44px 0 0; padding: 26px 8px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; }
.tf-feats li { text-align: center; padding: 0 16px; border-left: 1px solid var(--line); }
.tf-feats li:first-child { border-left: 0; }
.tf-fico { width: 40px; height: 40px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--blue) 11%, transparent); }
.tf-fico svg { width: 20px; height: 20px; }
.tf-feats b { display: block; font-size: .98rem; margin: 12px 0 4px; }
.tf-feats li > span:last-child { display: block; font-size: .88rem; line-height: 1.45; color: var(--ink2); }
.tf-note { text-align: center; font-size: .8rem; color: var(--muted); margin: 16px 0 0; }

@media (max-width: 1080px) {
  .tf { grid-template-columns: 1fr; max-width: 680px; margin: 0 auto; }
  .tf-side ul { grid-template-columns: 1fr 1fr; }
  .tf-wire { height: 46px; }
  .tf-line { left: 50%; right: auto; top: 4px; bottom: 10px; width: 2px; height: auto; margin: 0 0 0 -1px; }
  .tf-line::after { right: auto; left: -4px; top: auto; bottom: -8px; border: 5px solid transparent; border-top: 7px solid color-mix(in srgb, var(--blue) 60%, transparent); }
  .tf-wire i { left: 50%; margin: 0 0 0 -4px; animation-name: tfDotV; }
  .tf-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 26px; }
  .tf-feats li:nth-child(4) { border-left: 0; }
}
@keyframes tfDotV { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { top: calc(100% - 12px); opacity: 0; } }
@media (max-width: 640px) {
  .tf-side { padding: 14px; }
  .tf-side ul { gap: 8px; }
  .tf-conn { padding: 10px; gap: 10px; }
  .tf-conn small { display: none; }
  .tf-ico { width: 32px; height: 32px; }
  .tf-engine { padding: 30% 12px 16px; }
  .tf-head { padding-top: 8%; }
  .tf-head b { font-size: 1.25rem; }
  .tf-head small { font-size: .7rem; }
  .tf-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tf-core { grid-column: 1 / -1; order: -1; flex-direction: row; justify-content: center; gap: 18px; padding: 4px 0 6px; }
  .tf-disc { width: 58px; height: 58px; }
  .tf-cico svg { width: 24px; height: 24px; }
  .tf-ring { inset: -7px; }
  .tf-list { padding: 8px; border-radius: 14px; }
  .tf-cap { margin: 2px 4px 6px; font-size: .62rem; }
  .tf-list li { padding: 6px; gap: 8px; }
  .tf-list li small { display: none; }
  .tf-list li b { font-size: .82rem; }
  .tf-tag { min-width: 36px; font-size: .64rem; padding: 4px; }
  .tf-say { font-size: .9rem; margin-top: 14px; }
  .tf-feats { grid-template-columns: 1fr; padding: 8px 18px; margin-top: 32px; row-gap: 0; }
  .tf-feats li { display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; text-align: left; padding: 14px 0; border-left: 0; border-top: 1px solid var(--line); }
  .tf-feats li:first-child { border-top: 0; }
  .tf-fico { grid-row: span 2; margin: 2px 0 0; }
  .tf-feats b { margin: 0 0 2px; }
}

/* CareFlo diagram extras: partner lists, transaction tiles, compact format lists */
.tf-side .tf-cap { margin: 16px 4px 6px; }
.tf-side .tf-parts { gap: 2px; }
.tf-parts li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; font-size: .88rem; font-weight: 600; line-height: 1.25; transition: background .5s var(--ease); }
.tf-pico { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--link); background: color-mix(in srgb, var(--blue) 10%, transparent); transition: background .5s var(--ease), color .15s; }
.tf-pico svg { width: 16px; height: 16px; }
.tf-parts li.on { background: color-mix(in srgb, var(--blue) 9%, #fff); }
.tf-parts li.on .tf-pico { background: var(--blue); color: #fff; }
.tf-txns { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.tf-txn { text-align: center; padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); transition: background .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease), color .15s; }
.tf-txn b { display: block; font-family: var(--mono); font-size: 1.35rem; font-weight: 700; line-height: 1.1; transition: color .15s; }
.tf-txn span { display: block; font-size: .8rem; font-weight: 600; margin-top: 5px; line-height: 1.25; }
.tf .tf-txn small { color: rgba(255,255,255,.75); font-size: .7rem; margin-top: 3px; }
.tf-txn.on { background: #fff; border-color: #fff; color: #0A1122; box-shadow: 0 16px 30px -14px rgba(0,20,80,.6); }
.tf-txn.on b { color: var(--blue); }
.tf .tf-txn.on small { color: #6B7488; }
.tf-compact ul { grid-template-columns: 1fr 1fr; }
.tf-compact li { padding: 6px; gap: 8px; }
.tf-compact .tf-tag { min-width: 38px; }
.tf-compact li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 1180px) and (min-width: 1081px) { .tf .tf-txn small { display: none; } }
@media (max-width: 640px) {
  .tf-txns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 12px; }
  .tf-txn { flex: 0 0 calc((100% - 12px) / 3); padding: 8px 4px; border-radius: 12px; }
  .tf .tf-txn small { display: none; }
  .tf-txn b { font-size: 1.05rem; }
  .tf-txn span { font-size: .7rem; margin-top: 3px; }
  .tf-compact ul { grid-template-columns: 1fr; }
  .tf-side .tf-cap { margin: 12px 2px 4px; }
  .tf-parts li { font-size: .78rem; gap: 8px; padding: 5px 6px; }
  .tf-pico { width: 24px; height: 24px; }
  .tf-pico svg { width: 14px; height: 14px; }
}

/* ---------- Product colours ----------
   Each product has one vivid brand colour, as strong as the logo blue (#006BFD):
   TradeFlo green, CareFlo blue (the logo blue itself), HealthFlo red (inspired by Apple Health).
   --s-*: the brand colour. Used for "Flo" in the product name and for icons and illustrations,
          like "Flo" in the NexFlo logo. The green is one step deeper on light surfaces so it doesn't wash out.
   --c-*: the same hue for small text (subtitles, links). Slightly deeper on light surfaces and
          brighter on dark ones, so it stays readable.
   .p-trade / .p-care / .p-health set --ps (brand) and --pc (small text) for everything inside them. */
:root, .s-light { --s-trade: #00A85C; --s-care: #006BFD; --s-health: #FF2D55; --c-trade: #008443; --c-care: #006BFD; --c-health: #E0103A; }
[data-theme="dark"] { --s-trade: #00C26A; --s-care: #006BFD; --s-health: #FF2D55; --c-trade: #00D46F; --c-care: #2F86FF; --c-health: #FF2D55; }
.s-light, [data-theme="dark"] .s-light { --s-trade: #00A85C; --s-care: #006BFD; --s-health: #FF2D55; --c-trade: #008443; --c-care: #006BFD; --c-health: #E0103A; }
.p-trade { --pc: var(--c-trade); --ps: var(--s-trade); }
.p-care { --pc: var(--c-care); --ps: var(--s-care); }
.p-health { --pc: var(--c-health); --ps: var(--s-health); }

/* Product names: "Flo" in the product colour, the first part in the surrounding text colour
   (near-black on light surfaces, white on dark ones). */
.pname { white-space: nowrap; }
.pname .pn-a { color: inherit; }
.pname .pn-b { color: var(--ps); }
/* On blue surfaces a coloured "Flo" would clash or vanish, so the name stays one colour there. */
.hero-strip .pname span, .cta-in .pname span, .s-accent .pname span, .cta2-box .pname span, .tf-say .pname span,
.vis-blue .pname span, .btn .pname span, .ptab[aria-selected="true"] .pname span { color: inherit !important; }

/* Homepage product cards */
.tile-box .tile-sub { color: var(--pc, var(--link)) !important; }
.tile-cta { color: var(--pc, var(--link)); }
.tile-box[class*="p-"]:hover { border-color: color-mix(in srgb, var(--ps) 45%, transparent); box-shadow: 0 26px 50px -30px color-mix(in srgb, var(--ps) 55%, transparent); }
.tile-box[class*="p-"] .t-cloud, .tile-box[class*="p-"] .t-art.soon .t-cloud { background: var(--ps); }
.tile-box[class*="p-"] .t-node, .tile-box[class*="p-"] .t-art.soon .t-node { filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--ps) 42%, transparent)); }
.tile-box[class*="p-"] .o-paths ellipse { stroke: color-mix(in srgb, var(--ps) 38%, transparent); }
.tile-box[class*="p-"] .o-dot, .tile-box[class*="p-"] .o-dot.ok { background: var(--ps); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ps) 20%, transparent); }

/* Products page rows */
.prow[class*="p-"]:hover { border-color: color-mix(in srgb, var(--ps) 55%, transparent); }
.prow[class*="p-"]:hover .prow-go { color: var(--pc); }

/* Product pages: feature icons take the product colour */
.p-scope .feature .icon { background: var(--ps); }

/* Diagrams: the name sits on a white chip on the blue cloud */
.tf-head .tf-mark { display: inline-block; padding: 5px 16px 6px; border-radius: 999px; background: #fff; color: #0A1122; box-shadow: 0 12px 26px -14px rgba(0,20,80,.6); --s-trade: #00A85C; }
.tf-head small { margin-top: 8px; }

/* Reduce Motion: calmer, not frozen. Nothing slides, zooms or grows; things fade in where they are,
   orbits and flowing lines run at half speed, and content that changes in place (the order demo, typing,
   chat, dashboard) runs as normal. Kept last so these keyframes replace the ones above. */
@media (prefers-reduced-motion: reduce) {
  @keyframes rise { from { opacity: 0; } }
  @keyframes circleIn { from { opacity: 0; } }
  @keyframes phIn { from { opacity: 0; } }
  @keyframes rowIn { from { opacity: 0; background: color-mix(in srgb, var(--blue) 12%, transparent); } }
  .rv { transform: none; transition: opacity 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
  .t-orb, .t-orb span { animation-duration: 28s; }
  .ring, .node-in { animation-duration: calc(var(--d) * 2); }
  .hr-pulse path { animation-duration: calc(var(--t, 6s) * 2); }
  .hl-pulse path { animation-duration: calc(var(--t, 4.5s) * 2); }
  .ticker-track { animation-duration: 180s; }
  .flow4-row::after { animation-duration: 20.8s; }
  .o-halo, .orbit-core::after { animation: none; }
  .tf-wire i { animation-duration: 4.8s; }
  .tf-wire i:nth-of-type(2) { animation-delay: 1.6s; }
  .tf-wire i:nth-of-type(3) { animation-delay: 3.2s; }
  .tf-ring { animation-duration: 32s; }
  .tile-box:hover, .tile-box:hover .tile-cta i { transform: none; }
}