:root,
[data-theme="dark"] {
  color-scheme: dark;
  --background: #030711;
  --background-secondary: #06101f;
  --surface-primary: #081426;
  --surface-secondary: #0b192d;
  --surface-elevated: #10213a;
  --surface-glass: rgba(8, 20, 38, .76);
  --surface-hover: #132641;
  --border-default: #1a2d49;
  --border-strong: #294466;
  --text-primary: #f4f7fc;
  --text-secondary: #a9b7cb;
  --text-tertiary: #8294ad;
  --brand-primary: #7047ff;
  --brand-secondary: #247cff;
  --link: #9bbaff;
  --success: #16c784;
  --warning: #f5a524;
  --info: #38bdf8;
  --gradient: linear-gradient(120deg, #1e5fd0 0%, #5b37de 58%, #7553e9 100%);
  --text-gradient: linear-gradient(120deg, #4b98ff 0%, #a08aff 100%);
  --shadow-card: 0 22px 80px rgba(0, 0, 0, .34);
  --shadow-glow: 0 0 0 1px rgba(112, 71, 255, .22), 0 30px 90px rgba(36, 124, 255, .15);
  --focus-ring: #a48cff;
  --header-height: 76px;
}

[data-theme="light"] {
  color-scheme: light;
  --background: #f8fafd;
  --background-secondary: #f0f4fa;
  --surface-primary: #fff;
  --surface-secondary: #f3f6fb;
  --surface-elevated: #fff;
  --surface-glass: rgba(255, 255, 255, .78);
  --surface-hover: #eef2fa;
  --border-default: #dfe6f0;
  --border-strong: #c5d2e4;
  --text-primary: #0b1736;
  --text-secondary: #526581;
  --text-tertiary: #526581;
  --brand-primary: #6240f5;
  --brand-secondary: #247cff;
  --link: #285dd5;
  --success: #08794f;
  --warning: #a96100;
  --info: #155ec4;
  --gradient: linear-gradient(120deg, #1e5fd0 0%, #5b37de 58%, #7553e9 100%);
  --text-gradient: linear-gradient(120deg, #155ec4 0%, #5730d7 100%);
  --shadow-card: 0 20px 65px rgba(27, 47, 79, .12);
  --shadow-glow: 0 0 0 1px rgba(98, 64, 245, .15), 0 28px 75px rgba(36, 124, 255, .11);
  --focus-ring: #5332e6;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 24px); }
body { margin: 0; overflow-x: hidden; background: var(--background); color: var(--text-primary); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; transition: background-color 180ms ease, color 180ms ease; }
body::before { position: fixed; z-index: 30; inset: 0; pointer-events: none; content: ""; opacity: .15; background-image: radial-gradient(rgba(255, 255, 255, .15) .55px, transparent .7px); background-size: 5px 5px; mask-image: linear-gradient(#000, transparent 74%); }
[data-theme="light"] body::before { opacity: .13; background-image: radial-gradient(rgba(35, 70, 125, .2) .55px, transparent .7px); }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
::selection { color: #fff; background: #6240f5; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(1216px, calc(100% - 64px)); margin-inline: auto; }
.ambient { position: absolute; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.ambient-one { top: 390px; left: -330px; background: rgba(36, 124, 255, .08); }
.ambient-two { top: 1780px; right: -360px; background: rgba(112, 71, 255, .09); }
[data-theme="light"] .ambient { opacity: .4; }

.site-header { position: sticky; z-index: 25; top: 0; height: var(--header-height); border-bottom: 1px solid color-mix(in srgb, var(--border-default) 75%, transparent); background: color-mix(in srgb, var(--background) 79%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.nav-row { display: flex; height: 100%; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; min-width: 198px; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -.055em; }
.brand img { display: block; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 13px rgba(36, 124, 255, .28)); }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.5vw, 34px); color: var(--text-secondary); font-size: 13px; font-weight: 600; }
.site-nav a { transition: color 160ms ease; }
.site-nav a:hover, .footer-links a:hover { color: var(--text-primary); }
.nav-actions { display: flex; min-width: 198px; align-items: center; justify-content: flex-end; gap: 10px; }
.icon-button { display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid var(--border-default); border-radius: 11px; background: var(--surface-secondary); color: var(--text-secondary); cursor: pointer; transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.icon-button:hover { border-color: var(--border-strong); background: var(--surface-hover); color: var(--text-primary); }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; padding: 0 19px; border: 1px solid transparent; border-radius: 11px; font-size: 13px; font-weight: 700; cursor: pointer; transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease, background-color 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button-primary { color: #fff; background: var(--gradient); box-shadow: 0 9px 27px rgba(72, 75, 240, .25); }
.button-primary:hover { box-shadow: 0 13px 34px rgba(72, 75, 240, .38); }
.button-secondary { border-color: var(--border-strong); background: color-mix(in srgb, var(--surface-primary) 84%, transparent); color: var(--text-primary); }
.button-secondary:hover { border-color: var(--brand-primary); background: var(--surface-hover); }
.menu-toggle { display: none; }

.hero { position: relative; isolation: isolate; padding: clamp(72px, 8vw, 112px) 0 82px; }
.hero-art { position: absolute; z-index: -2; top: -76px; right: -50px; width: min(80vw, 1240px); height: 790px; pointer-events: none; opacity: .84; background-image: linear-gradient(90deg, var(--background) 0%, color-mix(in srgb, var(--background) 85%, transparent) 29%, color-mix(in srgb, var(--background) 22%, transparent) 62%, var(--background) 100%), linear-gradient(0deg, var(--background) 0%, transparent 42%, color-mix(in srgb, var(--background) 30%, transparent) 100%), url("assets/hero-v-abstract.webp"); background-position: center, center, right top; background-repeat: no-repeat; background-size: cover; }
[data-theme="light"] .hero-art { opacity: .32; filter: saturate(.8); }
.hero-grid { display: grid; grid-template-columns: minmax(320px, .78fr) minmax(0, 1.22fr); align-items: center; gap: 38px; }
.hero-copy-block { position: relative; z-index: 2; max-width: 590px; }
.eyebrow, .section-kicker, .showcase-number, .mono-label, .capability-tag, .roadmap-foot { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--link); }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 17%, transparent), 0 0 15px var(--success); }
.hero h1 { max-width: 600px; margin: 21px 0 23px; font-size: clamp(46px, 5.25vw, 72px); font-weight: 800; letter-spacing: -.075em; line-height: 1.02; }
.gradient-text { color: var(--brand-primary); background: var(--text-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-copy { max-width: 550px; margin: 0; color: var(--text-secondary); font-size: 17px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 29px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 13px 19px; margin: 28px 0 0; padding: 0; color: var(--text-tertiary); font-size: 12px; list-style: none; }
.hero-proof li { display: inline-flex; align-items: center; gap: 7px; }
.hero-proof .icon { width: 14px; height: 14px; color: var(--success); }

.hero-stage { position: relative; min-width: 0; perspective: 1500px; }
.stage-halo { position: absolute; z-index: -1; top: 12%; right: 7%; width: 70%; aspect-ratio: 1; border: 1px solid rgba(112, 71, 255, .19); border-radius: 50%; transform: rotateX(61deg) rotateZ(-22deg); box-shadow: 0 0 0 32px rgba(36, 124, 255, .025), 0 0 0 75px rgba(112, 71, 255, .02); }
.stage-halo::before, .stage-halo::after { position: absolute; inset: 11%; border: 1px solid rgba(36, 124, 255, .2); border-radius: inherit; content: ""; }
.stage-halo::after { inset: 24%; border-color: rgba(147, 107, 255, .25); }
.glass-panel { border: 1px solid color-mix(in srgb, var(--border-strong) 86%, transparent); background: var(--surface-glass); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.product-window { position: relative; overflow: hidden; border-radius: 17px; box-shadow: var(--shadow-glow), var(--shadow-card); transform: rotateY(-5deg) rotateX(2deg); transform-origin: center right; }
.product-window::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(36, 124, 255, .07), transparent 35%, transparent 70%, rgba(112, 71, 255, .08)); content: ""; pointer-events: none; }
.window-bar { display: flex; height: 43px; align-items: center; gap: 10px; padding: 0 15px; border-bottom: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-secondary) 86%, transparent); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.window-dots i:first-child { background: #f0445e; }
.window-dots i:nth-child(2) { background: #f5a524; }
.window-dots i:last-child { background: #16c784; }
.window-location { min-width: 0; overflow: hidden; margin-left: 3px; color: var(--text-tertiary); font: 9px "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.preview-label { margin-left: auto; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.app-preview { display: grid; min-height: 455px; grid-template-columns: 142px minmax(0, 1fr); }
.preview-sidebar { position: relative; display: flex; flex-direction: column; gap: 23px; padding: 17px 11px 14px; border-right: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-secondary) 66%, transparent); }
.preview-brand { display: flex; align-items: center; gap: 7px; padding: 0 4px; font-size: 10px; letter-spacing: -.04em; }
.preview-brand img { width: 20px; height: 20px; object-fit: contain; }
.preview-nav-group { display: grid; gap: 8px; }
.preview-nav-group > span { padding: 0 5px; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; letter-spacing: .1em; }
.preview-nav-group b, .preview-nav-group small { display: flex; min-height: 26px; align-items: center; gap: 8px; padding: 0 8px; border-radius: 6px; font-size: 9px; font-weight: 500; }
.preview-nav-group b { background: linear-gradient(100deg, rgba(36, 124, 255, .29), rgba(112, 71, 255, .2)); color: var(--text-primary); }
.preview-nav-group small { color: var(--text-tertiary); }
.preview-nav-group .icon { width: 13px; height: 13px; }
.workspace-chip { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 8px 6px; border: 1px solid var(--border-default); border-radius: 8px; }
.workspace-chip > span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--brand-primary) 23%, var(--surface-primary)); color: var(--link); font-size: 9px; font-weight: 700; }
.workspace-chip b, .workspace-chip small { display: block; font-size: 8px; }
.workspace-chip small { margin-top: 2px; color: var(--text-tertiary); }
.preview-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; padding: 13px 14px 12px; }
.version-badge, .badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border-default)); border-radius: 6px; background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); font: 8px "JetBrains Mono", monospace; white-space: nowrap; }
.version-badge i, .run-status i, .badge i, .status-inline i, .active-badge i, .planned-badge i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.mini-icon { display: inline-grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid color-mix(in srgb, currentColor 27%, transparent); border-radius: 8px; background: color-mix(in srgb, currentColor 11%, transparent); color: var(--link); }
.mini-icon .icon { width: 14px; height: 14px; }
.mini-icon.purple, .mini-icon.violet { color: #a28aff; }
.mini-icon.blue { color: #70a8ff; }
.mini-icon.green { color: #40d89d; }
.tiny-state { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--success); vertical-align: 1px; }
.run-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--success); font: 7px "JetBrains Mono", monospace; white-space: nowrap; }
.playground-toolbar { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 8px; padding: 0 1px 10px; border-bottom: 1px solid var(--border-default); }
.playground-agent { display: flex; min-width: 0; align-items: center; gap: 8px; }
.playground-agent > span:last-child { min-width: 0; }
.playground-agent b, .playground-agent small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playground-agent b { font-size: 10px; }
.playground-agent small { margin-top: 2px; color: var(--text-tertiary); font: 7px "JetBrains Mono", monospace; }
.playground-workspace { display: grid; flex: 1; min-height: 0; grid-template-columns: minmax(0, 1.08fr) minmax(220px, .92fr); gap: 10px; padding-top: 10px; }
.chat-panel, .trace-panel { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--border-default); border-radius: 9px; background: color-mix(in srgb, var(--surface-secondary) 62%, transparent); }
.chat-panel { display: flex; flex-direction: column; padding: 10px; }
.chat-panel-head { display: flex; min-height: 22px; align-items: center; justify-content: space-between; gap: 6px; color: var(--text-secondary); font-size: 9px; font-weight: 650; }
.chat-panel-head .run-status { font-size: 8px; }
.chat-thread { display: grid; flex: 1; align-content: center; gap: 10px; padding: 9px 0; }
.chat-message { display: flex; min-width: 0; align-items: flex-start; gap: 7px; }
.chat-avatar { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-primary); color: var(--text-tertiary); font: 7px "JetBrains Mono", monospace; }
.message-content { min-width: 0; padding: 7px 8px; border: 1px solid var(--border-default); border-radius: 0 8px 8px; background: var(--surface-primary); }
.message-content > small { display: block; margin-bottom: 3px; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; }
.message-content p { margin: 0; color: var(--text-secondary); font-size: 9px; line-height: 1.5; }
.user-message .message-content { border-color: color-mix(in srgb, var(--brand-secondary) 33%, var(--border-default)); background: color-mix(in srgb, var(--brand-secondary) 8%, var(--surface-primary)); }
.agent-message .mini-icon { width: 23px; height: 23px; border-radius: 7px; }
.agent-message .mini-icon .icon { width: 12px; height: 12px; }
.source-chip { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 3px 5px; border: 1px solid var(--border-default); border-radius: 5px; color: var(--link); font-size: 8px; }
.source-chip .icon { width: 9px; height: 9px; }
.tool-activity { display: flex; align-items: center; gap: 6px; margin-left: 30px; padding: 5px 7px; border: 1px solid var(--border-default); border-radius: 7px; background: color-mix(in srgb, var(--surface-primary) 75%, transparent); }
.activity-icon { display: grid; width: 19px; height: 19px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--info) 12%, transparent); color: var(--info); }
.activity-icon .icon { width: 11px; height: 11px; }
.tool-activity > span:nth-child(2) { min-width: 0; }
.tool-activity b, .tool-activity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-activity b { font-size: 8px; }
.tool-activity small { margin-top: 2px; color: var(--text-tertiary); font-size: 7px; }
.tool-activity .tiny-state { margin-left: auto; }
.chat-composer { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 5px 4px 9px; border: 1px solid var(--border-strong); border-radius: 7px; background: var(--surface-primary); color: var(--text-tertiary); font-size: 9px; }
.mock-send { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; border-radius: 5px; background: var(--gradient); color: #fff; }
.mock-send .icon { width: 12px; height: 12px; }
.trace-panel { display: flex; flex-direction: column; padding: 10px 9px 8px; background: color-mix(in srgb, var(--surface-primary) 83%, transparent); }
.trace-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding-bottom: 8px; border-bottom: 1px solid var(--border-default); }
.trace-panel-head > div { min-width: 0; }
.trace-panel-head small, .trace-panel-head b { display: block; }
.trace-panel-head small { color: var(--link); font: 8px "JetBrains Mono", monospace; letter-spacing: .08em; }
.trace-panel-head b { overflow: hidden; margin-top: 3px; font: 600 10px "JetBrains Mono", monospace; text-overflow: ellipsis; white-space: nowrap; }
.trace-panel-head .badge { padding: 4px 5px; font-size: 7px; }
.trace-panel-meta { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 8px 1px 5px; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; }
.trace-timeline { position: relative; display: grid; gap: 2px; padding: 0 0 5px; }
.trace-timeline::before { position: absolute; top: 17px; bottom: 17px; left: 12px; width: 1px; background: var(--border-strong); content: ""; }
.timeline-entry { position: relative; z-index: 1; display: grid; min-height: 34px; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 5px; padding: 3px 5px; border: 1px solid transparent; border-radius: 6px; }
.timeline-entry.selected { border-color: color-mix(in srgb, var(--brand-primary) 48%, var(--border-default)); background: color-mix(in srgb, var(--brand-primary) 13%, var(--surface-secondary)); box-shadow: inset 2px 0 var(--brand-primary); }
.timeline-entry.nested-entry { margin-left: 10px; }
.timeline-entry.child-entry { margin-left: 20px; }
.timeline-node { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface-primary); color: var(--brand-secondary); }
.timeline-node .icon { width: 11px; height: 11px; }
.timeline-node.model-node { color: var(--brand-primary); }
.timeline-node.retrieval-node { color: var(--info); }
.timeline-node.output-node { color: var(--success); }
.timeline-copy { min-width: 0; }
.timeline-copy b, .timeline-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.timeline-copy b { color: var(--text-secondary); font: 600 8px "JetBrains Mono", monospace; }
.timeline-copy small { margin-top: 2px; color: var(--text-tertiary); font-size: 7px; }
.timeline-status { color: var(--success); font: 7px "JetBrains Mono", monospace; text-transform: uppercase; }
.selected-span { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 3px 7px; margin-top: auto; padding: 7px; border: 1px solid var(--border-default); border-radius: 6px; background: color-mix(in srgb, var(--surface-secondary) 74%, transparent); }
.selected-span > span { color: var(--text-tertiary); font-size: 7px; }
.selected-span b { color: var(--link); font: 600 8px "JetBrains Mono", monospace; }
.selected-span small { grid-column: 1 / -1; overflow: hidden; color: var(--text-secondary); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.floating-chip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 10px; box-shadow: var(--shadow-card); }
.floating-chip b, .floating-chip small { display: block; }
.floating-chip b { font-size: 9px; }
.floating-chip small { margin-top: 1px; color: var(--text-tertiary); font-size: 7px; }
.chip-workflow { top: 11%; right: -24px; }
.chip-version { bottom: 9%; left: -30px; }
.chip-pulse { width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); }
.stage-caption { display: block; margin: 13px 2px 0; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; text-align: right; }

.connect-strip { border-block: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-secondary) 45%, transparent); }
.connect-row { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; }
.mono-label { color: var(--text-tertiary); font-size: 9px; }
.connect-items { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.connect-items span { display: inline-flex; min-height: 34px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 99px; color: var(--text-secondary); font-size: 12px; font-weight: 600; }
.connect-items span::before { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-secondary); content: ""; }

.section { padding: clamp(82px, 10vw, 132px) 0; }
.section-heading, .roadmap-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .68fr); align-items: end; gap: 54px; margin-bottom: 42px; }
.section-kicker { color: var(--link); font-size: 9px; }
.section-heading h2, .roadmap-heading h2, .architecture-copy h2 { max-width: 660px; margin: 14px 0 0; font-size: clamp(34px, 4.2vw, 54px); font-weight: 750; letter-spacing: -.067em; line-height: 1.06; }
.section-heading > p, .roadmap-heading > p { max-width: 465px; margin: 0 0 4px; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.journey-section { padding-bottom: 95px; }
.journey-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border-default); border-radius: 14px; overflow: hidden; background: var(--surface-primary); }
.journey-step { position: relative; min-height: 242px; padding: 23px 22px 20px; border-right: 1px solid var(--border-default); background: linear-gradient(155deg, color-mix(in srgb, var(--surface-secondary) 70%, transparent), transparent 74%); }
.journey-step:last-child { border-right: 0; }
.step-index { position: absolute; top: 22px; right: 20px; color: var(--text-tertiary); font: 9px "JetBrains Mono", monospace; }
.step-icon { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, var(--border-default)); border-radius: 11px; background: color-mix(in srgb, var(--brand-primary) 13%, var(--surface-secondary)); color: var(--link); }
.step-icon .icon { width: 18px; height: 18px; }
.journey-step h3 { margin: 21px 0 7px; font-size: 16px; letter-spacing: -.035em; }
.journey-step p { min-height: 53px; margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.step-link { display: flex; align-items: center; gap: 7px; margin-top: 17px; color: var(--link); font-size: 11px; font-weight: 600; }
.step-link .icon { width: 12px; height: 12px; }

.product-section { padding-top: 82px; }
.showcase-row { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); align-items: center; gap: clamp(42px, 6vw, 84px); margin: 48px 0; padding-bottom: 50px; border-bottom: 1px solid var(--border-default); }
.showcase-row:first-of-type { margin-top: 48px; }
.showcase-copy { max-width: 450px; }
.showcase-number { color: var(--link); font-size: 9px; }
.showcase-copy h3 { margin: 13px 0 13px; font-size: clamp(27px, 2.6vw, 36px); letter-spacing: -.055em; line-height: 1.14; }
.showcase-copy > p { margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.detail-list { display: grid; gap: 11px; margin: 22px 0 0; padding: 0; color: var(--text-secondary); font-size: 13px; list-style: none; }
.detail-list li { display: flex; align-items: flex-start; gap: 9px; }
.detail-list .icon { width: 14px; height: 14px; margin-top: 1px; color: var(--success); }
.showcase-visual { position: relative; display: grid; width: 100%; min-width: 0; height: clamp(370px, 34vw, 430px); place-items: center; }
.visual-glow { position: absolute; width: 75%; height: 65%; border-radius: 50%; background: radial-gradient(ellipse, rgba(36, 124, 255, .18), rgba(112, 71, 255, .08) 46%, transparent 74%); filter: blur(32px); }
.detail-window, .workflow-window, .trace-window { position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: var(--surface-glass); box-shadow: var(--shadow-glow), var(--shadow-card); }
.workflow-window, .trace-window { display: flex; flex-direction: column; }
.detail-window-bar, .workflow-toolbar, .trace-window-top { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border-default); background: color-mix(in srgb, var(--surface-secondary) 80%, transparent); }
.detail-window-bar > span:first-child { color: var(--text-tertiary); font: 9px "JetBrains Mono", monospace; }
.draft-badge { border-color: color-mix(in srgb, var(--warning) 40%, var(--border-default)); background: color-mix(in srgb, var(--warning) 9%, transparent); color: var(--warning); }
.detail-window-content { padding: 17px; }
.detail-title { display: flex; align-items: center; gap: 11px; }
.large-icon { position: relative; display: flex; width: 43px; height: 43px; flex: 0 0 43px; align-items: center; justify-content: center; padding: 0; border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, var(--border-default)); border-radius: 12px; background: color-mix(in srgb, var(--brand-primary) 16%, var(--surface-primary)); color: var(--link); line-height: 0; }
.large-icon > .icon { position: absolute; top: 50%; left: 50%; display: block; width: 21px; height: 21px; margin: 0; transform: translate(-50%, -50%); }
.detail-title small, .detail-title b, .detail-title span { display: block; }
.detail-title small { color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; }
.detail-title b { margin: 3px 0; font-size: 14px; }
.detail-title span { color: var(--text-secondary); font-size: 9px; }
.detail-tab-row { display: flex; gap: clamp(12px, 2.5vw, 23px); margin-top: 19px; overflow: hidden; border-bottom: 1px solid var(--border-default); color: var(--text-tertiary); white-space: nowrap; }
.detail-tab-row b, .detail-tab-row span { padding-bottom: 9px; font-size: 9px; font-weight: 500; }
.detail-tab-row b { border-bottom: 1px solid var(--brand-primary); color: var(--link); }
.field-mock { margin-top: 15px; padding: 13px; border: 1px solid var(--border-default); border-radius: 9px; background: color-mix(in srgb, var(--surface-secondary) 76%, transparent); }
.field-mock small, .binding-card small, .workflow-toolbar small, .trace-window-top small { display: block; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; letter-spacing: .06em; }
.field-mock p { margin: 8px 0 0; color: var(--text-secondary); font-size: 10px; }
.detail-two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
.binding-card { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--border-default); border-radius: 9px; background: color-mix(in srgb, var(--surface-secondary) 70%, transparent); }
.binding-card > div { min-width: 0; }
.binding-card b { display: block; overflow: hidden; margin-top: 3px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.binding-card .tiny-state { margin-left: auto; }
.publish-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-default); color: var(--text-tertiary); font-size: 8px; }
.mock-action { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 7px; background: var(--gradient); color: #fff; font-size: 8px; font-weight: 700; white-space: nowrap; }

.workflow-toolbar > div b, .trace-window-top > div b { display: block; margin-top: 3px; font-size: 11px; }
.workflow-toolbar .active-badge { margin-left: auto; border-color: color-mix(in srgb, var(--success) 35%, var(--border-default)); background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); }
.workflow-toolbar .mock-action { min-width: 65px; justify-content: center; }
.workflow-canvas { position: relative; flex: 1; min-height: 276px; overflow: hidden; background-color: color-mix(in srgb, var(--surface-primary) 88%, transparent); }
.canvas-grid { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(color-mix(in srgb, var(--border-strong) 78%, transparent) 1px, transparent 1px); background-size: 18px 18px; mask-image: linear-gradient(130deg, #000, transparent 84%); }
.flow-node { position: absolute; z-index: 2; display: grid; width: 143px; gap: 5px; padding: 11px; border: 1px solid var(--border-strong); border-radius: 10px; background: color-mix(in srgb, var(--surface-elevated) 94%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .16); }
.flow-node::after { position: absolute; top: 50%; right: -6px; width: 9px; height: 9px; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface-elevated); content: ""; transform: translateY(-50%); }
.node-kind { font: 7px "JetBrains Mono", monospace; letter-spacing: .08em; }
.flow-node b { font-size: 9px; }
.flow-node small { color: var(--text-tertiary); font-size: 7px; }
.trigger-node { top: 37px; left: 5%; border-color: color-mix(in srgb, var(--success) 45%, var(--border-default)); }
.trigger-node .node-kind { color: var(--success); }
.agent-node { top: 37px; left: 37%; border-color: color-mix(in srgb, var(--brand-secondary) 53%, var(--border-default)); }
.agent-node .node-kind { color: var(--link); }
.tool-node { top: 154px; left: 37%; border-color: color-mix(in srgb, var(--info) 50%, var(--border-default)); }
.tool-node .node-kind { color: var(--info); }
.approval-node { top: 154px; left: 69%; border-color: color-mix(in srgb, var(--brand-primary) 50%, var(--border-default)); }
.approval-node .node-kind { color: #a993ff; }
.workflow-edge { position: absolute; z-index: 1; height: 1px; border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 75%, var(--border-strong)); transform-origin: left; }
.edge-one { top: 82px; left: calc(5% + 143px); width: calc(32% - 143px); }
.edge-two { top: 82px; left: calc(37% + 70px); width: 1px; height: 72px; border-top: 0; border-left: 1px solid color-mix(in srgb, var(--brand-secondary) 75%, var(--border-strong)); }
.edge-three { top: 198px; left: calc(37% + 143px); width: calc(32% - 143px); border-color: color-mix(in srgb, var(--brand-primary) 75%, var(--border-strong)); }
.canvas-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 6px 9px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--surface-primary); color: var(--text-tertiary); font-size: 8px; }
.canvas-zoom b { color: var(--text-secondary); font-weight: 500; }
.workflow-footer { display: flex; justify-content: space-between; padding: 9px 13px; border-top: 1px solid var(--border-default); color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; }
.workflow-footer > span:first-child { display: inline-flex; align-items: center; gap: 6px; }

.trace-window-top > .badge { border-color: color-mix(in srgb, var(--success) 35%, var(--border-default)); background: color-mix(in srgb, var(--success) 8%, transparent); color: var(--success); }
.trace-layout { display: grid; flex: 1; min-height: 300px; grid-template-columns: minmax(0, 1.1fr) minmax(175px, .9fr); }
.trace-tree { padding: 15px 11px 14px; border-right: 1px solid var(--border-default); }
.trace-tree-title { display: flex; justify-content: space-between; margin: 0 0 12px 5px; color: var(--text-tertiary); font: 8px "JetBrains Mono", monospace; letter-spacing: .07em; }
.trace-tree-title span { letter-spacing: 0; }
.tree-row { position: relative; display: grid; min-height: 48px; grid-template-columns: 9px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 0 8px; border: 1px solid transparent; border-radius: 7px; }
.tree-row.selected { border-color: color-mix(in srgb, var(--brand-primary) 43%, var(--border-default)); background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-primary)); }
.tree-row:not(:last-child)::after { position: absolute; top: calc(50% + 5px); bottom: -8px; left: 12px; width: 1px; background: var(--border-strong); content: ""; }
.tree-row.indent-one { margin-left: 14px; }
.tree-row.indent-two { margin-left: 28px; }
.tree-mark { z-index: 1; width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 50%; background: var(--surface-primary); }
.user-mark { color: var(--brand-secondary); }
.model-mark { color: #a28aff; }
.tool-mark { color: var(--info); }
.tree-row b, .tree-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row b { font-size: 8px; }
.tree-row small { margin-top: 3px; color: var(--text-tertiary); font-size: 7px; }
.tree-row em { color: var(--text-tertiary); font: 7px "JetBrains Mono", monospace; font-style: normal; }
.span-inspector { padding: 15px 13px; background: color-mix(in srgb, var(--surface-secondary) 60%, transparent); }
.inspector-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.inspector-head b { font-size: 9px; }
.inspector-head span { color: var(--text-tertiary); font: 7px "JetBrains Mono", monospace; }
.inspector-field { margin-top: 12px; }
.inspector-field > small { display: block; margin-bottom: 5px; color: var(--text-tertiary); font: 7px "JetBrains Mono", monospace; }
.status-inline { display: inline-flex; align-items: center; gap: 5px; color: var(--success); font-size: 8px; font-weight: 500; }
.inspector-field code { color: var(--text-secondary); font: 8px "JetBrains Mono", monospace; }
.code-surface { padding: 9px; border: 1px solid var(--border-default); border-radius: 7px; background: var(--surface-primary); color: var(--link); font: 7px/1.8 "JetBrains Mono", monospace; }

.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin-top: 20px; }
.capability-card { position: relative; min-height: 207px; padding: 22px; overflow: hidden; border: 1px solid var(--border-default); border-radius: 12px; background: linear-gradient(145deg, color-mix(in srgb, var(--surface-secondary) 77%, transparent), var(--surface-primary) 72%); transition: transform 180ms ease, border-color 180ms ease; }
.capability-card::after { position: absolute; top: -65px; right: -75px; width: 165px; height: 165px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 15%, transparent), transparent 70%); content: ""; }
.capability-card:hover { border-color: color-mix(in srgb, var(--brand-primary) 54%, var(--border-default)); transform: translateY(-3px); }
.capability-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 42%, var(--border-default)); border-radius: 10px; background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-secondary)); color: var(--link); }
.blue-icon { border-color: color-mix(in srgb, var(--brand-secondary) 42%, var(--border-default)); background: color-mix(in srgb, var(--brand-secondary) 12%, var(--surface-secondary)); color: #70a8ff; }
.green-icon { border-color: color-mix(in srgb, var(--success) 42%, var(--border-default)); background: color-mix(in srgb, var(--success) 10%, var(--surface-secondary)); color: var(--success); }
.capability-card h3 { margin: 19px 0 7px; font-size: 14px; letter-spacing: -.035em; }
.capability-card p { max-width: 320px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }
.capability-tag { display: block; margin-top: 18px; color: var(--text-tertiary); font-size: 7px; }

.roadmap-section { position: relative; padding: 95px 0 100px; border-block: 1px solid var(--border-default); background: linear-gradient(180deg, color-mix(in srgb, var(--surface-secondary) 50%, transparent), color-mix(in srgb, var(--background-secondary) 52%, transparent)); }
.roadmap-heading { margin-bottom: 32px; }
.roadmap-heading h2 { max-width: 650px; }
.roadmap-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.roadmap-card { min-height: 245px; padding: 21px; border: 1px solid var(--border-default); border-radius: 12px; background: color-mix(in srgb, var(--surface-primary) 88%, transparent); }
.roadmap-card-top { display: flex; align-items: center; justify-content: space-between; }
.roadmap-icon { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--border-default)); border-radius: 10px; background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface-secondary)); color: var(--link); }
.deploy-icon { border-color: color-mix(in srgb, var(--brand-secondary) 38%, var(--border-default)); background: color-mix(in srgb, var(--brand-secondary) 9%, var(--surface-secondary)); color: #70a8ff; }
.monitor-icon { border-color: color-mix(in srgb, var(--info) 35%, var(--border-default)); background: color-mix(in srgb, var(--info) 8%, var(--surface-secondary)); color: var(--info); }
.planned-badge { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--border-default)); border-radius: 99px; background: color-mix(in srgb, var(--warning) 7%, transparent); color: var(--warning); font: 8px "JetBrains Mono", monospace; }
.planned-badge i { width: 5px; height: 5px; }
.roadmap-card h3 { margin: 19px 0 7px; font-size: 17px; letter-spacing: -.04em; }
.roadmap-card p { min-height: 74px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.roadmap-foot { display: block; margin-top: 18px; color: var(--text-tertiary); font-size: 9px; }
.roadmap-note { margin: 15px 0 0; color: var(--text-tertiary); font-size: 10px; text-align: right; }

.architecture-section { padding-top: 104px; padding-bottom: 104px; }
.architecture-grid { display: grid; grid-template-columns: minmax(270px, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(52px, 8vw, 110px); }
.architecture-copy h2 { font-size: clamp(34px, 4vw, 50px); }
.architecture-copy > p { max-width: 450px; margin: 17px 0 0; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 20px; color: var(--link); font-size: 11px; font-weight: 600; }
.text-link .icon { width: 13px; height: 13px; }
.principles-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.principle-card { min-height: 153px; padding: 17px; border: 1px solid var(--border-default); border-radius: 11px; background: var(--surface-primary); }
.principle-icon { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-secondary)); color: var(--link); }
.principle-icon .icon { width: 15px; height: 15px; }
.principle-card b { display: block; margin-top: 13px; font-size: 13px; }
.principle-card p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.55; }

.final-cta { position: relative; isolation: isolate; display: flex; min-height: 305px; align-items: center; overflow: hidden; padding: 45px clamp(26px, 6vw, 75px); border: 1px solid color-mix(in srgb, var(--brand-primary) 45%, var(--border-default)); border-radius: 18px; background: linear-gradient(105deg, color-mix(in srgb, var(--surface-primary) 96%, transparent), color-mix(in srgb, var(--surface-secondary) 84%, transparent)); box-shadow: var(--shadow-glow); }
.cta-art { position: absolute; z-index: -1; inset: 0 0 0 30%; opacity: .55; background: linear-gradient(90deg, var(--surface-primary), transparent 55%), url("assets/hero-v-abstract.webp") center 53%/cover no-repeat; }
[data-theme="light"] .cta-art { opacity: .19; }
.cta-content { max-width: 610px; }
.cta-content h2 { margin: 14px 0 10px; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.07em; line-height: 1.05; }
.cta-content p { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.cta-content .button { margin-top: 22px; }
.cta-mark { position: absolute; right: 70px; color: color-mix(in srgb, var(--brand-primary) 15%, transparent); font-size: clamp(160px, 24vw, 290px); font-weight: 800; letter-spacing: -.13em; line-height: .8; pointer-events: none; }
.site-footer { margin-top: 84px; border-top: 1px solid var(--border-default); }
.footer-row { display: flex; min-height: 90px; align-items: center; justify-content: space-between; gap: 22px; }
.footer-brand { min-width: auto; font-size: 15px; }
.footer-brand img { width: 33px; height: 33px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; color: var(--text-secondary); font-size: 10px; }
.footer-links a { display: inline-flex; align-items: center; gap: 4px; }
.footer-links .icon { width: 11px; height: 11px; }
.footer-copy { color: var(--text-tertiary); font: 9px "JetBrains Mono", monospace; white-space: nowrap; }

[data-reveal] { opacity: 1; transform: none; }
[data-reveal-ready="true"] [data-reveal] { opacity: 0; transform: translateY(15px); transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .2, 1); }
[data-reveal-ready="true"] [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .container { width: min(100% - 48px, 980px); }
  .hero-grid { grid-template-columns: minmax(285px, .74fr) minmax(0, 1.26fr); gap: 25px; }
  .hero h1 { font-size: clamp(44px, 5.4vw, 61px); }
  .app-preview { grid-template-columns: 118px minmax(0, 1fr); min-height: 455px; }
  .preview-sidebar { padding-inline: 8px; }
  .preview-main { padding-inline: 13px; }
  .playground-workspace { grid-template-columns: minmax(0, 1fr) minmax(195px, .88fr); gap: 8px; }
  .chat-panel { padding: 8px; }
  .trace-panel { padding-inline: 7px; }
  .chip-workflow { right: -12px; }
  .chip-version { left: -12px; }
  .showcase-row { gap: 40px; }
}

@media (max-width: 820px) {
  :root { --header-height: 70px; }
  .container { width: min(100% - 40px, 700px); }
  .site-nav { display: none; position: absolute; top: calc(100% + 1px); right: 20px; left: 20px; flex-direction: column; align-items: stretch; gap: 2px; padding: 9px; border: 1px solid var(--border-default); border-radius: 12px; background: var(--surface-elevated); box-shadow: var(--shadow-card); }
  .site-nav.is-open { display: flex; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; padding: 0 12px; border-radius: 7px; }
  .site-nav a:hover { background: var(--surface-hover); }
  .brand { min-width: 0; }
  .nav-actions { min-width: 0; }
  .menu-toggle { display: inline-grid; }
  .hero { padding: 65px 0 60px; }
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-copy-block { max-width: 650px; }
  .hero h1 { max-width: 620px; font-size: clamp(50px, 8vw, 72px); }
  .hero-art { top: -40px; right: -150px; width: 1050px; height: 880px; opacity: .52; }
  [data-theme="light"] .hero-art { opacity: .25; }
  .hero-stage { width: min(100%, 700px); margin-inline: auto; }
  .product-window { transform: none; }
  .connect-row { align-items: flex-start; flex-direction: column; justify-content: center; gap: 12px; padding-block: 18px; }
  .connect-items { justify-content: flex-start; }
  .section-heading, .roadmap-heading { grid-template-columns: 1fr; gap: 15px; margin-bottom: 30px; }
  .section-heading > p, .roadmap-heading > p { max-width: 600px; }
  .journey-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey-step { border-bottom: 1px solid var(--border-default); }
  .journey-step:nth-child(2) { border-right: 0; }
  .journey-step:nth-child(3), .journey-step:nth-child(4) { border-bottom: 0; }
  .showcase-row, .architecture-grid { grid-template-columns: 1fr; gap: 25px; margin-block: 48px; }
  .showcase-row:first-of-type { margin-top: 40px; }
  .showcase-copy { max-width: 610px; }
  .showcase-visual { height: clamp(360px, 58vw, 430px); }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 180px; }
  .roadmap-section { padding-block: 76px; }
  .roadmap-grid { grid-template-columns: 1fr; }
  .roadmap-card { min-height: 210px; }
  .roadmap-card p { min-height: auto; }
  .principles-grid { max-width: 640px; }
  .footer-row { flex-wrap: wrap; justify-content: space-between; padding-block: 20px; }
}

@media (max-width: 560px) {
  :root { --header-height: 64px; }
  .container { width: calc(100% - 32px); }
  .brand { gap: 7px; font-size: 16px; }
  .brand img { width: 33px; height: 33px; }
  .nav-actions { gap: 7px; }
  .nav-cta { display: none; }
  .icon-button { width: 44px; height: 44px; }
  .hero { padding: 53px 0 47px; }
  .hero-grid { gap: 38px; }
  .hero h1 { margin: 17px 0; font-size: clamp(42px, 12vw, 57px); }
  .hero-copy { font-size: 15px; line-height: 1.68; }
  .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 23px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 10px 14px; margin-top: 22px; font-size: 11px; }
  .hero-art { top: -16px; right: -300px; width: 900px; height: 770px; opacity: .43; }
  [data-theme="light"] .hero-art { opacity: .21; }
  .app-preview { grid-template-columns: 1fr; min-height: auto; }
  .preview-sidebar { display: none; }
  .preview-main { padding: 11px; }
  .playground-toolbar { min-height: 43px; padding-bottom: 8px; }
  .playground-workspace { flex: initial; grid-template-columns: 1fr; gap: 8px; padding-top: 8px; }
  .chat-panel { min-height: 270px; }
  .trace-panel { min-height: 300px; }
  .chat-thread { align-content: center; }
  .message-content p { font-size: 10px; }
  .floating-chip { padding: 7px; }
  .floating-chip .mini-icon { width: 23px; height: 23px; }
  .floating-chip b { font-size: 8px; }
  .floating-chip small { font-size: 6px; }
  .chip-workflow { top: auto; right: -5px; bottom: -22px; }
  .chip-version { bottom: auto; top: -20px; left: -5px; }
  .stage-caption { margin-top: 26px; font-size: 7px; }
  .connect-row { gap: 10px; }
  .connect-items { gap: 7px; }
  .connect-items span { min-height: 32px; padding-inline: 9px; font-size: 11px; }
  .section { padding-block: 73px; }
  .section-heading h2, .roadmap-heading h2 { font-size: 36px; }
  .section-heading > p, .roadmap-heading > p { font-size: 15px; }
  .journey-section { padding-bottom: 65px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-step { min-height: auto; padding: 18px; border-right: 0; border-bottom: 1px solid var(--border-default) !important; }
  .journey-step:last-child { border-bottom: 0 !important; }
  .journey-step h3 { margin-top: 15px; }
  .journey-step p { min-height: 0; font-size: 14px; }
  .step-link { margin-top: 12px; }
  .product-section { padding-top: 66px; }
  .showcase-row { gap: 18px; margin-block: 39px; padding-bottom: 36px; }
  .architecture-grid { gap: 19px; margin-block: 53px; }
  .showcase-copy h3 { font-size: 29px; }
  .showcase-copy > p { font-size: 15px; }
  .detail-list { gap: 10px; font-size: 14px; }
  .showcase-visual { height: clamp(330px, 84vw, 390px); }
  .detail-window-bar, .workflow-toolbar, .trace-window-top { padding-inline: 11px; }
  .detail-window-content { padding: 12px; }
  .detail-tab-row { gap: 12px; }
  .detail-tab-row b, .detail-tab-row span { font-size: 7px; }
  .field-mock { padding: 10px; }
  .binding-card { gap: 6px; padding: 7px; }
  .binding-card .mini-icon { width: 23px; height: 23px; }
  .publish-bar { align-items: flex-start; flex-direction: column; }
  .workflow-canvas { min-height: 235px; }
  .flow-node { width: clamp(86px, 27vw, 100px); padding: 8px; }
  .flow-node b { font-size: 8px; }
  .flow-node small { font-size: 6px; }
  .trigger-node { left: 4%; }
  .agent-node, .tool-node { left: 37%; }
  .approval-node { left: 67%; right: auto; }
  .edge-one { left: calc(4% + clamp(86px, 27vw, 100px)); width: calc(33% - clamp(86px, 27vw, 100px)); }
  .edge-two { left: calc(37% + clamp(43px, 13.5vw, 50px)); height: 57px; }
  .edge-three { left: calc(37% + clamp(86px, 27vw, 100px)); width: calc(30% - clamp(86px, 27vw, 100px)); }
  .trace-layout { grid-template-columns: minmax(0, 1fr) 145px; min-height: 270px; }
  .trace-tree { padding-inline: 7px; }
  .tree-row { gap: 6px; padding-inline: 4px; }
  .tree-row.indent-one { margin-left: 8px; }
  .tree-row.indent-two { margin-left: 16px; }
  .tree-row b { font-size: 7px; }
  .span-inspector { padding-inline: 9px; }
  .inspector-head b { font-size: 8px; }
  .capability-card { min-height: 170px; padding: 18px; }
  .capability-card p, .roadmap-card p { font-size: 14px; }
  .roadmap-section { padding-block: 67px; }
  .roadmap-card { min-height: 195px; padding: 18px; }
  .roadmap-note { text-align: left; }
  .architecture-section { padding-block: 74px; }
  .architecture-copy h2 { font-size: 38px; }
  .architecture-copy > p { font-size: 15px; }
  .principles-grid { gap: 8px; }
  .principle-card { min-height: 145px; padding: 12px; }
  .principle-card b { font-size: 12px; }
  .principle-card p { font-size: 12px; }
  .final-cta { min-height: 285px; padding: 29px 21px; border-radius: 14px; }
  .cta-content h2 { font-size: 36px; }
  .cta-content p { max-width: 290px; font-size: 14px; line-height: 1.6; }
  .cta-mark { right: 8px; bottom: 17px; font-size: 150px; }
  .site-footer { margin-top: 58px; }
  .footer-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .footer-links { justify-content: flex-start; gap: 15px; }
  .footer-links a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal-ready="true"] [data-reveal] { opacity: 1; transform: none; }
  .button:hover, .capability-card:hover { transform: none; }
}

@media (forced-colors: active) {
  .button-primary { border: 1px solid ButtonText; }
  .planned-badge, .badge, .version-badge { border: 1px solid currentColor; }
}