:root {
  --font-geist-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-geist-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ink: #0b0d0c;
  --paper: #f3f1e9;
  --line: rgba(11, 13, 12, 0.15);
  --muted: #74776f;
  --blue: #4aa8ff;
  --electric: #178bff;
  --acid: #b8f53f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-geist-sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.site-header { height: 82px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); position: relative; z-index: 10; }
.brand { display: flex; gap: 11px; align-items: center; font-weight: 720; letter-spacing: -0.04em; font-size: 20px; }
.brand-mark { width: 24px; height: 18px; display: flex; align-items: end; gap: 2px; }
.brand-mark i { display: block; width: 7px; background: var(--electric); transform: skew(-26deg); }
.brand-mark i:nth-child(1) { height: 8px; }.brand-mark i:nth-child(2) { height: 13px; }.brand-mark i:nth-child(3) { height: 18px; }
nav { display: flex; align-items: center; gap: 34px; font-size: 13px; }
nav > a:not(.nav-cta):hover { color: var(--electric); }
.nav-cta { background: var(--ink); color: white; border-radius: 100px; padding: 12px 18px; display: flex; gap: 12px; align-items: center; }

.hero { min-height: calc(100vh - 82px); padding: 7vw 4.5vw 5vw; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr); gap: 6vw; align-items: center; overflow: hidden; }
.eyebrow { text-transform: uppercase; letter-spacing: .13em; font-family: var(--font-geist-mono), monospace; font-size: 11px; display: flex; align-items: center; gap: 10px; }
.eyebrow > span { width: 7px; height: 7px; background: var(--electric); border-radius: 50%; box-shadow: 0 0 0 4px rgba(23,139,255,.13); }
.hero h1 { font-size: clamp(62px, 7.4vw, 118px); max-width: 900px; line-height: .88; letter-spacing: -.072em; font-weight: 570; margin: 28px 0 36px; }
h1 em, .operations h2 em { color: var(--electric); font-style: normal; }
.hero-lede { color: #4e524d; font-size: clamp(18px, 1.45vw, 24px); line-height: 1.52; max-width: 680px; }
.hero-actions { display: flex; align-items: center; gap: 30px; margin-top: 42px; }
.button { display: inline-flex; align-items: center; gap: 34px; border-radius: 100px; padding: 17px 22px; font-size: 14px; font-weight: 620; }
.button.primary { color: white; background: var(--electric); box-shadow: 0 12px 30px rgba(23,139,255,.2); }
.button.primary:hover { background: #0076e8; transform: translateY(-1px); }
.text-link { font-size: 13px; border-bottom: 1px solid #a5a79f; padding-bottom: 5px; }

.hero-visual { min-width: 0; }
.landscape { position: relative; min-height: 570px; border-radius: 4px; overflow: hidden; background: #15211d url('/ironsteppe-landscape.jpg') center/cover; box-shadow: 0 30px 80px rgba(11,13,12,.18); }
.landscape-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,18,27,.02), rgba(3,16,12,.8)), linear-gradient(90deg, rgba(8,12,11,.2), transparent); }
.visual-kicker { position: absolute; left: 26px; top: 15px; z-index: 1; color: white; text-transform: uppercase; letter-spacing: .14em; font: 10px var(--font-geist-mono), monospace; }
.decision-card { position: absolute; z-index: 2; left: 26px; right: 26px; bottom: 26px; background: rgba(8,13,12,.88); backdrop-filter: blur(18px); color: white; border: 1px solid rgba(255,255,255,.18); padding: 22px; }
.decision-head { display: flex; justify-content: space-between; font: 10px var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .12em; color: #b9c1bc; }
.live-indicator { color: var(--acid); }
.decision-question { font-size: 26px; letter-spacing: -.035em; margin: 26px 0; max-width: 430px; }
.context-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }
.context-grid span { background: rgba(255,255,255,.075); padding: 9px 10px; font: 9px var(--font-geist-mono), monospace; color: #d2d7d3; }
.decision-flow { border-top: 1px solid rgba(255,255,255,.14); margin-top: 20px; padding-top: 16px; display: flex; justify-content: space-between; color: #aeb5b0; font: 9px var(--font-geist-mono), monospace; text-transform: uppercase; }
.decision-flow b { color: var(--blue); }
.visual-caption { font: 10px var(--font-geist-mono), monospace; margin-top: 13px; display: flex; justify-content: space-between; color: #777a74; }
.visual-caption span { color: var(--electric); }

.section { padding: 9vw 4.5vw; }
.section-label { border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: 6vw; text-transform: uppercase; letter-spacing: .12em; font: 10px var(--font-geist-mono), monospace; display: flex; justify-content: space-between; }
.section-label span { color: var(--electric); }
.thesis { background: var(--ink); color: white; }
.section-label.light { border-color: rgba(255,255,255,.18); }
.thesis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; }
.thesis h2, .section-intro h2, .operations h2, .trust h2, .final-cta h2 { font-size: clamp(48px, 6.4vw, 98px); line-height: .96; letter-spacing: -.065em; font-weight: 520; margin: 0; }
.thesis-copy { max-width: 610px; font-size: 22px; line-height: 1.5; color: #aeb2ae; }
.thesis-copy p { margin: 0 0 26px; }
.thesis-copy .accent-copy { color: var(--blue); font-size: 31px; line-height: 1.25; letter-spacing: -.03em; }
.system-map { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items: stretch; margin-top: 8vw; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); }
.map-node { padding: 26px 12px 28px 0; }
.map-node small { font: 9px var(--font-geist-mono), monospace; color: #686e69; display: block; margin-bottom: 42px; }
.map-node strong { font-size: 19px; font-weight: 520; display: block; }
.map-node p { color: #767d78; font-size: 12px; margin: 8px 0 0; }
.map-node.active strong { color: var(--blue); }.map-node.active small { color: var(--blue); }
.map-arrow { align-self: center; color: #4b504d; margin: 0 18px; }

.section-intro { display: grid; grid-template-columns: 1.2fr .8fr; gap: 8vw; align-items: end; margin-bottom: 7vw; }
.section-intro h2 { font-size: clamp(48px, 6vw, 88px); }
.section-intro > p { color: #666a64; font-size: 18px; line-height: 1.55; max-width: 480px; }
.friction-list { border-top: 1px solid var(--line); }
.friction-row { display: grid; grid-template-columns: 60px .65fr 1fr .55fr; gap: 3vw; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--line); }
.row-number { font: 10px var(--font-geist-mono), monospace; color: var(--electric); }
.friction-row h3 { font-size: 29px; letter-spacing: -.04em; font-weight: 540; margin: 0; }
.friction-row p { color: #62665f; line-height: 1.55; margin: 0; max-width: 580px; }
.signal { justify-self: end; font: 10px var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .08em; }
.signal b { color: var(--electric); margin-left: 10px; }

.operations { background: #e5e8df; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }
.ops-copy h2 { margin: 22px 0 38px; }
.ops-copy > p:not(.eyebrow) { color: #5b6059; font-size: 18px; line-height: 1.55; max-width: 560px; }
.ops-console { background: #111513; color: white; box-shadow: 0 30px 70px rgba(11,13,12,.16); }
.console-top { height: 48px; border-bottom: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; font: 9px var(--font-geist-mono), monospace; color: #87908a; }
.console-query { padding: 30px; border-bottom: 1px solid rgba(255,255,255,.12); }
.console-query small, .console-output > span { color: var(--blue); font: 9px var(--font-geist-mono), monospace; letter-spacing: .12em; }
.console-query p { font-size: 28px; letter-spacing: -.035em; margin: 12px 0 0; }
.source-stack { padding: 8px 30px; }
.source-stack > div { display: grid; grid-template-columns: 30px 1fr auto; gap: 15px; align-items: center; padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.source-stack > div > span, .source-stack i { font: 9px var(--font-geist-mono), monospace; color: #666e69; font-style: normal; }
.source-stack p { margin: 0; }.source-stack b { font-size: 13px; font-weight: 500; }.source-stack small { display: block; color: #737c76; margin-top: 5px; }
.console-output { margin: 22px 30px 30px; padding: 22px; border-left: 2px solid var(--acid); background: rgba(184,245,63,.055); }
.console-output p { font-size: 16px; line-height: 1.45; }.console-output b { color: var(--acid); font: 9px var(--font-geist-mono), monospace; text-transform: uppercase; }

.trust { background: var(--electric); color: white; }
.trust-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 9vw; }
.trust-principles { border-top: 1px solid rgba(255,255,255,.35); }
.trust-principles p { margin: 0; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.74); line-height: 1.5; }
.trust-principles span { display: inline-block; width: 112px; color: white; font-family: var(--font-geist-mono), monospace; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }

.approach-intro { margin-bottom: 5vw; }.approach-intro h2 { font-size: clamp(48px, 5.6vw, 82px); }
.stage-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stage { padding: 26px 32px 38px 0; min-height: 350px; display: flex; flex-direction: column; }
.stage + .stage { border-left: 1px solid var(--line); padding-left: 32px; }
.stage > div { display: flex; justify-content: space-between; font: 10px var(--font-geist-mono), monospace; text-transform: uppercase; letter-spacing: .1em; }
.stage > div span { color: var(--electric); }.stage > div small { color: #777b74; }
.stage h3 { font-size: 30px; line-height: 1.16; letter-spacing: -.04em; font-weight: 540; margin: auto 0 22px; max-width: 350px; }
.stage p { color: #656963; line-height: 1.55; margin: 0; max-width: 370px; }

.final-cta { background: #0c100e; color: white; text-align: center; position: relative; overflow: hidden; padding-top: 11vw; padding-bottom: 11vw; }
.cta-horizon { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,16,14,.9) 10%, rgba(12,16,14,.63) 55%, rgba(12,16,14,.96)), url('/ironsteppe-landscape.jpg') center 42%/cover; opacity: .64; }
.final-cta > *:not(.cta-horizon) { position: relative; z-index: 1; }
.final-cta .eyebrow { justify-content: center; color: #bec4bf; }
.final-cta h2 { margin: 30px auto; max-width: 1000px; }
.final-cta > p:not(.eyebrow) { max-width: 650px; margin: 0 auto 40px; color: #bbc1bc; font-size: 18px; line-height: 1.55; }

footer { min-height: 120px; padding: 32px 4.5vw; display: grid; grid-template-columns: 1fr 1.3fr 1fr auto; gap: 30px; align-items: center; font-size: 11px; border-top: 1px solid var(--line); color: #6c7069; }
footer .brand { color: var(--ink); font-size: 17px; } footer > a:not(.brand) { color: var(--electric); }

.legal-page { min-height: 100vh; background: var(--paper); }
.legal-page > header { height: 82px; padding: 0 4.5vw; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: 12px; }
.legal-page > header > a:last-child { color: var(--electric); }
.legal-shell { max-width: 820px; margin: 0 auto; padding: 100px 30px 130px; }
.legal-kicker { color: var(--electric); font: 10px var(--font-geist-mono), monospace; letter-spacing: .13em; text-transform: uppercase; }
.legal-shell h1 { font-size: clamp(54px, 7vw, 92px); line-height: .95; letter-spacing: -.06em; font-weight: 540; margin: 24px 0 12px; }
.legal-date { color: var(--muted); font: 11px var(--font-geist-mono), monospace; margin-bottom: 64px; }
.legal-shell h2 { font-size: 27px; letter-spacing: -.035em; font-weight: 560; margin: 54px 0 16px; padding-top: 22px; border-top: 1px solid var(--line); }
.legal-shell p, .legal-shell li { color: #535750; font-size: 16px; line-height: 1.7; }
.legal-shell strong { color: var(--ink); font-weight: 620; }
.legal-shell a { color: var(--electric); text-decoration: underline; text-underline-offset: 3px; }
.legal-shell ul { padding-left: 22px; }
.legal-shell li + li { margin-top: 10px; }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; padding-top: 10vw; }.hero-copy { max-width: 850px; }.landscape { min-height: 520px; }
  .friction-row { grid-template-columns: 40px .8fr 1.2fr; }.signal { display: none; }
  .operations { grid-template-columns: 1fr; }.ops-copy { max-width: 760px; }.ops-console { max-width: 850px; }
  footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .site-header { height: 70px; padding: 0 22px; }.site-header nav > a:not(.nav-cta) { display: none; }.nav-cta { padding: 10px 13px; }.nav-cta span { display: none; }
  .hero, .section, .operations { padding-left: 22px; padding-right: 22px; }.hero { padding-top: 64px; gap: 60px; }.hero h1 { font-size: 57px; }.hero-lede { font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }.landscape { min-height: 480px; margin-left: -22px; margin-right: -22px; }.decision-card { left: 14px; right: 14px; bottom: 14px; padding: 18px; }.decision-question { font-size: 22px; }.context-grid { grid-template-columns: repeat(2,1fr); }
  .section { padding-top: 95px; padding-bottom: 95px; }.section-label { margin-bottom: 60px; }
  .thesis-grid, .section-intro, .trust-grid { grid-template-columns: 1fr; gap: 45px; }.thesis h2, .section-intro h2, .operations h2, .trust h2, .final-cta h2 { font-size: 50px; }.thesis-copy { font-size: 18px; }.thesis-copy .accent-copy { font-size: 25px; }
  .system-map { grid-template-columns: 1fr; }.map-arrow { transform: rotate(90deg); margin: 0; justify-self: center; }.map-node { padding: 22px 0; }.map-node small { margin-bottom: 18px; }
  .friction-row { grid-template-columns: 35px 1fr; padding: 28px 0; }.friction-row p { grid-column: 2; }.friction-row h3 { font-size: 25px; }
  .operations { padding-top: 95px; padding-bottom: 95px; }.ops-copy > p:not(.eyebrow) { font-size: 16px; }.console-query, .source-stack { padding-left: 18px; padding-right: 18px; }.console-output { margin-left: 18px; margin-right: 18px; }.console-query p { font-size: 22px; }
  .trust-principles span { width: 100%; margin-bottom: 6px; }.stage-grid { grid-template-columns: 1fr; }.stage { min-height: 290px; padding: 24px 0 32px; }.stage + .stage { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .final-cta { padding-top: 120px; padding-bottom: 120px; }.final-cta h2 { font-size: 48px; }
  footer { grid-template-columns: 1fr; padding: 45px 22px; gap: 18px; }
}

@media (prefers-reduced-motion: no-preference) {
  .button, nav a { transition: transform .2s ease, background .2s ease, color .2s ease; }
}
