:root {
        --bg-0: #121013;
        --bg-1: #181619;
        --bg-2: #1f1c1f;
        --bg-3: #2a2528;
        --bg-hover: #241f22;
        --bg-inset: #0d0b0d;
        --bg-surface: #1a1719;

        --accent: #145aff;
        --accent-dim: #145aff1c;
        --accent-glow: #145aff42;
        --accent-bright: #79a6ff;
        --accent-2: #305cde;
        --accent-deep: #0c44d9;
        --accent-sheen: #b6cbfd;

        /* glossy accent gradients */
        --grad-accent: linear-gradient(135deg, #4f86ff 0%, #145aff 46%, #305cde 74%, #0b41d4 100%);
        --grad-accent-soft: linear-gradient(135deg, #6f9bff, #305cde 70%);
        --grad-text: linear-gradient(118deg, #aecbff 0%, #6f9bff 52%, #d2e0ff 100%);
        --gloss-top: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%);

        --blue: #8aa4c4;
        --violet: #a197c4;
        --peach: #d4a373;
        --green: #7ec09a;
        --green-dim: #7ec09a17;

        --text-0: #ebe6e6;
        --text-1: #a8a0a2;
        --text-2: #74696c;
        --text-3: #4e4547;

        --border-0: #fff5f50a;
        --border-1: #fff5f512;
        --border-2: #fff5f51f;
        --border-accent: #145aff4d;

        --shadow-sm: 0 1px 2px #0006;
        --shadow-md: 0 4px 12px #00000059, 0 1px 2px #0006;
        --shadow-lg: 0 18px 40px -16px #0000008c;
        --shadow-rim: inset 0 1px 0 #ffffff08;
        --bento-rim: 0 1px 0 0 color-mix(in srgb, var(--text-0) 4%, transparent) inset;
        --bento-rim-strong: 0 1px 0 0 color-mix(in srgb, var(--text-0) 6%, transparent) inset;
        --shadow-bento: var(--bento-rim), 0 8px 24px -14px #00000047;
        --shadow-bento-hover: var(--bento-rim-strong), 0 18px 42px -16px #0000006b;

        --aurora: radial-gradient(60% 80% at 20% 10%, #145aff1f, transparent 60%),
          radial-gradient(50% 60% at 85% 20%, #b6cbfd14, transparent 65%),
          radial-gradient(40% 50% at 50% 110%, #145aff0d, transparent 70%);

        --font-sans: "Onest", -apple-system, system-ui, sans-serif;
        --font-display: "Unbounded", "Onest", -apple-system, system-ui, sans-serif;
        --font-heading: "Onest", -apple-system, system-ui, sans-serif;
        --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

        --sp-1: 4px;
        --sp-2: 8px;
        --sp-3: 12px;
        --sp-4: 16px;
        --sp-5: 24px;
        --sp-6: 32px;
        --sp-8: 48px;
        --sp-10: 64px;
        --sp-12: 96px;
        --sp-16: 128px;

        --radius-sm: 4px;
        --radius: 6px;
        --radius-lg: 8px;
        --radius-xl: 10px;
        --radius-bento: 18px;
        --radius-pill: 999px;

        --nav-height: 64px;
        --max-w: 1100px;
        --max-w-text: 640px;

        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);
        --dur: 0.22s;
        --dur-lg: 0.4s;
      }

      * {
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        overflow-x: hidden;
      }

      body {
        margin: 0;
        font-family: var(--font-sans);
        font-size: 15px;
        line-height: 1.5;
        color: var(--text-0);
        background: var(--bg-0);
        font-feature-settings: "ss03", "cv11";
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        overflow-x: hidden;
        position: relative;
      }

      /* aurora background wash */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--aurora);
        pointer-events: none;
        z-index: 0;
      }

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

      h1,
      h2,
      h3,
      p {
        margin-top: 0;
      }

      .container {
        width: min(var(--max-w), calc(100% - 48px));
        margin: 0 auto;
        position: relative;
        z-index: 1;
      }

      /* ── Header ─────────────────────────────────────────── */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        background: color-mix(in srgb, var(--bg-0) 78%, transparent);
        border-bottom: 1px solid var(--border-1);
        backdrop-filter: blur(14px);
        isolation: isolate;
      }

      .nav {
        min-height: var(--nav-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 9px;
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.02em;
        color: var(--text-0);
      }

      .logo-mark {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: var(--grad-accent);
        color: #fff;
        font-family: var(--font-mono);
        font-weight: 700;
        font-size: 15px;
        box-shadow: 0 6px 18px -8px var(--accent-glow), var(--shadow-rim);
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-1);
      }

      .nav-links a {
        padding: 8px 14px;
        border-radius: var(--radius-pill);
        font-size: 14px;
        font-weight: 500;
        transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
      }

      .nav-links a:hover {
        background: var(--bg-2);
        color: var(--text-0);
      }

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

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-pill);
        min-height: 42px;
        padding: 11px 20px;
        font-family: var(--font-sans);
        font-weight: 600;
        font-size: 14px;
        line-height: 1;
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out),
          background-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
      }

      .btn:hover {
        transform: translateY(-1px);
      }

      .btn-ghost {
        color: var(--text-1);
        background: transparent;
        border: 1px solid var(--border-2);
      }

      .btn-ghost:hover {
        color: var(--text-0);
        background: var(--bg-2);
      }

      .btn-filled {
        position: relative;
        color: #fff;
        border: 1px solid transparent;
        background: var(--grad-accent);
        box-shadow: 0 14px 32px -16px var(--accent-glow), 0 1px 0 rgba(255, 255, 255, 0.25) inset,
          0 -10px 20px -12px rgba(0, 0, 0, 0.4) inset;
        overflow: hidden;
      }

      .btn-filled::after {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--gloss-top);
        pointer-events: none;
      }

      .btn-filled:hover {
        box-shadow: 0 20px 44px -14px var(--accent-glow), 0 1px 0 rgba(255, 255, 255, 0.3) inset,
          0 -10px 20px -12px rgba(0, 0, 0, 0.4) inset;
      }

      .btn-hero {
        min-height: 52px;
        padding: 16px 30px;
        font-size: 15px;
        border-radius: var(--radius-pill);
      }

      .btn.large {
        min-height: 52px;
        padding-inline: 30px;
        font-size: 15px;
      }

      /* ── Hero ───────────────────────────────────────────── */
      .hero {
        padding: clamp(64px, 9vh, 120px) 0 56px;
        overflow: hidden;
      }

      .hero-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .trust-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-bottom: 28px;
        padding: 6px 6px 6px 14px;
        border-radius: var(--radius-pill);
        border: 1px solid var(--border-2);
        background: var(--bg-1);
        color: var(--text-1);
        font-size: 13px;
        font-weight: 500;
      }

      .trust-icon {
        display: inline-grid;
        place-items: center;
        height: 24px;
        padding: 0 10px;
        border-radius: var(--radius-pill);
        color: #fff;
        background: var(--grad-accent);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset;
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: -0.02em;
      }

      h1 {
        max-width: 17ch;
        margin: 0 auto 22px;
        font-family: var(--font-display);
        font-size: clamp(2.6rem, 7vw, 5.4rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.025em;
        color: var(--text-0);
      }

      h1 .accent {
        background: var(--grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .hero-copy {
        max-width: var(--max-w-text);
        margin: 0 auto 34px;
        color: var(--text-1);
        font-size: clamp(1.05rem, 1.5vw, 1.2rem);
        line-height: 1.55;
      }

      .hero-actions {
        display: flex;
        justify-content: center;
        gap: 14px;
        margin-bottom: 64px;
        flex-wrap: wrap;
      }

      .hero-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--text-1);
        font-weight: 500;
        font-size: 14px;
        padding: 11px 4px;
        transition: color var(--dur) var(--ease-out);
      }

      .hero-link:hover {
        color: var(--accent-bright);
      }

      /* ── Console preview ────────────────────────────────── */
      .hero-console {
        position: relative;
        width: min(1000px, 100%);
        padding: 10px;
        border-radius: calc(var(--radius-bento) + 12px);
        background: linear-gradient(180deg, #1d1a1e 0%, var(--bg-1) 42%);
        border: 1px solid var(--border-2);
        box-shadow: var(--shadow-lg), 0 0 120px -40px var(--accent-glow),
          0 1px 0 rgba(255, 255, 255, 0.05) inset;
      }

      .hero-console::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(150deg, var(--accent-glow), transparent 38%, transparent 66%, color-mix(in srgb, var(--accent-2) 28%, transparent));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
      }

      .console-topbar {
        display: flex;
        align-items: center;
        gap: 7px;
        height: 44px;
        padding: 0 16px;
        color: var(--text-2);
        font-family: var(--font-mono);
        font-size: 12px;
        text-align: left;
      }

      .dot {
        width: 11px;
        height: 11px;
        border-radius: 50%;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 1px 1px rgba(255, 255, 255, 0.18) inset;
      }
      .dot-red {
        background: radial-gradient(circle at 32% 28%, #ff8a7a, #e0594a);
      }
      .dot-amber {
        background: radial-gradient(circle at 32% 28%, #ffd089, #e0a14d);
      }
      .dot-green {
        background: radial-gradient(circle at 32% 28%, #a6f0c2, #54bd84);
      }

      .console-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-left: 12px;
        padding: 5px 14px;
        border-radius: var(--radius-pill);
        background: var(--bg-inset);
        border: 1px solid var(--border-1);
        color: var(--text-2);
        font-size: 12px;
        letter-spacing: -0.01em;
      }

      .console-title::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-bright);
        box-shadow: 0 0 8px var(--accent);
      }

      .console-title b {
        color: var(--accent-bright);
        font-weight: 600;
      }

      .dashboard-grid {
        display: grid;
        grid-template-columns: 180px minmax(0, 1fr) 210px;
        gap: 10px;
        min-height: 420px;
        padding: 10px;
        border-radius: var(--radius-bento);
        background: var(--bg-inset);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
      }

      .glass-card {
        background: var(--bg-1);
        border: 1px solid var(--border-1);
        border-radius: var(--radius-bento);
        box-shadow: var(--shadow-bento);
      }

      .sidebar-card {
        padding: 16px 12px;
        text-align: left;
      }

      .eyebrow,
      .side-title,
      .kanban-title {
        color: var(--text-2);
        font-family: var(--font-mono);
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 500;
      }

      .side-title {
        padding: 0 10px 12px;
      }

      .side-item {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 34px;
        padding: 0 12px;
        border-radius: var(--radius-lg);
        color: var(--text-1);
        font-size: 14px;
        transition: color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
      }

      .side-item:hover {
        background: var(--bg-2);
        color: var(--text-0);
      }

      .side-item svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        opacity: 0.8;
      }

      .side-item.active {
        background: var(--accent-dim);
        color: var(--accent-bright);
        font-weight: 500;
      }

      .side-item.active svg {
        opacity: 1;
      }

      .pipeline-card,
      .metrics-card {
        padding: 22px;
        text-align: left;
      }

      .panel-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
      }

      .panel-heading h2,
      .panel-heading h3 {
        margin: 8px 0 0;
        font-family: var(--font-display);
        color: var(--text-0);
        font-size: 20px;
        line-height: 1.15;
        letter-spacing: -0.02em;
        font-weight: 700;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: var(--radius-pill);
        padding: 4px 11px;
        font-size: 12px;
        line-height: 1.2;
        font-weight: 500;
        font-family: var(--font-mono);
      }

      .status-badge.active {
        color: var(--green);
        background: var(--green-dim);
      }

      .status-badge.active::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        box-shadow: 0 0 8px var(--green);
      }

      .status-badge.prospecting {
        color: var(--accent-bright);
        background: var(--accent-dim);
      }

      .route-list {
        display: grid;
        gap: 9px;
      }

      .route-row {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-height: 64px;
        padding: 12px 14px;
        background: var(--bg-2);
        border: 1px solid var(--border-0);
        border-radius: var(--radius-lg);
        transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
          transform var(--dur) var(--ease-out);
      }

      .route-row:hover {
        border-color: var(--border-accent);
        background: var(--bg-hover);
        transform: translateX(2px);
      }

      .route-row:first-child {
        border-color: var(--border-accent);
        background: linear-gradient(100deg, var(--accent-dim), transparent 70%), var(--bg-2);
      }

      .route-row:first-child::before {
        content: "";
        position: absolute;
        left: 0;
        top: 14px;
        bottom: 14px;
        width: 3px;
        border-radius: var(--radius-pill);
        background: var(--grad-accent);
        box-shadow: 0 0 12px var(--accent-glow);
      }

      .provider-logo {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        color: #fff;
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 700;
        box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.18) inset;
      }

      .provider-logo svg {
        width: 19px;
        height: 19px;
      }

      .provider-logo.blue {
        background: linear-gradient(150deg, #2f8f6f, #10a37f 70%);
        color: #eafff7;
      }
      .provider-logo.coral {
        background: linear-gradient(150deg, #f0815a, #d97757 70%);
        color: #fff;
      }
      .provider-logo.emerald {
        background: linear-gradient(150deg, #5b9bff, #2f6df0 70%);
        color: #fff;
      }

      .route-row div:nth-child(2) {
        flex: 1;
      }

      .route-row strong,
      .compact-card strong {
        display: block;
        color: var(--text-0);
        font-size: 14px;
        font-weight: 600;
      }

      .route-row span,
      .compact-card span {
        color: var(--text-2);
        font-size: 13px;
      }

      code,
      .metric-value {
        font-family: var(--font-mono);
        letter-spacing: -0.02em;
      }

      .route-row code {
        color: var(--text-1);
        font-size: 12px;
      }

      .metrics-card {
        display: flex;
        flex-direction: column;
      }

      .metric-value {
        margin: 14px 0 4px;
        background: var(--grad-text);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-size: 38px;
        line-height: 1;
        font-weight: 700;
      }

      .metrics-card p {
        color: var(--text-2);
        font-size: 13px;
        margin: 0;
      }

      .mini-chart {
        display: flex;
        align-items: end;
        gap: 6px;
        height: 140px;
        margin-top: auto;
        padding-top: 28px;
      }

      .mini-chart span {
        position: relative;
        flex: 1;
        min-width: 8px;
        border-radius: var(--radius-pill) var(--radius-pill) 3px 3px;
        background: linear-gradient(180deg, var(--accent-bright), var(--accent) 55%, var(--accent-dim));
        box-shadow: 0 0 14px -4px var(--accent-glow);
      }

      .mini-chart span:last-child {
        background: linear-gradient(180deg, #fff, var(--accent-bright) 50%, var(--accent));
        box-shadow: 0 0 18px -2px var(--accent-glow);
      }

      /* ── Logo strip ─────────────────────────────────────── */
      /* full-bleed models marquee */
      .model-marquee {
        position: relative;
        width: 100%;
        overflow: hidden;
        padding: clamp(22px, 3.5vh, 40px) 0;
        border-top: 1px solid var(--border-1);
        border-bottom: 1px solid var(--border-1);
        background: var(--bg-1);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
      }
      .marquee-track {
        display: flex;
        width: max-content;
        animation: marquee 38s linear infinite;
      }
      .marquee-track:hover {
        animation-play-state: paused;
      }
      .marquee-group {
        display: flex;
        align-items: center;
        flex-shrink: 0;
      }
      .marquee-item {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 0 clamp(22px, 3vw, 40px);
        font-family: var(--font-display);
        font-size: clamp(1.1rem, 2vw, 1.6rem);
        font-weight: 700;
        letter-spacing: -0.025em;
        line-height: 1;
        color: var(--text-1);
        white-space: nowrap;
      }
      .marquee-item::after {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 12px var(--accent-glow);
        flex-shrink: 0;
      }
      @keyframes marquee {
        to {
          transform: translateX(-50%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .marquee-track {
          animation: none;
        }
      }

      /* ── Sections ───────────────────────────────────────── */
      .section {
        padding: clamp(72px, 9vh, 110px) 0;
      }

      .section-head {
        max-width: 740px;
        margin: 0 auto 48px;
        text-align: center;
      }

      .section-head h2,
      .section-copy h2,
      .cta-section h2,
      .dark-demo h2 {
        margin: 12px 0 16px;
        font-family: var(--font-display);
        color: var(--text-0);
        font-size: clamp(2rem, 4.4vw, 3.4rem);
        line-height: 1.05;
        letter-spacing: -0.025em;
        font-weight: 800;
      }

      .section-head p,
      .section-copy p,
      .cta-section p {
        color: var(--text-1);
        font-size: 16px;
        line-height: 1.6;
      }

      .feature-card {
        border-radius: var(--radius-bento);
        padding: clamp(28px, 4vw, 56px);
        background: var(--bg-1);
        border: 1px solid var(--border-1);
        box-shadow: var(--shadow-bento);
      }

      .kanban {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
      }

      .kanban-col {
        min-height: 270px;
        padding: 16px;
        border-radius: var(--radius-xl);
        background: var(--bg-inset);
        border: 1px solid var(--border-0);
      }

      .kanban-title {
        margin-bottom: 14px;
      }

      .compact-card {
        display: grid;
        gap: 6px;
        margin-bottom: 10px;
        padding: 13px 14px;
        border-radius: var(--radius-lg);
        background: var(--bg-2);
        border: 1px solid var(--border-0);
      }

      .compact-card.accented {
        border-left: 2px solid var(--accent);
      }

      .compact-card.selected {
        border-color: var(--border-accent);
        background: var(--accent-dim);
      }

      .compact-card code {
        color: var(--accent-bright);
        font-size: 13px;
      }

      .tinted-section {
        background: var(--bg-1);
        border-block: 1px solid var(--border-1);
      }

      .split-section,
      .dark-grid {
        display: grid;
        grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.7fr);
        gap: 54px;
        align-items: center;
      }

      .section-copy {
        max-width: 620px;
      }

      .check-list {
        display: grid;
        gap: 14px;
        margin: 28px 0 0;
        padding: 0;
        list-style: none;
      }

      .check-list li {
        position: relative;
        padding-left: 28px;
        color: var(--text-1);
        font-size: 15px;
      }

      .check-list li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
        box-shadow: 0 0 10px var(--accent-glow);
      }

      .billing-panel {
        padding: 26px;
      }

      .balance-box {
        margin: 20px 0 16px;
        padding: 22px;
        border-radius: var(--radius-bento);
        background: var(--bg-inset);
        border: 1px solid var(--border-1);
      }

      .balance-box span {
        display: block;
        color: var(--text-2);
        font-size: 13px;
        margin-bottom: 8px;
      }

      .balance-box strong {
        color: var(--text-0);
        font-family: var(--font-mono);
        font-size: 36px;
        letter-spacing: -0.03em;
      }

      .usage-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        border-bottom: 1px solid var(--border-1);
        color: var(--text-1);
        font-size: 14px;
      }

      .usage-row code {
        color: var(--accent-bright);
        font-size: 14px;
      }

      .cards-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .info-card {
        min-height: 240px;
        padding: 28px;
        border-radius: var(--radius-bento);
        background: var(--bg-1);
        border: 1px solid var(--border-1);
        box-shadow: var(--shadow-bento);
        transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
          box-shadow var(--dur) var(--ease-out);
      }

      .info-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-accent);
        box-shadow: var(--shadow-bento-hover);
      }

      .card-icon {
        display: inline-grid;
        place-items: center;
        width: 44px;
        height: 30px;
        margin-bottom: 44px;
        border-radius: var(--radius-pill);
        color: var(--accent-bright);
        background: var(--accent-dim);
        border: 1px solid var(--border-accent);
        font-family: var(--font-mono);
        font-size: 12px;
        font-weight: 600;
      }

      .info-card h3 {
        margin-bottom: 10px;
        font-family: var(--font-display);
        color: var(--text-0);
        font-size: 19px;
        line-height: 1.25;
        letter-spacing: -0.02em;
        font-weight: 700;
      }

      .info-card p {
        color: var(--text-1);
        font-size: 14px;
        margin: 0;
      }

      .tools-card {
        display: flex;
        flex-direction: column;
      }

      .tools-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: auto;
        padding-top: 20px;
      }

      .tools-list span {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 6px 12px;
        border-radius: var(--radius-pill);
        background: var(--bg-2);
        border: 1px solid var(--border-1);
        color: var(--text-1);
        font-size: 12px;
        font-weight: 500;
      }

      /* ── Dark demo (deeper) ─────────────────────────────── */
      .dark-demo {
        background: radial-gradient(80% 120% at 50% 0%, #1c1418 0%, var(--bg-inset) 70%);
        border-block: 1px solid var(--border-1);
      }

      .dark-demo .eyebrow {
        color: var(--accent-2);
      }

      .flow-card {
        display: grid;
        gap: 10px;
        padding: 20px;
        border-radius: var(--radius-bento);
        background: var(--bg-1);
        border: 1px solid var(--border-1);
      }

      .flow-step {
        padding: 16px 18px;
        border-radius: var(--radius-lg);
        color: var(--text-0);
        background: var(--bg-2);
        border: 1px solid var(--border-1);
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .flow-step::before {
        content: "→";
        color: var(--accent);
        font-family: var(--font-mono);
      }

      /* ── CTA ────────────────────────────────────────────── */
      .cta-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 32px;
        flex-wrap: wrap;
        padding: clamp(36px, 5vw, 64px);
        margin: clamp(72px, 9vh, 110px) auto;
        border-radius: var(--radius-bento);
        background: linear-gradient(140deg, var(--bg-2), var(--bg-1));
        border: 1px solid var(--border-accent);
        box-shadow: var(--shadow-bento), 0 0 100px -40px var(--accent-glow);
      }

      .cta-section > div {
        max-width: 640px;
      }

      .cta-section h2 {
        margin-bottom: 12px;
      }

      .cta-section p {
        margin: 0;
      }

      /* ── Footer ─────────────────────────────────────────── */
      .site-footer {
        padding: 0 0 56px;
        position: relative;
        z-index: 1;
      }

      .footer-card {
        display: grid;
        grid-template-columns: minmax(0, 1.7fr) minmax(160px, 0.65fr) minmax(200px, 0.85fr);
        gap: 42px;
        padding: 44px;
        border: 1px solid var(--border-1);
        border-radius: var(--radius-bento);
        background: var(--bg-1);
        box-shadow: var(--shadow-bento);
      }

      .footer-brand p {
        max-width: 480px;
        margin: 16px 0 0;
        color: var(--text-2);
        font-size: 14px;
        line-height: 1.65;
      }

      .footer-nav {
        display: grid;
        align-content: start;
        gap: 12px;
      }

      .footer-title {
        margin-bottom: 6px;
        color: var(--text-2);
        font-family: var(--font-mono);
        font-size: 11px;
        line-height: 1.2;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 500;
      }

      .footer-nav a {
        width: fit-content;
        color: var(--text-1);
        font-size: 14px;
        font-weight: 500;
        transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
      }

      .footer-nav a:hover {
        color: var(--accent-bright);
        transform: translateX(2px);
      }

      .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        padding: 18px 44px 0;
        margin-top: 18px;
        border-top: 1px solid var(--border-1);
        color: var(--text-2);
        font-size: 13px;
      }

      .footer-bottom a {
        color: var(--accent-bright);
        font-weight: 500;
      }

      /* ── Pricing cards ──────────────────────────────────── */
      .pricing-head {
        max-width: 760px;
        margin: 0 0 44px;
      }

      .pricing-title {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 6.4vw, 4.6rem);
        font-weight: 800;
        line-height: 0.98;
        letter-spacing: -0.03em;
        color: var(--text-0);
        margin: 14px 0 20px;
      }

      .pricing-title .accent {
        color: var(--accent);
      }

      .pricing-head p {
        max-width: 460px;
        color: var(--text-1);
        font-size: 16px;
        line-height: 1.6;
        margin: 0;
      }

      .price-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .price-card {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 22px;
        border-radius: var(--radius-bento);
        background: var(--bg-1);
        border: 1px solid var(--border-1);
        box-shadow: var(--shadow-bento);
        overflow: hidden;
        transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
          box-shadow var(--dur) var(--ease-out);
      }

      .price-card:hover {
        transform: translateY(-3px);
        border-color: var(--border-accent);
        box-shadow: var(--shadow-bento-hover);
      }

      .pc-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
      }

      .pc-model {
        font-family: var(--font-mono);
        font-size: 16px;
        font-weight: 600;
        color: var(--text-0);
        word-break: break-all;
      }

      .pc-active {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        padding: 4px 11px;
        border-radius: var(--radius-pill);
        font-family: var(--font-mono);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.02em;
        color: var(--green);
        background: var(--green-dim);
        border: 1px solid color-mix(in srgb, var(--green) 28%, transparent);
      }

      .pc-foot {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        margin-top: auto;
      }

      .pc-unit {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-2);
      }

      .pc-price {
        font-family: var(--font-mono);
        font-size: 18px;
        font-weight: 700;
        color: var(--text-0);
        letter-spacing: -0.02em;
      }

      .pricing-note {
        margin: 26px 0 0;
        color: var(--text-2);
        font-size: 13px;
      }

      /* ── Steps timeline ─────────────────────────────────── */
      .steps-head {
        max-width: 760px;
        margin: 0 0 12px;
      }

      .steps-title {
        font-family: var(--font-display);
        font-size: clamp(2.4rem, 6.4vw, 4.6rem);
        font-weight: 800;
        line-height: 0.98;
        letter-spacing: -0.03em;
        color: var(--text-0);
        margin: 14px 0 0;
      }

      .steps-title .accent {
        color: var(--accent-sheen);
      }

      .steps-timeline {
        position: relative;
        margin-top: 40px;
        border-top: 1px solid var(--border-1);
      }

      .step-row {
        position: relative;
        display: grid;
        grid-template-columns: 56px 64px minmax(0, 0.9fr) minmax(0, 1.1fr) auto;
        align-items: center;
        gap: 24px;
        padding: 30px 8px 30px 0;
        border-bottom: 1px solid var(--border-1);
      }

      .step-node {
        position: relative;
        display: grid;
        place-items: center;
        height: 100%;
      }

      .step-node::before {
        content: "";
        position: absolute;
        top: -30px;
        bottom: -30px;
        width: 1px;
        background: var(--border-1);
      }

      .step-row:first-child .step-node::before {
        top: 50%;
      }
      .step-row:last-child .step-node::before {
        bottom: 50%;
      }

      .step-dot {
        position: relative;
        z-index: 1;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--bg-0);
        border: 1px solid var(--border-2);
        transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),
          background-color var(--dur) var(--ease-out);
      }

      .step-row:hover .step-dot {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--accent-dim), 0 0 14px var(--accent-glow);
      }

      .step-num {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--text-3);
      }

      .step-name {
        font-family: var(--font-display);
        font-size: clamp(1.2rem, 2vw, 1.6rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--text-0);
        line-height: 1.1;
      }

      .step-desc {
        color: var(--text-1);
        font-size: 15px;
        line-height: 1.5;
      }

      .step-desc b {
        color: var(--accent-bright);
        font-weight: 600;
      }

      .step-time {
        justify-self: end;
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-3);
      }

      .steps-cli {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-top: 28px;
        padding: 16px 16px 16px 22px;
        border-radius: var(--radius-bento);
        background: var(--bg-inset);
        border: 1px solid var(--border-1);
      }

      .steps-cli code {
        font-family: var(--font-mono);
        font-size: 14px;
        color: var(--text-1);
        word-break: break-all;
      }

      .steps-cli code b {
        color: var(--accent-bright);
        font-weight: 500;
      }

      .copy-btn {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 16px;
        border-radius: var(--radius-pill);
        background: var(--bg-2);
        border: 1px solid var(--border-2);
        color: var(--text-1);
        font-family: var(--font-mono);
        font-size: 13px;
        cursor: pointer;
        transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
          background-color var(--dur) var(--ease-out);
      }

      .copy-btn:hover {
        color: var(--text-0);
        border-color: var(--border-accent);
        background: var(--bg-hover);
      }

      .copy-btn.copied {
        color: var(--green);
        border-color: var(--green);
      }

      .steps-foot {
        display: flex;
        align-items: center;
        gap: 22px;
        flex-wrap: wrap;
        margin-top: 36px;
      }

      .steps-foot span {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-3);
      }

      /* ── CTA centered ───────────────────────────────────── */
      .cta-center {
        text-align: center;
        padding: clamp(80px, 13vh, 160px) 0;
      }

      .cta-center h2 {
        font-family: var(--font-display);
        font-size: clamp(2rem, 5vw, 3.6rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.025em;
        color: var(--text-0);
        margin: 0 auto;
        max-width: 18ch;
      }

      .cta-center h2 .accent {
        color: var(--accent-sheen);
      }

      .cta-center .btn {
        margin-top: 36px;
      }

      /* ── Burger ─────────────────────────────────────────── */
      .nav-burger {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 40px;
        height: 40px;
        padding: 8px;
        border: 1px solid var(--border-2);
        border-radius: var(--radius-lg);
        background: transparent;
        cursor: pointer;
        flex-shrink: 0;
      }

      .nav-burger span {
        display: block;
        height: 2px;
        border-radius: 2px;
        background: var(--text-0);
        transition: transform 0.2s ease, opacity 0.2s ease;
        transform-origin: center;
      }

      .nav-burger--open span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .nav-burger--open span:nth-child(2) {
        opacity: 0;
      }
      .nav-burger--open span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ── Responsive ─────────────────────────────────────── */
      @media (max-width: 980px) {
        .hero-console {
          display: none;
        }
        .hero {
          padding-top: clamp(80px, 16vh, 160px);
          padding-bottom: clamp(72px, 14vh, 140px);
        }
        .nav {
          position: relative;
        }
        .nav-links {
          display: none;
          position: absolute;
          top: calc(100% + 1px);
          left: -24px;
          right: -24px;
          flex-direction: column;
          align-items: stretch;
          gap: 2px;
          padding: 12px 16px 16px;
          background: color-mix(in srgb, var(--bg-0) 96%, transparent);
          border-bottom: 1px solid var(--border-1);
          backdrop-filter: blur(14px);
          z-index: 200;
        }
        .nav-links.nav-open {
          display: flex;
        }
        .nav-links a {
          padding: 12px 16px;
          font-size: 15px;
        }
        .nav-actions {
          display: none;
        }
        .nav-burger {
          display: flex;
        }
        .dashboard-grid,
        .split-section,
        .dark-grid,
        .cards-grid {
          grid-template-columns: 1fr;
        }
        .sidebar-card {
          display: none;
        }
        .kanban {
          grid-template-columns: 1fr;
        }
        .footer-card {
          grid-template-columns: 1fr;
          gap: 28px;
          padding: 36px;
        }
        .footer-bottom {
          padding-inline: 36px;
        }
        .cta-section {
          flex-direction: column;
          align-items: flex-start;
        }
        .price-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (max-width: 640px) {
        .container {
          width: min(100% - 28px, var(--max-w));
        }
        .hero {
          min-height: 100svh;
          display: flex;
          align-items: center;
          padding-top: 72px;
          padding-bottom: 24px;
        }
        .hero-inner {
          width: 100%;
        }
        .hero-actions {
          flex-direction: column;
          align-items: stretch;
          width: 100%;
        }
        .hero-actions .btn,
        .hero-actions .hero-link {
          width: 100%;
          justify-content: center;
        }
        .route-row {
          align-items: flex-start;
          flex-direction: column;
        }
        .footer-card {
          padding: 28px 24px;
        }
        .footer-bottom {
          padding: 16px 24px 0;
        }
        .price-grid {
          grid-template-columns: 1fr;
          gap: 10px;
        }
        .price-card {
          padding: 16px;
          border-radius: var(--radius-lg);
        }
        .pc-model {
          font-size: 15px;
        }
        .pc-active {
          padding: 3px 9px;
          font-size: 10px;
        }
        .pc-top {
          margin-bottom: 14px;
        }
        .pc-price {
          font-size: 17px;
        }
        .step-row {
          grid-template-columns: 28px auto 1fr;
          grid-template-areas:
            "node num name"
            "node desc desc";
          gap: 6px 16px;
          align-items: start;
          padding: 24px 0;
        }
        .step-node {
          grid-area: node;
        }
        .step-num {
          grid-area: num;
          align-self: center;
        }
        .step-name {
          grid-area: name;
          align-self: center;
        }
        .step-desc {
          grid-area: desc;
          margin-top: 6px;
        }
        .step-time {
          display: none;
        }

        /* tighter rhythm + smaller type on phones */
        .section {
          padding: 56px 0;
        }
        h1 {
          font-size: clamp(2.1rem, 11vw, 3.1rem);
          margin-bottom: 18px;
        }
        .hero-copy {
          font-size: 1rem;
          margin-bottom: 28px;
        }
        .hero-actions {
          margin-bottom: 0;
        }
        .pricing-head,
        .steps-head,
        .manifesto-head {
          margin-bottom: 28px;
        }
        .pricing-title,
        .steps-title {
          font-size: clamp(2rem, 11vw, 2.8rem);
        }
        .pricing-head p {
          font-size: 15px;
        }
        .manifesto-title {
          font-size: clamp(2.4rem, 15vw, 3.6rem);
        }
        .model-marquee {
          padding: 18px 0;
        }
        .marquee-item {
          font-size: 1.05rem;
          padding: 0 18px;
          gap: 11px;
        }
        .steps-timeline {
          margin-top: 28px;
        }
        .step-name {
          font-size: 1.15rem;
        }
        .step-desc {
          font-size: 14px;
        }
        .steps-cli {
          padding: 14px;
          gap: 12px;
          margin-top: 22px;
        }
        .steps-cli code {
          font-size: 12.5px;
        }
        .copy-btn {
          width: 100%;
          justify-content: center;
        }
        .steps-foot {
          margin-top: 28px;
          gap: 14px;
        }
        .steps-foot .btn {
          width: 100%;
        }
        .cta-center {
          padding: 64px 0;
        }
        .cta-center h2 {
          font-size: clamp(1.8rem, 9vw, 2.6rem);
        }
        .cta-center .btn {
          width: 100%;
        }
        .rule-title {
          font-size: 1.35rem;
        }
        .rule-desc {
          font-size: 15px;
          margin-top: 10px;
        }
      }

      /* manifesto */
      .manifesto {
        position: relative;
      }
      .manifesto-head {
        max-width: 820px;
        margin: 0 0 8px;
      }
      .manifesto-title {
        font-family: var(--font-display);
        font-size: clamp(2.8rem, 9vw, 6rem);
        font-weight: 800;
        line-height: 0.94;
        letter-spacing: -0.035em;
        color: var(--text-0);
        margin: 16px 0 0;
      }
      .manifesto-list {
        margin-top: 36px;
        border-top: 1px solid var(--border-1);
      }
      .rule-row {
        position: relative;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 0 32px;
        padding: 40px 0;
        border-bottom: 1px solid var(--border-1);
        overflow: hidden;
      }
      .rule-num {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--text-2);
        letter-spacing: 0.04em;
        padding-top: 6px;
      }
      .rule-body {
        max-width: 640px;
      }
      .rule-title {
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3.4vw, 2.15rem);
        font-weight: 600;
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--text-0);
        margin: 0;
      }
      .rule-desc {
        margin: 14px 0 0;
        color: var(--text-1);
        font-size: 16px;
        line-height: 1.6;
        max-width: 520px;
      }
      .rule-desc b {
        color: var(--accent-bright);
        font-weight: 600;
      }
      .rule-ghost {
        position: absolute;
        right: -0.06em;
        top: 50%;
        transform: translateY(-50%);
        font-family: var(--font-display);
        font-size: clamp(7rem, 16vw, 13rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: transparent;
        -webkit-text-stroke: 1px var(--border-2);
        pointer-events: none;
        user-select: none;
        z-index: 0;
      }
      .rule-num,
      .rule-body {
        position: relative;
        z-index: 1;
      }
      @media (max-width: 640px) {
        .rule-row {
          grid-template-columns: 40px minmax(0, 1fr);
          gap: 0 18px;
          padding: 32px 0;
        }
        .rule-ghost {
          font-size: 7rem;
          opacity: 0.6;
        }
      }