:root {
      --bg: #030304;
      --panel: rgba(18, 16, 16, 0.72);
      --panel-strong: rgba(11, 9, 9, 0.94);
      --line: rgba(255, 255, 255, 0.105);
      --text: #fffaf3;
      --muted: #cfc0b4;
      --dim: #89766d;
      --violet: #8b1118;
      --gold: #ff3e3e;
      --rose: #ff6b6b;
      --mint: #35d6a3;
      --warm-gold: #f7c86a;
      --graphite: #111315;
      --glass: rgba(255, 255, 255, 0.055);
      --blue: var(--violet);
      --cyan: var(--gold);
      --pink: var(--rose);
      --green: var(--mint);
      --shadow: 0 30px 110px rgba(0, 0, 0, 0.48);
      --radius: 30px;
      --max: 1180px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 17% 0%, rgba(255, 62, 62, 0.16), transparent 32rem),
        radial-gradient(circle at 82% 8%, rgba(247, 200, 106, 0.09), transparent 31rem),
        radial-gradient(circle at 72% 76%, rgba(255, 107, 107, 0.055), transparent 34rem),
        linear-gradient(180deg, #010101 0%, var(--bg) 44%, #0d0505 100%);
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.16;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px);
      background-size: 72px 72px;
      mask-image: linear-gradient(to bottom, black, transparent 78%);
      z-index: -2;
    }

    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% -10%, rgba(255, 255, 255, 0.08), transparent 24rem),
        linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.42));
      mix-blend-mode: screen;
      opacity: 0.36;
      z-index: -1;
    }

    ::selection {
      color: #060303;
      background: #ffd36a;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .wrap {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 20;
      backdrop-filter: blur(22px) saturate(140%);
      background:
        linear-gradient(180deg, rgba(10, 8, 8, 0.86), rgba(7, 5, 5, 0.68));
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.26);
    }

    .nav-inner {
      height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      font-weight: 900;
    }

    .brand-copy {
      display: grid;
      gap: 3px;
      line-height: 1;
    }

    .brand-word {
      letter-spacing: 0.12em;
      color: #fffaf3;
    }

    .brand-subtitle {
      color: #ff2f2f;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
      text-shadow: 0 0 18px rgba(255, 47, 47, 0.24);
    }

    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.026) 42%, rgba(0, 0, 0, 0.0) 43%),
        linear-gradient(135deg, #191616, #050505 58%, #171010);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow:
        0 18px 34px rgba(0, 0, 0, 0.30),
        0 0 24px rgba(255, 62, 62, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.035);
      position: relative;
      overflow: hidden;
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .brand-mark::before {
      inset: 1px 6px auto;
      height: 42%;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
    }

    .brand-mark::after {
      left: 50%;
      top: 50%;
      width: 13px;
      height: 13px;
      border-radius: 4px;
      transform: translate(-50%, -50%);
      background: transparent;
      border: 2px solid #ff2f2f;
      box-shadow:
        0 0 20px rgba(255, 47, 47, 0.32),
        inset 0 0 10px rgba(255, 47, 47, 0.10);
    }

    .brand-word span {
      color: #ff2f2f;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 22px;
      color: #b9aaa2;
      font-size: 14px;
    }

    .nav-links a {
      position: relative;
      transition: color 160ms ease, text-shadow 160ms ease;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -7px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 62, 62, 0.78), transparent);
      opacity: 0;
      transform: scaleX(0.45);
      transition: opacity 160ms ease, transform 160ms ease;
    }

    .nav-links a:hover {
      color: var(--text);
      text-shadow: 0 0 18px rgba(255, 211, 106, 0.18);
    }

    .nav-links a:hover::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .lang-switch {
      display: inline-flex;
      gap: 6px;
      padding-left: 2px;
    }

    .lang-switch button {
      position: relative;
      cursor: pointer;
      color: var(--muted);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(255, 62, 62, 0.05);
      border: 1px solid rgba(255, 62, 62, 0.18);
      border-radius: 999px;
      padding: 7px 10px;
      font: inherit;
      font-size: 12px;
      font-weight: 780;
      overflow: hidden;
      transition: transform 170ms ease, color 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease;
      isolation: isolate;
    }

    .lang-switch button::before,
    .btn::before {
      content: "";
      position: absolute;
      inset: 1px 5px auto;
      height: 48%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0.08) 58%, transparent);
      opacity: 0.58;
      pointer-events: none;
      z-index: 0;
    }

    .lang-switch button::after,
    .btn::after {
      content: "";
      position: absolute;
      top: -45%;
      bottom: -45%;
      left: -70%;
      width: 42%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.44), transparent);
      transform: skewX(-18deg);
      opacity: 0;
      pointer-events: none;
      transition: left 420ms ease, opacity 170ms ease;
      z-index: 0;
    }

    .lang-switch button:hover,
    .lang-switch button.active {
      color: white;
      border-color: rgba(255, 62, 62, 0.44);
      background: rgba(255, 62, 62, 0.14);
      box-shadow: 0 0 28px rgba(255, 62, 62, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.13);
      transform: translateY(-1px);
    }

    .lang-switch button:hover::after,
    .btn:hover::after {
      left: 125%;
      opacity: 1;
    }

    .hero {
      padding: 112px 0 86px;
      position: relative;
      background:
        radial-gradient(circle at 10% 8%, rgba(255, 62, 62, 0.12), transparent 28rem),
        radial-gradient(circle at 52% 0%, rgba(247, 200, 106, 0.060), transparent 34rem);
    }

    .hero::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255, 211, 106, 0.18), rgba(255, 62, 62, 0.22), transparent);
      pointer-events: none;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.96fr) minmax(520px, 1.12fr);
      gap: 22px;
      align-items: center;
      position: relative;
      isolation: isolate;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
    }

    h1 {
      margin: 0;
      font-size: clamp(50px, 6.8vw, 92px);
      line-height: 1.0;
      letter-spacing: -0.05em;
      max-width: 820px;
      text-wrap: balance;
    }

    h1 .gradient,
    .gradient {
      background: linear-gradient(135deg, #fff7f7 0%, #ff6b6b 48%, #8b1118 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero h1 .gradient {
      display: inline;
      padding-bottom: 0.04em;
    }

    .brand-slogan {
      margin: 24px 0 0;
      color: #ff6b6b;
      font-size: clamp(18px, 2vw, 26px);
      font-weight: 860;
      letter-spacing: -0.02em;
      text-shadow: 0 0 26px rgba(255, 62, 62, 0.14);
    }

    .lead {
      margin: 30px 0 0;
      font-size: clamp(18px, 2.1vw, 23px);
      line-height: 1.55;
      color: #e7d3cc;
      max-width: 760px;
    }

    .lead .hero-emphasis,
    .lead .hero-cortex {
      color: white;
      font-weight: 950;
      letter-spacing: -0.01em;
      text-shadow: 0 0 26px rgba(255, 255, 255, 0.12);
    }

    .lead .hero-cortex .tex {
      color: #21a7ff;
      text-shadow: 0 0 28px rgba(33, 167, 255, 0.34);
    }

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

    .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      padding: 0 18px;
      border-radius: 999px;
      color: white;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018)),
        rgba(255, 255, 255, 0.045);
      font-weight: 820;
      overflow: hidden;
      isolation: isolate;
      cursor: pointer;
      box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.10);
      transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, color 170ms ease;
    }

    .btn.primary {
      border-color: rgba(255, 107, 107, 0.54);
      background: linear-gradient(135deg, #711016, #ff4f4f);
      box-shadow: 0 18px 55px rgba(255, 62, 62, 0.18), 0 12px 42px rgba(139, 17, 24, 0.16);
    }

    .btn:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 247, 247, 0.34);
      box-shadow:
        0 20px 58px rgba(0, 0, 0, 0.26),
        0 0 34px rgba(255, 62, 62, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    }

    .btn.primary:hover {
      border-color: rgba(255, 218, 218, 0.70);
      box-shadow:
        0 22px 64px rgba(255, 62, 62, 0.28),
        0 14px 44px rgba(139, 17, 24, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.20);
    }

    .btn:focus-visible,
    .lang-switch button:focus-visible {
      outline: 2px solid rgba(255, 211, 106, 0.72);
      outline-offset: 3px;
    }

    .research-panel {
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 20% 0%, rgba(247, 200, 106, 0.10), transparent 22rem),
        radial-gradient(circle at 82% 22%, rgba(255, 62, 62, 0.14), transparent 20rem),
        linear-gradient(155deg, rgba(22, 14, 14, 0.94), rgba(5, 5, 6, 0.92) 62%, rgba(7, 9, 13, 0.94));
      border: 0;
      box-shadow:
        0 48px 132px rgba(0, 0, 0, 0.54),
        0 18px 58px rgba(139, 17, 24, 0.14);
      padding: 24px;
      overflow: hidden;
      position: relative;
      perspective: 1100px;
      z-index: 1;
      width: calc(100% + 92px);
      margin-left: -72px;
      opacity: 0.92;
      transform: scale(1.08);
      transform-origin: center left;
      -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.72) 16%, #000 34%);
      mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.72) 16%, #000 34%);
    }

    .research-panel::before {
      content: "";
      position: absolute;
      inset: -1px;
      background:
        linear-gradient(135deg, rgba(255, 211, 106, 0.12), transparent 34%, rgba(255, 62, 62, 0.18)),
        radial-gradient(circle at 12% 0%, rgba(255, 107, 107, 0.10), transparent 24rem);
      opacity: 0.70;
      pointer-events: none;
    }

    .research-inner {
      position: relative;
      z-index: 1;
      transform-style: preserve-3d;
    }

    .window-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 4px 18px;
      color: #a89588;
      font-size: 13px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .dots {
      display: flex;
      gap: 7px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 99px;
      background: rgba(255, 255, 255, 0.18);
    }

    .orbit {
      position: relative;
      height: 430px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 50% 39%, rgba(255, 62, 62, 0.24), transparent 18%),
        radial-gradient(circle at 44% 52%, rgba(247, 200, 106, 0.08), transparent 21%),
        radial-gradient(circle at 78% 30%, rgba(33, 167, 255, 0.12), transparent 16rem),
        linear-gradient(145deg, rgba(255, 247, 247, 0.08), rgba(255, 247, 247, 0.025)),
        rgba(255, 250, 240, 0.025);
      border: 1px solid rgba(255, 255, 255, 0.075);
      background-clip: padding-box;
      overflow: hidden;
      transform: translateZ(0) rotateX(8deg) rotateY(-9deg);
      transform-style: preserve-3d;
      backface-visibility: hidden;
      isolation: isolate;
      clip-path: inset(0 round 34px);
      will-change: transform;
      filter: drop-shadow(0 0 0.65px rgba(255, 255, 255, 0.18));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -28px 90px rgba(0, 0, 0, 0.30);
    }

    .orbit::before,
    .orbit::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      border: 1px solid rgba(255, 62, 62, 0.20);
      border-radius: 50%;
      transform: translate(-50%, -50%) rotateX(70deg) rotateZ(-14deg);
      pointer-events: none;
    }

    .orbit::before {
      width: 82%;
      height: 64%;
      background:
        radial-gradient(ellipse at center, transparent 46%, rgba(255, 62, 62, 0.055) 47%, transparent 68%),
        repeating-radial-gradient(ellipse at center, transparent 0 32px, rgba(255, 255, 255, 0.035) 33px 34px);
      box-shadow: 0 0 54px rgba(255, 62, 62, 0.14);
    }

    .orbit::after {
      width: 54%;
      height: 82%;
      transform: translate(-50%, -50%) rotateX(67deg) rotateZ(34deg);
      border-color: rgba(33, 167, 255, 0.20);
      box-shadow: 0 0 46px rgba(33, 167, 255, 0.10);
    }

    .core {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 190px;
      height: 102px;
      display: grid;
      place-items: center;
      transform: translate(-50%, -50%) translateZ(74px);
      text-align: center;
      color: white;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.17), transparent 34%),
        linear-gradient(180deg, rgba(255, 62, 62, 0.36), rgba(82, 11, 15, 0.36));
      border: 1px solid rgba(255, 211, 106, 0.26);
      border-radius: 30px;
      box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        0 0 60px rgba(255, 62, 62, 0.24),
        0 0 28px rgba(247, 200, 106, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.13em;
      line-height: 1.25;
      backface-visibility: hidden;
      z-index: 3;
    }

    .core::after {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 36px;
      border: 1px solid rgba(255, 62, 62, 0.18);
      filter: blur(1px);
      pointer-events: none;
    }

    .core span {
      color: #ffd36a;
      text-shadow: 0 0 24px rgba(255, 211, 106, 0.24);
    }

    .node {
      position: absolute;
      min-width: 160px;
      transform: translate(-50%, -50%) translateZ(42px);
      padding: 13px 16px;
      text-align: center;
      color: #e8eaf3;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%),
        rgba(13, 8, 18, 0.76);
      border: 1px solid rgba(255, 247, 247, 0.13);
      border-radius: 999px;
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 28px rgba(255, 62, 62, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
      font-size: 13px;
      font-weight: 850;
      letter-spacing: 0.04em;
      backdrop-filter: blur(14px);
      backface-visibility: hidden;
      z-index: 3;
      overflow: hidden;
      isolation: isolate;
    }

    .node::after {
      content: "";
      position: absolute;
      inset: 1px 5px auto;
      height: 48%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08) 58%, transparent);
      opacity: 0.58;
      pointer-events: none;
      z-index: -1;
    }

    .node .tex {
      color: #21a7ff;
      text-shadow: 0 0 22px rgba(33, 167, 255, 0.36);
    }

    .map-lines {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      opacity: 0.78;
      transform: translateZ(8px);
      filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
    }

    .map-lines path {
      fill: none;
      stroke: rgba(226, 232, 240, 0.26);
      stroke-width: 1.1;
      vector-effect: non-scaling-stroke;
      shape-rendering: geometricPrecision;
    }

    .map-lines .line-status { stroke: rgba(203, 213, 225, 0.58); }
    .map-lines .line-readiness { stroke: rgba(203, 213, 225, 0.58); }
    .map-lines .line-cortex { stroke: rgba(203, 213, 225, 0.66); }
    .map-lines .line-solution { stroke: rgba(203, 213, 225, 0.66); }
    .map-lines .line-research { stroke: rgba(203, 213, 225, 0.58); }

    .node.highlight {
      color: #f8fafc;
      background:
        radial-gradient(circle at 22% 0%, rgba(226, 232, 240, 0.40), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(203, 213, 225, 0.66));
      border-color: rgba(226, 232, 240, 0.52);
      box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.36),
        0 0 42px rgba(203, 213, 225, 0.30),
        0 0 26px rgba(15, 23, 42, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.38);
    }

    .n1 { left: 50%; top: 15%; }
    .n2 { left: 19%; top: 34%; }
    .n3 { left: 81%; top: 34%; }
    .n4 { left: 19%; top: 69%; }
    .n6 { left: 50%; top: 86%; }

    .n2 {
      color: #f8fafc;
      background:
        radial-gradient(circle at 24% 0%, rgba(226, 232, 240, 0.40), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(203, 213, 225, 0.62));
      border-color: rgba(226, 232, 240, 0.48);
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(203, 213, 225, 0.26),
        0 0 22px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
    }

    .n1 {
      color: #f8fafc;
      background:
        radial-gradient(circle at 24% 0%, rgba(226, 232, 240, 0.40), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(203, 213, 225, 0.62));
      border-color: rgba(226, 232, 240, 0.48);
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(203, 213, 225, 0.26),
        0 0 22px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    .n4 {
      color: #f8fafc;
      background:
        radial-gradient(circle at 24% 0%, rgba(226, 232, 240, 0.38), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 36%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(148, 163, 184, 0.66));
      border-color: rgba(226, 232, 240, 0.48);
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(203, 213, 225, 0.28),
        0 0 24px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    .n6 {
      color: #f8fafc;
      background:
        radial-gradient(circle at 24% 0%, rgba(226, 232, 240, 0.40), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.24), transparent 34%),
        linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(203, 213, 225, 0.62));
      border-color: rgba(226, 232, 240, 0.48);
      box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 40px rgba(203, 213, 225, 0.26),
        0 0 22px rgba(15, 23, 42, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    }

    section {
      position: relative;
      padding: 92px 0;
    }

    .section-head {
      max-width: 860px;
      margin-bottom: 40px;
    }

    .kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 0.17em;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 12px;
    }

    .kicker::before {
      content: "";
      width: 28px;
      height: 1px;
      background: currentColor;
      opacity: 0.62;
    }

    h2 {
      margin: 0;
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1;
      letter-spacing: -0.055em;
      max-width: 900px;
      text-wrap: balance;
    }

    .section-copy {
      color: var(--muted);
      line-height: 1.72;
      font-size: 18px;
      margin-top: 20px;
      max-width: 820px;
    }

    .card-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .card {
      min-height: 230px;
      border-radius: 26px;
      padding: 24px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.095);
      box-shadow: 0 18px 70px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 250, 240, 0.050);
    }

    .card strong {
      display: block;
      color: white;
      font-size: 21px;
      letter-spacing: -0.025em;
      margin-bottom: 12px;
    }

    .card p {
      color: var(--muted);
      line-height: 1.62;
      margin: 0;
    }

    #philosophy .wrap {
      padding: 34px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.22), transparent 25rem),
        radial-gradient(circle at 100% 100%, rgba(180, 83, 9, 0.20), transparent 24rem),
        linear-gradient(135deg, rgba(255, 247, 214, 0.064), rgba(255, 247, 214, 0.016)),
        var(--panel-strong);
      border: 1px solid rgba(251, 191, 36, 0.20);
      box-shadow:
        var(--shadow),
        0 0 76px rgba(251, 191, 36, 0.085),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    #philosophy .kicker {
      color: #ffd36a;
    }

    #philosophy .section-copy {
      color: #f4d79c;
    }

    #philosophy .card {
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.16), transparent 15rem),
        linear-gradient(145deg, rgba(255, 247, 214, 0.075), rgba(255, 247, 214, 0.018)),
        rgba(28, 18, 7, 0.74);
      border-color: rgba(251, 191, 36, 0.20);
      box-shadow:
        0 22px 64px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    #philosophy .card strong {
      color: #fff7d6;
    }

    #philosophy .card p {
      color: #f4d79c;
    }

    .compass-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .compass-card {
      min-height: 250px;
      padding: 26px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 90% 0%, rgba(255, 255, 255, 0.085), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.012)),
        rgba(15, 14, 15, 0.76);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 20px 62px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .compass-card .num {
      margin-bottom: 18px;
    }

    .compass-card strong {
      display: block;
      color: white;
      font-size: 21px;
      letter-spacing: -0.025em;
      margin-bottom: 10px;
    }

    .compass-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.62;
    }

    .status-layout {
      --status-mid: 118px;
      --status-card-min: 320px;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) var(--status-mid) minmax(0, 1fr);
      gap: 10px;
      align-items: stretch;
      padding: 24px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 62, 62, 0.20), transparent 24rem),
        radial-gradient(circle at 100% 100%, rgba(139, 17, 24, 0.16), transparent 24rem),
        linear-gradient(135deg, rgba(255, 247, 247, 0.055), rgba(255, 247, 247, 0.018)),
        var(--panel-strong);
      border: 1px solid rgba(255, 62, 62, 0.18);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    #purpose .kicker {
      color: #ff6b6b;
    }

    #purpose h2 {
      color: #fff7f7;
    }

    #purpose .section-copy {
      color: #ffdada;
    }

    .status-panel {
      min-height: var(--status-card-min);
      display: flex;
      flex-direction: column;
      padding: 28px;
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.090), rgba(255, 255, 255, 0.016)),
        rgba(12, 8, 12, 0.66);
      border: 1px solid rgba(255, 247, 247, 0.12);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .status-ai {
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 62, 62, 0.18), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(28, 8, 10, 0.70);
    }

    .status-work {
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 107, 107, 0.14), transparent 18rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018)),
        rgba(24, 8, 11, 0.70);
    }

    .status-label {
      display: inline-flex;
      margin-bottom: 14px;
      color: #ffc7c7;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.88;
    }

    .status-panel strong,
    .status-outcome strong {
      display: block;
      color: white;
      font-size: clamp(23px, 2.7vw, 34px);
      line-height: 1.04;
      letter-spacing: -0.04em;
      margin-bottom: 14px;
      text-wrap: balance;
    }

    .status-panel p,
    .status-outcome p {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.62;
    }

    .status-divider {
      position: relative;
      display: grid;
      place-items: center;
      width: var(--status-mid);
      min-height: var(--status-card-min);
    }

    .status-divider::before {
      content: "";
      position: absolute;
      top: 12px;
      bottom: 12px;
      left: 50%;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg, transparent, rgba(255, 62, 62, 0.78), rgba(255, 107, 107, 0.52), transparent);
      box-shadow: 0 0 32px rgba(255, 62, 62, 0.22);
    }

    .status-divider span {
      position: relative;
      z-index: 1;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      padding: 14px 8px;
      border-radius: 999px;
      color: #ffdada;
      background: rgba(6, 4, 8, 0.82);
      border: 1px solid rgba(255, 62, 62, 0.24);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .status-outcomes {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: 0.95fr 1.05fr;
      gap: 16px;
      margin-top: 2px;
    }

    .status-graph {
      grid-template-columns: minmax(0, 1fr) var(--status-mid) minmax(0, 1fr);
      align-items: stretch;
      gap: 10px;
      margin-top: 8px;
    }

    .status-outcome {
      min-height: var(--status-card-min);
      display: flex;
      flex-direction: column;
      padding: 28px;
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.016)),
        rgba(255, 62, 62, 0.060);
      border: 1px solid rgba(255, 62, 62, 0.16);
      box-shadow: 0 22px 70px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .status-outcome.friction-node {
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 62, 62, 0.20), transparent 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.016)),
        rgba(34, 8, 10, 0.66);
    }

    .status-outcome.decision-node {
      background:
        radial-gradient(circle at 100% 0%, rgba(34, 197, 94, 0.18), transparent 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.062), rgba(255, 255, 255, 0.016)),
        rgba(5, 24, 12, 0.64);
      border-color: rgba(34, 197, 94, 0.20);
    }

    .friction-points {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: auto;
      padding-top: 18px;
    }

    .friction-points span,
    .decision-points span {
      display: grid;
      place-items: center;
      min-height: 38px;
      padding: 8px 10px;
      border-radius: 999px;
      color: #ffdada;
      background: rgba(255, 62, 62, 0.10);
      border: 1px solid rgba(255, 62, 62, 0.18);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.03em;
      text-align: center;
    }

    .decision-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      margin-top: auto;
      padding-top: 18px;
    }

    .decision-points span {
      color: #dcfce7;
      background: rgba(34, 197, 94, 0.10);
      border-color: rgba(34, 197, 94, 0.20);
    }

    .status-flow {
      position: relative;
      display: grid;
      place-items: center;
      min-height: var(--status-card-min);
    }

    .status-flow::before {
      content: "";
      position: absolute;
      left: -16px;
      right: -16px;
      top: 50%;
      height: 2px;
      transform: translateY(-50%);
      background: linear-gradient(90deg, rgba(255, 62, 62, 0.16), rgba(255, 62, 62, 0.84), rgba(34, 197, 94, 0.86), rgba(34, 197, 94, 0.18));
      box-shadow: 0 0 30px rgba(255, 62, 62, 0.18), 0 0 30px rgba(34, 197, 94, 0.16);
    }

    .status-flow::after {
      content: "";
      position: absolute;
      right: -18px;
      top: 50%;
      width: 12px;
      height: 12px;
      border-top: 2px solid rgba(34, 197, 94, 0.85);
      border-right: 2px solid rgba(34, 197, 94, 0.85);
      transform: translateY(-50%) rotate(45deg);
    }

    .status-flow span {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      width: 92px;
      height: 92px;
      border-radius: 999px;
      color: #dcfce7;
      background:
        radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.20), transparent 32%),
        linear-gradient(135deg, rgba(255, 62, 62, 0.28), rgba(34, 197, 94, 0.24)),
        rgba(8, 8, 8, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.28), 0 0 38px rgba(34, 197, 94, 0.16);
      font-size: 11px;
      font-weight: 950;
      line-height: 1.15;
      letter-spacing: 0.10em;
      text-align: center;
      text-transform: uppercase;
    }

    .journey-line {
      margin-top: 22px;
      padding: 24px 26px;
      border-radius: 24px;
      background: rgba(255, 62, 62, 0.07);
      border: 1px solid rgba(255, 62, 62, 0.14);
      color: #ffdada;
      font-size: 18px;
      line-height: 1.6;
    }

    #solution .wrap {
      padding: 34px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 100% 0%, rgba(148, 163, 184, 0.22), transparent 24rem),
        radial-gradient(circle at 0% 100%, rgba(51, 65, 85, 0.24), transparent 24rem),
        linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.94));
      border: 1px solid rgba(148, 163, 184, 0.22);
      box-shadow:
        0 34px 100px rgba(0, 0, 0, 0.30),
        0 0 70px rgba(148, 163, 184, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    #solution .kicker {
      color: #cbd5e1;
    }

    #solution h2 {
      color: #f8fafc;
    }

    #solution .section-copy {
      color: #cbd5e1;
    }

    #solution .compass-card {
      background:
        radial-gradient(circle at 100% 0%, rgba(203, 213, 225, 0.12), transparent 13rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.022)),
        rgba(15, 23, 42, 0.62);
      border-color: rgba(148, 163, 184, 0.18);
      box-shadow:
        0 20px 55px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    #solution .compass-card .num {
      color: #f8fafc;
      background: linear-gradient(135deg, #334155, #94a3b8);
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.20);
    }

    #solution .compass-card strong {
      color: #f8fafc;
    }

    #solution .compass-card p {
      color: #cbd5e1;
    }

    #solution .journey-line {
      color: #e2e8f0;
      background:
        linear-gradient(135deg, rgba(148, 163, 184, 0.14), rgba(51, 65, 85, 0.18));
      border-color: rgba(148, 163, 184, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .cortex-bridge {
      padding: 0 0 10px;
    }

    .bridge-arrow {
      position: relative;
      width: min(760px, 76%);
      height: 112px;
      margin: -10px auto 0;
      padding: 0;
      background:
        radial-gradient(circle at 78% 50%, rgba(33, 167, 255, 0.34), transparent 16rem),
        linear-gradient(180deg, rgba(203, 213, 225, 0.36), rgba(0, 122, 255, 0.12) 34%, transparent 86%);
      box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.24),
        0 0 62px rgba(0, 122, 255, 0.14);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      opacity: 0.92;
    }

    .bridge-arrow::before {
      content: "";
      position: absolute;
      inset: 1px 18px 22px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(33, 167, 255, 0.08), transparent);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      pointer-events: none;
    }

    .bridge-arrow.bridge-up {
      margin: 0 auto -10px;
      background:
        radial-gradient(circle at 50% 22%, rgba(33, 167, 255, 0.32), transparent 15rem),
        linear-gradient(0deg, rgba(255, 211, 106, 0.22), rgba(0, 122, 255, 0.12) 42%, rgba(203, 213, 225, 0.32) 100%);
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .bridge-arrow.bridge-up::before {
      inset: 22px 18px 1px;
      background:
        linear-gradient(0deg, rgba(255, 255, 255, 0.18), rgba(33, 167, 255, 0.08), transparent);
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
    }

    .split {
      display: grid;
      grid-template-columns: 0.9fr 1.1fr;
      gap: 28px;
      align-items: stretch;
    }

    .vision-panel {
      border-radius: var(--radius);
      padding: 30px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 62, 62, 0.15), transparent 22rem),
        linear-gradient(135deg, rgba(139, 17, 24, 0.18), rgba(255, 247, 247, 0.04));
      border: 1px solid rgba(255, 62, 62, 0.18);
    }

    .vision-panel h3 {
      margin: 0;
      font-size: clamp(28px, 4vw, 48px);
      line-height: 1;
      letter-spacing: -0.05em;
    }

    .vision-panel p {
      color: #d7d9e6;
      line-height: 1.68;
      font-size: 18px;
      margin: 18px 0 0;
    }

    .vision-system {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
      gap: 22px;
      align-items: stretch;
      padding: 26px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 62, 62, 0.17), transparent 24rem),
        radial-gradient(circle at 100% 72%, rgba(255, 177, 90, 0.09), transparent 22rem),
        linear-gradient(135deg, rgba(255, 247, 247, 0.052), rgba(255, 247, 247, 0.018)),
        var(--panel-strong);
      border: 1px solid rgba(255, 62, 62, 0.16);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      overflow: hidden;
    }

    .vision-command {
      position: relative;
      min-height: 430px;
      display: grid;
      align-content: end;
      padding: 30px;
      border-radius: 30px;
      background:
        radial-gradient(circle at 50% 26%, rgba(255, 62, 62, 0.20), transparent 13rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018)),
        rgba(18, 8, 10, 0.70);
      border: 1px solid rgba(255, 247, 247, 0.11);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
      overflow: hidden;
    }

    .vision-command::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 30%;
      width: min(72%, 360px);
      aspect-ratio: 1;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background:
        radial-gradient(circle at center, rgba(255, 62, 62, 0.22), transparent 31%),
        repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 34px);
      border: 1px solid rgba(255, 62, 62, 0.16);
      opacity: 0.72;
    }

    .vision-command::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 30%;
      width: 118px;
      height: 118px;
      transform: translate(-50%, -50%);
      border-radius: 34px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(139, 17, 24, 0.94), rgba(255, 62, 62, 0.56));
      border: 1px solid rgba(255, 247, 247, 0.28);
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 48px rgba(255, 62, 62, 0.26);
    }

    .vision-command-content {
      position: relative;
      z-index: 1;
    }

    .vision-label {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 8px 11px;
      border-radius: 999px;
      color: #ffdada;
      background: rgba(255, 62, 62, 0.08);
      border: 1px solid rgba(255, 62, 62, 0.18);
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .vision-command strong {
      display: block;
      color: white;
      font-size: clamp(28px, 4vw, 52px);
      line-height: 0.96;
      letter-spacing: -0.055em;
      max-width: 560px;
    }

    .vision-command strong span {
      white-space: nowrap;
    }

    .vision-command p {
      margin: 18px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.62;
      max-width: 620px;
    }

    .vision-modules {
      display: grid;
      gap: 14px;
    }

    .vision-module {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: start;
      padding: 22px;
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.068), rgba(255, 255, 255, 0.018)),
        rgba(10, 7, 12, 0.70);
      border: 1px solid rgba(255, 247, 247, 0.10);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .vision-module span {
      min-width: 86px;
      min-height: 36px;
      padding: 0 12px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      color: white;
      background: linear-gradient(135deg, var(--violet), var(--gold));
      box-shadow: 0 0 28px rgba(255, 62, 62, 0.16);
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.10em;
      text-transform: uppercase;
    }

    .vision-module strong {
      display: block;
      color: white;
      font-size: 21px;
      letter-spacing: -0.025em;
      margin-bottom: 6px;
    }

    .vision-module p {
      margin: 0;
      color: var(--muted);
      line-height: 1.58;
    }

    .timeline {
      display: grid;
      gap: 12px;
    }

    .step {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      align-items: start;
      padding: 18px;
      border-radius: 20px;
      background: var(--panel);
      border: 1px solid var(--line);
    }

    .num {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: white;
      background: linear-gradient(135deg, var(--violet), var(--gold));
      font-weight: 900;
    }

    .step b {
      display: block;
      color: white;
      margin-bottom: 4px;
    }

    .step p {
      margin: 0;
      color: var(--muted);
      line-height: 1.55;
    }

    .cortex-callout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
      gap: 28px;
      align-items: center;
      padding: 42px;
      border-radius: 34px;
      background:
        radial-gradient(circle at 88% 0%, rgba(33, 167, 255, 0.25), transparent 26rem),
        radial-gradient(circle at 12% 100%, rgba(0, 74, 173, 0.19), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.014)),
        rgba(2, 10, 23, 0.92);
      border: 1px solid rgba(33, 167, 255, 0.24);
      box-shadow:
        var(--shadow),
        0 0 96px rgba(0, 122, 255, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      position: relative;
      overflow: hidden;
    }

    .cortex-callout::before {
      content: "";
      position: absolute;
      inset: 1px 10px auto;
      height: 42%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent);
      pointer-events: none;
    }

    .cortex-callout .kicker {
      color: #21a7ff;
    }

    .cortex-callout > * {
      position: relative;
      z-index: 1;
    }

    .cortex-callout h2 {
      max-width: 920px;
    }

    .cortex-wordmark .tex {
      color: #21a7ff;
      text-shadow: 0 0 28px rgba(33, 167, 255, 0.24);
    }

    #cortex .btn.primary {
      border-color: rgba(33, 167, 255, 0.54);
      background: linear-gradient(135deg, #004aad, #21a7ff);
      box-shadow: 0 18px 55px rgba(0, 122, 255, 0.26);
    }

    .cortex-callout p {
      margin: 14px 0 0;
      color: #d7eeff;
      font-size: 18px;
      line-height: 1.70;
      max-width: 760px;
    }

    .cortex-proof {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 20px;
    }

    .cortex-proof span {
      padding: 9px 11px;
      border-radius: 999px;
      color: #d7eeff;
      background: rgba(33, 167, 255, 0.10);
      border: 1px solid rgba(33, 167, 255, 0.20);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .cortex-tool-card {
      position: relative;
      padding: 24px;
      border-radius: 30px;
      background:
        radial-gradient(circle at 78% 0%, rgba(33, 167, 255, 0.24), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.018)),
        rgba(2, 18, 38, 0.78);
      border: 1px solid rgba(215, 238, 255, 0.24);
      box-shadow: 0 26px 78px rgba(0, 0, 0, 0.34), 0 0 50px rgba(0, 122, 255, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.13);
      overflow: hidden;
    }

    .cortex-tool-card::before {
      content: "";
      position: absolute;
      inset: 1px 8px auto;
      height: 42%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent);
      pointer-events: none;
    }

    .tool-label {
      color: #8bd4ff;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .tool-wordmark {
      margin-top: 10px;
      color: white;
      font-size: clamp(34px, 4vw, 58px);
      line-height: 0.9;
      letter-spacing: -0.06em;
      font-weight: 950;
    }

    .tool-wordmark span {
      color: #21a7ff;
    }

    .tool-lines {
      display: grid;
      gap: 8px;
      margin: 22px 0;
    }

    .tool-lines span {
      height: 9px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(33, 167, 255, 0.80), rgba(215, 238, 255, 0.18));
    }

    .tool-lines span:nth-child(2) {
      width: 78%;
      background: linear-gradient(90deg, rgba(215, 238, 255, 0.44), rgba(33, 167, 255, 0.12));
    }

    .tool-lines span:nth-child(3) {
      width: 56%;
      background: linear-gradient(90deg, rgba(33, 167, 255, 0.48), rgba(215, 238, 255, 0.10));
    }

    .tool-cta-hint {
      color: #d7eeff;
      font-size: 13px;
      line-height: 1.45;
      margin-bottom: 16px;
    }

    .article-shell {
      border-radius: 34px;
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.16), transparent 24rem),
        radial-gradient(circle at 0% 100%, rgba(146, 64, 14, 0.15), transparent 24rem),
        linear-gradient(145deg, rgba(255, 247, 214, 0.060), rgba(255, 247, 214, 0.014)),
        rgba(15, 10, 5, 0.92);
      border: 1px solid rgba(251, 191, 36, 0.18);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.065);
      overflow: hidden;
    }

    .article-head {
      padding: 40px 40px 24px;
      border-bottom: 1px solid var(--line);
    }

    .article-head h2 {
      max-width: 980px;
    }

    .sparring {
      display: grid;
      gap: 14px;
      padding: 30px 40px 40px;
    }

    .turn {
      display: grid;
      grid-template-columns: 1fr;
      gap: 7px;
      width: min(760px, 82%);
      padding: 18px 20px;
      border-radius: 26px;
      background: rgba(13, 8, 18, 0.46);
      border: 1px solid rgba(251, 191, 36, 0.12);
      box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.055);
    }

    .turn.human {
      justify-self: start;
      border-bottom-left-radius: 8px;
      background:
        linear-gradient(145deg, rgba(251, 191, 36, 0.09), rgba(255, 247, 214, 0.018)),
        rgba(18, 12, 6, 0.54);
    }

    .turn.machine {
      justify-self: end;
      border-bottom-right-radius: 8px;
      background:
        linear-gradient(145deg, rgba(255, 247, 214, 0.075), rgba(251, 191, 36, 0.07)),
        rgba(34, 22, 7, 0.58);
      border-color: rgba(255, 211, 106, 0.18);
    }

    .speaker {
      color: var(--gold);
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding-top: 0;
    }

    .machine .speaker {
      text-align: right;
    }

    .turn p {
      margin: 0;
      color: #d9d0e8;
      line-height: 1.72;
      font-size: 17px;
    }

    .machine p {
      color: #ffdada;
    }

    .article-thesis {
      position: relative;
      margin: 18px 40px 42px;
      padding: 30px 32px;
      border-radius: 28px;
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.20), transparent 18rem),
        linear-gradient(145deg, rgba(255, 247, 214, 0.12), rgba(255, 247, 214, 0.026)),
        rgba(31, 20, 7, 0.72);
      border: 1px solid rgba(255, 211, 106, 0.28);
      color: #ffdada;
      line-height: 1.50;
      font-size: clamp(20px, 2.15vw, 27px);
      font-weight: 780;
      letter-spacing: -0.026em;
      box-shadow:
        0 26px 78px rgba(0, 0, 0, 0.30),
        0 0 58px rgba(251, 191, 36, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
      overflow: hidden;
    }

    .article-thesis::before {
      content: "";
      position: absolute;
      left: 0;
      top: 18px;
      bottom: 18px;
      width: 3px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffd36a, #ff3e3e);
      box-shadow: 0 0 28px rgba(251, 191, 36, 0.34);
    }

    .article-thesis-label {
      display: inline-flex;
      margin-bottom: 12px;
      color: #ffd36a;
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .article-thesis-text {
      margin: 0;
      color: inherit;
    }

    #research .vision-panel,
    #research .step,
    #vision .vision-system,
    #sparring .article-shell {
      background:
        radial-gradient(circle at 0% 0%, rgba(251, 191, 36, 0.19), transparent 25rem),
        radial-gradient(circle at 100% 100%, rgba(180, 83, 9, 0.20), transparent 24rem),
        linear-gradient(135deg, rgba(255, 247, 214, 0.064), rgba(255, 247, 214, 0.018)),
        var(--panel-strong);
      border-color: rgba(251, 191, 36, 0.22);
      box-shadow:
        var(--shadow),
        0 0 80px rgba(251, 191, 36, 0.080),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    #research .kicker,
    #vision .kicker,
    #sparring .kicker,
    #sparring .speaker {
      color: #ffd36a;
    }

    #research .vision-panel p,
    #research .step p,
    #vision .section-copy,
    #vision .vision-command p,
    #vision .vision-module p,
    #sparring .turn p {
      color: #f4d79c;
    }

    #research .step {
      border-color: rgba(251, 191, 36, 0.18);
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    #research .step .num,
    #vision .vision-module span {
      background: linear-gradient(135deg, #92400e, #fbbf24);
      box-shadow: 0 0 30px rgba(251, 191, 36, 0.22);
    }

    #vision .vision-command,
    #vision .vision-module {
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.14), transparent 16rem),
        linear-gradient(145deg, rgba(255, 247, 214, 0.072), rgba(255, 247, 214, 0.018)),
        rgba(24, 16, 7, 0.74);
      border-color: rgba(251, 191, 36, 0.16);
    }

    #vision .vision-command::before {
      background:
        radial-gradient(circle at center, rgba(251, 191, 36, 0.24), transparent 31%),
        repeating-radial-gradient(circle at center, rgba(255, 247, 214, 0.12) 0 1px, transparent 1px 34px);
      border-color: rgba(251, 191, 36, 0.18);
    }

    #vision .vision-command::after {
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 34%),
        linear-gradient(135deg, rgba(146, 64, 14, 0.95), rgba(251, 191, 36, 0.58));
      box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34), 0 0 48px rgba(251, 191, 36, 0.28);
    }

    #vision .vision-label {
      color: #fff7d6;
      background: rgba(251, 191, 36, 0.10);
      border-color: rgba(251, 191, 36, 0.22);
    }

    #sparring .article-head {
      border-bottom-color: rgba(251, 191, 36, 0.18);
    }

    #sparring .machine p {
      color: #fff7d6;
    }

    #sparring .article-thesis {
      background:
        radial-gradient(circle at 100% 0%, rgba(251, 191, 36, 0.22), transparent 18rem),
        linear-gradient(145deg, rgba(255, 247, 214, 0.14), rgba(255, 247, 214, 0.030)),
        rgba(31, 20, 7, 0.76);
      border-color: rgba(255, 211, 106, 0.30);
      color: #fff7d6;
    }

    .readiness-ramp {
      display: grid;
      grid-template-columns: minmax(280px, 0.62fr) minmax(560px, 1.38fr);
      gap: 34px;
      align-items: stretch;
      padding: 40px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 74% 8%, rgba(34, 197, 94, 0.30), transparent 31rem),
        radial-gradient(circle at 100% 84%, rgba(187, 247, 208, 0.08), transparent 24rem),
        radial-gradient(circle at 0% 100%, rgba(22, 101, 52, 0.20), transparent 25rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.010)),
        var(--panel-strong);
      border: 1px solid rgba(34, 197, 94, 0.24);
      box-shadow:
        var(--shadow),
        0 0 90px rgba(34, 197, 94, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .readiness-intro {
      position: relative;
      min-height: 100%;
      padding: 10px 4px 10px 0;
    }

    .readiness-ramp h3 {
      margin: 0 0 14px;
      color: white;
      font-size: clamp(28px, 4vw, 48px);
      line-height: 0.98;
      letter-spacing: -0.05em;
    }

    .readiness-ramp p {
      color: var(--muted);
      line-height: 1.65;
      margin: 0;
      font-size: 17px;
    }

    #readiness .kicker {
      color: #22c55e;
    }

    #readiness .btn.primary,
    #readiness .readiness-step span {
      border-color: rgba(34, 197, 94, 0.56);
      background: linear-gradient(135deg, #166534, #22c55e);
      box-shadow: 0 18px 55px rgba(34, 197, 94, 0.18);
    }

    .readiness-flow {
      display: grid;
      grid-column: 1 / -1;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
      margin-top: 6px;
      padding-top: 20px;
      border-top: 1px solid rgba(34, 197, 94, 0.18);
    }

    .readiness-step {
      display: grid;
      grid-template-columns: 30px 1fr;
      gap: 12px;
      padding: 0 18px 0 0;
      background: transparent;
      border: 0;
    }

    .readiness-step span {
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--violet), var(--gold));
      color: white;
      font-size: 11px;
      font-weight: 900;
    }

    .readiness-step b {
      display: block;
      color: white;
      margin-bottom: 4px;
    }

    .readiness-preview {
      display: grid;
      position: relative;
      min-height: 560px;
      align-items: stretch;
    }

    .radar-card,
    .result-sheet {
      position: relative;
      overflow: visible;
    }

    .radar-card::before,
    .result-sheet::before {
      content: none;
    }

    .radar-card {
      min-height: 100%;
      padding: 6px 0 0;
    }

    .preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .preview-head strong {
      color: white;
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .radar-card .preview-head {
      justify-content: center;
    }

    .radar-card .preview-head strong {
      color: #dcfce7;
      font-size: 20px;
      letter-spacing: -0.01em;
    }

    .radar-card .preview-head .preview-chip {
      display: none;
    }

    .preview-chip {
      color: #c9f7d7;
      border: 1px solid rgba(34, 197, 94, 0.18);
      background: rgba(34, 197, 94, 0.09);
      border-radius: 999px;
      padding: 6px 9px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .radar-wrap {
      position: relative;
      display: grid;
      place-items: center;
      min-height: 505px;
      --radar-center-x: 50%;
      --radar-center-y: 48%;
      padding: 0 clamp(54px, 10%, 96px) 42px clamp(54px, 10%, 96px);
      border-radius: 34px;
      background:
        radial-gradient(circle at var(--radar-center-x) var(--radar-center-y), rgba(34, 197, 94, 0.19), transparent 54%),
        radial-gradient(circle at var(--radar-center-x) var(--radar-center-y), rgba(187, 247, 208, 0.10), transparent 72%),
        repeating-radial-gradient(circle at var(--radar-center-x) var(--radar-center-y), rgba(187, 247, 208, 0.11) 0 1px, transparent 1px 46px);
      border: 0;
      box-shadow: none;
    }

    .radar-wrap::before {
      content: "";
      position: absolute;
      inset: 6% 7%;
      border-radius: 50%;
      background: radial-gradient(circle at var(--radar-center-x) var(--radar-center-y), transparent 54%, rgba(34, 197, 94, 0.08) 55%, transparent 70%);
      pointer-events: none;
    }

    .radar-svg {
      width: min(100%, 500px);
      height: auto;
      overflow: visible;
      filter: drop-shadow(0 30px 60px rgba(34, 197, 94, 0.22));
      transform: translateY(-8px);
    }

    .radar-svg text {
      fill: #c9f7d7;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.02em;
    }

    .radar-svg .axis-label {
      fill: #bbf7d0;
      font-size: 10px;
      font-weight: 850;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }

    .result-sheet {
      position: absolute;
      right: -34px;
      bottom: -6px;
      width: min(292px, 35%);
      padding: 22px;
      border-radius: 28px;
      background:
        linear-gradient(145deg, rgba(2, 12, 6, 0.90), rgba(2, 12, 6, 0.58)),
        rgba(2, 12, 6, 0.72);
      border: 1px solid rgba(187, 247, 208, 0.16);
      box-shadow:
        0 24px 70px rgba(0, 0, 0, 0.38),
        0 0 46px rgba(34, 197, 94, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(16px);
    }

    .result-sheet .preview-head {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: start;
      gap: 4px;
      margin-bottom: 18px;
    }

    .result-sheet .preview-head strong {
      color: #f0fdf4;
      font-size: 13px;
      line-height: 1.15;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .result-sheet .preview-chip {
      padding: 0;
      border: 0;
      background: transparent;
      color: #86efac;
      font-size: 10px;
      letter-spacing: 0.12em;
    }

    .result-score {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px;
      align-items: center;
      margin-bottom: 16px;
      padding: 0 0 16px;
      border-radius: 0;
      background: transparent;
      border: 0;
      border-bottom: 1px solid rgba(34, 197, 94, 0.18);
      position: relative;
      z-index: 1;
    }

    .score-orb {
      width: 76px;
      height: 76px;
      display: grid;
      place-items: center;
      border-radius: 26px;
      color: white;
      background: linear-gradient(135deg, #166534, #22c55e);
      box-shadow: 0 0 36px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
      font-size: 28px;
      font-weight: 950;
    }

    .result-score b,
    .result-row b {
      display: block;
      color: white;
      margin-bottom: 4px;
    }

    .result-score span,
    .result-row span {
      color: var(--muted);
      line-height: 1.45;
      font-size: 14px;
    }

    .result-rows {
      display: grid;
      gap: 0;
      position: relative;
      z-index: 1;
    }

    .result-row {
      padding: 12px 0;
      border-radius: 0;
      background: transparent;
      border: 0;
      border-top: 1px solid rgba(187, 247, 208, 0.10);
      box-shadow: none;
    }

    .readiness-cta {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 28px;
    }

    .quote {
      text-align: center;
      font-size: clamp(32px, 5vw, 68px);
      line-height: 0.98;
      letter-spacing: -0.06em;
      font-weight: 900;
      margin: 0;
      background: linear-gradient(180deg, #ffd36a 0%, #fbbf24 42%, #ff3e3e 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 34px rgba(251, 191, 36, 0.16), 0 0 34px rgba(255, 62, 62, 0.14);
    }

    .quote span {
      color: inherit;
    }

    .status-layout,
    .readiness-ramp,
    #solution .wrap,
    #philosophy .wrap,
    #vision .vision-system {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
      overflow: visible;
    }

    .readiness-ramp {
      align-items: start;
    }

    #solution .wrap,
    #philosophy .wrap {
      border-radius: 0;
    }

    #solution .compass-card,
    #philosophy .card,
    #research .step,
    #vision .vision-command,
    #vision .vision-module {
      box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    .final-cta {
      padding-top: 18px;
    }

    .final-cta-panel {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 28px;
      align-items: center;
      padding: 34px;
      border-radius: var(--radius);
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 62, 62, 0.18), transparent 24rem),
        radial-gradient(circle at 100% 100%, rgba(0, 122, 255, 0.18), transparent 22rem),
        linear-gradient(135deg, rgba(255, 247, 247, 0.060), rgba(245, 243, 255, 0.018)),
        var(--panel-strong);
      border: 1px solid rgba(255, 247, 247, 0.12);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    .final-cta-panel h2 {
      font-size: clamp(34px, 5vw, 58px);
      max-width: 760px;
    }

    .final-cta-panel p {
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.58;
      max-width: 760px;
    }

    .final-cta-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 12px;
    }

    footer {
      border-top: 1px solid var(--line);
      padding: 34px 0;
      color: var(--dim);
      font-size: 14px;
    }

    .footer-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
    }

    .footer-brand .brand-copy {
      gap: 5px;
    }

    .footer-title {
      color: #fffaf3;
      font-size: 14px;
      font-weight: 780;
      letter-spacing: -0.01em;
    }

    @media (max-width: 960px) {
      .hero-grid,
      .split,
      .readiness-ramp,
      .cortex-callout {
        grid-template-columns: 1fr;
      }

      .research-panel {
        width: 100%;
        margin-left: 0;
        opacity: 1;
        transform: none;
        -webkit-mask-image: none;
        mask-image: none;
      }

      .final-cta-panel {
        grid-template-columns: 1fr;
      }

      .final-cta-actions {
        justify-content: flex-start;
      }

      .card-grid {
        grid-template-columns: 1fr;
      }

      .compass-grid {
        grid-template-columns: 1fr 1fr;
      }

      .status-layout {
        grid-template-columns: 1fr;
      }

      .vision-system {
        grid-template-columns: 1fr;
      }

      .status-divider {
        width: 100%;
        min-height: 54px;
      }

      .status-divider::before {
        top: 50%;
        bottom: auto;
        left: 18px;
        right: 18px;
        width: auto;
        height: 1px;
        transform: translateY(-50%);
        background: linear-gradient(90deg, transparent, rgba(255, 62, 62, 0.78), rgba(255, 107, 107, 0.52), transparent);
      }

      .status-divider span {
        writing-mode: horizontal-tb;
        transform: none;
        padding: 8px 13px;
      }

      .readiness-flow {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }

    }

    @media (max-width: 680px) {
      .wrap {
        width: min(var(--max), calc(100% - 24px));
      }

      .nav-inner {
        height: auto;
        padding: 14px 0;
      }

      .nav-links {
        display: none;
      }

      .hero {
        padding-top: 54px;
      }

      .orbit {
        height: 320px;
      }

      .node {
        min-width: 105px;
        font-size: 11px;
      }

      .cortex-callout {
        padding: 24px;
      }

      .article-head,
      .sparring {
        padding-left: 22px;
        padding-right: 22px;
      }

      .turn {
        grid-template-columns: 1fr;
        gap: 6px;
      }

      .article-thesis {
        margin-left: 22px;
        margin-right: 22px;
      }

      .compass-grid {
        grid-template-columns: 1fr;
      }

      .status-outcomes {
        grid-template-columns: 1fr;
      }

      .status-flow {
        min-height: 64px;
      }

      .status-flow::before {
        left: 50%;
        right: auto;
        top: -10px;
        bottom: -10px;
        width: 2px;
        height: auto;
        transform: translateX(-50%);
        background: linear-gradient(180deg, rgba(255, 62, 62, 0.16), rgba(255, 62, 62, 0.84), rgba(34, 197, 94, 0.86), rgba(34, 197, 94, 0.18));
      }

      .status-flow::after {
        right: auto;
        top: auto;
        left: 50%;
        bottom: -14px;
        transform: translateX(-50%) rotate(135deg);
      }

      .status-panel {
        min-height: 0;
      }

      .status-outcome,
      .status-flow {
        min-height: 0;
      }

      .vision-command {
        min-height: 360px;
        padding: 24px;
      }

      .readiness-flow {
        grid-template-columns: 1fr;
        gap: 14px;
      }

      .readiness-preview {
        grid-template-columns: 1fr;
        min-height: 0;
      }

      .radar-wrap {
        min-height: 380px;
        padding: 0;
      }

      .result-sheet {
        position: static;
        width: auto;
        margin-top: 14px;
      }
    }

    /* ════════════════════════════════════════════════════════════════════
       year2066.ai relaunch — shared components for the multi-page site.
       Builds on the tokens and base components above; nothing here overrides
       the existing look, it only adds the new layouts (journey, pillars,
       tool stack, contact). ════════════════════════════════════════════ */

    /* nav: primary CTA button living in the nav bar */
    .nav-cta {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 850;
      color: white;
      border: 1px solid rgba(255, 107, 107, 0.54);
      background: linear-gradient(135deg, #711016, #ff4f4f);
      box-shadow: 0 12px 34px rgba(255, 62, 62, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.16);
      transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }
    .nav-cta:hover {
      transform: translateY(-1px);
      border-color: rgba(255, 218, 218, 0.7);
      box-shadow: 0 16px 42px rgba(255, 62, 62, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }
    .nav-links a.active { color: var(--text); }
    .nav-links a.active::after { opacity: 1; transform: scaleX(1); }

    /* compact page hero (sub-pages, not the big landing hero) */
    .page-hero {
      padding: 96px 0 36px;
      position: relative;
      background:
        radial-gradient(circle at 12% 6%, rgba(255, 62, 62, 0.12), transparent 28rem),
        radial-gradient(circle at 78% 0%, rgba(247, 200, 106, 0.06), transparent 32rem);
    }
    .page-hero h1 {
      font-size: clamp(40px, 6.4vw, 78px);
      line-height: 1.0;
      letter-spacing: -0.05em;
      max-width: 940px;
    }
    .page-hero .lead { max-width: 820px; }
    .page-hero .hero-actions { margin-top: 28px; }

    /* ── journey / funnel: three big stacked stages ──────────────────── */
    .journey-stages {
      display: grid;
      gap: 16px;
      margin-top: 30px;
    }
    .stage {
      position: relative;
      display: grid;
      grid-template-columns: 64px minmax(0, 1fr) auto;
      align-items: center;
      gap: 22px;
      padding: 26px 28px;
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.016)),
        var(--panel-strong);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 20px 62px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .stage::after {
      content: "";
      position: absolute;
      left: 53px;
      bottom: -16px;
      width: 2px;
      height: 16px;
      background: linear-gradient(180deg, rgba(255, 62, 62, 0.7), transparent);
    }
    .journey-stages .stage:last-child::after { display: none; }
    .stage-num {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      font-size: 22px;
      font-weight: 950;
      color: #fff;
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22), transparent 40%),
        linear-gradient(140deg, rgba(255, 62, 62, 0.34), rgba(82, 11, 15, 0.5));
      border: 1px solid rgba(255, 211, 106, 0.30);
      box-shadow: 0 0 30px rgba(255, 62, 62, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }
    .stage-label {
      display: inline-flex;
      margin-bottom: 8px;
      color: #ffc7c7;
      font-size: 11px;
      font-weight: 950;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      opacity: 0.9;
    }
    .stage-body strong {
      display: block;
      color: white;
      font-size: clamp(20px, 2.4vw, 27px);
      letter-spacing: -0.03em;
      margin-bottom: 8px;
    }
    .stage-body p { margin: 0; color: var(--muted); line-height: 1.6; max-width: 640px; }
    .stage-cta { white-space: nowrap; }
    .stage.stage-accent {
      background:
        radial-gradient(circle at 0% 0%, rgba(255, 62, 62, 0.22), transparent 22rem),
        radial-gradient(circle at 100% 100%, rgba(255, 107, 107, 0.12), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.016)),
        var(--panel-strong);
      border-color: rgba(255, 62, 62, 0.34);
      box-shadow: 0 26px 72px rgba(0, 0, 0, 0.28), 0 0 54px rgba(255, 62, 62, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.07);
    }

    /* ── pillars: three wayfinding cards on the landing page ─────────── */
    .pillar-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .pillar-card {
      display: flex;
      flex-direction: column;
      min-height: 280px;
      padding: 28px;
      border-radius: 26px;
      background:
        radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.085), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
        rgba(15, 14, 15, 0.78);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 20px 62px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.05);
      transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }
    .pillar-card:hover {
      transform: translateY(-3px);
      border-color: rgba(255, 107, 107, 0.4);
      box-shadow: 0 26px 72px rgba(0, 0, 0, 0.32), 0 0 44px rgba(255, 62, 62, 0.12);
    }
    .pillar-card .num { margin-bottom: 18px; }
    .pillar-card strong { display: block; color: white; font-size: 22px; letter-spacing: -0.03em; margin-bottom: 12px; }
    .pillar-card p { color: var(--muted); line-height: 1.62; margin: 0 0 20px; }
    .pillar-card .pillar-link {
      margin-top: auto;
      color: #ff8a8a;
      font-weight: 850;
      font-size: 14px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .pillar-card .pillar-link::after { content: "→"; transition: transform 160ms ease; }
    .pillar-card:hover .pillar-link::after { transform: translateX(4px); }

    /* ── tool stack: grouped capability cards (products page) ─────────── */
    .tool-group { margin-top: 34px; }
    .tool-group-head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 16px;
    }
    .tool-group-head h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ffd36a;
    }
    .tool-group-head::after {
      content: "";
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, rgba(255, 211, 106, 0.4), transparent);
    }
    .tool-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .tool-card {
      padding: 22px;
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.09);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 250, 240, 0.04);
      transition: transform 160ms ease, border-color 160ms ease;
    }
    .tool-card:hover { transform: translateY(-2px); border-color: rgba(255, 107, 107, 0.34); }
    .tool-card .tool-tag {
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.10em;
      color: #fff7f7;
      background: rgba(255, 62, 62, 0.16);
      border: 1px solid rgba(255, 62, 62, 0.28);
    }
    .tool-card p { margin: 0; color: var(--muted); line-height: 1.58; font-size: 15px; }

    /* substance chips row */
    .substance-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 26px;
    }
    .substance-row span {
      padding: 9px 15px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      color: #e8eaf3;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)), rgba(13, 8, 18, 0.7);
      border: 1px solid rgba(255, 247, 247, 0.13);
    }

    /* screenshot gallery */
    .shot-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .shot {
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.10);
      background: rgba(8, 6, 8, 0.8);
      box-shadow: 0 22px 64px rgba(0, 0, 0, 0.34);
    }
    .shot img { display: block; width: 100%; height: auto; }

    /* phase block (services) — header + sub-cards */
    .phase {
      margin-top: 20px;
      padding: 26px;
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
        var(--panel-strong);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .phase-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
    .phase-head .stage-label { margin-bottom: 0; }
    .phase-head h3 { margin: 0; font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.035em; color: #fff7f7; }
    .phase-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .phase-cards.two { grid-template-columns: repeat(2, 1fr); }
    .phase-cards.one { grid-template-columns: 1fr; }
    .phase-item {
      padding: 20px;
      border-radius: 20px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)), rgba(20, 12, 14, 0.6);
      border: 1px solid rgba(255, 62, 62, 0.14);
    }
    .phase-item b { display: block; color: #fff; font-size: 18px; margin-bottom: 8px; letter-spacing: -0.02em; }
    .phase-item p { margin: 0; color: var(--muted); line-height: 1.56; }

    /* option chips (call types) */
    .opt-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
    .opt-row span {
      padding: 10px 16px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 850;
      color: #dcfce7;
      background: rgba(34, 197, 94, 0.10);
      border: 1px solid rgba(34, 197, 94, 0.22);
    }

    /* contact: two-card split + booking slot */
    .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; }
    .contact-card {
      padding: 30px;
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.016)),
        var(--panel-strong);
      border: 1px solid rgba(255, 255, 255, 0.11);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }
    .contact-card h3 { margin: 0 0 10px; font-size: 26px; letter-spacing: -0.03em; }
    .contact-card > p { color: var(--muted); line-height: 1.62; margin: 0 0 18px; }
    .booking-slot {
      display: grid;
      place-items: center;
      min-height: 200px;
      margin-top: 18px;
      padding: 24px;
      text-align: center;
      border-radius: 22px;
      color: var(--dim);
      background: rgba(8, 6, 10, 0.6);
      border: 1px dashed rgba(255, 255, 255, 0.16);
    }

    /* ── BOOK_CALL page: value column + Cal.com embed column ─────────────── */
    .book-wrap { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 18px; align-items: start; }
    .book-aside { position: sticky; top: 96px; }
    .opt-row.opt-col { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 0; }
    .opt-row.opt-col span { text-align: center; }
    .book-meta { margin: 18px 0 0; color: var(--muted); font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
    .book-hint { margin: 18px 0 16px; color: var(--dim); font-size: 14px; line-height: 1.55; }
    /* once the embed mounts, drop the placeholder framing so Cal.com owns the box */
    .booking-slot.is-live {
      display: block;
      place-items: stretch;
      min-height: 640px;
      padding: 0;
      text-align: left;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.08);
      overflow: hidden;
    }
    .booking-slot.is-live iframe { width: 100%; border: 0; }

    @media (max-width: 960px) {
      .book-wrap { grid-template-columns: 1fr; }
      .book-aside { position: static; }
    }

    @media (max-width: 960px) {
      .pillar-grid,
      .tool-grid,
      .phase-cards,
      .phase-cards.two,
      .contact-grid { grid-template-columns: 1fr; }
      .shot-grid { grid-template-columns: 1fr; }
      .stage { grid-template-columns: 56px minmax(0, 1fr); }
      .stage-cta { grid-column: 1 / -1; justify-self: start; }
    }
    @media (max-width: 680px) {
      .nav-cta { display: none; }
      .stage { grid-template-columns: 1fr; text-align: left; }
      .stage::after { display: none; }
    }

    /* ── shared site footer — minimal single band ────────────────────── */
    .site-footer {
      margin-top: 48px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(180deg, rgba(7, 5, 5, 0.35), rgba(5, 4, 4, 0.8));
    }
    .footer-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 16px 28px;
      padding: 26px 0 18px;
    }
    .footer-brand { display: flex; align-items: center; gap: 12px; }
    .footer-brand .brand-mark { width: 36px; height: 36px; flex: none; }
    .footer-brand .brand-copy { display: grid; gap: 3px; line-height: 1; }
    .footer-brand .brand-word {
      font-weight: 900;
      font-size: 17px;
      letter-spacing: 0.10em;
      color: #fffaf3;
    }
    .footer-brand .brand-word span { color: #ff2f2f; }
    .footer-brand .brand-subtitle {
      color: #ff2f2f;
      font-size: 9px;
      font-weight: 850;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .footer-links {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 20px;
    }
    .footer-links a {
      color: var(--muted);
      font-size: 13.5px;
      transition: color 150ms ease;
    }
    .footer-links a:hover { color: var(--text); }
    .footer-mail {
      color: var(--muted);
      font-size: 13.5px;
      transition: color 150ms ease;
    }
    .footer-mail:hover { color: #ff8a8a; }
    .footer-base {
      padding: 12px 0 30px;
      color: var(--dim);
      font-size: 12.5px;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
    @media (max-width: 680px) {
      .footer-bar { flex-direction: column; align-items: flex-start; }
    }

    /* ── legal pages: narrow readable column ─────────────────────────── */
    .legal {
      max-width: 760px;
      padding: 92px 0 40px;
    }
    .legal h1 {
      font-size: clamp(34px, 5vw, 52px);
      letter-spacing: -0.04em;
      margin: 0 0 8px;
    }
    .legal .legal-meta { color: var(--dim); font-size: 14px; margin: 0 0 32px; }
    .legal h2 {
      font-size: 19px;
      letter-spacing: -0.01em;
      margin: 34px 0 10px;
      color: #fff;
    }
    .legal p, .legal li { color: var(--muted); line-height: 1.72; font-size: 16px; }
    .legal ul { padding-left: 20px; margin: 8px 0; }
    .legal a { color: #ff8a8a; }
    .legal a:hover { text-decoration: underline; }

    /* ════════════════════════════════════════════════════════════════════
       Gated journey — linear funnel Step 1 → 2 → 3 with locked states.
       Visual gating only (no hard enforcement; backend comes later). ═══ */

    /* Step badge: number for unlocked, lock glyph for gated steps */
    .stage.locked {
      opacity: 0.62;
      filter: saturate(0.7);
    }
    .stage.locked .stage-num {
      background:
        linear-gradient(140deg, rgba(120, 120, 130, 0.30), rgba(40, 40, 46, 0.5));
      border-color: rgba(255, 255, 255, 0.18);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      color: #c9d1d9;
    }
    .stage.locked .stage-cta {
      pointer-events: auto;            /* still clickable — visual gating only */
    }
    .stage .lock-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.04em;
      color: #c9b8b0;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .stage.is-required .stage-num {
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.24), transparent 40%),
        linear-gradient(140deg, rgba(63, 185, 80, 0.42), rgba(11, 60, 27, 0.6));
      border-color: rgba(63, 185, 80, 0.4);
      box-shadow: 0 0 28px rgba(63, 185, 80, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    }
    .req-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 10px;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #dcfce7;
      background: rgba(34, 197, 94, 0.12);
      border: 1px solid rgba(34, 197, 94, 0.30);
    }

    /* Step 3 catalogue teaser (locked, shown only as a preview) */
    .catalog-teaser {
      margin-top: 14px;
      padding: 26px 28px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 211, 106, 0.08), transparent 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
        rgba(14, 11, 14, 0.7);
      border: 1px dashed rgba(255, 211, 106, 0.26);
    }
    .catalog-teaser .lock-head {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #ffd36a;
      font-weight: 850;
      margin-bottom: 8px;
    }
    .catalog-teaser p { margin: 0; color: var(--muted); line-height: 1.6; }

    /* catalogue grid (the rough offering: 2 columns of options) */
    .catalog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 16px;
    }
    .catalog-card {
      padding: 22px;
      border-radius: 22px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 250, 240, 0.04);
    }
    .catalog-card .cat-tag {
      display: inline-block;
      margin-bottom: 12px;
      padding: 5px 11px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #ffe9b3;
      background: rgba(255, 211, 106, 0.12);
      border: 1px solid rgba(255, 211, 106, 0.26);
    }
    .catalog-card.is-product .cat-tag {
      color: #cfe1ff;
      background: rgba(33, 167, 255, 0.12);
      border-color: rgba(33, 167, 255, 0.30);
    }
    .catalog-card strong { display: block; color: #fff; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 8px; }
    .catalog-card p { margin: 0; color: var(--muted); line-height: 1.56; }
    .catalog-card .cat-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
    .catalog-card .cat-opts span {
      padding: 7px 12px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 800;
      color: #e8eaf3;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }
    .catalog-note {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 18px;
      padding: 14px 18px;
      border-radius: 16px;
      color: #ffe9b3;
      background: rgba(255, 211, 106, 0.07);
      border: 1px solid rgba(255, 211, 106, 0.20);
      font-size: 14px;
      font-weight: 700;
    }
    @media (max-width: 960px) {
      .catalog-grid { grid-template-columns: 1fr; }
    }

    /* ── DATA ENGINE flow: 4 steps Merge→Clean→Normalize→Prime ───────── */
    .engine-flow {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
      margin-top: 8px;
      counter-reset: estep;
    }
    .engine-card {
      position: relative;
      padding: 24px 22px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(247, 200, 106, 0.08), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 250, 240, 0.04);
    }
    .engine-card::before {
      counter-increment: estep;
      content: counter(estep);
      display: grid;
      place-items: center;
      width: 38px; height: 38px;
      margin-bottom: 14px;
      border-radius: 12px;
      font-weight: 900;
      color: #fff;
      background: linear-gradient(135deg, var(--violet), var(--gold));
      box-shadow: 0 0 22px rgba(255, 62, 62, 0.20);
    }
    .engine-card::after {
      content: "→";
      position: absolute;
      right: -12px; top: 42px;
      color: var(--warm-gold);
      font-weight: 900;
      opacity: 0.7;
    }
    .engine-flow .engine-card:last-child::after { display: none; }
    .engine-card b { display: block; color: #fff; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 8px; }
    .engine-card p { margin: 0; color: var(--muted); line-height: 1.56; font-size: 15px; }

    /* ── Principles: punchline + tiny value example ──────────────────── */
    .principle-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .principle-card {
      padding: 26px 28px;
      border-radius: 24px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel-strong);
      border-left: 3px solid var(--gold);
      box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    .principle-card b {
      display: block;
      color: #fff;
      font-size: clamp(19px, 2.1vw, 23px);
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .principle-card p { margin: 0; color: var(--muted); line-height: 1.6; }

    /* ── demo video frame ────────────────────────────────────────────── */
    .demo-frame {
      border-radius: 22px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: #0a0708;
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 62, 62, 0.08);
    }
    .demo-frame video, .demo-frame img { display: block; width: 100%; height: auto; }

    @media (max-width: 960px) {
      .engine-flow { grid-template-columns: 1fr 1fr; }
      .engine-card::after { display: none; }
      .principle-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .engine-flow { grid-template-columns: 1fr; }
    }

    /* ── Readyness check as a hero deliverable (services step 1) ──────── */
    .check-feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 8px;
    }
    .check-feature {
      padding: 22px;
      border-radius: 22px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 62, 62, 0.10), transparent 14rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 16px 50px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 250, 240, 0.04);
    }
    .check-feature b { display: block; color: #fff; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 8px; }
    .check-feature p { margin: 0; color: var(--muted); line-height: 1.56; font-size: 15px; }
    .check-cta-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 14px 20px;
      margin-top: 26px;
    }
    .check-note { color: var(--dim); font-size: 14px; font-weight: 700; }

    /* report preview frame (the recorded readyness report) */
    .report-frame {
      position: relative;
      margin-top: 26px;
      border-radius: 22px;
      overflow: hidden;
      max-height: 520px;
      border: 1px solid rgba(255, 62, 62, 0.20);
      box-shadow: 0 30px 90px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 62, 62, 0.10);
    }
    .report-frame video, .report-frame img { display: block; width: 100%; height: auto; }
    .report-frame::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 120px;
      background: linear-gradient(180deg, transparent, rgba(5, 3, 4, 0.92));
      pointer-events: none;
    }
    .report-frame .report-badge {
      position: absolute;
      left: 18px; bottom: 16px;
      z-index: 2;
      padding: 7px 14px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 850;
      color: #fff;
      background: linear-gradient(135deg, var(--violet), var(--gold));
      box-shadow: 0 0 26px rgba(255, 62, 62, 0.28);
    }

    @media (max-width: 960px) {
      .check-feature-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 680px) {
      .check-feature-grid { grid-template-columns: 1fr; }
    }

    /* disabled / locked CTA (e.g. gated journey stages while feature is offline) */
    .btn.is-disabled {
      cursor: not-allowed;
      opacity: 0.5;
      pointer-events: none;
      box-shadow: none;
      border-color: rgba(255, 255, 255, 0.10);
      background: rgba(255, 255, 255, 0.04);
    }

    /* ── Step 3 catalogue: two clear tracks (Consulting / Produkt) ────── */
    .catalog-track { margin-top: 22px; }
    .track-head { margin-bottom: 14px; }
    .track-tag {
      display: inline-block;
      padding: 7px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ffe9b3;
      background: rgba(247, 200, 106, 0.12);
      border: 1px solid rgba(247, 200, 106, 0.30);
    }
    .track-tag.is-product {
      color: #cfe1ff;
      background: rgba(33, 167, 255, 0.12);
      border-color: rgba(33, 167, 255, 0.30);
    }
    /* package detail: the A to Z phases, compact and grouped under Consulting */
    .pkg-detail {
      margin-top: 14px;
      padding: 22px 24px;
      border-radius: 20px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012)),
        rgba(14, 11, 14, 0.6);
      border: 1px solid rgba(255, 255, 255, 0.09);
    }
    .pkg-detail-head {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #a89588;
      margin-bottom: 16px;
    }
    .phase-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .phase-mini {
      padding: 16px 18px;
      border-radius: 16px;
      background: rgba(255, 62, 62, 0.05);
      border: 1px solid rgba(255, 62, 62, 0.14);
    }
    .phase-mini .stage-label { display: block; margin-bottom: 6px; }
    .phase-mini b { display: block; color: #fff; font-size: 16px; letter-spacing: -0.02em; margin-bottom: 6px; }
    .phase-mini p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 14px; }
    @media (max-width: 760px) { .phase-row { grid-template-columns: 1fr; } }

    /* ── full module stack: 9 groups with module chips ───────────────── */
    .stack-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin-top: 8px;
    }
    .stack-group {
      padding: 26px 28px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 100% 0%, rgba(255, 62, 62, 0.08), transparent 16rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.014)),
        var(--panel);
      border: 1px solid rgba(255, 255, 255, 0.10);
      box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 250, 240, 0.04);
    }
    .stack-group > h3 {
      margin: 0 0 8px;
      font-size: 13px;
      font-weight: 900;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: #ffd36a;
    }
    .stack-group > p { margin: 0 0 16px; color: var(--muted); line-height: 1.58; font-size: 15px; }
    .stack-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .stack-chips span {
      padding: 6px 12px;
      border-radius: 999px;
      font-size: 12.5px;
      font-weight: 750;
      color: #e8eaf3;
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(255, 255, 255, 0.11);
      white-space: nowrap;
    }
    /* backend group: highlight as the foundation */
    .stack-group.is-backend {
      grid-column: 1 / -1;
      background:
        radial-gradient(circle at 0% 0%, rgba(247, 200, 106, 0.10), transparent 22rem),
        radial-gradient(circle at 100% 100%, rgba(255, 62, 62, 0.10), transparent 22rem),
        linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.016)),
        var(--panel-strong);
      border-color: rgba(247, 200, 106, 0.22);
    }
    .stack-group.is-backend > h3 { color: #ffe9b3; }
    .stack-group.is-backend .stack-chips span {
      background: rgba(247, 200, 106, 0.08);
      border-color: rgba(247, 200, 106, 0.22);
      color: #ffe9b3;
    }
    @media (max-width: 880px) { .stack-grid { grid-template-columns: 1fr; } }

    /* ════════════════════════════════════════════════════════════════════
       Hero animation: CHAOS → ORDER (index). A field of scattered, jittering
       data fragments on the left resolves into clean, aligned layers on the
       right. Pure CSS, no JS. Matches "Von Datenchaos zu KI, die liefert".
       ════════════════════════════════════════════════════════════════════ */
    .chaos-order {
      position: relative;
      container-type: size;
      width: calc(100% + 92px);
      margin-left: -72px;
      height: 440px;
      border-radius: var(--radius);
      overflow: hidden;
      background:
        radial-gradient(circle at 16% 50%, rgba(255, 62, 62, 0.09), transparent 40%),
        radial-gradient(circle at 84% 50%, rgba(247, 200, 106, 0.06), transparent 42%),
        linear-gradient(155deg, rgba(18, 12, 12, 0.92), rgba(5, 5, 6, 0.92) 62%, rgba(7, 9, 13, 0.94));
      box-shadow: 0 48px 132px rgba(0, 0, 0, 0.50), 0 18px 58px rgba(139, 17, 24, 0.10);
      transform: scale(1.06);
      transform-origin: center left;
      -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.72) 14%, #000 30%);
      mask-image: linear-gradient(90deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.72) 14%, #000 30%);
    }
    .chaos-order::before {
      content: "";
      position: absolute; inset: -1px;
      background: linear-gradient(135deg, rgba(255,211,106,0.07), transparent 34%, rgba(255,62,62,0.10));
      opacity: 0.5; pointer-events: none;
    }
    /* the vertical seam where chaos turns into order */
    .co-seam {
      position: absolute; left: 50%; top: 14%; bottom: 14%;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(255,62,62,0.28), rgba(247,200,106,0.20), transparent);
      z-index: 3;
    }
    .co-seam::after {
      content: "";
      position: absolute; left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,107,107,0.6);
      box-shadow: 0 0 14px rgba(255,62,62,0.30);
    }
    .co-label {
      position: absolute; bottom: 16px;
      font-size: 10px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
      color: #6f6258; z-index: 4;
    }
    .co-label.left { left: 4%; color: rgba(255,138,138,0.6); }
    .co-label.right { right: 22px; color: rgba(255,217,168,0.65); text-align: right; }

    /* a fragment = one data bit */
    .co-bit {
      position: absolute;
      width: var(--w, 26px); height: 7px;
      border-radius: 3px;
      background: var(--c, rgba(226,232,240,0.55));
      will-change: transform, opacity;
      animation: coFlow var(--dur, 11s) ease-in-out infinite;
      animation-delay: var(--d, 0s);
    }
    /* chaos start (scattered, jittered) -> order end (aligned rows on the right).
       Each bit travels from its random chaotic spot to a tidy target row. */
    @keyframes coFlow {
      0%   { transform: translate(0,0); opacity: 0; }
      10%  { opacity: 0.7; }
      34%  { transform: translate(var(--mx, 40px), var(--my, 0px)); opacity: 0.85; }
      88%  { transform: translate(var(--mx, 40px), var(--my, 0px)); opacity: 0.85; }
      100% { transform: translate(var(--mx, 40px), var(--my, 0px)); opacity: 0; }
    }
    /* the ordered target grid faintly shown on the right as guide lines */
    .co-order-grid {
      position: absolute; right: 5%; left: 50%; top: 12%; bottom: 16%;
      display: grid; grid-template-rows: repeat(6, 1fr); gap: 0;
      opacity: 0.6; z-index: 1;
    }
    .co-order-grid i {
      position: relative;
      border-top: 1px solid rgba(247, 200, 106, 0.06);
    }
    .co-order-grid i::before {
      content: ""; position: absolute; left: 0; top: 50%;
      width: 3px; height: 3px; border-radius: 50%;
      transform: translateY(-50%);
      background: rgba(247, 200, 106, 0.32);
    }
    @media (prefers-reduced-motion: reduce) {
      .co-bit { animation: none; opacity: 0.85; transform: translate(var(--mx,40px), var(--my,0px)); }
    }
    @media (max-width: 960px) {
      .chaos-order { width: 100%; margin-left: 0; transform: none; height: 320px;
        -webkit-mask-image: none; mask-image: none; }
    }

    /* centered orbit panel (mission page) — neutralises the hero-grid offset/scale */
    .research-panel--center {
      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      transform: none;
      opacity: 1;
      -webkit-mask-image: none;
      mask-image: none;
    }