/* ─── Design tokens — V1 "Engineering schematic" palette from BRAND.md ─── */
:root {
  --ink: 10 10 11;
  --surface: 255 255 255;
  --raised: 245 246 247;
  --hairline: 230 231 234;
  --text-mid: 74 77 84;
  --text-low: 139 142 148;

  /* Signal palette — used as accents, not decoration. */
  --signal: 30 64 175;        /* primary blueprint blue */
  --signal-soft: 239 244 255;
  --signal-on: 255 255 255;
  --amber: 236 118 17;        /* Sodiarc parent orange — warnings, money-out */
  --amber-soft: 254 243 230;
  --emerald: 5 150 105;       /* speed, shipped, live */
  --emerald-soft: 232 250 241;
  --violet: 124 58 237;       /* AI / applied research */
  --violet-soft: 244 240 255;
}
.dark {
  --ink: 250 250 250;
  --surface: 11 13 16;
  --raised: 22 25 29;
  --hairline: 35 38 43;
  --text-mid: 165 168 174;
  --text-low: 106 109 115;
  --signal: 96 165 250;
  --signal-soft: 15 31 61;
  --signal-on: 255 255 255;
  --amber: 251 146 60;
  --amber-soft: 41 26 14;
  --emerald: 52 211 153;
  --emerald-soft: 11 38 32;
  --violet: 167 139 250;
  --violet-soft: 30 22 55;
}

html, body {
  background: rgb(var(--surface));
  color: rgb(var(--ink));
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgb(var(--signal-soft)); color: rgb(var(--signal)); }

.num {
  font-family: "JetBrains Mono", ui-monospace, "Menlo", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.caps {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgb(var(--text-low));
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Page entrance — small fade-up on first paint */
@keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-in > * { animation: page-in 360ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.page-in > *:nth-child(1) { animation-delay: 0ms; }
.page-in > *:nth-child(2) { animation-delay: 60ms; }
.page-in > *:nth-child(3) { animation-delay: 120ms; }
.page-in > *:nth-child(4) { animation-delay: 180ms; }
.page-in > *:nth-child(5) { animation-delay: 220ms; }
.page-in > *:nth-child(n + 6) { animation-delay: 260ms; }

/* Logo dot constellation picks up signal colour in both themes.
   The mark is INLINED in each header (not an <object>) precisely so these
   rules can reach it — an <object> is a separate document and would render
   the artwork with default black fills, invisible on the dark surface. */
.sodiarc-mark .dot { fill: rgb(var(--signal)); }
.sodiarc-mark .body { fill: rgb(var(--ink)); }

/* ─── Accent helpers ───────────────────────────────────────────── */
.text-signal-c   { color: rgb(var(--signal)); }
.text-amber-c    { color: rgb(var(--amber)); }
.text-emerald-c  { color: rgb(var(--emerald)); }
.text-violet-c   { color: rgb(var(--violet)); }
.bg-signal-soft-c   { background-color: rgb(var(--signal-soft)); }
.bg-amber-soft-c    { background-color: rgb(var(--amber-soft)); }
.bg-emerald-soft-c  { background-color: rgb(var(--emerald-soft)); }
.bg-violet-soft-c   { background-color: rgb(var(--violet-soft)); }

/* ─── Geometry · Blueprint grid background ─────────────────────── */
/* Faint engineering grid, masked so it reads as motif not background. */
.bp-grid { position: relative; isolation: isolate; }
.bp-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgb(var(--hairline)) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--hairline)) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 15% 0%, black 0%, transparent 65%);
          mask-image: radial-gradient(ellipse 75% 55% at 15% 0%, black 0%, transparent 65%);
  opacity: 0.7;
  z-index: -1;
  pointer-events: none;
}
/* Denser dot grid for the right side of hero */
.bp-dots {
  background-image: radial-gradient(rgb(var(--hairline)) 1.1px, transparent 1.1px);
  background-size: 16px 16px;
  background-position: 0 0;
}
.dark .bp-dots { background-image: radial-gradient(rgb(var(--hairline)) 1.1px, transparent 1.1px); }

/* ─── Geometry · Hero ambient glow ─────────────────────────────── */
.hero-glow { position: relative; isolation: isolate; }
.hero-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 18% 5%, rgb(var(--signal-soft)) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 95% 0%, rgb(var(--amber) / 0.07) 0%, transparent 55%);
  z-index: -1;
  pointer-events: none;
}

/* ─── Geometry · Cross-hair tick mark, used at section starts ──── */
.tick {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  vertical-align: middle;
}
.tick::before, .tick::after {
  content: "";
  position: absolute;
  background-color: rgb(var(--signal));
}
.tick::before { left: 6px; top: 0; bottom: 0; width: 2px; }
.tick::after  { top: 6px; left: 0; right: 0; height: 2px; }

/* ─── Geometry · Tagged numeric stat with vertical signal bar ──── */
.stat {
  position: relative;
  padding-left: 14px;
}
.stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background-color: var(--stat-accent, rgb(var(--signal)));
  border-radius: 9999px;
}
.stat[data-accent="amber"]   { --stat-accent: rgb(var(--amber)); }
.stat[data-accent="emerald"] { --stat-accent: rgb(var(--emerald)); }
.stat[data-accent="violet"]  { --stat-accent: rgb(var(--violet)); }

/* ─── Geometry · Service-track card, left rail picks up an accent ─ */
.track-card { position: relative; padding-left: 1.25rem; }
.track-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background-color: var(--accent, rgb(var(--hairline)));
  border-radius: 9999px;
  transition: width 200ms ease, opacity 200ms ease;
}
.track-card:hover::before { width: 3px; }
.track-card[data-accent="signal"]  { --accent: rgb(var(--signal)); }
.track-card[data-accent="emerald"] { --accent: rgb(var(--emerald)); }
.track-card[data-accent="violet"]  { --accent: rgb(var(--violet)); }
.track-card[data-accent="amber"]   { --accent: rgb(var(--amber)); }

/* ─── Geometry · CTA shell ─────────────────────────────────────── */
.cta-shell {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgb(var(--raised)) 0%, rgb(var(--signal-soft) / 0.7) 100%);
  border: 1px solid rgb(var(--hairline));
}
.cta-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 45% 70% at 100% 100%, rgb(var(--signal) / 0.10) 0%, transparent 70%);
  pointer-events: none;
}
.cta-shell > * { position: relative; }

/* ─── Geometry · Live status pill ──────────────────────────────── */
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  border-radius: 9999px;
  background-color: rgb(var(--emerald-soft));
  color: rgb(var(--emerald));
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid rgb(var(--emerald) / 0.30);
}
.live-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background-color: rgb(var(--emerald));
  box-shadow: 0 0 0 0 rgb(var(--emerald) / 0.55);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgb(var(--emerald) / 0.55); }
  50%      { box-shadow: 0 0 0 6px rgb(var(--emerald) / 0); }
}

/* ─── Geometry · Diagram block (right of hero) ─────────────────── */
/* A small SVG-on-CSS schematic: nested squares + crosshair, very faint. */
.schematic {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin-left: auto;
}
.schematic svg { width: 100%; height: 100%; display: block; }
.schematic .sch-line { stroke: rgb(var(--hairline)); stroke-width: 1; fill: none; }
.schematic .sch-line-mid { stroke: rgb(var(--text-low) / 0.55); stroke-width: 1; fill: none; }
.schematic .sch-fill-soft { fill: rgb(var(--signal-soft)); }
.schematic .sch-stroke-signal { stroke: rgb(var(--signal)); stroke-width: 1.2; fill: none; }
.schematic .sch-dot-signal { fill: rgb(var(--signal)); }
.schematic .sch-dot-amber  { fill: rgb(var(--amber)); }
.schematic .sch-dot-emerald{ fill: rgb(var(--emerald)); }
.schematic .sch-text {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  fill: rgb(var(--text-low));
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.schematic .sch-rotor { transform-origin: center; animation: rotor 14s linear infinite; }
@keyframes rotor { to { transform: rotate(360deg); } }

/* ─── Geometry · Delivery framework blueprint ──────────────────── */
/* Wide schematic. Scrolls inside its own container below ~900px. */
.blueprint { width: 100%; overflow-x: auto; }
.blueprint svg { display: block; width: 100%; min-width: 880px; height: auto; }
.blueprint .bl-frame  { stroke: rgb(var(--hairline)); stroke-width: 1; fill: none; }
.blueprint .bl-box    { fill: rgb(var(--raised)); stroke: rgb(var(--hairline)); stroke-width: 1; }
.blueprint .bl-box-dashed { fill: none; stroke: rgb(var(--hairline)); stroke-width: 1; stroke-dasharray: 4 4; }
.blueprint .bl-band   { fill: rgb(var(--signal-soft)); stroke: rgb(var(--signal) / 0.3); stroke-width: 1; }
.blueprint .bl-rule   { stroke: rgb(var(--hairline)); stroke-width: 1; fill: none; }
.blueprint .bl-flow   { stroke: rgb(var(--signal)); stroke-width: 1.4; fill: none; }
.blueprint .bl-tie    { stroke: rgb(var(--text-low) / 0.45); stroke-width: 1; fill: none; stroke-dasharray: 3 4; }
.blueprint .bl-gate   { fill: rgb(var(--surface)); stroke: rgb(var(--signal)); stroke-width: 1.2; }
.blueprint .bl-dot    { fill: rgb(var(--signal)); }
.blueprint .bl-dot-amber { fill: rgb(var(--amber)); }
.blueprint .bl-title {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: rgb(var(--ink));
}
.blueprint .bl-body {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 10.5px;
  fill: rgb(var(--text-mid));
}
.blueprint .bl-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 8px;
  fill: rgb(var(--text-low));
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.blueprint .bl-tag-signal { fill: rgb(var(--signal)); }

/* ─── Geometry · Corner brackets, for case-study figure ────────── */
.brackets { position: relative; }
.brackets::before, .brackets::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: rgb(var(--signal));
  border-style: solid;
}
.brackets::before { top: -1px; left: -1px;  border-width: 1.5px 0 0 1.5px; }
.brackets::after  { bottom: -1px; right: -1px; border-width: 0 1.5px 1.5px 0; }

/* ─── Figure · Case-study screenshot frame ─────────────────────── */
/* Real captures of shipped product. Hairline frame + signal corner
   brackets so a screenshot reads as evidence, not decoration. */
.shot {
  position: relative;
  border: 1px solid rgb(var(--hairline));
  border-radius: 2px;
  background: rgb(var(--raised));
  overflow: hidden;
}
.shot img { display: block; width: 100%; height: auto; }
/* Captures are light-UI; soften them slightly against the dark surface. */
.dark .shot img { filter: brightness(0.92) contrast(1.02); }
.shot figcaption {
  border-top: 1px solid rgb(var(--hairline));
  padding: 0.75rem 1rem;
  font-size: 12px;
  color: rgb(var(--text-low));
  background: rgb(var(--surface));
}
.shot-brackets::before, .shot-brackets::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgb(var(--signal));
  border-style: solid;
  z-index: 2;
}
.shot-brackets::before { top: -1px; left: -1px;  border-width: 1.5px 0 0 1.5px; }
.shot-brackets::after  { top: -1px; right: -1px; border-width: 1.5px 1.5px 0 0; }

/* Work-index card thumbnail */
.thumb {
  border: 1px solid rgb(var(--hairline));
  border-radius: 2px;
  overflow: hidden;
  background: rgb(var(--raised));
  aspect-ratio: 16 / 10;
}
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Schematics are letterboxed rather than cropped — labels must survive. */
.thumb-contain { display: flex; align-items: center; }
.thumb-contain img { object-fit: contain; object-position: center; }
.dark .thumb img { filter: brightness(0.92) contrast(1.02); }

/* ─── Geometry · Numbered chip, used in process list ───────────── */
.step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: rgb(var(--signal-soft));
  color: rgb(var(--signal));
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -0.02em;
  border: 1px solid rgb(var(--signal) / 0.25);
  flex-shrink: 0;
}

/* ─── Disclosure · FAQ ──────────────────────────────────────────
   Written here rather than as a Tailwind arbitrary variant: the
   `&` in [&::-webkit-details-marker] has to be HTML-escaped inside
   a class attribute, and the CDN then scans the escaped form. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }