/* index: inline style 1 */
html { scroll-behavior: smooth; overflow-x: hidden; }
  [hidden] { display: none !important; }
  :root {
    --red-rgb: 197,22,42;
    --glowMul: 1;
    --font-mono: 'Geist Mono', ui-monospace, monospace;
    --font-sans: 'Archivo', ui-sans-serif, system-ui, sans-serif;
    --font-brand: 'Orbitron', var(--font-sans);
  }
  body {
    background: #000;
    color: #fff;
    font-family: var(--font-sans);
    font-feature-settings: "ss01","cv11";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  body.prepaint #heroCanvas,
  body.prepaint #heroLabel,
  body.prepaint #heroCanvasBleedHost,
  body.prepaint #heroCanvasSplitHost,
  body.prepaint #top .hero-wordmark,
  body.prepaint #top .hero-brand-square,
  body.prepaint #top .headline-effect,
  body.prepaint #top .reticle,
  body.prepaint #top .nebula,
  body.prepaint #top .scanlines,
  body.prepaint #top .scan-sweep,
  body.prepaint #top .hero-visual-picker,
  body.prepaint #top .vignette,
  body.prepaint #top .marquee,
  body.prepaint #top .mega-num,
  body.prepaint #top .diag-bar,
  body.prepaint #top .coord-strip,
  body.prepaint #top .hero-hud-codes,
  body.prepaint #top .hero-hud-info,
  body.prepaint #top .hero-hud-stamp,
  body.prepaint .brand-dot,
  body.prepaint .eyebrow::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  body.prepaint #top {
    background: #000 !important;
    box-shadow: none !important;
  }
  .mono { font-family: var(--font-mono); }
  .tnum { font-variant-numeric: tabular-nums; }
  .hero-wordmark {
    font-family: var(--font-brand);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: .86;
    text-transform: uppercase;
    font-size: clamp(48px, 7.1vw, 104px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 18px);
    flex-wrap: wrap;
  }
  .hero-wordmark .headline-effect:last-child {
    font-size: .92em;
    transform: translate3d(var(--header-shift-x), calc(var(--header-shift-y) + .035em), 0);
  }
  .hero-logo-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(8px, 1vw, 12px);
    width: min(56vw, 520px);
    max-width: 100%;
  }
  .hero-mk-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(58vw, 560px);
    max-width: 100%;
    gap: clamp(8px, 1vw, 12px);
  }
  .hero-mk-lockup .hero-mk-svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 calc(22px * var(--glowMul)) rgba(255,255,255,.08));
  }
  .hero-mk-lockup .hero-mk-svg path {
    fill: #fff;
  }
  .hero-mk-lockup .hero-labs-row {
    align-self: flex-end;
    margin-right: clamp(34px, 5.3vw, 72px);
  }
  .hero-mk-mark {
    display: block;
    width: 100%;
    line-height: 0;
    filter:
      drop-shadow(0 0 calc(24px * var(--glowMul)) rgba(245,249,255,.10))
      drop-shadow(0 0 calc(28px * var(--glowMul)) rgba(197,22,42,.08));
  }
  .hero-mk-mark img {
    display: block;
    width: 100%;
    height: auto;
  }
  .hero-labs-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    align-self: flex-end;
    margin-right: clamp(30px, 4.6vw, 58px);
    padding-left: 0;
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.25vw, 19px);
    font-weight: 600;
    letter-spacing: .58em;
    line-height: 1;
  }
  .hero-labs-row .hero-brand-square {
    width: .64em;
    height: .64em;
    min-width: 8px;
    min-height: 8px;
    transform: none;
  }
  .hero-eyebrow-row {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
  }
  .hero-control-stack {
    display: contents;
  }
  .hero-control-stack::before,
  .hero-control-stack::after { display: none; }
  .hero-visual-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    padding: 0;
    opacity: .76;
    transition: opacity .18s ease;
  }
  .hero-visual-picker::before { display: none; }
  .hero-visual-picker:hover,
  .hero-visual-picker:focus-within {
    opacity: 1;
  }
  .hero-visual-picker-label {
    display: inline-flex;
    align-items: center;
    color: #6f6f6f;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }
  .hero-visual-choice {
    position: relative;
    height: 18px;
    min-width: 0;
    padding: 0;
    border: 0;
    color: #6B6B6B;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    transition: color .18s ease;
  }
  .hero-visual-choice::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    height: 1px;
    background: #C5162A;
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
  }
  .hero-visual-choice:hover,
  .hero-visual-choice:focus-visible {
    color: #fff;
  }
  .hero-visual-choice.is-active {
    color: #fff;
  }
  .hero-visual-choice.is-active::after {
    transform: scaleX(1);
    opacity: .9;
  }
  @media (max-width: 640px) {
    #top {
      min-height: 720px;
    }
    [data-hero-layout="bleed"] #heroCanvasBleedHost {
      transform: translate(18%, -3%) scale(.76);
      opacity: .62;
    }
    [data-hero-layout="bleed"] .hero-text-col {
      max-width: 100%;
    }
    .hero-wordmark {
      font-size: clamp(42px, 15vw, 58px);
      gap: 8px;
      flex-wrap: nowrap;
    }
    .hero-wordmark .headline-effect:last-child {
      font-size: .88em;
    }
    #top .hero-wordmark + .mt-6 {
      margin-top: 18px;
    }
    #top .hero-wordmark + .mt-6 .mono {
      display: block;
      max-width: 28ch;
      font-size: 10px;
      line-height: 1.65;
      letter-spacing: .18em;
    }
    #top .btn {
      width: 100%;
      justify-content: center;
      min-height: 56px;
    }
    #top .mt-10 {
      margin-top: 34px;
      gap: 18px;
    }
    #top .reticle.br {
      display: none !important;
    }
    .hero-logo-lockup { width: min(84vw, 420px); }
    .hero-mk-lockup { width: min(86vw, 440px); }
    .hero-mk-lockup .hero-labs-row { margin-right: clamp(18px, 10vw, 48px); }
    .hero-labs-row { margin-right: clamp(20px, 9vw, 44px); letter-spacing: .42em; }
    .hero-eyebrow-row { gap: 12px 16px; }
    .hero-visual-picker { max-width: 100%; flex-wrap: wrap; gap: 9px; opacity: .66; }
    .hero-control-stack::before,
    .hero-control-stack::after,
    .hero-visual-picker::before { display: none; }
    .hero-visual-picker-label,
    .hero-visual-choice { font-size: 9px; letter-spacing: .18em; }
    .hero-visual-choice { flex: 0 0 auto; }
    .hero-brand-square {
      min-width: 10px;
      min-height: 10px;
    }
  }
  .hero-brand-square {
    width: .16em;
    height: .16em;
    min-width: 12px;
    min-height: 12px;
    background: #C5162A;
    box-shadow: 0 0 calc(10px * var(--glowMul)) rgba(197,22,42,.28);
    transform: translateY(.08em);
  }
  .brand-text, .headline-effect {
    --header-shift-x: 0px;
    --header-shift-y: 0px;
    --header-track: 0em;
    --header-glitch-x: 0px;
    --header-band-x: 50%;
    --header-shine-x: 50%;
    --header-metal-alpha: 0;
    --header-shine-alpha: 0;
    position: relative;
    display: inline-block;
    color: #fff;
    transition: letter-spacing .18s ease, color .18s ease, text-shadow .12s ease, transform .12s ease;
    transform: translate3d(var(--header-shift-x), var(--header-shift-y), 0);
    letter-spacing: calc(-0.035em + var(--header-track));
  }
  body[data-header-finish="silverv2"] .brand-text,
  body[data-header-finish="silverv2"] .headline-effect {
    color: transparent !important;
    -webkit-background-clip: text;
    background-clip: text;
    background-image:
      linear-gradient(74deg, transparent 0 calc(var(--header-shine-x) - 34%), rgba(255,255,255,calc(var(--header-shine-alpha) * .14)) calc(var(--header-shine-x) - 20%), rgba(255,255,255,calc(var(--header-shine-alpha) * .88)) calc(var(--header-shine-x) - 7%), rgba(230,236,248,calc(var(--header-shine-alpha) * .34)) calc(var(--header-shine-x) + 8%), transparent calc(var(--header-shine-x) + 30%) 100%),
      linear-gradient(112deg, #f8fbff 0%, #7f8793 13%, #ffffff 24%, #b7bfcb 37%, #4f5661 48%, #f5f8ff 60%, #8792a0 72%, #ffffff 84%, #b9c2ce 100%);
    text-shadow:
      0 0 calc(20px * var(--glowMul)) rgba(245,249,255, calc(var(--header-shine-alpha) * .18)),
      var(--header-glitch-x) 0 rgba(197,22,42, calc(var(--header-metal-alpha) * .10));
  }
  #mk-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    z-index: 2147483644;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-999px,-999px,0);
    transition: opacity .18s ease;
  }
  #mk-cursor .cursor-ring,
  #mk-cursor .cursor-dot,
  #mk-cursor .cursor-h,
  #mk-cursor .cursor-v,
  #mk-cursor .cursor-corner {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%,-50%);
  }
  #mk-cursor .cursor-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #C5162A;
    box-shadow: 0 0 12px rgba(197,22,42,.75);
  }
  #mk-cursor .cursor-ring {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(197,22,42,.45);
    border-radius: 50%;
  }
  #mk-cursor .cursor-h { width: 24px; height: 1px; background: rgba(255,255,255,.72); }
  #mk-cursor .cursor-v { width: 1px; height: 24px; background: rgba(255,255,255,.72); }
  #mk-cursor .cursor-corner {
    width: 7px;
    height: 7px;
    border-color: #C5162A;
    border-style: solid;
    opacity: .9;
  }
  #mk-cursor .c1 { transform: translate(-16px,-16px); border-width: 1px 0 0 1px; }
  #mk-cursor .c2 { transform: translate(9px,-16px); border-width: 1px 1px 0 0; }
  #mk-cursor .c3 { transform: translate(-16px,9px); border-width: 0 0 1px 1px; }
  #mk-cursor .c4 { transform: translate(9px,9px); border-width: 0 1px 1px 0; }
  html.custom-cursor-active,
  html.custom-cursor-active *,
  html.custom-cursor-active *::before,
  html.custom-cursor-active *::after,
  html.custom-cursor-active body,
  html.custom-cursor-active canvas,
  html.custom-cursor-active a,
  html.custom-cursor-active button,
  html.custom-cursor-active input,
  html.custom-cursor-active label,
  html.custom-cursor-active select,
  html.custom-cursor-active textarea,
  html.custom-cursor-active summary,
  html.custom-cursor-active [role="button"],
  html.custom-cursor-active [role="link"],
  html.custom-cursor-active [onclick],
  html.custom-cursor-active [tabindex],
  html.custom-cursor-active [contenteditable="true"],
  body[data-cursor-style]:not([data-cursor-style="default"]),
  body[data-cursor-style]:not([data-cursor-style="default"]) *,
  body[data-cursor-style]:not([data-cursor-style="default"]) *::before,
  body[data-cursor-style]:not([data-cursor-style="default"]) *::after {
    cursor: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==") 0 0, none !important;
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor .cursor-h,
  body[data-cursor-style="blindharmonies"] #mk-cursor .cursor-v,
  body[data-cursor-style="blindharmonies"] #mk-cursor .cursor-corner,
  body[data-cursor-style="blindharmonies"] #mk-cursor .cursor-ring,
  body[data-cursor-style="blindharmonies"] #mk-cursor .cursor-dot { display: none; }
  body[data-cursor-style="blindharmonies"] #mk-cursor {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #F2F1ED;
    mix-blend-mode: difference;
    opacity: 1;
    will-change: transform, width, height, opacity;
    box-shadow:
      0 0 0 1px rgba(197,22,42,.16),
      0 0 18px rgba(197,22,42,.22);
    transition: width .2s ease, height .2s ease, background .2s ease, opacity .18s ease, box-shadow .2s ease;
    transform: translate3d(-999px,-999px,0) translate(-50%,-50%);
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1px solid rgba(197,22,42,.18);
    opacity: .65;
    transform: scale(.72);
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease;
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-header {
    width: 34px;
    height: 34px;
    background: #F2F1ED;
    box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 26px rgba(197,22,42,.18);
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-header::after {
    opacity: .38;
    transform: scale(1);
    border-color: rgba(255,255,255,.18);
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-link {
    width: 44px;
    height: 44px;
    background: #C5162A;
    box-shadow: 0 0 24px rgba(197,22,42,.38);
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-link::after {
    opacity: 0;
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-hotspot {
    width: 48px;
    height: 48px;
    background: #C5162A;
    box-shadow: 0 0 28px rgba(197,22,42,.42);
  }
  body[data-cursor-style="blindharmonies"] #mk-cursor.is-hotspot::after {
    opacity: 0;
  }
  @media (hover:none), (pointer:coarse) {
    #mk-cursor { display: none !important; }
    body[data-cursor-style]:not([data-cursor-style="default"]),
    body[data-cursor-style]:not([data-cursor-style="default"]) * { cursor: auto !important; }
  }

  /* Section eyebrow label */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #A0A0A0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before {
    content: "";
    width: 6px; height: 6px; border-radius: 999px;
    background: #C5162A;
    box-shadow: 0 0 10px rgba(197,22,42,0.45);
    flex: none;
  }

  /* Brand bullet — pulses every 4s */
  .brand-dot {
    width: 7px; height: 7px; border-radius: 999px;
    background: #C5162A;
    box-shadow: 0 0 10px rgba(197,22,42,0.6);
    animation: brandPulse 4s ease-in-out infinite;
  }
  @keyframes brandPulse {
    0%, 70%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px rgba(197,22,42,0.5); }
    78%           { opacity: 0.4; transform: scale(0.8); box-shadow: 0 0 0 rgba(197,22,42,0); }
    86%           { opacity: 1; transform: scale(1.3); box-shadow: 0 0 16px rgba(197,22,42,0.9); }
  }

  /* Starfield (full page, very low alpha) */
  .stars {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.5), transparent 50%),
      radial-gradient(1px 1px at 78% 32%, rgba(255,255,255,0.4), transparent 50%),
      radial-gradient(1px 1px at 33% 64%, rgba(255,255,255,0.5), transparent 50%),
      radial-gradient(1px 1px at 88% 78%, rgba(255,255,255,0.35), transparent 50%),
      radial-gradient(1px 1px at 56% 12%, rgba(255,255,255,0.4), transparent 50%),
      radial-gradient(1px 1px at 24% 82%, rgba(255,255,255,0.45), transparent 50%),
      radial-gradient(1px 1px at 67% 56%, rgba(255,255,255,0.35), transparent 50%),
      radial-gradient(1px 1px at 8% 48%, rgba(255,255,255,0.4), transparent 50%),
      radial-gradient(1px 1px at 95% 6%, rgba(255,255,255,0.45), transparent 50%),
      radial-gradient(1px 1px at 44% 38%, rgba(255,255,255,0.35), transparent 50%);
    background-size: 100% 100%;
    opacity: 0.5;
    animation: drift 240s linear infinite;
  }
  @keyframes drift {
    0%   { background-position: 0 0; }
    100% { background-position: 400px -200px; }
  }

  /* Faint hero nebula */
  .nebula {
    position: absolute; inset: -10%;
    background:
      radial-gradient(60% 50% at 70% 40%, rgba(225,54,70,0.05), transparent 60%),
      radial-gradient(50% 50% at 20% 70%, rgba(255,255,255,0.03), transparent 60%);
    filter: blur(40px);
    animation: nebulaDrift 60s ease-in-out infinite alternate;
    pointer-events: none;
  }
  @keyframes nebulaDrift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    100% { transform: translate3d(2%,-1%,0) scale(1.05); }
  }

  /* Card hover treatment */
  .card {
    position: relative;
    border: 1px solid #1F1F1F;
    background: #0A0A0A;
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
  }
  .card::before {
    content: "";
    position: absolute;
    inset: 10px;
    z-index: 3;
    pointer-events: none;
    opacity: .42;
    background:
      linear-gradient(#6B6B6B 0 0) left top / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left top / 1px 18px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 1px 18px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 1px 18px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 1px 18px no-repeat;
    transition: opacity .25s ease, background .25s ease;
  }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .45;
    background:
      linear-gradient(90deg, transparent, rgba(255,255,255,.035), transparent) 50% 0 / 62% 1px no-repeat,
      linear-gradient(90deg, transparent, rgba(255,255,255,.022), transparent) 50% 100% / 58% 1px no-repeat;
  }
  .card:hover, .card:focus-visible {
    transform: translateY(-4px);
    border-color: #C5162A;
    box-shadow:
      0 0 0 1px rgba(197,22,42,0.0),
      0 8px 30px rgba(197,22,42,0.10),
      0 0 60px -20px rgba(225,54,70,0.35);
  }
  .card:hover::before,
  .card:focus-visible::before {
    opacity: .78;
    background:
      linear-gradient(#C5162A 0 0) left top / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) left top / 1px 18px no-repeat,
      linear-gradient(#C5162A 0 0) right top / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) right top / 1px 18px no-repeat,
      linear-gradient(#C5162A 0 0) left bottom / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) left bottom / 1px 18px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 1px 18px no-repeat;
  }
  .card:focus-visible { outline: none; }
  .product-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .product-card::before {
    inset: 12px;
    background:
      linear-gradient(#6B6B6B 0 0) left top / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left top / 1px 18px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 1px 18px no-repeat;
  }
  .product-card:hover::before,
  .product-card:focus-visible::before {
    background:
      linear-gradient(#C5162A 0 0) left top / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) left top / 1px 18px no-repeat,
      linear-gradient(#C5162A 0 0) right top / 18px 1px no-repeat,
      linear-gradient(#C5162A 0 0) right top / 1px 18px no-repeat;
  }
  .product-card .ph-shot {
    aspect-ratio: auto;
    height: 264px;
  }
  .roadmap-grid {
    width: min(1040px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .roadmap-card .ph-shot {
    aspect-ratio: auto;
    height: 270px;
  }
  .roadmap-card .p-6 {
    padding: 22px;
  }
  .roadmap-card .mini-input {
    min-height: 36px;
  }
  .roadmap-card .submit-arrow {
    width: 36px;
    height: 36px;
  }
  @media (max-width: 900px) {
    .roadmap-grid {
      width: 100%;
    }
    .roadmap-card .ph-shot {
      height: 250px;
    }
  }
  .product-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 268px;
  }
  .product-copy { flex: 0 0 auto; }
  .proof-row {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    line-height: 1.7;
    text-transform: uppercase;
    color: #6B6B6B;
  }
  .proof-row b {
    color: #A0A0A0;
    font-weight: 500;
  }
  .product-status {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #1F1F1F;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 60px;
    position: relative;
    z-index: 4;
  }
  .product-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .details-cta {
    min-width: 96px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.14);
    padding: 10px 14px;
    color: #A0A0A0;
    background: rgba(255,255,255,.015);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .details-cta:hover,
  .details-cta:focus-visible {
    color: #fff;
    border-color: rgba(255,255,255,.34);
    background: rgba(255,255,255,.04);
  }
  .inline-detail-link {
    margin-top: 18px;
    width: max-content;
  }
  .stack-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .stack-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 250px;
  }
  .stack-card-copy { flex: 1; }
  .stack-card-form { margin-top: 24px; }
  .utilities-list {
    display: grid;
    gap: 14px;
    max-width: 980px;
  }
  .utility-card {
    display: grid;
    grid-template-columns: minmax(240px, 38%) minmax(0, 1fr);
    min-height: 232px;
    height: auto;
  }
  .utility-card::before {
    inset: 12px;
  }
  .utility-card .ph-shot {
    aspect-ratio: auto;
    min-height: 232px;
    border-right: 1px solid #1F1F1F;
    border-bottom: 0;
  }
  .utility-card .ph-shot .ph-label {
    left: 18px;
    right: 18px;
    bottom: 18px;
    font-size: 9px;
    letter-spacing: .24em;
  }
  .utility-card .stack-card-body {
    min-height: 232px;
    padding: 24px;
  }
  .utility-card .stack-card-form { margin-top: 20px; }
  .utility-card .ph-free-core {
    top: 48px;
    bottom: 54px;
    gap: 8px;
  }
  .utility-card .ph-armory-core,
  .utility-card .ph-meters-panel {
    top: 46px;
    bottom: 54px;
  }
  @media (max-width: 780px) {
    .utilities-list {
      max-width: none;
    }
    .utility-card {
      grid-template-columns: 1fr;
    }
    .utility-card .ph-shot {
      aspect-ratio: 4 / 3;
      min-height: 0;
      border-right: 0;
      border-bottom: 1px solid #1F1F1F;
    }
    .utility-card .stack-card-body {
      min-height: 0;
    }
  }
  .open-source-strip {
    border: 1px solid #1F1F1F;
    background:
      linear-gradient(90deg, rgba(197,22,42,.06), transparent 38%),
      rgba(8,8,8,.68);
    display: grid;
    grid-template-columns: minmax(220px, 360px) minmax(0, 1fr) auto;
    align-items: stretch;
    max-width: 980px;
  }
  .open-source-strip > div,
  .open-source-strip > a {
    padding: 24px 26px;
    border-right: 1px solid #1F1F1F;
  }
  .open-source-strip > a:last-child { border-right: 0; }
  .open-source-signal {
    min-height: 132px;
    position: relative;
    overflow: hidden;
    padding-top: 44px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
  }
  .open-source-signal::before {
    content: "";
    position: absolute;
    left: 30px;
    right: 30px;
    top: 58px;
    bottom: 24px;
    background:
      linear-gradient(#C5162A 0 0) 36% 24% / 30% 1px no-repeat,
      linear-gradient(#C5162A 0 0) 48% 58% / 36% 1px no-repeat,
      linear-gradient(rgba(255,255,255,.22) 0 0) 52% 42% / 62% 1px no-repeat,
      linear-gradient(rgba(255,255,255,.14) 0 0) 42% 72% / 48% 1px no-repeat;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 0 34px rgba(197,22,42,.06);
  }
  .open-source-signal .ph-name {
    left: 22px;
    top: 20px;
    z-index: 2;
    max-width: calc(100% - 44px);
  }
  .open-source-cta {
    min-width: 168px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C5162A;
    transition: color .18s ease, background .18s ease;
  }
  .open-source-cta:hover {
    color: #fff;
    background: rgba(197,22,42,.08);
  }
  @media (max-width: 900px) {
    .open-source-strip { grid-template-columns: 1fr; }
    .open-source-strip > div,
    .open-source-strip > a {
      border-right: 0;
      border-bottom: 1px solid #1F1F1F;
    }
    .open-source-strip > a:last-child { border-bottom: 0; }
  }
  .product-cta {
    min-width: 112px;
    min-height: 38px;
    justify-content: center;
    border: 1px solid rgba(197,22,42,0.72);
    padding: 10px 16px;
    color: #fff;
    background: rgba(197,22,42,0.06);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
  }
  .product-card:hover .product-cta,
  .product-card:focus-visible .product-cta {
    border-color: #E13646;
    background: rgba(197,22,42,0.16);
    box-shadow: 0 0 22px -8px rgba(225,54,70,0.72);
  }
  .product-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483638;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  .product-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  body.product-modal-open {
    overflow: hidden;
  }
  .product-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.76);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .product-modal-panel {
    position: relative;
    width: min(840px, 100%);
    max-height: calc(100vh - 48px);
    overflow: hidden;
    border: 1px solid #252525;
    background:
      linear-gradient(90deg, rgba(197,22,42,.07), transparent 36%),
      linear-gradient(180deg, rgba(255,255,255,.035), transparent 38%),
      rgba(5,5,5,.96);
    box-shadow: 0 24px 90px rgba(0,0,0,.7), 0 0 55px -32px rgba(197,22,42,.75);
  }
  .product-modal-panel::before {
    content: "";
    position: absolute;
    inset: 14px;
    pointer-events: none;
    opacity: .7;
    background:
      linear-gradient(#C5162A 0 0) left top / 20px 1px no-repeat,
      linear-gradient(#C5162A 0 0) left top / 1px 20px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 20px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 1px 20px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 20px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 1px 20px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 20px 1px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 1px 20px no-repeat;
  }
  .product-modal-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 28px 12px;
    border-bottom: 1px solid #1F1F1F;
  }
  .product-modal-close {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.15);
    color: #A0A0A0;
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 1;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
  }
  .product-modal-close:hover {
    color: #fff;
    border-color: #C5162A;
    background: rgba(197,22,42,.08);
  }
  .product-modal-body {
    padding: 14px 28px 18px;
  }
  .product-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, .42fr);
    gap: 26px;
  }
  .product-modal-list {
    display: grid;
    gap: 8px;
    margin-top: 14px;
  }
  .product-modal-list li {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    border-top: 1px solid #1F1F1F;
    padding-top: 8px;
  }
  .product-modal-meta {
    border: 1px solid #1F1F1F;
    background: rgba(255,255,255,.018);
  }
  .product-modal-image {
    display: none;
    width: fit-content;
    margin: 0 auto 12px;
    max-width: 100%;
    padding: 10px;
    border: 1px solid rgba(197,22,42,.72);
    background:
      linear-gradient(#C5162A 0 0) left top / 22px 1px no-repeat,
      linear-gradient(#C5162A 0 0) left top / 1px 22px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 22px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right top / 1px 22px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 22px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left bottom / 1px 22px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 22px 1px no-repeat,
      linear-gradient(#C5162A 0 0) right bottom / 1px 22px no-repeat,
      radial-gradient(circle at 52% 50%, rgba(197,22,42,.16), transparent 58%),
      rgba(0,0,0,.42);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 0 34px -22px rgba(197,22,42,.9);
    overflow: hidden;
  }
  .product-modal-image.is-visible {
    display: block;
  }
  .product-modal-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: min(190px, 26vh);
    object-fit: contain;
    background: #000;
  }
  .product-modal-meta div {
    padding: 14px 16px;
    border-bottom: 1px solid #1F1F1F;
  }
  .product-modal-meta div:last-child { border-bottom: 0; }
  .product-modal-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
  }
  .product-modal-actions .product-cta,
  .product-modal-actions .details-cta {
    text-decoration: none;
  }
  @media (max-width: 720px) {
    .product-modal { padding: 14px; }
    .product-modal-header,
    .product-modal-body { padding-left: 22px; padding-right: 22px; }
    .product-modal-grid { grid-template-columns: 1fr; }
    .product-modal-panel {
      overflow: auto;
    }
    .product-modal-image img {
      max-height: 260px;
    }
  }

  /* Ghost button (outline) */
  .ghost {
    border: 1px solid #1F1F1F;
    color: #fff;
    transition: border-color .25s ease, color .25s ease, background .25s ease;
  }
  .ghost:hover { border-color: #fff; }

  /* Buy button — red border, red arrow */
  .buy {
    border: 1px solid #C5162A;
    color: #fff;
    transition: background .2s ease, box-shadow .25s ease, color .2s ease;
  }
  .buy:hover {
    background: rgba(197,22,42,0.08);
    box-shadow: 0 0 24px -6px rgba(225,54,70,0.5);
  }
  .buy .arrow { color: #C5162A; }

  /* Focus ring (keyboard) */
  :focus-visible {
    outline: 1px solid #C5162A;
    outline-offset: 2px;
  }

  /* Hairline grid divider */
  .hairline {
    height: 1px; background: #1F1F1F; width: 100%;
  }

  .cat-btn {
    font-family:var(--font-mono); font-size:11px; letter-spacing:0.18em;
    text-transform:uppercase; padding:7px 16px;
    border:1px solid #1F1F1F; background:transparent; color:#6B6B6B;
    cursor:pointer; transition:color .2s ease, border-color .2s ease;
  }
  .cat-btn:hover { color:#fff; border-color:#333; }
  .cat-btn.active { color:#fff; border-color:#C5162A; }
  .hidden-card { display:none !important; }
  .grid-divider {
    height: 56px;
    background-image:
      linear-gradient(to right, transparent 0, transparent calc(100% - 1px), #1F1F1F 100%),
      linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), #1F1F1F 100%);
    background-size: 80px 28px;
    background-position: 0 0;
    opacity: 0.5;
    mask-image: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
  }
  .scope-index {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 22px;
    border: 0;
    background: transparent;
  }
  .scope-index a {
    min-height: auto;
    padding: 0;
    border-right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #737373;
    transition: color .18s ease, letter-spacing .18s ease;
  }
  .scope-index a:last-child { border-right: 0; }
  .scope-index a:hover {
    color: #D8D8D8;
    background: transparent;
  }
  .scope-index span {
    display: none;
  }
  .scope-index b {
    font-size: 9px;
    letter-spacing: .22em;
    font-weight: 500;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .scope-index em { display: none; }
  @media (max-width: 820px) {
    .scope-index { grid-template-columns: 1fr 1fr 1fr; gap: 18px 20px; }
    .scope-index a:nth-child(2) { border-right: 0; }
    .scope-index a:nth-child(-n+2) { border-bottom: 0; }
  }
  @media (max-width: 520px) {
    .scope-index { grid-template-columns: 1fr 1fr; }
    .scope-index a { border-right: 0; border-bottom: 0; }
    .scope-index a:last-child { border-bottom: 0; }
  }

  /* Fade-up on scroll */
  /* Visible by default — only hidden if JS confirms it can reveal them */
  .reveal { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
  html.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(14px); }

  /* Nav scrolled state */
  .nav { transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
  .nav.scrolled {
    background: rgba(10,10,10,0.85);
    border-bottom: 1px solid #1F1F1F;
    backdrop-filter: saturate(140%) blur(8px);
  }
  .nav a.active { color: #fff; }
  .nav-brand {
    font-family: var(--font-brand);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
    color: #fff;
  }
  .nav-brand .nav-brand-dash {
    color: #C5162A;
    margin: 0 .08em;
  }
  .nav-menu {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: .20em;
    text-transform: uppercase;
  }
  .nav a.active::after {
    content: ""; display: block; height: 1px; background: #C5162A; margin-top: 6px;
  }

  /* Lenis smooth scroll */
  html.lenis { height: auto; }
  .lenis.lenis-smooth { scroll-behavior: auto !important; }
  .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
  .lenis.lenis-stopped { overflow: hidden; }
  .lenis.lenis-scrolling iframe { pointer-events: none; }

  /* Live recording dot */
  .live-dot {
    width: 6px; height: 6px; border-radius: 999px; background: #C5162A;
    box-shadow: 0 0 10px rgba(197,22,42,0.7);
    animation: livePulse 1.6s ease-in-out infinite;
  }
  @keyframes livePulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.4; transform: scale(0.85); }
  }

  /* Hero parallax wrapper */
  .parallax { will-change: transform; }

  /* CD-style HUD overlays (hidden by default; enabled by visual defaults) */
  .hero-hud-codes, .hero-hud-info, .hero-hud-stamp {
    position: absolute; z-index: 3; pointer-events: none;
    display: none;
    color: #6B6B6B; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  }
  .hero-hud-codes { top: 96px; right: 28px; display: none; gap: 18px; align-items: center; }
  .hero-hud-codes b { color: #A0A0A0; font-weight: 500; margin-right: 6px; }
  .hero-hud-codes > span { display: inline-flex; align-items: center; }
  .hero-hud-codes > span + span { margin-left: 18px; }

  .hero-hud-info {
    bottom: 38%; right: 28px; display: none;
    grid-template-columns: 1fr 1fr; gap: 0;
    border: 1px solid #1F1F1F; padding: 0;
    min-width: 280px;
  }
  .hero-hud-info > div {
    padding: 14px 18px; border-right: 1px solid #1F1F1F;
    display: flex; flex-direction: column; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.22em; color: #6B6B6B; font-size: 9px;
  }
  .hero-hud-info > div:last-child { border-right: none; }
  .hero-hud-info b {
    display: block; color: #FFFFFF; font-weight: 400;
    font-size: 22px; letter-spacing: -0.02em; text-transform: none;
    font-variant-numeric: tabular-nums;
  }

  .hero-hud-stamp {
    bottom: 28%; right: 28px; display: none;
    flex-direction: row; gap: 10px; align-items: center;
    color: #6B6B6B; font-size: 10px; letter-spacing: 0.22em;
  }
  .hero-hud-stamp b { color: #A0A0A0; font-weight: 500; }

  /* Toggles via section data-attrs */
  [data-hero-codes="on"] .hero-hud-codes { display: inline-flex; }
  [data-hero-info="on"]  .hero-hud-info  { display: grid; }
  [data-hero-stamp="on"] .hero-hud-stamp { display: flex; }

  /* CD-style background grid (very faint dotted/lined grid behind everything) */
  body.has-bg-grid::before {
    content: ""; position: fixed; inset: 0;
    background-image:
      linear-gradient(to right,  rgba(255,255,255,0.025) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    pointer-events: none; z-index: 0;
    mask-image: radial-gradient(120% 80% at 50% 50%, #000 35%, rgba(0,0,0,0.4) 100%);
  }

  /* Hero layout switcher — split (default) vs full-bleed (CD-style canvas behind text) */
  [data-hero-layout="bleed"] .hero-split-col { display: none !important; }
  [data-hero-layout="bleed"] .hero-text-col  { grid-column: span 12 / span 12 !important; max-width: 720px; }
  [data-hero-layout="bleed"] #heroCanvasBleedHost {
    z-index: 0;
    transform: translateX(clamp(10px, 2vw, 32px));
  }
  [data-hero-layout="bleed"] #heroCanvasBleedHost canvas { width: 100%; height: 100%; display: block; }
  [data-hero-layout="bleed"] .hero-text-col { position: relative; z-index: 2; }
  [data-hero-layout="bleed"] .hero-text-col h1 { mix-blend-mode: normal; }
  .bg-effect-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    display: none;
  }
  [data-hv="oversized"],
  [data-hv="mk-labs"] { display: none; }
  .hero-oversized-title { font-weight: 400; }
  .hero-mk-text {
    font-weight: 300;
    line-height: 0.82;
    letter-spacing: -0.04em;
    font-size: clamp(96px, 14vw, 180px);
    margin: 0;
    padding: 0;
  }
  .hero-mk-label {
    right: 0;
    bottom: 4px;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
  }
  #heroLabel { display: none !important; }
  #top,
  #top .hero-wordmark,
  #top .headline-effect,
  #top .hero-brand-square,
  #heroCanvasBleedHost,
  #heroCanvasSplitHost {
    -webkit-user-select: none;
    user-select: none;
  }
  /* Soft vignette shadow behind text in bleed mode so it stays readable over particles */
  [data-hero-layout="bleed"] .hero-text-col::before {
    content: ""; position: absolute; inset: -40px -40px -40px -40px;
    background: radial-gradient(60% 70% at 30% 50%, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
    z-index: -1; pointer-events: none;
  }

  /* Cosmic body — slow rotation */
  .rotate-slow { animation: rotateSlow 90s linear infinite; transform-origin: center; }
  @keyframes rotateSlow { to { transform: rotate(360deg); } }

  /* Email input */
  .mini-input {
    background: transparent;
    border: 1px solid #1F1F1F;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 8px 10px;
    width: 100%;
    transition: border-color .2s ease;
  }
  .mini-input::placeholder { color: #6B6B6B; }
  .mini-input:focus { border-color: #C5162A; outline: none; }

  .submit-arrow {
    color: #C5162A;
    border: 1px solid #C5162A;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .2s ease, box-shadow .2s ease;
    flex: none;
  }
  .submit-arrow:hover { background: rgba(197,22,42,0.1); box-shadow: 0 0 16px -4px #E13646; }

  /* Reduced motion: kill it all */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0ms !important;
    }
    .stars { animation: none; }
    .nebula { animation: none; }
    .rotate-slow { animation: none; }
  }

  /* V3 canvas starfield layer */
  #sfCanvas {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    display: none;
  }

  /* Halftone portrait frames (About section) */
  .ht-frame { border: 1px solid #1F1F1F; background: #0A0A0A; overflow: hidden; }
  .ht-frame canvas { display: block; width: 100%; height: 100%; }
  .ht-cap {
    border-top: 1px solid #1F1F1F;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #6B6B6B;
    display: flex; justify-content: space-between;
  }
  .ht-cap b { color: #A0A0A0; font-weight: 400; }
  .ht-badge {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
    color: #A0A0A0;
    display: flex; align-items: center; gap: 6px;
    z-index: 2;
  }
  .ht-badge::before {
    content: ""; width: 5px; height: 5px; border-radius: 50%;
    background: #C5162A; box-shadow: 0 0 6px #C5162A;
  }
  .ht-badge.ht-badge-rec {
    left: auto !important; right: 14px !important;
    color: #FFFFFF;
    display: none;  /* hidden by default; visual defaults can toggle to inline-flex */
  }
  .ht-badge.ht-badge-rec::before {
    animation: htRecPulse 1.4s ease-in-out infinite;
  }
  @keyframes htRecPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px #C5162A; }
    50%      { opacity: 0.4; box-shadow: 0 0 0 #C5162A; }
  }

  /* Type-tag */
  .tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #A0A0A0;
  }

  /* Big section padding */
  section { position: relative; z-index: 1; }
  .section-pad { padding-top: 120px; padding-bottom: 120px; }
  @media (max-width: 768px) {
    .section-pad { padding-top: 80px; padding-bottom: 80px; }
  }

  /* Coming soon badge */
  .badge {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #6B6B6B;
    border: 1px solid #1F1F1F;
    padding: 4px 8px;
  }

  /* Product placeholder screenshot */
  @keyframes phPadPulse {
    0%, 100% {
      opacity: .68;
      background: rgba(197,22,42,0.11);
      box-shadow: 0 0 14px -8px rgba(225,54,70,.75);
    }
    48% {
      opacity: 1;
      background: rgba(197,22,42,0.21);
      box-shadow: 0 0 26px -7px rgba(225,54,70,.98);
    }
  }
  @keyframes phMeterPulse {
    0%, 100% { transform: scaleX(.62); opacity: .62; }
    50% { transform: scaleX(1); opacity: 1; }
  }
  @keyframes phValveBreathe {
    0%, 100% {
      filter: brightness(.92);
      box-shadow:
        inset 0 0 30px rgba(255,255,255,0.045),
        0 0 30px -18px rgba(225,54,70,0.70);
    }
    50% {
      filter: brightness(1.12);
      box-shadow:
        inset 0 0 38px rgba(255,255,255,0.065),
        0 0 48px -17px rgba(225,54,70,0.96);
    }
  }
  @keyframes phValveGrid {
    0%, 100% { opacity: .72; background-position: 0 0, 0 0; }
    50% { opacity: 1; background-position: 0 6px, 0 0; }
  }
  @keyframes phTransientShape {
    0%, 100% {
      clip-path: polygon(0 58%, 8% 54%, 14% 34%, 20% 66%, 28% 42%, 34% 74%, 41% 28%, 49% 70%, 57% 48%, 64% 62%, 71% 20%, 78% 74%, 86% 42%, 94% 56%, 100% 48%, 100% 100%, 0 100%);
      opacity: .82;
    }
    50% {
      clip-path: polygon(0 54%, 8% 52%, 14% 22%, 20% 76%, 28% 39%, 34% 82%, 41% 20%, 49% 76%, 57% 44%, 64% 66%, 71% 14%, 78% 82%, 86% 38%, 94% 54%, 100% 46%, 100% 100%, 0 100%);
      opacity: .98;
    }
  }
  @keyframes phTransientScan {
    0%, 100% { transform: translateX(-3%); opacity: .64; }
    50% { transform: translateX(4%); opacity: .96; }
  }
  @keyframes phFilterSweep {
    0%, 100% { background-position: -12px 0, 0 0; opacity: .72; }
    50% { background-position: 16px 0, 0 0; opacity: 1; }
  }
  @keyframes phMfxStrip {
    0%, 100% { transform: translateX(-4%); opacity: .62; }
    50% { transform: translateX(5%); opacity: .98; }
  }
  @keyframes phStatusPulse {
    0%, 100% { opacity: .52; }
    50% { opacity: .92; }
  }
  @keyframes phOrbitSpin {
    to { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 360deg)); }
  }
  @keyframes phOrbitBeacon {
    0%, 100% { transform: rotate(0deg); opacity: .76; }
    50% { opacity: 1; }
    to { transform: rotate(360deg); }
  }
  @keyframes phMetersBars {
    0%, 100% { opacity: .72; background-position: 0 0, 0 0; }
    50% { opacity: 1; background-position: 8px 0, 0 0; }
  }
  @keyframes phMetersTrace {
    0%, 100% { opacity: .58; transform: translateX(-3%); }
    50% { opacity: .92; transform: translateX(3%); }
  }
  @keyframes phArmoryScan {
    0%, 100% { background-position: 0 0, 0 34px, 0 68px, 0 102px; opacity: .64; }
    50% { background-position: 12px 0, -8px 34px, 18px 68px, -14px 102px; opacity: .94; }
  }
  @keyframes phArmoryGlow {
    0%, 100% { box-shadow: inset 0 0 38px rgba(255,255,255,.025); }
    50% { box-shadow: inset 0 0 38px rgba(255,255,255,.025), 0 0 34px -24px rgba(197,22,42,.75); }
  }
  @keyframes phClickFlash {
    0% { opacity: .82; background-color: rgba(197,22,42,.18); }
    100% { opacity: .55; background-color: transparent; }
  }
  @keyframes phPadHit {
    0% { transform: scale(1); background: rgba(197,22,42,.12); box-shadow: 0 0 14px -7px #E13646; }
    38% { transform: scale(1.12); background: rgba(197,22,42,.32); box-shadow: 0 0 28px -5px rgba(225,54,70,1); }
    100% { transform: scale(1); background: rgba(197,22,42,.12); box-shadow: 0 0 14px -7px #E13646; }
  }
  @keyframes phGridClick {
    0% { transform: translate(-50%, -43%) scale(.98); filter: brightness(1); }
    38% { transform: translate(-50%, -43%) scale(1.045); filter: brightness(1.32); }
    100% { transform: translate(-50%, -43%) scale(1); filter: brightness(1); }
  }
  @keyframes phValveClick {
    0% {
      filter: brightness(1);
      box-shadow:
        inset 0 0 30px rgba(255,255,255,0.045),
        0 0 32px -16px rgba(225,54,70,0.8);
    }
    42% {
      filter: brightness(1.35);
      box-shadow:
        inset 0 0 46px rgba(255,255,255,0.08),
        0 0 70px -14px rgba(225,54,70,1);
    }
    100% {
      filter: brightness(1);
      box-shadow:
        inset 0 0 30px rgba(255,255,255,0.045),
        0 0 32px -16px rgba(225,54,70,0.8);
    }
  }
  @keyframes phWaveClick {
    0% { transform: scaleY(1); filter: brightness(1); }
    38% { transform: scaleY(1.12); filter: brightness(1.35); }
    100% { transform: scaleY(1); filter: brightness(1); }
  }
  @keyframes phTransientHit {
    0% {
      clip-path: polygon(0 58%, 8% 54%, 14% 34%, 20% 66%, 28% 42%, 34% 74%, 41% 28%, 49% 70%, 57% 48%, 64% 62%, 71% 20%, 78% 74%, 86% 42%, 94% 56%, 100% 48%, 100% 100%, 0 100%);
      filter: brightness(1);
    }
    38% {
      clip-path: polygon(0 50%, 8% 49%, 14% 10%, 20% 88%, 28% 34%, 34% 92%, 41% 8%, 49% 88%, 57% 38%, 64% 72%, 71% 6%, 78% 92%, 86% 32%, 94% 50%, 100% 42%, 100% 100%, 0 100%);
      filter: brightness(1.35);
    }
    100% {
      clip-path: polygon(0 58%, 8% 54%, 14% 34%, 20% 66%, 28% 42%, 34% 74%, 41% 28%, 49% 70%, 57% 48%, 64% 62%, 71% 20%, 78% 74%, 86% 42%, 94% 56%, 100% 48%, 100% 100%, 0 100%);
      filter: brightness(1);
    }
  }
  @keyframes phLineHit {
    0% { transform: translateX(-4%); opacity: .7; }
    42% { transform: translateX(8%); opacity: 1; }
    100% { transform: translateX(0); opacity: .9; }
  }
  @keyframes phFilterClick {
    0% { filter: brightness(1); box-shadow: inset 0 0 38px rgba(255,255,255,.025); }
    45% { filter: brightness(1.28); box-shadow: inset 0 0 48px rgba(255,255,255,.05), 0 0 44px -22px rgba(197,22,42,.9); }
    100% { filter: brightness(1); box-shadow: inset 0 0 38px rgba(255,255,255,.025); }
  }
  @keyframes phFilterCurveHit {
    0% { background-position: -18px 0, 0 0; opacity: .7; }
    44% { background-position: 24px 0, 0 0; opacity: 1; filter: brightness(1.35); }
    100% { background-position: 0 0, 0 0; opacity: .9; filter: brightness(1); }
  }
  @keyframes phStripHit {
    0% { transform: translateX(-6%) scaleX(.92); opacity: .62; }
    44% { transform: translateX(7%) scaleX(1.08); opacity: 1; }
    100% { transform: translateX(0) scaleX(1); opacity: .9; }
  }
  @keyframes phOrbitClick {
    0% { filter: drop-shadow(0 0 18px rgba(197,22,42,.16)); }
    40% { filter: drop-shadow(0 0 30px rgba(197,22,42,.55)) brightness(1.24); }
    100% { filter: drop-shadow(0 0 18px rgba(197,22,42,.16)); }
  }
  @keyframes phOrbitRingHit {
    0% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)); opacity: var(--a, .55); }
    42% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 72deg)) scale(1.08); opacity: .95; }
    100% { transform: translate(-50%, -50%) rotate(calc(var(--r, 0deg) + 120deg)); opacity: var(--a, .55); }
  }
  @keyframes phMetersClick {
    0% { filter: brightness(1); }
    36% { filter: brightness(1.35); }
    100% { filter: brightness(1); }
  }
  @keyframes phMetersPanelHit {
    0% {
      filter: brightness(1);
      box-shadow: inset 0 0 40px rgba(255,255,255,.025);
      border-color: rgba(255,255,255,.10);
    }
    38% {
      filter: brightness(1.3);
      box-shadow:
        inset 0 0 58px rgba(255,255,255,.055),
        inset 0 0 56px rgba(197,22,42,.09),
        0 0 54px -22px rgba(197,22,42,.96);
      border-color: rgba(197,22,42,.46);
    }
    100% {
      filter: brightness(1);
      box-shadow: inset 0 0 40px rgba(255,255,255,.025);
      border-color: rgba(255,255,255,.10);
    }
  }
  @keyframes phMetersBarsHit {
    0% {
      opacity: .76;
      background-size: 34px 100%, 100% 100%;
      transform: scaleY(.92);
    }
    36% {
      opacity: 1;
      background-size: 22px 100%, 100% 100%;
      transform: scaleY(1.18);
      filter: brightness(1.48);
    }
    100% {
      opacity: .86;
      background-size: 34px 100%, 100% 100%;
      transform: scaleY(1);
    }
  }
  @keyframes phMetersScopeHit {
    0% { transform: scale(.96); opacity: .72; filter: brightness(1); }
    38% { transform: scale(1.14); opacity: 1; filter: brightness(1.42); }
    100% { transform: scale(1); opacity: .86; filter: brightness(1); }
  }
  @keyframes phMetersStripHit {
    0% {
      clip-path: polygon(0 72%, 8% 48%, 14% 58%, 22% 26%, 31% 64%, 42% 42%, 54% 70%, 64% 32%, 75% 58%, 85% 40%, 100% 54%, 100% 100%, 0 100%);
      filter: brightness(1);
    }
    38% {
      clip-path: polygon(0 74%, 8% 30%, 14% 68%, 22% 14%, 31% 74%, 42% 28%, 54% 84%, 64% 18%, 75% 68%, 85% 28%, 100% 48%, 100% 100%, 0 100%);
      filter: brightness(1.35);
    }
    100% {
      clip-path: polygon(0 72%, 8% 48%, 14% 58%, 22% 26%, 31% 64%, 42% 42%, 54% 70%, 64% 32%, 75% 58%, 85% 40%, 100% 54%, 100% 100%, 0 100%);
      filter: brightness(1);
    }
  }
  @keyframes phMetersNeedleHit {
    0% { transform: translateX(-6%) scaleX(.92); opacity: .45; }
    38% { transform: translateX(var(--meter-hit-shift, 0px)) scaleX(1.1); opacity: .96; }
    100% { transform: translateX(0) scaleX(1); opacity: .55; }
  }
  @keyframes phArmoryHit {
    0% { background-position: 0 0, 0 34px, 0 68px, 0 102px; filter: brightness(1); }
    44% { background-position: 28px 0, -22px 34px, 32px 68px, -28px 102px; filter: brightness(1.28); }
    100% { background-position: 0 0, 0 34px, 0 68px, 0 102px; filter: brightness(1); }
  }
  .ph-shot {
    aspect-ratio: 4 / 3;
    background:
      radial-gradient(120% 80% at 30% 0%, rgba(255,255,255,0.04), transparent 60%),
      linear-gradient(180deg, #0A0A0A, #050505);
    border-bottom: 1px solid #1F1F1F;
    position: relative;
    overflow: hidden;
  }
  .ph-shot.is-activated::after { animation: phClickFlash .58s ease-out; }
  .ph-shot.pushman.is-activated .ph-pad-grid { animation: phGridClick .58s cubic-bezier(.2,.8,.2,1); }
  .ph-shot.pushman .ph-pad-grid i.is-hit {
    border-color: rgba(197,22,42,.95);
    animation: phPadHit .62s cubic-bezier(.2,.8,.2,1);
  }
  .ph-shot.godzilla.is-activated .ph-valve-core { animation: phValveClick .64s ease-out; }
  .ph-shot.godzilla.is-activated .ph-valve-core::before { animation: phValveGrid .26s linear 2; }
  .ph-shot.punchbox.is-activated .ph-waveform { animation: phTransientHit .62s ease-out; }
  .ph-shot.punchbox.is-activated .ph-transient-line { animation: phLineHit .62s ease-out; }
  .ph-shot.mfx33.is-activated .ph-mfx-panel { animation: phFilterClick .6s ease-out; }
  .ph-shot.mfx33.is-activated .ph-mfx-panel::before { animation: phFilterCurveHit .62s ease-out; }
  .ph-shot.mfx33.is-activated .ph-mfx-strip { animation: phStripHit .62s ease-out; }
  .ph-shot.void.is-activated .ph-orbit-core { animation: phOrbitClick .65s ease-out; }
  .ph-shot.void.is-activated .ph-orbit-core i { animation: phOrbitRingHit .68s ease-out; }
  .ph-shot.meters { --meter-hit-x: 50%; --meter-hit-y: 50%; --meter-hit-shift: 0px; }
  .ph-shot.meters.is-activated .ph-meters-panel {
    background:
      radial-gradient(circle at var(--meter-hit-x, 50%) var(--meter-hit-y, 50%), rgba(197,22,42,.32), transparent 22%),
      radial-gradient(circle at var(--meter-hit-x, 50%) var(--meter-hit-y, 50%), rgba(255,255,255,.09), transparent 9%),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px),
      rgba(8,8,8,.82);
    background-size: auto, auto, 24px 24px, 24px 24px, auto;
    animation: phMetersPanelHit .64s ease-out;
  }
  .ph-shot.meters.is-activated .ph-meters-panel::before { animation: phMetersBarsHit .64s ease-out; transform-origin: bottom center; }
  .ph-shot.meters.is-activated .ph-meters-panel::after { animation: phMetersScopeHit .64s ease-out; transform-origin: center; }
  .ph-shot.meters.is-activated .ph-meters-strip { animation: phMetersStripHit .64s ease-out; }
  .ph-shot.meters.is-activated .ph-meters-strip::after { animation: phMetersNeedleHit .64s ease-out; }
  .ph-shot.armory.is-activated .ph-armory-core { animation: phFilterClick .62s ease-out; }
  .ph-shot.armory.is-activated .ph-armory-core::before { animation: phArmoryHit .64s ease-out; }
  .ph-shot::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(80% 60% at 50% 40%, #000, transparent 80%);
  }
  .ph-shot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, transparent 0 16px, rgba(255,255,255,0.025) 16px 17px, transparent 17px),
      linear-gradient(180deg, rgba(255,255,255,0.055), transparent 38%, rgba(0,0,0,0.45));
    opacity: .55;
  }
  .ph-shot .ph-label {
    position: absolute; left: 16px; right: 16px; bottom: 12px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.28em; text-transform: uppercase; color: #6B6B6B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 4;
  }
  .ph-shot .ph-name {
    position: absolute; left: 16px; top: 14px;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.18em; color: #fff; opacity: 0.85;
  }
  .ph-shot .ph-meter {
    position: absolute; right: 16px; top: 14px;
    width: 60px; height: 6px;
    background: #141414;
    border: 1px solid #1F1F1F;
  }
  .ph-shot .ph-meter::after {
    content: ""; position: absolute; left: 1px; top: 1px; bottom: 1px;
    width: 38%; background: #C5162A; opacity: 0.82;
    transform-origin: left center;
  }
  .ph-shot.pushman .ph-meter::after,
  .ph-shot.godzilla .ph-meter::after { width: calc(100% - 2px); opacity: .98; }
  .ph-shot.punchbox .ph-meter::after,
  .ph-shot.mfx33 .ph-meter::after,
  .ph-shot.meters .ph-meter::after { width: 58%; animation: phStatusPulse 4.8s ease-in-out infinite; }
  .ph-shot.void .ph-meter::after { width: 42%; animation: phStatusPulse 5.4s ease-in-out infinite; }
  .ph-shot.armory .ph-meter::after { width: 24%; opacity: .5; }
  .ph-shot.desat { filter: grayscale(1) brightness(0.85); }

  /* Synthetic UI ornament — knobs/lines so cards aren't flat */
  .ph-shot .ph-knobs {
    position: absolute; left: 16px; right: 16px; bottom: 38px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  }
  .ph-shot .ph-knobs .k {
    width: 100%; aspect-ratio: 1; border: 1px solid #1F1F1F; border-radius: 999px;
    position: relative;
  }
  .ph-shot .ph-knobs .k::after {
    content: ""; position: absolute; left: 50%; top: 14%; width: 1px; height: 30%;
    background: #6B6B6B; transform-origin: bottom center;
    transform: translateX(-50%) rotate(var(--r, -30deg));
  }
  .ph-pad-grid {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -42%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    z-index: 1;
    width: min(56%, 168px);
  }
  .ph-pad-grid i {
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.025);
  }
  .ph-shot.pushman::before {
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px),
      radial-gradient(circle at 50% 42%, rgba(197,22,42,.09), transparent 44%);
    background-size: 28px 28px, 28px 28px, auto;
  }
  .ph-pad-grid i:nth-child(2),
  .ph-pad-grid i:nth-child(5),
  .ph-pad-grid i:nth-child(11),
  .ph-pad-grid i:nth-child(16) {
    border-color: rgba(197,22,42,0.68);
    background: rgba(197,22,42,0.15);
    box-shadow: 0 0 18px -8px #E13646;
    animation: phPadPulse 3.6s ease-in-out infinite;
  }
  .ph-pad-grid i:nth-child(5) { animation-delay: .45s; }
  .ph-pad-grid i:nth-child(11) { animation-delay: .9s; }
  .ph-pad-grid i:nth-child(16) { animation-delay: 1.35s; }
  .ph-valve-core {
    position: absolute;
    left: 50%; top: 47%;
    width: 102px; height: 158px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 54px 54px 18px 18px !important;
    z-index: 1;
    background:
      linear-gradient(90deg, rgba(255,255,255,0.10), transparent 20%, transparent 78%, rgba(255,255,255,0.08)),
      radial-gradient(50% 32% at 50% 78%, rgba(218,64,42,0.42), rgba(197,22,42,0.22) 34%, transparent 72%),
      radial-gradient(52% 72% at 50% 48%, rgba(255,255,255,0.08), transparent 68%),
      linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015) 48%, rgba(0,0,0,0.34));
    box-shadow:
      inset 0 0 30px rgba(255,255,255,0.045),
      0 0 32px -16px rgba(225,54,70,0.8);
    animation: phValveBreathe 4.8s ease-in-out infinite;
  }
  .ph-valve-core::before,
  .ph-valve-core::after {
    content: "";
    position: absolute;
    pointer-events: none;
  }
  .ph-valve-core::before {
    left: 28px; right: 28px; top: 34px; bottom: 24px;
    border-left: 1px solid rgba(255,255,255,0.20);
    border-right: 1px solid rgba(255,255,255,0.20);
    background:
      repeating-linear-gradient(180deg, transparent 0 10px, rgba(255,255,255,0.075) 10px 11px),
      linear-gradient(90deg, transparent, rgba(218,64,42,0.14), transparent);
    animation: phValveGrid 3.6s ease-in-out infinite;
  }
  .ph-valve-core::after {
    left: 17px; right: 17px; bottom: -13px; height: 22px;
    border: 1px solid rgba(255,255,255,0.13);
    background:
      linear-gradient(90deg, transparent 0 13%, rgba(255,255,255,0.11) 13% 15%, transparent 15% 32%, rgba(255,255,255,0.11) 32% 34%, transparent 34% 66%, rgba(255,255,255,0.11) 66% 68%, transparent 68% 85%, rgba(255,255,255,0.11) 85% 87%, transparent 87%),
      #080808;
  }
  .ph-waveform {
    position: absolute;
    left: 20px; right: 20px; bottom: 56px;
    height: 104px;
    z-index: 1;
    border-left: 1px solid rgba(255,255,255,0.08);
    border-right: 1px solid rgba(255,255,255,0.08);
    background:
      linear-gradient(to top, rgba(197,22,42,0.20), transparent 48%),
      repeating-linear-gradient(90deg, transparent 0 12px, rgba(255,255,255,0.045) 12px 13px);
    clip-path: polygon(0 60%, 8% 55%, 14% 22%, 20% 74%, 27% 46%, 34% 82%, 41% 30%, 49% 78%, 57% 50%, 64% 66%, 72% 18%, 78% 82%, 86% 44%, 94% 56%, 100% 48%, 100% 100%, 0 100%);
    animation: phTransientShape 4.6s ease-in-out infinite;
  }
  .ph-waveform::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 49%;
    height: 1px;
    background: rgba(197,22,42,0.8);
    box-shadow: 0 0 16px rgba(225,54,70,0.45);
  }
  .ph-shot.punchbox::before {
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.032) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.026) 1px, transparent 1px),
      linear-gradient(180deg, transparent 0 42%, rgba(197,22,42,.075) 42% 70%, transparent 70%);
    background-size: 28px 28px, 28px 28px, auto;
  }
  .ph-punchbox-face {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(56%, 168px);
    aspect-ratio: 88 / 169;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255,255,255,.13);
    background:
      linear-gradient(90deg, rgba(197,22,42,.18) 0 2px, transparent 2px calc(100% - 2px), rgba(197,22,42,.18) calc(100% - 2px)),
      repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0 1px, transparent 1px 13px),
      #080808;
    box-shadow: 0 0 34px -22px rgba(225,54,70,.85), inset 0 0 30px rgba(255,255,255,.03);
  }
  .ph-punchbox-face::before {
    content: "ATTACK\A SUSTAIN\A GAIN";
    white-space: pre;
    position: absolute;
    left: 12px;
    top: 14px;
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 4.8;
    letter-spacing: .2em;
    color: rgba(255,255,255,.55);
  }
  .ph-punchbox-face::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 24px;
    width: 56px;
    height: 118px;
    background:
      radial-gradient(circle at 50% 17%, rgba(197,22,42,.82) 0 3px, transparent 4px),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.55) 0 2px, transparent 3px),
      radial-gradient(circle at 50% 83%, rgba(197,22,42,.66) 0 3px, transparent 4px),
      linear-gradient(180deg, transparent 0 48%, rgba(255,255,255,.18) 48% 49%, transparent 49%);
    border-left: 1px solid rgba(255,255,255,.08);
  }
  .ph-transient-line {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 44px;
    height: 54px;
    background:
      linear-gradient(90deg, transparent 0 16%, rgba(197,22,42,.82) 16% 18%, transparent 18% 28%, rgba(255,255,255,.25) 28% 29%, transparent 29% 70%, rgba(197,22,42,.55) 70% 72%, transparent 72%),
      linear-gradient(180deg, transparent 49%, rgba(255,255,255,.10) 49% 50%, transparent 50%);
    clip-path: polygon(0 56%, 10% 54%, 15% 8%, 18% 96%, 24% 48%, 34% 42%, 43% 50%, 50% 58%, 62% 52%, 74% 48%, 86% 53%, 100% 50%, 100% 100%, 0 100%);
    opacity: .9;
    animation: phTransientScan 3.8s ease-in-out infinite;
  }
  .ph-free-core {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 54px;
    bottom: 48px;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .ph-free-core i {
    position: relative;
    border: 1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%),
      rgba(255,255,255,.015);
  }
  .ph-free-core i::before {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    top: 13px;
    height: 1px;
    background: rgba(255,255,255,.22);
    box-shadow: 0 10px 0 rgba(255,255,255,.12), 0 20px 0 rgba(255,255,255,.08);
  }
  .ph-free-core i:nth-child(2),
  .ph-free-core i:nth-child(5) {
    border-color: rgba(197,22,42,.52);
    background:
      radial-gradient(80% 70% at 50% 58%, rgba(197,22,42,.16), transparent 70%),
      rgba(255,255,255,.015);
    box-shadow: 0 0 24px -16px rgba(225,54,70,.85);
  }
  .ph-free-core i:nth-child(5)::after {
    content: "GIT";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .24em;
    color: rgba(255,255,255,.72);
  }
  .ph-armory-core {
    position: absolute;
    left: 18px;
    right: 18px;
    top: 52px;
    bottom: 44px;
    z-index: 1;
    border: 1px solid rgba(255,255,255,.09);
    background:
      linear-gradient(90deg, rgba(197,22,42,.16) 0 1px, transparent 1px),
      repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 18px),
      #080808;
    box-shadow: inset 0 0 38px rgba(255,255,255,.025);
    animation: phArmoryGlow 6s ease-in-out infinite;
  }
  .ph-armory-core::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    top: 20px;
    height: 104px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.16) 0 46%, transparent 46% 52%, rgba(197,22,42,.72) 52% 54%, transparent 54% 100%),
      linear-gradient(90deg, rgba(255,255,255,.11) 0 62%, transparent 62% 100%),
      linear-gradient(90deg, rgba(255,255,255,.08) 0 36%, transparent 36% 100%),
      linear-gradient(90deg, rgba(255,255,255,.13) 0 70%, transparent 70% 100%);
    background-size: 100% 1px, 100% 1px, 100% 1px, 100% 1px;
    background-position: 0 0, 0 34px, 0 68px, 0 102px;
    background-repeat: no-repeat;
    animation: phArmoryScan 6.2s ease-in-out infinite;
  }
  .ph-armory-core::after {
    content: "SCAN\A ORGANIZE\A VERIFY";
    white-space: pre;
    position: absolute;
    right: 18px;
    bottom: 14px;
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 2.3;
    letter-spacing: .22em;
    color: rgba(255,255,255,.48);
  }
  .ph-orbit-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(58%, 170px);
    aspect-ratio: 1;
    transform: translate(-50%, -45%);
    z-index: 1;
    filter: drop-shadow(0 0 18px rgba(197,22,42,.16));
  }
  .ph-orbit-core i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    height: 30%;
    border: 1px solid rgba(197,22,42,.58);
    border-radius: 50% !important;
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    opacity: var(--a, .55);
    animation: phOrbitSpin var(--orbit-d, 14s) linear infinite;
  }
  .ph-orbit-core i:nth-child(1) { --orbit-d: 15s; }
  .ph-orbit-core i:nth-child(2) { --r: 60deg; --a: .42; --orbit-d: 19s; animation-direction: reverse; }
  .ph-orbit-core i:nth-child(3) { --r: -60deg; --a: .32; --orbit-d: 23s; }
  .ph-orbit-core::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    background: rgba(0,0,0,.95);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 24px rgba(197,22,42,.20);
  }
  .ph-orbit-core::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 87% 50%, rgba(197,22,42,.95) 0 4px, transparent 5px),
      radial-gradient(circle at 31% 32%, rgba(197,22,42,.75) 0 3px, transparent 4px),
      radial-gradient(circle at 31% 68%, rgba(197,22,42,.60) 0 3px, transparent 4px),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.95) 0 5px, transparent 6px);
    animation: phOrbitBeacon 12s linear infinite;
  }
  .ph-mfx-panel {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 24%;
    height: 54%;
    border: 1px solid rgba(255,255,255,.11);
    background:
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.045) 1px, transparent 1px),
      #080808;
    background-size: 28px 28px;
    box-shadow: inset 0 0 38px rgba(255,255,255,.025);
  }
  .ph-mfx-panel::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 16px;
    height: 58px;
    border: 1px solid rgba(255,255,255,.08);
    background:
      radial-gradient(90% 80% at 16% 82%, transparent 0 36%, rgba(197,22,42,.78) 37% 39%, transparent 40%),
      linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
    background-size: 100% 100%, 140% 100%;
    animation: phFilterSweep 5.6s ease-in-out infinite;
  }
  .ph-mfx-panel::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 18px;
    height: 42px;
    background:
      radial-gradient(circle at 10% 50%, rgba(197,22,42,.55) 0 18px, transparent 19px),
      radial-gradient(circle at 31% 50%, rgba(255,255,255,.08) 0 18px, transparent 19px),
      radial-gradient(circle at 52% 50%, rgba(255,255,255,.08) 0 18px, transparent 19px),
      radial-gradient(circle at 73% 50%, rgba(255,255,255,.08) 0 18px, transparent 19px),
      radial-gradient(circle at 94% 50%, rgba(197,22,42,.42) 0 18px, transparent 19px);
  }
  .ph-mfx-strip {
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 42px;
    height: 9px;
    background:
      linear-gradient(90deg, rgba(197,22,42,.9) 0 18%, transparent 18% 24%, rgba(255,255,255,.16) 24% 44%, transparent 44% 58%, rgba(197,22,42,.52) 58% 72%, transparent 72%);
    opacity: .9;
    animation: phMfxStrip 4.6s ease-in-out infinite;
  }
  .ph-meters-panel {
    position: absolute;
    left: 9%;
    right: 9%;
    top: 24%;
    height: 52%;
    border: 1px solid rgba(255,255,255,.10);
    background:
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px),
      rgba(8,8,8,.82);
    background-size: 24px 24px;
    box-shadow: inset 0 0 40px rgba(255,255,255,.025);
  }
  .ph-meters-panel::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 24px;
    bottom: 24px;
    width: 44%;
    background:
      linear-gradient(90deg, rgba(197,22,42,.88) 0 7px, transparent 7px 13px, rgba(255,255,255,.30) 13px 18px, transparent 18px 24px, rgba(197,22,42,.48) 24px 30px, transparent 30px),
      linear-gradient(180deg, transparent 0 12%, rgba(255,255,255,.11) 12% 13%, transparent 13% 34%, rgba(255,255,255,.11) 34% 35%, transparent 35% 58%, rgba(255,255,255,.11) 58% 59%, transparent 59%);
    background-size: 34px 100%, 100% 100%;
    animation: phMetersBars 3.8s ease-in-out infinite;
  }
  .ph-meters-panel::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 28px;
    bottom: 28px;
    width: 36%;
    background:
      radial-gradient(80% 50% at 50% 50%, transparent 0 56%, rgba(197,22,42,.70) 57% 59%, transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.16), transparent 1px),
      linear-gradient(90deg, transparent 48%, rgba(255,255,255,.16) 48% 50%, transparent 50%);
  }
  .ph-meters-strip {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 42px;
    height: 42px;
    background:
      linear-gradient(180deg, transparent 48%, rgba(197,22,42,.82) 48% 51%, transparent 51%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 18px);
    clip-path: polygon(0 72%, 8% 48%, 14% 58%, 22% 26%, 31% 64%, 42% 42%, 54% 70%, 64% 32%, 75% 58%, 85% 40%, 100% 54%, 100% 100%, 0 100%);
    opacity: .86;
    animation: phMetersTrace 4.6s ease-in-out infinite;
  }
  .ph-meters-strip::after {
    content: "";
    position: absolute;
    left: 2%;
    top: 45%;
    width: 28%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(197,22,42,.96), rgba(255,255,255,.65), transparent);
    opacity: .55;
    box-shadow: 0 0 16px rgba(197,22,42,.45);
    transform: translateX(0);
    transform-origin: center;
  }
  .logbook-shell {
    display: grid;
    grid-template-columns: minmax(280px, 390px) minmax(0, 1fr);
    gap: 54px;
    align-items: stretch;
  }
  .logbook-map {
    position: sticky;
    top: 110px;
    min-height: 520px;
    border: 1px solid #1F1F1F;
    background:
      radial-gradient(62% 62% at 50% 48%, rgba(197,22,42,.10), transparent 58%),
      linear-gradient(180deg, rgba(12,12,12,.94), rgba(4,4,4,.94));
    overflow: hidden;
    transition: border-color .24s ease, box-shadow .24s ease, filter .24s ease;
  }
  .logbook-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 50%, transparent 0 38%, rgba(255,255,255,.06) 38.2% 38.45%, transparent 38.7%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 28px);
    opacity: .42;
    mask-image: radial-gradient(78% 72% at 50% 50%, #000, transparent 88%);
  }
  .logbook-map::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, transparent 0 28%, rgba(197,22,42,.22) 49%, rgba(255,255,255,.08) 50%, transparent 72%),
      repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 5px);
    opacity: .12;
    pointer-events: none;
    transform: translateY(-34%);
    transition: opacity .24s ease;
  }
  .logbook-map:hover,
  .logbook-map.is-activated {
    border-color: rgba(197,22,42,.48);
    box-shadow: 0 0 42px -28px rgba(197,22,42,.9), inset 0 0 44px -34px rgba(197,22,42,.72);
    filter: contrast(1.06);
  }
  .logbook-map:hover::after,
  .logbook-map.is-activated::after {
    opacity: .28;
    animation: logbookPanelSweep .9s ease-out;
  }
  .logbook-map-title,
  .logbook-map-caption {
    position: absolute;
    z-index: 2;
    font-family: var(--font-mono);
    letter-spacing: .28em;
    text-transform: uppercase;
  }
  .logbook-map-title {
    left: 18px;
    top: 16px;
    font-size: 10px;
    color: #A0A0A0;
  }
  .logbook-map-caption {
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 9px;
    color: #6B6B6B;
  }
  .logbook-spine {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 72px;
    bottom: 70px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), rgba(197,22,42,.62), rgba(255,255,255,.16), transparent);
    transform: translateX(-50%);
    transition: box-shadow .24s ease, background .24s ease;
  }
  .logbook-spine i {
    position: absolute;
    left: 50%;
    width: 13px;
    height: 13px;
    border: 1px solid rgba(197,22,42,.76);
    background: #050505;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 22px -7px rgba(197,22,42,.9);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .logbook-spine i:nth-child(1) { top: 10%; }
  .logbook-spine i:nth-child(2) { top: 36%; }
  .logbook-spine i:nth-child(3) { top: 63%; }
  .logbook-spine i:nth-child(4) { top: 88%; }
  .logbook-trace {
    position: absolute;
    z-index: 1;
    left: 12%;
    right: 12%;
    top: 28%;
    height: 42%;
    border: 1px solid rgba(255,255,255,.08);
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(197,22,42,.34) 8% 10%, transparent 10% 25%, rgba(255,255,255,.18) 25% 26%, transparent 26% 48%, rgba(197,22,42,.44) 48% 52%, transparent 52% 72%, rgba(255,255,255,.18) 72% 73%, transparent 73%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 13px);
    opacity: .86;
    clip-path: polygon(0 64%, 8% 46%, 15% 58%, 22% 34%, 30% 62%, 39% 42%, 48% 70%, 57% 30%, 68% 60%, 78% 44%, 88% 55%, 100% 38%, 100% 100%, 0 100%);
    transform-origin: center bottom;
    transition: filter .22s ease, opacity .22s ease;
  }
  .logbook-map:hover .logbook-trace,
  .logbook-map.is-activated .logbook-trace {
    filter: saturate(1.45) brightness(1.24);
    opacity: 1;
    animation: logbookTraceWake .82s cubic-bezier(.16,1,.3,1);
  }
  .logbook-map:hover .logbook-spine,
  .logbook-map.is-activated .logbook-spine {
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.38), rgba(197,22,42,.86), rgba(255,255,255,.26), transparent);
    box-shadow: 0 0 20px rgba(197,22,42,.24);
  }
  .logbook-map:hover .logbook-spine i,
  .logbook-map.is-activated .logbook-spine i {
    background: rgba(197,22,42,.16);
    border-color: rgba(255,55,74,.96);
    box-shadow: 0 0 24px -4px rgba(197,22,42,.95), inset 0 0 14px rgba(197,22,42,.28);
  }
  .logbook-map.is-activated .logbook-spine i {
    animation: logbookNodePulse .82s cubic-bezier(.16,1,.3,1);
  }
  .logbook-map.is-activated .logbook-spine i:nth-child(2) { animation-delay: .04s; }
  .logbook-map.is-activated .logbook-spine i:nth-child(3) { animation-delay: .08s; }
  .logbook-map.is-activated .logbook-spine i:nth-child(4) { animation-delay: .12s; }
  @keyframes logbookTraceWake {
    0% { transform: scaleY(.62); clip-path: polygon(0 78%, 9% 76%, 18% 78%, 27% 72%, 36% 80%, 45% 74%, 54% 80%, 63% 70%, 72% 78%, 82% 72%, 92% 78%, 100% 74%, 100% 100%, 0 100%); }
    58% { transform: scaleY(1.06); }
    100% { transform: scaleY(1); clip-path: polygon(0 64%, 8% 46%, 15% 58%, 22% 34%, 30% 62%, 39% 42%, 48% 70%, 57% 30%, 68% 60%, 78% 44%, 88% 55%, 100% 38%, 100% 100%, 0 100%); }
  }
  @keyframes logbookNodePulse {
    0% { transform: translate(-50%, -50%) scale(.76); }
    55% { transform: translate(-50%, -50%) scale(1.26); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
  @keyframes logbookPanelSweep {
    0% { transform: translateY(-58%); }
    100% { transform: translateY(58%); }
  }
  .logbook-timeline {
    display: grid;
    gap: 14px;
  }
  .log-entry {
    position: relative;
    display: grid;
    grid-template-columns: 142px minmax(0, 1fr);
    min-height: 138px;
    border: 1px solid #1F1F1F;
    background:
      linear-gradient(90deg, rgba(197,22,42,.055), transparent 34%),
      rgba(8,8,8,.64);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .log-entry:hover {
    border-color: rgba(197,22,42,.68);
    box-shadow: 0 0 34px -24px rgba(225,54,70,.75);
    transform: translateY(-2px);
  }
  .log-entry-date {
    padding: 24px 22px;
    border-right: 1px solid #1F1F1F;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #C5162A;
  }
  .log-entry-body {
    padding: 24px 26px;
  }
  .log-entry-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #6B6B6B;
  }
  .log-entry-title {
    margin-top: 12px;
    font-family: var(--font-mono);
    font-size: 22px;
    line-height: 1.2;
    color: #fff;
  }
  .log-entry-copy {
    margin-top: 10px;
    color: #A0A0A0;
    font-size: 14px;
    line-height: 1.7;
  }
  .log-entry-links {
    margin-top: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
  }
  .log-entry-links a,
  .log-entry-links span {
    color: #6B6B6B;
  }
  .log-entry-links a:hover { color: #fff; }
  @media (max-width: 920px) {
    .logbook-shell { grid-template-columns: 1fr; gap: 30px; }
    .logbook-map {
      position: relative;
      top: 0;
      min-height: 300px;
    }
  }
  @media (max-width: 620px) {
    .log-entry { grid-template-columns: 1fr; }
    .log-entry-date {
      border-right: 0;
      border-bottom: 1px solid #1F1F1F;
      padding: 18px 20px;
    }
    .log-entry-body { padding: 20px; }
  }
  .lab-notes-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid #1F1F1F;
  }
  .lab-note-card {
    min-height: 250px;
    padding: 22px;
    border-right: 1px solid #1F1F1F;
    background:
      radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.04), transparent 60%),
      linear-gradient(180deg, #090909, #050505);
    position: relative;
    overflow: hidden;
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .lab-note-card:last-child { border-right: 0; }
  .lab-note-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    pointer-events: none;
    opacity: .32;
    background:
      linear-gradient(#6B6B6B 0 0) left top / 16px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left top / 1px 16px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 16px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 1px 16px no-repeat;
  }
  .lab-note-card:hover {
    z-index: 2;
    transform: translateY(-3px);
    border-color: #C5162A;
    box-shadow: 0 0 54px -30px rgba(197,22,42,.78);
  }
  .lab-note-card .num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    color: #C5162A;
  }
  .lab-note-card h3 {
    margin-top: 42px;
    font-family: var(--font-mono);
    font-size: 20px;
    line-height: 1.18;
    letter-spacing: -.03em;
    color: #fff;
  }
  .lab-note-card p {
    margin-top: 16px;
    color: #A0A0A0;
    font-size: 13px;
    line-height: 1.65;
  }
  .lab-note-card .status {
    margin-top: 30px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .22em;
    color: #6B6B6B;
    text-transform: uppercase;
  }
  @media (max-width: 1100px) {
    .lab-notes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lab-note-card { border-bottom: 1px solid #1F1F1F; }
    .lab-note-card:nth-child(2n) { border-right: 0; }
    .lab-note-card:last-child { border-bottom: 0; }
  }
  @media (max-width: 640px) {
    .lab-notes-grid { grid-template-columns: 1fr; }
    .lab-note-card,
    .lab-note-card:nth-child(2n) { border-right: 0; }
  }
  .lab-notes-soon {
    margin-top: 40px;
    border: 1px solid #1F1F1F;
    min-height: 260px;
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.2fr);
    background:
      radial-gradient(86% 80% at 76% 48%, rgba(197,22,42,.075), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%),
      #050505;
    position: relative;
    overflow: hidden;
  }
  .lab-notes-soon::before {
    content: "";
    position: absolute;
    inset: 18px;
    pointer-events: none;
    opacity: .38;
    background:
      linear-gradient(#6B6B6B 0 0) left top / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) left top / 1px 18px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 18px 1px no-repeat,
      linear-gradient(#6B6B6B 0 0) right bottom / 1px 18px no-repeat;
  }
  .lab-notes-soon::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px);
    opacity: .42;
  }
  .lab-notes-signal {
    border-right: 1px solid #1F1F1F;
    min-height: 260px;
    position: relative;
    overflow: hidden;
  }
  .lab-notes-signal::before {
    content: "";
    position: absolute;
    left: 16%;
    right: 16%;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), rgba(197,22,42,.76), rgba(255,255,255,.16), transparent);
    box-shadow: 0 0 28px rgba(197,22,42,.16);
  }
  .lab-notes-signal::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    border: 1px solid rgba(197,22,42,.38);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: inset 0 0 42px rgba(197,22,42,.05), 0 0 34px -24px rgba(197,22,42,.9);
  }
  .lab-notes-soon-copy {
    position: relative;
    z-index: 2;
    padding: clamp(28px, 5vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  @media (max-width: 760px) {
    .lab-notes-soon {
      grid-template-columns: 1fr;
      min-height: 0;
    }
    .lab-notes-signal {
      min-height: 150px;
      border-right: 0;
      border-bottom: 1px solid #1F1F1F;
    }
  }
  .lab-afterimage {
    position: relative;
    overflow: hidden;
    border: 1px solid #1F1F1F;
    background:
      radial-gradient(70% 58% at 50% 46%, rgba(197,22,42,.12), transparent 54%),
      linear-gradient(180deg, rgba(12,12,12,.96), rgba(4,4,4,.96));
    min-height: 470px;
  }
  .lab-afterimage::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at center, transparent 0 34%, rgba(255,255,255,.055) 34.2% 34.45%, transparent 34.7%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 31px),
      repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 31px);
    opacity: .42;
    mask-image: radial-gradient(78% 70% at 50% 48%, #000, transparent 86%);
  }
  .lab-afterimage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.055) 0 1px, transparent 1px 5px);
    opacity: .12;
    pointer-events: none;
  }
  .lab-ai-badge {
    position: absolute;
    left: 16px;
    top: 14px;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .28em;
    color: #A0A0A0;
    text-transform: uppercase;
  }
  .lab-ai-stack {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(74%, 270px);
    aspect-ratio: 1 / 1.28;
    transform: translate(-50%, -48%);
    z-index: 1;
  }
  .lab-ai-panel {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255,255,255,.14);
    background:
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(0deg, rgba(255,255,255,.03) 1px, transparent 1px),
      rgba(8,8,8,.56);
    background-size: 26px 26px;
    box-shadow: inset 0 0 42px rgba(255,255,255,.025);
  }
  .lab-ai-panel:nth-child(1) { transform: translate(-22px, 14px); opacity: .22; }
  .lab-ai-panel:nth-child(2) { transform: translate(16px, -12px); opacity: .30; }
  .lab-ai-panel:nth-child(3) {
    transform: translate(0, 0);
    opacity: .95;
    border-color: rgba(197,22,42,.44);
    box-shadow:
      inset 0 0 48px rgba(255,255,255,.028),
      0 0 42px -26px rgba(225,54,70,.95);
  }
  .lab-ai-panel:nth-child(3)::before {
    content: "PUSHMAN\A GODZILLA\A PUNCHBOX\A MFX33\A VOID\A ARMORY";
    white-space: pre;
    position: absolute;
    left: 18px;
    top: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 2.15;
    letter-spacing: .24em;
    color: rgba(255,255,255,.46);
  }
  .lab-ai-panel:nth-child(3)::after {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 34px;
    height: 72px;
    background:
      linear-gradient(90deg, transparent 0 8%, rgba(197,22,42,.34) 8% 10%, transparent 10% 24%, rgba(255,255,255,.18) 24% 25%, transparent 25% 48%, rgba(197,22,42,.42) 48% 52%, transparent 52% 74%, rgba(255,255,255,.2) 74% 75%, transparent 75%),
      repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 13px);
    border: 1px solid rgba(255,255,255,.08);
  }
  .lab-ai-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50% !important;
    transform: translate(-50%, -50%) rotate(-18deg);
    z-index: 2;
    opacity: .8;
  }
  .lab-ai-orbit::before,
  .lab-ai-orbit::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C5162A;
    box-shadow: 0 0 16px rgba(225,54,70,.7);
  }
  .lab-ai-orbit::before { left: 12%; top: 19%; }
  .lab-ai-orbit::after { right: 18%; bottom: 13%; opacity: .75; }
  .lab-ai-caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 12px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .28em;
    color: #6B6B6B;
    text-transform: uppercase;
  }
  .lab-ai-caption b {
    color: #A0A0A0;
    font-weight: 400;
  }
  .method-shell {
    display: grid;
    grid-template-columns: minmax(280px, 430px) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 78px);
    align-items: stretch;
  }
  .method-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 470px;
  }
  .method-brief {
    border: 1px solid #1F1F1F;
    background: rgba(8,8,8,.58);
    display: grid;
    grid-template-columns: 118px 1fr;
    max-width: 720px;
  }
  .method-brief > div {
    padding: 14px 16px;
    border-bottom: 1px solid #1F1F1F;
  }
  .method-brief > div:nth-child(odd) {
    border-right: 1px solid #1F1F1F;
    color: #6B6B6B;
  }
  .method-brief > div:nth-last-child(-n+2) { border-bottom: 0; }
  .method-principles {
    max-width: 760px;
    border: 1px solid #1F1F1F;
    background: rgba(5,5,5,.46);
  }
  .method-principle {
    display: grid;
    grid-template-columns: 64px 142px minmax(0, 1fr);
    min-height: 74px;
    border-bottom: 1px solid #1F1F1F;
  }
  .method-principle:last-child { border-bottom: 0; }
  .method-principle .tag {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #1F1F1F;
    margin: 0;
    line-height: 1;
    letter-spacing: .16em;
  }
  .method-principle-title {
    display: flex;
    align-items: center;
    padding: 0 18px;
    border-right: 1px solid #1F1F1F;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .18em;
    color: #A0A0A0;
    text-transform: uppercase;
  }
  .method-principle p {
    margin: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    min-height: 74px;
  }
  @media (max-width: 1023px) {
    .method-shell { grid-template-columns: 1fr; }
    .method-copy { min-height: 0; }
    .lab-afterimage { min-height: 380px; }
  }
  @media (max-width: 640px) {
    .method-brief { grid-template-columns: 1fr; }
    .method-brief > div:nth-child(odd) { border-right: 0; padding-bottom: 6px; }
    .method-brief > div:nth-child(even) { padding-top: 0; }
    .method-brief > div:nth-last-child(2) { border-bottom: 1px solid #1F1F1F; }
    .method-principle { grid-template-columns: 52px 1fr; }
    .method-principle-title {
      border-right: 0;
      border-bottom: 1px solid #1F1F1F;
      padding: 14px 16px 0;
      align-items: flex-end;
    }
    .method-principle p { grid-column: 2; padding: 8px 16px 16px; min-height: 0; }
  }

  /* Subtle flicker for the second signal star */
  .star-pulse { animation: starPulse 5s ease-in-out infinite; }
  .star-pulse-2 { animation: starPulse 7s ease-in-out infinite 1.5s; }
  @keyframes starPulse {
    0%,100% { opacity: 0.25; }
    50%     { opacity: 1; }
  }

  /* Buy/ghost shared sizing */
  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; }

  /* ============================================================
     BRUTALIST / CONSTRUCTIVIST / SCI-FI LAYER
     ============================================================ */

  /* Hard right angles — kill any inherited radius */
  .card, .ph-shot, .cover, .mini-input, .submit-arrow, .ghost, .buy, .badge, button { border-radius: 0 !important; }

  /* Section ID stamps — upper-right of every <section> */
  section[data-id] { position: relative; }
  section[data-id]::before {
    content: attr(data-id);
    display: none;
    position: absolute;
    top: 80px; right: 24px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.32em;
    color: #6B6B6B;
    pointer-events: none;
    z-index: 2;
  }
  section[data-id]::after {
    content: "";
    display: none;
    position: absolute;
    top: 94px; right: 24px;
    width: 38px; height: 1px; background: #1F1F1F;
    pointer-events: none;
    z-index: 2;
  }
  html.show-section-stamps section[data-id]::before,
  html.show-section-stamps section[data-id]::after {
    display: block;
  }

  /* Massive section numerals (constructivist) */
  .mega-num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: clamp(120px, 20vw, 280px);
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: transparent;
    -webkit-text-stroke: 1px #1F1F1F;
    text-stroke: 1px #1F1F1F;
    user-select: none;
    pointer-events: none;
  }

  /* Diagonal red bar — constructivist accent */
  .diag-bar {
    position: absolute;
    width: 140%; height: 22px;
    background: #C5162A;
    transform: rotate(-12deg);
    box-shadow: 0 0 28px rgba(225,54,70,0.35);
  }

  /* Scanlines overlay — blade-runner CRT */
  .scanlines {
    position: absolute; inset: 0;
    background-image: repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.0) 0,
      rgba(255,255,255,0.0) 2px,
      rgba(255,255,255,0.025) 2px,
      rgba(255,255,255,0.025) 3px
    );
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.7;
  }

  /* Slow scan sweep */
  .scan-sweep {
    position: absolute; left: 0; right: 0; height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.04) 50%, transparent);
    pointer-events: none;
    animation: scanSweep 10s linear infinite;
  }
  @keyframes scanSweep {
    0%   { top: -10%; }
    100% { top: 110%; }
  }

  /* CRT corner vignette */
  .vignette {
    position: absolute; inset: 0;
    background: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    mix-blend-mode: multiply;
  }

  /* Corner reticle for hero */
  .reticle {
    position: absolute; width: 64px; height: 64px;
    pointer-events: none;
    border: 1px solid #C5162A;
    box-shadow: 0 0 20px -2px rgba(225,54,70,0.35);
  }
  .reticle.tl { top: 12px;  left: 12px;
    border-right: none; border-bottom: none; }
  .reticle.br { bottom: 12px; right: 12px;
    border-left: none; border-top: none; }
  .reticle::before, .reticle::after {
    content: ""; position: absolute; background: #C5162A;
  }
  .reticle.tl::before { width: 12px; height: 1px; top: -1px; left: 12px; }
  .reticle.tl::after  { width: 1px; height: 12px; top: 12px; left: -1px; }
  .reticle.br::before { width: 12px; height: 1px; bottom: -1px; right: 12px; }
  .reticle.br::after  { width: 1px; height: 12px; bottom: 12px; right: -1px; }

  /* Marquee — slow horizontal data ticker */
  .marquee {
    overflow: hidden;
    max-width: 100vw;
    border-top: 1px solid #1F1F1F;
    border-bottom: 1px solid #1F1F1F;
    background: #050505;
  }
  .marquee-track {
    display: inline-flex;
    white-space: nowrap;
    padding: 14px 0;
    animation: marqueeTrack 70s linear infinite;
    will-change: transform;
  }
  .marquee-track > span {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
    color: #A0A0A0; padding: 0 28px;
  }
  .marquee-track .pip { width: 6px; height: 6px; background: #C5162A; display: inline-block; }
  @keyframes marqueeTrack { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }

  /* ===== FOOTER — Transmission Console ===== */
  footer .pip { width: 6px; height: 6px; background: #C5162A; display: inline-block; vertical-align: middle; }

  /* Cursor-reactive hairline grid */
  .footer-grid {
    position: absolute; inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: 0 0;
    transition: background-position 0.6s ease-out;
    mask-image: radial-gradient(circle at var(--mx,50%) var(--my,40%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.15) 70%);
    -webkit-mask-image: radial-gradient(circle at var(--mx,50%) var(--my,40%), rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.15) 70%);
    pointer-events: none;
    z-index: 1;
  }
  .footer-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
    pointer-events: none; z-index: 1;
  }

  .footer-wordmark {
    font-size: clamp(72px, 16vw, 220px);
    line-height: 0.82;
    letter-spacing: -0.05em;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    -webkit-text-stroke: 0;
  }
  /* Outline variant on every other char-feel: subtle wash */
  .footer-wordmark { background: linear-gradient(180deg, #fff 0%, #fff 70%, #707070 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

  .footer-link {
    position: relative; display: inline-block;
    transition: color .15s, padding-left .25s;
  }
  .footer-link::before {
    content: "›"; position: absolute; left: -14px; top: 0;
    color: #C5162A; opacity: 0; transition: opacity .15s, transform .25s;
    transform: translateX(-4px);
  }
  .footer-link:hover { color: #fff; padding-left: 4px; }
  .footer-link:hover::before { opacity: 1; transform: translateX(0); }
  .footer-soon {
    margin-left: 10px;
    color: #6B6B6B;
    font-size: 9px;
    letter-spacing: .22em;
  }

  .footer-social { transition: color .15s; }
  .footer-social:hover { color: #fff; }
  .footer-bottom-links {
    row-gap: 7px;
  }
  .footer-identity-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: color .15s ease;
  }
  .footer-identity-link::after {
    content: "→";
    color: #C5162A;
    opacity: .78;
    transform: translateX(-2px);
    transition: transform .15s ease, opacity .15s ease;
  }
  .footer-identity-link:hover { color: #fff; }
  .footer-identity-link:hover::after {
    opacity: 1;
    transform: translateX(2px);
  }
  .audio-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(197,22,42,.72);
    color: #C5162A;
    padding: 7px 10px;
    min-width: 0;
    justify-content: center;
    transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .audio-toggle:hover,
  .audio-toggle.is-on {
    color: #fff;
    background: rgba(197,22,42,.10);
    border-color: #E13646;
    box-shadow: 0 0 22px -12px rgba(225,54,70,.75);
  }
  .audio-bars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 12px;
  }
  .audio-bars i {
    width: 1px;
    height: 4px;
    background: currentColor;
    opacity: .55;
    transform-origin: bottom;
    transform: scaleY(calc(.45 + var(--audio-level, 0) * 1.7));
    transition: transform .12s linear, opacity .18s ease;
  }
  .audio-bars i:nth-child(2) { height: 7px; }
  .audio-bars i:nth-child(3) { height: 10px; }
  .audio-toggle.is-on .audio-bars i { opacity: .9; }

  .footer-log {
    display: flex; gap: 48px; white-space: nowrap;
    animation: footerLog 60s linear infinite;
  }
  .footer-log span { display: inline-flex; align-items: center; gap: 10px; }
  @keyframes footerLog {
    0%   { transform: translateX(0%); }
    100% { transform: translateX(-50%); }
  }

  .footer-signal {
    display: block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-feature-settings: "tnum" 1;
    line-height: 1;
  }
  .footer-bottom-console {
    border-top: 1px solid #1F1F1F;
    background: linear-gradient(180deg, rgba(10,10,10,.72), rgba(2,2,2,.92));
  }
  .footer-bottom-grid {
    display: grid;
    grid-template-columns: 1.45fr 1.25fr 1fr;
    border: 1px solid #1F1F1F;
    border-bottom: 0;
  }
  .footer-bottom-cell {
    min-height: 78px;
    padding: 18px 20px;
    border-right: 1px solid #1F1F1F;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
  }
  .footer-bottom-cell:last-child { border-right: 0; }
  .footer-bottom-label {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: .30em;
    color: #6B6B6B;
    text-transform: uppercase;
  }
  .footer-bottom-value {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .20em;
    color: #A0A0A0;
    text-transform: uppercase;
  }
  .footer-bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
  }
  .footer-bottom-signal {
    border: 1px solid #1F1F1F;
    padding: 13px 16px;
    overflow: hidden;
    background: rgba(0,0,0,.36);
  }
  @media (max-width: 900px) {
    .footer-bottom-grid { grid-template-columns: 1fr 1fr; }
    .footer-bottom-cell:nth-child(2) { border-right: 0; }
    .footer-bottom-cell:nth-child(-n+2) { border-bottom: 1px solid #1F1F1F; }
  }
  @media (max-width: 640px) {
    .footer-bottom-grid { grid-template-columns: 1fr; }
    .footer-bottom-cell { border-right: 0; border-bottom: 1px solid #1F1F1F; }
    .footer-bottom-cell:last-child { border-bottom: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .footer-log { animation: none; }
    .footer-grid { transition: none; }
  }

  /* Stamp blocks — heavy hairline boxes with rotated label */
  .stamp {
    position: relative;
    border: 1px solid #1F1F1F;
    background: #0A0A0A;
  }
  .stamp .stamp-label {
    position: absolute; top: 12px; left: 12px;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: 0.32em; color: #6B6B6B;
    text-transform: uppercase;
  }
  .stamp .stamp-tag {
    position: absolute; top: 12px; right: 12px;
    font-family: var(--font-mono);
    font-size: 9px; letter-spacing: 0.18em; color: #C5162A;
  }

  /* Hero left column — coordinates strip above the H1 */
  .coord-strip {
    display: flex; gap: 22px;
    font-family: var(--font-mono);
    font-size: 10px; letter-spacing: 0.28em; color: #6B6B6B;
    text-transform: uppercase;
  }
  .coord-strip span b { color: #A0A0A0; font-weight: 500; margin-left: 8px; font-variant-numeric: tabular-nums; }

  /* Section "rule" — mono tick line */
  .tick-rule {
    height: 12px; position: relative;
    background-image: linear-gradient(to right, #1F1F1F 1px, transparent 1px);
    background-size: 32px 100%;
    border-bottom: 1px solid #1F1F1F;
  }

  /* Brutalism level toggles */
  html.brut-off .scanlines, html.brut-off .scan-sweep, html.brut-off .vignette,
  html.brut-off .reticle, html.brut-off .marquee, html.brut-off .mega-num,
  html.brut-off .diag-bar, html.brut-off .tick-rule, html.brut-off section[data-id]::before, html.brut-off section[data-id]::after,
  html.brut-off .coord-strip { display: none !important; }
  html.brut-subtle .scanlines { opacity: 0.35; }
  html.brut-subtle .vignette  { opacity: 0.5; }
  html.brut-subtle .scan-sweep{ opacity: 0.5; }
  html.brut-subtle .diag-bar  { opacity: 0.7; }
  html.brut-heavy  .scanlines { opacity: 1; }
  html.brut-heavy  .vignette  { opacity: 0.9; }
  .diag-bar-shop {
    top: 60px;
    left: -10%;
    width: 38%;
  }