/* ----------------------------------------------------------------
   Operator card — Hyperion / Δeus χ
   Visual: black field, ember-red accent, single gold mark, JetBrains
   Mono for operator labels. No gradients on chrome, hairlines only.
---------------------------------------------------------------- */

:root {
  --bg: #070608;
  --bg-deep: #030203;
  --ink: #f3efe6;
  --ink-dim: rgba(243, 239, 230, 0.55);
  --ink-mute: rgba(243, 239, 230, 0.32);
  --hair: rgba(243, 239, 230, 0.08);

  --accent: #ff2a36;
  --accent-rgb: 255, 42, 54;
  --accent-soft: rgba(var(--accent-rgb), 0.18);
  --accent-faint: rgba(var(--accent-rgb), 0.06);
  --accent-line: rgba(var(--accent-rgb), 0.55);
  --accent-glow: rgba(var(--accent-rgb), 0.35);

  --gold: #c79a48;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --card-w: 420px;
  --card-h: 720px;
  --radius: 14px;
  --control-gap: 6px;
  --control-h: 32px;
  --control-track: 0.14em;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font-display);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

/* ---------- stage ---------- */

/* The card is a locked surface: it always fits the viewport whole, at every
   size, with no scrolling. The stage is pinned to exactly one viewport
   (dvh, so mobile browser chrome collapsing does not change it) and clips.
   A transform does NOT shrink the layout box, so the unscaled card still
   reserves its full height inside here — the clip is what stops the page
   scrolling; the scale is what keeps it visible. */
.stage {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 8px));
  position: relative;
  background:
    radial-gradient(1100px 700px at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
    radial-gradient(900px 600px at 50% 110%, rgba(var(--accent-rgb), 0.05), transparent 60%),
    var(--bg-deep);
}

.stage::before {
  content: "";
  position: absolute; inset: 0;
  /* Accent-tinted hex mesh. The stroke colour is baked into the SVG by
     applyAccent() (--hexmesh), so the field still recolours from the one
     operator hex — but it stays a plain tiled background under a single
     radial mask. Painting it as accent-fill + composited hex/radial masks
     is visually identical and pathologically slow: the full-viewport mask
     buffer is rebuilt on every repaint the blended SignalField triggers,
     which pins the main thread. */
  background-image: var(--hexmesh);
  background-size: 56px 48px;
  -webkit-mask-image: radial-gradient(closest-side at 50% 45%, black 0%, transparent 72%);
          mask-image: radial-gradient(closest-side at 50% 45%, black 0%, transparent 72%);
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
}

/* ---------- ambient signal field ---------- */
.signal-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* draw under everything but the stage background gradients.
     Full opacity + screen blend matches the founder page, where the
     same lattice runs at 1.0 — at 0.85 the links washed out to nothing. */
  mix-blend-mode: screen;
  opacity: 1;
}

.stage::after {
  /* fine scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.012) 0 1px,
    transparent 1px 3px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* desktop framing — hud marks outside the card */
.stage-marks {
  position: absolute;
  top: 24px; left: 24px; right: 24px; bottom: 24px;
  pointer-events: none;
  color: var(--accent);
  font: 500 10px/1.4 var(--font-mono);
  letter-spacing: 0.16em;
}
.stage-marks .tl { position:absolute; top:0; left:0; }
.stage-marks .tr { position:absolute; top:0; right:0; text-align:right; }
.stage-marks .bl { position:absolute; bottom:0; left:0; }
.stage-marks .br { position:absolute; bottom:0; right:0; text-align:right; }
.stage-marks span { display:block; color: var(--ink-mute); }
.stage-marks .hot { color: var(--accent); }

@media (max-width: 700px) {
  .stage-marks { display: none; }
}

/* ---------- card shell ---------- */

/* Fit layer — scales the whole card to whatever the viewport allows, so the
   composition stays locked (nothing reflows, nothing clips, type keeps its
   exact proportions) and the card is always fully visible. --card-fit is
   computed in app.jsx from the stage's real content box, so it accounts for
   padding, safe-area insets and orientation. Capped at 1: scaling type up
   past its designed size only makes it soft.
   This sits OUTSIDE .card-wrap on purpose — .card-wrap owns the perspective
   for the tilt/flip, and scaling that same element would rescale the
   perspective depth along with it. */
.card-fit {
  /* Centred by absolute positioning, not by the stage's grid. The card keeps
     its full unscaled height (744px) as its layout box, so as a grid item the
     row would stretch to 744 and overflow downward from the top edge — the
     card sat 52px below the viewport. Absolute centring pins the box's centre
     to the stage's centre regardless of how far it overflows, and the scale
     then shrinks it about that same centre.
     Explicit width too: shrink-to-fit would leave .card-wrap's percentage
     width with nothing definite to resolve against. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--card-w);
  transform: translate(-50%, -50%) scale(var(--card-fit, 1));
  transform-origin: center center;
  will-change: transform;
  z-index: 2;
}

.card-wrap {
  perspective: 2200px;
  width: 100%;
  position: relative;
  z-index: 2;
  --tilt-x: 0deg; --tilt-y: 0deg;
  --glare-x: 50%; --glare-y: 50%; --glare-o: 0;
  --lift: 0px;
}

/* tilt layer — pointer-tracked 3D tilt, decoupled from the flip so each
   keeps its own transition timing. Hover-capable devices only (JS-gated). */
.card-tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(var(--lift));
  transition: transform 180ms ease-out;
  will-change: transform;
}

.card {
  position: relative;
  width: 100%;
  height: var(--card-h);
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.7,.1,.2,1);
}
.card.flipped { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, #0a0709 0%, #050406 60%, #07060a 100%);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.06) inset,
    0 30px 80px -30px rgba(var(--accent-rgb), 0.35),
    0 6px 24px -8px rgba(0,0,0,0.8);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}
.face.back { transform: rotateY(180deg); }

/* animated lattice mesh sitting BEHIND content but inside the card */
.mesh-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  /* mask so the mesh feels denser in the corners + fades from key content */
  -webkit-mask-image:
    radial-gradient(ellipse 65% 50% at 50% 38%, transparent 0%, rgba(0,0,0,0.55) 55%, black 100%);
          mask-image:
    radial-gradient(ellipse 65% 50% at 50% 38%, transparent 0%, rgba(0,0,0,0.55) 55%, black 100%);
}

/* internal frame — clipped corners + brackets */
.frame {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(var(--accent-rgb), 0.30);
  /* notched corners */
  clip-path: polygon(
    14px 0, calc(100% - 14px) 0, 100% 14px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 14px
  );
  pointer-events: none;
}
.frame::before, .frame::after {
  content: "";
  position: absolute;
  background: var(--accent);
}
/* faint inner hairline */
.frame-inner {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 6px;
  pointer-events: none;
}

/* corner brackets sit on top of frame */
.bracket {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid var(--accent);
}
.bracket.tl { top: 4px; left: 4px;   border-right: 0; border-bottom: 0; }
.bracket.tr { top: 4px; right: 4px;  border-left: 0;  border-bottom: 0; }
.bracket.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; }
.bracket.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }

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

.opbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 0;
  font: 500 10px/1.2 var(--font-mono);
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  z-index: 2;
}
.opbar-left,
.opbar-right { display: flex; align-items: center; gap: 10px; }
.opbar-meta { color: var(--ink-mute); }
.opbar-meta.tick {
  position: relative;
  padding-left: 12px;
}
.opbar-meta.tick::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}
.opbar .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  color: var(--accent);
  border-radius: 2px;
}
.dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-glow);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.opbar .nfc {
  position: relative;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--accent);
}

/* small inline flip button in the opbar (replaces the old floating one) */
.op-flip {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 200ms;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  padding: 0;
}
.op-flip:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}
.op-flip:active { transform: scale(0.94); }

/* ---------- portrait block ---------- */

.portrait {
  position: relative;
  padding: 6px 0 0;
  display: grid;
  grid-template-columns: 156px 32px;
  gap: 12px;
  justify-content: center;
  z-index: 2;
}

.portrait-outer {
  position: relative;
  width: 156px;
  height: 156px;
}

.portrait-frame {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
}
.portrait-frame::before {
  /* outer ring */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow:
    0 0 28px var(--accent-glow) inset,
    0 0 40px rgba(var(--accent-rgb),0.25);
  z-index: 3;
  pointer-events: none;
}
.portrait-frame::after {
  /* inner red haze behind portrait */
  content: "";
  position: absolute; inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(var(--accent-rgb),0.35), rgba(var(--accent-rgb),0) 70%),
    repeating-conic-gradient(from 0deg, rgba(var(--accent-rgb),0.10) 0deg 4deg, transparent 4deg 12deg);
  z-index: 0;
}
.portrait-frame image-slot,
.portrait-frame .portrait-video {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
/* animated portrait (muted looping video) — cover-crops like image-slot.
   The operator plate is a night-city composition averaging ~26/255
   luminance against a card face of ~8, so it needs a modest lift to
   separate from the panel. Kept gentle: heavier curves crush the
   visor's red readout into a flat block. */
.portrait-frame .portrait-video {
  object-fit: cover;
  object-position: 50% 42%;
  pointer-events: none;
  filter: brightness(1.28) contrast(1.05) saturate(1.1);
}
/* slow scan pass across the portrait */
.portrait-scan {
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  overflow: hidden;
}
.portrait-scan::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 36%; top: -36%;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb),0.16), transparent);
  animation: pscan 5s ease-in-out infinite;
}
@keyframes pscan { 0% { top: -36%; } 55% { top: 100%; } 100% { top: 100%; } }

/* ---- blended portrait (space-blended plate; no hard ring/circle) ----
   Mask geometry is tuned for THIS plate (dark helmet, night city). Two
   constraints fight each other: the opaque core must cover the whole
   helmet or the portrait reads as empty at 168px (the design's original
   32% core survived only as a ~60px blob), but any mask still carrying
   alpha where the element ends gets sliced flat and shows the video's
   square border.

   `closest-side` sizes the ellipse to the nearest edge — 50% of the
   width, 46% of the height from the offset centre — so alpha is
   guaranteed to hit 0 at every edge and corner, with no square. The
   middle stop bends the falloff: solid through the helmet, then a long
   gentle tail instead of a linear ramp, which reads as a dissolve
   rather than a vignette with a rim. */
.portrait.blend { grid-template-columns: 168px 32px; }
.portrait.blend .portrait-outer { width: 168px; height: 168px; }
.portrait.blend .orbit { opacity: 0.55; }
.portrait-frame.blend { overflow: visible; border-radius: 0; }
.portrait-frame.blend::before { display: none; } /* drop the hard accent ring */
.portrait-frame.blend::after {
  /* larger, softer accent haze bleeding past the image edge */
  inset: -16%;
  opacity: 0.5;
  z-index: 0;
}
.portrait-frame.blend image-slot,
.portrait-frame.blend .portrait-video {
  border-radius: 0;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 46%, #000 55%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 46%, #000 55%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
}
.portrait.blend .portrait-scan {
  border-radius: 0;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 46%, #000 55%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
          mask-image: radial-gradient(ellipse closest-side at 50% 46%, #000 55%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0) 100%);
}

/* orbital ring — ambient HUD rotating around portrait */
.portrait-outer .orbit {
  position: absolute;
  inset: -10px;
  width: calc(100% + 20px);
  height: calc(100% + 20px);
  pointer-events: none;
  color: var(--accent);
  z-index: 4;
  opacity: 0.85;
}
.orbit-spin {
  transform-origin: 50px 50px;
  animation: orbit 18s linear infinite;
}
.orbit-counter {
  transform-origin: 50px 50px;
  animation: orbit 42s linear infinite reverse;
}
@keyframes orbit {
  to { transform: rotate(360deg); }
}

/* vertical glyph column — original ΔX mark, not kanji */
.glyph-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding-top: 12px;
  color: var(--accent);
  font: 700 24px/1 var(--font-display);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(var(--accent-rgb),0.45);
}
.glyph-col .small {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 0.3em;
  color: var(--accent-line);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  margin-top: 10px;
  text-shadow: none;
}

/* ---------- identity block ---------- */

.identity {
  position: relative;
  padding: 10px 22px 0;
  z-index: 2;
}
.identity-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 5px; }
.op-index {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  border: 1px solid rgba(var(--accent-rgb),0.28);
  padding: 3px 7px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.op-index b { color: var(--accent); font-weight: 700; margin-left: 5px; letter-spacing: 0.12em; }
.identity h1 {
  font: 700 25px/0.95 var(--font-display);
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--ink);
}
.identity .alias {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.24em;
  color: var(--ink);
  margin-top: 7px;
}
.identity .alias-key {
  font-size: 8px;
  letter-spacing: 0.3em;
  color: var(--ink-mute);
  border: 1px solid rgba(var(--accent-rgb),0.22);
  padding: 3px 5px;
}
.identity .role {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 8px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.22em;
  color: var(--accent);
}
.identity .brand {
  margin-top: 5px;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.28em;
  color: var(--ink);
}
/* identity rule with travelling scan-tick */
.identity .rule {
  margin-top: 8px;
  height: 1px;
  background: linear-gradient(to right, var(--accent) 0%, var(--accent) 40%, transparent 100%);
  position: relative;
  overflow: visible;
}
.identity .rule::before {
  /* travelling micro-pip — the system 'reading' indicator */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: translate(-50%, -50%);
  animation: rule-tick 7s cubic-bezier(.6,.05,.4,1) infinite;
}
.identity .rule::after {
  content: "";
  position: absolute;
  left: 40%;
  top: 50%;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--accent-glow);
  opacity: 0.6;
}
.identity .capability {
  margin-top: 8px;
  font: 500 9px/1.4 var(--font-mono);
  letter-spacing: 0.28em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
@keyframes rule-tick {
  0%   { left: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 60%;  opacity: 0; }
}

.tagline {
  padding: 8px 22px 0;
  font: 400 11.5px/1.4 var(--font-display);
  color: var(--ink-dim);
  text-wrap: pretty;
}
.tagline em {
  color: var(--ink);
  font-style: normal;
}

/* ---------- modules row (was 'systems') ---------- */

.systems {
  padding: 10px 22px 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  z-index: 2;
  position: relative;
}
.systems-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.32em;
  color: var(--ink-mute);
}
.systems-count {
  color: var(--accent);
  letter-spacing: 0.24em;
  font-size: 8.5px;
  white-space: nowrap;
}
.systems-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--control-gap);
}
.sys-chip {
  position: relative;
  min-width: 0;
  min-height: 60px;
  padding: 7px 18px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  text-decoration: none;
  color: var(--ink);
  display: grid;
  grid-template-rows: 23px 21px;
  align-content: center;
  gap: 3px;
  transition: background 200ms, border-color 200ms, transform 200ms;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}
.sys-chip:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: var(--accent);
  transform: translateY(-1px);
}
.sys-chip .sys-name {
  font: 700 11.5px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  display: flex;
  align-items: center;
  min-width: 0;
  text-wrap: balance;
}
.sys-chip .sys-tag {
  font: 500 8.5px/1.2 var(--font-mono);
  letter-spacing: var(--control-track);
  color: var(--accent);
  display: flex;
  align-items: flex-start;
  min-width: 0;
  text-wrap: balance;
}
.sys-chip .sys-status {
  position: absolute;
  top: 50%; left: 8px;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-glow);
  transform: translateY(-50%);
  animation: pulse 2.4s ease-in-out infinite;
}
.sys-chip.coming .sys-status {
  background: transparent;
  border: 1px solid var(--ink-mute);
  box-shadow: none;
  animation: none;
}
.sys-chip.coming .sys-tag { color: var(--ink-mute); }

/* CTA module — commercial action variant (Forge Inquiry) */
.sys-chip.cta {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: rgba(var(--accent-rgb), 0.45);
}
.sys-chip.cta:hover {
  background: rgba(var(--accent-rgb), 0.16);
}
.sys-chip.cta .sys-status {
  /* hollow square instead of dot — reads as 'action' not 'live state' */
  width: 6px; height: 6px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--accent);
  box-shadow: none;
  animation: none;
  transform: translateY(-50%) rotate(45deg);
}
.sys-chip.cta .sys-chev {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  display: grid; place-items: center;
  transition: transform 180ms;
}
.sys-chip.cta:hover .sys-chev { transform: translateY(-50%) translateX(2px); }

/* ---------- comms console ---------- */

.connect {
  padding: 10px 22px 0;
  position: relative;
  z-index: 2;
}
.connect-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.32em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.connect-sub {
  color: var(--accent-line);
  letter-spacing: 0.28em;
  font-size: 8.5px;
  white-space: nowrap;
}

/* two stacked channels share one console */
.comms-stack {
  display: grid;
  gap: 4px;
  background: rgba(var(--accent-rgb), 0.04);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  position: relative;
  overflow: hidden;
}
.comms-stack::after {
  /* slow horizontal sheen on the whole console */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(var(--accent-rgb),0.10) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: sheen 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sheen {
  0%, 70% { transform: translateX(-100%); }
  85%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

.comms-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 40px 1fr 18px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  height: 38px;
  transition: background 180ms;
}
.comms-row + .comms-row {
  border-top: 1px solid rgba(var(--accent-rgb), 0.20);
}
.comms-row:hover { background: rgba(var(--accent-rgb), 0.06); }
.comms-row .well {
  display: grid; place-items: center;
  height: 100%;
  border-right: 1px solid rgba(var(--accent-rgb), 0.20);
  color: var(--accent);
}
.comms-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 12px;
  min-width: 0;
}
.comms-eyebrow {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 0.32em;
  color: var(--accent);
}
.comms-value {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.connect-chev {
  color: var(--accent);
  display: grid;
  place-items: center;
  justify-content: end;
  padding-right: 10px;
  transition: transform 180ms;
}
.comms-row:hover .connect-chev { transform: translateX(2px); }

/* secondary icon rail — single row of mini channels */
.connect-rail {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--control-gap);
}
.chan {
  position: relative;
  width: 100%;
  min-width: 0;
  height: var(--control-h);
  display: grid;
  place-items: center;
  color: var(--accent);
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.22);
  text-decoration: none;
  transition: background 160ms, border-color 160ms, color 160ms;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.chan:hover {
  background: rgba(var(--accent-rgb), 0.10);
  border-color: var(--accent);
}
.chan-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: var(--control-track);
  color: var(--ink);
  background: rgba(7,6,8,0.92);
  border: 1px solid rgba(var(--accent-rgb),0.30);
  padding: 5px 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
  text-transform: uppercase;
  z-index: 5;
}
.chan:hover .chan-tip,
.chan:focus-visible .chan-tip { opacity: 1; }

/* legacy classes — unused now */
.links, .support, .connect-primary, .connect-prim-meta { display: none; }

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

/* ---------- footer: telemetry strip + signature line ---------- */

.cardfoot {
  margin-top: auto;
  padding: 10px 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
  position: relative;
}

.telemetry {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  height: 22px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--accent-rgb),0.18);
  position: relative;
}
.telemetry::before {
  /* tiny tick at left edge */
  content: "";
  position: absolute;
  bottom: -1px; left: 0;
  width: 14px; height: 3px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* gold mark */
.tele-mark {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gold-mark {
  width: 12px; height: 12px;
  border: 1.5px solid var(--gold);
  transform: rotate(45deg);
  position: relative;
}
.gold-mark::before {
  content: "";
  position: absolute; inset: 2.5px;
  background: var(--gold);
}
.gold {
  color: var(--gold);
  letter-spacing: 0.14em;
  font: 600 11px/1 var(--font-display);
}

/* waveform — 14 bars breathing on staggered phase */
.wave {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
}
.wave i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
  height: var(--h, 8px);
  opacity: 0.75;
  transform-origin: center;
  animation: wave-breathe 1800ms ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform, opacity;
}
@keyframes wave-breathe {
  0%, 100% {
    transform: scaleY(0.55);
    opacity: 0.45;
    background: var(--accent);
  }
  50% {
    transform: scaleY(1);
    opacity: 1;
    background: var(--accent);
  }
}

/* live UTC clock */
.tele-clock {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tele-clock-val {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.12em;
}
.tele-clock-tz {
  font: 500 8.5px/1 var(--font-mono);
  letter-spacing: 0.28em;
  color: var(--accent);
}

/* signature line — failure tagline, micro, centered with hairlines */
.signature {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.sig-hair {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--accent-rgb),0.30), transparent);
}
.sig-text {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.36em;
  color: var(--ink-mute);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- LOCK STATE ---------- */

.lock-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(5, 4, 6, 0.86);
  backdrop-filter: blur(6px) saturate(0.7);
  -webkit-backdrop-filter: blur(6px) saturate(0.7);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: opacity 500ms ease;
}
.lock-overlay.fading {
  opacity: 0;
  pointer-events: none;
}

.lock-inner {
  display: grid;
  place-items: center;
  gap: 18px;
  text-align: center;
  padding: 0 24px;
}
.lock-ring {
  position: relative;
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.4);
  display: grid; place-items: center;
  color: var(--accent);
}
.lock-ring::before, .lock-ring::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(var(--accent-rgb),0.5);
  inset: -10px;
  animation: ringPulse 2.2s ease-out infinite;
}
.lock-ring::after { animation-delay: 1.1s; }
@keyframes ringPulse {
  0%   { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1.4); opacity: 0; }
}
.lock-cta {
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.42em;
  color: var(--ink);
}
.lock-cta .hint {
  display: block;
  margin-top: 8px;
  font-size: 9px;
  letter-spacing: 0.36em;
  color: var(--ink-mute);
}
/* Save-contact (vCard) — sits under the activate CTA on the lock screen
   so a visitor can grab the details without (or before) activating. */
.lock-vcard {
  margin-top: 22px;
  background: transparent;
  border: 1px solid rgba(var(--accent-rgb), 0.40);
  color: var(--ink);
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 160ms, border-color 160ms, transform 200ms;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.lock-vcard:hover {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: var(--accent);
}
.lock-vcard:active { transform: scale(0.97); }

/* scan sweep when activating */
.scan-sweep {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  overflow: hidden;
}
.scan-sweep::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 70px;
  top: -70px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--accent-rgb),0.10) 30%,
    rgba(var(--accent-rgb),0.65) 50%,
    rgba(var(--accent-rgb),0.10) 70%,
    transparent 100%
  );
  box-shadow: 0 0 30px rgba(var(--accent-rgb),0.55);
  animation: sweep 1400ms cubic-bezier(.6,.05,.2,1) forwards;
}
@keyframes sweep {
  from { top: -70px; opacity: 1; }
  to   { top: 100%; opacity: 0.4; }
}

/* live entrance — staggered rise as systems come online */
.live .opbar,
.live .portrait,
.live .identity,
.live .tagline,
.live .systems,
.live .connect,
.live .cardfoot {
  opacity: 0;
  animation: rise 600ms cubic-bezier(.2,.7,.2,1) forwards;
}
.live .opbar     { animation-delay: 60ms; }
.live .portrait  { animation-delay: 140ms; }
.live .identity  { animation-delay: 240ms; }
.live .tagline   { animation-delay: 320ms; }
.live .systems   { animation-delay: 400ms; }
.live .connect   { animation-delay: 480ms; }
.live .cardfoot  { animation-delay: 560ms; }
@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- BACK FACE ---------- */

.back-pad {
  position: relative;
  flex: 1;
  padding: 12px 24px 18px;
  display: flex;
  flex-direction: column;
  z-index: 2;
}
.back-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.32em;
  color: var(--accent);
}
.back-title {
  margin-top: 10px;
  font: 700 19px/1.05 var(--font-display);
  letter-spacing: 0.005em;
  color: var(--ink);
}
.back-title .hl { color: var(--accent); }

.back-body {
  margin: 10px 0 0;
  font: 400 11.5px/1.55 var(--font-display);
  letter-spacing: 0.005em;
  color: var(--ink-dim);
  text-wrap: pretty;
}

.tenets {
  margin-top: 14px;
  display: grid;
  gap: 3px;
}
.tenets-label,
.available-label {
  font: 500 9px/1 var(--font-mono);
  letter-spacing: 0.36em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--accent-rgb),0.18);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tenets-label::after,
.available-label::after {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}
.tenet {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  font: 500 10px/1.5 var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--ink);
}
.tenet .n {
  color: var(--accent);
  letter-spacing: 0.04em;
  font-weight: 600;
}

.available {
  margin-top: 12px;
}
.available ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 6px;
}
.available li {
  position: relative;
  padding: 3px 0 3px 18px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--ink);
  text-transform: uppercase;
  border-bottom: 1px dashed rgba(var(--accent-rgb),0.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.available li:last-child { border-bottom: 0; }
.available li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px; height: 1px;
  background: var(--accent);
  transform: translateY(-50%);
}
.available li::after {
  content: "";
  width: 4px; height: 4px;
  border: 1px solid var(--accent);
  background: transparent;
  flex-shrink: 0;
  transform: rotate(45deg);
}

.scan-box {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(var(--accent-rgb),0.18);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: end;
}
.scan-qr {
  width: 64px; height: 64px;
  border: 1px solid rgba(var(--accent-rgb),0.35);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 1.5px;
  padding: 5px;
  background: rgba(var(--accent-rgb),0.04);
}
.scan-qr i {
  display: block;
  background: var(--accent);
  opacity: 0.85;
  border-radius: 1px;
}
/* Real branded QR — replaces the placeholder grid on the back face. */
.scan-qr-img {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: #fff;
  border-radius: 2px;
  display: block;
  object-fit: contain;
  padding: 3px;
  transition: box-shadow 240ms, border-color 240ms;
}
.scan-box:hover .scan-qr-img {
  border-color: var(--accent);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.25);
}
.scan-meta {
  font: 500 9.5px/1.55 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}
.scan-meta strong {
  display: block;
  color: var(--ink);
  font: 600 11px/1 var(--font-display);
  letter-spacing: 0.24em;
  margin-bottom: 5px;
}

/* legacy manifesto class \u2014 unused now */
.manifesto { display: none; }

/* ---------- round 2: holo glare + periodic scan + micro-interactions ---------- */

/* pointer-following holographic glare (vars inherit from .card-wrap) */
.holo-glare {
  position: absolute; inset: 0;
  z-index: 9;
  pointer-events: none;
  background:
    radial-gradient(420px 300px at var(--glare-x) var(--glare-y), rgba(255,255,255,0.09), transparent 60%),
    radial-gradient(240px 170px at var(--glare-x) var(--glare-y), rgba(var(--accent-rgb),0.10), transparent 60%);
  opacity: var(--glare-o, 0);
  transition: opacity 400ms ease;
  mix-blend-mode: screen;
}

/* periodic full-face scanline pass (front, once live) */
.face-scan {
  position: absolute; inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}
.face-scan::before {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 110px; top: -120px;
  background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb),0.05) 40%, rgba(var(--accent-rgb),0.13) 50%, rgba(var(--accent-rgb),0.05) 60%, transparent);
  animation: facescan 8s cubic-bezier(.6,.05,.3,1) infinite 2.2s;
}
@keyframes facescan { 0% { top: -120px; } 26% { top: 100%; } 100% { top: 100%; } }

/* rare rgb-split glitch on the operator name */
.live .identity h1 span {
  display: inline-block;
  animation: glitch-flicker 7s steps(1) infinite 1.4s;
}
@keyframes glitch-flicker {
  0%, 93.4%, 95.9%, 100% { transform: none; text-shadow: none; opacity: 1; }
  93.8% { transform: translateX(-1.5px) skewX(-4deg); text-shadow: 2px 0 rgba(var(--accent-rgb),0.85), -2px 0 rgba(90,200,255,0.5); }
  94.6% { transform: translateX(1px); text-shadow: -2px 0 rgba(var(--accent-rgb),0.85); opacity: 0.85; }
  95.3% { transform: none; text-shadow: none; }
}

/* portrait reacts to hover — orbit + scan accelerate, ring flares */
.portrait:hover .orbit-spin { animation-duration: 5s; }
.portrait:hover .orbit-counter { animation-duration: 14s; }
.portrait:hover .portrait-scan::before { animation-duration: 1.7s; }
.portrait-frame::before { transition: box-shadow 300ms ease; }
.portrait:hover .portrait-frame::before {
  box-shadow: 0 0 34px var(--accent-glow) inset, 0 0 60px rgba(var(--accent-rgb),0.42);
}

/* module chips — light sweep on hover */
.sys-chip::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(var(--accent-rgb),0.22) 50%, transparent 58%);
  transform: translateX(-110%);
  pointer-events: none;
}
.sys-chip:hover::after { transform: translateX(110%); transition: transform 480ms ease; }

/* comms rows — well lights, eyebrow tracks out */
.comms-row .well { transition: background 180ms, color 180ms; }
.comms-row:hover .well { background: rgba(var(--accent-rgb),0.14); color: var(--ink); }
.comms-eyebrow { transition: letter-spacing 300ms ease; }
.comms-row:hover .comms-eyebrow { letter-spacing: 0.42em; }
.chan { transition: background 160ms, border-color 160ms, color 160ms, transform 180ms; }
.chan:hover { transform: translateY(-2px); }

/* back face — staggered reveal on flip */
.flipped .back-pad > * { opacity: 0; animation: rise 520ms cubic-bezier(.2,.7,.2,1) forwards; }
.flipped .back-pad > *:nth-child(1) { animation-delay: 320ms; }
.flipped .back-pad > *:nth-child(2) { animation-delay: 400ms; }
.flipped .back-pad > *:nth-child(3) { animation-delay: 480ms; }
.flipped .back-pad > *:nth-child(4) { animation-delay: 560ms; }
.flipped .back-pad > *:nth-child(5) { animation-delay: 640ms; }
.flipped .back-pad > *:nth-child(6) { animation-delay: 720ms; }

/* doctrine highlight — underline draws in after flip */
.back-title .hl { position: relative; }
.back-title .hl::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
  transform: scaleX(1);
  transform-origin: left;
}
.card.flipped .back-title .hl::after { animation: hl-draw 900ms 700ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes hl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* tenets + availability — hover states */
.tenet { padding: 2px 4px; margin: 0 -4px; transition: background 160ms; }
.tenet:hover { background: rgba(var(--accent-rgb),0.07); }
.tenet:hover .n { text-shadow: 0 0 8px var(--accent-glow); }
.available li { transition: color 160ms, padding-left 200ms ease; }
.available li:hover { color: var(--accent); padding-left: 24px; }
.scan-qr { transition: box-shadow 240ms, border-color 240ms; }
.scan-box:hover .scan-qr { border-color: var(--accent); box-shadow: 0 0 22px rgba(var(--accent-rgb),0.25); }

@media (prefers-reduced-motion: reduce) {
  .card-tilt { transform: none !important; }
  .face-scan, .holo-glare { display: none; }
  .live .identity h1 span { animation: none; }
  .flipped .back-pad > * { animation-duration: 1ms; }
}

/* ---------- flip control (legacy, hidden — flip now lives in opbar) ---------- */

.flip-btn { display: none; }

/* mobile tweaks */
@media (max-width: 480px) {
  :root { --card-w: 360px; --card-h: 744px; }
  .identity h1 { font-size: 22px; }
  .sys-chip .sys-name { font-size: 11px; }
  .link .label { font-size: 10px; letter-spacing: 0.12em; }
}