/* plane-projection — unified site styles (v2)
   One dark "imaging lab at night" surface hierarchy: demo videos and
   console panels are the visual engine of both pages, so the whole site
   sits on the same dark ground they live on. Archivo for display,
   Newsreader for prose, IBM Plex Mono for every number and label. */

:root {
  --bg: #0d1411;          /* page ground */
  --surface: #121a16;     /* cards, panels */
  --surface-2: #17231d;   /* raised: tables heads, controls */
  --edge: #263429;        /* hairline */
  --edge-strong: #31423a; /* framed elements */
  --ink: #e9efeb;
  --ink-soft: #9aad9f;
  --ink-faint: #5f7268;
  --accent: #5fd2cf;      /* phosphor teal */
  --accent-dim: #2b6f6c;
  --danger: #ff8a7a;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 70% -8%, rgba(95, 210, 207, .07), transparent 65%),
    var(--bg);
  color: var(--ink);
  font: 400 17px/1.62 var(--serif);
  -webkit-font-smoothing: antialiased;
}

main, .wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
main { padding-bottom: 72px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: var(--accent); }
p { max-width: 70ch; }

code {
  font: 500 .82em/1.4 var(--mono);
  background: rgba(233, 239, 235, .08);
  border: 1px solid rgba(233, 239, 235, .06);
  padding: .08em .35em;
  border-radius: 4px;
  color: var(--ink);
}

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(13, 20, 17, .86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--edge);
}
.site-header .bar { display: flex; align-items: center; gap: 14px; height: 62px; }
.site-header .bar img { width: 24px; height: 24px; }
.brand {
  font: 600 16.5px/1 var(--sans);
  letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.brand small { font: 500 11.5px/1 var(--mono); color: var(--ink-faint); margin-left: 10px; }
.site-header nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.site-header nav a { font: 500 13px/1 var(--mono); color: var(--ink-soft); text-decoration: none; }
.site-header nav a:hover { color: var(--ink); }
.site-header nav a.cta {
  background: var(--accent); color: #06110f;
  padding: 8px 14px; border-radius: 4px; font-weight: 600;
}
.site-header nav a.cta:hover { background: #8fe4e2; color: #06110f; }

/* ---------- hero ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
  padding: 72px 0 56px;
}
.hero h1 {
  font: 600 clamp(2.3rem, 4.4vw, 3.4rem)/1.05 var(--sans);
  letter-spacing: -.035em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero .lede {
  font: 400 1.14rem/1.6 var(--serif);
  color: var(--ink-soft);
  margin: 0 0 28px;
  max-width: 52ch;
}
.hero .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.hero figure { margin: 0; position: relative; }
.hero figure video,
.hero figure img {
  width: 100%; display: block;
  background: #000;
  border: 1px solid var(--edge-strong);
  border-radius: 8px;
}
.hero .hero-meta {
  font: 500 12px/1.6 var(--mono);
  color: var(--ink-soft);
  padding: 10px 2px 0;
}
.hero .hero-meta b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 30px; padding: 48px 0 40px; }
}

/* ---------- buttons ---------- */

.btn {
  font: 600 13.5px/1 var(--sans);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 4px;
  display: inline-block;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn.primary { background: var(--accent); color: #06110f; }
.btn.primary:hover { background: #8fe4e2; }
.btn.ghost { color: var(--ink); border: 1px solid var(--edge-strong); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn.quiet { color: var(--ink-soft); }
.btn.quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sections ---------- */

section { margin-top: 76px; }
section > h2 {
  font: 600 1.55rem/1.2 var(--sans);
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.section-sub { color: var(--ink-soft); margin: 0 0 26px; max-width: 62ch; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 14px; }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 880px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 20px;
  transition: border-color .15s ease, background .15s ease;
}
.card:hover { border-color: var(--edge-strong); background: var(--surface-2); }
.card h3 { font: 600 15.5px/1.35 var(--sans); margin: 10px 0 6px; }
.card p { margin: 0; color: var(--ink-soft); font: 400 14.5px/1.55 var(--sans); }
.card .tag {
  display: inline-block;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--accent);
  background: rgba(95, 210, 207, .08);
  border: 1px solid rgba(95, 210, 207, .25);
  padding: 4px 8px 3px;
  border-radius: 999px;
}
a.card { display: block; text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--accent-dim); }
a.card:hover h3 { color: var(--accent); }

/* ---------- pipeline ---------- */

.pipeline { display: flex; gap: 12px; flex-wrap: wrap; }
.pipe-step {
  flex: 1 1 180px;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-left: 2px solid var(--accent-dim);
  border-radius: 8px;
  padding: 16px 16px 18px;
  position: relative;
}
.pipe-step .tag {
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--accent);
  display: block;
  margin-bottom: 11px;
}
.pipe-step code {
  background: rgba(233, 239, 235, .07);
  border: 0;
  font-size: 12.5px;
}
.pipe-step p { margin: 7px 0 0; color: var(--ink-soft); font: 400 13px/1.5 var(--sans); }

/* ---------- terminal ---------- */

pre.term {
  background: #0a100d;
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent-dim);
  border-radius: 8px;
  color: var(--ink);
  padding: 16px 18px;
  overflow-x: auto;
  font: 400 13.5px/1.75 var(--mono);
  margin: 14px 0 0;
}
pre.term .p { color: var(--accent); font-weight: 600; }
pre.term .c { color: var(--ink-faint); }

/* ---------- video + figure cards ---------- */

figure.video-card { margin: 0; background: #0a100d; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
figure.video-card video { width: 100%; display: block; background: #000; aspect-ratio: 1; object-fit: cover; }
figure.video-card figcaption {
  font: 400 12.5px/1.55 var(--mono);
  color: var(--ink-soft);
  padding: 10px 14px 13px;
  border-top: 1px solid var(--edge);
}
figure.video-card figcaption strong { color: var(--ink); font-weight: 600; }

.frames figure { margin: 0; background: #0a100d; border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.frames img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; }
.frames figcaption {
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-soft);
  padding: 9px 14px 11px;
  border-top: 1px solid var(--edge);
}

/* ---------- benchmark table ---------- */

.table-wrap { border: 1px solid var(--edge); border-radius: 8px; overflow-x: auto; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font: 400 14px/1.55 var(--sans); }
th {
  font: 600 11px/1.3 var(--mono);
  letter-spacing: .07em;
  text-align: left;
  color: var(--ink-faint);
  background: var(--surface-2);
  border-bottom: 1px solid var(--edge);
  padding: 11px 16px;
  white-space: nowrap;
}
td { border-bottom: 1px solid var(--edge); padding: 11px 16px; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td em { font-size: 12.5px; color: var(--ink-faint); }
td.num { font: 500 13px/1.5 var(--mono); }
.badge-pass { color: var(--accent); font-weight: 600; font-family: var(--mono); font-size: 12.5px; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--edge); margin-top: 84px; }
.site-footer .foot {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
  padding: 24px 24px 44px;
  font: 400 13px/1.5 var(--mono);
  color: var(--ink-soft);
}
.site-footer .foot img { width: 18px; height: 18px; }
.site-footer .foot a { color: var(--ink-soft); }
.site-footer .foot a:hover { color: var(--ink); }
.site-footer .spacer { flex: 1; }

@media (max-width: 720px) {
  .site-header nav a:not(.cta) { display: none; }
  .brand small { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}