:root {
      --bg: oklch(11.70% 0.0089 284.9);
      --surface: oklch(13.96% 0.0211 305.1);
      --fg: oklch(97.65% 0.0054 275.0);
      --muted: oklch(78.22% 0.0198 292.5);
      --border: oklch(97.65% 0.0054 275.0 / 0.12);
      --accent: oklch(70.5% 0.205 48.5);
      --brand-mark: var(--accent);
      --font-display: "Barlow Semi Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
      --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "SFMono-Regular", monospace;
      --page-pad: clamp(20px, 4.5vw, 76px);
    }

    * {
      box-sizing: border-box;
    }

    html {
      background: var(--bg);
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background: var(--bg);
      color: var(--fg);
      font-family: var(--font-body);
      font-size: 16px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    :where(a, button, [role="tab"]):focus-visible {
      outline: 2px solid color-mix(in oklch, var(--accent), var(--fg) 18%);
      outline-offset: 4px;
    }

    button {
      font: inherit;
    }

    a {
      color: inherit;
    }

    .site-header {
      position: fixed;
      z-index: 40;
      inset: 0 0 auto;
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 24px;
      height: 92px;
      padding: 0 var(--page-pad);
      border-bottom: 1px solid var(--border);
      background: color-mix(in oklch, var(--bg), transparent 16%);
      box-shadow: 0 12px 36px rgb(0 0 0 / 0.12);
      backdrop-filter: blur(18px) saturate(1.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    .brand {
      display: inline-flex;
      min-height: 44px;
      align-items: center;
      justify-self: start;
      gap: 10px;
      text-decoration: none;
      font-family: var(--font-body);
      font-size: 25px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.045em;
    }

    .brand-mark {
      display: grid;
      width: 35px;
      height: 35px;
      place-items: center;
      border-radius: 10px;
      background: var(--brand-mark);
      color: var(--bg);
      font-size: 23px;
      font-weight: 600;
      letter-spacing: -0.08em;
      box-shadow: 0 9px 24px color-mix(in oklch, var(--brand-mark), transparent 74%);
    }

    .brand-wordmark {
      transform: translateY(-1px);
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: clamp(24px, 3vw, 46px);
    }

    .desktop-nav a,
    .login-link {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      color: color-mix(in oklch, var(--fg), transparent 32%);
      text-decoration: none;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
      transition: color 180ms ease;
    }

    .desktop-nav a:hover,
    .desktop-nav a:focus-visible,
    .login-link:hover,
    .login-link:focus-visible {
      color: var(--fg);
    }

    .login-link {
      padding-bottom: 3px;
      border-bottom: 1px solid color-mix(in oklch, var(--fg), transparent 48%);
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-self: end;
      gap: 18px;
    }

    .header-cta {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 18px;
      border: 1px solid color-mix(in oklch, var(--accent), transparent 42%);
      border-radius: 5px;
      background: var(--accent);
      color: var(--bg);
      text-decoration: none;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .02em;
      box-shadow: 0 8px 24px color-mix(in oklch, var(--accent), transparent 82%);
      transition: transform 180ms ease, filter 180ms ease;
    }

    .header-cta:hover,
    .header-cta:focus-visible {
      filter: brightness(1.08);
      transform: translateY(-1px);
    }

    .menu-toggle {
      display: none;
      width: 48px;
      height: 48px;
      padding: 0;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: color-mix(in oklch, var(--surface), transparent 18%);
      color: var(--fg);
      cursor: pointer;
    }

    .menu-toggle span,
    .menu-toggle::before {
      content: "";
      display: block;
      width: 18px;
      height: 1px;
      margin: 5px auto;
      background: currentColor;
      transition: transform 180ms ease;
    }

    .menu-toggle[aria-expanded="true"]::before {
      transform: translateY(3px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] span {
      transform: translateY(-3px) rotate(-45deg);
    }

    .mobile-menu {
      position: absolute;
      z-index: 18;
      inset: 92px var(--page-pad) auto;
      display: none;
      padding: 18px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: color-mix(in oklch, var(--bg), transparent 3%);
      box-shadow: 0 24px 80px rgb(0 0 0 / 0.45);
    }

    .mobile-menu[data-open="true"] {
      display: grid;
    }

    .mobile-menu[hidden] {
      display: none;
    }

    .mobile-menu a {
      min-height: 48px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--border);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
    }

    .mobile-menu a:last-child {
      border-bottom: 0;
    }

    .hero {
      position: relative;
      min-height: max(88svh, 760px);
      overflow: hidden;
      isolation: isolate;
      background: var(--bg);
    }

    .hero-media {
      position: absolute;
      z-index: -3;
      inset: 0;
      overflow: hidden;
      background: var(--surface);
    }

    .hero-media video,
    .hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(0.78) contrast(1.06) brightness(0.72);
      transform: scale(1.01);
    }

    .hero-media img {
      position: absolute;
      inset: 0;
      z-index: 1;
    }

    .hero::before {
      content: "";
      position: absolute;
      z-index: -2;
      inset: 0;
      background:
        linear-gradient(90deg, color-mix(in oklch, var(--bg), transparent 0%) 0%, color-mix(in oklch, var(--bg), transparent 5%) 30%, color-mix(in oklch, var(--bg), transparent 55%) 59%, color-mix(in oklch, var(--bg), transparent 28%) 100%),
        linear-gradient(180deg, color-mix(in oklch, var(--bg), transparent 40%) 0%, transparent 36%, color-mix(in oklch, var(--bg), transparent 4%) 100%);
    }

    .hero::after {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      opacity: 0.18;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.36'/%3E%3C/svg%3E");
      mix-blend-mode: soft-light;
    }

    .hero-layout {
      position: relative;
      z-index: 3;
      min-height: 88svh;
      display: grid;
      grid-template-columns: minmax(0, 0.94fr) minmax(430px, 0.72fr);
      align-items: center;
      gap: clamp(48px, 6vw, 120px);
      padding: 122px var(--page-pad) 48px;
    }

    .hero-copy {
      align-self: center;
      max-width: 700px;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 0 0 24px;
      color: color-mix(in oklch, var(--fg), transparent 22%);
      font-family: var(--font-mono);
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .live-signal {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px color-mix(in oklch, var(--accent), transparent 30%);
      animation: signal 2.4s ease-in-out 3;
    }

    h1 {
      max-width: 14ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(58px, 5.55vw, 100px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }

    h1 > span {
      display: block;
    }

    h1 em {
      display: block;
      color: color-mix(in oklch, var(--fg), transparent 24%);
      font-style: normal;
      font-weight: 600;
    }

    .hero-description {
      max-width: 57ch;
      margin: 30px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 28%);
      font-size: clamp(16px, 1.35vw, 19px);
      line-height: 1.6;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 28px;
      margin-top: 36px;
    }

    .primary-cta {
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 25px;
      border: 1px solid color-mix(in oklch, var(--accent), var(--bg) 14%);
      border-radius: 6px;
      background: var(--accent);
      color: var(--bg);
      box-shadow: 0 13px 34px color-mix(in oklch, var(--accent), transparent 82%);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.02em;
      transition: transform 160ms ease, box-shadow 160ms ease;
    }

    .primary-cta:hover,
    .primary-cta:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 17px 42px color-mix(in oklch, var(--accent), transparent 75%);
    }

    .primary-cta:active {
      transform: translateY(1px);
      box-shadow: 0 8px 22px color-mix(in oklch, var(--accent), transparent 84%);
    }

    .text-action {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 0;
      border: 0;
      border-bottom: 1px solid color-mix(in oklch, var(--fg), transparent 55%);
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: 0.02em;
    }

    .text-action svg {
      width: 17px;
      height: 17px;
      transition: transform 180ms ease;
    }

    .text-action:hover svg,
    .text-action:focus-visible svg {
      transform: translateX(3px);
    }

    .text-action:active {
      transform: translateY(1px);
    }

    .broadcast-scene {
      position: relative;
      width: min(100%, 690px);
      aspect-ratio: 4 / 3;
      justify-self: end;
      align-self: center;
    }

    .scene-frame {
      position: absolute;
      inset: 0;
      overflow: visible;
    }

    .scene-frame::before {
      content: none;
    }

    .scene-frame video,
    .scene-frame img {
      display: none;
    }

    .scene-frame img {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .tip-alert {
      position: absolute;
      z-index: 4;
      right: 2%;
      bottom: 25%;
      width: min(82%, 430px);
      min-height: 174px;
      padding: 15px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 72%);
      border-radius: 8px;
      background: color-mix(in oklch, var(--bg), transparent 11%);
      box-shadow: 0 24px 70px rgb(0 0 0 / 0.45);
      backdrop-filter: blur(18px);
    }

    .tip-alert .widget-preview {
      min-height: 142px;
      display: grid;
      align-content: center;
    }

    .tip-alert .preview-label {
      margin-bottom: 10px;
    }

    .tip-meta,
    .tip-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }

    .tip-meta {
      margin-bottom: 12px;
      color: color-mix(in oklch, var(--fg), transparent 45%);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .tip-main strong {
      font-size: 17px;
      font-weight: 600;
      letter-spacing: -0.01em;
    }

    .tip-main b {
      flex: 0 0 auto;
      font-family: var(--font-mono);
      font-size: 16px;
      font-weight: 500;
    }

    .tip-message {
      margin: 8px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 20%);
      font-size: 13px;
    }

    .system-switcher {
      position: absolute;
      z-index: 5;
      right: 2%;
      bottom: 9%;
      width: min(92%, 610px);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border: 1px solid color-mix(in oklch, var(--fg), transparent 72%);
      border-radius: 7px;
      background: color-mix(in oklch, var(--bg), transparent 5%);
      box-shadow: 0 22px 70px rgb(0 0 0 / 0.45);
      overflow: hidden;
    }

    .module-tab {
      position: relative;
      min-width: 0;
      min-height: 58px;
      padding: 10px 8px;
      border-top: 0;
      border-bottom: 0;
      border-left: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      color: color-mix(in oklch, var(--fg), transparent 48%);
      cursor: pointer;
      text-align: left;
      transition: background 180ms ease, color 180ms ease;
    }

    .module-tab::after {
      content: "";
      position: absolute;
      right: 9px;
      bottom: 7px;
      left: 9px;
      height: 1px;
      background: color-mix(in oklch, var(--fg), transparent 58%);
      opacity: 0;
      transform: scaleX(0);
      transform-origin: left;
    }

    .module-tab:last-child {
      border-right: 0;
    }

    .module-tab span {
      display: block;
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .module-tab strong {
      display: block;
      margin-top: 4px;
      overflow: hidden;
      font-size: 12px;
      font-weight: 500;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .module-tab:hover,
    .module-tab:focus-visible,
    .module-tab[aria-selected="true"] {
      background: color-mix(in oklch, var(--fg), transparent 92%);
      color: var(--fg);
    }

    .module-tab[aria-selected="true"] {
      box-shadow: inset 0 1px 0 color-mix(in oklch, var(--fg), transparent 44%);
    }

    .module-tab[aria-selected="true"]::after {
      opacity: 1;
      transform: scaleX(1);
    }

    .tip-alert[data-changing="true"] {
      animation: module-change 260ms ease both;
    }

    .cinematic-bridge {
      --bridge-progress: 0;
      position: relative;
      min-height: 138svh;
      overflow: clip;
      background: var(--bg);
      isolation: isolate;
    }

    .bridge-sticky {
      position: sticky;
      top: 0;
      min-height: 100svh;
      display: grid;
      place-items: center;
      padding: 120px var(--page-pad) 80px;
      overflow: hidden;
    }

    .bridge-media {
      position: absolute;
      z-index: -3;
      inset: 0;
      opacity: calc(0.1 + var(--bridge-progress) * 0.4);
      transform: scale(calc(1.08 - var(--bridge-progress) * 0.045));
      transform-origin: 68% 48%;
    }

    .bridge-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 67% center;
      filter: saturate(0.82) contrast(1.15) brightness(0.48);
    }

    .bridge-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, var(--bg) 0%, color-mix(in oklch, var(--bg), transparent 16%) 36%, color-mix(in oklch, var(--bg), transparent 58%) 70%, var(--bg) 100%),
        linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 68%, var(--bg) 100%);
    }

    .bridge-frame {
      position: absolute;
      inset: clamp(24px, 4vw, 68px);
      border: 1px solid color-mix(in oklch, var(--fg), transparent 88%);
      opacity: calc(0.18 + var(--bridge-progress) * 0.72);
      transform: scale(calc(0.96 + var(--bridge-progress) * 0.04));
    }

    .bridge-frame span {
      position: absolute;
      width: 28px;
      height: 28px;
      border-color: color-mix(in oklch, var(--fg), transparent 44%);
      border-style: solid;
    }

    .bridge-frame span:nth-child(1) {
      top: -1px;
      left: -1px;
      border-width: 2px 0 0 2px;
    }

    .bridge-frame span:nth-child(2) {
      top: -1px;
      right: -1px;
      border-width: 2px 2px 0 0;
    }

    .bridge-frame span:nth-child(3) {
      right: -1px;
      bottom: -1px;
      border-width: 0 2px 2px 0;
    }

    .bridge-frame span:nth-child(4) {
      bottom: -1px;
      left: -1px;
      border-width: 0 0 2px 2px;
    }

    .bridge-frame::before,
    .bridge-frame::after {
      content: "";
      position: absolute;
      top: 50%;
      width: clamp(28px, 5vw, 90px);
      height: 1px;
      background: color-mix(in oklch, var(--fg), transparent 62%);
    }

    .bridge-frame::before { left: 0; }
    .bridge-frame::after { right: 0; }

    .bridge-copy {
      width: min(100%, 1240px);
      text-align: left;
      opacity: calc(0.42 + var(--bridge-progress) * 0.58);
      transform: translateY(calc(42px - var(--bridge-progress) * 42px));
    }

    .bridge-index,
    .system-kicker,
    .stage-index,
    .module-number,
    .module-spec,
    .bridge-scroll {
      font-family: var(--font-mono);
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .bridge-index {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 0 0 26px;
      color: color-mix(in oklch, var(--fg), transparent 34%);
      font-size: 10px;
    }

    .bridge-index::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 18px color-mix(in oklch, var(--accent), transparent 34%);
      animation: signal 1.8s ease-in-out 3;
    }

    .bridge-copy h2 {
      max-width: 9.5ch;
      margin: 0;
      font-family: var(--font-body);
      font-size: clamp(54px, 7.4vw, 126px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -0.035em;
      text-wrap: balance;
    }

    .bridge-copy h2 em {
      display: block;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      font-style: normal;
      font-weight: 600;
    }

    .bridge-copy p:not(.bridge-index):not(.bridge-scroll) {
      max-width: 58ch;
      margin: 32px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 35%);
      font-size: clamp(16px, 1.35vw, 20px);
      line-height: 1.65;
    }

    .bridge-console {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 22px;
      margin-top: 38px;
      padding-top: 17px;
      border-top: 1px solid color-mix(in oklch, var(--fg), transparent 82%);
      color: color-mix(in oklch, var(--fg), transparent 46%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .bridge-console span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .bridge-console span::before {
      content: "";
      width: 18px;
      height: 1px;
      background: color-mix(in oklch, var(--fg), transparent 58%);
    }

    .bridge-scroll {
      position: absolute;
      bottom: 42px;
      left: 50%;
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-size: 9px;
      transform: translateX(-50%);
    }

    .bridge-scroll::before {
      content: "";
      display: block;
      width: 1px;
      height: 54px;
      margin: 0 auto 13px;
      background: color-mix(in oklch, var(--fg), transparent 63%);
      transform: scaleY(calc(0.28 + var(--bridge-progress) * 0.72));
      transform-origin: top;
    }


.signal-journey {
  --bridge-progress: 0;
  min-height: 154svh;
  position: relative;
      background:
        linear-gradient(color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px),
        radial-gradient(circle at 50% 48%, color-mix(in oklch, var(--accent), transparent 91%), transparent 27%),
        var(--bg);
      background-size: 56px 56px, 56px 56px, auto, auto;
  isolation: isolate;
}

.signal-backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
}

.signal-backdrop::before {
  content: "";
  position: absolute;
  inset: 7% -12% 0;
  background:
    linear-gradient(color-mix(in oklch, var(--fg), transparent 94%) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 94%) 1px, transparent 1px);
  background-size: clamp(42px, 4.5vw, 76px) clamp(42px, 4.5vw, 76px);
  opacity: calc(.14 + var(--bridge-progress) * .18);
  transform: perspective(900px) rotateX(61deg) translateY(calc(13% + var(--bridge-progress) * 7%)) scale(calc(1.08 + var(--bridge-progress) * .08));
  transform-origin: 50% 72%;
}

.signal-backdrop::after {
  content: "";
  position: absolute;
  top: 12%;
  bottom: 10%;
  left: calc(6% + var(--bridge-progress) * 88%);
  width: clamp(180px, 22vw, 420px);
  translate: -50% 0;
  background: radial-gradient(ellipse at center, color-mix(in oklch, var(--accent), transparent 80%), transparent 67%);
  opacity: calc(.28 + var(--bridge-progress) * .38);
  filter: blur(18px);
}

.signal-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, transparent 0 9px, color-mix(in oklch, var(--fg), transparent 97%) 10px 11px);
  opacity: .42;
  animation: signal-scan-drift 9s linear 2;
}

.signal-flowline {
  position: absolute;
  top: 58%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: color-mix(in oklch, var(--fg), transparent 91%);
}

.signal-flowline::before {
  content: "";
  position: absolute;
  inset: -1px 0;
  background: linear-gradient(90deg, transparent, var(--accent) 22%, var(--accent) 78%, transparent);
  box-shadow: 0 0 30px color-mix(in oklch, var(--accent), transparent 42%);
  transform: scaleX(var(--bridge-progress));
  transform-origin: left;
}

.signal-pulse {
  --pulse-left: 8%;
  position: absolute;
  top: 58%;
  left: var(--pulse-left);
  width: 8px;
  height: 8px;
  border: 1px solid color-mix(in oklch, var(--accent), var(--fg) 18%);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent), transparent 92%);
  translate: -50% -50%;
  opacity: .24;
  transition: opacity 420ms ease, scale 420ms ease, box-shadow 420ms ease;
}

.signal-pulse:nth-of-type(1) { --pulse-left: 8%; }
.signal-pulse:nth-of-type(2) { --pulse-left: 29%; }
.signal-pulse:nth-of-type(3) { --pulse-left: 50%; }
.signal-pulse:nth-of-type(4) { --pulse-left: 71%; }
.signal-pulse:nth-of-type(5) { --pulse-left: 92%; }

.signal-journey[data-phase="1"] .signal-pulse:nth-of-type(1),
.signal-journey[data-phase="2"] .signal-pulse:nth-of-type(2),
.signal-journey[data-phase="3"] .signal-pulse:nth-of-type(3),
.signal-journey[data-phase="4"] .signal-pulse:nth-of-type(4),
.signal-journey[data-phase="5"] .signal-pulse:nth-of-type(5) {
  opacity: 1;
  scale: 1.5;
  box-shadow: 0 0 0 8px color-mix(in oklch, var(--accent), transparent 88%), 0 0 32px color-mix(in oklch, var(--accent), transparent 28%);
}

@keyframes signal-scan-drift {
  to { background-position: 0 110px; }
}

.signal-sticky {
  position: sticky;
  z-index: 1;
  top: 0;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(30px, 5vh, 56px);
      padding: 96px var(--page-pad) 104px;
      overflow: hidden;
    }

    .signal-sticky::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 18% 8% 10%;
      background: radial-gradient(circle at 50% 46%, color-mix(in oklch, var(--accent), transparent 86%), transparent 54%);
      opacity: calc(.18 + var(--bridge-progress) * .52);
      filter: blur(28px);
      pointer-events: none;
    }

    .signal-heading {
      width: min(100%, 1280px);
      opacity: calc(0.55 + var(--bridge-progress) * 0.45);
      transform: translateY(calc(24px - var(--bridge-progress) * 24px));
    }

    .signal-heading > p {
      margin: 0 0 16px;
      color: color-mix(in oklch, var(--fg), transparent 48%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .signal-heading h2 {
      max-width: 16ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(42px, 5.2vw, 82px);
      font-weight: 600;
      line-height: 0.92;
      letter-spacing: -0.035em;
    }

    .signal-heading h2 span {
      color: color-mix(in oklch, var(--fg), transparent 46%);
    }

    .signal-grid {
      width: min(100%, 1280px);
      display: grid;
      grid-template-columns: minmax(240px, .8fr) minmax(150px, .56fr) minmax(320px, 1.22fr);
      align-items: center;
      gap: clamp(22px, 3.4vw, 54px);
      perspective: 1200px;
    }

    .signal-card {
      position: relative;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 78%);
      background: color-mix(in oklch, var(--surface), var(--bg) 36%);
      box-shadow: 0 30px 90px rgb(0 0 0 / 0.42);
      overflow: hidden;
    }

    .signal-payment {
      padding: clamp(20px, 2.4vw, 34px);
      opacity: calc(0.42 + var(--bridge-progress) * 0.58);
      transform: translateX(calc(7vw - var(--bridge-progress) * 7vw)) rotateY(calc(-5deg + var(--bridge-progress) * 5deg));
    }

    .signal-output {
      padding: 12px;
      opacity: calc(0.18 + var(--bridge-progress) * 0.82);
      transform: translateX(calc(-7vw + var(--bridge-progress) * 7vw)) rotateY(calc(5deg - var(--bridge-progress) * 5deg));
    }

    .signal-card-head,
    .signal-card-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: color-mix(in oklch, var(--fg), transparent 50%);
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .signal-card-head b {
      color: var(--accent);
      font-weight: 500;
    }

    .signal-amount {
      display: block;
      margin-top: clamp(30px, 5vh, 64px);
      font-family: var(--font-mono);
      font-size: clamp(35px, 4.2vw, 64px);
      font-weight: 500;
      letter-spacing: -0.055em;
      line-height: 1;
    }

    .signal-amount small {
      font-size: .3em;
      letter-spacing: 0.04em;
    }

    .signal-message {
      margin-top: 24px;
      padding-top: 18px;
      border-top: 1px solid var(--border);
    }

    .signal-message b {
      font-size: 13px;
      font-weight: 600;
    }

    .signal-message p {
      margin: 5px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 34%);
      font-size: 13px;
    }

    .signal-payment .signal-card-foot {
      margin-top: 35px;
    }

    .signal-route {
      position: relative;
      min-height: 120px;
      display: grid;
      align-content: center;
    }

    .signal-route-label,
    .signal-route > p {
      display: flex;
      justify-content: space-between;
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-family: var(--font-mono);
      font-size: 7px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .signal-route > p {
      display: block;
      margin: 13px 0 0;
      text-align: center;
    }

    .signal-beam {
      position: relative;
      height: 2px;
      margin-top: 12px;
      background: color-mix(in oklch, var(--fg), transparent 88%);
    }

    .signal-beam i {
      position: absolute;
      inset: 0;
      background: var(--accent);
      box-shadow: 0 0 24px color-mix(in oklch, var(--accent), transparent 38%);
      transform: scaleX(var(--bridge-progress));
      transform-origin: left;
    }

    .signal-beam b {
      position: absolute;
      top: 50%;
      left: calc(var(--bridge-progress) * 100%);
      width: 13px;
      height: 13px;
      border: 3px solid color-mix(in oklch, var(--accent), var(--fg) 22%);
      border-radius: 50%;
      background: var(--bg);
      box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent), transparent 82%), 0 0 34px var(--accent);
      transform: translate(-50%, -50%);
    }

    .signal-scene {
      position: relative;
      aspect-ratio: 16 / 9;
      margin-top: 11px;
      overflow: hidden;
      background: var(--bg);
    }

    .signal-scene::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 35%, rgb(0 0 0 / .7));
      pointer-events: none;
    }

    .signal-scene img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: 62% center;
      filter: saturate(.8) contrast(1.08) brightness(.72);
      transform: scale(calc(1.04 - var(--bridge-progress) * .04));
    }

    .signal-live {
      position: absolute;
      z-index: 2;
      top: 12px;
      right: 12px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 7px;
      background: rgb(5 5 8 / .76);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 7px;
      letter-spacing: .08em;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
    }

    .signal-live i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      animation: signal 1.8s ease-in-out 3;
    }

    .signal-alert {
      position: absolute;
      z-index: 3;
      right: 14px;
      bottom: 14px;
      left: 14px;
      padding: 12px 13px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 70%);
      background: rgb(5 5 8 / .82);
      box-shadow: 0 14px 42px rgb(0 0 0 / .42);
      opacity: calc(.08 + var(--bridge-progress) * .92);
      transform: translateY(calc(20px - var(--bridge-progress) * 20px)) scale(calc(.96 + var(--bridge-progress) * .04));
      backdrop-filter: blur(14px);
    }

    .signal-alert > span {
      color: color-mix(in oklch, var(--fg), transparent 45%);
      font-family: var(--font-mono);
      font-size: 7px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .signal-alert div {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-top: 6px;
    }

    .signal-alert b {
      font-size: 12px;
    }

    .signal-alert strong {
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .signal-alert p {
      margin: 3px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 28%);
      font-size: 11px;
    }

    .signal-output .signal-card-foot {
      justify-content: flex-start;
      padding: 12px 3px 2px;
    }

    .signal-caption {
      width: min(100%, 1280px);
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      font-size: clamp(14px, 1.25vw, 18px);
    }

    .signal-chapters {
      width: min(100%, 1280px);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      border-top: 1px solid color-mix(in oklch, var(--fg), transparent 82%);
      border-bottom: 1px solid color-mix(in oklch, var(--fg), transparent 88%);
    }

    .signal-chapter {
      position: relative;
      min-height: 78px;
      display: grid;
      align-content: center;
      gap: 6px;
      padding: 14px clamp(10px, 1.4vw, 20px);
      border-right: 1px solid color-mix(in oklch, var(--fg), transparent 88%);
      color: color-mix(in oklch, var(--fg), transparent 62%);
      transition: color 280ms ease, background 280ms ease;
    }

    .signal-chapter:last-child {
      border-right: 0;
    }

    .signal-chapter::before {
      content: "";
      position: absolute;
      top: -1px;
      right: 0;
      left: 0;
      height: 2px;
      background: var(--accent);
      box-shadow: 0 0 18px color-mix(in oklch, var(--accent), transparent 42%);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 360ms ease;
    }

    .signal-chapter span {
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .signal-chapter strong {
      color: inherit;
      font-size: clamp(11px, 1vw, 14px);
      font-weight: 560;
    }

    .signal-chapter.is-active,
    .signal-chapter.is-complete {
      color: var(--fg);
      background: color-mix(in oklch, var(--surface), transparent 45%);
    }

    .signal-chapter.is-active::before,
    .signal-chapter.is-complete::before {
      transform: scaleX(1);
    }

    .signal-chapter.is-active strong {
      color: var(--accent);
    }

    .signal-progress-copy {
      width: min(100%, 1280px);
      min-height: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      color: color-mix(in oklch, var(--fg), transparent 48%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .signal-progress-copy strong {
      color: color-mix(in oklch, var(--fg), transparent 12%);
      font-weight: 500;
    }

    @media (max-width: 820px) {
      .signal-journey { min-height: 178svh; }
      .signal-backdrop::before {
        inset: 4% -48% 0;
        transform: perspective(760px) rotateX(66deg) translateY(calc(16% + var(--bridge-progress) * 6%)) scale(1.12);
      }
      .signal-backdrop::after {
        top: calc(12% + var(--bridge-progress) * 72%);
        right: 4%;
        bottom: auto;
        left: 4%;
        width: auto;
        height: 230px;
        translate: 0 -50%;
      }
      .signal-flowline {
        top: 12%;
        right: auto;
        bottom: 12%;
        left: 50%;
        width: 1px;
        height: auto;
      }
      .signal-flowline::before {
        transform: scaleY(var(--bridge-progress));
        transform-origin: top;
      }
      .signal-pulse {
        --pulse-top: 12%;
        top: var(--pulse-top);
        left: 50%;
      }
      .signal-pulse:nth-of-type(1) { --pulse-top: 12%; }
      .signal-pulse:nth-of-type(2) { --pulse-top: 31%; }
      .signal-pulse:nth-of-type(3) { --pulse-top: 50%; }
      .signal-pulse:nth-of-type(4) { --pulse-top: 69%; }
      .signal-pulse:nth-of-type(5) { --pulse-top: 88%; }
      .signal-sticky { justify-content: flex-start; gap: 28px; padding: 100px 20px 90px; }
      .signal-heading h2 { max-width: 13ch; font-size: clamp(40px, 10vw, 68px); }
      .signal-grid { grid-template-columns: 1fr; gap: 18px; }
      .signal-payment,
      .signal-output { width: min(100%, 560px); justify-self: center; transform: translateY(calc(24px - var(--bridge-progress) * 24px)); }
      .signal-route { width: 100%; min-height: 86px; justify-items: center; }
      .signal-route-label { width: 100%; }
      .signal-beam { width: 2px; height: 62px; margin-top: 9px; }
      .signal-beam i { transform: scaleY(var(--bridge-progress)); transform-origin: top; }
      .signal-beam b { top: calc(var(--bridge-progress) * 100%); left: 50%; }
      .signal-route > p { display: none; }
      .signal-caption { max-width: 52ch; }
      .signal-amount { margin-top: 28px; }
      .signal-chapters {
        grid-template-columns: 1fr;
        width: min(100%, 560px);
      }
      .signal-chapter {
        min-height: 54px;
        grid-template-columns: 54px 1fr;
        align-items: center;
        padding: 10px 14px;
        border-right: 0;
        border-bottom: 1px solid color-mix(in oklch, var(--fg), transparent 90%);
      }
      .signal-chapter:last-child { border-bottom: 0; }
      .signal-progress-copy { width: min(100%, 560px); }
    }

    @media (max-width: 540px) {
      .signal-journey { min-height: 188svh; }
      .signal-heading h2 { font-size: clamp(38px, 12.4vw, 54px); }
      .signal-payment { padding: 20px; }
      .signal-output { padding: 8px; }
      .signal-alert { right: 8px; bottom: 8px; left: 8px; }
      .signal-card-foot { flex-wrap: wrap; }
    }

    .product-system {
      position: relative;
      margin-top: -1px;
      padding: clamp(48px, 5vw, 82px) var(--page-pad) clamp(100px, 12vw, 210px);
      border-top: 1px solid color-mix(in oklch, var(--fg), transparent 90%);
      background: var(--bg);
      box-shadow: 0 -90px 150px var(--bg);
      isolation: isolate;
    }

    .product-system::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0 0 auto;
      height: min(72vh, 720px);
      background:
        linear-gradient(color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in oklch, var(--surface), var(--bg) 42%), transparent 92%);
      background-size: 54px 54px, 54px 54px, auto;
      mask-image: linear-gradient(180deg, black, transparent 92%);
      opacity: 0.62;
    }

    .system-story {
      width: min(100%, 1480px);
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
      gap: clamp(48px, 9vw, 170px);
      align-items: start;
    }

    .story-stage {
      position: sticky;
      top: 18vh;
      min-height: 58vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: clamp(28px, 3vw, 50px);
      border: 1px solid color-mix(in oklch, var(--fg), transparent 83%);
      background:
        linear-gradient(color-mix(in oklch, var(--fg), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 96%) 1px, transparent 1px),
        radial-gradient(circle at 82% 24%, color-mix(in oklch, var(--fg), transparent 93%), transparent 32%),
        color-mix(in oklch, var(--surface), var(--bg) 42%);
      background-size: 34px 34px, 34px 34px, auto, auto;
      overflow: hidden;
    }

    .story-stage::before {
      content: "";
      position: absolute;
      inset: 14px;
      border-top: 1px solid color-mix(in oklch, var(--fg), transparent 70%);
      border-right: 1px solid color-mix(in oklch, var(--fg), transparent 70%);
      clip-path: polygon(68% 0, 100% 0, 100% 32%, calc(100% - 1px) 32%, calc(100% - 1px) 1px, 68% 1px);
      pointer-events: none;
    }

    .story-stage::after {
      content: "PALTIP";
      position: absolute;
      right: -0.12em;
      bottom: -0.24em;
      color: color-mix(in oklch, var(--fg), transparent 96%);
      font-family: var(--font-display);
      font-size: clamp(110px, 14vw, 240px);
      line-height: 1;
      letter-spacing: -0.05em;
      pointer-events: none;
    }

    .stage-hud {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      font-family: var(--font-mono);
      color: color-mix(in oklch, var(--fg), transparent 48%);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .stage-live {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: color-mix(in oklch, var(--fg), transparent 22%);
    }

    .stage-live::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 16px color-mix(in oklch, var(--accent), transparent 36%);
      animation: signal 1.8s ease-in-out 3;
    }

    .stage-main {
      position: relative;
      z-index: 1;
    }

    .stage-mode {
      display: block;
      margin-bottom: 16px;
      color: color-mix(in oklch, var(--fg), transparent 50%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .stage-main h3 {
      max-width: 11ch;
      margin: 0;
      font-family: var(--font-body);
      font-size: clamp(42px, 4.5vw, 74px);
      font-weight: 600;
      line-height: 0.92;
      letter-spacing: -0.03em;
    }

    .stage-signal {
      margin: 27px 0 0;
      font-family: var(--font-mono);
      font-size: clamp(18px, 2vw, 30px);
      letter-spacing: -0.02em;
    }

    .stage-visual {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 138px;
      display: grid;
      align-items: center;
      margin: clamp(20px, 3.6vh, 38px) 0;
    }

    .widget-preview {
      width: 100%;
      animation: widget-preview-in 420ms cubic-bezier(.2,.75,.2,1) both;
    }

    .preview-label {
      margin-bottom: 9px;
      color: color-mix(in oklch, var(--fg), transparent 56%);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .preview-alert {
      border: 1px solid color-mix(in oklch, var(--fg), transparent 80%);
      background: color-mix(in oklch, var(--bg), transparent 8%);
      box-shadow: 0 16px 42px rgb(0 0 0 / 0.26);
    }

    .preview-alert-strip {
      height: 23px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      border-bottom: 1px solid color-mix(in oklch, var(--fg), transparent 88%);
      color: color-mix(in oklch, var(--fg), transparent 50%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .preview-wave { height: 12px; display: flex; align-items: center; gap: 3px; }
    .preview-wave i { width: 2px; height: 5px; background: var(--accent); animation: preview-wave 560ms ease-in-out 6 alternate; }
    .preview-wave i:nth-child(2), .preview-wave i:nth-child(4) { height: 11px; animation-delay: 110ms; }
    .preview-wave i:nth-child(3) { height: 8px; animation-delay: 220ms; }

    .preview-alert-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      padding: 15px 16px 17px;
    }

    .preview-alert-body b, .preview-alert-body strong { display: block; }
    .preview-alert-body b { font-size: 13px; }
    .preview-alert-body p { margin: 3px 0 0; overflow: hidden; color: color-mix(in oklch, var(--fg), transparent 42%); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
    .preview-alert-body strong { color: var(--accent); font-family: var(--font-mono); font-size: 16px; white-space: nowrap; }

    .preview-obs {
      overflow: hidden;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 80%);
      background: color-mix(in oklch, var(--bg), transparent 5%);
      box-shadow: 0 18px 48px rgb(0 0 0 / 0.3);
    }

    .preview-obs-source {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      font-family: var(--font-mono);
      font-size: 7px;
    }

    .preview-obs-source b { color: var(--accent); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
    .preview-obs-source code { overflow: hidden; color: color-mix(in oklch, var(--fg), transparent 34%); text-overflow: ellipsis; white-space: nowrap; }
    .preview-obs-copy { padding: 3px 6px; border: 1px solid var(--border); color: color-mix(in oklch, var(--fg), transparent 42%); letter-spacing: 0.04em; text-transform: uppercase; }

    .preview-obs-canvas {
      position: relative;
      min-height: 92px;
      padding: 12px;
      background:
        linear-gradient(color-mix(in oklch, var(--fg), transparent 96%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 96%) 1px, transparent 1px),
        color-mix(in oklch, var(--surface), var(--bg) 64%);
      background-size: 22px 22px;
    }

    .preview-obs-live { position: absolute; top: 9px; left: 10px; color: var(--accent); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; }
    .preview-obs-alert { position: absolute; top: 25px; right: 11px; width: 55%; padding: 7px 9px; border: 1px solid color-mix(in oklch, var(--fg), transparent 76%); background: color-mix(in oklch, var(--bg), transparent 7%); font-size: 10px; animation: obs-alert-in 3.4s ease-in-out 1 both; }
    .preview-obs-alert b { display: block; margin-bottom: 2px; color: var(--accent); font-family: var(--font-mono); font-size: 9px; }
    .preview-obs-goal { position: absolute; right: 11px; bottom: 10px; left: 11px; }
    .preview-obs-goal div { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 7px; }
    .preview-obs-goal div span:last-child { font-family: var(--font-mono); }
    .preview-obs-goal i { display: block; width: 100%; height: 4px; background: linear-gradient(90deg, var(--accent) 0 28%, color-mix(in oklch, var(--fg), transparent 90%) 28%); }

    .preview-timer-shell {
      position: relative;
      padding: 18px 16px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 80%);
      background: linear-gradient(180deg, color-mix(in oklch, var(--fg), transparent 95%), transparent), color-mix(in oklch, var(--bg), transparent 4%);
      box-shadow: inset 0 1px 0 color-mix(in oklch, var(--fg), transparent 90%), 0 18px 46px rgb(0 0 0 / 0.3);
    }

    .preview-timer { display: flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-mono); }
    .preview-flip-group { display: flex; gap: 4px; }
    .preview-flip-digit {
      min-width: 27px;
      padding: 12px 5px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 83%);
      background: linear-gradient(180deg, color-mix(in oklch, var(--fg), transparent 92%) 49%, transparent 50%), color-mix(in oklch, var(--surface), var(--bg) 48%);
      box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.55);
      color: var(--fg);
      font-size: 23px;
      line-height: 1;
      text-align: center;
    }
    .preview-timer-separator { color: var(--accent); font-size: 18px; }
    .preview-timer-addition { position: absolute; top: -12px; right: 13px; padding: 5px 8px; background: var(--accent); color: var(--bg); font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; animation: preview-addition 4.8s ease-in-out 1.8s both; }
    .preview-timer-status { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; color: color-mix(in oklch, var(--fg), transparent 45%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; }
    .preview-timer-status::before { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in oklch, var(--accent), transparent 35%); content: ""; animation: live-pulse 1.4s ease-in-out 3; }
    .preview-timer-shell[data-boosted="true"] .preview-flip-digit { animation: timer-boost 720ms cubic-bezier(.2,.8,.2,1); }
    .preview-timer-shell[data-boosted="true"] .preview-timer-status { color: var(--accent); }

    .preview-chat { display: grid; gap: 4px; font-size: 10px; }
    .preview-chat-line { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: start; padding: 6px 8px; background: color-mix(in oklch, var(--fg), transparent 95%); opacity: 0; animation: chat-line-in 280ms ease forwards; animation-delay: var(--delay, 0ms); }
    .preview-chat-line b { color: color-mix(in oklch, var(--fg), transparent 38%); font-family: var(--font-mono); font-size: 7px; font-weight: 500; }
    .preview-chat-line > span { min-width: 0; line-height: 1.35; }
    .preview-chat-line.is-bot { border: 1px solid color-mix(in oklch, var(--accent), transparent 76%); background: color-mix(in oklch, var(--accent), transparent 94%); }
    .preview-chat-line.is-command span { color: var(--fg); font-family: var(--font-mono); }
    .preview-chat-line.is-typing { grid-template-columns: 64px auto; justify-content: start; background: transparent; padding-top: 2px; padding-bottom: 2px; animation-name: chat-typing-row; animation-duration: 820ms; }
    .preview-chat-typing { display: flex; gap: 3px; align-items: center; height: 10px; }
    .preview-chat-typing i { width: 3px; height: 3px; border-radius: 50%; background: color-mix(in oklch, var(--fg), transparent 45%); animation: chat-typing 520ms ease-in-out 6 alternate; }
    .preview-chat-typing i:nth-child(2) { animation-delay: 100ms; }
    .preview-chat-typing i:nth-child(3) { animation-delay: 200ms; }
    .preview-chat-goal { display: grid; gap: 4px; }
    .preview-chat-goal strong { font-size: 9px; font-weight: 600; }
    .preview-chat-goal small { color: color-mix(in oklch, var(--fg), transparent 40%); font-family: var(--font-mono); font-size: 7px; }
    .preview-chat-goal-track { height: 4px; background: color-mix(in oklch, var(--fg), transparent 90%); }
    .preview-chat-goal-track i { display: block; width: 28%; height: 100%; background: var(--accent); }

    .preview-control { overflow: hidden; border: 1px solid var(--border); background: color-mix(in oklch, var(--fg), transparent 96%); }
    .preview-control-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; }
    .preview-control-head b { color: var(--accent); font-weight: 500; }
    .preview-control-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; }
    .preview-control-main small { display: block; color: color-mix(in oklch, var(--fg), transparent 52%); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.05em; text-transform: uppercase; }
    .preview-control-main strong { display: block; margin-top: 4px; font-size: 11px; font-weight: 600; }
    .preview-control-main p { margin: 3px 0 0; color: color-mix(in oklch, var(--fg), transparent 42%); font-size: 10px; }
    .preview-control-actions { display: flex; gap: 5px; }
    .preview-control-actions span { padding: 6px 8px; border: 1px solid var(--border); font-family: var(--font-mono); font-size: 9px; }
    .preview-control-actions .is-primary { border-color: var(--accent); background: var(--accent); color: var(--bg); }
    .preview-control-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); }
    .preview-control-stats span { padding: 7px 9px; border-right: 1px solid var(--border); color: color-mix(in oklch, var(--fg), transparent 48%); font-size: 9px; }
    .preview-control-stats span:last-child { border-right: 0; }
    .preview-control-stats b { display: block; margin-top: 2px; color: var(--fg); font-family: var(--font-mono); font-size: 9px; font-weight: 500; }

    @keyframes widget-preview-in { from { opacity: 0; transform: translateY(9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
    @keyframes preview-wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }
    @keyframes preview-addition { 0%, 12% { opacity: 0; transform: translateY(6px) scale(0.96); } 20%, 76% { opacity: 1; transform: translateY(0) scale(1); } 88%, 100% { opacity: 0; transform: translateY(-6px) scale(0.98); } }
    @keyframes chat-line-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes chat-typing-row { 0% { opacity: 0; transform: translateY(3px); } 18%, 76% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2px); } }
    @keyframes chat-typing { from { opacity: .28; transform: translateY(1px); } to { opacity: 1; transform: translateY(-1px); } }
    @keyframes timer-boost { 0% { transform: translateY(0); filter: brightness(1); } 45% { transform: translateY(-4px); filter: brightness(1.8); } 100% { transform: translateY(0); filter: brightness(1); } }
    @keyframes obs-alert-in { 0%, 12% { opacity: 0; transform: translateX(8px); } 22%, 82% { opacity: 1; transform: translateX(0); } 92%, 100% { opacity: 0; transform: translateX(-5px); } }

    .stage-meta {
      position: relative;
      z-index: 1;
      max-width: 34ch;
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 44%);
      font-size: 13px;
      line-height: 1.6;
    }

    .system-modules {
      border-top: 1px solid var(--border);
    }

    .story-module {
      position: relative;
      min-height: 58vh;
      display: grid;
      grid-template-columns: 74px minmax(0, 1fr);
      gap: 20px;
      align-content: center;
      padding: clamp(60px, 8vw, 120px) 0;
      border-bottom: 1px solid var(--border);
      opacity: 0.34;
      transform: translateX(0);
      transition: opacity 320ms ease, transform 420ms cubic-bezier(.2,.75,.2,1);
    }

    .story-module.is-active,
    .story-module:focus-visible,
    .story-module:hover {
      opacity: 1;
      transform: translateX(-10px);
    }

    .story-module:focus-visible {
      outline: 1px solid color-mix(in oklch, var(--fg), transparent 38%);
      outline-offset: 12px;
    }

    .module-number {
      padding-top: 11px;
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-size: 9px;
      transition: color 280ms ease;
    }

    .story-module.is-active .module-number {
      color: var(--accent);
    }

    .module-copy h3 {
      margin: 0;
      font-family: var(--font-body);
      font-size: clamp(34px, 4vw, 64px);
      font-weight: 600;
      line-height: 0.96;
      letter-spacing: -0.042em;
    }

    .module-copy > p {
      max-width: 58ch;
      margin: 25px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 34%);
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.65;
    }

    .module-spec {
      display: flex;
      flex-wrap: wrap;
      gap: 9px 22px;
      margin-top: 30px;
      color: color-mix(in oklch, var(--fg), transparent 52%);
      font-size: 9px;
    }

    .trust-strip {
      width: min(100%, 1480px);
      margin: clamp(80px, 11vw, 170px) auto 0;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .trust-item {
      min-height: 150px;
      display: grid;
      align-content: center;
      gap: 8px;
      padding: 28px clamp(20px, 2.5vw, 40px);
      border-right: 1px solid var(--border);
    }

    .trust-item:last-child {
      border-right: 0;
    }

    .trust-item span {
      color: color-mix(in oklch, var(--fg), transparent 52%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .trust-item strong {
      font-family: var(--font-display);
      font-size: clamp(26px, 2.5vw, 42px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.025em;
    }

    .content-section {
      position: relative;
      padding: clamp(100px, 12vw, 190px) var(--page-pad);
      border-top: 1px solid var(--border);
      background: var(--bg);
      isolation: isolate;
    }

    .content-section::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklch, var(--fg), transparent 97%) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: linear-gradient(180deg, black, transparent 72%);
      opacity: 0.48;
    }

    .section-shell {
      width: min(100%, 1480px);
      margin: 0 auto;
    }

    .section-heading {
      display: grid;
      grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.58fr);
      align-items: end;
      gap: clamp(46px, 8vw, 130px);
    }

    .section-kicker {
      margin: 0 0 22px;
      color: color-mix(in oklch, var(--fg), transparent 46%);
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.09em;
      text-transform: uppercase;
    }

    .section-heading h2 {
      max-width: 12ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(52px, 6.4vw, 108px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -0.045em;
      text-wrap: balance;
    }

    .section-heading > p {
      max-width: 52ch;
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 34%);
      font-size: clamp(15px, 1.2vw, 18px);
      line-height: 1.65;
    }

    .finance-section {
      background: color-mix(in oklch, var(--surface), var(--bg) 46%);
    }

    .finance-flow {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: clamp(70px, 8vw, 120px);
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }

    .finance-step {
      position: relative;
      min-height: 260px;
      padding: 32px clamp(20px, 2.4vw, 38px);
      border-right: 1px solid var(--border);
    }

    .finance-step:last-child {
      border-right: 0;
    }

    .finance-step > span {
      display: block;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .finance-step h3 {
      margin: 70px 0 0;
      font-size: clamp(25px, 2.3vw, 38px);
      font-weight: 600;
      line-height: 1;
      letter-spacing: -0.025em;
    }

    .finance-step p {
      max-width: 31ch;
      margin: 16px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      font-size: 14px;
      line-height: 1.6;
    }

    .operator-rail {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-top: 38px;
      border: 1px solid var(--border);
    }

    .operator-item {
      min-height: 118px;
      padding: 24px 26px;
      border-right: 1px solid var(--border);
    }

    .operator-item:last-child {
      border-right: 0;
    }

    .operator-item strong {
      display: block;
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .operator-item span {
      display: block;
      margin-top: 8px;
      color: color-mix(in oklch, var(--fg), transparent 50%);
      font-size: 12px;
      line-height: 1.5;
    }

    .finance-assurance {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1px;
      margin-top: 38px;
      background: var(--border);
      border: 1px solid var(--border);
    }

    .assurance-item {
      min-height: 150px;
      padding: 28px clamp(24px, 3vw, 46px);
      background: var(--bg);
    }

    .assurance-item strong {
      display: block;
      font-size: 18px;
      font-weight: 600;
    }

    .assurance-item p {
      max-width: 58ch;
      margin: 12px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      font-size: 14px;
      line-height: 1.65;
    }

    .assurance-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 22px;
      font-size: 12px;
    }

    .assurance-links a {
      text-decoration-color: color-mix(in oklch, var(--fg), transparent 56%);
      text-underline-offset: 5px;
    }

    .pricing-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.62fr);
      align-items: start;
      gap: clamp(50px, 8vw, 130px);
      margin-top: clamp(70px, 8vw, 120px);
    }

    .pricing-table {
      border-top: 1px solid var(--border);
    }

    .price-row {
      display: grid;
      grid-template-columns: minmax(170px, 0.9fr) minmax(190px, 0.85fr) minmax(0, 1.2fr);
      gap: 26px;
      align-items: center;
      min-height: 122px;
      padding: 24px 0;
      border-bottom: 1px solid var(--border);
    }

    .price-method span {
      display: block;
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-family: var(--font-mono);
      font-size: 8px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .price-method strong {
      display: block;
      margin-top: 6px;
      font-size: clamp(21px, 2vw, 31px);
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .price-value {
      font-family: var(--font-mono);
      font-size: clamp(16px, 1.55vw, 23px);
      line-height: 1.35;
    }

    .price-row[data-recommended="true"] .price-value {
      color: var(--accent);
    }

    .price-note {
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 46%);
      font-size: 13px;
      line-height: 1.55;
    }

    .price-calculator {
      position: sticky;
      top: 30px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 78%);
      background: color-mix(in oklch, var(--surface), var(--bg) 24%);
      box-shadow: 0 28px 90px rgb(0 0 0 / 0.34);
    }

    .calculator-head {
      padding: 24px 26px;
      border-bottom: 1px solid var(--border);
    }

    .calculator-head span {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calculator-head strong {
      display: block;
      margin-top: 8px;
      font-size: 26px;
      font-weight: 600;
      letter-spacing: -0.025em;
    }

    .calculator-options {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      border-bottom: 1px solid var(--border);
    }

    .calculator-options button {
      min-height: 54px;
      padding: 0 8px;
      border: 0;
      border-right: 1px solid var(--border);
      background: transparent;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 11px;
    }

    .calculator-options button:last-child {
      border-right: 0;
    }

    .calculator-options button[aria-pressed="true"] {
      background: var(--accent);
      color: var(--bg);
    }

    .calculator-result {
      padding: 28px 26px;
    }

    .calculation-line {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding: 13px 0;
      border-bottom: 1px solid var(--border);
      color: color-mix(in oklch, var(--fg), transparent 34%);
      font-size: 13px;
    }

    .calculation-line strong {
      color: var(--fg);
      font-family: var(--font-mono);
      font-weight: 500;
    }

    .calculation-total {
      margin-top: 25px;
    }

    .calculation-total span {
      color: color-mix(in oklch, var(--fg), transparent 52%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .calculation-total strong {
      display: block;
      margin-top: 7px;
      font-family: var(--font-display);
      font-size: clamp(48px, 5vw, 72px);
      font-weight: 600;
      line-height: 0.95;
      letter-spacing: -0.04em;
    }

    .pricing-footnote {
      max-width: 76ch;
      margin: 30px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-size: 11px;
      line-height: 1.65;
    }

    .community-section {
      overflow: hidden;
      background: color-mix(in oklch, var(--surface), var(--bg) 38%);
    }

    .community-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.55fr);
      align-items: end;
      gap: clamp(50px, 8vw, 130px);
    }

    .community-word {
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 90%);
      font-family: var(--font-display);
      font-size: clamp(100px, 17vw, 290px);
      font-weight: 600;
      line-height: 0.68;
      letter-spacing: -0.06em;
      white-space: nowrap;
      transform: translateX(-0.045em);
    }

    .community-copy h2 {
      max-width: 10ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(46px, 5.2vw, 84px);
      font-weight: 600;
      line-height: 0.92;
      letter-spacing: -0.045em;
    }

    .community-copy p {
      max-width: 48ch;
      margin: 26px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 36%);
      font-size: 16px;
      line-height: 1.65;
    }

    .community-actions {
      display: flex;
      align-items: center;
      gap: 24px;
      margin-top: 32px;
    }

    .community-meta {
      color: color-mix(in oklch, var(--fg), transparent 52%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .final-cta {
      padding: clamp(100px, 13vw, 210px) var(--page-pad) 70px;
      border-top: 1px solid var(--border);
      background: var(--bg);
    }

    .final-cta-main {
      width: min(100%, 1480px);
      margin: 0 auto;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 50px;
    }

    .final-cta-main p {
      max-width: 13ch;
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(48px, 6.4vw, 102px);
      font-weight: 600;
      line-height: 0.9;
      letter-spacing: -0.05em;
    }

    .site-footer {
      width: min(100%, 1480px);
      margin: clamp(90px, 10vw, 150px) auto 0;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 30px;
      padding-top: 26px;
      border-top: 1px solid var(--border);
      color: color-mix(in oklch, var(--fg), transparent 54%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.04em;
    }

    .footer-identity {
      display: grid;
      gap: 7px;
      max-width: 780px;
    }

    .footer-company {
      color: color-mix(in oklch, var(--fg), transparent 38%);
      font-style: normal;
      line-height: 1.6;
    }

    .footer-company a {
      color: inherit;
      text-decoration: none;
    }

    .footer-company a:hover,
    .footer-company a:focus-visible {
      color: var(--fg);
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
    }

    .footer-links a {
      text-decoration: none;
    }

    .footer-links a:hover,
    .footer-links a:focus-visible {
      color: var(--fg);
    }

    .story-dialog {
      width: min(660px, calc(100vw - 32px));
      max-height: calc(100svh - 32px);
      padding: 0;
      overflow: auto;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 76%);
      border-radius: 10px;
      background: var(--bg);
      color: var(--fg);
      box-shadow: 0 32px 120px rgb(0 0 0 / 0.7);
    }

    .story-dialog::backdrop {
      background: rgb(0 0 0 / 0.72);
      backdrop-filter: blur(10px);
    }

    .dialog-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 22px 24px;
      border-bottom: 1px solid var(--border);
    }

    .dialog-head span {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .dialog-close {
      width: 44px;
      height: 44px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: transparent;
      color: var(--fg);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    .dialog-close:hover,
    .dialog-close:focus-visible {
      border-color: color-mix(in oklch, var(--fg), transparent 46%);
      background: color-mix(in oklch, var(--fg), transparent 92%);
    }

    .dialog-close:active {
      transform: translateY(1px);
    }

    .dialog-body {
      padding: 28px 24px 32px;
    }

    .dialog-body h2 {
      max-width: 11ch;
      margin: 0 0 28px;
      font-family: var(--font-display);
      font-size: clamp(38px, 7vw, 58px);
      font-weight: 600;
      line-height: 0.96;
      letter-spacing: -0.025em;
    }

    .flow-list {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
      counter-reset: flow;
    }

    .flow-list li {
      display: grid;
      grid-template-columns: 50px 1fr;
      gap: 18px;
      padding: 20px 0;
      border-top: 1px solid var(--border);
      counter-increment: flow;
    }

    .flow-list li::before {
      content: "0" counter(flow);
      color: color-mix(in oklch, var(--fg), transparent 55%);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
    }

    .flow-list strong {
      display: block;
      margin-bottom: 5px;
      font-size: 15px;
      font-weight: 600;
    }

    .flow-list p {
      max-width: 52ch;
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 36%);
      font-size: 14px;
    }

    .preview-state {
      min-height: 132px;
      display: grid;
      place-content: center;
      gap: 8px;
      padding: 22px;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 78%);
      background: color-mix(in oklch, var(--bg), transparent 6%);
      text-align: center;
    }

    .preview-state strong {
      font-size: 15px;
      font-weight: 600;
    }

    .preview-state p {
      max-width: 42ch;
      margin: 0;
      color: color-mix(in oklch, var(--fg), transparent 42%);
      font-size: 13px;
    }

    .preview-state-loading::before {
      width: 20px;
      height: 20px;
      justify-self: center;
      border: 2px solid color-mix(in oklch, var(--fg), transparent 76%);
      border-top-color: var(--fg);
      border-radius: 50%;
      content: "";
      animation: preview-loader 700ms linear infinite;
    }

    [data-module-panel][aria-busy="true"] {
      min-height: 132px;
    }

    @keyframes preview-loader {
      to { transform: rotate(360deg); }
    }

    @keyframes signal {
      0%, 100% { opacity: 0.58; transform: scale(0.88); }
      50% { opacity: 1; transform: scale(1); }
    }

    @media (max-width: 1080px) {
      .site-header {
        grid-template-columns: 1fr auto;
      }

      .desktop-nav,
      .login-link {
        display: none;
      }

      .menu-toggle {
        display: block;
      }

      .hero-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(390px, 0.62fr);
        gap: 28px;
      }

      .system-switcher {
        right: 0;
        width: min(96%, 580px);
      }

      .system-story {
        grid-template-columns: minmax(270px, 0.68fr) minmax(0, 1.32fr);
        gap: clamp(42px, 6vw, 82px);
      }

      .story-stage {
        top: 15vh;
      }

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

      .price-calculator {
        position: relative;
        top: auto;
        width: min(100%, 620px);
      }

      .community-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(300px, 0.7fr);
        gap: 44px;
      }
    }

    @media (max-width: 820px) {
      .site-header {
        height: 78px;
      }

      .mobile-menu {
        top: 78px;
      }

      .hero {
        min-height: auto;
      }

      .hero::before {
        background: linear-gradient(180deg, color-mix(in oklch, var(--bg), transparent 2%) 0%, color-mix(in oklch, var(--bg), transparent 12%) 42%, color-mix(in oklch, var(--bg), transparent 0%) 100%);
      }

      .hero-media {
        display: none;
      }

      .hero-layout {
        min-height: 100svh;
        grid-template-columns: 1fr;
        align-content: start;
        gap: 34px;
        padding-top: 124px;
        padding-bottom: 92px;
      }

      .hero-copy {
        max-width: 680px;
      }

      h1 {
        max-width: 13ch;
        font-size: clamp(54px, 11.5vw, 82px);
      }

      .hero-description {
        margin-top: 22px;
      }

      .broadcast-scene {
        width: 100%;
        max-width: 620px;
        aspect-ratio: 16 / 12;
        justify-self: center;
      }

      .scene-frame {
        inset: 0 0 38px;
        overflow: hidden;
        border: 1px solid color-mix(in oklch, var(--fg), transparent 75%);
        border-radius: 10px;
        background: var(--surface);
        box-shadow: 0 28px 80px rgb(0 0 0 / 0.48);
        transform: none;
      }

      .scene-frame::before {
        content: "";
        position: absolute;
        z-index: 2;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, transparent 36%, rgb(0 0 0 / 0.62));
      }

      .scene-frame img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 67% center;
        filter: saturate(0.78) contrast(1.06) brightness(0.8);
      }

      .scene-frame video,
      .scene-frame img {
        object-position: 58% center;
      }

      .tip-alert {
        right: 14px;
        bottom: 52px;
      }

      .system-switcher {
        right: 0;
        bottom: 0;
        width: calc(100% - 30px);
      }

      .cinematic-bridge {
        min-height: 124svh;
      }

      .bridge-sticky {
        padding-top: 104px;
      }

      .bridge-frame {
        inset: 24px;
      }

      .bridge-copy h2 {
        font-size: clamp(54px, 12.8vw, 94px);
      }

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

      .story-stage {
        position: relative;
        top: auto;
        min-height: 390px;
      }

      .story-module {
        min-height: auto;
        padding: 78px 0;
        opacity: 1;
      }

      .trust-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .trust-item:nth-child(2) {
        border-right: 0;
      }

      .trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
      }

      .section-heading,
      .community-layout {
        grid-template-columns: 1fr;
      }

      .section-heading {
        align-items: start;
        gap: 30px;
      }

      .section-heading h2 {
        max-width: 11ch;
      }

      .finance-flow,
      .operator-rail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .finance-step:nth-child(2),
      .operator-item:nth-child(2) {
        border-right: 0;
      }

      .finance-step:nth-child(-n + 2),
      .operator-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--border);
      }

      .finance-assurance {
        grid-template-columns: 1fr;
      }

      .price-row {
        grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 0.8fr) minmax(0, 1fr);
        gap: 18px;
      }

      .community-layout {
        align-items: start;
      }

      .community-word {
        font-size: clamp(92px, 27vw, 190px);
      }

      .final-cta-main {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 540px) {
      .site-header {
        height: 72px;
      }

      .brand {
        font-size: 28px;
      }

      .header-actions {
        gap: 8px;
      }

      .header-cta {
        min-height: 40px;
        padding: 0 12px;
        font-size: 10px;
      }

      .menu-toggle {
        width: 42px;
        height: 42px;
      }

      .mobile-menu {
        inset: 72px 12px auto;
      }

      .hero-layout {
        gap: 28px;
        padding-top: 104px;
        padding-bottom: 44px;
      }

      .eyebrow {
        margin-bottom: 18px;
        font-size: 9px;
      }

      h1 {
        font-size: clamp(54px, 17.4vw, 76px);
        line-height: 0.89;
      }

      .hero-description {
        max-width: 39ch;
        font-size: 15px;
      }

      .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        margin-top: 28px;
      }

      .primary-cta {
        width: 100%;
        min-height: 54px;
      }

      .broadcast-scene {
        aspect-ratio: 4 / 4.65;
      }

      .scene-frame {
        inset: 0 0 154px;
      }

      .tip-alert {
        right: 10px;
        bottom: 170px;
        width: calc(100% - 20px);
        padding: 15px;
      }

      .tip-main strong,
      .tip-main b {
        font-size: 14px;
      }

      .tip-message {
        font-size: 12px;
      }

      .system-switcher {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .module-tab {
        min-height: 50px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--border);
      }

      .module-tab:nth-child(2n) {
        border-right: 0;
      }

      .module-tab:last-child {
        grid-column: 1 / -1;
        border-bottom: 0;
      }

      .module-tab strong {
        font-size: 9px;
      }

      .broadcast-scene {
        aspect-ratio: 4 / 6.25;
      }

      .bridge-sticky {
        padding: 92px 20px 76px;
      }

      .bridge-frame {
        inset: 14px;
      }

      .bridge-frame::before,
      .bridge-frame::after {
        width: 22px;
      }

      .bridge-index {
        margin-bottom: 24px;
        font-size: 8px;
      }

      .bridge-copy h2 {
        max-width: 9ch;
        font-size: clamp(47px, 14.7vw, 68px);
        line-height: 0.92;
      }

      .bridge-copy p:not(.bridge-index):not(.bridge-scroll) {
        margin-top: 28px;
        font-size: 14px;
      }

      .bridge-console {
        gap: 8px 14px;
        margin-top: 28px;
        font-size: 8px;
      }

      .bridge-scroll {
        bottom: 26px;
      }

      .bridge-scroll::before {
        height: 38px;
      }

      .product-system {
        padding-top: 58px;
        padding-right: 20px;
        padding-left: 20px;
      }

      .story-stage {
        min-height: 330px;
        padding: 26px;
      }

      .stage-main h3 {
        font-size: clamp(44px, 14vw, 62px);
      }

      .story-module {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 62px 0;
      }

      .module-number {
        padding-top: 7px;
      }

      .module-copy h3 {
        font-size: clamp(36px, 11.5vw, 52px);
      }

      .module-copy > p {
        margin-top: 20px;
        font-size: 15px;
      }

      .module-spec {
        gap: 8px 14px;
        margin-top: 24px;
        font-size: 8px;
      }

      .trust-strip {
        grid-template-columns: 1fr;
        margin-top: 88px;
      }

      .trust-item,
      .trust-item:nth-child(2) {
        min-height: 116px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .trust-item:last-child {
        border-bottom: 0;
      }

      .content-section {
        padding-right: 20px;
        padding-left: 20px;
      }

      .section-heading h2 {
        font-size: clamp(46px, 14vw, 66px);
      }

      .finance-flow,
      .operator-rail {
        grid-template-columns: 1fr;
      }

      .finance-step,
      .finance-step:nth-child(2),
      .operator-item,
      .operator-item:nth-child(2) {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }

      .finance-step:last-child,
      .operator-item:last-child {
        border-bottom: 0;
      }

      .finance-step h3 {
        margin-top: 40px;
      }

      .price-row {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 28px 0;
      }

      .calculator-options {
        grid-template-columns: repeat(5, minmax(0, 1fr));
      }

      .calculator-options button {
        min-height: 50px;
        padding: 0 4px;
        font-size: 9px;
      }

      .community-word {
        font-size: clamp(78px, 26vw, 118px);
      }

      .community-copy h2 {
        font-size: clamp(46px, 14vw, 66px);
      }

      .community-actions {
        align-items: flex-start;
        flex-direction: column;
      }

      .final-cta {
        padding-right: 20px;
        padding-left: 20px;
      }

      .final-cta-main p {
        font-size: clamp(46px, 14vw, 66px);
      }

      .site-footer {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @keyframes module-change {
      0% {
        opacity: 0.58;
        transform: translateY(5px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .overlay-transition {
      --overlay-progress: 0;
      position: relative;
      min-height: 145svh;
      margin-top: clamp(-170px, -18vh, -110px);
      background: var(--bg);
      isolation: isolate;
    }

    .overlay-transition::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, color-mix(in oklch, var(--surface), transparent 100%), var(--bg) 18%, var(--bg));
      pointer-events: none;
    }

    .overlay-transition-sticky {
      position: sticky;
      top: 0;
      min-height: 100svh;
      display: grid;
      grid-template-columns: minmax(360px, .78fr) minmax(560px, 1.22fr);
      align-items: center;
      gap: clamp(54px, 7vw, 132px);
      padding: clamp(54px, 6vh, 76px) var(--page-pad) clamp(88px, 9vh, 120px);
      overflow: hidden;
    }

    .overlay-transition-copy {
      position: relative;
      z-index: 2;
      max-width: 610px;
      opacity: calc(.72 + var(--overlay-progress) * .28);
      transform: translateY(calc(12px - var(--overlay-progress) * 12px));
    }

    .overlay-transition-copy > p:first-child {
      margin: 0 0 18px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .overlay-transition-copy h2 {
      margin: 0;
      font-family: var(--font-display);
      font-size: clamp(54px, 5.8vw, 94px);
      font-weight: 600;
      letter-spacing: -.025em;
      line-height: .93;
      text-transform: uppercase;
    }

    .overlay-transition-copy h2 span {
      color: color-mix(in oklch, var(--fg), transparent 38%);
    }

    .overlay-transition-lead {
      max-width: 54ch;
      margin: 28px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 22%);
      font-size: clamp(16px, 1.35vw, 19px);
      line-height: 1.58;
    }

    .overlay-transition-note {
      max-width: 54ch;
      margin: 26px 0 0;
      color: color-mix(in oklch, var(--fg), transparent 52%);
      font-size: 14px;
      line-height: 1.55;
    }

    .overlay-stage {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 980px;
      justify-self: end;
      opacity: calc(.62 + var(--overlay-progress) * .38);
      transform: perspective(1300px) rotateY(calc(-8deg + var(--overlay-progress) * 8deg)) scale(calc(.9 + var(--overlay-progress) * .1));
      transform-origin: center right;
    }

    .overlay-stage::before {
      content: "";
      position: absolute;
      inset: 10% -8% -12% 12%;
      z-index: -1;
      background: color-mix(in oklch, var(--accent), transparent 88%);
      filter: blur(70px);
      opacity: calc(.18 + var(--overlay-progress) * .34);
    }

    .overlay-stage-frame {
      position: relative;
      aspect-ratio: 16 / 10;
      overflow: hidden;
      border: 1px solid color-mix(in oklch, var(--fg), transparent 82%);
      background: var(--surface);
      box-shadow: 0 44px 110px color-mix(in oklch, var(--bg), transparent 2%);
      clip-path: inset(calc((1 - var(--overlay-progress)) * 9%) calc((1 - var(--overlay-progress)) * 7%) round calc((1 - var(--overlay-progress)) * 18px));
    }

    .overlay-stage-frame::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(180deg, color-mix(in oklch, var(--bg), transparent 92%), color-mix(in oklch, var(--bg), transparent 100%) 44%, color-mix(in oklch, var(--bg), transparent 30%));
      pointer-events: none;
    }

    .overlay-stage-frame > img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      filter: saturate(.88) contrast(1.06) brightness(.8);
      transform: scale(calc(1.08 - var(--overlay-progress) * .08));
    }

    .overlay-live,
    .overlay-layer {
      position: absolute;
      z-index: 2;
    }

    .overlay-live {
      top: 20px;
      left: 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: color-mix(in oklch, var(--bg), transparent 10%);
      color: var(--fg);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .overlay-live i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 14px color-mix(in oklch, var(--accent), transparent 20%);
    }

    .overlay-layer {
      border: 1px solid color-mix(in oklch, var(--fg), transparent 82%);
      background: color-mix(in oklch, var(--bg), transparent 12%);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 20px 44px color-mix(in oklch, var(--bg), transparent 36%);
      opacity: clamp(0, calc((var(--overlay-progress) - var(--layer-start)) * 4.8), 1);
      transform: translateY(calc((1 - clamp(0, calc((var(--overlay-progress) - var(--layer-start)) * 4.8), 1)) * 30px));
    }

    .overlay-layer span {
      color: color-mix(in oklch, var(--fg), transparent 48%);
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .overlay-layer-alert {
      --layer-start: .06;
      right: 22px;
      bottom: 70px;
      width: min(48%, 390px);
      padding: 16px 18px;
    }

    .overlay-layer-alert strong { display: block; margin-top: 7px; font-size: 15px; font-weight: 600; }
    .overlay-layer-alert p { margin: 4px 0 0; color: color-mix(in oklch, var(--fg), transparent 22%); font-size: 13px; }

    .overlay-layer-top {
      --layer-start: .22;
      top: 22px;
      right: 22px;
      width: min(34%, 250px);
      padding: 14px 16px;
    }

    .overlay-layer-top strong { display: block; margin-top: 8px; font-size: 13px; font-weight: 550; }
    .overlay-layer-top b { display: block; margin-top: 3px; color: var(--accent); font-family: var(--font-mono); font-size: 11px; }

    .overlay-layer-goal {
      --layer-start: .38;
      right: 22px;
      bottom: 22px;
      left: 22px;
      padding: 11px 14px 13px;
    }

    .overlay-layer-goal div { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
    .overlay-layer-goal strong { font-family: var(--font-mono); font-size: 11px; }
    .overlay-layer-goal > i { display: block; height: 4px; margin-top: 9px; background: color-mix(in oklch, var(--fg), transparent 88%); }
    .overlay-layer-goal > i b { display: block; width: 72%; height: 100%; background: var(--accent); }

    .overlay-layer-chat {
      --layer-start: .54;
      bottom: 86px;
      left: 22px;
      width: min(36%, 280px);
      padding: 13px 15px;
    }

    .overlay-layer-chat p { margin: 5px 0 0; font-family: var(--font-mono); font-size: 11px; }

    .obs-scene-preview {
      --obs-lime: #b6ff2e;
      --obs-lime-rgb: 182, 255, 46;
      --obs-magenta: #ff2d8d;
      --obs-magenta-rgb: 255, 45, 141;
      --obs-glass: rgba(5, 5, 8, .88);
      --obs-panel: rgba(11, 7, 16, .84);
      --obs-border: rgba(255, 255, 255, .1);
      --obs-muted: #9ca3af;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #050507;
      color: #f4f4f5;
      font-family: "Space Grotesk", var(--font-body);
      container-type: size;
    }

    .overlay-stage-frame::after { display: none; }

    .obs-pack-canvas {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #050507;
    }

    .obs-pack-preview-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      filter: saturate(1.02) contrast(1.02) brightness(.72);
      transform: scale(calc(1.06 - var(--overlay-progress) * .05));
      pointer-events: none;
    }

    .obs-pack-preview-shade {
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(5, 5, 7, .2), transparent 42%, rgba(5, 5, 7, .18));
      pointer-events: none;
    }

    .obs-pack-topbar,
    .obs-pack-bottombar {
      position: absolute;
      z-index: 10;
      right: 0;
      left: 0;
      display: flex;
      align-items: center;
      background: var(--obs-glass);
      border-color: var(--obs-border);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      font-family: var(--font-mono);
    }

    .obs-pack-topbar { top: 0; height: 7%; min-height: 34px; border-bottom: 1px solid var(--obs-border); }
    .obs-pack-bottombar { bottom: 0; height: 8%; min-height: 42px; padding: 0 2%; border-top: 1px solid var(--obs-border); }

    .obs-pack-brand,
    .obs-pack-bottom-brand {
      height: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      color: var(--obs-lime);
      font-size: clamp(8px, 1.05vw, 11px);
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .obs-pack-brand { padding: 0 2%; border-right: 1px solid var(--obs-border); }

    .obs-pack-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--obs-lime);
      box-shadow: 0 0 10px rgba(var(--obs-lime-rgb), .8), 0 0 0 3px rgba(var(--obs-lime-rgb), .12);
    }

    .obs-pack-ticker-label {
      height: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0 1.5%;
      border-right: 1px solid var(--obs-border);
      color: var(--obs-magenta);
      font-family: var(--font-mono);
      font-size: clamp(7px, .8vw, 9px);
      letter-spacing: .1em;
      text-transform: uppercase;
    }

    .obs-pack-ticker { flex: 1; overflow: hidden; }
    .obs-pack-ticker-track { width: max-content; display: flex; white-space: nowrap; animation: obs-ticker-marquee 22s linear infinite; }
    .obs-pack-ticker-group { display: flex; flex-shrink: 0; gap: 34px; padding-right: 34px; }
    .obs-pack-ticker-item { display: inline-flex; align-items: center; gap: 7px; color: var(--obs-muted); font-family: var(--font-mono); font-size: clamp(8px, .95vw, 11px); }
    .obs-pack-ticker-item b { color: #f4f4f5; }
    .obs-pack-ticker-item i,
    .obs-pack-ticker-item span { color: var(--obs-lime); font-style: normal; }

    .obs-pack-edge { position: absolute; z-index: 2; top: 7%; bottom: 8%; width: 2px; opacity: .32; }
    .obs-pack-edge-left { left: 0; background: linear-gradient(180deg, transparent, var(--obs-lime), transparent); box-shadow: 2px 0 20px rgba(var(--obs-lime-rgb), .15); }
    .obs-pack-edge-right { right: 0; background: linear-gradient(180deg, transparent, var(--obs-magenta), transparent); box-shadow: -2px 0 20px rgba(var(--obs-magenta-rgb), .14); }

    .obs-pack-goal {
      position: absolute;
      z-index: 4;
      border: 1px solid var(--obs-border);
      border-radius: 7px;
      background: var(--obs-panel);
      box-shadow: 0 0 28px rgba(var(--obs-lime-rgb), .06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .obs-pack-alert {
      position: absolute;
      z-index: 8;
      top: 10%;
      left: 50.5%;
      width: 43%;
      overflow: hidden;
      border: 1px solid rgba(var(--obs-magenta-rgb), .45);
      border-left: 2px solid var(--obs-magenta);
      border-radius: 9px;
      background: rgba(5, 5, 8, .72);
      box-shadow: 0 12px 32px rgba(0,0,0,.28), 0 0 22px rgba(var(--obs-magenta-rgb), .12);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      opacity: 0;
      transform: translate(-50%, 20px) scale(.985);
      transition: opacity 560ms ease, transform 560ms cubic-bezier(.2, .8, .2, 1);
    }

    .obs-pack-alert.is-visible {
      opacity: clamp(0, calc((var(--overlay-progress) - .24) * 5), 1);
      transform: translate(-50%, 0) scale(1);
    }

    .obs-pack-alert-strip { display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-bottom: 1px solid rgba(var(--obs-magenta-rgb), .24); background: rgba(var(--obs-magenta-rgb), .08); color: var(--obs-magenta); font-family: var(--font-mono); font-size: clamp(6px, .75vw, 8px); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
    .obs-pack-alert-wave { height: 14px; display: inline-flex; align-items: center; gap: 2px; }
    .obs-pack-alert-wave i { width: 2px; border-radius: 2px; background: var(--obs-magenta); box-shadow: 0 0 6px rgba(var(--obs-magenta-rgb), .65); }
    .obs-pack-alert-wave i:nth-child(1) { height: 5px; }
    .obs-pack-alert-wave i:nth-child(2) { height: 11px; }
    .obs-pack-alert-wave i:nth-child(3) { height: 14px; }
    .obs-pack-alert-wave i:nth-child(4) { height: 9px; }
    .obs-pack-alert-wave i:nth-child(5) { height: 6px; }
    .obs-pack-alert-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 14px 13px; }
    .obs-pack-alert-body b { display: block; font-size: clamp(10px, 1.3vw, 14px); }
    .obs-pack-alert-body p { max-width: 230px; margin: 3px 0 0; overflow: hidden; color: var(--obs-muted); font-size: clamp(8px, .95vw, 11px); line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
    .obs-pack-alert-body strong { color: var(--obs-lime); font-family: var(--font-mono); font-size: clamp(16px, 2.2vw, 28px); text-shadow: 0 0 18px rgba(var(--obs-lime-rgb), .6); white-space: nowrap; }

    .obs-pack-goals {
      position: absolute;
      z-index: 4;
      bottom: 13%;
      left: 2%;
      width: 43%;
      opacity: clamp(0, calc((var(--overlay-progress) - .56) * 5), 1);
    }

    .obs-pack-goal { position: relative; width: 100%; padding: 9px 10px; border-left: 2px solid var(--obs-lime); }
    .obs-pack-goal-head,
    .obs-pack-goal-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .obs-pack-goal-head { margin-bottom: 6px; font-size: clamp(9px, 1.08vw, 12px); font-weight: 700; }
    .obs-pack-goal-head b { color: var(--obs-lime); font-family: var(--font-mono); }
    .obs-pack-goal-track { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
    .obs-pack-goal-track div { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--obs-lime), var(--obs-magenta)); box-shadow: 0 0 14px rgba(var(--obs-lime-rgb), .45); transition: width 900ms cubic-bezier(.2, .8, .2, 1); }
    .obs-pack-goal-meta { margin-top: 5px; color: var(--obs-muted); font-family: var(--font-mono); font-size: clamp(7px, .78vw, 9px); }

    .obs-pack-bottom-brand { padding-right: 2%; border-right: 1px solid var(--obs-border); }
    .obs-pack-bottom-link { flex: 1; padding-left: 2%; color: #f4f4f5; font-family: var(--font-mono); font-size: clamp(7px, .86vw, 9px); }
    .obs-pack-bottom-tip { display: flex; align-items: center; gap: 10px; padding: 0 2%; border-right: 1px solid var(--obs-border); border-left: 1px solid var(--obs-border); font-family: var(--font-mono); font-size: clamp(7px, .82vw, 9px); }
    .obs-pack-bottom-tip span { color: var(--obs-muted); }
    .obs-pack-bottom-tip b { color: var(--obs-lime); }
    .obs-pack-status { display: flex; align-items: center; gap: 7px; padding-left: 2%; color: var(--obs-lime); font-family: var(--font-mono); font-size: clamp(7px, .85vw, 9px); font-weight: 700; letter-spacing: .1em; }

    @keyframes obs-ticker-marquee {
      to { transform: translateX(-50%); }
    }

    @media (max-width: 1024px) {
      .overlay-transition { min-height: auto; margin-top: 0; }
      .overlay-transition-sticky {
        position: relative;
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 54px;
        padding-top: 112px;
        padding-bottom: 138px;
      }
      .overlay-transition-copy { max-width: 720px; }
      .overlay-stage { max-width: 820px; justify-self: center; transform: none; opacity: 1; }
  .overlay-stage-frame { clip-path: none; }
  .overlay-layer { opacity: 1; transform: none; }
  .obs-pack-goals {
    opacity: 1;
    transform: none;
  }
  .obs-pack-alert {
    opacity: 0;
    transform: translate(-50%, 20px) scale(.985);
  }
  .obs-pack-alert.is-visible {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

    @media (max-width: 600px) {
      .overlay-transition-sticky { gap: 42px; padding: 92px 20px 122px; }
      .overlay-transition-copy h2 { font-size: clamp(48px, 15vw, 70px); }
      .overlay-stage-frame { aspect-ratio: 16 / 9; }
      .obs-pack-alert { width: 48%; }
      .obs-pack-alert-body p { display: none; }
      .obs-pack-ticker-label { display: none; }
      .obs-pack-bottom-tip { display: none; }
      .obs-pack-goals { width: 48%; }
      .overlay-layer-top { width: 48%; }
      .overlay-layer-alert { right: 12px; bottom: 72px; width: calc(100% - 24px); }
      .overlay-layer-chat { display: none; }
      .overlay-layer-goal { right: 12px; bottom: 12px; left: 12px; }
      .overlay-live { top: 12px; left: 12px; }
    }

    @keyframes module-progress {
      from { transform: scaleX(0); }
      to { transform: scaleX(1); }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .hero {
        min-height: 100svh;
      }

    }

    :where(
      .bridge-console,
      .bridge-scroll,
      .signal-heading > p,
      .signal-card-foot,
      .signal-route > p,
      .signal-live,
      .signal-alert > span,
      .signal-chapter span,
      .signal-progress-copy,
      .stage-mode,
      .preview-alert-strip,
      .preview-obs-source,
      .preview-obs-live,
      .preview-obs-alert,
      .preview-obs-alert b,
      .preview-obs-goal div,
      .preview-timer-addition,
      .preview-timer-status,
      .preview-chat-line b,
      .preview-chat-goal strong,
      .preview-chat-goal small,
      .preview-control-head,
      .preview-control-main small,
      .preview-control-actions span,
      .preview-control-stats span,
      .preview-control-stats b,
      .module-number,
      .module-spec,
      .trust-item span,
      .finance-step > span,
      .price-method span,
      .calculator-head span,
      .calculation-total span,
      .community-meta,
      .site-footer,
      .eyebrow,
      .module-tab strong,
      .bridge-index,
      .calculator-options button
    ) {
      font-size: 10px;
    }

.seo-link-rail {
  padding: clamp(84px, 10vw, 150px) var(--page-pad);
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in oklch, var(--accent), transparent 94%), transparent 30%),
    color-mix(in oklch, var(--surface), var(--bg) 66%);
}

.seo-link-rail .section-shell {
  display: block;
}

.seo-rail-heading {
  display: grid;
  grid-template-columns: minmax(210px, .52fr) minmax(0, 1.48fr);
  gap: 32px clamp(56px, 8vw, 140px);
  align-items: start;
  margin-bottom: clamp(46px, 6vw, 78px);
}

.seo-rail-heading .section-kicker {
  margin-top: 12px;
}

.seo-link-rail h2 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(48px, 4.9vw, 82px);
  font-weight: 600;
  line-height: .92;
  letter-spacing: -.03em;
}

.seo-rail-lead {
  max-width: 62ch;
  margin: 26px 0 0;
  color: color-mix(in oklch, var(--fg), transparent 38%);
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.65;
}

.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--border);
}

.seo-link-grid a {
  position: relative;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  padding: 22px;
  background: color-mix(in oklch, var(--surface), var(--bg) 68%);
  color: var(--fg);
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}

.seo-link-grid a:hover,
.seo-link-grid a:focus-visible {
  background: color-mix(in oklch, var(--accent), var(--surface) 90%);
}

.seo-link-index {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
}

.seo-link-copy {
  display: grid;
  gap: 8px;
}

.seo-link-copy strong {
  max-width: 18ch;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.55vw, 24px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
}

.seo-link-copy small {
  color: color-mix(in oklch, var(--fg), transparent 50%);
  font-size: 11px;
  line-height: 1.45;
}

.seo-link-arrow {
  position: absolute;
  top: 18px;
  right: 19px;
  color: color-mix(in oklch, var(--fg), transparent 62%);
  font-size: 16px;
  transition: color 180ms ease, transform 180ms ease;
}

.seo-link-grid a:hover .seo-link-arrow,
.seo-link-grid a:focus-visible .seo-link-arrow {
  color: var(--accent);
  transform: translate(2px, -2px);
}

.seo-aliases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0 0;
  color: color-mix(in oklch, var(--fg), transparent 48%);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.65;
  letter-spacing: .035em;
}

.seo-aliases span {
  color: var(--fg);
  font-weight: 600;
}

.seo-aliases em {
  color: color-mix(in oklch, var(--fg), transparent 60%);
  font-style: normal;
}

@media (max-width: 1100px) {
  .seo-link-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-link-grid a:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .seo-rail-heading {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .seo-rail-heading .section-kicker {
    margin-top: 0;
  }

  .seo-link-rail h2 {
    max-width: 11ch;
  }
}

@media (max-width: 560px) {
  .seo-link-rail {
    padding-right: 20px;
    padding-left: 20px;
  }

  .seo-link-grid {
    grid-template-columns: 1fr;
  }

  .seo-link-grid a,
  .seo-link-grid a:last-child {
    grid-column: auto;
    min-height: 142px;
  }
}