:root {
  --bg: #f2f1ed;
  --surface: #f8f7f3;
  --ink: #10100f;
  --muted: #77746c;
  --faint: #a19f97;
  --line: rgba(16,16,15,.14);
  --accent: #ef6648;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(rgba(16,16,15,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,15,.028) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, #000, rgba(0,0,0,.8) 55%, transparent 100%);
}
.grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  opacity: .03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.nav {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.08em; }
.brand-mark {
  position:relative;
  width:27px; height:27px;
  display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:2px;
}
.brand-mark i { background:var(--ink); border-radius:3px; }
.brand-mark i:nth-child(1){grid-area:1/2;}
.brand-mark i:nth-child(2){grid-area:2/1;}
.brand-mark i:nth-child(3){grid-area:2/3;}
.brand-mark i:nth-child(4){grid-area:3/2;}
.brand-mark::after {
  content:""; position:absolute; width:11px;height:11px;left:8px;top:8px;
  border:3px solid var(--ink); border-radius:4px;
}
.brand-word { font-size:13px; }
.nav-links { display:flex; gap:28px; font-size:12px; color:#54524c; }
.nav-actions { display:flex; justify-content:flex-end; align-items:center; gap:18px; font:11px "Geist Mono", monospace; }
.nav-git { color:#55524c; }
.button {
  min-height:48px;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--ink);
  border-radius:14px;
  font-size:12px;
  font-weight:600;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.button:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(0,0,0,.08); }
.button-dark { background:var(--ink); color:white; }
.button-ghost { background:rgba(255,255,255,.22); }
.button-small { min-height:40px; padding:0 15px; }

.display {
  margin:0;
  font-family:"Doto", monospace;
  font-weight:500;
  font-variation-settings:"ROND" 100;
  letter-spacing:-.04em;
  line-height:.9;
}
.display span { color:transparent; -webkit-text-stroke:1px var(--ink); }

.hero { padding:100px 0 78px; min-height:670px; }
.hero-meta {
  display:flex; justify-content:space-between; gap:20px;
  font:10px "Geist Mono", monospace; letter-spacing:.15em; color:#77746d;
}
.hero h1 { font-size:clamp(76px, 11.2vw, 152px); margin-top:28px; max-width:1040px; }
.hero-bottom {
  display:grid; grid-template-columns:1.15fr .45fr; gap:70px;
  margin-top:62px; align-items:start;
}
.hero-lede {
  max-width:650px;
  margin:0;
  font-size:18px; line-height:1.55; color:#58554f;
}
.hero-actions { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.hero-side { border-top:1px solid var(--line); }
.mini-stat {
  display:flex; justify-content:space-between; gap:20px;
  padding:12px 0; border-bottom:1px solid var(--line);
  font:9px "Geist Mono", monospace;
}
.mini-stat span { color:#8e8b83; letter-spacing:.12em; }
.mini-stat strong { font-weight:500; }

.system-strip {
  padding:36px 0 110px;
  border-top:1px solid var(--line);
}
.strip-intro {
  display:grid; grid-template-columns:60px 1fr; gap:14px; align-items:start;
}
.section-index, .section-kicker {
  font:10px "Geist Mono", monospace;
  letter-spacing:.13em; color:#86837b;
}
.strip-intro h2 {
  margin:0;
  font-size:26px; line-height:1.05; letter-spacing:-.04em;
}
.system-flow {
  margin-top:30px;
  display:grid; grid-template-columns:1fr 28px 1.25fr 28px 1.3fr 28px 1fr; align-items:center;
}
.flow-card {
  min-height:130px; padding:18px; border:1px solid var(--line); border-radius:18px;
  background:rgba(255,255,255,.32);
  display:flex; flex-direction:column; justify-content:space-between;
}
.flow-card.dark { background:var(--ink); color:#fff; border-color:var(--ink); }
.flow-index { font:9px "Geist Mono", monospace; color:#8c8981; }
.flow-card.dark .flow-index { color:#aaa9a3; }
.flow-card strong { font-size:12px; letter-spacing:.03em; }
.flow-card small { font:8px "Geist Mono", monospace; color:#77746d; }
.flow-card.dark small { color:#9f9d97; }
.flow-arrow { text-align:center; color:#85827a; font-size:18px; }

.section { padding:100px 0 130px; }
.statement-grid {
  display:grid; grid-template-columns:1.35fr .7fr; gap:80px; align-items:end; margin-top:18px;
}
.statement-grid h2, .headline {
  margin:0;
  font-size:clamp(48px, 6.4vw, 82px); line-height:.94; letter-spacing:-.065em;
}
.statement-grid h2 span { color:#88857e; }
.statement-copy { color:#68655e; font-size:14px; line-height:1.65; }
.statement-copy p { margin:0 0 16px; }
.capability-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:72px;
}
.capability-grid article {
  min-height:260px; border-top:1px solid var(--line); padding-top:18px;
}
.capability-grid span { font:9px "Geist Mono", monospace; letter-spacing:.1em; color:#88857e; }
.capability-grid h3 { margin:55px 0 14px; font-size:25px; line-height:1; letter-spacing:-.04em; }
.capability-grid p { margin:0; max-width:310px; color:#6e6b63; font-size:12px; line-height:1.65; }

.architecture { padding-bottom:140px; }
.architecture-top {
  margin-top:20px; display:grid; grid-template-columns:1fr .35fr; gap:60px; align-items:start;
}
.architecture-top > div > p {
  max-width:600px; margin:22px 0 0; color:#6d6962; font-size:14px; line-height:1.65;
}
.architecture-callout {
  border-left:1px solid var(--line); padding-left:22px;
}
.architecture-callout span { font:9px "Geist Mono", monospace; color:#89867f; letter-spacing:.1em; }
.architecture-callout strong { display:block; margin:22px 0 18px; font:500 32px/.9 "Doto", monospace; font-variation-settings:"ROND" 100; }
.architecture-callout small { display:block; color:#6e6b64; font-size:11px; line-height:1.55; }

.architecture-diagram {
  margin-top:65px; border:1px solid var(--line); border-radius:24px; overflow:hidden; background:rgba(255,255,255,.26);
}
.diagram-row {
  padding:18px; display:grid; grid-template-columns:1fr 20px 1.2fr 20px 1.35fr 20px 1.1fr 20px 1.1fr;
  align-items:stretch;
}
.diagram-node {
  min-height:145px; padding:17px; border:1px solid var(--line); border-radius:16px;
  background:rgba(255,255,255,.45); display:flex; flex-direction:column; justify-content:space-between;
}
.diagram-node.dark { background:var(--ink); color:#fff; border-color:var(--ink); }
.diagram-node.wide { min-height:158px; }
.diagram-node span { font:9px "Geist Mono", monospace; color:#8b8881; }
.diagram-node.dark span { color:#aaa8a2; }
.diagram-node strong { font-size:11px; letter-spacing:.03em; }
.diagram-node small { font:8px "Geist Mono", monospace; line-height:1.45; color:#7d7a73; }
.diagram-node.dark small { color:#a4a29b; }
.diagram-connector { position:relative; }
.diagram-connector::before { content:""; position:absolute; left:2px; right:2px; top:50%; height:1px; background:var(--line); }
.diagram-connector::after { content:"›"; position:absolute; right:-2px; top:calc(50% - 10px); color:#88857e; }

.packet-path { border-top:1px solid var(--line); padding:18px 20px 24px; }
.packet-label { font:9px "Geist Mono", monospace; color:#88857f; letter-spacing:.12em; }
.packet-line {
  margin-top:20px; display:flex; align-items:center; gap:13px;
  font:9px "Geist Mono", monospace; color:#59574f; overflow:auto; white-space:nowrap;
}
.packet-line i { flex:1; min-width:30px; height:1px; background:var(--line); }
.packet-line b { font-weight:500; padding:6px 8px; border:1px solid var(--line); border-radius:999px; }

.code-section {
  padding:80px 0 130px; display:grid; grid-template-columns:.7fr 1.1fr; gap:70px; align-items:center;
}
.code-copy p { max-width:410px; color:#6d6a62; font-size:14px; line-height:1.65; margin:24px 0; }
.inline-link { font:11px "Geist Mono", monospace; border-bottom:1px solid var(--ink); padding-bottom:4px; }
.terminal { background:#11110f; border-radius:22px; overflow:hidden; color:#efede7; box-shadow:0 24px 60px rgba(0,0,0,.12); }
.terminal-bar { display:flex; align-items:center; gap:6px; padding:13px 17px; border-bottom:1px solid rgba(255,255,255,.12); }
.terminal-bar span { width:7px; height:7px; border-radius:50%; background:#696761; }
.terminal-bar em { margin-left:auto; font:9px "Geist Mono", monospace; color:#aaa8a1; font-style:normal; }
pre { margin:0; padding:26px 24px; font:14px/1.75 "Geist Mono", monospace; overflow:auto; }
.terminal-footer {
  display:flex; gap:9px; align-items:center; padding:14px 17px; border-top:1px solid rgba(255,255,255,.12);
  font:9px "Geist Mono", monospace; color:#aaa8a1;
}
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(239,102,72,.1); }

.manifesto {
  position:relative; min-height:580px; display:flex; align-items:center;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden;
}
.manifesto-content { position:relative; z-index:2; max-width:700px; }
.manifesto .display { font-size:clamp(62px, 8vw, 106px); margin-top:18px; }
.manifesto-content p { max-width:610px; color:#66635c; line-height:1.65; font-size:15px; margin:28px 0 0; }
.manifesto-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.manifesto-bg {
  position:absolute; right:-4%; top:50%; transform:translateY(-48%) rotate(-8deg);
  opacity:.08; display:grid; gap:0;
}
.manifesto-bg span { font:500 170px/.72 "Doto", monospace; font-variation-settings:"ROND" 100; }

.roadmap { padding:110px 0 125px; }
.roadmap-intro { display:grid; grid-template-columns:1fr .55fr; gap:70px; margin-top:20px; align-items:end; }
.roadmap-intro p { margin:0; color:#6c6961; font-size:14px; line-height:1.65; }
.roadmap-list { margin-top:60px; border-top:1px solid var(--line); }
.roadmap-row {
  display:grid; grid-template-columns:55px 1fr 80px; gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--line);
}
.roadmap-row > span, .roadmap-row > b { font:9px "Geist Mono", monospace; color:#8d8a83; }
.roadmap-row > b { text-align:right; font-weight:500; }
.roadmap-row strong { display:block; font-size:13px; }
.roadmap-row small { display:block; margin-top:5px; font:9px "Geist Mono", monospace; color:#85827a; }
.roadmap-row.current > b { color:var(--accent); }
.roadmap-row.future { opacity:.55; }

.closing { padding:30px 0 100px; }
.closing-frame {
  border:1px solid var(--line); border-radius:28px; padding:50px;
  display:grid; grid-template-columns:1fr .45fr; gap:50px; align-items:end;
  background:rgba(255,255,255,.32);
}
.closing-frame .display { font-size:clamp(62px, 8vw, 100px); margin-top:18px; }
.closing-copy p { color:#68655d; line-height:1.55; font-size:14px; margin:0 0 23px; }

.footer {
  padding:20px 0 30px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px;
  font:9px "Geist Mono", monospace; color:#7e7b73; letter-spacing:.05em;
}
.footer:nth-child(2) { text-align:center; }
.footer a { text-align:right; }

@media (max-width: 1020px) {
  .nav { grid-template-columns:1fr auto; }
  .nav-links { display:none; }
  .hero-bottom, .architecture-top, .code-section, .roadmap-intro, .closing-frame { grid-template-columns:1fr; }
  .hero-side { max-width:520px; }
  .system-flow { grid-template-columns:1fr; gap:10px; }
  .flow-arrow { transform:rotate(90deg); height:20px; }
  .diagram-row { grid-template-columns:1fr; gap:10px; }
  .diagram-connector { height:26px; }
  .diagram-connector::before { left:10%; right:10%; }
  .diagram-connector::after { right:calc(50% - 3px); top:5px; transform:rotate(90deg); }
  .architecture-callout { border-left:0; border-top:1px solid var(--line); padding:18px 0 0; max-width:420px; }
}

@media (max-width: 760px) {
  .shell { width:min(100% - 28px, 1180px); }
  .nav { min-height:66px; }
  .nav-git { display:none; }
  .hero { padding:72px 0 62px; min-height:auto; }
  .hero-meta { flex-direction:column; gap:8px; }
  .hero h1 { font-size:clamp(64px, 18vw, 105px); }
  .hero-bottom { margin-top:45px; }
  .hero-lede { font-size:16px; }
  .hero-side { margin-top:8px; }
  .system-strip, .section, .architecture, .code-section, .roadmap { padding-top:76px; padding-bottom:82px; }
  .statement-grid { grid-template-columns:1fr; gap:28px; }
  .statement-grid h2, .headline { font-size:clamp(44px, 13vw, 70px); }
  .capability-grid { grid-template-columns:1fr; margin-top:50px; gap:42px; }
  .capability-grid article { min-height:0; }
  .capability-grid h3 { margin-top:30px; }
  .packet-line { gap:8px; }
  .packet-line i { min-width:18px; }
  .manifesto { min-height:620px; }
  .manifesto-bg { right:-30%; }
  .manifesto-bg span { font-size:100px; }
  .closing-frame { padding:30px; }
  .footer { grid-template-columns:1fr; gap:9px; }
  .footer:nth-child(2), .footer a { text-align:left; }
}