/* ──────────────────────────────────────────────────────────────
   Vera Kovaleva — verakovaleva.com
   Dark luxury / robotics intelligence aesthetic
   ──────────────────────────────────────────────────────────── */

/* ----- Fonts -----------------------------------------------------
   Geometria is a commercial typeface. Drop the licensed files into
   /assets/fonts/ with the filenames below and they will be picked
   up automatically. Fallback stack uses geometric sans (Futura,
   Avenir, Inter) to preserve the editorial-futurist feel.
----------------------------------------------------------------- */

@font-face {
  font-family: "Geometria";
  src: url("../fonts/Geometria-Light.woff2") format("woff2"),
       url("../fonts/Geometria-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geometria";
  src: url("../fonts/Geometria-Regular.woff2") format("woff2"),
       url("../fonts/Geometria-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geometria";
  src: url("../fonts/Geometria-Medium.woff2") format("woff2"),
       url("../fonts/Geometria-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geometria";
  src: url("../fonts/Geometria-ExtraBold.woff2") format("woff2"),
       url("../fonts/Geometria-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  --bg:           #06070a;
  --bg-2:         #08090d;
  --surface:      rgba(255,255,255,0.025);
  --surface-2:    rgba(255,255,255,0.045);
  --line:         rgba(255,255,255,0.08);
  --line-2:       rgba(255,255,255,0.16);
  --line-hot:     rgba(220,232,250,0.42);

  --ink:          #ffffff;   /* big headings, nav, primary marks — stays pure white */
  --ink-2:        #dee1e6;   /* body text — slightly softer than pure white */
  --ink-3:        #dee1e6;   /* secondary body text — same softer tone */
  --ink-4:        #8c909a;   /* small uppercase meta labels — kept subtle for hierarchy */
  --ink-5:        #4a4e57;

  --accent:       #dfe6f1;        /* platinum */
  --accent-warm:  #f0c69a;        /* dim warm accent (used sparingly) */
  --accent-cool:  #8fb7e6;        /* dim cool accent */

  --glow-a:       rgba(74, 110, 180, 0.18);
  --glow-b:       rgba(180, 130, 90, 0.10);

  --font-sans:    "Geometria", "Futura PT", "Futura", "Avenir Next", "Avenir",
                  "Inter", "Helvetica Neue", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", "Menlo", ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  --ease:         cubic-bezier(.2,.6,.2,1);
  --ease-out:     cubic-bezier(.16,.84,.32,1);
  --t-fast:       180ms;
  --t-med:        420ms;
  --t-slow:       900ms;

  --container:    1240px;
  --pad-y:        clamp(96px, 12vw, 168px);
}

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
ul, ol { list-style: none; padding: 0; margin: 0; }
::selection { background: rgba(223, 230, 241, 0.22); color: #fff; }

body {
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.005em;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Background field ──────────────────────────────────────────── */
.bg-field {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(60,90,160,0.18), transparent 60%),
    radial-gradient(900px 600px  at 92% 8%,   rgba(180,120,80,0.07), transparent 65%),
    radial-gradient(1100px 800px at 60% 110%, rgba(40,70,140,0.10), transparent 60%),
    linear-gradient(180deg, #05060a 0%, #07080c 40%, #05060a 100%);
}
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 80%);
  opacity: 0.55;
}
.bg-glow {
  position: absolute;
  width: 60vmax; height: 60vmax;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.7;
  animation: drift 28s var(--ease) infinite alternate;
}
.bg-glow--a { background: var(--glow-a); top: -20vmax; left: -10vmax; }
.bg-glow--b { background: var(--glow-b); bottom: -25vmax; right: -15vmax; animation-duration: 36s; }
.bg-grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.45;
}
.bg-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.012) 0 2px, transparent 2px 4px);
  mix-blend-mode: overlay;
  opacity: 0.35;
  pointer-events: none;
}

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(3vmax, 2vmax, 0) scale(1.05); }
}

/* ── Layout ────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.section { padding: var(--pad-y) 0; position: relative; }
.section + .section { border-top: 1px solid var(--line); }

/* Ecosystem follows directly after hero — tighter spacing so the
   cards appear in the first scroll, not after a 100vh gap. */
.ecosystem { padding-top: clamp(48px, 6vw, 88px); }
.ecosystem .section__title { margin-bottom: 36px; font-size: clamp(24px, 3.4vw, 40px); max-width: 26ch; }
.ecosystem .meta-row { margin-bottom: 24px; }

/* ── Nav ──────────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  background: rgba(6,7,10,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.nav.is-scrolled {
  background: rgba(6,7,10,0.78);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: 100%; max-width: var(--container);
  margin: 0 auto;
  padding: 14px clamp(20px, 4vw, 56px);
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 14px;
  color: var(--ink);
}
.nav__mark {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 13px;
  color: var(--ink);
}
.nav__logo {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 22px rgba(180, 160, 220, 0.2));
  transition: filter var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.nav__brand:hover .nav__logo {
  filter: drop-shadow(0 0 22px rgba(200, 180, 240, 0.32));
  transform: translateY(-1px);
}
.nav__divider {
  width: 1px; height: 28px; background: var(--line-2);
}
.nav__sig {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  line-height: 1.15;
}
.nav__sig-name,
.nav__sig-role {
  display: block;
  width: auto;
}
.nav__sig-name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-transform: none;
  white-space: nowrap;
}
.nav__sig-role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.nav__links { display: inline-flex; gap: 30px; align-items: center; }
.nav__links > a,
.nav__group-trigger {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color var(--t-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: none; border: 0; font-family: inherit;
  font-weight: 300;
}
.nav__links > a::after,
.nav__group-trigger::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--t-med) var(--ease);
}
.nav__links > a:hover,
.nav__group-trigger:hover { color: var(--ink); }
.nav__links > a:hover::after,
.nav__group-trigger:hover::after,
.nav__group.is-open .nav__group-trigger::after { transform: scaleX(1); }

.nav__links > a[aria-current="page"],
.nav__group-trigger[aria-current="page"],
.nav__group.is-section .nav__group-trigger { color: var(--ink); }
.nav__links > a[aria-current="page"]::after,
.nav__group-trigger[aria-current="page"]::after,
.nav__group.is-section .nav__group-trigger::after { transform: scaleX(1); }

/* ── Dropdown ──────────────────────────────────────────────── */
.nav__group { position: relative; }
.nav__chev { width: 11px; height: 11px; transition: transform var(--t-fast) var(--ease); }
.nav__group:hover .nav__chev,
.nav__group:focus-within .nav__chev,
.nav__group.is-open .nav__chev { transform: rotate(180deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -20px;
  min-width: 320px;
  padding: 10px;
  background: rgba(10,11,14,0.94);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 60;
}
.nav__dropdown::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223,230,241,0.32), transparent);
  opacity: 0.7;
}
/* Invisible hover bridge — closes the 14px gap between the trigger
   and the dropdown so the menu doesn't disappear mid-mouse-move. */
.nav__dropdown::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 0; right: 0;
  height: 18px;
  background: transparent;
}
.nav__group:hover .nav__dropdown,
.nav__group:focus-within .nav__dropdown,
.nav__group.is-open .nav__dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.nav__dropdown a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 6px;
  color: var(--ink-2);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__dropdown a::after { display: none; }
.nav__dropdown a:hover { background: rgba(255,255,255,0.04); color: var(--ink); }
.nav__dropdown a[aria-current="page"] { background: rgba(255,255,255,0.06); color: var(--ink); }
.nav__dropdown-idx {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ink-4);
}
.nav__dropdown a:hover .nav__dropdown-idx,
.nav__dropdown a[aria-current="page"] .nav__dropdown-idx { color: var(--accent); }
.nav__dropdown-label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nav__dropdown-label strong {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.nav__dropdown-label em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.nav__toggle { display: none; width: 36px; height: 36px; position: relative; }
.nav__toggle span {
  position: absolute; left: 8px; right: 8px; height: 1px; background: var(--ink-2);
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { bottom: 14px; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ── Meta row (section eyebrow) ───────────────────────────────── */
.meta-row {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 36px;
}
.meta-row__index {
  color: var(--ink-2);
  font-weight: 800;
  font-family: var(--font-sans);
  letter-spacing: 0.2em;
}
.meta-row__line {
  width: 56px; height: 1px; background: var(--line-2);
}

/* ── Typography ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.04;
  margin: 0;
}

.section__title {
  font-size: clamp(28px, 4.2vw, 52px);
  letter-spacing: -0.015em;
  margin-bottom: 56px;
  max-width: 22ch;
  line-height: 1.06;
}

/* ── Hero ─────────────────────────────────────────────────────── */
.hero {
  min-height: auto;
  padding: calc(var(--pad-y) + 40px) 0 clamp(56px, 7vw, 96px);
  display: flex; align-items: center;
  position: relative;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 25%, var(--line-2) 75%, transparent);
}

.hero__inner {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: 64px;
  align-items: center;
}
.hero__main { grid-column: 1; grid-row: 1; min-width: 0; }
.hero__portrait { grid-column: 2; grid-row: 1; min-width: 0; }
.hero .hero__signature { grid-column: 1 / -1; grid-row: 2; }

/* ── Portrait module ──────────────────────────────────────── */
.hero__portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}
.portrait__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a0b0e;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(255,255,255,0.02);
  isolation: isolate;
}
.portrait__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  transition: transform var(--t-slow) var(--ease);
}
.hero__portrait:hover .portrait__frame img {
  transform: scale(1.02);
}
.portrait__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,7,10,0) 50%, rgba(6,7,10,0.55) 100%),
    linear-gradient(180deg, rgba(60,90,160,0.10) 0%, transparent 35%),
    radial-gradient(120% 80% at 50% 0%, transparent 60%, rgba(6,7,10,0.5) 100%);
  mix-blend-mode: normal;
}
.portrait__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--line-hot);
  pointer-events: none;
  opacity: 0.85;
}
.portrait__corner--tl { top: 10px;    left: 10px;    border-right: 0; border-bottom: 0; }
.portrait__corner--tr { top: 10px;    right: 10px;   border-left: 0;  border-bottom: 0; }
.portrait__corner--bl { bottom: 10px; left: 10px;    border-right: 0; border-top: 0; }
.portrait__corner--br { bottom: 10px; right: 10px;   border-left: 0;  border-top: 0; }

.portrait__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.portrait__linkedin {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: inline-block;
  line-height: 0;
  border-radius: 50%;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.6);
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  z-index: 3;
}
.portrait__linkedin img {
  width: 44px; height: 44px;
  display: block;
  border-radius: 50%;
}
.portrait__linkedin:hover {
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 32px -8px rgba(20, 80, 180, 0.55);
}

@media (max-width: 720px) {
  .portrait__linkedin { right: 12px; bottom: 12px; }
  .portrait__linkedin img { width: 36px; height: 36px; }
}
.portrait__label {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.portrait__role { text-align: right; }

.hero__name {
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 8px 0 28px;
  background: linear-gradient(180deg, #ffffff 0%, #c0c5d0 75%, #8a8f99 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.hero__tagline {
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.002em;
  margin: 0 0 22px;
  max-width: 56ch;
  background: linear-gradient(
    90deg,
    #f5b487 0%,
    #f297c8 26%,
    #c592eb 52%,
    #8aaee8 78%,
    #7cc4d6 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__tagline br { display: block; }

.hero__lede {
  max-width: 56ch;
  font-size: clamp(20px, 1.9vw, 26px);
  color: #ffffff;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: 0.002em;
  margin: 0 0 56px;
}

.hero__signature {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.hero__signature em { font-style: normal; color: var(--ink-2); letter-spacing: 0.16em; }

/* ── CTA Buttons ──────────────────────────────────────────────── */
.cta-row {
  display: flex; flex-wrap: wrap; gap: 14px;
}
.cta-row--center { justify-content: center; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
  transition: color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  isolation: isolate;
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t-med) var(--ease); }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform var(--t-slow) var(--ease);
  z-index: -1;
}
.btn:hover {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(
    90deg,
    rgba(245, 180, 135, 0.13) 0%,
    rgba(242, 151, 200, 0.13) 26%,
    rgba(197, 146, 235, 0.13) 52%,
    rgba(138, 174, 232, 0.13) 78%,
    rgba(124, 196, 214, 0.13) 100%
  );
  box-shadow:
    inset 0 0 0 1px rgba(242, 151, 200, 0.28),
    0 8px 22px -10px rgba(197, 146, 235, 0.22);
}
.btn:hover svg { transform: translateX(4px); }
.btn:hover::before { transform: translateX(100%); }

.btn--primary {
  background: #f2f4f7;
  color: #0a0b0e;
  border-color: #f2f4f7;
}
.btn--primary:hover {
  background: linear-gradient(
    90deg,
    #fad6b9 0%,
    #f8c2db 26%,
    #dabcef 52%,
    #b4c8ee 78%,
    #b5dbe3 100%
  );
  border-color: transparent;
  color: #0a0b0e;
  box-shadow:
    0 10px 28px -12px rgba(197, 146, 235, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
}

/* ── Ecosystem cards ──────────────────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  position: relative;
  padding: 36px 32px 34px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)) padding-box,
    linear-gradient(rgba(8,9,12,0.65), rgba(8,9,12,0.65)) padding-box,
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) border-box;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  isolation: isolate;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -14px rgba(197, 146, 235, 0.35);
}
.card__edge {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0; transform: scaleX(0.3);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.card:hover .card__edge { opacity: 0.7; transform: scaleX(1); }

.card__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.card__idx {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--ink-3);
}
.card__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.card__title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.card__body {
  font-size: 18px;
  color: var(--ink-3);
  line-height: 1.6;
  margin: 0 0 14px;
  min-height: 3.6em;
}
.card__caption {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-4);
  line-height: 1.55;
  margin: 0 0 24px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-2);
}
.card__caption em {
  font-style: italic;
  color: var(--ink-3);
}
.card__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ink);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-2);
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.card__cta:hover { border-color: var(--accent); gap: 14px; }

/* Priority card — slightly elevated, accent edge always visible */
.card--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)) padding-box,
    linear-gradient(rgba(10,12,16,0.7), rgba(10,12,16,0.7)) padding-box,
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) border-box;
}
.card--primary .card__tag { color: var(--ink-2); border-color: var(--line-2); }
.card--primary .card__edge {
  opacity: 0.45;
  transform: scaleX(1);
}
.card--primary:hover .card__edge { opacity: 0.9; }

/* ── Contact ──────────────────────────────────────────────────── */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.contact__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(10, 12, 16, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  isolation: isolate;
}

.contact__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.field--full { width: 100%; }

.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.field__req { color: var(--accent-warm); font-weight: 800; letter-spacing: 0; }
.field__opt {
  color: var(--ink-5);
  text-transform: lowercase;
  letter-spacing: 0.1em;
  font-style: italic;
}

/* Consent checkbox */
.consent {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}
.consent input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.consent__mark {
  width: 20px; height: 20px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(rgba(255,255,255,0.025), rgba(255,255,255,0.025)) padding-box,
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) border-box;
  display: inline-grid;
  place-items: center;
  color: transparent;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
  flex-shrink: 0;
  margin-top: 1px;
}
.consent__mark svg { width: 14px; height: 14px; }
.consent:hover .consent__mark { box-shadow: 0 0 0 2px rgba(197, 146, 235, 0.18); }
.consent input:focus-visible ~ .consent__mark {
  box-shadow: 0 0 0 3px rgba(197, 146, 235, 0.22);
}
.consent input:checked ~ .consent__mark {
  background:
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) padding-box,
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) border-box;
  color: #0a0b0e;
}
.consent input:invalid:not(:placeholder-shown) ~ .consent__mark,
.contact__form.is-submitted .consent input:invalid ~ .consent__mark {
  border-color: rgba(220, 130, 120, 0.55);
}
.consent__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.consent__text a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: border-color var(--t-fast) var(--ease);
}
.consent__text a:hover { border-bottom-color: var(--accent); }
.consent__text .field__req { display: inline; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15px;
  color: #0a0b0e;
  caret-color: #0a0b0e;
  border: 1px solid rgba(10,12,16,0.18);
  border-radius: var(--r-sm);
  background: #ffffff;
  padding: 13px 14px;
  outline: none;
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.55;
  font-family: var(--font-sans);
}
.field select {
  cursor: pointer;
  padding-right: 40px;
}
.field__chev {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 16px; height: 16px;
  color: rgba(10,12,16,0.6);
  pointer-events: none;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(10,12,16,0.45);
  font-weight: 400;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #ffffff;
  border-color: rgba(10,12,16,0.55);
  box-shadow: 0 0 0 3px rgba(197, 146, 235, 0.28);
}

.field input:invalid:not(:placeholder-shown),
.field textarea:invalid:not(:placeholder-shown) {
  background: #ffffff;
  border-color: rgba(190, 90, 80, 0.7);
}

.contact__honey {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  opacity: 0;
}

.contact__submit-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.contact__submit { min-width: 220px; justify-content: center; }
.contact__submit[disabled] { opacity: 0.55; cursor: not-allowed; }
.contact__note {
  margin: 0;
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.contact__status {
  font-size: 15px;
  min-height: 1.2em;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.contact__status.is-ok { color: #a8e0bc; }
.contact__status.is-err { color: #e6a89e; }

/* Direct channels panel */
.contact__direct {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.meta-row--sub { margin-bottom: 0; }
.contact__direct-title {
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0;
  line-height: 1.15;
  color: var(--ink);
  max-width: 18ch;
}

.contact__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--line);
}
.contact__list-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.contact__list-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 3px;
}
.contact__list-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 300;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}
.contact__list-link + .contact__list-link { margin-top: 6px; }
.contact__list-link svg {
  width: 14px; height: 14px;
  color: var(--ink-3);
  transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.contact__list-link:hover {
  border-bottom-color: var(--line-hot);
  gap: 10px;
}
.contact__list-link:hover svg {
  color: var(--ink);
  transform: translate(2px, -2px);
}
.contact__list-text {
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1.55;
  max-width: 36ch;
}

.field select option {
  background: #ffffff;
  color: #0a0b0e;
}

.ecosystem__more {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

/* ── Page header (sub-pages) ──────────────────────────────────── */
.page-hero {
  padding: calc(var(--pad-y) + 32px) 0 clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--line);
  position: relative;
}
.page-hero__inner { max-width: 980px; }
.page-hero h1 {
  font-size: clamp(40px, 6vw, 92px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 12px 0 22px;
  background: linear-gradient(180deg, #ffffff 0%, #b4bac4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.page-hero__tagline {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--ink);
  font-weight: 300;
  line-height: 1.35;
  margin: 0 0 22px;
  max-width: 38ch;
}
.page-hero__lede {
  color: var(--ink-2);
  max-width: 60ch;
  font-size: 19px;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 0 36px;
}

/* Long-form prose (privacy, etc.) */
.prose { max-width: 720px; }
.prose h2 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 48px 0 14px;
  color: var(--ink);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  color: var(--ink-2);
  line-height: 1.7;
  font-size: 18px;
  margin: 0 0 18px;
}
.prose ul {
  margin: 0 0 24px;
  padding-left: 22px;
  list-style: disc;
}
.prose ul li {
  color: var(--ink-2);
  line-height: 1.7;
  margin: 6px 0;
}
.prose ul li::marker { color: var(--ink-4); }
.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 1px;
  transition: border-color var(--t-fast) var(--ease);
}
.prose a:hover { border-bottom-color: var(--accent); }
.prose strong { color: var(--ink); font-weight: 800; }
.prose__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}

/* Sibling pager (next/prev between RAI modules) */
.sibling-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}
.sibling-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 26px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  color: var(--ink-2);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)) padding-box,
    linear-gradient(rgba(8,9,12,0.6), rgba(8,9,12,0.6)) padding-box,
    linear-gradient(
      135deg,
      #f5b487 0%,
      #f297c8 26%,
      #c592eb 52%,
      #8aaee8 78%,
      #7cc4d6 100%
    ) border-box;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.sibling-nav a:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(197, 146, 235, 0.4);
}
.sibling-nav__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.sibling-nav__title { font-weight: 800; font-size: 20px; letter-spacing: -0.005em; }
.sibling-nav__title small {
  font-weight: 300;
  font-size: 14px;
  color: var(--ink-3);
  display: block;
  margin-top: 6px;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-sans);
}

/* Bulleted feature list */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
}
.feature-list li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.feature-list li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 28px; }
.feature-list li:nth-child(even) { padding-left: 28px; }
.feature-list .fl__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-4);
  padding-top: 3px;
}
.feature-list h4 {
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.005em;
}
.feature-list p {
  margin: 0;
  color: var(--ink-3);
  font-size: 19px;
  line-height: 1.6;
}

@media (max-width: 720px) {
  .feature-list { grid-template-columns: 1fr; }
  .feature-list li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .feature-list li:nth-child(even) { padding-left: 0; }
  .sibling-nav { grid-template-columns: 1fr; }
}

/* ── Thesis ───────────────────────────────────────────────────── */
.thesis__body {
  max-width: 28ch;
  font-size: clamp(28px, 3.6vw, 46px);
  font-weight: 300;
  line-height: 1.18;
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.thesis__line { margin: 0 0 14px; }
.thesis__line--em {
  color: var(--ink);
  max-width: 26ch;
  margin-top: 28px;
}

/* ── Focus modules ────────────────────────────────────────────── */
.focus__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.focus__mod {
  background: rgba(7,8,11,0.85);
  padding: 36px 30px 32px;
  position: relative;
  transition: background var(--t-med) var(--ease);
}
.focus__mod:hover {
  background: rgba(13,15,20,0.92);
}
.focus__mod::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease);
}
.focus__mod:hover::after { opacity: 0.6; }
.focus__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 18px;
}
.focus__mod h4 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0 0 12px;
  color: var(--ink);
}
.focus__mod p {
  font-size: 17px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.6;
  max-width: 32ch;
}

/* ── Work list ────────────────────────────────────────────────── */
.work__list { border-top: 1px solid var(--line); }
.work__item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 28px 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: padding-left var(--t-med) var(--ease);
}
.work__item::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 0; height: 1px; background: var(--accent);
  transition: width var(--t-med) var(--ease);
}
.work__item:hover { padding-left: 28px; }
.work__item:hover::before { width: 14px; }
.work__idx {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--ink-4);
}
.work__body h4 {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 6px;
  color: var(--ink);
}
.work__body p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-3);
  max-width: 64ch;
}
.work__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 2px;
  white-space: nowrap;
}

/* ── Closing ──────────────────────────────────────────────────── */
.closing { text-align: center; }
.closing .meta-row { justify-content: center; display: flex; }
.closing__inner { display: flex; flex-direction: column; align-items: center; }
.closing__title {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 22px;
  background: linear-gradient(180deg, #ffffff 0%, #aab0bb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.closing__lede {
  color: var(--ink-3);
  max-width: 38ch;
  margin: 0 0 44px;
  font-size: 16px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.foot {
  border-top: 1px solid var(--line);
  padding: 56px 0 64px;
  font-size: 12px;
  color: var(--ink-4);
}
.foot__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 24px;
}
.foot__col p { margin: 4px 0 0; }
.foot__mark {
  display: inline-block;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: var(--ink-2);
  font-size: 13px;
}
.foot__logo {
  height: 52px;
  width: auto;
  display: block;
  margin-bottom: 12px;
  opacity: 0.92;
  filter: drop-shadow(0 0 14px rgba(180, 160, 220, 0.16));
}
.foot__brand {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 4px;
}
.foot__brand .foot__logo { margin-bottom: 0; }
.foot__sites {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: lowercase;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.foot__sites a {
  color: var(--ink-3);
  transition: color var(--t-fast) var(--ease);
}
.foot__sites a:hover { color: var(--accent); }
.foot__col--links {
  display: flex; gap: 20px; justify-content: center;
}
.foot__col--links a {
  color: var(--ink-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 11px;
  transition: color var(--t-fast) var(--ease);
}
.foot__col--links a:hover { color: var(--ink); }
.foot__col--meta {
  text-align: right;
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ink-4);
}

/* ── Reveal animation ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal.delay-1 { transition-delay: 80ms; }
.reveal.delay-2 { transition-delay: 160ms; }
.reveal.delay-3 { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .bg-glow { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ──────────────────────────────────────────────────────────────
   ECOSYSTEM LAYER — Intelligence / Infrastructure / Telemetry
   Restrained additions for the v2 repositioning.
   ──────────────────────────────────────────────────────────── */

/* ── Section eyebrow with live signal pulse ─────────────────── */
.meta-row--live::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8fb7e6;
  box-shadow: 0 0 0 0 rgba(143, 183, 230, 0.6);
  animation: live-pulse 2.4s var(--ease) infinite;
  margin-right: 2px;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(143, 183, 230, 0.55); opacity: 1; }
  70%  { box-shadow: 0 0 0 10px rgba(143, 183, 230, 0); opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 rgba(143, 183, 230, 0); opacity: 1; }
}

/* ── Signals From The Field (intelligence feed) ─────────────── */
.signals {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  overflow: hidden;
  isolation: isolate;
}
.signals::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,183,230,0.45) 35%, rgba(240,198,154,0.35) 65%, transparent);
  opacity: 0.6;
  z-index: 2;
}
.signals::after {
  content: "";
  position: absolute; left: 0; right: 0; top: -40%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(143,183,230,0.05), transparent);
  pointer-events: none;
  animation: signals-scan 9s linear infinite;
  z-index: 1;
}
@keyframes signals-scan {
  0%   { transform: translateY(0); }
  100% { transform: translateY(380%); }
}

.signals__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: rgba(255,255,255,0.012);
}
.signals__head-left { display: inline-flex; align-items: center; gap: 12px; }
.signals__head-right { display: inline-flex; align-items: center; gap: 10px; }
.signals__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8fb7e6;
  box-shadow: 0 0 8px rgba(143, 183, 230, 0.6);
  animation: live-pulse 2.4s var(--ease) infinite;
}
.signals__ts { color: var(--ink-3); letter-spacing: 0.16em; }

.signals__feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--line);
}
@media (max-width: 720px) {
  .signals__feed { grid-template-columns: 1fr; }
}
.signal {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 18px;
  padding: 22px 22px;
  background: rgba(7,8,11,0.6);
  transition: background var(--t-med) var(--ease);
}
.signal:hover { background: rgba(13,15,20,0.85); }
.signal__id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 4px;
}
.signal__id em {
  font-style: normal;
  display: block;
  margin-top: 4px;
  color: var(--accent-cool);
  letter-spacing: 0.2em;
}
.signal__body {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.45;
  letter-spacing: -0.005em;
}
.signal__tag {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ── Topology graph (focus areas as connected system) ───────── */
.topo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 56px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.004));
  overflow: hidden;
}
.topo__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}
.topo__svg path {
  fill: none;
  stroke: rgba(143, 183, 230, 0.22);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  stroke-linecap: round;
}
.topo__svg path.topo__edge--active {
  stroke: rgba(223, 230, 241, 0.42);
  stroke-dasharray: none;
  filter: drop-shadow(0 0 6px rgba(143, 183, 230, 0.32));
}
.topo__svg .topo__pulse {
  fill: rgba(223, 230, 241, 0.9);
}
.topo__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  z-index: 1;
}
@media (max-width: 960px) { .topo__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .topo__grid { grid-template-columns: 1fr; } }
.topo__node {
  position: relative;
  background: rgba(7,8,11,0.7);
  padding: 26px 22px 24px;
  border: 1px solid transparent;
  border-radius: 6px;
  margin: 6px;
  transition: background var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease),
              transform var(--t-med) var(--ease);
}
.topo__node::before {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 8px; height: 8px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.5);
  box-shadow: 0 0 8px rgba(143, 183, 230, 0.4);
}
.topo__node:hover {
  background: rgba(13,15,20,0.92);
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.topo__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-4);
  display: block;
  margin-bottom: 16px;
}
.topo__node h4 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--ink);
}
.topo__node p {
  font-size: 16px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

/* ── Global Physical AI map ────────────────────────────────── */
.geomap {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  overflow: hidden;
  isolation: isolate;
}
.geomap__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.geomap__head-meta { display: inline-flex; gap: 18px; align-items: center; }
.geomap__head-meta strong { color: var(--ink-2); font-family: var(--font-sans); letter-spacing: 0.2em; font-weight: 800; }
.geomap__viewport {
  position: relative;
  aspect-ratio: 16 / 8;
  width: 100%;
  overflow: hidden;
}
.geomap__svg {
  width: 100%; height: 100%; display: block;
}
.geomap__svg .map-land {
  fill: rgba(255,255,255,0.045);
  stroke: rgba(255,255,255,0.10);
  stroke-width: 0.5;
}
.geomap__svg .map-grid {
  stroke: rgba(255,255,255,0.04);
  stroke-width: 0.5;
  fill: none;
}
.geomap__node {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.geomap__node-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(223, 230, 241, 0.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 14px rgba(143, 183, 230, 0.45);
  position: relative;
  z-index: 2;
}
.geomap__node::before {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(143, 183, 230, 0.55);
  animation: geo-ring 2.6s var(--ease) infinite;
  animation-delay: var(--geo-delay, 0s);
  z-index: 1;
}
.geomap__node::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(143, 183, 230, 0.4);
  animation: geo-ring 2.6s var(--ease) infinite;
  animation-delay: calc(var(--geo-delay, 0s) + 1.3s);
  z-index: 1;
}
@keyframes geo-ring {
  0%   { width: 10px; height: 10px; opacity: 0.9; }
  100% { width: 56px; height: 56px; opacity: 0; }
}
.geomap__node--warm .geomap__node-dot {
  background: rgba(240, 198, 154, 0.95);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 14px rgba(240, 198, 154, 0.45);
}
.geomap__node--warm::before,
.geomap__node--warm::after { border-color: rgba(240, 198, 154, 0.55); }

.geomap__label {
  position: absolute;
  bottom: 14px; right: 18px;
  display: inline-flex;
  align-items: center; gap: 10px;
  background: rgba(7,8,11,0.7);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.geomap__legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 22px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.geomap__legend span { display: inline-flex; align-items: center; gap: 8px; }
.geomap__legend i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.9);
  box-shadow: 0 0 6px rgba(143,183,230,0.5);
}
.geomap__legend i.is-warm {
  background: rgba(240, 198, 154, 0.9);
  box-shadow: 0 0 6px rgba(240, 198, 154, 0.5);
}
.geomap__legend i.is-cool { background: rgba(223, 230, 241, 0.9); box-shadow: 0 0 6px rgba(223,230,241,0.4); }

/* ── Systems flow diagram (ecosystem) ──────────────────────── */
.flow {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(36px, 5vw, 64px) clamp(28px, 4vw, 56px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  overflow: hidden;
}
.flow__stage {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  position: relative;
  z-index: 2;
}
@media (max-width: 720px) { .flow__stage { grid-template-columns: 1fr; } }
.flow__node {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 24px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.005)) padding-box,
    linear-gradient(rgba(8,9,12,0.78), rgba(8,9,12,0.78)) padding-box,
    linear-gradient(135deg, #f5b487 0%, #f297c8 26%, #c592eb 52%, #8aaee8 78%, #7cc4d6 100%) border-box;
  position: relative;
  isolation: isolate;
}
.flow__node-idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.flow__node h4 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
}
.flow__node p {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-3);
  line-height: 1.55;
}
.flow__node-out {
  display: block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.flow__node-out em { font-style: normal; color: var(--ink-2); letter-spacing: 0.18em; }

.flow__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.flow__svg path {
  fill: none;
  stroke: rgba(143, 183, 230, 0.28);
  stroke-width: 1;
  stroke-dasharray: 4 5;
}
.flow__svg .flow__loop {
  stroke: rgba(240, 198, 154, 0.22);
}
.flow__caption {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.flow__caption em { font-style: normal; color: var(--ink-2); letter-spacing: 0.18em; }

/* ── Infrastructure diagrams (RAI Swarms) ──────────────────── */
.infra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 960px) { .infra { grid-template-columns: 1fr; } }
.infra__card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.003));
  position: relative;
  overflow: hidden;
}
.infra__card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 14px;
}
.infra__card-head h4 {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0;
}
.infra__card-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.infra__diagram {
  width: 100%;
  aspect-ratio: 5 / 3;
  position: relative;
}
.infra__diagram svg { width: 100%; height: 100%; display: block; }
.infra__diagram .infra-stroke { stroke: rgba(223, 230, 241, 0.4); fill: none; stroke-width: 1; }
.infra__diagram .infra-stroke-dim { stroke: rgba(255,255,255,0.12); fill: none; stroke-width: 1; }
.infra__diagram .infra-fill { fill: rgba(7,8,11,0.9); }
.infra__diagram .infra-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  fill: var(--ink-3);
  text-transform: uppercase;
}
.infra__diagram .infra-text-dim { fill: var(--ink-4); }
.infra__diagram .infra-flow {
  stroke: rgba(143, 183, 230, 0.6);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 4;
  animation: infra-flow 6s linear infinite;
}
@keyframes infra-flow { to { stroke-dashoffset: -56; } }
.infra__diagram .infra-node {
  fill: rgba(7,8,11,0.95);
  stroke: rgba(223, 230, 241, 0.38);
  stroke-width: 1;
}
.infra__diagram .infra-pulse {
  fill: rgba(143, 183, 230, 0.95);
}
.infra__card-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.55;
}

/* ── Argument list / categorical claims (RAI Book) ─────────── */
.arguments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 720px) { .arguments { grid-template-columns: 1fr; } }
.arguments__item {
  position: relative;
  background: rgba(7,8,11,0.78);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background var(--t-med) var(--ease);
}
.arguments__item:hover { background: rgba(13,15,20,0.92); }
.arguments__item::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 26px; height: 1px;
  background: rgba(143, 183, 230, 0.5);
}
.arguments__idx {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.arguments__claim {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #c0c5d0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.arguments__gloss {
  font-size: 15px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

/* ── Doctrine map (concept architecture for RAI Book) ──────── */
.doctrine {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  padding: clamp(28px, 4vw, 48px);
  overflow: hidden;
}
.doctrine__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
.doctrine__svg path { fill: none; stroke: rgba(143, 183, 230, 0.22); stroke-width: 1; stroke-dasharray: 3 5; }
.doctrine__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 960px) { .doctrine__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .doctrine__grid { grid-template-columns: 1fr; } }
.doctrine__node {
  padding: 18px 16px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(7,8,11,0.8);
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.doctrine__node:hover { background: rgba(13,15,20,0.95); border-color: var(--line-2); }
.doctrine__node-id {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.doctrine__node-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.003em;
  color: var(--ink);
}
.doctrine__node-gloss {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
.doctrine__node--primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005)) padding-box,
    linear-gradient(rgba(10,12,16,0.85), rgba(10,12,16,0.85)) padding-box,
    linear-gradient(135deg, #f5b487 0%, #f297c8 26%, #c592eb 52%, #8aaee8 78%, #7cc4d6 100%) border-box;
  border: 1.5px solid transparent;
}
.doctrine__node--primary .doctrine__node-title { color: var(--ink); }

/* ── Signal taxonomy (RAI Trend Map) ───────────────────────── */
.taxonomy {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
@media (max-width: 960px) { .taxonomy { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .taxonomy { grid-template-columns: 1fr; } }
.taxonomy__cell {
  position: relative;
  background: rgba(7,8,11,0.8);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background var(--t-med) var(--ease);
}
.taxonomy__cell:hover { background: rgba(13,15,20,0.94); }
.taxonomy__cell::before {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.7);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.5);
  animation: live-pulse 3.2s var(--ease) infinite;
}
.taxonomy__cell:nth-child(odd)::before {
  background: rgba(240, 198, 154, 0.7);
  box-shadow: 0 0 6px rgba(240, 198, 154, 0.5);
  animation-delay: 1.1s;
}
.taxonomy__cell-id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.taxonomy__cell-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.003em;
  color: var(--ink);
  margin: 0;
}
.taxonomy__cell-gloss {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0;
  line-height: 1.55;
}

/* ── Strategic fit / out of scope (Contact) ────────────────── */
.fit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) { .fit-grid { grid-template-columns: 1fr; } }
.fit-col {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.003));
}
.fit-col__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fit-col__head h3 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.003em;
  margin: 0;
}
.fit-col__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-left: auto;
}
.fit-col ul { display: flex; flex-direction: column; gap: 10px; }
.fit-col li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.5;
}
.fit-col li::before {
  content: "";
  display: inline-block;
  width: 12px; height: 12px;
  margin-top: 5px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.fit-col--in li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3 3 7-7' stroke='%238fb7e6' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.fit-col--out li::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 4l8 8M12 4l-8 8' stroke='%23f0c69a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  opacity: 0.7;
}
.fit-col--out li { color: var(--ink-3); }

/* ── Privacy — topology dividers + meta enhancements ───────── */
.prose__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 44px 0 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.prose__divider::before,
.prose__divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
}
.prose__divider::before { width: 32px; }
.prose__divider::after { flex: 1; }
.prose__divider em {
  font-style: normal;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}

.prose--mono {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  position: relative;
}
.prose--mono::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,183,230,0.4), rgba(240,198,154,0.3), transparent);
}

/* ── Section utility — full-bleed module separators ────────── */
.module-sep {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  margin: 0;
}

/* ── Hero supplemental bar (command layer line) ────────────── */
.hero__bar {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  margin-bottom: 16px;
  background: rgba(7,8,11,0.6);
}
.hero__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #8fb7e6;
  box-shadow: 0 0 8px rgba(143, 183, 230, 0.6);
  animation: live-pulse 2.4s var(--ease) infinite;
}

/* ──────────────────────────────────────────────────────────────
   OBSERVATORY FEED — phase 07
   Portrait as analyzed surveillance feed; signal-buffer
   overload; visual density stack on hotspots.
   ──────────────────────────────────────────────────────────── */

/* (portrait filter intentionally minimal — clean photograph) */

/* Subtle cool tint over the image */
.portrait__tint {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(143,183,230,0.045) 0%, rgba(7,8,11,0.0) 35%, rgba(143,183,230,0.04) 100%),
    radial-gradient(circle at 50% 30%, rgba(143,183,230,0.06), transparent 55%);
  mix-blend-mode: screen;
}

/* Stronger, more visible scanlines for the surveillance-feed look */
.portrait__scanlines {
  background: repeating-linear-gradient(180deg, rgba(143,183,230,0.045) 0 1px, transparent 1px 3px) !important;
  opacity: 0.85 !important;
}

/* Face-tracking bracket — analytical subject lock */
.portrait__track {
  position: absolute;
  left: 26%; top: 16%;
  width: 48%; height: 26%;
  z-index: 5;
  pointer-events: none;
}
.portrait__track .track__corner {
  position: absolute;
  width: 11px; height: 11px;
  border: 1.5px solid rgba(143, 183, 230, 0.85);
}
.portrait__track .track__corner--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.portrait__track .track__corner--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.portrait__track .track__corner--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.portrait__track .track__corner--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.portrait__track .track__label {
  position: absolute;
  top: -22px; left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(143, 183, 230, 0.95);
  background: rgba(7,8,11,0.82);
  border: 1px solid rgba(143, 183, 230, 0.45);
  padding: 2px 7px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.portrait__track .track__label i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 1);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.7);
  animation: live-pulse 2s var(--ease) infinite;
}
.portrait__track .track__bio {
  position: absolute;
  bottom: -18px; right: 0;
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.78);
  border: 1px solid var(--line);
  padding: 2px 6px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}

/* Active vertical scan band sweeping across the portrait */
.portrait__scan-band {
  position: absolute;
  left: 0; right: 0;
  height: 28px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(143, 183, 230, 0.18) 50%, transparent);
  mix-blend-mode: screen;
  animation: scan-vert 7s linear infinite;
}
@keyframes scan-vert {
  0%   { top: -32px; opacity: 0.0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { top: 100%; opacity: 0.0; }
}

/* Signal buffer overflow panel — system-at-capacity indicator */
.signals__buffer {
  position: absolute;
  top: 56px;
  right: 18px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(20, 8, 4, 0.86);
  border: 1px solid rgba(240, 168, 168, 0.35);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  min-width: 184px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 0 24px -10px rgba(240, 168, 168, 0.4);
}
.signals__buffer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(240, 168, 168, 0.95);
}
.signals__buffer-head strong {
  font-family: var(--font-sans);
  color: rgba(255, 220, 215, 0.95);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.signals__buffer-head i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 1);
  box-shadow: 0 0 8px rgba(240, 168, 168, 0.6);
  animation: live-pulse 1.6s var(--ease) infinite;
  margin-right: 6px;
  vertical-align: middle;
}
.signals__buffer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-3);
}
.signals__buffer-row strong {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.2em;
}
.signals__buffer-row em {
  font-style: normal;
  color: var(--accent-warm);
}
.signals__buffer-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 1px;
  overflow: hidden;
}
.signals__buffer-bar-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(240,198,154,0.8), rgba(240,168,168,0.95));
  box-shadow: 0 0 8px rgba(240,168,168,0.4);
}
@media (max-width: 720px) {
  .signals__buffer {
    position: static;
    min-width: 0;
    margin-top: 12px;
    box-shadow: none;
  }
}

/* Container for signals section needs relative positioning */
.signals-section { position: relative; }
.signals { position: relative; }

/* Stacked overlap density — overloaded cluster dots */
.geomap__stack {
  position: absolute;
  z-index: 2;
  width: 28px; height: 28px;
  pointer-events: none;
}
.geomap__stack-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(240, 198, 154, 0.95);
  box-shadow: 0 0 8px rgba(240, 198, 154, 0.45);
  border: 1px solid rgba(7,8,11,0.4);
}
.geomap__stack-dot:nth-child(1) { left: 2px;  top: 4px;  }
.geomap__stack-dot:nth-child(2) { left: 9px;  top: 0;    background: rgba(143, 183, 230, 0.95); box-shadow: 0 0 8px rgba(143, 183, 230, 0.45); }
.geomap__stack-dot:nth-child(3) { left: 16px; top: 6px;  background: rgba(197, 146, 235, 0.95); box-shadow: 0 0 8px rgba(197, 146, 235, 0.45); }
.geomap__stack-dot:nth-child(4) { left: 6px;  top: 12px; }
.geomap__stack-dot:nth-child(5) { left: 14px; top: 14px; background: rgba(143, 183, 230, 0.9); box-shadow: 0 0 8px rgba(143, 183, 230, 0.4); }
.geomap__stack-dot:nth-child(6) { left: 20px; top: 16px; background: rgba(240, 168, 168, 0.95); box-shadow: 0 0 10px rgba(240, 168, 168, 0.5); }

/* ──────────────────────────────────────────────────────────────
   FIELD TENSION — phase 06
   Instrument-rack chassis, overload zones, corridor pressure
   bars, structural fracture markers.
   ──────────────────────────────────────────────────────────── */

/* Portrait chassis — top/bottom strips that frame the whole module
   as a rack-mounted observatory instrument. */
.portrait__chassis-head,
.portrait__chassis-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.78);
  border: 1px solid var(--line);
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.portrait__chassis-head { margin-bottom: 10px; }
.portrait__chassis-foot {
  margin-top: 10px;
  padding: 8px 14px 8px 14px;
  gap: 16px;
}
.portrait__chassis-head strong,
.portrait__chassis-foot strong {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.portrait__chassis-head i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.95);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.55);
  animation: live-pulse 2.6s var(--ease) infinite;
  margin-right: 8px;
  vertical-align: middle;
}
.portrait__chassis-head span:last-child {
  color: var(--accent-cool);
}
.portrait__chassis-foot {
  align-items: center;
}
.portrait__chassis-foot-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.portrait__chassis-foot-label i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.95);
  box-shadow: 0 0 5px rgba(143, 183, 230, 0.5);
  animation: live-pulse 2.6s var(--ease) infinite;
}

/* Mini sparkline waveform — live detection activity */
.portrait__waveform {
  flex: 1;
  height: 20px;
  display: block;
  overflow: visible;
}
.portrait__waveform polyline {
  fill: none;
  stroke: rgba(143, 183, 230, 0.85);
  stroke-width: 1.2;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(143, 183, 230, 0.35));
}
.portrait__waveform .wave-marker {
  fill: rgba(143, 183, 230, 0.95);
}
.portrait__waveform .wave-grid {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 0.5;
}

/* Mount brackets at chassis edges */
.portrait__chassis-head::before,
.portrait__chassis-head::after,
.portrait__chassis-foot::before,
.portrait__chassis-foot::after {
  content: "";
  position: absolute;
  width: 5px; height: 5px;
  border: 1px solid var(--line-2);
  background: rgba(7,8,11,0.95);
  border-radius: 50%;
}
.portrait__chassis-head { position: relative; }
.portrait__chassis-foot { position: relative; }
.portrait__chassis-head::before { left: 6px; top: 50%; transform: translateY(-50%); }
.portrait__chassis-head::after  { right: 6px; top: 50%; transform: translateY(-50%); }
.portrait__chassis-foot::before { left: 6px; top: 50%; transform: translateY(-50%); }
.portrait__chassis-foot::after  { right: 6px; top: 50%; transform: translateY(-50%); }
.portrait__chassis-head { padding-left: 22px; padding-right: 22px; }
.portrait__chassis-foot { padding-left: 22px; padding-right: 22px; }

/* Signal overload zone — visible concentration on geomaps */
.geomap__overload {
  position: absolute;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 5px;
  pointer-events: none;
}
.geomap__overload-warning {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  background: rgba(20, 8, 4, 0.88);
  border: 1px solid rgba(240, 168, 168, 0.5);
  padding: 5px 11px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(255, 220, 215, 0.85);
  box-shadow: 0 0 24px -8px rgba(240, 168, 168, 0.35);
}
.geomap__overload-warning strong {
  color: rgba(240, 168, 168, 1);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.geomap__overload-warning i {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 1);
  box-shadow: 0 0 10px rgba(240, 168, 168, 0.7);
  animation: live-pulse 1.6s var(--ease) infinite;
}
.geomap__overload-sub {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.82);
  border: 1px solid var(--line);
  padding: 3px 9px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.geomap__overload-sub em { color: var(--accent-warm); font-style: normal; }
.geomap__overload-sub-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Concentric warning rings around overload zone */
.geomap__overload-rings {
  position: absolute;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid rgba(240, 168, 168, 0.42);
  pointer-events: none;
  animation: stress-pulse 3.2s var(--ease) infinite;
}
.geomap__overload-rings::before,
.geomap__overload-rings::after {
  content: "";
  position: absolute; inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(240, 168, 168, 0.22);
  animation: stress-pulse 3.2s var(--ease) infinite 1.4s;
}
.geomap__overload-rings::after { inset: -22px; animation-delay: 2.6s; }

/* Corridor pressure bar — mini chart in geomap footer */
.corridor-pressure {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: rgba(255,255,255,0.012);
}
@media (max-width: 720px) { .corridor-pressure { grid-template-columns: 1fr 1fr; gap: 14px; } }
.corridor-pressure__cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.corridor-pressure__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink-4);
}
.corridor-pressure__label strong {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.2em;
}
.corridor-pressure__label em {
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: 0.18em;
}
.corridor-pressure__bar {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 1px;
  overflow: hidden;
}
.corridor-pressure__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(143,183,230,0.75), rgba(143,183,230,0.95));
  border-radius: 1px;
}
.corridor-pressure__fill--warm {
  background: linear-gradient(90deg, rgba(240,198,154,0.75), rgba(240,198,154,0.95));
}
.corridor-pressure__fill--critical {
  background: linear-gradient(90deg, rgba(240,198,154,0.8), rgba(240,168,168,0.95));
  box-shadow: 0 0 8px rgba(240,168,168,0.4);
}
.corridor-pressure__fill--cool {
  background: linear-gradient(90deg, rgba(143,183,230,0.65), rgba(143,183,230,0.85));
}
.corridor-pressure__cell em.critical { color: var(--accent-warm); }

/* Topology seam-break annotation — visible structural fracture */
.topo__fracture {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-warm);
  background: rgba(20, 8, 4, 0.85);
  border: 1px solid rgba(240, 168, 168, 0.42);
  padding: 4px 10px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.topo__fracture i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 1);
  box-shadow: 0 0 6px rgba(240, 168, 168, 0.6);
  animation: live-pulse 2s var(--ease) infinite;
}
.topo__fracture strong {
  color: rgba(255, 220, 215, 0.9);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.topo__fracture--lower-right { bottom: 22px; right: 8%; }
.topo__fracture--middle { top: 48%; right: 4%; }

/* Stress halo embedded INSIDE topology nodes */
.topo__node--loaded .topo__node-halo {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(240, 168, 168, 0.32);
  border-radius: 8px;
  pointer-events: none;
  animation: stress-pulse 3.4s var(--ease) infinite;
}
.topo__node--loaded .topo__node-halo::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px solid rgba(240, 168, 168, 0.18);
  border-radius: 12px;
  animation: stress-pulse 3.4s var(--ease) infinite 1.7s;
}

/* Density imbalance overlay — corner concentration */
.density-overlay {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(40px);
  z-index: 0;
}
.density-overlay--warm {
  background: radial-gradient(circle, rgba(240,168,168,0.18) 0%, transparent 65%);
}

/* ──────────────────────────────────────────────────────────────
   FIELD PRESSURE — phase 05
   Stress indicators, fractured topology, asymmetric loads,
   portrait deeper observatory embedding.
   ──────────────────────────────────────────────────────────── */

/* Pressure / overload tag — used on geomaps and dense surfaces */
.pressure-tag {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-warm);
  background: rgba(7,8,11,0.82);
  border: 1px solid rgba(240, 168, 168, 0.32);
  padding: 4px 9px;
  border-radius: 2px;
  z-index: 4;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: none;
}
.pressure-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 0.95);
  box-shadow: 0 0 6px rgba(240, 168, 168, 0.55);
  animation: live-pulse 2.2s var(--ease) infinite;
}
.pressure-tag em {
  font-style: normal;
  color: var(--ink-2);
  letter-spacing: 0.2em;
}
.pressure-tag--cool {
  color: var(--accent-cool);
  border-color: rgba(143, 183, 230, 0.36);
}
.pressure-tag--cool::before {
  background: rgba(143, 183, 230, 0.95);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.55);
}

/* Stress halo — wraps around an element to suggest load */
.stress-halo {
  position: absolute;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(240, 168, 168, 0.42);
  pointer-events: none;
  animation: stress-pulse 3.4s var(--ease) infinite;
}
.stress-halo::after {
  content: "";
  position: absolute; inset: -8px;
  border: 1px solid rgba(240, 168, 168, 0.22);
  border-radius: 50%;
  animation: stress-pulse 3.4s var(--ease) infinite 1.7s;
}
@keyframes stress-pulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(1.18); }
}

/* Asymmetric topology nodes — physical shift + stress states */
.topo__node--up    { transform: translateY(-14px); }
.topo__node--down  { transform: translateY(16px); }
.topo__node--left  { transform: translateX(-8px); }
.topo__node--right { transform: translateX(10px); }
.topo__node--loaded {
  background: linear-gradient(180deg, rgba(240,198,154,0.06), rgba(7,8,11,0.85)) !important;
  border-color: rgba(240, 168, 168, 0.32) !important;
}
.topo__node--loaded::after {
  content: "LOAD HIGH";
  position: absolute;
  top: -10px; right: 12px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: var(--accent-warm);
  background: rgba(7,8,11,0.92);
  border: 1px solid rgba(240, 168, 168, 0.32);
  padding: 2px 7px;
  border-radius: 2px;
}
.topo__node--seam::before {
  background: rgba(240, 168, 168, 0.6) !important;
  box-shadow: 0 0 8px rgba(240, 168, 168, 0.45) !important;
}

/* Broken/fractured edge variant for topology svg */
.topo__svg path.topo__edge--broken {
  stroke: rgba(240, 168, 168, 0.55);
  stroke-width: 1.2;
  stroke-dasharray: 2 6;
  filter: drop-shadow(0 0 5px rgba(240, 168, 168, 0.28));
}
.topo__svg path.topo__edge--strain {
  stroke: rgba(240, 198, 154, 0.5);
  stroke-width: 1.4;
  stroke-dasharray: 4 4;
}

/* Topology header pressure annotation (floats over the topo) */
.topo__pressure {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: rgba(7,8,11,0.75);
  border: 1px solid var(--line);
  padding: 5px 11px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
}
.topo__pressure strong {
  font-family: var(--font-sans);
  color: var(--accent-warm);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.topo__pressure i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 0.9);
  box-shadow: 0 0 6px rgba(240, 168, 168, 0.5);
  animation: live-pulse 2.2s var(--ease) infinite;
}

/* Geomap header load status */
.geomap__head-load {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding-left: 14px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-warm);
}
.geomap__head-load i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(240, 168, 168, 0.9);
  box-shadow: 0 0 6px rgba(240, 168, 168, 0.5);
  animation: live-pulse 2s var(--ease) infinite;
}
.geomap__head-load strong {
  font-family: var(--font-sans);
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 0.22em;
}

/* ── Portrait — deeper observatory integration ─────────────── */

/* Vertical side strip — instrument-style coordinate readout */
.portrait__side {
  position: absolute;
  right: 2px;
  top: 36px;
  bottom: 96px;
  width: 18px;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(7,8,11,0.72);
  border: 1px solid var(--line);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.portrait__side span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.portrait__side strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.24em;
}
.portrait__side i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.9);
  box-shadow: 0 0 5px rgba(143, 183, 230, 0.5);
  animation: live-pulse 2.6s var(--ease) infinite;
}
@media (max-width: 720px) {
  .portrait__side { display: none; }
}

/* Observation cone — subtle field-of-view gradient */
.portrait__cone {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle at 50% 30%, rgba(143,183,230,0.16) 0%, transparent 45%);
  mix-blend-mode: screen;
}

/* Telemetry strip — narrow data band above LinkedIn orb */
.portrait__telemetry-strip {
  position: absolute;
  bottom: 50px;
  left: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.78);
  border: 1px solid var(--line);
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  pointer-events: none;
}
.portrait__telemetry-strip strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.18em;
}
.portrait__telemetry-strip em {
  font-style: normal;
  color: var(--accent-cool);
  letter-spacing: 0.2em;
}

/* Additional micro-readouts (left + right mid) */
.portrait__micro {
  position: absolute;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.7);
  padding: 3px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.portrait__micro--mid-right { right: 28px; top: 44%; }
.portrait__micro--mid-left { left: 12px; top: 64%; }
.portrait__micro em { color: var(--accent-cool); font-style: normal; }
@media (max-width: 720px) {
  .portrait__micro { display: none; }
  .portrait__telemetry-strip { font-size: 8px; padding: 4px 8px; }
}

/* Stronger crosshair when deeper-embedded */
.portrait__crosshair { opacity: 0.6; }
.portrait__crosshair::before { background: rgba(143, 183, 230, 0.42); }
.portrait__crosshair::after { background: rgba(143, 183, 230, 0.42); }

/* ──────────────────────────────────────────────────────────────
   OPERATIONAL GRAVITY — phase 04
   Intelligence artifacts, field fragments, portrait readout,
   live detection markers, deployment-physics diagrams.
   ──────────────────────────────────────────────────────────── */

/* ── Field Fragments — accumulated tactical observations ───── */
.fragments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 14px;
}
@media (max-width: 960px) { .fragments { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fragments { grid-template-columns: 1fr; } }

.fragment {
  position: relative;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.004));
  border-radius: 3px;
  transition: transform 280ms var(--ease), border-color 280ms var(--ease);
  isolation: isolate;
  box-shadow: 0 14px 30px -22px rgba(0,0,0,0.7);
}
/* Subtle staggered rotation + offset — "accumulated" aesthetic */
.fragment:nth-child(6n+1) { transform: rotate(-0.35deg); }
.fragment:nth-child(6n+2) { transform: rotate(0.4deg)  translateY(-6px); }
.fragment:nth-child(6n+3) { transform: rotate(-0.15deg) translateY(8px); }
.fragment:nth-child(6n+4) { transform: rotate(0.25deg) translateY(-3px); }
.fragment:nth-child(6n+5) { transform: rotate(-0.4deg) translateY(10px); }
.fragment:nth-child(6n)   { transform: rotate(0.1deg)  translateY(-8px); }
@media (prefers-reduced-motion: reduce) {
  .fragment { transform: none !important; }
}
.fragment:hover {
  transform: rotate(0deg) translateY(-2px) !important;
  border-color: var(--line-2);
}
.fragment::before {
  content: "";
  position: absolute;
  top: 14px; right: 14px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.75);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.45);
}
.fragment--warm::before {
  background: rgba(240, 198, 154, 0.8);
  box-shadow: 0 0 6px rgba(240, 198, 154, 0.45);
}
.fragment--violet::before {
  background: rgba(197, 146, 235, 0.8);
  box-shadow: 0 0 6px rgba(197, 146, 235, 0.45);
}
.fragment__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.fragment__id {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.fragment__date { color: var(--ink-3); letter-spacing: 0.18em; }
.fragment__region {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-cool);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fragment__region::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.fragment--warm .fragment__region { color: var(--accent-warm); }
.fragment--violet .fragment__region { color: #c592eb; }
.fragment__body {
  font-size: 14.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 14px;
  letter-spacing: -0.002em;
}
.fragment__body em {
  font-style: normal;
  color: var(--ink);
  background: linear-gradient(180deg, transparent 62%, rgba(143,183,230,0.18) 62%);
  padding: 0 2px;
}
.fragment--warm .fragment__body em {
  background: linear-gradient(180deg, transparent 62%, rgba(240,198,154,0.16) 62%);
}
.fragment__source {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
}
.fragment__source span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line));
}

/* ── "NEW" badge for live entries ──────────────────────────── */
.signal.is-new .signal__id::after,
.signal-log__row.is-new .signal-log__tag::after {
  content: "NEW";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.26em;
  color: #0a0b0e;
  background: rgba(143, 183, 230, 0.92);
  border-radius: 2px;
  vertical-align: middle;
  font-weight: 800;
  line-height: 1.5;
}
.signal.is-new { background: rgba(13, 18, 28, 0.7); }
.signal-log__row.is-new .signal-log__date {
  color: var(--ink);
}
.signal-log__row.is-new .signal-log__date::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 8px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.95);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.55);
  animation: live-pulse 2.6s var(--ease) infinite;
  vertical-align: middle;
}

/* ── Signals counter (accumulating intelligence) ─────────────── */
.signals__counter {
  display: inline-flex;
  gap: 18px;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
}
.signals__counter span { display: inline-flex; gap: 6px; align-items: baseline; }
.signals__counter strong {
  font-family: var(--font-sans);
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 11px;
}
.signals__counter em { font-style: normal; color: var(--accent-cool); letter-spacing: 0.22em; }

/* ── Portrait readout strip — instrument cluster below portrait ─ */
.portrait__readout {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background-color: var(--line);
  overflow: hidden;
}
.portrait__readout-cell {
  background: rgba(7,8,11,0.85);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portrait__readout-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.portrait__readout-value {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-2);
}
.portrait__readout-value strong {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.16em;
}
.portrait__readout-value i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.9);
  box-shadow: 0 0 5px rgba(143, 183, 230, 0.5);
  margin-right: 6px;
  vertical-align: middle;
  animation: live-pulse 2.6s var(--ease) infinite;
}

/* ── Intelligence-artifact diagram styles (Seam, Stack, Capital) — */

/* Runtime Seam Map */
.seam-map-art .evidence__chart { aspect-ratio: 4 / 3; }
.seam-layer { fill: rgba(7,8,11,0.85); stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.seam-layer-text {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.seam-layer-idx { fill: var(--ink-4); font-size: 9.5px; letter-spacing: 0.22em; }
.seam-stable { stroke: rgba(255,255,255,0.16); stroke-width: 1; fill: none; }
.seam-friction {
  stroke: rgba(240, 198, 154, 0.85);
  stroke-width: 1.8;
  stroke-dasharray: 6 3;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(240, 198, 154, 0.35));
}
.seam-broken {
  stroke: rgba(240, 168, 168, 0.9);
  stroke-width: 1.8;
  stroke-dasharray: 3 3;
  fill: none;
  filter: drop-shadow(0 0 6px rgba(240, 168, 168, 0.32));
}
.seam-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.seam-label-warn { fill: var(--accent-warm); }
.seam-label-dim { fill: var(--ink-4); }
.seam-trace {
  stroke: rgba(143, 183, 230, 0.55);
  stroke-width: 1.2;
  stroke-dasharray: 3 4;
  fill: none;
  animation: infra-flow 7s linear infinite;
}
.seam-callout {
  stroke: rgba(255,255,255,0.18);
  stroke-width: 0.8;
  fill: none;
}
.seam-pulse { fill: rgba(240, 198, 154, 0.95); }

/* Stack Fragmentation */
.stack-frag-art .evidence__chart { aspect-ratio: 5 / 3; }
.frag-col {
  fill: rgba(7,8,11,0.82);
  stroke: rgba(255,255,255,0.14);
  stroke-width: 1;
}
.frag-block {
  fill: rgba(255,255,255,0.05);
  stroke: rgba(255,255,255,0.14);
  stroke-width: 0.8;
}
.frag-block-shared {
  fill: rgba(143, 183, 230, 0.18);
  stroke: rgba(143, 183, 230, 0.36);
}
.frag-block-dialect {
  fill: rgba(255,255,255,0.04);
  stroke: rgba(240, 198, 154, 0.32);
  stroke-dasharray: 4 3;
}
.frag-text {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  fill: var(--ink-3);
  text-transform: uppercase;
}
.frag-text-dim { fill: var(--ink-4); }
.frag-text-warn { fill: var(--accent-warm); }
.frag-text-ink { fill: var(--ink-2); }
.frag-incompat {
  stroke: rgba(240, 198, 154, 0.4);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  fill: none;
}

/* Capital Movement trace */
.capital-art .evidence__chart { aspect-ratio: 16 / 9; }
.cap-axis { stroke: rgba(255,255,255,0.16); stroke-width: 1; fill: none; }
.cap-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; fill: none; }
.cap-curve-warm {
  fill: none;
  stroke: rgba(240, 198, 154, 0.9);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(240, 198, 154, 0.32));
}
.cap-curve-cool {
  fill: none;
  stroke: rgba(143, 183, 230, 0.9);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 6px rgba(143, 183, 230, 0.36));
}
.cap-area-warm { fill: rgba(240, 198, 154, 0.18); }
.cap-area-cool { fill: rgba(143, 183, 230, 0.18); }
.cap-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.cap-label-dim { fill: var(--ink-4); }
.cap-label-ink { fill: var(--ink-2); }
.cap-marker { fill: rgba(223, 230, 241, 0.95); stroke: rgba(7,8,11,0.9); stroke-width: 1; }
.cap-marker-warm { fill: rgba(240, 198, 154, 0.95); }
.cap-crossover {
  stroke: rgba(197, 146, 235, 0.6);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  fill: none;
}

/* ──────────────────────────────────────────────────────────────
   OPERATIONAL OBSERVATORY — phase 03
   Doctrine anchors, beats, portrait re-embedding, evidence
   artifacts, density gradients, live cycle indicators.
   ──────────────────────────────────────────────────────────── */

/* ── Doctrine anchor — oversized category statement ──────────── */
.doctrine-anchor {
  position: relative;
  padding: clamp(110px, 14vw, 200px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(700px 400px at 18% 50%, rgba(143, 183, 230, 0.07), transparent 70%),
    radial-gradient(800px 500px at 92% 70%, rgba(240, 198, 154, 0.05), transparent 70%);
  isolation: isolate;
  overflow: hidden;
}
.doctrine-anchor::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent 0 96px, rgba(255,255,255,0.022) 96px 97px),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,0.022) 96px 97px);
  mask-image: radial-gradient(circle at 28% 70%, black 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 28% 70%, black 0%, transparent 78%);
  pointer-events: none;
  z-index: -1;
}
.doctrine-anchor__inner { position: relative; }
.doctrine-anchor__seal {
  position: absolute;
  top: -28px;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.doctrine-anchor__seal strong {
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.doctrine-anchor__seal::after {
  content: "";
  align-self: flex-end;
  width: 1px; height: 56px;
  margin-top: 12px;
  background: linear-gradient(180deg, rgba(143,183,230,0.5), transparent);
}
.doctrine-anchor__claim {
  font-size: clamp(46px, 7.6vw, 124px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.96;
  max-width: 16ch;
  margin: 0 0 32px;
  background: linear-gradient(180deg, #ffffff 0%, #b4bac4 60%, #6c727c 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.doctrine-anchor__sub {
  font-size: clamp(18px, 1.8vw, 23px);
  color: var(--ink-2);
  line-height: 1.4;
  max-width: 48ch;
  margin: 0 0 28px;
  font-weight: 300;
  letter-spacing: -0.003em;
}
.doctrine-anchor__sub em {
  font-style: normal;
  color: var(--ink);
}
.doctrine-anchor__sigline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.doctrine-anchor__sigline::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.85);
  box-shadow: 0 0 8px rgba(143, 183, 230, 0.55);
  animation: live-pulse 2.6s var(--ease) infinite;
}
.doctrine-anchor--warm {
  background:
    radial-gradient(700px 400px at 22% 50%, rgba(240, 198, 154, 0.06), transparent 70%),
    radial-gradient(800px 500px at 90% 70%, rgba(197, 146, 235, 0.05), transparent 70%);
}
.doctrine-anchor--right {
  text-align: right;
}
.doctrine-anchor--right .doctrine-anchor__claim,
.doctrine-anchor--right .doctrine-anchor__sub {
  margin-left: auto;
}
.doctrine-anchor--right .doctrine-anchor__seal {
  left: 0; right: auto;
  text-align: left;
}
.doctrine-anchor--right .doctrine-anchor__seal::after { align-self: flex-start; }
.doctrine-anchor--right .doctrine-anchor__sigline { float: right; }
@media (max-width: 720px) {
  .doctrine-anchor__seal { position: static; text-align: left; margin-bottom: 32px; }
  .doctrine-anchor__seal::after { display: none; }
  .doctrine-anchor--right { text-align: left; }
  .doctrine-anchor--right .doctrine-anchor__seal { text-align: left; }
}

/* ── Strategic beat — single-line interruption between sections — */
.beat {
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 5vw, 72px) 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0.003));
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.beat::before {
  content: "";
  position: absolute; left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 32px; height: 1px;
  background: rgba(143, 183, 230, 0.6);
}
.beat__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 14px;
}
.beat__line {
  display: block;
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.008em;
  line-height: 1.2;
  max-width: 32ch;
  margin: 0 auto;
}
.beat__line em {
  font-style: normal;
  background: linear-gradient(90deg, #f5b487 0%, #f297c8 28%, #c592eb 56%, #8aaee8 84%, #7cc4d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Portrait observatory overlays (tactical / coordinate) ─── */
.portrait__frame { position: relative; }
.portrait__tactical {
  position: absolute;
  top: 12px; left: 12px; right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  z-index: 6;
  pointer-events: none;
}
.portrait__tactical span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.78);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.portrait__tactical strong {
  font-family: var(--font-sans);
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.portrait__tactical i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.95);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.6);
  animation: live-pulse 2.6s var(--ease) infinite;
}
.portrait__coords {
  position: absolute;
  bottom: 12px; left: 12px;
  z-index: 6;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.7);
  border: 1px solid var(--line);
  padding: 3px 8px;
  border-radius: 2px;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.portrait__crosshair {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0.45;
  mix-blend-mode: screen;
}
.portrait__crosshair::before,
.portrait__crosshair::after {
  content: "";
  position: absolute;
  background: rgba(223, 230, 241, 0.35);
}
.portrait__crosshair::before {
  left: 33%; top: 30%; bottom: 30%;
  width: 1px;
}
.portrait__crosshair::after {
  top: 50%; left: 22%; right: 22%;
  height: 1px;
}
.portrait__scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
  opacity: 0.7;
}
.portrait__frame img {
  filter: none;
}

/* Subtle grid overlay on portrait — technological feel, no labels */
.portrait__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 120px 120px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0.6) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(0,0,0,0.6) 100%);
  opacity: 0.9;
}

/* ── Evidence artifact (analytical chart) ──────────────────── */
.evidence {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.003));
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 36px);
  overflow: hidden;
  isolation: isolate;
}
.evidence::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,183,230,0.45) 35%, rgba(240,198,154,0.35) 65%, transparent);
  z-index: 1;
}
.evidence__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.evidence__id {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.evidence__id strong {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.evidence__name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.003em;
  color: var(--ink);
  flex: 1;
  min-width: 200px;
}
.evidence__cycle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.evidence__chart {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}
.evidence__chart svg { width: 100%; height: 100%; display: block; }
.evidence__chart .chart-axis { stroke: rgba(255,255,255,0.16); stroke-width: 1; fill: none; }
.evidence__chart .chart-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; fill: none; }
.evidence__chart .chart-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-4);
}
.evidence__chart .chart-label-ink { fill: var(--ink-2); }
.evidence__chart .chart-curve-expected {
  fill: none;
  stroke: rgba(255,255,255,0.32);
  stroke-width: 1.2;
  stroke-dasharray: 4 5;
}
.evidence__chart .chart-curve-observed {
  fill: none;
  stroke: rgba(143, 183, 230, 0.9);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(143, 183, 230, 0.35));
}
.evidence__chart .chart-curve-warm {
  fill: none;
  stroke: rgba(240, 198, 154, 0.9);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(240, 198, 154, 0.35));
}
.evidence__chart .chart-area {
  fill: url(#chart-fade);
  opacity: 0.55;
}
.evidence__chart .chart-marker {
  fill: rgba(223, 230, 241, 0.95);
  stroke: rgba(7,8,11,0.9);
  stroke-width: 1.2;
}
.evidence__chart .chart-marker--warm { fill: rgba(240, 198, 154, 0.95); }
.evidence__chart .chart-annotation {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.evidence__chart .chart-annotation-dim { fill: var(--ink-4); }
.evidence__chart .chart-threshold {
  stroke: rgba(240, 198, 154, 0.5);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.evidence__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.evidence__legend span { display: inline-flex; align-items: center; gap: 8px; }
.evidence__legend i {
  display: inline-block;
  width: 14px; height: 2px;
  background: rgba(143, 183, 230, 0.85);
}
.evidence__legend i.is-warm { background: rgba(240, 198, 154, 0.85); }
.evidence__legend i.is-dash {
  background: linear-gradient(90deg, rgba(255,255,255,0.32) 50%, transparent 50%);
  background-size: 4px 2px;
}
.evidence__footnote {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  max-width: 70ch;
}
.evidence__footnote em { font-style: normal; color: var(--ink-2); }

/* Evidence pair — two artifacts side by side, asymmetric column ratio */
.evidence-pair {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
}
@media (max-width: 960px) { .evidence-pair { grid-template-columns: 1fr; } }

/* ── Geomap density / heat overlays ────────────────────────── */
.geomap__heat {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
  mix-blend-mode: screen;
  filter: blur(28px);
}
.geomap__heat--asia {
  /* Shenzhen → Tokyo → Seoul humanoid corridor */
  left: 70%; top: 28%;
  width: 22%; aspect-ratio: 1.4;
  background: radial-gradient(circle, rgba(240, 198, 154, 0.5) 0%, rgba(240, 198, 154, 0.18) 35%, transparent 70%);
}
.geomap__heat--us {
  /* Bay Area → Boston → Pittsburgh autonomy corridor */
  left: 12%; top: 30%;
  width: 18%; aspect-ratio: 1.6;
  background: radial-gradient(circle, rgba(143, 183, 230, 0.45) 0%, rgba(143, 183, 230, 0.16) 35%, transparent 70%);
}
.geomap__heat--eu {
  /* Munich → Stuttgart → Zurich industrial corridor */
  left: 48%; top: 26%;
  width: 13%; aspect-ratio: 1.5;
  background: radial-gradient(circle, rgba(197, 146, 235, 0.4) 0%, rgba(197, 146, 235, 0.14) 35%, transparent 70%);
}
.geomap__heat--in {
  left: 70%; top: 50%;
  width: 8%; aspect-ratio: 1.4;
  background: radial-gradient(circle, rgba(240, 198, 154, 0.35) 0%, rgba(240, 198, 154, 0.1) 40%, transparent 75%);
}

/* Corridor annotations on the map */
.geomap__corridor {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 4px 10px;
  background: rgba(7,8,11,0.78);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  z-index: 3;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.geomap__corridor em {
  font-style: normal;
  color: var(--accent-warm);
  letter-spacing: 0.2em;
}
.geomap__corridor.is-cool em { color: var(--accent-cool); }
.geomap__corridor.is-violet em { color: #c592eb; }
.geomap__corridor--asia { right: 6%; top: 14%; }
.geomap__corridor--us { left: 6%; top: 18%; }
.geomap__corridor--eu { left: 42%; top: 14%; }

/* ── Nav cycle indicator (live observation reference) ─────── */
.nav__cycle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
.nav__cycle i {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.9);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.55);
  animation: live-pulse 2.6s var(--ease) infinite;
}
.nav__cycle strong {
  font-family: var(--font-sans);
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 0.22em;
}
@media (max-width: 1100px) {
  .nav__cycle { display: none; }
}

/* Footer observatory state */
.foot__cycle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.foot__cycle i {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.9);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.5);
  animation: live-pulse 2.6s var(--ease) infinite;
}

/* ── Hero transition statement (replaces identity tagline) ──── */
.hero__statement {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 300;
  line-height: 1.22;
  letter-spacing: -0.008em;
  margin: 0 0 24px;
  max-width: 26ch;
  color: var(--ink);
  position: relative;
  padding-left: 18px;
}
.hero__statement::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(143,183,230,0.7) 0%, rgba(197,146,235,0.5) 50%, rgba(240,198,154,0.4) 100%);
  border-radius: 2px;
}
.hero__statement b {
  font-weight: 400;
  background: linear-gradient(
    90deg,
    #f5b487 0%,
    #f297c8 26%,
    #c592eb 52%,
    #8aaee8 78%,
    #7cc4d6 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__statement em { font-style: normal; color: var(--ink-2); font-weight: 300; }

/* ── Geomap cluster labels (named regions on the world map) ─── */
.geomap__node-name {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(7,8,11,0.78);
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 2px;
  pointer-events: none;
  opacity: 0.78;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.geomap__node-name em {
  font-style: normal;
  color: var(--ink-4);
  letter-spacing: 0.18em;
}
.geomap__node:hover .geomap__node-name { opacity: 1; color: var(--ink); }
.geomap__node--lh .geomap__node-name { left: auto; right: 14px; }
.geomap__node--top .geomap__node-name {
  left: 50%;
  top: auto;
  bottom: 14px;
  transform: translateX(-50%);
}
.geomap__node--bot .geomap__node-name {
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
}

/* ── Field note (operator observation) ───────────────────────── */
.field-note {
  position: relative;
  padding: 26px 30px 26px 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.003));
  isolation: isolate;
}
.field-note::before {
  content: "";
  position: absolute;
  left: 0; top: 22px; bottom: 22px;
  width: 2px;
  background: linear-gradient(180deg, rgba(143,183,230,0.7), rgba(197,146,235,0.5), rgba(240,198,154,0.4));
  border-radius: 2px;
}
.field-note__head {
  display: flex;
  gap: 14px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.field-note__head strong {
  font-family: var(--font-sans);
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.field-note__head span { color: var(--ink-4); letter-spacing: 0.22em; }
.field-note__body {
  font-size: clamp(18px, 1.7vw, 22px);
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.004em;
  font-style: italic;
  margin: 0;
  max-width: 58ch;
}
.field-note__byline {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.field-note__byline em { font-style: normal; color: var(--ink-3); letter-spacing: 0.22em; }

/* Multi-note stack */
.field-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 960px) { .field-notes { grid-template-columns: 1fr; } }

/* ── Investigations / Open questions list ────────────────────── */
.invest-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.invest {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 18px 24px;
  background: rgba(7,8,11,0.72);
  transition: background var(--t-med) var(--ease);
}
.invest:hover { background: rgba(13,15,20,0.92); }
.invest__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.invest__tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(143, 183, 230, 0.85);
  box-shadow: 0 0 6px rgba(143, 183, 230, 0.6);
  animation: live-pulse 2.6s var(--ease) infinite;
}
.invest__tag--open::before {
  background: rgba(240, 198, 154, 0.85);
  box-shadow: 0 0 6px rgba(240, 198, 154, 0.55);
}
.invest__tag--watch::before {
  background: rgba(197, 146, 235, 0.85);
  box-shadow: 0 0 6px rgba(197, 146, 235, 0.55);
}
.invest__body {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.invest__cycle {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}
@media (max-width: 720px) {
  .invest { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .invest__cycle { grid-column: 1; }
}

/* ── Signal log (Trend Map dated entries) ────────────────────── */
.signal-log {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  isolation: isolate;
}
.signal-log::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,183,230,0.45) 35%, rgba(240,198,154,0.35) 65%, transparent);
  z-index: 2;
}
.signal-log__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: rgba(255,255,255,0.012);
}
.signal-log__head-left { display: inline-flex; align-items: center; gap: 12px; }
.signal-log__row {
  display: grid;
  grid-template-columns: 116px 130px 1fr;
  gap: 22px;
  align-items: baseline;
  padding: 18px 22px;
  background: rgba(7,8,11,0.55);
  border-top: 1px solid var(--line);
  transition: background var(--t-med) var(--ease);
}
.signal-log__row:hover { background: rgba(13,15,20,0.88); }
.signal-log__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.signal-log__tag {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-cool);
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 2px;
  white-space: nowrap;
}
.signal-log__tag--warm { color: var(--accent-warm); }
.signal-log__tag--violet { color: #c592eb; }
.signal-log__body {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
  letter-spacing: -0.003em;
}
.signal-log__body em { font-style: normal; color: var(--ink); letter-spacing: 0; }
@media (max-width: 720px) {
  .signal-log__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 18px;
  }
  .signal-log__tag { margin-bottom: 4px; }
}

/* ── Observing panel (currently watching) ────────────────────── */
.observing {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.003));
  overflow: hidden;
  position: relative;
}
.observing__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: rgba(255,255,255,0.012);
}
.observing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
@media (max-width: 720px) { .observing__grid { grid-template-columns: 1fr; } }
.observing__cell {
  background: rgba(7,8,11,0.65);
  padding: 22px 22px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: baseline;
}
.observing__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink-4);
}
.observing__body {
  font-size: 15.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.observing__body em {
  font-style: normal;
  color: var(--ink);
  letter-spacing: 0;
}

/* ── Book cover module (RAI Book artifact) ─────────────────── */
.book-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  width: 100%;
}
@media (max-width: 960px) {
  .book-hero {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }
}

.book-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-self: end;
  width: 100%;
  max-width: 420px;
}
@media (max-width: 960px) {
  .book-cover { justify-self: start; max-width: 320px; }
}

.book-cover__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a0b0e;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,0.75),
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 0 60px -10px rgba(197, 146, 235, 0.18);
  isolation: isolate;
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.book-cover__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--t-slow) var(--ease);
}
.book-cover:hover .book-cover__frame {
  box-shadow:
    0 36px 90px -30px rgba(0,0,0,0.85),
    0 0 0 1px rgba(255,255,255,0.03) inset,
    0 0 80px -10px rgba(197, 146, 235, 0.28);
}
.book-cover:hover .book-cover__frame img {
  transform: scale(1.02);
}
.book-cover__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6,7,10,0) 60%, rgba(6,7,10,0.35) 100%),
    radial-gradient(120% 80% at 50% 0%, transparent 65%, rgba(6,7,10,0.4) 100%);
}
.book-cover__corner {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--line-hot);
  pointer-events: none;
  opacity: 0.85;
}
.book-cover__corner--tl { top: 10px;    left: 10px;    border-right: 0; border-bottom: 0; }
.book-cover__corner--tr { top: 10px;    right: 10px;   border-left: 0;  border-bottom: 0; }
.book-cover__corner--bl { bottom: 10px; left: 10px;    border-right: 0; border-top: 0; }
.book-cover__corner--br { bottom: 10px; right: 10px;   border-left: 0;  border-top: 0; }

.book-cover__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.book-cover__caption strong {
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-weight: 800;
  letter-spacing: 0.22em;
}
.book-cover__caption-role { text-align: right; }

/* Smaller cover for ecosystem cards and references */
.book-cover--sm {
  width: 100%;
  max-width: 100%;
  margin-bottom: 22px;
}
.book-cover--sm .book-cover__frame {
  aspect-ratio: 4 / 5;
  box-shadow:
    0 20px 50px -20px rgba(0,0,0,0.7),
    0 0 40px -10px rgba(197, 146, 235, 0.16);
}
.book-cover--sm .book-cover__corner { width: 12px; height: 12px; }

/* Card-integrated book cover — sits above the card body */
.card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: #0a0b0e;
  box-shadow: 0 14px 36px -16px rgba(0,0,0,0.6);
}
.card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 15%;
  transition: transform var(--t-slow) var(--ease);
}
.card__cover-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  transition: transform var(--t-slow) var(--ease);
}
.card:hover .card__cover-svg { transform: scale(1.02); }
.card__cover--diagram {
  background:
    radial-gradient(circle at 30% 50%, rgba(143,183,230,0.10), transparent 65%),
    radial-gradient(circle at 75% 70%, rgba(240,198,154,0.06), transparent 65%),
    linear-gradient(180deg, #0a0c12 0%, #07080c 100%);
}
.card__cover--diagram::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 36px 36px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 100%);
  z-index: 0;
}
.card__cover--diagram .card__cover-svg { z-index: 1; }
.card__cover--diagram::after {
  /* override the photo-style overlay — keep transparency for the diagram */
  background:
    linear-gradient(180deg, rgba(6,7,10,0) 70%, rgba(6,7,10,0.5) 100%),
    radial-gradient(80% 70% at 50% 0%, transparent 65%, rgba(6,7,10,0.4));
}
.card:hover .card__cover img { transform: scale(1.03); }
.card__cover::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,7,10,0) 50%, rgba(6,7,10,0.55) 100%),
    radial-gradient(80% 70% at 50% 0%, transparent 60%, rgba(6,7,10,0.4));
  pointer-events: none;
}
.card__cover-tag {
  position: absolute;
  left: 12px; bottom: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 2px;
  background: rgba(7,8,11,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* ── Page-hero meta panel (sub-page indicator) ─────────────── */
.page-hero__panel {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  max-width: 720px;
}
@media (max-width: 720px) { .page-hero__panel { grid-template-columns: 1fr; } }
.page-hero__panel-cell {
  background: rgba(7,8,11,0.75);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.page-hero__panel-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.page-hero__panel-value {
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 960px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .focus__grid { grid-template-columns: 1fr 1fr; }
  .hero__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 48px;
  }
  .hero__main { grid-column: 1; grid-row: 1; }
  .hero__portrait {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    max-width: 320px;
  }
  .hero .hero__signature { grid-row: 3; }
  .contact__grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 720px) {
  :root { --pad-y: clamp(72px, 16vw, 110px); }
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__sig { display: none; }
  .hero__portrait { max-width: 260px; }
  .portrait__caption { font-size: 9.5px; }
  .nav.is-open .nav__links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: rgba(6,7,10,0.96);
    backdrop-filter: blur(14px);
    padding: 18px 24px 28px;
    gap: 6px;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__links > a,
  .nav.is-open .nav__group-trigger {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
  }
  .nav.is-open .nav__group { position: static; }
  .nav.is-open .nav__dropdown {
    position: static;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    border: 0;
    padding: 4px 0 8px 28px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    min-width: 0;
    display: none;
  }
  .nav.is-open .nav__group.is-open .nav__dropdown { display: flex; }
  .nav.is-open .nav__dropdown::before { display: none; }
  .nav.is-open .nav__dropdown a { padding: 10px 12px; }
  .cards { grid-template-columns: 1fr; }
  .focus__grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; padding-top: calc(var(--pad-y) + 28px); }
  .hero__name { letter-spacing: -0.03em; }
  .hero__signature { flex-direction: column; align-items: flex-start; gap: 8px; }
  .work__item {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 18px;
  }
  .work__tag { grid-column: 2; justify-self: start; }
  .foot__inner {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 18px;
  }
  .foot__col--links { justify-content: flex-start; flex-wrap: wrap; }
  .foot__col--meta { text-align: left; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { justify-content: space-between; }
  .cta-row--center .btn { justify-content: center; }
  .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .contact__row { grid-template-columns: 1fr; }
  .contact__list-item { grid-template-columns: 100px 1fr; gap: 14px; }
  .contact__submit { width: 100%; min-width: 0; }
}

/* ── Advisory tiles (contact page) ─────────────────────────── */
.advisory {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 1080px) { .advisory { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .advisory { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .advisory { grid-template-columns: 1fr; } }

.advisory__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 22px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.003));
  isolation: isolate;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    box-shadow var(--t-med) var(--ease),
    border-color var(--t-fast) var(--ease);
}

/* Gradient ring — logo colors, soft + elegant. Hover only. */
.advisory__tile::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.6px;
  background: linear-gradient(
    135deg,
    rgba(245, 180, 135, 0.95) 0%,
    rgba(242, 151, 200, 0.95) 26%,
    rgba(197, 146, 235, 0.95) 52%,
    rgba(138, 174, 232, 0.95) 78%,
    rgba(124, 196, 214, 0.95) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease);
  z-index: 3;
}

.advisory__tile:hover {
  transform: translateY(-3px);
  border-color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.008));
  box-shadow: 0 18px 36px -22px rgba(180, 160, 220, 0.28);
}
.advisory__tile:hover::before { opacity: 1; }
.advisory__tile:hover .advisory__icon {
  color: var(--ink-2);
  transform: scale(1.04);
}

.advisory__tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.advisory__idx {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: transparent;
}
.advisory__icon {
  width: 36px;
  height: 36px;
  color: var(--ink-4);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.advisory__title {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.003em;
  margin: 4px 0 4px;
  color: var(--ink);
  position: relative;
  z-index: 1;
}
.advisory__body {
  font-size: 13.5px;
  color: var(--ink-3);
  line-height: 1.55;
  margin: 0;
  position: relative;
  z-index: 1;
}
.advisory__edge { display: none; }

@media (prefers-reduced-motion: reduce) {
  .advisory__tile:hover { transform: none; }
  .advisory__tile:hover .advisory__icon { transform: none; }
}