/* =========================
   Variables
========================= */
:root {
    color-scheme: dark;
    --bg-primary: #070b16;
    --bg-secondary: #0b1120;
    --surface: #0f172a;
    --surface-light: #131d33;
    --text-primary: #f8fafc;
    --text-secondary: #9aa9bd;
    --text-dim: #718096;
    --accent-blue: #3b82f6;
    --accent-cyan: #22d3ee;
    --accent-indigo: #7274ff;
    --border: rgba(148, 163, 184, .14);
    --border-bright: rgba(148, 163, 184, .24);
    --container: 1200px;
    --radius: 18px;
}

/* =========================
   Reset
========================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: #fff; background: rgba(59, 130, 246, .5); }
:focus-visible { outline: 2px solid #67c9ff; outline-offset: 4px; }

/* =========================
   Typography & layout
========================= */
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section-pad { padding-block: 110px; }
.section-tint { background: linear-gradient(180deg, rgba(13, 21, 39, .64), rgba(10, 16, 31, .8)); border-block: 1px solid rgba(148, 163, 184, .06); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.045em; }
h1 { margin-bottom: 23px; font-size: clamp(3.15rem, 6.1vw, 5.45rem); line-height: 1.04; font-weight: 700; }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.7vw, 3.15rem); line-height: 1.13; font-weight: 650; }
h3 { margin-bottom: 12px; font-size: 1.15rem; line-height: 1.35; }
p { color: var(--text-secondary); }
.text-gradient { color: #76aaff; background: linear-gradient(100deg, #f6fbff 0%, #83c8ff 40%, #8b8cff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 17px; color: #84bfff; font-size: .72rem; font-weight: 700; letter-spacing: .13em; line-height: 1.4; text-transform: uppercase; }
.section-heading { max-width: 660px; margin-bottom: 46px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.section-heading h2 { margin-bottom: 15px; }
.section-heading p { max-width: 580px; margin-bottom: 0; }
.section-heading.centered p { margin-inline: auto; }
.skip-link { position: absolute; z-index: 100; top: -60px; left: 16px; padding: 10px 16px; border-radius: 8px; background: #fff; color: #07101f; }
.skip-link:focus { top: 10px; }
.status-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #48d8a0; box-shadow: 0 0 12px rgba(72, 216, 160, .5); }
.demo-disclaimer { margin: 21px 0 0; color: #77869a; font-size: .75rem; text-align: center; }

/* =========================
   Buttons
========================= */
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 11px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font-size: .9rem; font-weight: 600; transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: #fff; background: linear-gradient(110deg, #3478ee, #5358e9); box-shadow: 0 8px 24px rgba(54, 104, 231, .2), inset 0 1px rgba(255, 255, 255, .18); }
.button-primary:hover { background: linear-gradient(110deg, #4689ff, #696bf4); box-shadow: 0 12px 30px rgba(54, 104, 231, .34); }
.button-secondary { border-color: var(--border-bright); background: rgba(255, 255, 255, .025); color: #e1e8f2; }
.button-secondary:hover { border-color: rgba(117, 167, 255, .55); background: rgba(73, 117, 205, .1); }
.button-small { min-height: 39px; padding-inline: 15px; border-radius: 8px; font-size: .8rem; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 7px; color: #a9caff; font-size: .9rem; font-weight: 600; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

/* =========================
   Navigation
========================= */
.site-header { position: sticky; z-index: 50; top: 0; height: 76px; border-bottom: 1px solid transparent; background: rgba(7, 11, 22, .76); backdrop-filter: blur(0); transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.site-header.scrolled { border-color: var(--border); background: rgba(7, 11, 22, .9); backdrop-filter: blur(18px); }
.nav-shell { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #f8fafc; font-size: 1.18rem; font-weight: 700; letter-spacing: -.055em; }
.brand-mark { width: 34px; height: 34px; }
.brand-accent { color: #9bbaff; }
.nav-content, .nav-links, .nav-actions { display: flex; align-items: center; }
.nav-content { flex: 1; justify-content: space-between; margin-left: 65px; }
.nav-links { gap: 33px; }
.nav-links a, .nav-contact { color: #aab5c6; font-size: .82rem; font-weight: 500; transition: color .2s ease; }
.nav-links a:hover, .nav-contact:hover { color: #fff; }
.nav-actions { gap: 24px; }
.menu-toggle { display: none; }

/* =========================
   Hero
========================= */
.hero { position: relative; overflow: hidden; min-height: 790px; padding: 94px 0 86px; background-color: #080d1b; background-image: linear-gradient(rgba(129, 163, 222, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(129, 163, 222, .035) 1px, transparent 1px), radial-gradient(ellipse at 51% 38%, rgba(29, 72, 153, .16), transparent 53%); background-size: 56px 56px, 56px 56px, auto; }
.hero-inner { position: relative; z-index: 1; }
.hero-copy { max-width: 850px; margin-inline: auto; text-align: center; }
.hero-copy .eyebrow { padding: 8px 13px; border: 1px solid rgba(119, 157, 227, .2); border-radius: 30px; background: rgba(29, 55, 104, .18); }
.hero-copy h1 { max-width: 840px; margin-inline: auto; font-size: clamp(3.2rem, 6.2vw, 5.3rem); }
.hero-lede { max-width: 710px; margin: 0 auto; font-size: 1.08rem; line-height: 1.8; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.hero-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 21px 0 0; color: #8e9db2; font-size: .78rem; }
.mini-check { color: #5ce0b0; }
.hero-visual { position: relative; max-width: 910px; margin: 65px auto -174px; perspective: 1200px; }
.hero-visual .dashboard-frame { transform: rotateX(2deg); }
.hero-orb { position: absolute; width: 340px; height: 340px; border-radius: 50%; filter: blur(100px); pointer-events: none; }
.hero-orb-one { top: 13%; left: -200px; background: rgba(35, 87, 211, .13); }
.hero-orb-two { right: -210px; bottom: 10%; background: rgba(102, 66, 206, .12); }

/* =========================
   Dashboard
========================= */
.dashboard-frame { overflow: hidden; border: 1px solid rgba(157, 180, 222, .22); border-radius: 15px; background: #0c1322; box-shadow: 0 35px 90px rgba(0, 0, 0, .48), 0 0 70px rgba(60, 107, 200, .1); text-align: left; }
.dashboard-top { display: flex; height: 45px; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid rgba(153, 174, 210, .12); background: rgba(19, 29, 49, .65); color: #d3dbea; font-size: .71rem; font-weight: 600; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #536278; }
.window-dots i:first-child { background: #ed776e; }.window-dots i:nth-child(2) { background: #e6b765; }.window-dots i:nth-child(3) { background: #67c58c; }
.demo-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid rgba(94, 216, 173, .15); border-radius: 20px; background: rgba(68, 186, 144, .08); color: #80dab5; font-size: .58rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.dashboard-content { padding: 23px 26px 14px; }
.dashboard-greeting { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.dashboard-greeting small, .metric-card small, .chart-head small { display: block; color: #7889a3; font-size: .56rem; font-weight: 700; letter-spacing: .1em; }
.dashboard-greeting h2 { margin: 5px 0 0; font-size: 1rem; letter-spacing: -.02em; }
.dashboard-greeting h2 span { color: #8ba5ff; }
.avatar { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: linear-gradient(145deg, #2b4d86, #3d3c83); color: #d4e2ff; font-size: .58rem; font-weight: 700; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.metric-card { min-width: 0; padding: 12px 12px 10px; border: 1px solid rgba(147, 166, 202, .12); border-radius: 9px; background: rgba(19, 29, 49, .58); }
.metric-card strong { display: block; margin: 4px 0 3px; color: #edf3ff; font-size: 1.1rem; letter-spacing: -.035em; }
.metric-card strong em { color: #8998ad; font-size: .62rem; font-style: normal; font-weight: 500; letter-spacing: 0; }
.metric-card .healthy { color: #72d6a4; font-size: .83rem; letter-spacing: -.02em; }
.metric-foot { display: flex; min-height: 15px; align-items: center; gap: 5px; color: #728198; font-size: .54rem; white-space: nowrap; }
.metric-foot .status-dot { width: 5px; height: 5px; }
.chart-card { margin-top: 11px; padding: 13px 14px 8px; border: 1px solid rgba(147, 166, 202, .12); border-radius: 9px; background: rgba(17, 26, 44, .62); }
.chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.chart-head strong { display: block; margin-top: 2px; font-size: .7rem; font-weight: 600; }
.chart-head > span { color: #8c9ab0; font-size: .56rem; }
.chart-area { display: flex; gap: 10px; height: 105px; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 14px; color: #63738a; font-size: .5rem; }
.chart-graph { position: relative; flex: 1; }
.chart-grid-lines { position: absolute; inset: 0 0 14px; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid-lines i { display: block; border-top: 1px dashed rgba(140, 161, 198, .1); }
.chart-graph svg { position: absolute; inset: 0 0 14px; width: 100%; height: calc(100% - 14px); overflow: visible; }
.chart-fill { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: #5a9aff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(72, 143, 255, .5)); stroke-dasharray: 700; stroke-dashoffset: 700; animation: chart-draw 1.6s .3s ease forwards; }
.chart-x { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #63738a; font-size: .5rem; }
.dashboard-bottom { display: flex; justify-content: space-between; padding-top: 11px; color: #718198; font-size: .55rem; }
.dashboard-bottom span:first-child { display: flex; align-items: center; gap: 6px; }
.dashboard-bottom .status-dot { width: 5px; height: 5px; }
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

/* =========================
   Ecosystem & features
========================= */
.ecosystem { padding-top: 220px; }
.ecosystem-row { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 80px; }
.ecosystem-row h2 { margin-bottom: 12px; font-size: 1.65rem; }
.ecosystem-row p { max-width: 420px; margin-bottom: 0; font-size: .88rem; }
.tech-cloud { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.tech-cloud span { padding: 9px 14px; border: 1px solid var(--border); border-radius: 9px; background: rgba(18, 27, 46, .53); color: #bac6d8; font-size: .76rem; transition: border-color .2s ease, color .2s ease; }
.tech-cloud span:hover { border-color: rgba(103, 157, 255, .5); color: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.feature-grid.three { grid-template-columns: repeat(3, 1fr); }
.feature-grid.compact { margin-top: 30px; }
.feature-card, .principle-card { position: relative; overflow: hidden; min-height: 245px; padding: 25px 23px; border: 1px solid var(--border); border-radius: 14px; background: linear-gradient(145deg, rgba(17, 27, 47, .82), rgba(12, 19, 34, .72)); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.feature-card:hover, .principle-card:hover { transform: translateY(-4px); border-color: rgba(103, 152, 239, .33); box-shadow: 0 16px 36px rgba(0, 0, 0, .18); }
.feature-card p, .principle-card p { margin-bottom: 0; font-size: .83rem; line-height: 1.7; }
.icon-tile { display: grid; width: 39px; height: 39px; margin-bottom: 26px; place-items: center; border: 1px solid rgba(107, 153, 240, .21); border-radius: 11px; background: linear-gradient(145deg, rgba(64, 112, 216, .19), rgba(77, 84, 206, .11)); color: #8bc7ff; font-size: 1.15rem; }
.mini-flow { display: flex; align-items: center; gap: 13px; margin-top: 22px; }
.mini-flow i { width: 30px; height: 19px; border: 1px solid rgba(128, 157, 207, .19); border-radius: 4px; background: rgba(29, 47, 77, .55); }
.mini-flow i:nth-child(2) { border-color: rgba(87, 154, 249, .45); }
.mini-flow b { color: #719eff; font-size: .76rem; }
.spark-bars { display: flex; height: 29px; align-items: flex-end; gap: 5px; margin-top: 20px; }
.spark-bars i { width: 14px; height: 55%; border-radius: 3px 3px 0 0; background: linear-gradient(#67c6ff, #536ee6); opacity: .75; }
.spark-bars i:nth-child(2) { height: 78%; }.spark-bars i:nth-child(3) { height: 45%; }.spark-bars i:nth-child(4) { height: 95%; }.spark-bars i:nth-child(5) { height: 67%; }.spark-bars i:nth-child(6) { height: 100%; }
.insight-line { display: flex; align-items: center; gap: 12px; margin-top: 24px; color: #8191a8; font-size: .68rem; }
.insight-line span { color: #586780; letter-spacing: .15em; }.insight-line b { margin-left: auto; color: #78a5ff; font-size: .95rem; }
.principle-card { min-height: 190px; padding: 22px; }
.principle-number { display: block; margin-bottom: 25px; color: #729fff; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }

/* =========================
   Architecture
========================= */
.architecture { display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 28px 22px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, rgba(34, 69, 130, .11), rgba(13, 20, 35, .56)); }
.arch-group { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 8px; }
.arch-label { min-height: 29px; color: #8d9bb0; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.arch-node { padding: 9px 6px; border: 1px solid rgba(137, 161, 201, .14); border-radius: 7px; background: rgba(17, 27, 46, .88); color: #c6d1e1; font-size: .66rem; text-align: center; }
.arch-highlight .arch-label { color: #8db9ff; }
.arch-highlight .arch-node { border-color: rgba(88, 139, 233, .32); background: linear-gradient(140deg, rgba(41, 77, 145, .38), rgba(35, 42, 102, .34)); color: #e0eaff; }
.arch-connector { position: relative; width: 27px; height: 1px; flex: 0 0 27px; background: rgba(108, 158, 238, .34); }
.arch-connector span { position: absolute; top: -2px; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #67c1ff; box-shadow: 0 0 8px #4388ff; animation: data-flow 2.4s ease-in-out infinite; }
.arch-connector:nth-of-type(4) span { animation-delay: .45s; }.arch-connector:nth-of-type(6) span { animation-delay: .9s; }.arch-connector:nth-of-type(8) span { animation-delay: 1.35s; }
@keyframes data-flow { 0%, 100% { left: 0; opacity: .35; } 50% { left: calc(100% - 5px); opacity: 1; } }

/* =========================
   Solutions and CTA
========================= */
.usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }
.usecase-grid article { padding: 28px; border: 1px solid var(--border); border-radius: 13px; background: rgba(15, 23, 42, .54); }
.usecase-grid article > span { color: #719fff; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.usecase-grid h3 { margin: 16px 0 9px; }
.usecase-grid p { max-width: 470px; min-height: 52px; margin-bottom: 20px; font-size: .85rem; }
.usecase-grid a { color: #a9caff; font-size: .77rem; font-weight: 600; }
.usecase-grid a b { margin-left: 6px; }
.cta-panel { position: relative; display: flex; overflow: hidden; align-items: center; justify-content: space-between; gap: 30px; padding: 56px 58px; border: 1px solid rgba(109, 150, 238, .24); border-radius: 19px; background: radial-gradient(ellipse at 12% 0%, rgba(51, 105, 214, .21), transparent 45%), radial-gradient(ellipse at 95% 100%, rgba(87, 65, 186, .19), transparent 46%), #0c1425; }
.cta-panel::after { position: absolute; right: 13%; bottom: -145px; width: 330px; height: 230px; border-radius: 50%; background: rgba(62, 104, 240, .12); content: ""; filter: blur(70px); pointer-events: none; }
.cta-panel > * { position: relative; z-index: 1; }
.cta-panel h2 { max-width: 620px; margin-bottom: 12px; font-size: clamp(1.9rem, 3.1vw, 2.75rem); }
.cta-panel p { max-width: 600px; margin-bottom: 0; }
.cta-actions { display: flex; min-width: 192px; flex-direction: column; align-items: stretch; gap: 10px; }

/* =========================
   Developer & security preview
========================= */
.developer-band { background: linear-gradient(180deg, rgba(7, 11, 22, 0), rgba(11, 18, 34, .7), rgba(7, 11, 22, 0)); }
.developer-preview { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 80px; }
.developer-preview h2, .security-copy h2 { max-width: 450px; }
.developer-preview p, .security-copy p { max-width: 470px; }
.code-window { overflow: hidden; border: 1px solid rgba(137, 159, 201, .2); border-radius: 13px; background: #0b1120; box-shadow: 0 26px 60px rgba(0, 0, 0, .25); text-align: left; }
.code-titlebar { display: flex; min-height: 47px; align-items: center; gap: 16px; padding: 0 14px; border-bottom: 1px solid rgba(144, 164, 198, .13); background: rgba(20, 29, 48, .55); }
.code-tabs { display: flex; align-self: stretch; gap: 17px; margin-left: 8px; }
.code-tab { position: relative; padding: 0; border: 0; background: none; color: #7c8aa1; font-size: .68rem; cursor: pointer; }
.code-tab.active { color: #d7e2f3; }
.code-tab.active::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #6b9cff; content: ""; }
.copy-button { margin-left: auto; padding: 5px 9px; border: 1px solid rgba(145, 164, 197, .2); border-radius: 6px; background: transparent; color: #aebbd0; font-size: .63rem; cursor: pointer; transition: background .2s ease, color .2s ease; }
.copy-button:hover { background: rgba(111, 149, 218, .14); color: #fff; }
.code-block { min-height: 148px; margin: 0; padding: 24px 24px 20px; color: #d2deef; font: .78rem/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.code-comment { color: #71829d; }.code-keyword { color: #8ab5ff; }.code-string { color: #85d6be; }.code-property { color: #8fc6ff; }.code-number { color: #d7a7ff; }
.code-footer { display: flex; justify-content: space-between; padding: 10px 16px; border-top: 1px solid rgba(144, 164, 198, .1); color: #73829a; font-size: .61rem; }
.code-footer span:first-child { display: flex; align-items: center; gap: 7px; }.code-footer i { width: 6px; height: 6px; border-radius: 50%; background: #e5b35c; }
.security-preview { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: center; }
.security-points { display: grid; grid-template-columns: 1fr 1fr; gap: 0 25px; }
.security-points > div { display: grid; grid-template-columns: 33px 1fr; padding: 17px 0; border-bottom: 1px solid var(--border); }
.security-points > div > span { grid-row: span 2; color: #77a7ff; font-size: .63rem; font-weight: 700; }
.security-points b { font-size: .81rem; font-weight: 600; }.security-points small { color: #8593a8; font-size: .7rem; line-height: 1.55; }

/* =========================
   Secondary page hero / content
========================= */
.page-hero { position: relative; overflow: hidden; padding: 107px 0 99px; background: radial-gradient(ellipse at 50% 15%, rgba(38, 76, 159, .19), transparent 55%), linear-gradient(180deg, #090f1d, #070b16); border-bottom: 1px solid rgba(148, 163, 184, .08); }
.page-hero-inner { max-width: 840px; text-align: center; }
.page-hero h1 { font-size: clamp(3rem, 5.4vw, 4.8rem); }
.page-hero p { max-width: 680px; margin: 0 auto; font-size: 1.03rem; }
.page-hero .hero-actions { margin-top: 26px; }
.story-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; }
.story-grid h2 { max-width: 410px; }
.prose { color: var(--text-secondary); }
.prose p { margin-bottom: 18px; }
.prose h2 { margin: 42px 0 14px; color: #edf2fa; font-size: 1.45rem; letter-spacing: -.03em; }
.prose h2:first-child { margin-top: 0; }
.prose a { color: #91baff; text-decoration: underline; text-decoration-color: rgba(145, 186, 255, .4); text-underline-offset: 3px; }
.mission-card { max-width: 870px; margin: 0 auto 20px; padding: 36px 40px; border: 1px solid rgba(94, 141, 229, .25); border-radius: 16px; background: radial-gradient(ellipse at left top, rgba(51, 100, 199, .18), transparent 65%), #0d1526; text-align: center; }
.mission-card h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.5rem); }
.vision-card { max-width: 700px; padding-block: 27px; background: rgba(13, 21, 38, .75); }
.vision-card h2 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.status-panel { display: grid; grid-template-columns: 1fr .9fr; gap: 80px; align-items: center; padding: 45px; border: 1px solid var(--border); border-radius: 17px; background: rgba(14, 23, 41, .67); }
.status-panel h2 { font-size: 2.35rem; }.status-panel p { margin-bottom: 0; }
.check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0; padding: 0; list-style: none; color: #b9c5d6; font-size: .82rem; }
.check-list li { position: relative; padding-left: 19px; }
.check-list li::before { position: absolute; top: 2px; left: 0; color: #63d6a4; content: "✓"; font-size: .78rem; }
.roadmap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.roadmap article { position: relative; min-height: 195px; padding: 20px 17px; border: 1px solid var(--border); border-radius: 12px; background: rgba(12, 19, 34, .68); }
.roadmap-index { display: block; margin-bottom: 26px; color: #759dff; font-size: .68rem; font-weight: 700; }
.roadmap h3 { min-height: 44px; font-size: .95rem; }.roadmap p { min-height: 43px; margin-bottom: 16px; font-size: .72rem; line-height: 1.55; }
.roadmap-status { display: inline-block; padding: 5px 8px; border: 1px solid rgba(152, 169, 196, .15); border-radius: 20px; color: #9ba9bd; font-size: .56rem; line-height: 1.4; }
.roadmap-status.active { border-color: rgba(71, 195, 147, .22); background: rgba(71, 195, 147, .07); color: #7cd9b0; }

/* =========================
   Product page
========================= */
.product-dashboard .dashboard-frame { max-width: 950px; margin-inline: auto; }
.workspace-demo { display: grid; grid-template-columns: 190px minmax(0, 1fr); overflow: hidden; max-width: 1050px; margin-inline: auto; border: 1px solid rgba(157, 180, 222, .22); border-radius: 15px; background: #0b1220; box-shadow: 0 30px 80px rgba(0, 0, 0, .38); text-align: left; }
.workspace-sidebar { display: flex; min-height: 590px; flex-direction: column; padding: 18px 11px 13px; border-right: 1px solid rgba(148, 163, 184, .12); background: #0a101d; }
.workspace-brand { padding: 1px 7px 27px; }.workspace-brand .brand { font-size: .9rem; }.workspace-brand .brand-mark { width: 27px; height: 27px; }
.workspace-side-label { padding: 0 9px 10px; color: #65748b; font-size: .54rem; font-weight: 700; letter-spacing: .1em; }
.workspace-nav-item { display: flex; min-height: 34px; align-items: center; gap: 10px; margin-bottom: 3px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; color: #8493a9; font-size: .67rem; text-align: left; cursor: pointer; }
.workspace-nav-item > span { width: 14px; color: #8496b2; font-size: .78rem; text-align: center; }.workspace-nav-item i { margin-left: auto; color: #76869d; font-size: .58rem; font-style: normal; }
.workspace-nav-item:hover, .workspace-nav-item.active { background: rgba(78, 119, 197, .14); color: #dce7f8; }.workspace-nav-item.active > span { color: #82b4ff; }
.workspace-sidebar-bottom { margin-top: auto; }.workspace-sidebar-bottom > div { display: flex; align-items: center; gap: 8px; padding: 12px 6px 0; border-top: 1px solid rgba(148, 163, 184, .1); color: #c7d3e4; font-size: .61rem; }
.workspace-avatar, .workspace-toolbar-avatar { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #283f72; color: #dce7ff; font-size: .55rem; font-weight: 700; }.workspace-sidebar-bottom small { display: block; color: #718097; font-size: .53rem; }
.workspace-main { min-width: 0; padding: 0 21px 12px; }.workspace-toolbar { display: flex; height: 49px; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(148, 163, 184, .1); color: #8492a8; font-size: .61rem; }.workspace-toolbar b { padding: 0 7px; color: #4c5c74; font-weight: 400; }
.workspace-toolbar > div { display: flex; align-items: center; gap: 11px; }.workspace-toolbar .demo-pill { font-size: .5rem; }.workspace-toolbar-avatar { width: 23px; height: 23px; font-size: .5rem; }
.workspace-title { display: flex; align-items: center; justify-content: space-between; padding: 21px 0 17px; }.workspace-title small { color: #7b8ba2; font-size: .51rem; font-weight: 700; letter-spacing: .09em; }.workspace-title h2 { margin: 4px 0 2px; font-size: 1.25rem; letter-spacing: -.035em; }.workspace-title p { margin: 0; font-size: .65rem; }.workspace-range { padding: 6px 9px; border: 1px solid rgba(148, 163, 184, .15); border-radius: 6px; background: rgba(255, 255, 255, .02); color: #aab7ca; font-size: .57rem; }
.workspace-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }.workspace-metrics article { min-width: 0; padding: 11px 10px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 8px; background: rgba(17, 27, 46, .57); }.workspace-metrics article > span { display: block; overflow: hidden; color: #8493a8; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }.workspace-metrics b { display: block; margin: 5px 0 2px; color: #eef4ff; font-size: 1.02rem; letter-spacing: -.03em; }.workspace-metrics b em { color: #a0adc0; font-size: .64rem; font-style: normal; }.workspace-metrics small { color: #75849a; font-size: .51rem; }.workspace-metrics .positive { color: #74d5a8; }.workspace-metrics .positive i { color: #728198; font-style: normal; }.workspace-metrics .metric-good { color: #76d7a8; font-size: .85rem; }
.workspace-widgets { display: grid; grid-template-columns: 1.15fr .85fr; gap: 9px; margin-top: 10px; }.workspace-widget { min-width: 0; padding: 12px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 8px; background: rgba(15, 24, 41, .73); }.widget-heading { display: flex; min-height: 32px; align-items: flex-start; justify-content: space-between; gap: 8px; }.widget-heading small { display: block; color: #73849b; font-size: .49rem; font-weight: 700; letter-spacing: .09em; }.widget-heading h3 { margin: 2px 0 0; color: #dbe5f3; font-size: .72rem; letter-spacing: -.01em; }.widget-heading > span { color: #8190a5; font-size: .52rem; white-space: nowrap; }.widget-heading > .health-good { color: #74d5a8; }
.activity-chart { display: flex; height: 112px; gap: 8px; padding-top: 11px; }.activity-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 12px; color: #67768c; font-size: .48rem; }.activity-plot { position: relative; flex: 1; }.activity-grid { position: absolute; inset: 0 0 12px; display: flex; flex-direction: column; justify-content: space-between; }.activity-grid i { border-top: 1px dashed rgba(148, 163, 184, .11); }.activity-plot svg { position: absolute; inset: 0 0 12px; width: 100%; height: calc(100% - 12px); overflow: visible; }.workspace-chart-line { fill: none; stroke: #68a1ff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 850; stroke-dashoffset: 850; animation: chart-draw 1.8s .3s ease forwards; filter: drop-shadow(0 0 3px rgba(81, 142, 255, .5)); }.activity-days { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #6e7c91; font-size: .47rem; }
.connections-widget { grid-column: 2; grid-row: 1 / span 2; }.connection-list { display: grid; gap: 0; margin-top: 5px; }.connection-list > div { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(148, 163, 184, .08); }.connection-list > div:last-child { border-bottom: 0; }.connection-symbol { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: rgba(66, 100, 161, .2); color: #9fc2ff; font-size: .68rem; }.connection-symbol.pg { color: #a8c2f0; }.connection-symbol.evt { color: #a99bff; }.connection-symbol.cloud { color: #7dcdf4; }.connection-list b { min-width: 0; overflow: hidden; color: #cbd7e8; font-size: .57rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }.connection-list b small { display: block; margin-top: 2px; color: #74839a; font-size: .48rem; font-weight: 400; }.connection-list em { margin-left: auto; color: #72d2a6; font-size: .48rem; font-style: normal; white-space: nowrap; }
.health-meter { height: 6px; overflow: hidden; margin: 13px 0 10px; border-radius: 10px; background: rgba(148, 163, 184, .1); }.health-meter i { display: block; width: var(--meter); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38c991, #75dfaa); }.health-legend { display: grid; gap: 6px; }.health-legend span { display: flex; align-items: center; gap: 6px; color: #8e9cb0; font-size: .52rem; }.health-legend b { margin-left: auto; color: #ccd7e6; font-size: .53rem; }.health-legend i { width: 6px; height: 6px; border-radius: 50%; }.legend-healthy { background: #53d3a0; }.legend-processing { background: #6b9eff; }.legend-attention { background: #e8b965; }
.api-widget { grid-column: 1; }.api-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 9px; }.api-stats > div { display: flex; flex-direction: column; gap: 2px; }.api-stats small { color: #8493a8; font-size: .5rem; }.api-stats b { color: #dfe8f5; font-size: .85rem; }.api-stats i { color: #6f7e93; font-size: .47rem; font-style: normal; }
.workspace-disclaimer { margin: 10px 0 0; color: #738198; font-size: .52rem; text-align: right; }
.product-feature-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 90px; }
.product-feature-row > div:first-child { max-width: 500px; }
.product-feature-row .check-list { grid-template-columns: 1fr; margin-top: 24px; }
.product-feature-row.reverse > div:first-child { order: 2; }
.integration-visual, .pipeline-visual, .analytics-visual { position: relative; display: flex; min-height: 270px; align-items: center; justify-content: center; gap: 15px; padding: 30px; border: 1px solid var(--border); border-radius: 16px; background: radial-gradient(ellipse at 50% 50%, rgba(47, 83, 158, .16), transparent 70%), #0c1424; }
.integration-visual { flex-direction: column; }
.integration-chip { position: relative; z-index: 1; width: 180px; padding: 10px 13px; border: 1px solid rgba(133, 159, 207, .19); border-radius: 8px; background: #101a2e; color: #d4deed; font-size: .76rem; }
.integration-chip i { float: right; color: #6ba9ff; font-style: normal; }
.integration-chip:nth-child(1) { transform: translateX(-53px); }.integration-chip:nth-child(2) { transform: translateX(53px); }.integration-chip:nth-child(3) { transform: translateX(-53px); }
.integration-hub { position: absolute; right: 14px; bottom: 15px; display: flex; align-items: center; gap: 8px; color: #718198; font-size: .61rem; }
.integration-hub span { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 6px; background: #334b84; color: #fff; font-size: .6rem; }
.pipeline-visual { justify-content: space-around; }
.pipe-stage { display: flex; width: 27%; min-height: 100px; flex-direction: column; justify-content: center; padding: 13px; border: 1px solid rgba(117, 158, 226, .23); border-radius: 10px; background: rgba(21, 34, 58, .85); color: #91a1b8; font-size: .65rem; }
.pipe-stage b { margin-top: 8px; color: #e1eafa; font-size: .8rem; }
.pipeline-visual > span { color: #6c9eff; }
.analytics-visual { display: block; padding: 25px; }
.analytics-header { display: flex; justify-content: space-between; color: #c9d4e5; font-size: .76rem; }
.analytics-stat { display: flex; align-items: baseline; gap: 10px; margin-top: 26px; }.analytics-stat small, .analytics-stat span { color: #8290a5; font-size: .68rem; }.analytics-stat b { color: #eff4ff; font-size: 1.4rem; }
.analytics-bars { display: flex; height: 97px; align-items: flex-end; justify-content: space-around; gap: 12px; margin-top: 15px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent, transparent 23px, rgba(148, 163, 184, .08) 24px); }
.analytics-bars i { width: 7%; height: var(--bar); border-radius: 3px 3px 0 0; background: linear-gradient(#68c9ff, #536be1); opacity: .8; }

/* =========================
   Solutions page
========================= */
.solution-list { display: grid; gap: 14px; }
.solution-list article { display: grid; grid-template-columns: 48px 1fr .8fr; gap: 30px; align-items: center; padding: 32px; border: 1px solid var(--border); border-radius: 15px; background: rgba(14, 22, 39, .62); scroll-margin-top: 100px; }
.solution-index { align-self: start; color: #729fff; font-size: .72rem; font-weight: 700; }
.solution-list h2 { margin: 0 0 10px; font-size: 1.75rem; }.solution-list p { margin-bottom: 17px; font-size: .86rem; }
.solution-list .check-list { font-size: .74rem; }
.solution-visual { display: flex; min-height: 130px; align-items: center; justify-content: space-around; gap: 9px; padding: 16px; border: 1px solid rgba(127, 151, 192, .12); border-radius: 11px; background: radial-gradient(ellipse, rgba(48, 83, 155, .13), transparent 75%), #0b1220; }
.solution-visual span { color: #aab8cc; font-size: .67rem; text-align: center; }.solution-visual b { color: #648edc; font-size: .8rem; }
.solution-visual strong { padding: 13px 10px; border: 1px solid rgba(102, 147, 228, .3); border-radius: 8px; background: rgba(45, 76, 139, .29); color: #e0eaff; font-size: .66rem; text-align: center; }

/* =========================
   Developer documentation
========================= */
.developer-hero { background: radial-gradient(ellipse at 72% 18%, rgba(57, 68, 165, .22), transparent 45%), #090f1d; }
.docs-layout { display: grid; grid-template-columns: 205px 1fr; gap: 70px; align-items: start; }
.docs-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 13px; padding: 18px 0; }
.docs-sidebar b, .legal-toc b { margin-bottom: 6px; color: #e2e9f4; font-size: .77rem; }
.docs-sidebar a, .legal-toc a { color: #8998ad; font-size: .76rem; transition: color .2s ease; }.docs-sidebar a:hover, .legal-toc a:hover { color: #a8c7ff; }
.docs-content > section { padding: 0 0 53px; margin-bottom: 49px; border-bottom: 1px solid var(--border); scroll-margin-top: 100px; }
.docs-content > section:last-child { border-bottom: 0; }
.docs-content h2 { margin-bottom: 14px; font-size: 1.8rem; }.docs-content p { max-width: 740px; font-size: .88rem; }
.endpoint-row { display: grid; grid-template-columns: 58px 1fr 1fr; align-items: center; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: 8px; color: #aab7ca; font-size: .73rem; }
.endpoint-row + .endpoint-row { margin-top: 8px; }.endpoint-row span { color: #71d4a6; font-size: .6rem; font-weight: 700; }.endpoint-row code { color: #dce7f7; font: .75rem ui-monospace, monospace; }.endpoint-row small { color: #7d8ba0; }
.callout { margin-top: 22px; padding: 17px 19px; border-left: 2px solid #679cff; border-radius: 0 8px 8px 0; background: rgba(40, 71, 127, .14); }.callout b { color: #dce7f7; font-size: .77rem; }.callout p { margin: 4px 0 0; font-size: .77rem; }
.docs-content .code-window { margin-top: 20px; }
.event-card { display: grid; gap: 8px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: rgba(13, 21, 38, .8); }.event-card span { color: #95bbff; font: .77rem ui-monospace, monospace; }.event-card small { color: #77869a; font-size: .64rem; }.event-card code { overflow-wrap: anywhere; color: #b7c6dc; font: .69rem ui-monospace, monospace; }

/* =========================
   Security / legal
========================= */
.security-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.security-card { min-height: 190px; padding: 24px; border: 1px solid var(--border); border-radius: 13px; background: rgba(14, 22, 39, .68); }
.security-card > span { display: block; margin-bottom: 23px; color: #729fff; font-size: .67rem; font-weight: 700; }
.security-card p { margin-bottom: 0; font-size: .81rem; }
.security-note { display: grid; grid-template-columns: 76px 1fr; gap: 27px; align-items: start; max-width: 900px; padding: 38px; border: 1px solid rgba(115, 154, 223, .16); border-radius: 15px; background: rgba(17, 28, 48, .58); }
.security-note h2 { font-size: 1.8rem; }.security-note p { max-width: 670px; margin-bottom: 0; }
.shield-icon { display: grid; width: 56px; height: 56px; place-items: center; border: 1px solid rgba(97, 147, 232, .23); border-radius: 16px; background: rgba(45, 83, 156, .2); color: #85baff; font-size: 1.7rem; }
.contact-inline { display: flex; align-items: center; justify-content: space-between; gap: 40px; }.contact-inline h2 { font-size: 1.8rem; }.contact-inline p { max-width: 690px; margin-bottom: 0; }.contact-inline .button { white-space: nowrap; }
.legal-hero { padding-block: 88px; }.legal-hero h1 { font-size: clamp(2.8rem, 5vw, 4rem); }.legal-hero small { display: inline-block; margin-top: 19px; color: #76869d; font-size: .7rem; }
.legal-content { display: grid; grid-template-columns: 200px minmax(0, 740px); justify-content: center; gap: 80px; }
.legal-toc { position: sticky; top: 105px; display: flex; height: max-content; flex-direction: column; gap: 12px; padding-top: 7px; }
.legal-content .prose { font-size: .9rem; line-height: 1.8; }.legal-content .prose h2 { scroll-margin-top: 100px; }

/* =========================
   Contact form
========================= */
.contact-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 90px; align-items: start; }
.contact-aside { padding-top: 13px; }.contact-aside h2 { max-width: 390px; font-size: 2.15rem; }.contact-aside p { max-width: 400px; font-size: .88rem; }
.contact-email { display: inline-block; margin-top: 10px; color: #a8c8ff; font-size: .9rem; font-weight: 600; }
.contact-aside-note { display: flex; align-items: center; gap: 9px; margin-top: 48px; color: #8d9bb0; font-size: .72rem; }
.contact-form { position: relative; padding: 32px; border: 1px solid var(--border); border-radius: 15px; background: rgba(13, 21, 38, .72); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.form-field label { color: #dce5f2; font-size: .75rem; font-weight: 600; }.form-field label span { color: #83aef5; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 45px; padding: 11px 12px; border: 1px solid rgba(144, 163, 194, .2); border-radius: 7px; outline: none; background: #0a1221; color: #edf3fc; font-size: .79rem; transition: border-color .2s ease, box-shadow .2s ease; }
.form-field textarea { min-height: 140px; resize: vertical; }.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: rgba(93, 153, 248, .75); box-shadow: 0 0 0 3px rgba(61, 120, 220, .11); }
.form-field input::placeholder, .form-field textarea::placeholder { color: #67778f; }.form-field select:invalid { color: #7c8ba1; }.form-field small { color: #7d8ba0; font-size: .66rem; }
.form-submit { min-width: 175px; border: 0; cursor: pointer; }.form-submit:disabled { cursor: wait; opacity: .75; }.form-status { min-height: 24px; margin: 12px 0 0; font-size: .78rem; }.form-status.success { color: #70d7a8; }.form-status.error { color: #ff9c9c; }
.hp-field { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; }
.form-noscript { margin: 15px 0 0; font-size: .75rem; }.form-noscript a { color: #9fc4ff; }

/* =========================
   Footer
========================= */
.site-footer { padding: 59px 0 20px; border-top: 1px solid rgba(148, 163, 184, .1); background: #060a13; }
.footer-main { display: grid; grid-template-columns: 1.8fr repeat(4, 1fr); gap: 40px; padding-bottom: 47px; }
.footer-brand p { max-width: 245px; margin: 15px 0 0; color: #7f8da1; font-size: .79rem; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer-column h2 { margin: 5px 0 7px; color: #c9d3e2; font-size: .72rem; letter-spacing: .01em; }
.footer-column a { color: #8190a5; font-size: .72rem; transition: color .2s ease; }.footer-column a:hover { color: #e6edf7; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 17px; border-top: 1px solid rgba(148, 163, 184, .1); color: #68768a; font-size: .66rem; }

/* =========================
   Motion and responsive
========================= */
html.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
html.js [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1050px) {
    .nav-content { margin-left: 35px; }.nav-links { gap: 20px; }.nav-actions { gap: 15px; }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }.feature-grid.four .feature-card { min-height: 225px; }
    .ecosystem-row { gap: 38px; }.developer-preview, .security-preview { gap: 48px; }
    .roadmap { grid-template-columns: repeat(3, 1fr); }.roadmap article { min-height: 180px; }
    .solution-list article { grid-template-columns: 35px 1fr .7fr; gap: 20px; }
}
@media (max-width: 760px) {
    html { scroll-padding-top: 72px; }.container { width: min(100% - 36px, var(--container)); }
    .section-pad { padding-block: 76px; }.section-heading { margin-bottom: 32px; }
    h1 { font-size: clamp(2.65rem, 11vw, 4rem); }.page-hero h1 { font-size: clamp(2.65rem, 10vw, 4rem); }
    .site-header { height: 68px; }.brand { font-size: 1.09rem; }.brand-mark { width: 31px; height: 31px; }
    .menu-toggle { position: relative; z-index: 3; display: flex; width: 42px; height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border); border-radius: 9px; background: rgba(15, 23, 42, .8); cursor: pointer; }
    .menu-toggle span { display: block; width: 17px; height: 1.5px; background: #e5edf7; transition: transform .2s ease; }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
    .nav-content { position: absolute; top: 67px; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 20px; margin: 0; padding: 20px 22px 25px; border-bottom: 1px solid var(--border); background: rgba(8, 13, 25, .98); box-shadow: 0 18px 30px rgba(0, 0, 0, .3); }
    .nav-content.open { display: flex; }.nav-links { align-items: stretch; flex-direction: column; gap: 0; }.nav-links a { padding: 12px 0; border-bottom: 1px solid rgba(148, 163, 184, .08); font-size: .9rem; }
    .nav-actions { justify-content: space-between; }.nav-actions .nav-contact { font-size: .85rem; }
    .hero { min-height: auto; padding: 76px 0 60px; }.hero-copy h1 { font-size: clamp(2.8rem, 10vw, 4.2rem); }.hero-lede { font-size: .95rem; }.hero-visual { margin: 45px auto -118px; }
    .dashboard-content { padding: 18px 14px 12px; }.dashboard-top { padding-inline: 11px; }.dashboard-top > span:nth-child(2) { font-size: .63rem; }.metric-grid { grid-template-columns: repeat(2, 1fr); }.metric-card { padding: 10px; }.metric-card strong { font-size: .97rem; }.chart-card { padding-inline: 10px; }.dashboard-bottom { font-size: .48rem; }
    .ecosystem { padding-top: 160px; }.ecosystem-row, .developer-preview, .security-preview, .story-grid, .status-panel, .product-feature-row, .contact-layout { grid-template-columns: 1fr; gap: 34px; }
    .tech-cloud { justify-content: flex-start; }.feature-grid.four, .feature-grid.three { grid-template-columns: repeat(2, 1fr); }
    .architecture { align-items: stretch; flex-direction: column; gap: 8px; padding: 20px 17px; }.arch-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; }.arch-label { grid-column: 1 / -1; min-height: 20px; text-align: left; }.arch-node { font-size: .69rem; }.arch-connector { width: 1px; height: 18px; flex-basis: 18px; margin: 0 auto; background: linear-gradient(to bottom, rgba(108, 158, 238, .34), rgba(108, 158, 238, .7)); }.arch-connector span { top: 0; left: -2px; animation-name: data-flow-vertical; }.arch-connector:nth-of-type(4) span, .arch-connector:nth-of-type(6) span, .arch-connector:nth-of-type(8) span { animation-name: data-flow-vertical; }
    @keyframes data-flow-vertical { 0%, 100% { top: 0; opacity: .35; } 50% { top: calc(100% - 5px); opacity: 1; } }
    .usecase-grid { grid-template-columns: 1fr; }.usecase-grid p { min-height: auto; }
    .cta-panel { align-items: flex-start; flex-direction: column; padding: 34px 25px; }.cta-actions { width: 100%; flex-direction: row; flex-wrap: wrap; }.cta-actions .button { flex: 1; min-width: 160px; }
    .security-points { gap: 0 15px; }.page-hero { padding: 77px 0 69px; }.page-hero p { font-size: .93rem; }
    .mission-card { padding: 29px 23px; }.feature-grid.compact { margin-top: 20px; }.status-panel { padding: 29px 23px; }
    .roadmap { grid-template-columns: repeat(2, 1fr); }.roadmap article { min-height: 175px; }.roadmap article:last-child { grid-column: 1 / -1; }
    .product-feature-row.reverse > div:first-child { order: initial; }.integration-visual, .pipeline-visual, .analytics-visual { min-height: 240px; }.pipeline-visual { gap: 8px; padding: 18px 11px; }.pipe-stage { min-height: 90px; padding: 9px; }
    .workspace-demo { grid-template-columns: 1fr; }.workspace-sidebar { display: none; }.workspace-main { padding-inline: 12px; }.workspace-toolbar .demo-pill { font-size: .44rem; }.workspace-metrics { grid-template-columns: repeat(2, 1fr); }.workspace-widgets { grid-template-columns: 1fr; }.connections-widget, .api-widget { grid-column: auto; grid-row: auto; }.workspace-main { padding-bottom: 10px; }.workspace-disclaimer { text-align: left; }
    .solution-list article { grid-template-columns: 30px 1fr; gap: 16px; padding: 24px 19px; }.solution-visual { grid-column: 2; }
    .docs-layout { grid-template-columns: 1fr; gap: 20px; }.docs-sidebar { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 0 17px; border-bottom: 1px solid var(--border); }.docs-sidebar b { grid-column: 1 / -1; }
    .docs-content > section { padding-bottom: 38px; margin-bottom: 35px; }.docs-content h2 { font-size: 1.55rem; }
    .endpoint-row { grid-template-columns: 48px 1fr; }.endpoint-row small { grid-column: 2; }
    .security-grid { grid-template-columns: repeat(2, 1fr); }.security-card { min-height: 210px; padding: 18px; }.security-note { grid-template-columns: 1fr; gap: 18px; padding: 28px 22px; }.security-note h2 { font-size: 1.55rem; }
    .contact-inline { align-items: flex-start; flex-direction: column; gap: 22px; }.legal-content { grid-template-columns: 1fr; gap: 32px; }.legal-toc { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }.legal-toc b { grid-column: 1 / -1; }
    .contact-layout { gap: 28px; }.contact-aside h2 { font-size: 1.9rem; }.contact-aside-note { margin-top: 22px; }.contact-form { padding: 23px 18px; }.form-row { grid-template-columns: 1fr; gap: 0; }
    .footer-main { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }.footer-brand { grid-column: 1 / -1; }.footer-brand p { max-width: 300px; }.footer-bottom { gap: 12px; font-size: .6rem; }
}
@media (max-width: 420px) {
    .container { width: calc(100% - 30px); }.section-pad { padding-block: 62px; }
    .hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-note { align-items: flex-start; text-align: left; }
    .feature-grid.four, .feature-grid.three, .security-grid { grid-template-columns: 1fr; }.feature-card { min-height: 210px; }.security-card { min-height: 0; }
    .dashboard-greeting h2 { font-size: .87rem; }.dashboard-content { padding-inline: 10px; }.metric-card strong { font-size: .9rem; }.metric-foot { font-size: .48rem; }
    .security-points { grid-template-columns: 1fr; }.roadmap { grid-template-columns: 1fr; }.roadmap article, .roadmap article:last-child { min-height: auto; grid-column: auto; }.roadmap-index { margin-bottom: 13px; }.roadmap h3, .roadmap p { min-height: 0; }
    .solution-list article { grid-template-columns: 1fr; }.solution-index { margin-bottom: -8px; }.solution-visual { grid-column: 1; }
    .mission-card { padding-inline: 18px; }.check-list { grid-template-columns: 1fr; }.product-feature-row { gap: 25px; }
    .cta-actions { flex-direction: column; }.footer-main { gap: 26px 12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html.js [data-reveal] { opacity: 1; transform: none; }
}