:root {
  --bg: #080d10;
  --bg-2: #0c1317;
  --surface: #111a1f;
  --surface-2: #162127;
  --ink: #f0f5f3;
  --muted: #91a2a6;
  --line: #24343b;
  --cyan: #59d9ef;
  --green: #71f3c1;
  --amber: #f2b75b;
  --red: #ef786f;
  --max: 1240px;
  --radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; overflow-x: hidden; background: var(--bg); color: var(--ink); font-family: Inter, "SF Pro Display", "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { font: inherit; }
button { color: inherit; }
.content-width { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; background: var(--green); color: #07100c; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

.site-header { position: fixed; z-index: 30; inset: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 72px; padding: 12px max(24px, calc((100vw - var(--max)) / 2)); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(8,13,16,.92); backdrop-filter: blur(14px); }
.brand { display: inline-flex; align-items: center; gap: 10px; width: max-content; font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 36px; aspect-ratio: 1; border: 1px solid #3d565f; border-radius: var(--radius); background: #13242a; color: var(--green); font-size: .78rem; }
.site-nav { display: flex; gap: 26px; color: #b5c2c5; font-size: .82rem; }
.site-nav a:hover { color: var(--ink); }
.header-cta { justify-self: end; }
.menu-button { display: none; background: transparent; border: 0; }

.button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border: 1px solid var(--green); border-radius: var(--radius); background: var(--green); color: #07110d; font-size: .86rem; font-weight: 800; }
.button:hover { background: #9bffd7; }
.button-small { min-height: 38px; padding-inline: 15px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #d5e0dd; border-bottom: 1px solid #4b6269; font-size: .88rem; }

.hero { position: relative; display: grid; align-items: end; min-height: min(900px, 100svh); padding-top: 72px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-media { position: absolute; inset: 72px 0 0; width: 100%; height: calc(100% - 72px); object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.12) brightness(.58); }
.hero-shade { position: absolute; inset: 72px 0 0; background: rgba(8,13,16,.66); box-shadow: inset 46vw 0 140px rgba(8,13,16,.52), inset 0 -160px 120px rgba(8,13,16,.54); }
.hero-content { position: relative; z-index: 2; align-self: center; padding-block: 110px 150px; }
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #9fb0b4; font: 700 .72rem/1.2 ui-monospace, "SFMono-Regular", monospace; text-transform: uppercase; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(113,243,193,.12); animation: pulse 2s infinite; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 0; font-size: clamp(5.5rem, 16vw, 12rem); line-height: .75; letter-spacing: 0; }
.hero-statement { max-width: 720px; margin: 50px 0 16px; font-size: clamp(1.7rem, 3.3vw, 3.2rem); line-height: 1.02; }
.hero-copy { max-width: 600px; color: #acbabd; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; }
.hero-actions { display: flex; gap: 22px; align-items: center; margin-top: 32px; }
.runtime-strip { position: absolute; z-index: 3; inset: auto 0 0; display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(100px, 420px) auto; align-items: center; gap: 20px; min-height: 62px; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); border-top: 1px solid rgba(255,255,255,.14); background: rgba(8,13,16,.88); font: .74rem ui-monospace, "SFMono-Regular", monospace; }
.runtime-label { color: var(--green); }
.runtime-progress { height: 2px; background: #314148; }
.runtime-progress i { display: block; width: 25%; height: 100%; background: var(--cyan); transition: width .5s ease; }

.section { padding-block: 112px; border-bottom: 1px solid var(--line); opacity: .72; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease; }
.section.is-visible { opacity: 1; transform: none; }
.section-index { color: var(--cyan); font: 700 .68rem ui-monospace, "SFMono-Regular", monospace; }
.section h2 { max-width: 820px; margin: 18px 0 0; font-size: clamp(2.25rem, 5vw, 5rem); line-height: .98; font-weight: 560; }
.section-heading { display: grid; grid-template-columns: 1.5fr .7fr; gap: 80px; align-items: end; margin-bottom: 54px; }
.section-heading > p { margin: 0; color: var(--muted); line-height: 1.6; }

.manifesto { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 48px; }
.manifesto-copy p { max-width: 680px; margin: 28px 0 0; color: var(--muted); font-size: 1.15rem; line-height: 1.65; }
.system-metrics { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin: 64px 0 0; border-top: 1px solid var(--line); }
.system-metrics div { padding: 24px 20px 0 0; border-right: 1px solid var(--line); }
.system-metrics dt { color: var(--ink); font-size: 1.15rem; font-weight: 700; }
.system-metrics dd { margin: 8px 0 0; color: var(--muted); font-size: .82rem; }

#system { background: #edf2f0; color: #0a1214; box-shadow: 0 0 0 100vmax #edf2f0; clip-path: inset(0 -100vmax); }
#system .section-index { color: #276451; }
#system .manifesto-copy p, #system .system-metrics dd { color: #53625f; }
#system .system-metrics { border-color: #c4d0cc; }
#system .system-metrics div { border-color: #c4d0cc; }

.runtime-section { background: var(--bg-2); }
.runtime-flow { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.flow-step { position: relative; display: grid; min-width: 0; min-height: 150px; padding: 20px; text-align: left; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }
.flow-step:last-child { border-right: 0; }
.flow-step::after { content: ""; position: absolute; inset: auto 20px 0; height: 2px; background: transparent; }
.flow-step span, .flow-step small { color: #708389; font: .68rem ui-monospace, "SFMono-Regular", monospace; }
.flow-step strong { align-self: end; margin-bottom: 8px; font-size: 1.08rem; }
.flow-step.is-active { background: #142128; }
.flow-step.is-active::after { background: var(--green); }
.flow-step.is-active span { color: var(--green); }
.flow-detail { display: grid; grid-template-columns: 140px 1fr auto; gap: 30px; align-items: center; min-height: 100px; padding: 22px 24px; border: 1px solid var(--line); border-top: 0; }
.flow-detail span, .flow-detail strong { font: 700 .7rem ui-monospace, "SFMono-Regular", monospace; }
.flow-detail span { color: var(--cyan); }
.flow-detail p { margin: 0; color: var(--muted); line-height: 1.5; }
.flow-detail strong { color: var(--green); }

.questions > h2 { margin-bottom: 64px; }
.questions ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.questions li { display: grid; grid-template-columns: 80px 1fr 1fr; gap: 30px; align-items: center; min-height: 120px; border-bottom: 1px solid var(--line); }
.questions li > span { color: var(--cyan); font: .7rem ui-monospace, monospace; }
.questions li strong { font-size: clamp(1.3rem, 2.5vw, 2.2rem); font-weight: 560; }
.questions li p { margin: 0; color: var(--muted); line-height: 1.5; }

.governance-section { background: #0b1114; }
.governance-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: 70px; align-items: center; }
.governance-copy > p { margin: 28px 0 40px; color: var(--muted); line-height: 1.65; }
.gate-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.gate-list li { display: grid; grid-template-columns: 38px 1fr; padding-block: 15px; border-bottom: 1px solid var(--line); }
.gate-list span { color: var(--cyan); font: .68rem ui-monospace, monospace; }
.product-frame { margin: 0; overflow: hidden; border: 1px solid #344951; border-radius: var(--radius); background: var(--surface); }
.product-frame img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top left; }
.product-frame figcaption { padding: 14px 16px; color: var(--muted); font-size: .75rem; }

.assurance-field { position: relative; min-height: 620px; overflow: hidden; border: 1px solid #344951; background: #080f12; }
.assurance-field::before, .assurance-field::after { content: ""; position: absolute; background: #1a2b31; opacity: .72; }
.assurance-field::before { inset: 50% 0 auto; height: 1px; }
.assurance-field::after { inset: 0 auto 0 50%; width: 1px; }
.assurance-head { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; padding: 18px 20px; border-bottom: 1px solid var(--line); color: #74878d; font: 700 .62rem ui-monospace, monospace; }
.assurance-head b { color: var(--cyan); font: inherit; }
.assurance-core { position: absolute; z-index: 2; inset: 40% auto auto 50%; display: grid; place-items: center; width: 220px; aspect-ratio: 1; text-align: center; border: 1px solid #315a50; background: #0a1715; transform: translate(-50%, -50%); }
.assurance-core::before, .assurance-core::after { content: ""; position: absolute; border: 1px solid #1e3733; }
.assurance-core::before { inset: 18px; }
.assurance-core::after { inset: 36px; }
.assurance-core i { position: absolute; inset: 50% auto auto 50%; width: 310px; height: 1px; background: #2d4c4a; transform: translate(-50%, -50%); }
.assurance-core span, .assurance-core strong, .assurance-core small { position: relative; z-index: 1; }
.assurance-core span { position: absolute; top: 35px; color: var(--green); font: 800 .67rem ui-monospace, monospace; }
.assurance-core strong { font-size: 1rem; line-height: 1.25; }
.assurance-core small { position: absolute; bottom: 34px; color: var(--cyan); font: .55rem ui-monospace, monospace; }
.assurance-field ol { position: absolute; z-index: 2; inset: auto 20px 48px; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.assurance-field li { display: grid; gap: 7px; padding: 14px; border-right: 1px solid var(--line); }
.assurance-field li:last-child { border-right: 0; }
.assurance-field li span { color: #65797f; font: .58rem ui-monospace, monospace; }
.assurance-field li strong { font-size: .72rem; }
.assurance-field li b { font: .54rem ui-monospace, monospace; }
.assurance-field .passed b { color: var(--green); }
.assurance-field .waiting b { color: var(--amber); }
.assurance-field > p { position: absolute; inset: auto 20px 15px; margin: 0; color: #65797f; font: .58rem ui-monospace, monospace; }

.example-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.example { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 330px; background: var(--bg); }
.example-media { overflow: hidden; background: #0e171b; }
.example-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(.9) contrast(1.08) brightness(1.04); transition: transform .5s ease, filter .5s ease; }
.example:hover .example-media img { transform: scale(1.02); filter: saturate(1) contrast(1.08) brightness(1.08); }
.example-visual { position: relative; display: grid; align-content: center; min-height: 360px; padding: clamp(28px, 5vw, 64px); overflow: hidden; background: #0a1215; }
.example-visual::before, .example-visual::after { content: ""; position: absolute; background: #1b2a30; opacity: .7; }
.example-visual::before { inset: 50% 0 auto; height: 1px; }
.example-visual::after { inset: 0 auto 0 50%; width: 1px; }
.example-visual > * { position: relative; z-index: 1; }
.example-visual > span { position: absolute; top: 26px; left: 28px; color: var(--cyan); font: 700 .62rem ui-monospace, monospace; }
.example-visual > strong { margin-top: 28px; color: var(--ink); font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 520; line-height: .8; }
.example-visual > small { margin-top: 18px; color: #7d9095; font: .6rem ui-monospace, monospace; }
.example-visual > b { position: absolute; right: 28px; bottom: 26px; color: var(--green); font: 700 .58rem ui-monospace, monospace; }
.signal-bars { display: flex; align-items: end; gap: 7px; height: 72px; }
.signal-bars i { width: 9px; background: var(--cyan); opacity: .38; animation: data-rise 2.4s ease-in-out infinite alternate; }
.signal-bars i:nth-child(1) { height: 32%; }
.signal-bars i:nth-child(2) { height: 74%; animation-delay: .2s; }
.signal-bars i:nth-child(3) { height: 48%; animation-delay: .4s; }
.signal-bars i:nth-child(4) { height: 92%; animation-delay: .6s; }
.signal-bars i:nth-child(5) { height: 64%; animation-delay: .8s; }
.lot-map { display: grid; grid-template-columns: repeat(3, 30px); gap: 8px; }
.lot-map i { aspect-ratio: 1; border: 1px solid #35505a; background: #101c21; }
.lot-map i:nth-child(2), .lot-map i:nth-child(5), .lot-map i:nth-child(9) { border-color: var(--amber); background: #2a2112; animation: lot-pulse 1.8s ease-in-out infinite alternate; }
.trace-gap { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; width: min(100%, 290px); }
.trace-gap i { aspect-ratio: 1; border: 1px solid var(--cyan); background: #0d1a1e; }
.trace-gap em { position: relative; height: 1px; margin-inline: 10px; background: #30454d; }
.trace-gap em::after { content: ""; position: absolute; inset: -4px 42% auto; height: 9px; border-left: 1px solid var(--amber); transform: rotate(28deg); }
.visual-planning > b { color: var(--amber); }
@keyframes data-rise { to { opacity: .92; transform: scaleY(.74); } }
@keyframes lot-pulse { to { border-color: #ffd07a; background: #3b2c13; } }
.example-body { display: grid; align-content: center; padding: clamp(28px, 5vw, 70px); }
.row { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font: .68rem ui-monospace, monospace; }
.status { padding: 5px 8px; border: 1px solid; border-radius: 3px; }
.status.success { color: var(--green); border-color: #285e4b; }
.status.held { color: var(--amber); border-color: #735725; }
.example h3 { margin: 30px 0 12px; font-size: clamp(1.7rem, 3.3vw, 3.2rem); font-weight: 560; }
.example-body > p { max-width: 560px; color: var(--muted); line-height: 1.6; }
.example dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 32px 0 0; border-top: 1px solid var(--line); }
.example dl div { padding-top: 16px; }
.example dt { color: #71848a; font-size: .68rem; }
.example dd { margin: 6px 0 0; font-size: .88rem; }

.architecture-section { background: var(--bg-2); }
.architecture-flow { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr) auto) minmax(110px, 1fr); align-items: center; gap: 10px; }
.architecture-flow i { color: #4f6269; font-style: normal; }
.arch-node { display: grid; gap: 18px; min-height: 120px; padding: 18px; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: #10191d; cursor: help; }
.arch-node span { color: #708389; font: .65rem ui-monospace, monospace; }
.arch-node strong { align-self: end; font-size: .92rem; }
.arch-primary { border-color: #32785f; background: #10231c; }
.arch-primary span, .arch-primary strong { color: var(--green); }
.architecture-note { margin: 30px 0 0; color: var(--muted); text-align: center; font-size: .82rem; }

.use-cases { padding-bottom: 130px; }
.use-case-row { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(280px, 1fr) auto; gap: 30px; align-items: center; padding: 27px 0; border-bottom: 1px solid var(--line); }
.use-case-row:first-of-type { margin-top: 48px; border-top: 1px solid var(--line); }
.use-case-row strong { font-size: clamp(1.2rem, 2.3vw, 2rem); font-weight: 560; }
.use-case-row span { color: var(--muted); }
.use-case-row small { color: var(--cyan); font: 700 .62rem ui-monospace, "SFMono-Regular", monospace; text-align: right; }

#industries { background: #edf2f0; color: #0a1214; box-shadow: 0 0 0 100vmax #edf2f0; clip-path: inset(0 -100vmax); }
#industries .section-index, #industries .use-case-row small { color: #17634a; }
#industries .section-heading > p, #industries .use-case-row span { color: #53625f; }
#industries .use-case-row, #industries .use-case-row:first-of-type { border-color: #c4d0cc; }

.final-cta { padding-block: 140px; background: var(--green); color: #07100c; }
.final-cta .kicker { color: #164a38; }
.final-cta h2 { max-width: 980px; margin-bottom: 48px; }
.final-cta .button { border-color: #07100c; background: #07100c; color: var(--ink); }
.final-cta .text-link { margin-left: 24px; color: #07100c; border-color: #28775b; }

.site-footer { display: grid; grid-template-columns: 1fr auto; gap: 50px; padding-block: 54px; }
.site-footer p { margin: 15px 0 0; color: var(--muted); font-size: .82rem; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; align-items: start; color: #a8b7ba; font-size: .8rem; }
.site-footer small { grid-column: 1/-1; padding-top: 30px; border-top: 1px solid var(--line); color: #687b81; }

@keyframes pulse { 50% { opacity: .55; box-shadow: 0 0 0 9px rgba(113,243,193,.04); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .menu-button { display: grid; gap: 6px; width: 44px; height: 44px; place-content: center; cursor: pointer; }
  .menu-button span { width: 22px; height: 1px; background: var(--ink); }
  .site-nav { position: absolute; inset: 72px 0 auto; display: none; padding: 22px 24px 30px; background: #0a1013; border-bottom: 1px solid var(--line); }
  .site-nav.is-open { display: grid; }
  .site-nav a { min-height: 44px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
  .header-cta { display: none; }
  .runtime-flow { grid-template-columns: repeat(3, 1fr); }
  .flow-step:nth-child(3) { border-right: 0; }
  .flow-step:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .governance-layout { grid-template-columns: 1fr; }
  .architecture-flow { grid-template-columns: 1fr; }
  .architecture-flow i { transform: rotate(90deg); justify-self: center; }
}

@media (max-width: 720px) {
  .content-width { width: min(calc(100% - 32px), var(--max)); }
  .hero { min-height: 760px; }
  .hero-media { width: 170%; max-width: none; left: -70%; }
  .hero-shade { background: rgba(8,13,16,.8); }
  .hero-content { padding-block: 90px 140px; }
  h1 { font-size: clamp(5rem, 28vw, 8rem); }
  .hero-statement { margin-top: 38px; }
  .runtime-strip { grid-template-columns: 1fr auto; gap: 8px 16px; min-height: 82px; padding-inline: 16px; }
  .runtime-progress { grid-column: 1/-1; grid-row: 2; }
  .runtime-label { display: none; }
  .section { padding-block: 80px; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .manifesto { grid-template-columns: 1fr; gap: 24px; }
  .system-metrics { grid-column: 1; grid-template-columns: 1fr; }
  .system-metrics div { padding-block: 18px; border-right: 0; border-bottom: 1px solid var(--line); }
  .runtime-flow { grid-template-columns: repeat(2, 1fr); }
  .flow-step { min-height: 126px; border-bottom: 1px solid var(--line); }
  .flow-step:nth-child(odd) { border-right: 1px solid var(--line); }
  .flow-step:nth-child(even) { border-right: 0; }
  .flow-detail { grid-template-columns: 1fr; gap: 12px; }
  .questions li { grid-template-columns: 48px 1fr; padding-block: 24px; }
  .questions li p { grid-column: 2; }
  .example { grid-template-columns: 1fr; }
  .assurance-field { min-height: 690px; }
  .assurance-core { top: 34%; width: 180px; }
  .assurance-core i { width: 250px; }
  .assurance-field ol { grid-template-columns: 1fr; bottom: 44px; }
  .assurance-field li { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 8px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .assurance-field li:last-child { border-bottom: 0; }
  .example-media { aspect-ratio: 16/9; }
  .example-visual { min-height: 320px; }
  .example dl { gap: 8px; }
  .use-case-row { grid-template-columns: 1fr; gap: 10px; }
  .use-case-row small { text-align: left; }
  .final-cta .text-link { margin: 18px 0 0; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer small { grid-column: 1; }
}

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