/* ============================================================================
   NYXO — public site.

   Identity: Platinum Veil. Graphite depth, porcelain light, brushed silver,
   one restrained cobalt signal. Shares its token names with the portal
   (styles.css) so the marketing site and the product feel like one system.

   Type: nothing below 11px, and 11px only for high-contrast micro-labels.
   Colour: every text colour clears WCAG AA (4.5:1) on its own background in
   both themes — the previous scale ran 7-9px text at 3.35:1.
   ========================================================================= */

@font-face {
  font-family: "Inter var";
  /* Subset to latin: 352 KB -> 70 KB, same 100-900 variable axis. */
  src: url("/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root,
:root[data-theme="dark"] {
  --page: #07090c;
  --page-2: #0b0e13;
  --surface: #0f141a;
  --surface-2: #151c24;
  --surface-3: #1c242e;

  --ink: #f2f4f5;
  --ink-2: #c6cfd8;
  --muted: #9aa6b2;   /*  7.7:1 on --page  */
  --faint: #7d8996;   /*  5.3:1 on --page  */

  --hairline: #1b232c;
  --line: #232d38;
  --line-strong: #3c4956;

  --silver: #dbe3e9;
  --accent: #8fb4ff;      /*  9.6:1 on --page  */
  --accent-deep: #5f8fe8;
  --accent-ink: #07101f;
  --good: #7fd4a6;
  --error: #ff9a95;

  --shadow-soft: 0 18px 44px rgba(0, 0, 0, 0.4);
  --shadow-deep: 0 44px 120px -24px rgba(0, 0, 0, 0.72);
  --radius: 12px;
  --radius-lg: 18px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --topbar-height: 76px;
  --anchor-gap: 20px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --page: #f4f5f3;
  --page-2: #eceeeb;
  --surface: #ffffff;
  --surface-2: #f1f3f1;
  --surface-3: #e6eae8;

  --ink: #12171c;
  --ink-2: #3c464f;
  --muted: #5c6873;   /*  6.4:1 on --page  */
  --faint: #6b7883;   /*  5.1:1 on --page  */

  --hairline: #e2e5e3;
  --line: #d5dad8;
  --line-strong: #a9b3b8;

  --silver: #27333c;
  --accent: #1f4fa8;      /*  7.4:1 on --page  */
  --accent-deep: #16407f;
  --accent-ink: #ffffff;
  --good: #14683a;
  --error: #a8302b;

  --shadow-soft: 0 18px 40px rgba(28, 38, 46, 0.12);
  --shadow-deep: 0 40px 100px -28px rgba(28, 38, 46, 0.26);

  color-scheme: light;
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topbar-height) + var(--anchor-gap));
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `hidden` makes body a competing scroll container in Chromium and breaks
     the sticky header during fragment navigation. `clip` prevents horizontal
     paint overflow without changing which element owns vertical scrolling. */
  overflow-x: clip;
}

/* Faint vertical seam + corner light: the only page-level decoration. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0 49.96%, var(--hairline) 50%, transparent 50.04%),
    radial-gradient(ellipse 80% 50% at 78% -12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}

a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

h1, h2, h3 { margin: 0; font-weight: 450; letter-spacing: -0.03em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 14px;
  font-weight: 600;
  transition: top 0.18s var(--ease);
}
.skip-link:focus-visible { top: 16px; }

/* ---------- shared pieces ---------- */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: linear-gradient(145deg, #eef4f8, #8b9aa8 55%, #3b4a58);
  color: #0d1319;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 6px 18px rgba(0, 0, 0, 0.22);
}
.brand-mark svg { width: 15px; height: 15px; }
.brand-mark.small { width: 20px; height: 20px; border-radius: 6px; }
.brand-mark.small svg { width: 11px; height: 11px; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease),
    background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.button svg { width: 17px; height: 17px; flex-shrink: 0; }
.button:hover { transform: translateY(-1px); border-color: var(--accent); }
.button:active { transform: translateY(0) scale(0.99); }

.button.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--silver), color-mix(in srgb, var(--silver) 74%, var(--accent)));
  color: var(--page);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 18%, transparent);
}
:root[data-theme="light"] .button.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: #fff;
}
.button.primary:hover { box-shadow: 0 18px 42px color-mix(in srgb, var(--accent) 30%, transparent); }
.button.secondary { color: var(--ink-2); }
.button.ghost { min-height: 44px; padding: 0 16px; font-size: 13px; color: var(--ink-2); border-color: var(--line); }
.button.block { width: 100%; }

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.icon-button svg { width: 19px; height: 19px; }
.icon-button:hover { color: var(--ink); border-color: var(--line-strong); }

.icon-sun { display: none; }
:root[data-theme="light"] .icon-moon { display: none; }
:root[data-theme="light"] .icon-sun { display: block; }

.live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 55%, transparent);
  animation: livePulse 2.6s var(--ease) infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--topbar-height);
  padding: 0 clamp(16px, 4vw, 64px);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--page) 82%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
}
.topbar > nav { display: flex; align-items: center; gap: 30px; }
.topbar > nav a {
  position: relative;
  padding: 4px 0;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.18s var(--ease);
}
.topbar > nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s var(--ease);
}
.topbar > nav a:hover { color: var(--ink); }
.topbar > nav a:hover::after { right: 0; }

.top-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}
#nav-toggle { display: none; }

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

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(460px, 1.08fr);
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  max-width: 1540px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 92px) clamp(16px, 5vw, 72px) clamp(80px, 8vw, 124px);
  min-height: calc(100svh - 76px);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(72vw, 1060px);
  aspect-ratio: 1;
  right: -14%;
  top: 48%;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 43%),
    conic-gradient(from 210deg, transparent 0 18%, color-mix(in srgb, var(--silver) 8%, transparent) 28%, transparent 38% 72%, color-mix(in srgb, var(--accent) 8%, transparent) 82%, transparent 92%);
  filter: blur(12px);
  opacity: 0.85;
  pointer-events: none;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow-rule { width: 28px; height: 1px; background: currentColor; flex-shrink: 0; }

.hero h1 {
  font-size: clamp(48px, 6.5vw, 98px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  max-width: 11.5ch;
}
.hero h1 em {
  font-style: italic;
  font-weight: 430;
  color: transparent;
  background:
    linear-gradient(104deg, var(--silver) 4%, var(--ink) 28%, var(--accent) 60%, var(--silver) 88%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sheen 8s var(--ease) infinite;
}
@keyframes sheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

.scroll-cue {
  position: absolute;
  left: clamp(16px, 5vw, 72px);
  bottom: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
.scroll-cue svg { width: 15px; height: 15px; animation: nudge 2.4s var(--ease) infinite; }
.scroll-cue:hover { color: var(--ink); }
@keyframes nudge {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ---------- hero stage: the orbit ---------- */

.hero-stage {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  max-width: 690px;
  margin-inline: auto;
  perspective: 1400px;
  /* Set by landing.js from pointer position; 0 until then. */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* A precision dial gives the visual a recognizable silhouette before any
   animation runs. In dark mode it is atmospheric; light mode below becomes a
   machined platinum object with its own, intentionally different material. */
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 4.5%;
  border: 1px solid color-mix(in srgb, var(--silver) 14%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 67%, color-mix(in srgb, var(--accent) 7%, transparent) 67.2% 67.5%, transparent 67.8%),
    repeating-conic-gradient(from -1deg, color-mix(in srgb, var(--silver) 18%, transparent) 0deg .32deg, transparent .32deg 5deg);
  mask-image: radial-gradient(circle, transparent 0 76%, #000 76.3% 100%);
  opacity: .62;
  pointer-events: none;
}
.hero-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 15%;
  right: 15%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 28%, transparent) 25% 75%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 16%, transparent);
  pointer-events: none;
}
.stage-serial,
.stage-state {
  position: absolute;
  z-index: 3;
  color: var(--faint);
  font: 650 9px/1 var(--mono, ui-monospace, monospace);
  letter-spacing: .13em;
  pointer-events: none;
}
.stage-serial { left: 9%; top: 49%; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.stage-state { right: 8%; top: 49%; display: flex; align-items: center; gap: 7px; transform: rotate(90deg) translateX(50%); transform-origin: right top; }
.stage-state i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px color-mix(in srgb,var(--accent) 70%,transparent); }

.stage-aurora {
  position: absolute;
  z-index: -1;
  width: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(46px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.stage-aurora-a {
  left: 2%;
  top: 2%;
  background: color-mix(in srgb, var(--silver) 18%, transparent);
  animation: auroraA 13s var(--ease) infinite alternate;
}
.stage-aurora-b {
  right: 0;
  bottom: 2%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  animation: auroraB 15s var(--ease) infinite alternate;
}
@keyframes auroraA {
  to { transform: translate(18%, 12%) scale(1.15); opacity: 0.7; }
}
@keyframes auroraB {
  to { transform: translate(-16%, -14%) scale(1.12); opacity: 0.62; }
}
:root[data-theme="light"] .stage-aurora {
  mix-blend-mode: multiply;
  opacity: 0.24;
}

:root[data-theme="light"] .hero-stage {
  filter: drop-shadow(0 34px 42px rgba(25, 37, 47, .12));
}
:root[data-theme="light"] .hero-stage::before {
  inset: 2.5%;
  border-color: rgba(63, 76, 87, .22);
  background:
    repeating-conic-gradient(from -1deg, rgba(27,39,48,.26) 0deg .3deg, transparent .3deg 5deg),
    radial-gradient(circle at 48% 42%, rgba(255,255,255,.98) 0 31%, rgba(240,243,242,.96) 52%, rgba(210,216,216,.82) 76%, rgba(255,255,255,.96) 100%);
  mask-image: none;
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -18px 42px rgba(63,77,88,.12),
    0 1px 0 rgba(255,255,255,.9),
    0 24px 70px rgba(33,46,56,.14);
  opacity: 1;
}
:root[data-theme="light"] .hero-stage::after {
  z-index: 0;
  left: 9%;
  right: 9%;
  background: linear-gradient(90deg, transparent, rgba(31,79,168,.16) 16%, rgba(31,79,168,.42) 50%, rgba(31,79,168,.16) 84%, transparent);
  box-shadow: 0 0 22px rgba(31,79,168,.16);
}
:root[data-theme="light"] .stage-serial,
:root[data-theme="light"] .stage-state { color: #53616b; }

.stage-glow {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 34%),
    radial-gradient(circle at 36% 32%, color-mix(in srgb, var(--silver) 16%, transparent), transparent 42%),
    conic-gradient(from 120deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent 32% 72%, color-mix(in srgb, var(--silver) 8%, transparent));
  filter: blur(22px);
  animation: breathe 11s var(--ease) infinite;
}
:root[data-theme="light"] .stage-glow {
  inset: 7%;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(31,79,168,.3), rgba(31,79,168,.1) 22%, transparent 42%),
    conic-gradient(from 135deg, transparent 0 19%, rgba(31,79,168,.09) 25%, transparent 32% 71%, rgba(18,25,31,.08) 80%, transparent 88%);
  filter: blur(14px);
  opacity: .9;
}
@keyframes breathe {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.06); }
}

.stage-grid {
  position: absolute;
  inset: -3%;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 10% 10%;
  mask-image: radial-gradient(circle at 50% 50%, #000 24%, transparent 70%);
  opacity: 0.72;
}
:root[data-theme="light"] .stage-grid {
  inset: 4%;
  z-index: 1;
  background-image:
    linear-gradient(rgba(27,39,48,.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27,39,48,.075) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 50%, #000 18%, rgba(0,0,0,.72) 48%, transparent 70%);
  opacity: 1;
}

.orbit,
.nodes {
  position: absolute;
  z-index: 2;
  inset: 0;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease);
}
.orbit { width: 100%; height: 100%; }

/* Rings are dashed so their rotation actually reads. */
.ring {
  transform-origin: 310px 310px;
  stroke-width: 1.2;
}
.ring-0 { stroke-dasharray: 45 14 2 14; animation: spin 22s linear infinite reverse; stroke-width: 2.2; }
.ring-1 { stroke-dasharray: 2 9;    animation: spin 44s linear infinite; }
.ring-2 { stroke-dasharray: 96 230; animation: spin 52s linear infinite reverse; stroke-width: 2; }
.ring-3 { stroke-dasharray: 2 11;   animation: spin 92s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
:root[data-theme="light"] .ring { stroke: rgba(31,45,56,.34); }
:root[data-theme="light"] .ring-0 { stroke: rgba(31,79,168,.78); }
:root[data-theme="light"] .ring-2 { stroke: rgba(23,33,41,.58); }
:root[data-theme="light"] .ring-3 { stroke: rgba(31,79,168,.33); }

/* Signal flowing inward along every beam. */
.beams path {
  stroke-dasharray: 3 13;
  animation: flow 2.8s linear infinite;
  opacity: 0.9;
}
:root[data-theme="light"] .beams path {
  stroke: rgba(31,79,168,.72);
  stroke-width: 1.8;
  opacity: .78;
}
:root[data-theme="light"] .sweep { opacity: .7; }
.beams path:nth-child(2) { animation-delay: -0.5s; }
.beams path:nth-child(3) { animation-delay: -1s; }
.beams path:nth-child(4) { animation-delay: -1.5s; }
.beams path:nth-child(5) { animation-delay: -2s; }
.beams path:nth-child(6) { animation-delay: -2.5s; }
.beams path:nth-child(7) { animation-delay: -3s; }
@keyframes flow { to { stroke-dashoffset: -40; } }

.sweep {
  transform-origin: 310px 310px;
  animation: spin 16s linear infinite;
}

.core-halo { animation: breathe 11s var(--ease) infinite; }
.core-disc {
  fill: url(#coreMetal);
  stroke: var(--line-strong);
  stroke-width: 1.4;
  filter: drop-shadow(0 24px 52px rgba(0, 0, 0, 0.64));
}
:root[data-theme="light"] .core-halo { opacity: .72; }
:root[data-theme="light"] .core-disc {
  fill: url(#coreMetalLight);
  stroke: rgba(8,13,18,.82);
  stroke-width: 2;
  filter: drop-shadow(0 22px 24px rgba(12,19,25,.3)) drop-shadow(0 3px 5px rgba(12,19,25,.26));
}
:root[data-theme="light"] .core-edge { stroke: rgba(143,180,255,.95); stroke-width: 2.4; }
:root[data-theme="light"] .core-mark { stroke: #f6f8f9; }
:root[data-theme="light"] .core-pulse { stroke: #1f4fa8; stroke-width: 1.5; }
.core-edge { stroke: color-mix(in srgb, var(--silver) 62%, var(--accent)); stroke-width: 1.8; stroke-dasharray: 92 26; animation: spin 13s linear infinite; transform-origin: 310px 310px; }
.core-mark { stroke: var(--silver); }
.core-pulse {
  stroke: var(--accent);
  stroke-width: 1.2;
  transform-origin: 310px 310px;
  animation: corePulse 3.6s var(--ease) infinite;
}
@keyframes corePulse {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  justify-items: center;
  gap: 9px;
  width: 104px;
  margin-left: -52px;
  margin-top: -22px;
  text-align: center;
  animation: nodeIn 0.7s var(--ease) backwards;
  animation-delay: var(--delay);
}
@keyframes nodeIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: none; }
}
.node-dot {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: 1px solid color-mix(in srgb, var(--silver) 24%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--silver) 8%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 84%, transparent);
  backdrop-filter: blur(18px);
  color: var(--ink-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--silver) 22%, transparent), 0 14px 34px rgba(0, 0, 0, 0.34);
  transition: transform 0.28s var(--ease), border-color 0.28s var(--ease),
    color 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.node-dot svg { width: 20px; height: 20px; }
.node b {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color 0.28s var(--ease);
}
.node:hover .node-dot {
  transform: translateY(-3px) scale(1.06);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent), 0 14px 34px rgba(0, 0, 0, 0.36);
}
.node:hover b { color: var(--ink); }
:root[data-theme="light"] .node-dot {
  border-color: rgba(7,13,18,.88);
  background:
    linear-gradient(145deg, rgba(255,255,255,.1), transparent 42%),
    #111820;
  color: #eef3f6;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    0 2px 3px rgba(13,22,29,.18),
    0 14px 24px rgba(13,22,29,.2);
}
:root[data-theme="light"] .node b { color: #33414b; font-weight: 650; }
:root[data-theme="light"] .node:hover .node-dot {
  border-color: var(--accent);
  color: #fff;
  background: #173d7c;
  box-shadow: 0 0 0 4px rgba(31,79,168,.12), 0 18px 30px rgba(13,22,29,.22);
}

/* ---------- manifesto ---------- */

.manifesto {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
  max-width: 1480px;
  margin: 0 auto;
  padding: 40px clamp(16px, 5vw, 72px);
  border-block: 1px solid var(--hairline);
}
.manifesto-kicker {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.manifesto-line {
  font-size: clamp(22px, 2.6vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}
.manifesto-note {
  max-width: 26ch;
  color: var(--muted);
  font-size: 14px;
  text-align: right;
}

/* ---------- section frame ---------- */

.section {
  --section-pad-y: clamp(80px, 10vw, 148px);
  max-width: 1480px;
  margin: 0 auto;
  padding: var(--section-pad-y) clamp(16px, 5vw, 72px);
  border-bottom: 1px solid var(--hairline);
}
/* Fragment links should align the section's visible heading, not its padded
   outer edge. The result is the same calm gap below the sticky bar regardless
   of a section's position or the responsive vertical padding. */
.section[id] { scroll-margin-top: calc(12px - var(--section-pad-y)); }
.section-head {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  align-items: end;
  gap: clamp(28px, 6vw, 90px);
  margin-bottom: clamp(40px, 5vw, 68px);
}
.section-kicker {
  margin-bottom: 22px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
}
.section-head h2,
.contact-copy h2 {
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.section-head h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.section-lede {
  max-width: 44ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ---------- services ---------- */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 300px;
  padding: 30px;
  background: var(--page);
  transition: background 0.28s var(--ease);
}
.service:hover { background: var(--surface); }
.service-num {
  position: absolute;
  top: 28px; right: 28px;
  color: var(--faint);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.service-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--silver);
  background: var(--surface);
  transition: color 0.28s var(--ease), border-color 0.28s var(--ease);
}
.service-icon svg { width: 22px; height: 22px; }
.service:hover .service-icon { color: var(--accent); border-color: var(--accent); }
.service h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: clamp(20px, 1.7vw, 25px);
  letter-spacing: -0.035em;
}
.service p {
  max-width: 36ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.65;
}
.service-tag {
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.service-flag {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.service-link svg { width: 16px; height: 16px; transition: transform 0.22s var(--ease); }
.service-link:hover svg { transform: translateX(4px); }
.service.is-featured {
  background: linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--accent) 7%, var(--surface)));
}

.included-strip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  margin-top: 20px;
  padding: 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.included-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
}
.included-icon svg { width: 20px; height: 20px; }
.included-strip b { font-size: 15px; font-weight: 600; }
.included-strip p { margin-top: 3px; color: var(--muted); font-size: 14px; }

/* ---------- websites ---------- */

.journey {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.journey li {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.journey-step {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.journey h3 { font-size: 21px; letter-spacing: -0.03em; }
.journey p { color: var(--muted); font-size: 14.5px; line-height: 1.62; }
.journey .is-ongoing,
.journey li.is-ongoing {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(155deg, var(--surface), color-mix(in srgb, var(--accent) 8%, var(--surface)));
}
.journey-flag {
  justify-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.websites-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  margin-top: 14px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.websites-facts > div {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  background: var(--page);
}
.websites-facts b { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.websites-facts span { color: var(--muted); font-size: 13.5px; }

/* ---------- portal preview ---------- */

.portal-frame {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}
.portal-rail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px 16px;
  border-right: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 72%, var(--page));
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
}
.portal-workspace {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--ink-2);
  font-size: 12.5px;
}
.portal-rail nav { display: grid; gap: 2px; }
.portal-rail nav span {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
}
.portal-rail nav .is-selected {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 2px 0 0 var(--accent);
}
.portal-rail > small { margin-top: auto; padding: 0 8px; color: var(--faint); font-size: 12px; }

.portal-main { padding: 30px clamp(20px, 3vw, 40px); }
.portal-main > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 30px;
}
.portal-main > header small { color: var(--muted); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.portal-main h3 { margin-top: 6px; font-size: clamp(21px, 2vw, 28px); letter-spacing: -0.035em; }
.portal-cta {
  padding: 10px 15px;
  border-radius: 9px;
  background: var(--silver);
  color: var(--page);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
:root[data-theme="light"] .portal-cta { background: var(--accent); color: #fff; }

.portal-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.portal-metrics article {
  display: grid;
  gap: 6px;
  align-content: space-between;
  min-height: 122px;
  padding: 18px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--surface-2);
}
.portal-metrics small { color: var(--muted); font-size: 12.5px; }
.portal-metrics b { font-size: 30px; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.portal-metrics span { color: var(--faint); font-size: 12.5px; }
.portal-metrics .up { color: var(--good); }

.portal-activity {
  margin-top: 10px;
  padding: 18px 20px;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--surface-2);
}
.portal-activity > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 13.5px;
}
.portal-activity .live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--good);
  font-size: 12px;
}
.portal-activity > div {
  display: grid;
  grid-template-columns: 8px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}
.portal-activity > div:last-child { border-bottom: 0; padding-bottom: 0; }
.act-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.portal-activity p { display: grid; gap: 3px; }
.portal-activity p b { font-size: 13.5px; font-weight: 600; }
.portal-activity p small,
.portal-activity time { color: var(--muted); font-size: 12.5px; }

.frame-note { margin-top: 14px; color: var(--faint); font-size: 12.5px; text-align: center; }

/* ---------- value ---------- */

.value-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  align-items: stretch;
}
.value-tiers article {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.tier-count { color: var(--faint); font-size: 34px; font-weight: 300; letter-spacing: -0.05em; }
.tier-label { color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.value-tiers h3 { margin: 10px 0 8px; font-size: 25px; letter-spacing: -0.035em; }
.value-tiers p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.value-tiers article > b {
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
}
.value-tiers .is-best {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: linear-gradient(155deg, var(--surface-2), color-mix(in srgb, var(--accent) 9%, var(--surface)));
}
.value-tiers .is-best > b { color: var(--accent); }
.value-note { margin-top: 22px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- process ---------- */

.process { border-top: 1px solid var(--hairline); }
.process li {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 20px;
  min-height: 128px;
  padding: 22px 0;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.22s var(--ease);
}
.process li:hover { background: var(--surface); }
.process li > span { padding-left: 22px; color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; }
.process li div { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(20px, 4vw, 56px); }
.process h3 { font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -0.03em; }
.process p { max-width: 44ch; color: var(--muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- contact ---------- */

.contact-section {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(36px, 7vw, 100px);
  border-bottom: 0;
}
.contact-copy p { max-width: 46ch; margin: 26px 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.contact-fact {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: max-content;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}
.contact-fact b { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; }
.contact-fact small { color: var(--muted); font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; }

.contact-form {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.contact-form label {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 600;
}
.optional { color: var(--faint); font-weight: 400; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--page);
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  font-size: 16px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.contact-form textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.contact-form input[aria-invalid="true"],
.contact-form textarea[aria-invalid="true"] { border-color: var(--error); }
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.honeypot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 16px; font-size: 14px; text-align: center; }
.form-status:empty { margin: 0; }
.form-status.is-ok { color: var(--good); }
.form-status.is-error { color: var(--error); }

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

.footer {
  max-width: 1480px;
  margin: 0 auto;
  padding: 52px clamp(16px, 5vw, 72px) 40px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.footer-line { color: var(--muted); font-size: 15px; font-style: italic; text-align: center; }
.footer-top nav { justify-self: end; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.footer-top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font-size: 13.5px;
  transition: color 0.18s var(--ease);
}
.footer-top nav a:hover { color: var(--ink); }
.footer-legal {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
  color: var(--faint);
  font-size: 12.5px;
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-bottom: 96px;
  }
  .hero-copy { max-width: 760px; }
  .hero-stage { max-width: 540px; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .manifesto { grid-template-columns: 1fr; gap: 18px; }
  .manifesto-note { text-align: left; max-width: 48ch; }
  .contact-section { grid-template-columns: 1fr; }
  .contact-form { max-width: 680px; }
  .scroll-cue { display: none; }

  /* Nav collapses into a disclosure panel rather than disappearing. */
  #nav-toggle { display: grid; }
  .topbar { grid-template-columns: 1fr auto; }
  .topbar > nav {
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px clamp(16px, 4vw, 64px) 18px;
    border-bottom: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--page) 97%, transparent);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-soft);
    display: none;
  }
  .topbar > nav.is-open { display: flex; }
  .topbar > nav a {
    min-height: 52px;
    display: flex;
    align-items: center;
    font-size: 16px;
    border-bottom: 1px solid var(--hairline);
  }
  .topbar > nav a:last-child { border-bottom: 0; }
  .topbar > nav a::after { display: none; }
}

@media (max-width: 760px) {
  :root {
    --topbar-height: 68px;
    --anchor-gap: 12px;
  }
  .topbar { padding: 0 14px; }
  .signin { display: none; }
  .hero { padding: 48px 14px 84px; gap: 52px; }
  .hero-stage { max-width: 400px; }
  .stage-serial,
  .stage-state { display: none; }
  .node { width: 84px; margin-left: -42px; }
  .node-dot { width: 40px; height: 40px; border-radius: 12px; }
  .node-dot svg { width: 17px; height: 17px; }
  .node b { font-size: 11px; }
  .section { --section-pad-y: 72px; padding: var(--section-pad-y) 14px; }
  .service { min-height: 240px; padding: 24px; }
  .included-strip { grid-template-columns: auto 1fr; }
  .included-strip .button { grid-column: 1 / -1; justify-content: center; }
  .portal-frame { grid-template-columns: 1fr; }
  .portal-rail { display: none; }
  .portal-main { padding: 22px 16px; }
  .process li { grid-template-columns: 1fr; gap: 12px; padding: 26px 0; }
  .process li > span { padding-left: 0; }
  .process li div { grid-template-columns: 1fr; gap: 8px; }
  .field-pair { grid-template-columns: 1fr; gap: 0; }
  .contact-fact {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .contact-form { padding: 22px 16px; }
  .footer-top { grid-template-columns: 1fr; justify-items: start; gap: 14px; }
  .footer-line { text-align: left; }
  .footer-top nav { justify-self: start; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .orbit,
  .nodes { transform: none !important; }
}