/* =============================================================================
   Wrenik — article publishing engine
   -----------------------------------------------------------------------------
   Dark-first, computational. Same design language as Ekkovia (tokens, HexNet,
   Michroma for technical labels, a restrained grid behind everything) with
   Wrenik's own palette: near-black ground, paper-white structure, amber signal.
   That mapping comes straight off the mark — a white wren with an amber beak.
   ========================================================================== */

@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --bg:        #08090C;
  --bg-2:      #0B0D11;
  --surface:   #101319;
  --surface-2: #151922;
  --panel:     #12161E;
  --line:      rgba(255,255,255,.07);
  --line-2:    rgba(255,255,255,.13);
  --line-amber: rgba(255,163,26,.26);

  /* Brand: amber is the only chromatic accent. Everything else is temperature. */
  --amber:      #FFA31A;
  --amber-soft: #FFBB55;
  --amber-deep: #E07C00;
  --steel:      #8FA3BF;
  --green:      #4ADE80;
  --red:        #F0736B;

  --text:  #E9EBEF;
  --muted: #949BA9;
  --faint: #5B6373;

  /* HexNet cell palette. The module's variable names are fixed by the shared
     module (see hexnet.js); the values are Wrenik's. --hx-blue is the structural
     colour, --hx-gold the signal — steel and amber here. */
  --hx-idle:  #2C3441;
  --hx-blue:  #8FA3BF;
  --hx-gold:  #FFA31A;
  --hx-white: #EDF1F7;
  --hx-green: #4ADE80;
  --hx-red:   #F0736B;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display: "Montserrat", var(--sans);
  --tech: "Michroma", var(--sans);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 16px;
  --radius-sm: 10px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 20px 54px rgba(0,0,0,.6);
}

/* ---- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { overflow-x: clip; max-width: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
::selection { background: rgba(255,163,26,.3); color: #fff; }

/* technical grid + a warm bloom at the top, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(90% 60% at 50% -10%, rgba(255,163,26,.09), transparent 62%);
}

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
.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: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--amber); color: #1A1103; padding: 10px 16px; border-radius: 10px;
  font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* =============================================================================
   HexNet
   ========================================================================== */
.hexnet { position: relative; width: 100%; height: 100%; line-height: 0; }
.hx-svg { width: 100%; height: 100%; overflow: visible; }

/* Every field dissolves at its own extent instead of ending on a rectangle. */
.stage-net .hx-svg, .band-net .hx-svg, .cta-net .hx-svg, .sec-net .hx-svg {
  -webkit-mask-image: radial-gradient(70% 72% at 50% 50%, #000 22%, transparent 92%);
          mask-image: radial-gradient(70% 72% at 50% 50%, #000 22%, transparent 92%);
}
.stage-net .hx-svg {
  -webkit-mask-image: radial-gradient(120% 88% at 50% 42%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 88% at 50% 42%, #000 60%, transparent 100%);
}
.band-net .hx-svg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.hx {
  --a: 0; --f: 0; --e: 1;
  fill: var(--hx-base, var(--hx-blue));
  stroke: var(--hx-base, var(--hx-blue));
  stroke-width: 1;
  fill-opacity: calc(var(--a) * 0.92 * var(--e));
  stroke-opacity: calc(var(--a) * 0.5 * var(--e));
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(0.92 + var(--a) * 0.12));
  transition: fill-opacity .12s linear, stroke-opacity .12s linear;
}
@supports (color: color-mix(in srgb, red, blue)) {
  .hx {
    fill: color-mix(in srgb, var(--hx-base) calc((1 - var(--f)) * 100%), var(--hx-focus) calc(var(--f) * 100%));
    stroke: color-mix(in srgb, var(--hx-base) calc((1 - var(--f)) * 100%), var(--hx-focus) calc(var(--f) * 100%));
  }
}
/* One bloom on the whole grid — dim cells are transparent and cast nothing, so
   only lit cells glow. Warm, because the signal colour is amber. */
.hx-svg { filter: drop-shadow(0 0 calc(2px + var(--hx-glow, .5) * 6px) rgba(255,178,80,.42)); }

.hx-link { stroke: var(--hx-base, var(--hx-blue)); stroke-width: 1; fill: none;
  transition: stroke-opacity .12s linear; }
.hx-packet { fill: var(--hx-focus, var(--hx-gold)); transition: opacity .1s linear; }
.hx-inline { display: inline-block; width: 44px; height: 30px; vertical-align: middle; flex: none; }

/* =============================================================================
   Layout primitives
   ========================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding: clamp(52px, 8vw, 104px) 0; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head.center { justify-content: center; }
.sec-meta.center, .cta .sec-meta { justify-content: center; }
.sec-meta { display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--tech); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sec-meta b { color: var(--amber); font-weight: 400; }
/* A small field beside each section number, the way Ekkovia sets one beside its
   status line. The variant is picked for what the section is about, so the motion
   carries the same meaning as the words next to it. */
/* 52x30 is the xs grid's own 1.73 aspect; a squarer box letterboxes it. */
.sec-net-inline { width: 52px; height: 30px; opacity: .95; flex: none; }
.sec-net-inline .hx-svg {
  -webkit-mask-image: radial-gradient(72% 78% at 50% 50%, #000 30%, transparent 96%);
          mask-image: radial-gradient(72% 78% at 50% 50%, #000 30%, transparent 96%);
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 72px); }
h2 { font-size: clamp(28px, 4.4vw, 50px); }
h3 { font-size: 17px; letter-spacing: -.01em; }
em { font-style: normal; color: var(--amber); }
.lead { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); max-width: 52ch; }
code { font-family: var(--mono); font-size: .88em; color: var(--text);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; }
.center-h { text-align: center; max-width: 20ch; margin: 0 auto 18px; }
.center-p { text-align: center; margin: 0 auto clamp(38px, 5vw, 60px); max-width: 60ch; color: var(--muted); }

/* =============================================================================
   Buttons
   ========================================================================== */
.btn {
  --pad: 12px 20px;
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 15px;
  padding: var(--pad); border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn.lg { --pad: 15px 26px; font-size: 16px; }
.btn-primary {
  background: var(--amber); color: #1A1103;
  box-shadow: 0 0 0 1px rgba(255,163,26,.4), 0 14px 40px -12px rgba(255,163,26,.5);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--amber-soft);
  box-shadow: 0 0 0 1px rgba(255,163,26,.6), 0 18px 50px -12px rgba(255,163,26,.6); }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--amber); background: rgba(255,163,26,.07); transform: translateY(-2px); }
.nav .btn-primary:hover { transform: none; }
.btn .apple { width: 15px; height: 15px; }
.btn-sub { display: block; font-family: var(--tech); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-top: 14px; }

/* =============================================================================
   Nav
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 100; padding: 14px 0; }
.nav-inner {
  display: flex; align-items: center; gap: 20px;
  background: rgba(12,14,18,.6); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 9px 9px 18px; max-width: calc(var(--maxw) - 40px);
  box-shadow: 0 14px 44px -20px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
  transition: background .2s var(--ease);
}
.nav.scrolled .nav-inner { background: rgba(12,14,18,.86); }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
/* The mark and wordmark are the traced vectors, so they stay crisp at any size and
   the wordmark's real letterforms replace the Michroma approximation that stood in
   for them. Heights are set and widths left auto so the tight viewBoxes drive the
   aspect ratio. */
/* Sized against Ekkovia, whose wordmark renders its letters at 17px in the nav.
   Wrenik's logotype carries a swash below the baseline, so the letters are 0.79 of
   the artwork's height — 22px of SVG puts the letterforms at ~17px, matching. */
.brand-mark { width: auto; height: 36px; }
.brand-word { width: auto; height: 22px; }
.footer .brand-mark { height: 40px; }
.footer .brand-word { height: 24px; }
@media (max-width: 900px) {
  .brand-mark { height: 32px; }
  .brand-word { height: 19px; }
}
@media (max-width: 560px) {
  .brand-mark { height: 28px; }
  .brand-word { height: 16px; }
}
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  font-size: 14px; color: var(--muted); padding: 8px 14px; border-radius: 999px;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,.04); }
.nav-cta { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2); cursor: pointer; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; }
.nt-bar { display: block; width: 15px; height: 1.5px; background: var(--muted); border-radius: 2px; }
.nav-menu { display: none; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-menu[hidden] { display: none; }
  .nav-menu { display: block; margin: 10px auto 0; max-width: calc(var(--maxw) - 40px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 10px; }
  .nav-menu a { display: block; padding: 12px 14px; color: var(--muted); border-radius: 10px; }
  .nav-menu a:hover { background: rgba(255,255,255,.04); color: var(--text); }
  .nav-menu .nm-cta { margin-top: 6px; text-align: center; color: #1A1103; }
}

/* =============================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: clamp(28px, 5vw, 60px) 0 clamp(50px, 7vw, 92px); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tech); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 20px;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber);
  box-shadow: 0 0 0 4px rgba(255,163,26,.16); animation: pulse 2.6s var(--ease) infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .eyebrow .dot { animation: none; } }

.hero h1 { margin-bottom: 20px; font-size: clamp(34px, 4.6vw, 58px); }
.hero .lead { margin-bottom: 30px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.sysline { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap;
  padding-top: 22px; border-top: 1px solid var(--line); }
.sys-label { font-family: var(--tech); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.sys-body { font-size: 13px; color: var(--muted); }

.hero-stage { position: relative; min-height: 420px; display: grid; place-items: center; }
.stage-net { position: absolute; inset: -14% -8%; z-index: 0; opacity: .95; pointer-events: none; }

/* =============================================================================
   Terminal mockup — Wrenik's actual interface
   ========================================================================== */
.term {
  position: relative; z-index: 1; width: 100%;
  background: linear-gradient(180deg, #0E1117, #0A0C11);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.75;
}
.term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: #2B313C; flex: none; }
.term-title { font-family: var(--tech); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint); margin-left: 6px; }
.term-body { padding: 16px 18px 20px; white-space: pre; overflow-x: auto; }
.term-body .t-brand { color: var(--text); font-weight: 700; letter-spacing: .18em; }
.term-body .t-dim { color: var(--faint); }
.term-body .t-mut { color: var(--muted); }
.term-body .t-amber { color: var(--amber); }
.term-body .t-green { color: var(--green); }
.term-body .t-red { color: var(--red); }
.term-body .t-sel { color: var(--text); }
.term-caret { display: inline-block; width: 7px; height: 14px; background: var(--amber);
  vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 0%,50% { opacity: 1; } 51%,100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term-caret { animation: none; } }

/* =============================================================================
   Cards
   ========================================================================== */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
/* Five cards fit auto-fit into four columns at desktop width, orphaning the fifth
   onto a row of its own. Pin the count instead, the same way .tpl does. */
@media (min-width: 1080px) { .cards.five { grid-template-columns: repeat(5, 1fr); } }
.card {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; overflow: hidden;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 14.5px; }
.card-n { font-family: var(--tech); font-size: 10px; letter-spacing: .18em; color: var(--amber); margin-bottom: 14px; }

/* =============================================================================
   Workspace diagram
   ========================================================================== */
.obj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; }
.tree { font-family: var(--mono); font-size: 13px; line-height: 1.95; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; overflow-x: auto; white-space: pre; }
.tree .k { color: var(--amber); }
.tree .w { color: var(--text); }
.tree .c { color: var(--faint); }
.obj-list { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.obj-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--muted); }
.obj-list .tick { color: var(--amber); flex: none; font-family: var(--mono); }

/* =============================================================================
   Pipeline
   ========================================================================== */
.pipe { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pipe-net { position: absolute; inset: -30% -4%; z-index: 0; opacity: .5; pointer-events: none; }
.pipe-net .hx-svg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.pipe-step { position: relative; z-index: 1; text-align: center;
  background: rgba(16,19,25,.86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 11px; }
.pipe-step b { display: block; font-family: var(--display); font-size: 15px; margin-bottom: 6px; }
.pipe-step span { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 1080px) { .pipe { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .pipe { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .pipe { grid-template-columns: 1fr; } }

/* =============================================================================
   Split panes (rename / validation output)
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.split.rev .split-copy { order: 2; }
.split-copy h2 { margin-bottom: 16px; }
.split-copy p { color: var(--muted); margin-bottom: 14px; }
/* The pane itself must NOT be `white-space: pre`. It was, and every newline and
   indent of the surrounding HTML then rendered as real blank space — one pane grew
   from 380px to 787px and pushed its own content out of view. The preformatted text
   lives in a <pre> child instead, where the whitespace is the content. */
.pane {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; overflow: hidden;
}
.pane-body {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.9;
  white-space: pre; overflow-x: auto; color: var(--muted);
}
.pane .p-h { font-family: var(--tech); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); display: block; margin-bottom: 12px; position: relative; z-index: 1; }
.pane .ok { color: var(--green); }
.pane .warn { color: var(--amber); }
.pane .err { color: var(--red); }
.pane .dim { color: var(--faint); }
.pane .em { color: var(--text); }
.sec-net { position: absolute; inset: 0; z-index: 0; opacity: .3; pointer-events: none; }
/* No blanket `.pane > *` lift here: it matched .sec-net too and, being later in the
   sheet with equal specificity, forced the field back into flow — which added its
   full height to the pane. .p-h and .pane-body raise themselves instead. */

/* =============================================================================
   Templates
   ========================================================================== */
.tpl { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
/* Five shapes, five columns — otherwise the fifth orphans onto its own row. */
@media (min-width: 1080px) { .tpl { grid-template-columns: repeat(5, 1fr); } }
.tpl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.tpl-card h3 { margin-bottom: 12px; }
.tpl-card ol { list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 5px; }
.tpl-card li { counter-increment: s; font-size: 13px; color: var(--muted); display: flex; gap: 10px; }
.tpl-card li::before { content: counter(s, decimal-leading-zero); font-family: var(--mono);
  font-size: 10px; color: var(--faint); padding-top: 3px; }

/* =============================================================================
   Config / two projects
   ========================================================================== */
.proj { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; }
.proj-card .p-name { font-family: var(--tech); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--amber); margin-bottom: 16px; }
.proj-card dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13px; }
.proj-card dt { font-family: var(--tech); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--faint); padding-top: 3px; }
.proj-card dd { font-family: var(--mono); color: var(--muted); word-break: break-all; }

/* =============================================================================
   Band (hex-text wordmark)
   ========================================================================== */
.band { position: relative; padding: clamp(30px, 5vw, 60px) 0; }
.band-net { position: relative; width: 100%; height: clamp(88px, 12vw, 150px); opacity: .9; }
.band-cap { text-align: center; font-family: var(--tech); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--faint); margin-top: 14px; }

/* =============================================================================
   Download CTA
   ========================================================================== */
.cta { text-align: center; overflow-x: clip; }
.cta-inner { position: relative; }
.cta-net { position: relative; margin: 0 auto clamp(2px, 1vw, 14px); width: min(720px, 96%);
  height: clamp(170px, 20vw, 230px); z-index: 0; opacity: .5; pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
.cta h2 { margin: 8px 0 14px; }
.cta .lead { margin: 0 auto 28px; }
.dl-meta { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 24px;
  font-family: var(--tech); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.dl-meta span { display: inline-flex; align-items: center; gap: 7px; }
.dl-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--amber); font-style: normal; }

.alt-install { margin-top: 34px; display: inline-block; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px 18px; font-family: var(--mono); font-size: 13px; color: var(--muted);
  white-space: pre; overflow-x: auto; max-width: 100%; line-height: 1.9; }
.alt-install .c { color: var(--amber); }

/* =============================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid var(--line); padding: clamp(40px, 6vw, 70px) 0 40px; margin-top: clamp(30px, 5vw, 60px); }
.foot-top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 40px; padding-bottom: 40px; }
.foot-tag { color: var(--muted); font-size: 14px; margin: 14px 0; max-width: 32ch; }
.foot-status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--tech);
  font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); }
.foot-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); font-style: normal; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols h3 { font-family: var(--tech); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 12px; font-weight: 400; }
.foot-cols a, .foot-cols span { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; }
.foot-cols a:hover { color: var(--text); }
.foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 24px; font-size: 13px; color: var(--faint); }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .hero-grid, .obj-grid, .split, .proj { grid-template-columns: 1fr; }
  .split.rev .split-copy { order: 0; }
  .hero-stage { min-height: 340px; }
  .foot-top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .term-body { font-size: 11px; }
  .center-h { max-width: none; }
}