@font-face { font-family: "Inter"; src: url("assets/fonts/inter-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #0a0807;
  --panel: #120d0a;
  --panel-2: #181210;
  --line: #2b1d14;
  --ink: #f4ede6;
  --muted: #b0a59b;
  --dim: #7a6f66;
  --hot: #ff6a00;
  --amber: #ffc400;
  --hot-text: #140800;
  --radius: 4px;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.wrap { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--hot); color: var(--hot-text); padding: 8px 12px; }

.nav { position: sticky; top: 0; z-index: 5; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav__row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 26px; letter-spacing: -0.04em; }
.brand b { color: var(--hot); }
.brand--sm { font-size: 18px; }
.nav__links { display: flex; gap: 28px; margin-left: auto; font-size: 16px; color: var(--ink); }
.nav__links a:hover { color: var(--hot); }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; border-radius: var(--radius); transition: transform .15s ease, box-shadow .2s ease, filter .2s ease; }
.btn--primary { color: var(--hot-text); background: linear-gradient(135deg, var(--hot), color-mix(in oklab, var(--hot) 55%, var(--amber))); box-shadow: 0 0 28px -8px var(--hot); }
.btn--primary:hover { filter: brightness(1.1); box-shadow: 0 0 36px -4px var(--hot); transform: translateY(-1px); }
.btn--ghost { border: 1px solid #3a2a1f; color: var(--ink); }
.btn--ghost:hover { border-color: var(--hot); color: var(--hot); }
.btn--sm { padding: 11px 20px; font-size: 15px; }
.btn--lg { padding: 20px 32px; font-size: 18px; }

h1, h2 { font-weight: 800; letter-spacing: -0.055em; line-height: 0.98; margin: 0; }
h1 { font-size: clamp(42px, 5.6vw, 76px); }
h1 span { display: block; white-space: nowrap; }
h2 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 44px; }
h3 { margin: 6px 0 8px; font-size: 20px; letter-spacing: -0.02em; }
.hot {
  background: linear-gradient(90deg, var(--hot), var(--amber), var(--hot));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s ease-in-out infinite;
}
@keyframes shimmer { 50% { background-position: 100% 0; } }

.hero { display: grid; grid-template-columns: 1.08fr 1fr; gap: 56px; align-items: center; padding: 72px 0 96px; }
.lede { color: var(--muted); font-size: 19px; max-width: 34em; margin: 28px 0 34px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.fine { font-size: 15px; color: var(--muted); margin-top: 18px; }
.fine strong { color: var(--ink); font-weight: 500; }

.hero__stage { margin: 0; position: relative; background: radial-gradient(ellipse at 50% 60%, #22140b 0%, var(--panel) 55%, var(--bg) 100%); border: 1px solid #1d140e; border-radius: 6px; padding: 26px 20px 18px; }
.typed { font-family: var(--mono); color: var(--ink); text-align: center; margin: 0 0 6px; font-size: 18px; min-height: 1.6em; letter-spacing: .02em; }
.caret { display: inline-block; width: 10px; height: 1.1em; vertical-align: -0.2em; margin-left: 3px; background: var(--hot); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
#hive-field { width: 100%; height: auto; display: block; }
.harness-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 26px; margin-top: 10px; font-size: 16px; color: var(--ink); }
.harness-strip span { display: inline-flex; align-items: center; gap: 8px; }
.harness-strip img, .tiles img { width: 20px; height: 20px; filter: invert(1) sepia(.2) saturate(.6) brightness(1.05); }

.section { padding: 80px 0; }
.frame { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: 0 40px 120px -50px color-mix(in oklab, var(--hot) 55%, transparent); }

.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 14px; }
.eyebrow--hot { color: var(--hot); }

.map { position: relative; display: grid; grid-template-columns: 1fr 240px 1fr; gap: 80px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 40px 32px; }
.map__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map__wires path { fill: none; stroke: color-mix(in oklab, var(--hot) 70%, transparent); stroke-width: 1.4; stroke-dasharray: 6 10; animation: flow 2.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.tiles li { display: flex; align-items: center; gap: 14px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; }
.tiles small { display: block; color: var(--muted); font-size: 13px; }
.tiles b { font-size: 16px; }
.tiles--right li { padding: 9px 14px; }
.tiles--right em { margin-left: auto; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); font-style: normal; }
.glyph { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 3px; background: #2a1c12; color: var(--hot); font: 700 11px var(--mono); }
.map__hub { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 34px 18px; background: #160d07; border: 1px solid var(--hot); border-radius: 4px; box-shadow: 0 0 60px -14px var(--hot), inset 0 0 40px -20px var(--hot); }
.map__hub b { font-size: 20px; }
.map__hub small { font: 600 11px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; }
.split h2 { margin-bottom: 24px; }
.body { color: var(--muted); font-size: 18px; }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.checks li { padding-left: 30px; position: relative; color: var(--muted); }
.checks li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: var(--hot); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); box-shadow: 0 0 12px var(--hot); }
.checks b { color: var(--ink); }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 28px; transition: border-color .2s ease, transform .2s ease; }
.card:hover { border-color: var(--hot); transform: translateY(-2px); }
.card p { color: var(--muted); margin: 0; font-size: 16px; }
.card__n { font: 700 13px var(--mono); color: var(--hot); }

.cta { text-align: left; }
.code { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--hot); border-radius: 4px; padding: 22px 24px; font: 15px/1.8 var(--mono); color: var(--ink); overflow-x: auto; margin: 0 0 28px; max-width: 760px; }
.dim { color: var(--dim); }

.foot { border-top: 1px solid var(--line); padding: 36px 0 56px; color: var(--muted); font-size: 15px; }
.foot__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.foot__row p { margin: 0; }
.foot__row p a, .foot nav a:hover { color: var(--hot); }
.foot nav { display: flex; gap: 22px; margin-left: auto; }

@media (max-width: 960px) {
  .hero, .split { grid-template-columns: 1fr; }
  .map { grid-template-columns: 1fr; gap: 28px; }
  .map__wires { display: none; }
  .grid { grid-template-columns: 1fr 1fr; }
  .nav__links a:not(.nav__repo) { display: none; }
}
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; }
  .nav__links { display: none; }
  h1 span { white-space: normal; }
  .btn--sm span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hot, .caret, .map__wires path { animation: none; }
  html { scroll-behavior: auto; }
}