:root {
      color-scheme: light;
      --bg: oklch(98% 0.012 245);
      --surface: oklch(100% 0.004 245 / 0.88);
      --fg: oklch(18% 0.035 250);
      --muted: oklch(52% 0.028 250);
      --border: oklch(88% 0.018 245 / 0.72);
      --accent: oklch(61% 0.19 263);
      --accent-deep: oklch(48% 0.18 263);
      --ink: oklch(15% 0.032 255);
      --panel: oklch(21% 0.04 255);
      --success: oklch(62% 0.15 155);
      --warn: oklch(72% 0.14 82);
      --danger: oklch(60% 0.18 25);
      --glow: oklch(72% 0.15 250 / 0.36);
      --body-top: oklch(99% 0.006 245);
      --body-bottom: oklch(95% 0.018 248);
      --ambient: oklch(76% 0.13 255 / 0.24);
      --glass-bg: linear-gradient(135deg, oklch(100% 0 0 / 0.76), oklch(95% 0.018 252 / 0.48)), oklch(100% 0 0 / 0.44);
      --glass-bg-strong: linear-gradient(180deg, oklch(100% 0 0 / 0.78), oklch(96% 0.018 248 / 0.64));
      --glass-border: oklch(100% 0 0 / 0.58);
      --glass-highlight: oklch(100% 0 0 / 0.86);
      --glass-shadow: 0 24px 70px oklch(30% 0.06 250 / 0.16), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 oklch(72% 0.04 250 / 0.18);
      --glass-card: oklch(100% 0 0 / 0.68);
      --glass-chip: oklch(100% 0 0 / 0.52);
      --glass-menu: oklch(99% 0.006 245 / 0.96);
      --ui-subtle: oklch(96% 0.012 245);
      --focus-ring: oklch(61% 0.19 263 / 0.28);
      --control-ring: oklch(100% 0 0 / 0.7);
      --status-dot: oklch(62% 0.15 155);
      --theme-color: #f4f7fb;
      --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
      --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
      --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
      --radius: 24px;
      --max: 1180px;
      --ease-glass: cubic-bezier(0.2, 0.8, 0.2, 1);
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: oklch(15% 0.026 255);
      --surface: oklch(24% 0.035 255 / 0.72);
      --fg: oklch(94% 0.012 245);
      --muted: oklch(72% 0.025 250);
      --border: oklch(100% 0 0 / 0.12);
      --accent: oklch(70% 0.16 258);
      --accent-deep: oklch(60% 0.18 263);
      --ink: oklch(96% 0.008 245);
      --panel: oklch(18% 0.035 255);
      --success: oklch(72% 0.14 155);
      --warn: oklch(76% 0.13 86);
      --danger: oklch(68% 0.17 25);
      --glow: oklch(70% 0.15 258 / 0.22);
      --body-top: oklch(12% 0.028 255);
      --body-bottom: oklch(18% 0.035 255);
      --ambient: oklch(64% 0.15 260 / 0.18);
      --glass-bg: linear-gradient(135deg, oklch(100% 0 0 / 0.18), oklch(62% 0.08 255 / 0.12)), oklch(22% 0.035 255 / 0.48);
      --glass-bg-strong: linear-gradient(180deg, oklch(100% 0 0 / 0.16), oklch(35% 0.06 255 / 0.22)), oklch(18% 0.035 255 / 0.72);
      --glass-border: oklch(100% 0 0 / 0.2);
      --glass-highlight: oklch(100% 0 0 / 0.26);
      --glass-shadow: 0 28px 80px oklch(0% 0 0 / 0.36), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 oklch(100% 0 0 / 0.08);
      --glass-card: oklch(25% 0.036 255 / 0.58);
      --glass-chip: oklch(100% 0 0 / 0.1);
      --glass-menu: oklch(18% 0.035 255 / 0.94);
      --ui-subtle: oklch(28% 0.036 255 / 0.76);
      --focus-ring: oklch(70% 0.16 258 / 0.3);
      --control-ring: oklch(100% 0 0 / 0.18);
      --status-dot: oklch(72% 0.14 155);
      --theme-color: #141923;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 112px; }
    body {
      margin: 0;
      color: var(--fg);
      background:
        radial-gradient(circle at 78% 8%, var(--ambient), transparent 30rem),
        linear-gradient(180deg, var(--body-top), var(--bg) 44%, var(--body-bottom));
      font-family: var(--font-body);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    body.nav-open,
    body.modal-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    .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;
    }

    .site-header {
      position: sticky;
      top: 14px;
      z-index: 30;
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      pointer-events: none;
    }

    .site-header.is-scrolled {
      filter: drop-shadow(0 18px 44px oklch(24% 0.05 250 / 0.16));
    }

    .nav-wrap {
      position: relative;
      min-height: 66px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 8px 10px 8px 14px;
      border: 1px solid var(--glass-border);
      border-radius: 999px;
      background: var(--glass-bg);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(34px) saturate(1.5);
      -webkit-backdrop-filter: blur(34px) saturate(1.5);
      pointer-events: auto;
      transition: transform 220ms var(--ease-glass), box-shadow 220ms var(--ease-glass), background 220ms var(--ease-glass);
      animation: glassDrop 700ms var(--ease-spring) backwards;
    }

    .nav-wrap::before {
      content: "";
      position: absolute;
      inset: 1px 12px auto;
      height: 1px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--control-ring), transparent);
      opacity: 0.9;
      pointer-events: none;
    }

    .site-header.is-scrolled .nav-wrap { transform: translateY(2px) scale(0.992); }

    .brand {
      position: relative;
      z-index: 2;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 999px;
      padding: 4px 8px 4px 4px;
      font-family: var(--font-display);
      font-size: 18px;
      font-weight: 600;
      letter-spacing: -0.01em;
      cursor: pointer;
      transition: background 160ms ease, transform 160ms ease;
    }

    .brand:hover { background: var(--glass-chip); transform: translateY(-1px); }

    .brand img {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      box-shadow: 0 10px 24px oklch(45% 0.16 263 / 0.22);
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 520;
    }

    .nav-links a {
      min-height: 38px;
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 0 13px;
      transition: color 160ms ease, background 160ms ease, transform 160ms ease;
    }

    .nav-links a:hover { color: var(--fg); background: var(--glass-chip); transform: translateY(-1px); }
    .nav-links a:focus-visible,
    .language-toggle:focus-visible,
    .theme-toggle:focus-visible,
    .menu-button:focus-visible,
    .platform-option:focus-visible,
    .arch-option:focus-visible,
    .workflow-step:focus-visible {
      outline: 3px solid var(--focus-ring);
      outline-offset: 3px;
    }

    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .menu-button { display: none; }

    .language-toggle,
    .theme-toggle {
      min-height: 40px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid var(--glass-border);
      background: var(--glass-chip);
      color: var(--fg);
      font-size: 13px;
      font-weight: 590;
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    }

    .language-toggle:hover,
    .theme-toggle:hover { transform: translateY(-1px); border-color: oklch(78% 0.04 250); }

    .theme-toggle {
      width: 40px;
      min-width: 40px;
      padding: 0;
      display: inline-grid;
      place-items: center;
    }

    .theme-toggle svg {
      width: 18px;
      height: 18px;
      display: block;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .btn {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      border-radius: 999px;
      padding: 0 18px;
      border: 1px solid var(--border);
      color: var(--fg);
      background: var(--glass-chip);
      font-size: 14px;
      font-weight: 590;
      letter-spacing: 0.02em;
      cursor: pointer;
      transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
      white-space: nowrap;
    }

    .btn:hover { transform: translateY(-1px); border-color: oklch(78% 0.04 250); }
    .btn[data-availability="planned"] { cursor: pointer; }
    .btn:active,
    .language-toggle:active,
    .theme-toggle:active,
    .platform-option:active,
    .arch-option:active { transform: translateY(1px) scale(0.985); }
    .btn.is-pressed { animation: pressPulse 360ms var(--ease-spring); }
    .btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
    .btn.primary {
      color: white;
      background: linear-gradient(180deg, var(--accent), var(--accent-deep));
      border-color: transparent;
      box-shadow: 0 14px 30px oklch(54% 0.19 263 / 0.25), inset 0 1px 0 oklch(100% 0 0 / 0.22);
    }

    .btn.ghost { background: transparent; }
    .github-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .github-icon {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      display: inline-block;
      background: currentColor;
      -webkit-mask: url("assets/github.svg") center / contain no-repeat;
      mask: url("assets/github.svg") center / contain no-repeat;
    }

    .btn .github-icon { width: 17px; height: 17px; }

    main { overflow: hidden; }
    .section {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 96px 0;
    }

    .hero {
      width: min(1280px, calc(100% - 40px));
      min-height: calc(100svh - 80px);
      margin: 0 auto;
      padding: 124px 0 54px;
      display: grid;
      grid-template-columns: minmax(0, 0.88fr) minmax(520px, 1.12fr);
      align-items: center;
      gap: clamp(36px, 5vw, 76px);
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--accent-deep);
      font-family: var(--font-mono);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1, h2, h3 {
      margin: 0;
      font-family: var(--font-display);
      color: var(--fg);
      text-wrap: balance;
    }

    h1 {
      font-size: clamp(64px, 9vw, 132px);
      line-height: 0.9;
      letter-spacing: -0.03em;
      font-weight: 650;
    }

    .tagline {
      margin: 24px 0 0;
      max-width: 13ch;
      font-family: var(--font-display);
      font-size: clamp(28px, 3.1vw, 48px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      font-weight: 620;
    }

    .hero-copy {
      margin: 22px 0 0;
      max-width: 58ch;
      color: var(--muted);
      font-size: clamp(16px, 1.3vw, 19px);
      line-height: 1.65;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: 30px 0 0;
    }

    .trust-line {
      margin-top: 22px;
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.5;
    }

    .trust-line span {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 5px oklch(62% 0.15 155 / 0.12);
    }

    .hero-visual {
      position: relative;
      min-width: 0;
      isolation: isolate;
      animation: floatIn 780ms var(--ease-spring) 120ms both;
    }

    .icon-orb {
      position: absolute;
      right: -28px;
      top: -34px;
      width: clamp(136px, 17vw, 230px);
      height: clamp(136px, 17vw, 230px);
      border-radius: 42px;
      overflow: hidden;
      z-index: 3;
      box-shadow: 0 28px 70px oklch(42% 0.18 263 / 0.26);
      transform: rotate(3deg);
      animation: iconSettle 900ms var(--ease-spring) 220ms both;
    }

    .icon-orb img { width: 100%; height: 100%; object-fit: cover; }

    .app-window {
      position: relative;
      overflow: hidden;
      border: 1px solid var(--glass-border);
      border-radius: 28px;
      background: var(--glass-bg-strong);
      box-shadow: 0 38px 90px oklch(28% 0.06 250 / 0.22), inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(24px) saturate(1.35);
      -webkit-backdrop-filter: blur(24px) saturate(1.35);
      transition: transform 260ms var(--ease-glass), box-shadow 260ms var(--ease-glass);
    }

    .app-window::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, oklch(100% 0 0 / 0.16), transparent 34%, oklch(80% 0.1 260 / 0.08) 72%, transparent);
      pointer-events: none;
      z-index: 1;
    }

    .app-window > * { position: relative; z-index: 2; }

    .app-window:hover { transform: translateY(-4px); box-shadow: 0 44px 105px oklch(28% 0.06 250 / 0.26), inset 0 1px 0 var(--glass-highlight); }

    .window-bar {
      height: 52px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      border-bottom: 1px solid var(--border);
      background: var(--glass-chip);
    }

    .traffic { display: flex; gap: 8px; }
    .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
    .traffic i:nth-child(1) { background: oklch(68% 0.18 30); }
    .traffic i:nth-child(2) { background: oklch(78% 0.16 90); }
    .traffic i:nth-child(3) { background: oklch(70% 0.15 150); }

    .window-title {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .workbench {
      display: grid;
      grid-template-columns: 180px 1fr 230px;
      min-height: 520px;
      background: var(--panel);
      color: oklch(95% 0.01 245);
    }

    .sidebar, .inspector {
      padding: 18px;
      background: oklch(18% 0.035 255);
      border-right: 1px solid oklch(100% 0 0 / 0.08);
    }

    .inspector { border-right: 0; border-left: 1px solid oklch(100% 0 0 / 0.08); }
    .side-label {
      margin-bottom: 14px;
      color: oklch(78% 0.04 250);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .host-list { display: grid; gap: 8px; }
    .host {
      padding: 10px 11px;
      border-radius: 12px;
      background: oklch(100% 0 0 / 0.04);
      color: oklch(91% 0.012 250);
      font-size: 13px;
      transition: transform 180ms ease, background 180ms ease;
    }

    .host.active { background: oklch(61% 0.19 263 / 0.22); color: white; }
    .app-window:hover .host.active { transform: translateX(3px); }
    .terminal-pane { padding: 18px; min-width: 0; }
    .tabs { display: flex; gap: 8px; margin-bottom: 16px; }
    .tab {
      padding: 8px 12px;
      border-radius: 10px;
      color: oklch(86% 0.018 250);
      background: oklch(100% 0 0 / 0.04);
      font-family: var(--font-mono);
      font-size: 12px;
    }

    .tab.active { background: oklch(100% 0 0 / 0.11); }
    .terminal {
      height: 286px;
      overflow: hidden;
      border-radius: 18px;
      padding: 18px;
      background: oklch(12% 0.026 255);
      border: 1px solid oklch(100% 0 0 / 0.08);
      font-family: var(--font-mono);
      font-size: 13px;
      line-height: 1.65;
      color: oklch(86% 0.05 170);
    }

    .terminal .muted { color: oklch(72% 0.035 250); }
    .terminal .warn { color: var(--warn); }
    .terminal .accent { color: oklch(78% 0.12 260); }

    .queue {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .mini-card {
      padding: 12px;
      border-radius: 14px;
      background: oklch(100% 0 0 / 0.055);
      border: 1px solid oklch(100% 0 0 / 0.07);
      min-height: 86px;
    }

    .mini-card strong { display: block; font-size: 13px; color: white; }
    .mini-card span { display: block; margin-top: 6px; color: oklch(78% 0.024 250); font-size: 12px; line-height: 1.35; }

    .metric { margin-bottom: 16px; }
    .metric-row { display: flex; justify-content: space-between; color: oklch(88% 0.018 250); font-size: 13px; }
    .meter { margin-top: 7px; height: 7px; border-radius: 999px; background: oklch(100% 0 0 / 0.08); overflow: hidden; }
    .meter b { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; animation: meterLoad 900ms var(--ease-spring) both; }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 0.82fr) minmax(280px, 0.5fr);
      align-items: end;
      gap: 36px;
      margin-bottom: 38px;
    }

    h2 {
      font-size: clamp(34px, 4.5vw, 62px);
      line-height: 1.02;
      letter-spacing: -0.025em;
      font-weight: 650;
    }

    .section-lead {
      margin: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.65;
      max-width: 60ch;
    }

    .workflow-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 1px;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: var(--border);
      box-shadow: 0 24px 70px oklch(30% 0.05 250 / 0.08);
    }

    .workflow-step {
      position: relative;
      min-height: 230px;
      padding: 24px;
      background: var(--glass-card);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 220ms var(--ease-glass), background 220ms var(--ease-glass), box-shadow 220ms var(--ease-glass);
    }

    .workflow-step::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, var(--glass-highlight), transparent 42%);
      opacity: 0;
      transition: opacity 220ms var(--ease-glass);
      pointer-events: none;
    }

    .workflow-step:hover,
    .workflow-step:focus-visible { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--glass-highlight); }
    .workflow-step:hover::after,
    .workflow-step:focus-visible::after,
    .workflow-step.is-active::after { opacity: 0.48; }

    .step-index {
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
    }

    .workflow-step h3 {
      margin-top: 42px;
      font-size: 24px;
      line-height: 1.08;
      letter-spacing: -0.015em;
      font-weight: 620;
    }

    .workflow-step p {
      margin: 16px 0 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.55;
    }

    .workflow-step.is-active { background: linear-gradient(180deg, color-mix(in oklch, var(--glass-card), white 24%), color-mix(in oklch, var(--accent), var(--glass-card) 84%)); }

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

    .capability-card {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      padding: 24px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: var(--glass-card);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 220ms var(--ease-glass), border-color 220ms var(--ease-glass), box-shadow 220ms var(--ease-glass), background 220ms var(--ease-glass);
    }

    .capability-card::before,
    .beta-card::before,
    .download-card::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 38%;
      border-radius: inherit;
      background: linear-gradient(180deg, var(--glass-highlight), transparent);
      opacity: 0.34;
      pointer-events: none;
    }

    .capability-card > *,
    .beta-card > *,
    .download-card > * { position: relative; z-index: 1; }

    .capability-card:hover,
    .beta-card:hover,
    .proof-item:hover {
      transform: translateY(-4px);
      border-color: color-mix(in oklch, var(--accent), var(--border) 70%);
      box-shadow: 0 22px 60px oklch(28% 0.06 250 / 0.12), inset 0 1px 0 var(--glass-highlight);
    }

    .capability-card h3 { font-size: 22px; line-height: 1.1; letter-spacing: -0.015em; }
    .capability-card p { margin: 14px 0 0; color: var(--muted); line-height: 1.58; font-size: 15px; }
    .ui-cue {
      margin-top: 22px;
      padding: 14px;
      border-radius: 15px;
      background: var(--ui-subtle);
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.5;
    }

    .why-panel {
      display: grid;
      grid-template-columns: 0.92fr 1.08fr;
      gap: 34px;
      align-items: stretch;
      padding: clamp(24px, 4vw, 42px);
      border: 1px solid oklch(100% 0 0 / 0.08);
      border-radius: 30px;
      background: linear-gradient(135deg, oklch(17% 0.04 255), oklch(23% 0.06 258));
      color: white;
      box-shadow: 0 32px 90px oklch(20% 0.05 250 / 0.22);
    }

    .why-panel h2 { color: white; }
    .why-panel .section-lead { color: oklch(82% 0.025 250); }
    .proof-list { display: grid; gap: 12px; }
    .proof-item {
      padding: 18px;
      border-radius: 18px;
      background: oklch(100% 0 0 / 0.055);
      border: 1px solid oklch(100% 0 0 / 0.08);
      color: oklch(90% 0.012 250);
      line-height: 1.55;
      transition: transform 220ms var(--ease-glass), border-color 220ms var(--ease-glass), background 220ms var(--ease-glass);
    }

    .beta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 16px;
    }

    .beta-card {
      position: relative;
      overflow: hidden;
      padding: 24px;
      border-radius: 22px;
      border: 1px solid var(--border);
      background: var(--glass-card);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(18px) saturate(1.18);
      -webkit-backdrop-filter: blur(18px) saturate(1.18);
      transition: transform 220ms var(--ease-glass), border-color 220ms var(--ease-glass), box-shadow 220ms var(--ease-glass);
    }

    .beta-card small {
      display: block;
      margin-bottom: 14px;
      color: var(--muted);
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .beta-card strong { display: block; font-size: 24px; letter-spacing: -0.015em; }
    .beta-card p { margin: 12px 0 0; color: var(--muted); line-height: 1.58; }

    .final-cta {
      margin-bottom: 72px;
      padding: clamp(28px, 5vw, 58px);
      border-radius: 34px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at 84% 18%, var(--glow), transparent 28rem),
        var(--glass-card);
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      backdrop-filter: blur(22px) saturate(1.25);
      -webkit-backdrop-filter: blur(22px) saturate(1.25);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: center;
    }

    .final-cta h2 { font-size: clamp(32px, 4vw, 54px); }
    .final-cta p { margin: 16px 0 0; color: var(--muted); font-size: 17px; line-height: 1.62; max-width: 62ch; }
    .download-console {
      width: min(430px, 100%);
      padding: 16px;
      border-radius: 28px;
      border: 1px solid var(--glass-border);
      background: var(--glass-bg-strong);
      box-shadow: var(--glass-shadow);
      backdrop-filter: blur(26px) saturate(1.35);
      -webkit-backdrop-filter: blur(26px) saturate(1.35);
      transition: transform 240ms var(--ease-glass), box-shadow 240ms var(--ease-glass);
    }

    .download-console:hover { transform: translateY(-2px); }

    .download-console.is-updating { animation: glassPulse 420ms var(--ease-spring); }

    .detected-platform {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.45;
    }

    .detected-platform strong { display: block; color: var(--fg); font-size: 15px; letter-spacing: -0.01em; }
    .platform-picker {
      margin: 16px 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .platform-option {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: var(--glass-chip);
      color: var(--muted);
      font-size: 13px;
      font-weight: 590;
      cursor: pointer;
      transition: transform 160ms ease, color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
    }

    .platform-option::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--status-dot);
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--status-dot), transparent 84%);
    }

    .platform-option[data-platform="windows"]::before,
    .platform-option[data-platform="linux"]::before {
      background: var(--warn);
      box-shadow: 0 0 0 4px color-mix(in oklch, var(--warn), transparent 86%);
    }

    .platform-option:hover { transform: translateY(-1px); color: var(--fg); border-color: oklch(78% 0.04 250); }

    .platform-option.is-selected {
      color: white;
      border-color: transparent;
      background: linear-gradient(180deg, var(--accent), var(--accent-deep));
      box-shadow: 0 12px 24px oklch(54% 0.19 263 / 0.22);
    }

    .download-card {
      position: relative;
      overflow: hidden;
      padding: 16px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: var(--glass-card);
      transition: border-color 180ms ease, background 180ms ease;
    }

    .download-card.is-planned {
      border-color: color-mix(in oklch, var(--warn), var(--border) 58%);
      background: color-mix(in oklch, var(--glass-card), var(--warn) 7%);
    }

    .download-card::after {
      content: "";
      position: absolute;
      inset: auto 16px 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--control-ring), transparent);
      opacity: 0.72;
      pointer-events: none;
    }

    .download-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
    }

    .download-row strong { display: block; font-size: 19px; letter-spacing: -0.015em; }
    .download-row span { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.45; }
    .price-pill {
      flex: 0 0 auto;
      padding: 7px 10px;
      border-radius: 999px;
      background: var(--ui-subtle);
      color: var(--accent-deep);
      font-size: 12px;
      font-weight: 650;
      letter-spacing: 0.02em;
    }

    .arch-picker {
      margin-top: 13px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .arch-option {
      min-height: 34px;
      padding: 0 11px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      cursor: pointer;
      transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    .arch-option:hover { transform: translateY(-1px); color: var(--fg); border-color: oklch(78% 0.04 250); }

    .arch-option.is-selected { color: var(--fg); background: var(--glass-chip); border-color: oklch(78% 0.04 250); }
    .download-console .btn { width: 100%; margin-top: 14px; }
    .download-console .btn[data-availability="planned"] { box-shadow: none; background: var(--ui-subtle); color: var(--fg); border-color: color-mix(in oklch, var(--warn), var(--border) 55%); }
    .footer {
      width: min(var(--max), calc(100% - 40px));
      margin: 0 auto;
      padding: 28px 0 42px;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      border-top: 1px solid var(--border);
      font-size: 13px;
    }

    .footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
    .footer a { text-decoration: underline; text-underline-offset: 4px; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 24px;
      background: oklch(10% 0.02 255 / 0.36);
      backdrop-filter: blur(24px) saturate(1.28);
      -webkit-backdrop-filter: blur(24px) saturate(1.28);
      opacity: 0;
      pointer-events: none;
      transition: opacity 220ms var(--ease-glass);
    }

    .modal-backdrop.is-open {
      opacity: 1;
      pointer-events: auto;
    }

    .release-modal {
      position: relative;
      width: min(680px, 100%);
      max-height: min(760px, calc(100vh - 48px));
      overflow: auto;
      padding: 24px;
      border: 1px solid var(--glass-border);
      border-radius: 30px;
      background: var(--glass-bg-strong);
      box-shadow: 0 36px 120px oklch(0% 0 0 / 0.28), inset 0 1px 0 var(--glass-highlight);
      color: var(--fg);
      transform: translateY(18px) scale(0.98);
      transition: transform 260ms var(--ease-spring);
    }

    .modal-backdrop.is-open .release-modal { transform: translateY(0) scale(1); }

    .release-modal::before {
      content: "";
      position: absolute;
      inset: 1px 18px auto;
      height: 1px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--control-ring), transparent);
      pointer-events: none;
    }

    .modal-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }

    .modal-head h2 {
      margin: 6px 0 0;
      font-size: clamp(28px, 4vw, 42px);
      line-height: 1.05;
      letter-spacing: -0.025em;
    }

    .modal-close {
      width: 42px;
      height: 42px;
      flex: 0 0 auto;
      display: inline-grid;
      place-items: center;
      border-radius: 999px;
      border: 1px solid var(--glass-border);
      background: var(--glass-chip);
      color: var(--fg);
      cursor: pointer;
      box-shadow: inset 0 1px 0 var(--glass-highlight);
      transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
    }

    .modal-close:hover { transform: translateY(-1px); border-color: oklch(78% 0.04 250); }
    .modal-close:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

    .release-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
    }

    .release-note-section {
      padding: 16px;
      border: 1px solid var(--border);
      border-radius: 18px;
      background: var(--glass-card);
    }

    .release-note-section h3,
    .release-note-section h4 {
      margin: 0;
      color: var(--fg);
      font-size: 16px;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }

    .release-note-section h4 {
      margin-top: 14px;
      color: var(--muted);
      font-size: 13px;
      font-family: var(--font-mono);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .release-note-section p,
    .release-note-section li {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.58;
    }

    .release-note-section p { margin: 10px 0 0; }
    .release-note-section ul {
      margin: 10px 0 0;
      padding-left: 1.1rem;
    }

    .release-note-section li + li { margin-top: 7px; }
    .release-note-section li ul { margin-top: 7px; }
    .release-modal code {
      font-family: var(--font-mono);
      font-size: 0.92em;
      color: var(--accent-deep);
      overflow-wrap: anywhere;
    }
    .modal-foot { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }

    [data-motion="reveal"] {
      opacity: 0;
      transform: translateY(24px) scale(0.985);
      transition: opacity 640ms var(--ease-spring), transform 640ms var(--ease-spring);
      transition-delay: var(--motion-delay, 0ms);
    }

    [data-motion="reveal"].is-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }

    @keyframes glassDrop {
      from { opacity: 0; transform: translateY(-18px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes floatIn {
      from { opacity: 0; transform: translateY(28px) scale(0.97); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes iconSettle {
      from { opacity: 0; transform: translateY(-18px) rotate(-4deg) scale(0.94); }
      to { opacity: 1; transform: translateY(0) rotate(3deg) scale(1); }
    }

    @keyframes meterLoad {
      from { transform: scaleX(0.18); }
      to { transform: scaleX(1); }
    }

    @keyframes glassPulse {
      0% { transform: translateY(0) scale(1); }
      42% { transform: translateY(-3px) scale(1.012); box-shadow: 0 34px 82px oklch(54% 0.16 263 / 0.18), var(--glass-shadow); }
      100% { transform: translateY(0) scale(1); }
    }

    @keyframes pressPulse {
      0% { transform: scale(1); }
      45% { transform: scale(0.975); }
      100% { transform: scale(1); }
    }

    @media (max-width: 1080px) {
      .hero { grid-template-columns: 1fr; padding-top: 92px; min-height: auto; }
      .hero-copy { max-width: 66ch; }
      .tagline { max-width: 15ch; }
      .icon-orb { right: 20px; top: -24px; }
      .workflow-grid { grid-template-columns: 1fr; }
      .workflow-step { min-height: auto; gap: 26px; }
      .workflow-step h3 { margin-top: 0; }
      .capability-grid { grid-template-columns: repeat(2, 1fr); }
      .section-head, .why-panel, .final-cta { grid-template-columns: 1fr; }
      .beta-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      .site-header { top: 10px; width: min(100% - 24px, var(--max)); }
      .nav-wrap { min-height: 62px; border-radius: 28px; }
      .menu-button {
        display: inline-flex;
        width: 44px;
        height: 44px;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--glass-chip);
        color: var(--fg);
      }

      .nav-links {
        position: fixed;
        inset: 76px 12px auto;
        display: none;
        padding: 16px;
        border: 1px solid var(--border);
        border-radius: 22px;
        background: var(--glass-menu);
        box-shadow: var(--glass-shadow);
        backdrop-filter: blur(28px) saturate(1.35);
        -webkit-backdrop-filter: blur(28px) saturate(1.35);
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
      }

      .nav-links a { padding: 13px 10px; }
      body.nav-open .nav-links { display: flex; }
      .nav-actions .primary { display: none; }
      .language-toggle { min-width: 52px; }
      .theme-toggle { width: 40px; min-width: 40px; padding: 0; }
      .hero { width: min(100% - 28px, var(--max)); padding: 88px 0 34px; gap: 38px; }
      h1 { font-size: clamp(58px, 20vw, 82px); }
      .tagline { font-size: 29px; }
      .hero-actions { align-items: stretch; }
      .hero-actions .btn { flex: 1 1 150px; }
      .icon-orb { width: 108px; height: 108px; border-radius: 26px; right: 12px; top: -20px; }
      .workbench { grid-template-columns: 1fr; min-height: 0; }
      .sidebar, .inspector { display: none; }
      .terminal { height: 240px; font-size: 12px; }
      .queue { grid-template-columns: 1fr; }
      .section { width: min(100% - 28px, var(--max)); padding: 70px 0; }
      .capability-grid { grid-template-columns: 1fr; }
      .capability-card { min-height: 220px; }
      .footer { width: min(100% - 28px, var(--max)); flex-direction: column; align-items: flex-start; }
      .platform-picker { grid-template-columns: 1fr; }
      .download-row { flex-direction: column; align-items: flex-start; gap: 12px; }
      .download-console .btn { white-space: normal; text-align: center; }
      .release-modal { padding: 20px; border-radius: 26px; }
      .modal-head { align-items: flex-start; }
      .release-list li { grid-template-columns: 1fr; }
      .release-list .status-dot { margin-top: 0; }
    }

    @media (max-width: 420px) {
      .site-header { width: min(100% - 18px, var(--max)); }
      .nav-wrap { gap: 8px; padding: 7px 8px 7px 10px; }
      .brand { gap: 8px; font-size: 0; }
      .brand img { width: 32px; height: 32px; }
      .nav-actions { gap: 7px; }
      .language-toggle { min-width: 46px; padding: 0 10px; }
      .theme-toggle { width: 38px; min-width: 38px; }
      .hero-actions .btn { width: 100%; flex-basis: 100%; white-space: normal; text-align: center; }
      .trust-line { align-items: flex-start; flex-direction: column; gap: 8px; }
      .download-console { padding: 14px; border-radius: 24px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
      [data-motion="reveal"] { opacity: 1 !important; transform: none !important; }
    }