/* =====================================================================
   Luxemora Studio — design prototype
   Palette roles:
     --bg       main canvas (deep navy)
     --text     content
     --cyan     primary actions, system connections
     --magenta  selected nodes, states, focus
     --violet   occasional supporting depth
   ===================================================================== */

:root {
  --bg: #050914;
  --bg-raise: #081022;
  --surface: #0b1529;
  --surface-2: #101c34;
  --line: rgba(130, 170, 220, 0.13);
  --line-mid: rgba(130, 170, 220, 0.22);
  --line-cyan: rgba(55, 220, 233, 0.38);

  --text: #eef5ff;
  --muted: #a3b2c9;
  --dim: #74859f;

  --cyan: #37dce9;
  --cyan-soft: rgba(55, 220, 233, 0.12);
  --magenta: #ee3da8;
  --magenta-soft: rgba(238, 61, 168, 0.14);
  --violet: #8075df;
  --violet-soft: rgba(128, 117, 223, 0.16);

  --font-display: "Manrope", "Manrope Fallback", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1280px;
  --header-h: 68px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 160ms;
  --t-mid: 320ms;

  color-scheme: dark;
}

/* Metric-matched fallbacks (measured against Arial in Chrome) so text keeps
   its size and line positions while the web fonts load, limiting layout shift. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.38%; ascent-override: 91.18%; descent-override: 22.56%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 100.2%; ascent-override: 106.79%; descent-override: 29.94%; line-gap-override: 0%;
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--magenta); color: #fff; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 2px;
}
[tabindex="-1"]:focus { outline: none; }

.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: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--cyan); color: var(--bg); padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- type */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.028em;
  word-spacing: 0.02em;
  line-height: 1.04;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  letter-spacing: -0.026em;
  line-height: 1.12;
  margin-bottom: 0.6em;
  text-wrap: balance;
}
.h3 {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.lede {
  font-size: clamp(1.0625rem, 1.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--muted);
  max-width: 38em;
  text-wrap: pretty;
}
p { text-wrap: pretty; }

/* Small uppercase content labels: Inter, not mono */
.label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}
.muted { color: var(--muted); }
.accent { color: var(--cyan); }

.mono-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 1.5em;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: 0.8;
}
.eyebrow--violet { color: #a9a1f0; }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 8px; white-space: nowrap;
}
.tag--outline { border: 1px solid var(--line-mid); color: var(--muted); }

.text-link {
  display: inline-flex; gap: 8px; align-items: center;
  color: var(--cyan); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.text-link:hover { border-color: currentColor; gap: 12px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--cyan); color: #03121a; }
.btn--primary:hover { background: #5be6f0; box-shadow: 0 10px 34px -10px rgba(55, 220, 233, 0.55); }
.btn--ghost { border-color: var(--line-mid); color: var(--text); background: rgba(5, 9, 20, 0.35); }
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--quiet { background: none; color: var(--muted); padding-inline: 12px; }
.btn--quiet:hover { color: var(--text); }
.btn--small { min-height: 38px; padding: 8px 14px; font-size: 0.875rem; }
.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------------------------------------------------------- atmosphere */

.atmos { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.atmos__light {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 50% at 78% 18%, rgba(55, 220, 233, 0.07), transparent 70%),
    radial-gradient(45% 45% at 96% 92%, rgba(128, 117, 223, 0.10), transparent 70%),
    radial-gradient(40% 35% at 6% 100%, rgba(238, 61, 168, 0.04), transparent 70%);
}
.atmos__grain {
  position: absolute; inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: 0.25;
  mask-image: radial-gradient(70% 60% at 60% 40%, #000, transparent 80%);
  -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000, transparent 80%);
}

/* Angled code field: original snippets, slow vertical drift.
   Performance: no mask-image or group opacity (each forced a full-size offscreen
   surface per frame). Each column carries its own opacity, and the edges are
   faded by a plain gradient overlay in the background colour. */
.codefield {
  position: absolute; inset: -20% -10% -20% 20%;
  perspective: 900px;
  --code-alpha: 0.16;
  transition: visibility 0s linear 0s;
}
.codefield::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 9, 20, 0) 30%, rgba(5, 9, 20, 0) 70%, var(--bg) 100%),
    linear-gradient(180deg, var(--bg) 2%, rgba(5, 9, 20, 0) 28%, rgba(5, 9, 20, 0) 62%, var(--bg) 92%);
}
/* Inner pages: keep the code field off to the right, clear of headings and body copy */
body:not([data-route="home"]) .codefield { --code-alpha: 0.07; left: 55%; }
/* Once the reader scrolls into content, the code field fades out so it never sits under text,
   then stops being composited at all */
body.in-content .codefield { --code-alpha: 0; visibility: hidden; transition: visibility 0s linear 600ms; }
.codefield__plane {
  position: absolute; inset: 0;
  display: flex; gap: 56px;
  transform: rotateX(38deg) rotateZ(-16deg) translateZ(-60px);
  transform-origin: 50% 40%;
}
.codefield__col {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: #8ea3c4;
  white-space: pre;
  opacity: var(--code-alpha);
  transition: opacity 600ms var(--ease);
  animation: code-drift var(--dur, 140s) linear infinite;
  will-change: transform;
}
@keyframes code-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---------------------------------------------------------- syntax */
.t-com { color: #61759a; font-style: italic; }
.t-str { color: #f37cc3; }
.t-kw  { color: #a99ff3; }
.t-type{ color: #8b80e6; }
.t-fn  { color: var(--cyan); }
.t-num { color: #9ff0f6; }
.t-tag { color: #6fe6ef; }
.t-attr{ color: #c9d6ea; }

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

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.site-header.is-solid,
.menu-open .site-header {
  background: rgba(5, 9, 20, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line);
}
.site-header__inner {
  height: 100%;
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 24px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; white-space: nowrap;
}
.wordmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.1em;
}
.wordmark__sub {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 2px 0 2px 10px;
  border-left: 1px solid var(--line-mid);
}

.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  position: relative; display: block;
  padding: 8px 12px;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.005em; color: var(--muted); text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--text); }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.header-tools { display: flex; align-items: center; gap: 10px; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
  display: block; width: 18px; height: 1.5px; background: var(--text); margin-inline: auto;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before, .menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -6px; }
.menu-toggle__bars::after { top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }


/* --------------------------------------------------------- code glider */
/* ONE home dock per layout, lower right. Parked, the plane is placed by CSS alone (no script, no animation, no timers).
   Sizes are the approved 80px (desktop) and 56px (phones). The dock leaves room: on desktop the page content keeps clear
   of the dock column (see .container below); on phones the footer gets extra bottom space and the plane never takes taps. */
:root { --glider-size: 80px; --dock-r: 24px; --dock-b: 24px; --dock-clear: 120px; }
.glider-dock {
  position: fixed; right: var(--dock-r); bottom: var(--dock-b);
  width: var(--glider-size); height: var(--glider-size);
  pointer-events: none; visibility: hidden;
}
/* Zero-size fixed layer; the plane inside is fixed too, so parked it can sit on right/bottom without script. */
.glider-layer { position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible; z-index: 57; pointer-events: none; }
.glider {
  position: fixed; top: 0; left: 0;
  width: var(--glider-size); height: var(--glider-size);
  transform-origin: 50% 50%;
  visibility: hidden;
  pointer-events: none;
}
.glider.is-visible { visibility: visible; }
.glider.is-parked { top: auto; left: auto; right: var(--dock-r); bottom: var(--dock-b); transform: none; }
.glider.is-flying { will-change: transform; }
.glider svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The violet coding exhaust belongs to the tail and shows only in flight. */
.glider__exhaust { opacity: 0; transition: opacity 160ms var(--ease); }
.glider.is-flying .glider__exhaust { opacity: 1; }
.glider-bit {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; line-height: 1;
  color: var(--violet); white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}
/* An open phone menu sits above a plane that is flying and above the greeting (header is z-index 50). A plane resting in the header stays above it, so it never vanishes. */
body.menu-open .glider-layer:has(.glider.is-flying), body.menu-open .greeting { z-index: 49; }

/* Arrival anchors: one per page, near the page introduction and clear of the copy (checked at every width in the report). */
.glider-anchor { position: absolute; width: 0; height: 0; right: 150px; top: 150px; pointer-events: none; }
.hero > .glider-anchor { right: calc(max(0px, (100% - var(--max)) / 2) + 150px); }
.page-head { position: relative; }

@media (min-width: 881px) {
  /* Keep page content out of the dock column, so the dock never covers content, fields or footer links.
     At 1440px and wider the page margins already leave this room, so nothing changes there. */
  .container { padding-right: max(var(--gutter), calc(var(--dock-clear) - max(0px, (100vw - var(--max)) / 2))); }
}
/* Phones and tablets: the dock is a real slot in the header, between the wordmark and the controls (.header-dock-slot).
   The plane rests on the slot's measured position (flight.js writes --dock-left/--dock-top), so it follows any change of the header's layout. */
.header-dock-slot { display: none; }
.glider-anchor--phone { display: none; }
@media (max-width: 880px) {
  :root { --glider-size: 56px; --dock-r: 12px; --dock-b: 8px; }
  .site-header__inner { gap: 8px; }
  .header-dock-slot { display: block; flex: 0 0 var(--glider-size); width: var(--glider-size); height: var(--glider-size); margin-left: auto; }
  .glider-dock { display: none; }
  .glider.is-parked { top: var(--dock-top, 2px); left: var(--dock-left, 0px); right: auto; bottom: auto; }
  /* Arrival anchors sit deep in the page, so a journey from the header crosses the screen: below the introduction (room made for it)
     on four pages, and to the right of the first lines of the headline on Home. */
  .glider-anchor--desktop { display: none; }
  .glider-anchor--phone { display: block; }
  .glider-anchor { top: auto; bottom: 40px; right: 44px; }
  .glider-anchor--phone { top: 24px; bottom: auto; right: 28px; }   /* Home: right of the first call-to-action button, inside .actions */
  header.page-head { padding-bottom: calc(clamp(40px, 6vw, 72px) + 40px); }
  .hero__content .actions { position: relative; }
}
/* Welcome greeting: a text card. The plane hovers in its reserved slot (right end) while it is open. */
.greeting {
  position: fixed; z-index: 56;
  width: min(440px, calc(100vw - 32px));
  background: linear-gradient(160deg, rgba(20, 34, 62, 0.9), rgba(8, 14, 30, 0.92));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line-cyan);
  border-radius: 2px;
  box-shadow: 0 20px 50px -24px rgba(0, 0, 0, 0.9);
}
.greeting[hidden] { display: none; }
.greeting.is-pending { visibility: hidden; }
.greeting.is-push { position: absolute; left: 16px; right: 16px; width: auto; }
/* Activation fix (3 Nov 2026): on a phone the visitor often scrolls while the plane flies in; the card then stays in view under the header
   (fixed) instead of opening above the screen or being closed by the scroll. */
.greeting.is-fixed { position: fixed; left: 16px; right: 16px; width: auto; }
.greeting.is-in { animation: greet-in 260ms var(--ease) both; }
@keyframes greet-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.greeting__body { display: flex; align-items: flex-start; gap: 8px; padding: 12px 8px 12px 16px; }
.greeting.has-plane .greeting__body { padding-right: calc(var(--glider-size) + 22px); }
.greeting__text { flex: 1 1 auto; min-width: 0; margin: 4px 0 0; font-size: 0.9375rem; line-height: 1.5; font-weight: 500; color: var(--text); text-wrap: pretty; }
.greeting__close {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  background: none; border: 1px solid transparent; border-radius: 2px; color: var(--muted); cursor: pointer;
}
.greeting__close:hover { color: var(--text); border-color: var(--line-mid); }
.greeting__close svg { width: 14px; height: 14px; }
@media (max-width: 880px) {
  .greeting__text { font-size: 0.875rem; }
  .greeting.has-plane .greeting__body { padding-right: calc(var(--glider-size) + 20px); }
  .greeting__close { width: 40px; height: 40px; margin-top: -4px; }
}
/* On phones (or where no clear space exists) the card sits in space made for it under the header: the page moves down by its height. */
main { transition: padding-top 280ms var(--ease); }
body.greeting-push main { padding-top: var(--greeting-push, 0px); }

/* --------------------------------------------------------------- pages */

main { display: block; min-height: 70vh; }
.page { padding-bottom: 40px; }
.page.is-entering { animation: page-in 420ms var(--ease) both; }
@keyframes page-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.section { padding-block: clamp(72px, 10vw, 140px); position: relative; }

.page-head { padding-top: calc(var(--header-h) + clamp(48px, 9vw, 120px)); padding-bottom: clamp(40px, 6vw, 72px); }
.page-head__title { font-size: clamp(2.375rem, 5.4vw, 4.5rem); max-width: 14em; margin-bottom: 0.4em; }

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

.hero {
  position: relative;
  min-height: max(640px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + 40px);
  overflow: hidden;
  isolation: isolate;
}
/* Stage: static CSS glow, the wireframe canvas, and live HTML node labels */
.hero__stage {
  position: absolute; z-index: -2;
  top: 0; right: 0; width: 72%; height: 100%;
  pointer-events: none;
}
.hero__core { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Zero-size anchor: labels overflow from it, so no full-size layer sits above the canvas */
.hero__labels { position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: visible; }
/* Static core glow, sized to the glow itself (5.2 × core radius) rather than the whole stage.
   Position and radius come from core.js on resize. */
.hero__glow {
  --gr: 140px;
  position: absolute;
  visibility: hidden; /* shown once core.js has positioned it, so it never shifts */
  left: calc(var(--gx, 62%) - var(--gr) * 2.6);
  top: calc(var(--gy, 45%) - var(--gr) * 2.6);
  width: calc(var(--gr) * 5.2);
  height: calc(var(--gr) * 5.2);
  background:
    radial-gradient(circle closest-side, rgba(55, 220, 233, 0.28) 0, rgba(55, 220, 233, 0.1) 15.4%, rgba(55, 220, 233, 0) 61.5%),
    radial-gradient(circle closest-side, rgba(128, 117, 223, 0.11) 0, rgba(128, 117, 223, 0.04) 25%, rgba(128, 117, 223, 0) 100%);
}
.core-label {
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: rgba(238, 245, 255, 0.74);
  transition: color var(--t-mid) var(--ease);
}
.core-label.is-lit { color: var(--magenta); }
.hero__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(5, 9, 20, 0.88) 32%, rgba(5, 9, 20, 0.3) 56%, transparent 74%),
    linear-gradient(0deg, var(--bg) 0%, transparent 22%);
}
.hero__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: 24px 48px; }
.hero__title {
  font-size: clamp(2.5rem, 5.2vw, 4.625rem);
  max-width: 9.6em;
  margin-bottom: 0.45em;
}
.hero__title .accent { white-space: nowrap; }
.hero__content .lede { max-width: 31em; margin-bottom: 2em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__index {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  padding-bottom: 8px;
}
.hero__entry {
  position: relative;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 20px 20px 20px 0;
  text-decoration: none;
  border-right: 1px solid var(--line);
  transition: background var(--t-mid) var(--ease);
}
.hero__entry + .hero__entry { padding-left: 20px; }
.hero__entry:last-child { border-right: 0; }
.hero__entry::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--magenta);
  transition: width var(--t-mid) var(--ease);
}
.hero__entry + .hero__entry::before { left: 0; }
.hero__entry:hover::before, .hero__entry:focus-visible::before, .hero__entry.is-lit::before { width: 100%; }
.hero__entry .mono-label { grid-column: 1; }
.hero__entry-title { grid-column: 1; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.hero__entry-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--dim); transition: color var(--t-fast), transform var(--t-fast) var(--ease); }
.hero__entry:hover .hero__entry-arrow, .hero__entry:focus-visible .hero__entry-arrow { color: var(--cyan); transform: translateX(4px); }
.hero__entry.is-lit .mono-label { color: var(--magenta); }

/* --------------------------------------------------------- disciplines */

.disciplines__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); }
.disciplines__intro { position: sticky; top: calc(var(--header-h) + 40px); align-self: start; }
.disc-list { border-top: 1px solid var(--line); counter-reset: none; }
.disc-row {
  position: relative;
  display: grid; grid-template-columns: 40px 64px 1fr; gap: 8px 24px; align-items: start;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.disc-row::before {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--cyan);
  transition: width 520ms var(--ease);
}
.disc-row:hover::before, .disc-row:focus-visible::before { width: 100%; }
.disc-row__num { padding-top: 4px; }
.disc-row__body { display: grid; gap: 6px; }
.disc-row__body .muted { font-size: 0.9375rem; }
.disc-row__tags { grid-column: 3; color: var(--dim); font-size: 0.7rem; }
.disc-row:hover .h3 { color: var(--cyan); }
.h3 { transition: color var(--t-fast) var(--ease); }

.glyph { width: 64px; height: 48px; fill: none; stroke: var(--cyan); stroke-width: 1.1; opacity: 0.85; }
.glyph__dot { fill: var(--magenta); stroke: none; opacity: 0; transition: opacity var(--t-mid); }
.disc-row:hover .glyph__dot, .disc-row:focus-visible .glyph__dot { opacity: 1; }

/* ------------------------------------------------------------- connect */

.connect { border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(8, 16, 34, 0.6), transparent 70%); }
.connect__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: 48px; }
.connect__head .h2 { margin-bottom: 0; max-width: 13em; }
.connect__intro { margin: 0; }
.connect__intro .tag { margin-left: 6px; vertical-align: 2px; }

.schematic { margin: 0; }
.schematic svg { width: 100%; height: auto; overflow: visible; }
.sch-grid line { stroke: var(--line); stroke-dasharray: 2 6; }
.sch-path { fill: none; stroke: var(--line-cyan); stroke-width: 1.2; }
.sch-path--return { stroke: rgba(128, 117, 223, 0.45); stroke-dasharray: 4 6; }
.sch-node { fill: rgba(5, 9, 20, 0.9); stroke: var(--cyan); stroke-width: 1.2; transition: stroke var(--t-mid) var(--ease); }
.sch-node .sch-fill { fill: var(--cyan-soft); stroke: none; }
.sch-node .sch-port { fill: var(--bg); }
.sch-node.is-active { stroke: var(--magenta); }
.sch-node.is-active .sch-fill { fill: var(--magenta-soft); }
.sch-label text { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; fill: var(--dim); text-anchor: middle; }
.sch-label .sch-label--return { fill: #9a92e8; font-size: 11px; }
.pk { fill: var(--cyan); }
.pk--return { fill: var(--violet); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; border-top: 1px solid var(--line); }
.steps li {
  position: relative; padding: 20px 20px 8px 0; cursor: default;
  transition: color var(--t-mid);
}
.steps li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.steps li::before {
  content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 1px; background: var(--magenta);
  transition: width 600ms var(--ease);
}
.steps li.is-active::before { width: 100%; }
.steps li.is-active .mono-label { color: var(--magenta); }
.steps p { margin: 10px 0 0; color: var(--muted); font-size: 0.95rem; }
.steps li.is-active p { color: var(--text); }

/* ------------------------------------------------------- deskaura intro */

.deskaura-intro { border-top: 1px solid var(--line); }
.deskaura-intro__grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center;
}
.deskaura-intro__text p { max-width: 34em; }

.product-title { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 18px; }
.product-title .h2 { margin: 0; }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 10px;
  border: 1px solid rgba(238, 61, 168, 0.55);
  background: var(--magenta-soft);
  color: #ffd2ec;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.status-badge__dot { position: relative; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 4px rgba(238, 61, 168, 0.7); }
.status-badge__dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(238, 61, 168, 0.75) 0%, rgba(238, 61, 168, 0.28) 38%, rgba(238, 61, 168, 0) 70%);
  opacity: 0.3; transform: scale(0.85);
  animation: dot-breathe 3s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes dot-breathe { 0%, 100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.5); } }
.status-badge--lg { font-size: 0.8rem; padding: 8px 14px 8px 12px; }

/* Selective glass: used for DeskAura concept, editor and header only */
.glass, .mini-concept__frame, .concept__app, .editor {
  background: linear-gradient(160deg, rgba(20, 34, 62, 0.55), rgba(8, 14, 30, 0.55));
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid var(--line-mid);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 40px 80px -40px rgba(0, 0, 0, 0.8);
}

.concept-tag {
  display: inline-block;
  font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: #c4bdf7; border: 1px solid rgba(128, 117, 223, 0.5); background: var(--violet-soft);
  padding: 3px 8px;
}

.mini-concept { margin: 0; position: relative; }
.mini-concept .concept-tag { position: absolute; top: -12px; left: 20px; z-index: 2; background: #12122e; }
.mini-concept__frame {
  display: grid; grid-template-columns: 26% 1fr; aspect-ratio: 16 / 10;
  transform: perspective(1400px) rotateY(-10deg) rotateX(4deg);
  transform-origin: 0 50%;
}
.mc-side { border-right: 1px solid var(--line); padding: 18% 12%; display: grid; gap: 10px; align-content: start; }
.mc-side i, .mc-list i { display: block; height: 7px; border-radius: 1px; background: rgba(163, 178, 201, 0.16); }
.mc-side i.on { background: var(--cyan); opacity: 0.8; width: 80%; }
.mc-main { padding: 6%; display: grid; grid-template-rows: auto 1fr; gap: 8%; }
.mc-bar { height: 10px; width: 55%; background: rgba(163, 178, 201, 0.12); }
.mc-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6%; }
.mc-cal {
  border: 1px solid var(--line);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 14.28% 25%;
  position: relative;
}
.mc-cal::after { content: ""; position: absolute; left: 28.6%; top: 25%; width: 14.28%; height: 25%; background: var(--magenta-soft); border: 1px solid rgba(238, 61, 168, 0.6); }
.mc-list { display: grid; gap: 12px; align-content: start; }
.mc-list i:nth-child(2n) { width: 70%; }

/* ----------------------------------------------------------------- cta */

.cta { border-top: 1px solid var(--line); }
.cta__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.cta__title { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.cta__side p { max-width: 30em; }

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

.services { display: grid; gap: 40px; }
.svc-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.svc-tab {
  position: relative; text-align: left;
  display: grid; gap: 6px;
  padding: 22px 24px 22px 0;
  background: none; border: 0; cursor: pointer;
  transition: background var(--t-mid) var(--ease);
}
.svc-tab + .svc-tab { padding-left: 24px; border-left: 1px solid var(--line); }
.svc-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cyan);
  transform: scaleX(0); transform-origin: left; transition: transform var(--t-mid) var(--ease);
}
.svc-tab__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.014em; font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--muted); transition: color var(--t-fast); }
.svc-tab:hover .svc-tab__title { color: var(--text); }
.svc-tab[aria-selected="true"] .svc-tab__title { color: var(--text); }
.svc-tab[aria-selected="true"] .mono-label { color: var(--magenta); }
.svc-tab[aria-selected="true"]::after { transform: scaleX(1); }

.svc-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.svc-panel:focus-visible { outline-offset: 12px; }
.svc-panel.is-switching .svc-panel__text,
.svc-panel.is-switching .svc-panel__visual { animation: panel-in 380ms var(--ease) both; }
.svc-panel.is-switching .svc-panel__visual { animation-delay: 60ms; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.svc-panel__text > .svc-panel__short { font-size: 0.9375rem; font-weight: 500; color: var(--cyan); margin-bottom: 10px; }
.svc-panel__text > p { color: var(--muted); max-width: 36em; }
.svc-panel__desc p { color: var(--muted); max-width: 36em; }
.svc-panel__desc p + p { margin-top: 0; }
.svc-panel__desc .svc-panel__closing { color: var(--text); font-weight: 500; margin-bottom: 0; }
.svc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 32px 0 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.svc-cols h3, .svc-receive h3 { margin-bottom: 12px; }
.ticks li { position: relative; padding-left: 18px; margin-bottom: 8px; font-size: 0.95rem; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 8px; height: 1px; background: var(--cyan); }
.svc-receive { margin-bottom: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { border: 1px solid var(--line-mid); padding: 6px 12px; font-size: 0.88rem; }

.svc-panel__visual { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; min-width: 0; }

.pipeline { display: flex; align-items: center; gap: 0; overflow: hidden; padding: 4px 0; }
.pipeline__node {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-mid); padding: 6px 8px; background: var(--bg);
  white-space: nowrap;
}
.pipeline__node.is-key { color: #ffd2ec; border-color: rgba(238, 61, 168, 0.6); }
.pipeline__link { flex: 1 1 12px; min-width: 12px; height: 1px; background: var(--line-cyan); position: relative; overflow: hidden; }
.pipeline__link::after {
  content: ""; position: absolute; top: -1px; left: -20%; width: 18%; height: 3px; background: var(--cyan);
  animation: link-packet 2.4s linear infinite; animation-delay: var(--d, 0s);
}
@keyframes link-packet { to { left: 110%; } }

.editor { margin: 0; position: relative; min-width: 0; }
.editor::before, .editor::after, .concept__app::before {
  content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--cyan); pointer-events: none;
}
.editor::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.editor::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.editor__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.editor__dots { display: flex; gap: 6px; }
.editor__dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-mid); }
.editor__file { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor__code {
  margin: 0; padding: 16px 0; overflow: auto;
  font-family: var(--font-mono); font-size: 0.82rem; line-height: 1.75;
  max-height: 520px;
}
.editor__code code { display: block; min-width: max-content; }
.editor__code .line { display: block; padding-right: 20px; }
.editor__code .ln { display: inline-block; width: 3.2em; padding-right: 1.2em; text-align: right; color: #3f4f6c; user-select: none; }
.editor__caption { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 0.85rem; color: var(--muted); }

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

.process { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); }
.process__rail { position: relative; }
.rail { position: sticky; top: calc(var(--header-h) + 48px); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; column-gap: 24px; min-height: 420px; }
.rail__num {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(4rem, 8.5vw, 7rem); line-height: 0.9; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px var(--cyan);
}
.rail__num small { font-size: 0.24em; letter-spacing: 0.04em; -webkit-text-stroke: 0; color: var(--dim); margin-left: 8px; font-family: var(--font-mono); }
.rail__name { grid-column: 1 / -1; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--magenta); margin: 16px 0 28px; }
.rail__trace { grid-column: 1; grid-row: 3; position: relative; width: 40px; min-height: 220px; margin-block: 8px; }
.rail__trace::before, .rail__fill { content: ""; position: absolute; left: 19.5px; top: 0; bottom: 0; width: 1px; background: var(--line-mid); }
.rail__fill { width: 2px; left: 19px; background: var(--cyan); transform-origin: top; transform: scaleY(0); transition: transform 200ms linear; }
.rail__nodes { grid-column: 1; grid-row: 3; display: flex; flex-direction: column; justify-content: space-between; padding-block: 2px; align-items: center; width: 40px; position: relative; z-index: 1; }
.rail__nodes li { width: 12px; height: 12px; border: 1px solid var(--cyan); background: var(--bg); transform: rotate(45deg); transition: background var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid); }
.rail__nodes li.is-done { background: var(--cyan); }
.rail__nodes li.is-active { background: var(--magenta); border-color: var(--magenta); box-shadow: 0 0 14px rgba(238, 61, 168, 0.7); }

.stages { display: grid; gap: 0; }
.stage { padding: 40px 0 72px; border-top: 1px solid var(--line); opacity: 0.55; transition: opacity 500ms var(--ease); }
.stage.is-active { opacity: 1; }
.stage__head { display: grid; gap: 10px; margin-bottom: 16px; }
.stage__head .h2 { margin: 0; }
.stage.is-active .stage__num { color: var(--magenta); }
.stage__lead { font-size: 1.1rem; color: var(--muted); max-width: 36em; }
.stage__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0 0; }
.stage__grid > div { border-left: 1px solid var(--line); padding-left: 16px; }
.stage__grid dt { margin-bottom: 10px; }
.stage__grid dd { margin: 0; }
.stage__grid li { font-size: 0.94rem; margin-bottom: 6px; }

.process-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--line); padding-block: 56px 80px; }
.process-end .h3 { margin: 0; }

/* ------------------------------------------------------------ products */

.product-title--lg { gap: 20px 28px; margin-bottom: 8px; }
.product-title--lg .page-head__title { margin: 0; }
.product-head .lede { margin-top: 12px; }
.status-strip { display: flex; flex-wrap: wrap; gap: 0; margin: 32px 0 0; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.status-strip > div { padding: 12px 20px; border-right: 1px solid var(--line); }
.status-strip > div:last-child { border-right: 0; }
.status-strip dt { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.status-strip dd { margin: 2px 0 0; font-weight: 500; }

.product-body { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px clamp(32px, 5vw, 80px); }
.product-intro p { max-width: 32em; }
.product-intro .h3 { margin-bottom: 16px; }

.concept { margin: 0; display: grid; gap: 16px; min-width: 0; }
.concept__label { font-size: 0.9rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.concept__app { position: relative; display: grid; grid-template-columns: 170px 1fr; min-height: 340px; }
.concept__app::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; border-color: var(--violet); }
.concept__side { border-right: 1px solid var(--line); padding: 20px 16px; display: grid; gap: 6px; align-content: start; }
.concept__brand { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; margin-bottom: 14px; color: var(--muted); }
.concept__side i { font-style: normal; font-size: 0.82rem; color: var(--dim); padding: 6px 8px; border-left: 2px solid transparent; }
.concept__side i.on { color: var(--text); border-left-color: var(--magenta); background: rgba(238, 61, 168, 0.06); }
.concept__main { padding: 16px; display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; }
.concept__bar { display: flex; justify-content: space-between; align-items: center; }
.concept__bar span { width: 40%; height: 26px; border: 1px solid var(--line); }
.concept__bar b { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-mid); }
.concept__grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr auto; gap: 12px; }
.concept__panel { border: 1px solid var(--line); padding: 12px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.concept__ph { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.concept__panel--cal { grid-row: span 2; }
.concept__cal {
  height: 100%; min-height: 160px;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 14.28% 20%; border: 1px solid var(--line); position: relative;
}
.concept__cal::before, .concept__cal::after { content: ""; position: absolute; height: 20%; }
.concept__cal::before { left: 14.28%; top: 20%; width: 28.56%; background: var(--cyan-soft); border: 1px solid var(--line-cyan); }
.concept__cal::after { left: 57.12%; top: 60%; width: 14.28%; background: var(--magenta-soft); border: 1px solid rgba(238, 61, 168, 0.6); }
.concept__panel--list i { display: block; height: 8px; background: rgba(163, 178, 201, 0.14); }
.concept__panel--list i:nth-of-type(2n) { width: 65%; }
.concept__panel--flow svg { width: 100%; height: auto; fill: none; stroke: var(--cyan); stroke-width: 1.2; }
.concept__panel--flow svg path { stroke: var(--magenta); }

.capabilities, .distinction { grid-column: 1 / -1; }
.capabilities__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 20px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.88rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.legend__key { width: 12px; height: 12px; display: inline-block; }
.legend__key--released { background: var(--cyan); }
.legend__key--planned { border: 1px dashed #a99ff3; }

.cap-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.cap-table th, .cap-table td { text-align: left; padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cap-table thead th { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); font-weight: 600; border-bottom-color: var(--line-mid); }
.cap-table tbody th { font-weight: 600; width: 28%; }
.cap-table td { color: var(--muted); }
.cap-table td:last-child { width: 1%; white-space: nowrap; }
.cap-status {
  display: inline-block; padding: 3px 10px; border: 1px dashed #a99ff3; color: #c4bdf7;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.note { margin-top: 16px; font-size: 0.88rem; color: var(--dim); }

.distinction { border-top: 1px solid var(--line); padding-top: 48px; }
.distinction > .h3 { margin-bottom: 24px; }
.distinction__grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); }
.distinction__col { padding: 32px; display: grid; gap: 10px; align-content: start; }
.distinction__col + .distinction__col { border-left: 1px solid var(--line); }
.distinction__col .label { color: var(--cyan); }
.distinction__col--product .label { color: #a99ff3; }
.distinction__col p { margin: 0; }
.distinction__col .text-link { margin-top: 8px; }

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

.contact { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.preview-notice {
  border-left: 2px solid var(--violet); background: var(--violet-soft);
  padding: 14px 18px; margin-bottom: 32px; font-size: 0.93rem; color: #dcd8fb;
}
.preview-notice strong { display: block; color: var(--text); margin-bottom: 2px; }

.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { display: block; font-weight: 500; margin-bottom: 8px; padding: 0; }
.req { color: var(--magenta); }
.field input[type="text"], .field input[type="email"], .field textarea {
  width: 100%; min-height: 48px;
  padding: 12px 14px;
  background: rgba(8, 16, 34, 0.7); border: 1px solid var(--line-mid); border-radius: 2px;
  color: var(--text); font-size: 1rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field textarea { resize: vertical; min-height: 150px; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #5f708c; }
.field input:hover, .field textarea:hover { border-color: rgba(130, 170, 220, 0.38); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(55, 220, 233, 0.16); }
.field [aria-invalid="true"] { border-color: var(--magenta) !important; }
.field__hint { font-size: 0.8125rem; color: var(--dim); margin: 6px 0 0; font-variant-numeric: tabular-nums; }
.field__error { color: #ff8fcf; font-size: 0.88rem; margin: 6px 0 0; min-height: 0; }
.field__error:empty { display: none; }

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.choice { position: relative; display: block; margin: 0 !important; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--line-mid); font-weight: 400; font-size: 0.95rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.choice span::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border: 1px solid var(--dim); transform: rotate(45deg); transition: background var(--t-fast), border-color var(--t-fast); }
.choice:hover span { border-color: rgba(130, 170, 220, 0.4); }
.choice input:checked + span { border-color: var(--cyan); background: var(--cyan-soft); }
.choice input:checked + span::before { background: var(--magenta); border-color: var(--magenta); }
.choice input:focus-visible + span { outline: 2px solid var(--magenta); outline-offset: 2px; }
.choice--product { grid-column: 1 / -1; }
.choice--product span { border-style: dashed; }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.form-status { margin-top: 16px; font-size: 0.93rem; color: var(--muted); }
.form-status.is-ok { color: var(--text); border-left: 2px solid var(--cyan); padding-left: 12px; }
.form-status.is-error { color: #ff8fcf; border-left: 2px solid var(--magenta); padding-left: 12px; }

.brief-preview { position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--line); background: rgba(8, 14, 30, 0.75); min-width: 0; }
.brief-preview__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brief-preview__doc {
  margin: 0; padding: 18px; min-height: 320px; max-height: 60vh; overflow: auto;
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7; color: var(--muted);
  white-space: pre-wrap; word-break: break-word;
}

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

.site-footer { border-top: 1px solid var(--line); padding-block: 56px 40px; background: rgba(5, 9, 20, 0.8); }
.site-footer__inner { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 32px; align-items: start; }
.site-footer .wordmark { margin-bottom: 14px; }
.site-footer p { margin-bottom: 6px; font-size: 0.92rem; }
.footer-links { display: grid; gap: 6px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--cyan); }
.footer-note { line-height: 1.7; font-size: 0.875rem; color: var(--dim); }

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

@media (max-width: 1080px) {
  .nav a { padding-inline: 9px; }
  .svc-panel { grid-template-columns: 1fr; }
  .svc-panel__visual { position: static; }
  .product-body { grid-template-columns: 1fr; }
}

@media (max-width: 880px) {
  :root { --header-h: 60px; }
  .menu-toggle { display: inline-grid; place-items: center; }
  .header-cta { display: none; }
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: rgba(5, 9, 20, 0.97);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .menu-open .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { padding: 14px 0; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav a::after { left: 0; right: auto; width: 24px; bottom: 10px; }
  .header-tools { margin-left: auto; }

  .hero { min-height: auto; padding-top: var(--header-h); }
  .hero__stage { top: 0; left: 0; width: 100%; height: 52vh; max-height: 500px; }
  .core-label { font-size: 10px; line-height: 14px; }
  /* Fade the scene out before the copy starts so wireframe and code never sit under text */
  .hero__shade {
    background: linear-gradient(180deg, rgba(5, 9, 20, 0) 0%, rgba(5, 9, 20, 0.25) 24%, rgba(5, 9, 20, 0.9) min(36vh, 340px), var(--bg) min(42vh, 400px));
  }
  .hero__content { padding-top: min(30vh, 280px); padding-bottom: 32px; }
  .hero__title { font-size: clamp(2.125rem, 9.4vw, 3.25rem); line-height: 1.06; }
  .hero__content .lede { font-size: 1.0625rem; margin-bottom: 1.6em; }
  body[data-route="home"] .codefield { --code-alpha: 0.1; }
  body:not([data-route="home"]) .codefield { display: none; } /* copy spans the full width on phones */
  .hero__index { grid-template-columns: 1fr; }
  .hero__entry, .hero__entry + .hero__entry { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }

  .disciplines__grid, .connect__head, .deskaura-intro__grid, .cta__inner, .process, .contact { grid-template-columns: 1fr; }
  .disciplines__intro { position: static; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps li:nth-child(3) { padding-left: 0; border-left: 0; }

  .svc-tabs { grid-template-columns: 1fr; }
  .svc-tab, .svc-tab + .svc-tab { padding: 16px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .svc-tab:last-child { border-bottom: 0; }

  .process__rail { display: none; }
  .stage { opacity: 1; padding-bottom: 48px; }

  .brief-preview { position: static; }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .footer-note { grid-column: 1 / -1; }
  .mini-concept__frame { transform: none; }
}

@media (max-width: 600px) {
  .disc-row { grid-template-columns: 32px 1fr; }
  .disc-row .glyph { display: none; }
  .disc-row__tags { grid-column: 2; }
  .schematic svg { margin-inline: -8px; width: calc(100% + 16px); }
  .steps { grid-template-columns: 1fr; }
  .steps li, .steps li + li { padding-left: 0; border-left: 0; }
  .svc-cols { grid-template-columns: 1fr; }
  .stage__grid { grid-template-columns: 1fr; gap: 16px; }
  .choice-grid { grid-template-columns: 1fr; }
  .concept__app { grid-template-columns: 1fr; }
  .concept__side { display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px; }
  .concept__brand { width: 100%; margin-bottom: 4px; }
  .concept__grid { grid-template-columns: 1fr; }
  .concept__panel--cal { grid-row: auto; }
  .distinction__grid { grid-template-columns: 1fr; }
  .distinction__col { padding: 24px 20px; }
  .distinction__col + .distinction__col { border-left: 0; border-top: 1px solid var(--line); }
  .cap-table thead { display: none; }
  .cap-table, .cap-table tbody, .cap-table tr, .cap-table th, .cap-table td { display: block; width: auto !important; }
  .cap-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .cap-table th, .cap-table td { border: 0; padding: 2px 0; }
  .cap-table td:last-child { margin-top: 8px; }
  .status-strip { width: 100%; }
  .status-strip > div { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .status-strip > div:last-child { border-bottom: 0; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .codefield { inset: -10% -40% -10% -10%; }
  .pipeline { flex-wrap: wrap; row-gap: 8px; }
  .pipeline__link { flex: 0 0 14px; }
  .pipeline__node { font-size: 0.6rem; padding: 5px 6px; }
}

@media (max-width: 360px) {
  .wordmark__sub { display: none; }
}

/* There is no motion setting and no reduced-motion override in this version: animation always runs while the page is rendering (owner's decision, documented in the README). */