:root {
  --ink: #111415;
  --muted: #626b68;
  --line: rgba(17, 20, 21, 0.12);
  --line-dark: rgba(255, 255, 255, 0.13);
  --paper: #f7f8f5;
  --white: #fff;
  --mint: #91e5b3;
  --mint-pale: #dff7e8;
  --blue: #9ed6ff;
  --blue-pale: #e1f2ff;
  --violet: #c9b8ff;
  --violet-pale: #eee9ff;
  --amber: #ffcf87;
  --radius: 28px;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; }
img, svg { display: block; }

.shell { width: min(1400px, calc(100% - 32px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: 12px; top: -60px; padding: 10px 16px; border-radius: 8px; background: var(--ink); color: #fff; transition: top .2s; }
.skip-link:focus { top: 12px; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 50%;
  width: min(1368px, calc(100% - 56px));
  height: 66px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px 0 16px;
  border: 1px solid transparent;
  border-radius: 18px;
  transition: background .3s, border-color .3s, box-shadow .3s, top .3s;
}
.site-header.scrolled {
  top: 8px;
  background: rgba(255,255,255,.86);
  border-color: rgba(17,20,21,.1);
  box-shadow: 0 12px 40px rgba(27,45,38,.08);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14px; }
.site-nav a { position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: -7px; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transition: transform .2s; }
.site-nav a:hover::after { transform: scaleX(1); }
.header-cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; }
.header-cta svg, .button svg { width: 16px; height: 16px; fill: currentColor; }
.menu-button { display: none; border: 0; background: none; padding: 10px; }

.hero {
  position: relative;
  overflow: hidden;
  min-height: 970px;
  padding: 122px 40px 50px;
  border-radius: 0 0 38px 38px;
  background:
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
    linear-gradient(135deg, #e8f5ff 0%, #dff7ec 48%, #eee9ff 100%);
  background-size: 48px 48px, 48px 48px, auto;
}
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 27%, rgba(255,255,255,.78), transparent 34%); pointer-events: none; }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(55px); opacity: .45; pointer-events: none; }
.hero-glow--one { width: 500px; height: 400px; left: -180px; top: 180px; background: #a7ddff; }
.hero-glow--two { width: 450px; height: 450px; right: -130px; top: 50px; background: #d2bfff; }
.hero-copy { position: relative; z-index: 2; max-width: 900px; margin: 0 auto 44px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; border: 1px solid rgba(17,20,21,.16); border-radius: 999px; background: rgba(255,255,255,.35); backdrop-filter: blur(10px); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #20a65a; box-shadow: 0 0 0 4px rgba(32,166,90,.12); }
.eyebrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero h1 { margin: 24px 0 20px; font-size: clamp(60px, 6.2vw, 90px); line-height: .92; letter-spacing: -.075em; font-weight: 500; }
.hero h1 span { color: #5a5e5f; font-weight: 400; }
.hero-copy > p:not(.hero-note) { max-width: 680px; margin: 0 auto; color: #39423f; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.56; letter-spacing: -.025em; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 21px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 500; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button--primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: 0 10px 25px rgba(17,20,21,.16); }
.button--primary:hover { background: #2a3030; }
.button--secondary { background: rgba(255,255,255,.54); backdrop-filter: blur(12px); }
.button--secondary:hover { background: rgba(255,255,255,.82); }
.hero-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 20px 0 0; color: #65706c; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.hero-note span { color: #313937; padding-right: 8px; border-right: 1px solid rgba(17,20,21,.16); }

.product-stage { position: relative; z-index: 3; width: min(1200px, 100%); height: 520px; margin: 0 auto -135px; overflow: hidden; border: 1px solid rgba(17,20,21,.2); border-radius: 18px; background: #f5f7f4; box-shadow: 0 45px 100px rgba(47,67,60,.22), 0 4px 10px rgba(17,20,21,.08); }
.stage-bar { height: 48px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; border-bottom: 1px solid #d9ded9; background: #fff; }
.window-dots { display: flex; gap: 6px; }
.window-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e4e7e3; }
.window-dots i:first-child { background: #ff8a7e; }.window-dots i:nth-child(2) { background: #ffd56e; }.window-dots i:nth-child(3) { background: #74d793; }
.stage-title { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: #59635f; }
.stage-title img { width: 16px; height: 16px; border-radius: 5px; }
.runtime-status { justify-self: end; display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9px; color: #68716d; text-transform: uppercase; letter-spacing: .04em; }
.runtime-status span { width: 6px; height: 6px; border-radius: 50%; background: #35b76b; box-shadow: 0 0 0 3px rgba(53,183,107,.12); }
.stage-body { display: grid; grid-template-columns: 56px 1fr 250px; height: calc(100% - 48px); }
.stage-sidebar { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 12px 0; border-right: 1px solid #d9ded9; background: #fbfcfa; }
.mini-brand img { width: 28px; height: 28px; margin-bottom: 10px; }
.side-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #86908c; }
.side-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.side-icon.active { background: #e4f2e8; color: #1d6f42; }
.side-icon--bottom { margin-top: auto; }
.workflow-canvas { min-width: 0; position: relative; background-color: #f7f8f5; background-image: radial-gradient(#cbd2cc .75px, transparent .75px); background-size: 16px 16px; }
.canvas-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 68px; padding: 0 18px; border-bottom: 1px solid rgba(17,20,21,.08); background: rgba(247,248,245,.84); backdrop-filter: blur(7px); }
.canvas-head > div:first-child, .run-head > div, .logic-top > div { display: flex; flex-direction: column; gap: 4px; }
.micro-label, .section-kicker { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; color: #7a837f; }
.canvas-head strong, .run-head strong, .logic-top strong { font-size: 12px; font-weight: 600; }
.canvas-tools { display: flex; align-items: center; height: 28px; border: 1px solid rgba(17,20,21,.11); border-radius: 7px; background: #fff; }
.canvas-tools button { width: 28px; height: 26px; border: 0; background: none; color: #77817d; cursor: pointer; }
.canvas-tools span { min-width: 35px; text-align: center; font-family: var(--mono); font-size: 9px; color: #69736f; }
.graph { position: relative; width: 760px; max-width: 100%; height: calc(100% - 68px); margin: 0 auto; transform-origin: top left; }
.connectors { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.connectors path { fill: none; stroke: #98a39e; stroke-width: 1.4; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.connectors .return-path { stroke: #efb65f; }
.flow-node { position: absolute; z-index: 2; min-width: 140px; display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #cbd2cc; border-radius: 10px; background: rgba(255,255,255,.96); box-shadow: 0 6px 14px rgba(33,48,42,.06); transition: border-color .35s, box-shadow .35s, transform .35s; }
.flow-node.active { border-color: #4aab73; box-shadow: 0 0 0 3px rgba(74,171,115,.12), 0 8px 24px rgba(33,48,42,.1); transform: translateY(-2px); }
.flow-node > div:last-child { display: flex; flex-direction: column; gap: 2px; }
.flow-node small { font-family: var(--mono); font-size: 7px; letter-spacing: .06em; color: #8a938f; }
.flow-node strong { font-size: 10px; font-weight: 600; }
.flow-node em { max-width: 90px; color: #7c8581; font-family: var(--mono); font-size: 7px; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-icon { flex: 0 0 auto; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #217143; background: var(--mint-pale); }
.node-icon.violet { color: #6652a7; background: var(--violet-pale); }.node-icon.amber { color: #946420; background: #fff1db; }.node-icon.blue { color: #2d719f; background: var(--blue-pale); }.node-icon.green { color: #217143; background: var(--mint-pale); }
.node-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.flow-node--start { left: 3%; top: 34%; min-width: 98px; }.flow-node--research { left: 23%; top: 10%; }.flow-node--review { left: 23%; top: 61%; }.flow-node--judge { left: 56%; top: 34%; }.flow-node--done { right: 1%; top: 34%; min-width: 105px; }
.node-port { position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; border: 1px solid #9aa49f; }.node-port.left { left: -4px; }.node-port.right { right: -4px; }.node-port.bottom { left: 50%; top: auto; bottom: -4px; margin: 0 0 0 -3px; }
.edge-label { position: absolute; z-index: 1; padding: 3px 6px; border-radius: 4px; background: rgba(247,248,245,.9); color: #8a938f; font-family: var(--mono); font-size: 7px; }.edge-label--one { left: 17%; top: 22%; }.edge-label--two { left: 39%; bottom: 7%; color: #aa762f; }
.run-panel { display: flex; flex-direction: column; min-width: 0; padding: 17px 14px 12px; border-left: 1px solid #d9ded9; background: #fff; }
.run-head { display: flex; justify-content: space-between; align-items: flex-start; }.run-live { padding: 4px 6px; border-radius: 4px; background: #e2f5e9; color: #237347; font-family: var(--mono); font-size: 7px; }
.run-progress { height: 4px; margin-top: 20px; overflow: hidden; border-radius: 99px; background: #e9ede9; }.run-progress span { display: block; width: 62%; height: 100%; border-radius: inherit; background: #51b77a; }
.run-meta { display: flex; justify-content: space-between; margin-top: 7px; color: #838c88; font-family: var(--mono); font-size: 8px; }
.activity-list { margin-top: 22px; }.activity { position: relative; display: flex; gap: 10px; min-height: 58px; }.activity:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 18px; bottom: -1px; width: 1px; background: #dce1dd; }.activity > span { z-index: 1; flex: 0 0 auto; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #cdd3ce; background: #fff; }.activity.done > span { display: grid; place-items: center; background: #3fae6e; border-color: #3fae6e; }.activity.done svg { width: 9px; height: 9px; fill: none; stroke: #fff; stroke-width: 2; }.activity.current > span { background: #fff; border: 4px solid #b39df4; box-shadow: 0 0 0 4px rgba(179,157,244,.15); }.activity p { display: flex; flex-direction: column; gap: 4px; margin: 0; }.activity strong { font-size: 9px; font-weight: 500; }.activity small { color: #88918d; font-family: var(--mono); font-size: 7px; }
.run-footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; border-top: 1px solid #e3e7e3; }.run-footer span { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 7px; color: #7d8782; }.run-footer i { width: 5px; height: 5px; border-radius: 50%; background: #3fae6e; }.run-footer button { border: 0; background: none; color: #4f5a56; font-family: var(--mono); font-size: 7px; }
.statement { padding: 270px 20px 150px; text-align: center; }
.section-kicker { margin: 0 0 20px; color: #727b77; font-size: 10px; }
.statement h2, .workflow-copy h2, .models-heading h2, .workspace-heading h2, .source-copy h2, .final-cta h2 { margin: 0; font-size: clamp(45px, 5.5vw, 78px); line-height: 1.02; letter-spacing: -.06em; font-weight: 500; }
.statement-copy { max-width: 890px; margin: 30px auto 0; color: #afb4b1; font-size: clamp(27px, 3.3vw, 48px); line-height: 1.22; letter-spacing: -.045em; }
.statement-copy span { color: var(--ink); }

.bento { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.bento-card { position: relative; overflow: hidden; min-height: 500px; padding: 38px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.bento-card--large { min-height: 560px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch; grid-column: 1 / -1; background: #edf8f2; }
.card-copy { align-self: center; max-width: 450px; }
.card-number { position: absolute; right: 30px; top: 25px; color: #a5adaa; font-family: var(--mono); font-size: 11px; }
.bento-card h3 { margin: 0 0 20px; font-size: clamp(34px, 3.7vw, 56px); line-height: 1.03; letter-spacing: -.055em; font-weight: 500; }
.bento-card p:not(.section-kicker) { max-width: 470px; margin: 0; color: var(--muted); line-height: 1.65; letter-spacing: -.01em; }
.local-visual { position: relative; min-height: 470px; }
.local-core { position: absolute; z-index: 5; left: 50%; top: 50%; width: 145px; height: 145px; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(17,20,21,.18); border-radius: 38px; background: rgba(255,255,255,.85); box-shadow: 0 20px 45px rgba(33,67,52,.15); backdrop-filter: blur(12px); }
.local-core img { width: 48px; height: 48px; margin-bottom: 10px; }.local-core span { font-family: var(--mono); font-size: 11px; }.local-core small { margin-top: 4px; color: #84908a; font-family: var(--mono); font-size: 8px; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(38,93,65,.22); border-radius: 50%; transform: translate(-50%,-50%); }.orbit--one { width: 225px; height: 225px; }.orbit--two { width: 350px; height: 350px; }.orbit--three { width: 460px; height: 460px; }
.satellite { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 10px; border: 1px solid rgba(17,20,21,.13); border-radius: 9px; background: rgba(255,255,255,.9); box-shadow: 0 8px 20px rgba(30,58,46,.08); font-size: 10px; }
.satellite span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: #335c47; background: #dff3e7; font-family: var(--mono); font-size: 7px; }.satellite--one { left: 8%; top: 25%; }.satellite--two { right: 2%; top: 35%; }.satellite--three { left: 25%; bottom: 8%; }
.provider-stack { margin-top: 46px; }.provider-stack > div { position: relative; display: grid; grid-template-columns: 35px 1fr auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }.provider-stack > div:last-child { border-bottom: 1px solid var(--line); }.provider-mark { grid-row: 1 / 3; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--mint-pale); font-family: var(--mono); font-size: 10px; }.provider-mark--blue { background: var(--blue-pale); }.provider-mark--dark { background: #eceeeb; }.provider-stack strong { font-size: 12px; font-weight: 500; }.provider-stack small { color: #8a928f; font-family: var(--mono); font-size: 8px; }.provider-stack i { grid-row: 1 / 3; font-family: var(--mono); font-size: 8px; font-style: normal; color: #9ba29f; }.provider-stack .provider-ok { padding: 4px 6px; border-radius: 4px; color: #2e7b50; background: #e5f6eb; }
.bento-card--dark { color: #f1f4f1; background: #151817; border-color: #151817; }.bento-card--dark .section-kicker, .bento-card--dark .card-number { color: #68716d; }.bento-card--dark p:not(.section-kicker) { color: #9ca4a0; }
.code-window { margin-top: 60px; padding: 0 18px 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #0c0e0d; }.code-dots { display: flex; gap: 5px; height: 35px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }.code-dots span { width: 6px; height: 6px; border-radius: 50%; background: #515854; }.code-window code { display: block; padding-top: 18px; color: #c4cac6; font-family: var(--mono); font-size: 10px; line-height: 2.3; }.code-window i { color: #6d7872; font-style: normal; }.code-window span { color: var(--mint); }

.workflow-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(50px, 8vw, 130px); align-items: center; padding-top: 180px; padding-bottom: 180px; }
.workflow-copy { padding-left: 30px; }.workflow-copy h2 { font-size: clamp(52px, 5.6vw, 82px); }.workflow-copy > p:not(.section-kicker) { max-width: 500px; margin: 28px 0 0; color: var(--muted); line-height: 1.7; }.check-list { list-style: none; padding: 0; margin: 44px 0 0; border-top: 1px solid var(--line); }.check-list li { display: flex; align-items: center; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.check-list span { color: #919995; font-family: var(--mono); font-size: 9px; }
.logic-driver { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(31,43,37,.1); }.logic-top { display: flex; align-items: center; justify-content: space-between; height: 70px; padding: 0 21px; border-bottom: 1px solid var(--line); }.version-pill { padding: 6px 9px; border-radius: 99px; background: #e1f5e9; color: #2f7950; font-family: var(--mono); font-size: 8px; }.logic-canvas { position: relative; height: 430px; overflow: hidden; background-color: #f7f8f5; background-image: radial-gradient(#ccd2cd .7px, transparent .7px); background-size: 15px 15px; }.logic-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; }.logic-canvas path { fill: none; stroke: #9ba49f; stroke-width: 1.4; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }.logic-canvas .logic-return { stroke: #dda752; }.logic-node { position: absolute; z-index: 2; min-width: 110px; padding: 11px 12px; border: 1px solid #cdd3ce; border-radius: 9px; background: #fff; box-shadow: 0 6px 15px rgba(30,48,39,.07); }.logic-node i { position: absolute; right: 9px; top: 10px; width: 6px; height: 6px; border-radius: 50%; }.green-dot { background: #49b473; }.violet-dot { background: #9d86e7; }.amber-dot { background: #e7aa4d; }.blue-dot { background: #5fa9db; }.logic-node span { display: block; color: #8a938f; font-family: var(--mono); font-size: 7px; letter-spacing: .05em; }.logic-node strong { display: block; margin-top: 5px; font-size: 10px; }.logic-node small { display: block; margin-top: 3px; color: #8c9490; font-family: var(--mono); font-size: 7px; }.n1 { left: 3%; top: 37%; }.n2 { left: 30%; top: 12%; }.n3 { left: 30%; top: 56%; }.n4 { left: 68%; top: 37%; }.n5 { right: 2%; top: 37%; min-width: 85px; }.logic-tag { position: absolute; z-index: 1; padding: 3px 6px; background: rgba(247,248,245,.9); color: #8f9793; font-family: var(--mono); font-size: 7px; }.tag1 { left: 48%; bottom: 11%; color: #a87023; }.tag2 { right: 12%; top: 42%; }.logic-footer { height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; border-top: 1px solid var(--line); }.logic-footer > span { display: flex; align-items: center; gap: 6px; color: #858e89; font-family: var(--mono); font-size: 8px; }.logic-footer > span i { width: 5px; height: 5px; border-radius: 50%; background: #45b472; }.logic-footer button { height: 31px; padding: 0 10px; border: 1px solid #cdd3ce; border-radius: 7px; background: #fff; font-size: 9px; }.logic-footer b { margin-left: 8px; color: #909894; font-family: var(--mono); font-size: 7px; font-weight: 400; }

.models-section { padding: 145px 0; background: #e8f2ff; border-radius: 38px; }.models-heading { max-width: 810px; margin: 0 auto; text-align: center; }.models-heading h2 { font-size: clamp(50px, 6vw, 86px); }.models-heading > p:last-child { max-width: 580px; margin: 25px auto 0; color: #596561; line-height: 1.65; }.model-rail { display: flex; gap: 10px; margin-top: 65px; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: none; }.model-rail::-webkit-scrollbar { display: none; }.model-chip { flex: 1 0 175px; display: flex; align-items: center; gap: 11px; min-height: 66px; padding: 0 15px; border: 1px solid rgba(17,20,21,.11); border-radius: 14px; background: rgba(255,255,255,.55); }.model-chip b { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 9px; background: #fff; box-shadow: 0 4px 10px rgba(22,42,60,.07); font-family: var(--mono); font-size: 9px; }.model-chip span { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 500; white-space: nowrap; }.model-chip small { color: #75817c; font-family: var(--mono); font-size: 7px; font-weight: 400; text-transform: uppercase; }.model-chip--more { background: rgba(17,20,21,.9); color: #fff; }.model-chip--more b { color: var(--ink); }
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 50px; }.role-card { position: relative; min-height: 310px; padding: 28px; border: 1px solid rgba(17,20,21,.11); border-radius: 20px; background: rgba(255,255,255,.55); }.role-icon { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid rgba(17,20,21,.13); border-radius: 50%; font-family: var(--mono); font-size: 8px; }.role-card h3 { margin: 35px 0 12px; font-size: 30px; letter-spacing: -.04em; font-weight: 500; }.role-card p { max-width: 310px; margin: 0; color: #63706b; font-size: 13px; line-height: 1.6; }.role-card > div { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: center; gap: 7px; padding-top: 14px; border-top: 1px solid rgba(17,20,21,.1); font-family: var(--mono); font-size: 9px; }.role-card > div i { width: 6px; height: 6px; border-radius: 50%; background: #43ae70; }.role-card > div small { margin-left: auto; color: #77837e; font-size: 7px; }

.workspace-section { padding-top: 160px; padding-bottom: 160px; }.workspace-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 75px; }.workspace-heading h2 { max-width: 720px; }.workspace-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.workspace-card { position: relative; min-height: 390px; padding: 28px 25px; border-right: 1px solid var(--line); }.workspace-card:first-child { border-left: 1px solid var(--line); }.workspace-index { position: absolute; right: 20px; top: 20px; color: #9aa19e; font-family: var(--mono); font-size: 9px; }.workspace-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: #e6f0ea; }.workspace-card:nth-child(2) .workspace-icon { background: var(--violet-pale); }.workspace-card:nth-child(3) .workspace-icon { background: #fff0d9; }.workspace-card:nth-child(4) .workspace-icon { background: var(--blue-pale); }.workspace-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.4; }.workspace-card h3 { margin: 175px 0 14px; font-size: 21px; letter-spacing: -.03em; font-weight: 500; }.workspace-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.open-source { position: relative; overflow: hidden; display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: center; min-height: 650px; padding: 70px; border-radius: 35px; color: #f4f6f4; background: #111413; }.source-glow { position: absolute; width: 650px; height: 650px; left: -350px; bottom: -350px; border-radius: 50%; background: #3e7c5b; filter: blur(100px); opacity: .35; }.source-copy { position: relative; z-index: 2; }.source-copy .section-kicker { color: #7f8e86; }.source-copy h2 { font-size: clamp(48px, 5vw, 72px); }.source-copy > p:not(.section-kicker) { max-width: 500px; margin: 25px 0 0; color: #98a29d; line-height: 1.65; }.source-actions { display: flex; align-items: center; gap: 25px; margin-top: 35px; }.button--light { color: var(--ink); background: #f5f7f4; border-color: #f5f7f4; }.text-link { display: inline-flex; gap: 8px; color: #b5bdb9; font-size: 13px; }.source-terminal { position: relative; z-index: 2; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: #0b0d0c; box-shadow: 0 30px 80px rgba(0,0,0,.35); }.terminal-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 48px; padding: 0 14px; border-bottom: 1px solid rgba(255,255,255,.1); }.terminal-head > div { display: flex; gap: 6px; }.terminal-head i { width: 7px; height: 7px; border-radius: 50%; background: #454a47; }.terminal-head span { color: #69716d; font-family: var(--mono); font-size: 8px; }.terminal-head button { justify-self: end; border: 0; background: none; color: #8f9893; font-family: var(--mono); font-size: 8px; cursor: pointer; }.source-terminal pre { min-height: 340px; margin: 0; padding: 45px 30px; overflow-x: auto; }.source-terminal code { color: #d2d7d3; font-family: var(--mono); font-size: clamp(9px, .9vw, 12px); line-height: 2.2; }.source-terminal .muted { color: #59605c; }.source-terminal .prompt { color: #89938d; }.source-terminal .success { color: var(--mint); }.source-terminal .accent { color: var(--blue); }

.final-cta { padding: 185px 20px 150px; text-align: center; }.final-cta > img { margin: 0 auto 26px; }.final-cta h2 { margin-top: 10px; font-size: clamp(55px, 7vw, 100px); }.final-cta > p:not(.section-kicker) { margin: 24px 0 34px; color: var(--muted); font-size: 18px; }
.site-footer { min-height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid var(--line); color: #747d79; font-size: 11px; }.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 600; }.site-footer p { font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }.site-footer nav { justify-self: end; display: flex; gap: 20px; }.site-footer a:hover { color: var(--ink); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delay, 0ms); }.reveal.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 1fr auto; }.site-nav { display: none; }.header-cta { grid-column: 2; }
  .hero { padding-inline: 22px; }.stage-body { grid-template-columns: 52px 1fr 220px; }.flow-node--done { display: none; }.connectors [data-edge="publish"] { display: none; }
  .workflow-section { grid-template-columns: 1fr; }.workflow-copy { padding-left: 20px; max-width: 760px; }.logic-driver { width: 100%; }.logic-canvas { max-width: 780px; margin-inline: auto; width: 100%; }
  .workspace-grid { grid-template-columns: repeat(2,1fr); }.workspace-card:nth-child(2) { border-right: 1px solid var(--line); }.workspace-card:nth-child(3) { border-left: 1px solid var(--line); border-top: 1px solid var(--line); }.workspace-card:nth-child(4) { border-top: 1px solid var(--line); }
  .open-source { grid-template-columns: 1fr; }.source-copy { max-width: 700px; }.source-terminal pre { min-height: 260px; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 20px, 1400px); }
  .site-header { width: calc(100% - 30px); height: 58px; grid-template-columns: 1fr auto; padding: 0 10px; background: rgba(255,255,255,.75); border-color: rgba(17,20,21,.1); backdrop-filter: blur(16px); }.header-cta { display: none; }.menu-button { display: flex; width: 40px; height: 40px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }.menu-button span:not(.sr-only) { width: 18px; height: 1px; background: var(--ink); transition: transform .25s; }.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }.menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: fixed; top: 66px; left: 0; right: 0; display: flex; visibility: hidden; opacity: 0; transform: translateY(-8px); flex-direction: column; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 20px 40px rgba(17,20,21,.12); transition: opacity .2s, transform .2s, visibility .2s; }.site-nav.open { visibility: visible; opacity: 1; transform: translateY(0); }.site-nav a { padding: 14px; border-bottom: 1px solid var(--line); }.site-nav a:last-child { border-bottom: 0; }.site-nav a::after { display: none; }
  .hero { min-height: auto; padding: 120px 12px 18px; border-radius: 0 0 25px 25px; background-size: 32px 32px, 32px 32px, auto; }.hero h1 { margin-top: 24px; font-size: clamp(52px, 15vw, 74px); line-height: .94; }.hero-copy > p:not(.hero-note) { font-size: 16px; }.hero-actions { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; margin-top: 27px; }.hero-note { margin-top: 17px; font-size: 8px; }.hero-copy { margin-bottom: 40px; }
  .product-stage { height: 465px; margin-bottom: -95px; border-radius: 13px; }.stage-bar { height: 42px; grid-template-columns: 1fr auto; }.stage-title { display: none; }.stage-body { height: calc(100% - 42px); grid-template-columns: 42px 1fr; }.stage-sidebar { border-right: 1px solid #d9ded9; }.run-panel { display: none; }.workflow-canvas { width: 100%; overflow: hidden; }.canvas-head { height: 58px; }.graph { width: 590px; height: calc(100% - 58px); transform: scale(.8); transform-origin: left top; }.flow-node--research, .flow-node--review { left: 26%; }.flow-node--judge { left: 61%; }.flow-node--done { display: none; }.connectors [data-edge="publish"] { display: none; }
  .statement { padding: 200px 14px 100px; }.statement h2 { font-size: 46px; }.statement-copy { font-size: 27px; }
  .bento { grid-template-columns: 1fr; }.bento-card { min-height: 440px; padding: 28px; border-radius: 20px; }.bento-card--large { display: block; min-height: 700px; grid-column: auto; }.local-visual { min-height: 370px; margin-top: 20px; }.orbit--one { width: 170px; height: 170px; }.orbit--two { width: 260px; height: 260px; }.orbit--three { width: 340px; height: 340px; }.local-core { width: 120px; height: 120px; border-radius: 30px; }.satellite { transform: scale(.9); }.satellite--one { left: -2%; }.satellite--two { right: -5%; }.satellite--three { left: 9%; }.code-window { margin-top: 45px; }
  .workflow-section { gap: 60px; padding: 120px 0; }.workflow-copy { padding: 0 12px; }.workflow-copy h2 { font-size: 51px; }.logic-driver { border-radius: 18px; }.logic-canvas { height: 390px; }.logic-node { transform: scale(.78); transform-origin: left top; }.n1 { left: 0; }.n2, .n3 { left: 24%; }.n4 { left: 57%; }.n5, .tag2 { display: none; }.logic-connectors [data-logic-edge="done"] { display: none; }.logic-footer button b { display: none; }
  .models-section { padding: 100px 0; border-radius: 25px; }.models-heading { padding: 0 14px; }.models-heading h2 { font-size: 52px; }.model-rail { margin-top: 45px; }.roles-grid { grid-template-columns: 1fr; }.role-card { min-height: 280px; }
  .workspace-section { padding: 110px 0; }.workspace-heading { display: block; padding: 0 12px; margin-bottom: 50px; }.workspace-heading h2 { margin-top: 18px; font-size: 50px; }.workspace-grid { grid-template-columns: 1fr; }.workspace-card, .workspace-card:first-child, .workspace-card:nth-child(3) { min-height: 300px; border: 0; border-top: 1px solid var(--line); }.workspace-card:last-child { border-bottom: 0; }.workspace-card h3 { margin-top: 105px; }
  .open-source { gap: 45px; min-height: auto; padding: 75px 22px 22px; border-radius: 25px; }.source-copy h2 { font-size: 50px; }.source-actions { align-items: flex-start; flex-direction: column; }.source-terminal { border-radius: 13px; }.source-terminal pre { min-height: 280px; padding: 30px 18px; }.source-terminal code { font-size: 8px; }
  .final-cta { padding: 130px 12px 100px; }.final-cta h2 { font-size: 58px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 20px; padding: 25px 0; }.site-footer > p { display: none; }.site-footer nav a:not(:last-child) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}