/* ==========================================================================
       ADUMU CORPORATE B&W CRT HUD DESIGN SYSTEM — TECH MEETS SCIENCE
       Single-File Standalone Edition with Multi-Screen CRT Transitions
       ========================================================================== */

    :root {
      --bg-deep: #000000;
      --bg-tube: #040507;
      --bg-panel: #0A0C10;
      --bg-panel-hover: #12151B;

      --crt-white: #FFFFFF;
      --crt-silver: #E4E8EE;
      --crt-dim: #94A3B8;
      --crt-faint: #475569;
      --crt-dark: #1E293B;

      --border-stark: #FFFFFF;
      --border-subtle: rgba(255, 255, 255, 0.4);
      --border-faint: rgba(255, 255, 255, 0.18);
      --grid-line: rgba(255, 255, 255, 0.08);

      --font-hero: 'Orbitron', 'Space Grotesk', -apple-system, sans-serif;
      --font-mono: 'JetBrains Mono', 'Courier New', monospace;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

      --frame-padding: clamp(12px, 2.5vw, 32px);
      --max-width: 1380px;
    }

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

    html {
      scroll-behavior: smooth;
      font-size: 16px;
      background-color: #000000;
      color: var(--crt-white);
      font-family: var(--font-sans);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    body.hud-body {
      min-height: 100vh;
      position: relative;
      overflow-x: hidden;
      background: #000000;
    }

    /* --- CRT Overlays & Shaders --- */
    .crt-scanlines {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9999;
      background: linear-gradient(
        rgba(18, 18, 18, 0) 50%, 
        rgba(0, 0, 0, 0.5) 50%
      );
      background-size: 100% 3px;
      opacity: 0.75;
      transition: opacity 0.3s;
    }
    .crt-scanlines.disabled { opacity: 0; }

    .crt-rolling-beam {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 140px;
      pointer-events: none;
      z-index: 9998;
      background: linear-gradient(
        0deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.07) 50%, 
        rgba(255, 255, 255, 0) 100%
      );
      animation: crtBeamSweep 6.5s linear infinite;
    }
    @keyframes crtBeamSweep {
      0% { transform: translateY(-150px); }
      100% { transform: translateY(105vh); }
    }

    .crt-tube-vignette {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9997;
      background: radial-gradient(
        circle at 50% 50%,
        rgba(0, 0, 0, 0) 65%,
        rgba(0, 0, 0, 0.45) 85%,
        rgba(0, 0, 0, 0.9) 100%
      );
      box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.95);
    }

    .crt-flicker-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 9996;
      background: rgba(255, 255, 255, 0.012);
      animation: crtFlicker 0.12s infinite;
    }
    @keyframes crtFlicker {
      0% { opacity: 0.98; }
      50% { opacity: 1.02; }
      100% { opacity: 0.99; }
    }

    .hud-grid-background {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none;
      z-index: 0;
    }
    .grid-lines {
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: 0.7;
    }

    /* Corner Registration Crosshairs */
    .corner-registration {
      position: absolute;
      width: 18px;
      height: 18px;
      pointer-events: none;
    }
    .corner-registration::before, .corner-registration::after {
      content: '';
      position: absolute;
      background: var(--crt-white);
      box-shadow: 0 0 4px #FFF;
    }
    .corner-registration.top-left { top: 12px; left: 12px; }
    .corner-registration.top-left::before { top: 0; left: 0; width: 100%; height: 2px; }
    .corner-registration.top-left::after { top: 0; left: 0; width: 2px; height: 100%; }
    .corner-registration.top-right { top: 12px; right: 12px; }
    .corner-registration.top-right::before { top: 0; right: 0; width: 100%; height: 2px; }
    .corner-registration.top-right::after { top: 0; right: 0; width: 2px; height: 100%; }
    .corner-registration.bottom-left { bottom: 12px; left: 12px; }
    .corner-registration.bottom-left::before { bottom: 0; left: 0; width: 100%; height: 2px; }
    .corner-registration.bottom-left::after { bottom: 0; left: 0; width: 2px; height: 100%; }
    .corner-registration.bottom-right { bottom: 12px; right: 12px; }
    .corner-registration.bottom-right::before { bottom: 0; right: 0; width: 100%; height: 2px; }
    .corner-registration.bottom-right::after { bottom: 0; right: 0; width: 2px; height: 100%; }

    /* --- Outer HUD Shell & Framing --- */
    .hud-outer-frame {
      position: relative;
      z-index: 10;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 14px var(--frame-padding) 40px;
      border-left: 2px solid var(--crt-white);
      border-right: 2px solid var(--crt-white);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* --- Tactical Header --- */
    .hud-header {
      position: sticky;
      top: 8px;
      z-index: 1000;
      margin-bottom: 20px;
    }

    .header-chassis {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 12px 20px;
      background: rgba(0, 0, 0, 0.95);
      backdrop-filter: blur(12px);
      border: 2px solid var(--crt-white);
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.2);
    }

    /* ADUMU Pure Text Wordmark (ADUMU is the logo) */
    .brand-block {
      display: flex;
      align-items: flex-start;
      flex-direction: column;
      text-decoration: none;
      color: #FFF;
      cursor: pointer;
    }

    .brand-logo {
      font-family: var(--font-hero);
      font-size: 1.55rem;
      font-weight: 900;
      letter-spacing: 0.18em;
      color: #FFF;
      line-height: 1;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.8), 0 0 2px #FFFFFF;
    }

    .brand-sub {
      font-family: var(--font-mono);
      font-size: 0.6rem;
      letter-spacing: 0.22em;
      color: var(--crt-silver);
      margin-top: 3px;
      font-weight: 700;
      opacity: 0.85;
    }

    /* Screen Tab Navigation */
    .hud-nav-screens {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .screen-tab-btn {
      background: transparent;
      border: 1px solid var(--border-subtle);
      color: var(--crt-dim);
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 700;
      padding: 6px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .screen-tab-btn .tab-num {
      color: #FFF;
      font-size: 0.65rem;
      opacity: 0.7;
    }

    .screen-tab-btn:hover {
      color: #FFF;
      border-color: #FFF;
      background: rgba(255, 255, 255, 0.08);
      text-shadow: 0 0 6px #FFF;
    }

    .screen-tab-btn.active {
      background: #FFF;
      color: #000;
      border-color: #FFF;
      font-weight: 800;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
    }
    .screen-tab-btn.active .tab-num {
      color: #000;
      opacity: 1;
    }

    .header-controls {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .hud-btn-mini {
      background: #000;
      border: 1px solid var(--border-subtle);
      color: var(--crt-dim);
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 700;
      padding: 5px 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .hud-btn-mini:hover, .hud-btn-mini.active {
      color: #000;
      background: #FFF;
      border-color: #FFF;
    }

    .mobile-toggle-btn {
      display: none;
      flex-direction: column;
      justify-content: space-around;
      width: 32px;
      height: 30px;
      background: #000;
      border: 1px solid #FFF;
      padding: 5px;
      cursor: pointer;
    }
    .hamburger-bar {
      width: 100%;
      height: 2px;
      background: #FFF;
    }

    /* Mobile Drawer */
    .mobile-drawer {
      display: block;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.35s ease, opacity 0.25s ease;
      background: #000;
      border-top: 2px solid #FFF;
      margin-top: 10px;
      opacity: 0;
      pointer-events: none;
    }
    .mobile-drawer.open {
      max-height: 500px;
      opacity: 1;
      pointer-events: auto;
    }
    .mobile-drawer-inner {
      padding: 16px 12px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .m-screen-btn {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--crt-dim);
      padding: 10px 14px;
      background: #08090C;
      border: 1px solid var(--border-subtle);
      border-left: 4px solid var(--border-subtle);
      text-align: left;
      cursor: pointer;
    }
    .m-screen-btn.active, .m-screen-btn:hover {
      color: #000;
      background: #FFF;
      border-left-color: #000;
    }

    /* ==========================================================================
       CRT SCREEN CONTAINER & TRANSITIONS
       ========================================================================== */
    .crt-main-stage {
      position: relative;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .crt-screen-panel {
      display: none;
      position: relative;
      opacity: 0;
    }

    .crt-screen-panel.active {
      display: block;
      opacity: 1;
      animation: crtScreenPowerOn 0.35s ease-out forwards;
    }

    @keyframes crtScreenPowerOn {
      0% {
        opacity: 0;
        transform: scaleY(0.005) scaleX(0.9);
        filter: brightness(5);
      }
      40% {
        opacity: 1;
        transform: scaleY(0.015) scaleX(1);
        filter: brightness(3);
      }
      70% {
        transform: scaleY(1.03) scaleX(1.01);
        filter: brightness(1.5);
      }
      100% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
    }

    .crt-screen-panel.transitioning-out {
      display: block;
      animation: crtScreenPowerOff 0.22s ease-in forwards;
    }

    @keyframes crtScreenPowerOff {
      0% {
        opacity: 1;
        transform: scale(1);
        filter: brightness(1);
      }
      50% {
        opacity: 0.9;
        transform: scaleY(0.015) scaleX(1);
        filter: brightness(4);
      }
      100% {
        opacity: 0;
        transform: scaleY(0.002) scaleX(0.4);
        filter: brightness(8);
      }
    }

    /* ==========================================================================
       REUSABLE HUD COMPONENTS & TYPOGRAPHY
       ========================================================================== */
    .hud-box {
      position: relative;
      background: #000000;
      border: 2px solid var(--border-stark);
      padding: clamp(18px, 3vw, 32px);
      margin-bottom: 24px;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.08);
    }

    .corner-bracket {
      position: absolute;
      width: 14px;
      height: 14px;
      pointer-events: none;
      z-index: 5;
    }
    .corner-bracket::before, .corner-bracket::after {
      content: '';
      position: absolute;
      background: #FFF;
      box-shadow: 0 0 4px #FFF;
    }
    .corner-bracket.tl { top: -2px; left: -2px; }
    .corner-bracket.tl::before { top: 0; left: 0; width: 100%; height: 2px; }
    .corner-bracket.tl::after { top: 0; left: 0; width: 2px; height: 100%; }
    .corner-bracket.tr { top: -2px; right: -2px; }
    .corner-bracket.tr::before { top: 0; right: 0; width: 100%; height: 2px; }
    .corner-bracket.tr::after { top: 0; right: 0; width: 2px; height: 100%; }
    .corner-bracket.bl { bottom: -2px; left: -2px; }
    .corner-bracket.bl::before { bottom: 0; left: 0; width: 100%; height: 2px; }
    .corner-bracket.bl::after { bottom: 0; left: 0; width: 2px; height: 100%; }
    .corner-bracket.br { bottom: -2px; right: -2px; }
    .corner-bracket.br::before { bottom: 0; right: 0; width: 100%; height: 2px; }
    .corner-bracket.br::after { bottom: 0; right: 0; width: 2px; height: 100%; }

    .screen-header {
      margin-bottom: 24px;
      border-left: 3px solid #FFF;
      padding-left: 16px;
    }
    .screen-tag {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      background: #000;
      color: #FFF;
      padding: 2px 8px;
      border: 1px solid #FFF;
      margin-bottom: 6px;
    }
    .screen-title {
      font-family: var(--font-hero);
      font-size: clamp(1.5rem, 2.6vw, 2.3rem);
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #FFF;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
    }
    .screen-lede {
      font-size: 1rem;
      color: var(--crt-silver);
      margin-top: 6px;
      max-width: 75ch;
      line-height: 1.5;
    }

    .btn-tech-primary {
      background: #FFF;
      color: #000;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 10px 18px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid #FFF;
      box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-tech-primary:hover {
      background: #000;
      color: #FFF;
      box-shadow: 0 0 18px #FFF;
    }

    .btn-tech-secondary {
      background: transparent;
      color: #FFF;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 10px 18px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 1px solid var(--border-subtle);
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .btn-tech-secondary:hover {
      border-color: #FFF;
      background: rgba(255, 255, 255, 0.1);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }

    /* ==========================================================================
       SCREEN 1: OVERVIEW / HOMEPAGE
       ========================================================================== */
    .hero-banner-wrap {
      text-align: center;
      padding: clamp(24px, 4vw, 48px) 16px clamp(20px, 3vw, 36px);
      margin-bottom: 24px;
    }

    .hero-corp-title {
      font-family: var(--font-hero);
      font-size: clamp(3rem, 8vw, 6.5rem);
      font-weight: 900;
      letter-spacing: 0.14em;
      color: #FFFFFF;
      line-height: 0.95;
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
    }

    .hero-tagline-sub {
      font-family: var(--font-mono);
      font-size: clamp(0.85rem, 1.3vw, 1.15rem);
      letter-spacing: 0.2em;
      color: var(--crt-silver);
      margin-top: 14px;
      font-weight: 600;
    }

    .hero-value-statement {
      margin: 24px auto 32px;
      max-width: 68ch;
      font-size: clamp(1.05rem, 1.8vw, 1.35rem);
      font-weight: 500;
      line-height: 1.5;
      color: #FFFFFF;
      text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
    }
    .hero-value-statement strong {
      font-weight: 800;
      text-decoration: underline;
    }

    .overview-pillars-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }

    .pillar-card {
      background: #000;
      border: 2px solid var(--border-stark);
      padding: 24px;
      display: flex;
      flex-direction: column;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.06);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .pillar-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
    }

    .pillar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
    }
    .pillar-subdomain {
      color: #FFF;
      font-weight: 800;
      border: 1px solid #FFF;
      padding: 2px 6px;
      text-decoration: none;
    }

    .pillar-title {
      font-family: var(--font-hero);
      font-size: 1.5rem;
      font-weight: 900;
      color: #FFF;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }

    .pillar-category {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--crt-dim);
      margin-bottom: 14px;
      font-weight: 600;
    }

    .pillar-plain-desc {
      font-size: 0.92rem;
      color: var(--crt-silver);
      line-height: 1.55;
      margin-bottom: 20px;
      flex: 1;
    }

    .pillar-highlights {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      color: var(--crt-silver);
      border-top: 1px dashed var(--border-subtle);
      padding-top: 14px;
    }
    .pillar-highlights li span {
      color: #FFF;
      font-weight: 900;
      margin-right: 6px;
    }

    .pillar-actions {
      display: flex;
      gap: 10px;
      align-items: center;
    }

    .overview-facts-strip {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      background: #08090C;
      border: 1px solid var(--border-subtle);
      padding: 18px;
    }
    .fact-item { text-align: center; }
    .fact-metric {
      font-family: var(--font-hero);
      font-size: 1.6rem;
      font-weight: 900;
      color: #FFF;
      display: block;
      text-shadow: 0 0 8px #FFF;
    }
    .fact-lbl {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--crt-dim);
      letter-spacing: 0.08em;
      margin-top: 4px;
      display: block;
    }

    /* ==========================================================================
       SCREEN 2: PRODUCTS DEEP DIVE
       ========================================================================== */
    .product-detailed-box { margin-bottom: 32px; }
    .product-hero-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
      padding-bottom: 16px;
      margin-bottom: 20px;
      border-bottom: 2px solid var(--border-stark);
    }
    .p-title-group h3 {
      font-family: var(--font-hero);
      font-size: 1.8rem;
      font-weight: 900;
      color: #FFF;
      letter-spacing: 0.06em;
    }
    .p-title-group p {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      color: var(--crt-silver);
      margin-top: 2px;
    }

    .product-explanation-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 24px;
      margin-bottom: 24px;
    }
    .expl-card {
      background: #08090C;
      border: 1px solid var(--border-subtle);
      padding: 20px;
    }
    .expl-card h4 {
      font-family: var(--font-hero);
      font-size: 1rem;
      font-weight: 800;
      color: #FFF;
      margin-bottom: 10px;
      letter-spacing: 0.06em;
      border-bottom: 1px solid var(--border-faint);
      padding-bottom: 6px;
    }
    .expl-card p {
      font-size: 0.88rem;
      color: var(--crt-silver);
      line-height: 1.55;
      margin-bottom: 12px;
    }
    .expl-card p:last-child { margin-bottom: 0; }

    .feature-points-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      margin-top: 16px;
    }
    .feature-points-table th, .feature-points-table td {
      border: 1px solid var(--border-subtle);
      padding: 10px 12px;
      text-align: left;
    }
    .feature-points-table th {
      background: #000;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: #FFF;
      font-weight: 800;
    }
    .feature-points-table td {
      background: #050608;
      color: var(--crt-silver);
    }
    .feature-points-table td strong { color: #FFF; }

    /* ==========================================================================
       SCREEN 3: ABOUT ADUMU & FOUNDER SPOTLIGHT (STEPHEN GILL)
       ========================================================================== */
    .founder-spotlight-card {
      background: #000;
      border: 2px solid var(--border-stark);
      padding: clamp(20px, 3vw, 32px);
      margin-bottom: 28px;
      box-shadow: 0 0 24px rgba(255, 255, 255, 0.12);
    }

    .founder-layout-grid {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 28px;
      align-items: start;
    }

    /* Founder CRT Monitor Pod */
    .founder-crt-monitor {
      background: #040507;
      border: 2px solid #FFFFFF;
      padding: 14px;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.2), inset 0 0 12px rgba(255, 255, 255, 0.05);
      position: relative;
    }

    .f-monitor-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      border-bottom: 1px solid var(--border-subtle);
      padding-bottom: 6px;
    }

    .f-monitor-header .tag-rec {
      color: #FFF;
      font-weight: 800;
    }

    .founder-visual-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 1 / 1;
      background: #000000;
      border: 1.5px solid var(--border-stark);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.15);
    }

    .founder-crt-img, .founder-orig-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
    }

    .founder-crt-img.active, .founder-orig-img.active {
      display: block;
      animation: crtScreenPowerOn 0.25s ease-out;
    }

    .founder-orig-img {
      filter: grayscale(100%) contrast(140%) brightness(105%);
    }

    .founder-view-toggle-bar {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .btn-ascii-toggle {
      background: #000;
      border: 1px solid #FFF;
      color: #FFF;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 800;
      padding: 4px 8px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .btn-ascii-toggle:hover {
      background: #FFF;
      color: #000;
      box-shadow: 0 0 8px #FFF;
    }

    /* Founder Bio Section */
    .founder-bio-wrap {
      display: flex;
      flex-direction: column;
    }

    .founder-name-title {
      font-family: var(--font-hero);
      font-size: clamp(1.8rem, 2.8vw, 2.5rem);
      font-weight: 900;
      letter-spacing: 0.06em;
      color: #FFF;
      line-height: 1;
      text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
    }

    .founder-role-sub {
      font-family: var(--font-mono);
      font-size: 0.82rem;
      color: var(--crt-silver);
      font-weight: 700;
      letter-spacing: 0.14em;
      margin: 6px 0 16px;
    }

    .founder-bio-text {
      font-size: 0.96rem;
      color: var(--crt-silver);
      line-height: 1.65;
      margin-bottom: 20px;
    }

    .founder-credentials-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 8px;
    }

    .cred-item-box {
      background: #08090C;
      border: 1px solid var(--border-subtle);
      padding: 12px 14px;
    }
    .cred-tag {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 800;
      color: #FFF;
      letter-spacing: 0.08em;
      display: block;
      margin-bottom: 4px;
    }
    .cred-desc {
      font-size: 0.78rem;
      color: var(--crt-silver);
      line-height: 1.4;
    }
    /* Outbound corroboration links — inherit the CRT palette instead of
       falling back to the user-agent blue, which is illegible on black. */
    .cred-desc a {
      color: var(--crt-white);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid var(--border-subtle);
      transition: border-color 0.2s;
    }

    .cred-desc a:hover,
    .cred-desc a:focus-visible {
      border-bottom-color: var(--crt-white);
    }

    /* Story & Philosophy Grid */
    .about-story-grid {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      gap: 24px;
      margin-bottom: 28px;
    }

    .about-prose {
      font-size: 0.95rem;
      color: var(--crt-silver);
      line-height: 1.65;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .about-prose p strong { color: #FFF; }

    .motto-card {
      background: #000;
      border: 2px solid #FFF;
      padding: 24px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
    }

    .motto-title {
      font-family: var(--font-hero);
      font-size: 1.7rem;
      font-weight: 900;
      color: #FFF;
      line-height: 1.1;
      letter-spacing: 0.08em;
      margin-bottom: 12px;
      text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    }

    .principles-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    .principle-box {
      background: #08090C;
      border: 1px solid var(--border-subtle);
      padding: 18px;
    }
    .principle-title {
      font-family: var(--font-mono);
      font-size: 0.85rem;
      font-weight: 800;
      color: #FFF;
      margin-bottom: 8px;
      letter-spacing: 0.06em;
    }
    .principle-desc {
      font-size: 0.82rem;
      color: var(--crt-silver);
      line-height: 1.5;
    }

    /* ==========================================================================
       SCREEN 4: CAREERS (PORTED DIRECTLY FROM ADUMU JUMP)
       ========================================================================== */
    .careers-banner-box {
      background: #000;
      border: 2px solid var(--border-stark);
      padding: 24px;
      margin-bottom: 24px;
    }

    .status-live-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-mono);
      font-size: 0.7rem;
      font-weight: 800;
      color: #000;
      background: #FFF;
      padding: 2px 8px;
      margin-bottom: 12px;
    }

    .careers-headline {
      font-family: var(--font-hero);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 900;
      color: #FFF;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    .careers-lede {
      font-size: 0.95rem;
      color: var(--crt-silver);
      line-height: 1.6;
      max-width: 80ch;
    }

    .status-note-box {
      background: #08090C;
      border: 1px dashed var(--border-subtle);
      padding: 16px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }
    .status-note-text {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--crt-silver);
    }
    .status-note-text strong { color: #FFF; }

    .disciplines-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
      margin-bottom: 28px;
    }
    .disc-card {
      background: #000;
      border: 1px solid var(--border-stark);
      padding: 20px;
    }
    .disc-tag {
      font-family: var(--font-mono);
      font-size: 0.65rem;
      font-weight: 800;
      color: var(--crt-dim);
      margin-bottom: 6px;
      display: block;
      text-transform: uppercase;
    }
    .disc-title {
      font-family: var(--font-hero);
      font-size: 1.1rem;
      font-weight: 800;
      color: #FFF;
      margin-bottom: 8px;
    }
    .disc-desc {
      font-size: 0.82rem;
      color: var(--crt-silver);
      line-height: 1.5;
    }

    .hiring-steps-list {
      list-style: none;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 14px;
      margin-top: 16px;
    }
    .hiring-step-item {
      background: #08090C;
      border: 1px solid var(--border-subtle);
      padding: 16px;
    }
    .h-step-num {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 800;
      color: #FFF;
      margin-bottom: 6px;
    }
    .h-step-title {
      font-family: var(--font-hero);
      font-size: 0.92rem;
      font-weight: 800;
      color: #FFF;
      margin-bottom: 6px;
    }
    .h-step-desc {
      font-size: 0.75rem;
      color: var(--crt-silver);
      line-height: 1.45;
    }

    /* ==========================================================================
       SCREEN 5: CONTACT CONSOLE (RETRO CRT FORM)
       ========================================================================== */
    .terminal-contact-chassis {
      background: #000000;
      border: 2px solid var(--border-stark);
      box-shadow: 0 0 24px rgba(255, 255, 255, 0.15);
      overflow: hidden;
    }

    .term-title-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      background: #08090C;
      border-bottom: 1px solid var(--border-stark);
      font-family: var(--font-mono);
      font-size: 0.72rem;
    }

    .term-status-tag {
      color: #FFF;
      font-weight: 700;
    }

    .terminal-interactive-content {
      padding: clamp(16px, 2.5vw, 24px);
    }

    .term-prompt-header {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      color: var(--crt-silver);
      margin-bottom: 20px;
      line-height: 1.6;
      border-bottom: 1px dashed var(--border-subtle);
      padding-bottom: 14px;
    }
    .term-prompt-header strong { color: #FFF; }

    .term-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin-bottom: 18px;
    }

    .term-field-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .term-field-group.full-width { grid-column: 1 / -1; }

    .term-field-label {
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 800;
      color: #FFF;
      letter-spacing: 0.08em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .term-field-label span { color: var(--crt-dim); }

    .term-input-box {
      background: #000;
      border: 1.5px solid var(--border-subtle);
      color: #FFF;
      padding: 10px 14px;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .term-input-box:focus {
      border-color: #FFF;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
      background: #050608;
    }
    .term-input-box::placeholder { color: var(--crt-faint); }

    .term-form-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--border-faint);
    }

    .term-security-seal {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      color: var(--crt-dim);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .term-security-seal strong { color: #FFF; }

    .term-transmission-receipt {
      display: none;
      background: #000;
      border: 2px solid #FFF;
      padding: 20px;
      margin-top: 20px;
      font-family: var(--font-mono);
      font-size: 0.78rem;
      line-height: 1.6;
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    }
    .receipt-title {
      font-family: var(--font-hero);
      font-size: 1.1rem;
      font-weight: 900;
      color: #FFF;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .receipt-row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed var(--border-faint);
      padding: 4px 0;
    }
    .receipt-key { color: var(--crt-dim); }
    .receipt-val { color: #FFF; font-weight: 700; }

    /* ==========================================================================
       TACTICAL FOOTER
       ========================================================================== */
    .hud-footer {
      border-top: 2px solid var(--border-stark);
      padding-top: 20px;
      margin-top: auto;
    }

    .footer-content {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
    }

    .footer-links-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
    }

    .footer-link-btn {
      background: none;
      border: none;
      color: var(--crt-dim);
      font-family: var(--font-mono);
      font-size: 0.72rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: color 0.2s;
    }
    .footer-link-btn:hover {
      color: #FFF;
      text-shadow: 0 0 6px #FFF;
    }

    .footer-copy {
      color: var(--crt-dim);
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 960px) {
      .overview-pillars-grid, .product-explanation-grid, .about-story-grid, .principles-grid, .disciplines-grid, .founder-layout-grid {
        grid-template-columns: 1fr;
      }
      .overview-facts-strip {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      .hud-outer-frame {
        padding: 8px 10px 24px;
        border-left: none;
        border-right: none;
      }
      .hud-nav-screens {
        display: none;
      }
      .mobile-toggle-btn {
        display: flex;
      }
      .founder-credentials-grid {
        grid-template-columns: 1fr;
      }
      .term-form-grid {
        grid-template-columns: 1fr;
      }
      .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }
    }

    @media (max-width: 480px) {
      .hero-corp-title {
        font-size: 2.8rem;
      }
      .founder-ascii-canvas {
        font-size: 4.8px;
      }
      .pillar-actions {
        flex-direction: column;
        align-items: stretch;
      }
    }

    /* ==========================================================================
       PHP BUILD ADDITIONS
       Navigation became real anchors, the contact form became real, and two
       new screens (FAQ, 404) were added. Motion is now gated on user
       preference — the static build honoured prefers-reduced-motion nowhere.
       ========================================================================== */

    /* --- Skip link --- */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      z-index: 10000;
      background: #000;
      color: #FFF;
      border: 2px solid #FFF;
      padding: 10px 16px;
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.08em;
      text-decoration: none;
    }
    .skip-link:focus {
      left: 12px;
      top: 12px;
    }

    /* --- Nav items are anchors now ---------------------------------------
       These elements were <button>/<div> in the static build. As anchors the
       ONLY thing they need is the underline removed.

       Do not add `color` here. These selectors are `a.classname`
       (specificity 0,1,1), which outranks the design system's `.classname`
       rules (0,1,0) — so a colour set here silently overrides the palette.
       Setting `color: inherit` here made every primary button white-on-white
       and flattened the dim/active nav distinction. The class rules above
       already carry the correct colours for every state.
       --------------------------------------------------------------------- */
    a.screen-tab-btn,
    a.m-screen-btn,
    a.footer-link-btn,
    a.brand-block,
    a.btn-tech-primary,
    a.btn-tech-secondary {
      text-decoration: none;
    }

    /* A <button> computes `line-height: normal`; an <a> inherits 1.5 from
       html, which made every former button 2px taller. Restore the button
       metric so the header, footer, and CTA rows measure as designed. */
    a.screen-tab-btn,
    a.m-screen-btn,
    a.footer-link-btn,
    a.btn-tech-primary,
    a.btn-tech-secondary {
      line-height: normal;
    }

    /* .m-screen-btn never declared a display — it relied on the <button> UA
       default of inline-block. An <a> defaults to inline, which collapses the
       mobile menu items to zero height and drops their padding. */
    a.m-screen-btn { display: block; }

    .footer-sep { color: var(--border-subtle); }

    /* --- Unclassed prose links ---
       The static build styled every inline link with an inline `style`
       attribute, so the stylesheet had no rule for a bare <a>. Any new prose
       link therefore fell back to the user-agent blue, which is illegible on
       black. `:not([class])` restricts this to anchors carrying no class at
       all, so it can never override a nav item, button, or footer link. */
    .hud-box a:not([class]),
    .screen-lede a:not([class]),
    .faq-answer a:not([class]) {
      color: var(--crt-white);
      font-weight: 700;
      text-decoration: none;
      border-bottom: 1px solid var(--border-subtle);
      transition: border-color 0.2s;
    }
    .hud-box a:not([class]):hover,
    .screen-lede a:not([class]):hover,
    .faq-answer a:not([class]):hover {
      border-bottom-color: var(--crt-white);
    }

    /* Visible keyboard focus everywhere. */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    summary:focus-visible {
      outline: 2px solid var(--crt-white);
      outline-offset: 2px;
    }

    /* --- Contact form: honeypot, errors, alerts --- */
    .hp-field {
      position: absolute;
      left: -10000px;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }

    .term-alert {
      border: 1px solid var(--border-subtle);
      border-left: 3px solid var(--crt-white);
      background: rgba(255, 255, 255, 0.05);
      padding: 12px 16px;
      margin-bottom: 20px;
      font-family: var(--font-mono);
      font-size: 0.82rem;
      line-height: 1.55;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .term-alert strong { color: #FFF; letter-spacing: 0.08em; }
    .term-alert span   { color: var(--crt-silver); }

    .term-input-box.has-error {
      border-color: var(--crt-white);
      box-shadow: inset 0 0 0 1px var(--crt-white);
    }
    .term-field-error {
      display: block;
      margin-top: 5px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      color: var(--crt-white);
      letter-spacing: 0.04em;
    }
    .term-field-wide { grid-column: 1 / -1; }

    .term-submit-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-top: 22px;
    }

    .term-receipt-panel { padding: 4px 0; }
    .receipt-head {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.12em;
      color: #FFF;
      margin-bottom: 12px;
    }
    .receipt-line {
      color: var(--crt-silver);
      font-size: 0.92rem;
      line-height: 1.6;
      margin-bottom: 8px;
    }
    .receipt-line a, .term-alert a { color: #FFF; }

    /* --- FAQ --- */
    .faq-list { display: flex; flex-direction: column; gap: 2px; }

    .faq-item { border-bottom: 1px solid var(--border-faint); }
    .faq-item:last-child { border-bottom: 0; }

    .faq-question {
      cursor: pointer;
      list-style: none;
      display: flex;
      align-items: baseline;
      gap: 12px;
      padding: 16px 4px;
      font-family: var(--font-hero);
      font-size: 0.98rem;
      letter-spacing: 0.02em;
      color: #FFF;
    }
    .faq-question::-webkit-details-marker { display: none; }
    .faq-question:hover { background: rgba(255, 255, 255, 0.04); }

    .faq-index {
      font-family: var(--font-mono);
      font-size: 0.7rem;
      color: var(--crt-faint);
      flex: 0 0 auto;
    }
    .faq-item[open] .faq-index { color: var(--crt-white); }

    .faq-answer {
      padding: 0 4px 18px 38px;
      color: var(--crt-silver);
      font-size: 0.9rem;
      line-height: 1.65;
      max-width: 74ch;
    }

    /* --- 404 --- */
    .notfound-links { display: flex; flex-direction: column; gap: 2px; }
    .notfound-link {
      display: grid;
      grid-template-columns: 42px 150px 1fr;
      gap: 14px;
      align-items: baseline;
      padding: 14px 6px;
      border-bottom: 1px solid var(--border-faint);
      text-decoration: none;
    }
    .notfound-link:last-child { border-bottom: 0; }
    .notfound-link:hover { background: rgba(255, 255, 255, 0.05); }
    .notfound-num  { font-family: var(--font-mono); font-size: 0.74rem; color: var(--crt-faint); }
    .notfound-name { font-family: var(--font-hero); font-size: 0.92rem; color: #FFF; letter-spacing: 0.05em; }
    .notfound-desc { font-size: 0.8rem; color: var(--crt-dim); line-height: 1.5; }

    @media (max-width: 720px) {
      .notfound-link { grid-template-columns: 34px 1fr; }
      .notfound-desc { grid-column: 2 / -1; }
    }

    /* ==========================================================================
       REDUCED MOTION
       The flicker layer composited the full viewport every 0.12s indefinitely,
       and nothing in the original build respected this preference.
       ========================================================================== */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
      }
      .crt-flicker-layer,
      .crt-rolling-beam { display: none !important; }
      .crt-screen-panel.active { opacity: 1; transform: none; filter: none; }
    }