@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

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

    :root {
      --ink: #0B0D14;
      --navy: #131629;
      --surface: #1C2038;
      --border: #2D3354;
      --purple: #6C47FF;
      --purple-light: #8B6FFF;
      --purple-muted: #3D2A99;
      --teal: #00D4AA;
      --teal-muted: #00A880;
      --text-primary: #FFFFFF;
      --text-secondary: #94A3B8;
      --text-muted: #5B6680;
      --text-link: #8B6FFF;
      --light-bg: #F0F2FF;
      --light-surface: #FFFFFF;
      --light-border: #DDE1F5;
      --text-on-light: #0B0D14;
      --text-sec-on-light: #3D4870;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--ink);
      color: var(--text-primary);
      line-height: 1.7;
      font-size: 17px;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .container--narrow {
      max-width: 760px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 20px;
    }
    .section-label::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--purple);
      flex-shrink: 0;
    }

    /* ─── NAVIGATION ─── */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      height: 64px;
      display: flex;
      align-items: center;
      transition: background 250ms ease, backdrop-filter 250ms ease, border-bottom 250ms ease;
    }
    nav.scrolled {
      background: rgba(11, 13, 20, 0.95);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav-logo-text {
      font-size: 20px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.01em;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-secondary);
      text-decoration: none;
      transition: color 150ms;
    }
    .nav-links a:hover { color: var(--text-primary); }
    .nav-cta {
      display: inline-block;
      background: var(--purple);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      padding: 10px 20px;
      border-radius: 8px;
      text-decoration: none;
      transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }
    .nav-cta:hover {
      background: var(--purple-light);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(108,71,255,0.35);
    }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      background: none;
      border: none;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--text-primary);
      border-radius: 2px;
      transition: all 200ms;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: var(--ink);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-size: 24px;
      font-weight: 600;
      color: var(--text-primary);
      text-decoration: none;
    }
    .mobile-menu-cta {
      background: var(--purple);
      color: #fff !important;
      padding: 16px 48px;
      border-radius: 8px;
      font-size: 18px !important;
    }
    .mobile-menu-close {
      position: absolute;
      top: 20px;
      right: 32px;
      background: none;
      border: none;
      color: var(--text-primary);
      font-size: 28px;
      cursor: pointer;
    }

    /* ─── HERO ─── */
    #hero {
      background: linear-gradient(135deg, #0B0D14 0%, #131629 50%, #1a1040 100%);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 140px 32px 100px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #hero::after {
      content: '';
      position: absolute;
      bottom: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 600px;
      height: 600px;
      background: radial-gradient(circle, rgba(108,71,255,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-beta-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 24px;
    }
    .hero-beta-label::before {
      content: '●';
      font-size: 8px;
    }
    .hero-headline {
      font-size: 4rem;
      font-weight: 700;
      line-height: 1.1;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      max-width: 760px;
      margin-bottom: 24px;
    }
    .hero-sub {
      font-size: 1.25rem;
      font-weight: 400;
      line-height: 1.5;
      color: var(--text-secondary);
      max-width: 620px;
      margin-bottom: 40px;
    }
    .btn-primary {
      display: inline-block;
      background: var(--purple);
      color: #fff;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      padding: 16px 32px;
      border-radius: 8px;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    }
    .btn-primary:hover {
      background: var(--purple-light);
      transform: translateY(-1px);
      box-shadow: 0 8px 24px rgba(108,71,255,0.35);
    }
    .btn-primary:active { background: #5538CC; transform: none; }
    .hero-trust {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: 16px;
      line-height: 1.5;
    }
    .hero-screenshot {
      margin-top: 64px;
      max-width: 1000px;
      width: 100%;
      position: relative;
      z-index: 1;
    }
    .screenshot-img {
      width: 100%;
      display: block;
      border-radius: 0 0 11px 11px;
    }
    .screenshot-mock-bar {
      background: var(--surface);
      border-radius: 8px 8px 0 0;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 2px;
    }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-dot:nth-child(1) { background: #FF5F57; }
    .mock-dot:nth-child(2) { background: #FFBD2E; }
    .mock-dot:nth-child(3) { background: #28CA41; }
    .mock-url {
      margin-left: 10px;
      background: var(--border);
      border-radius: 4px;
      padding: 3px 16px;
      font-size: 11px;
      color: var(--text-muted);
      flex: 1;
      max-width: 300px;
    }
    .screenshot-frame {
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 40px 80px rgba(108, 71, 255, 0.15), 0 24px 80px rgba(0,0,0,0.5);
    }
    .screenshot-content {
      background: var(--navy);
      padding: 40px 32px;
      min-height: 380px;
      display: flex;
      gap: 24px;
    }
    .mock-sidebar {
      width: 200px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .mock-nav-item {
      padding: 10px 14px;
      border-radius: 8px;
      font-size: 13px;
      color: var(--text-muted);
    }
    .mock-nav-item.active {
      background: rgba(108,71,255,0.15);
      color: var(--purple-light);
      font-weight: 600;
    }
    .mock-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .mock-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 18px 20px;
    }
    .mock-card-title {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 10px;
    }
    .mock-bar { height: 8px; border-radius: 4px; background: var(--border); margin-bottom: 6px; }
    .mock-bar.fill-purple { background: var(--purple); }
    .mock-bar.fill-teal { background: var(--teal); }
    .mock-score {
      font-size: 36px;
      font-weight: 700;
      color: var(--teal);
    }
    .mock-score-label { font-size: 12px; color: var(--text-muted); }
    .mock-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .mock-tag {
      font-size: 11px;
      padding: 3px 10px;
      border-radius: 12px;
      background: rgba(108,71,255,0.15);
      color: var(--purple-light);
    }
    .mock-tag.teal {
      background: rgba(0,212,170,0.12);
      color: var(--teal);
    }

    /* ─── PROBLEM ─── */
    #problem {
      background: var(--ink);
      padding: 96px 0;
    }
    #problem .section-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .section-headline {
      font-size: 2.75rem;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
      color: var(--text-primary);
      margin-bottom: 16px;
    }
    .section-sub {
      font-size: 1.25rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 20px;
    }
    .problem-grid-row2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      max-width: 800px;
      margin: 0 auto 80px;
    }
    .problem-card {
      background: var(--navy);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px;
      transition: border-color 200ms, transform 200ms;
    }
    .problem-card:hover {
      border-color: rgba(108,71,255,0.5);
      transform: translateY(-2px);
    }
    .problem-card-icon {
      font-size: 24px;
      margin-bottom: 14px;
    }
    .problem-card-headline {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .problem-card-body {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .root-cause {
      max-width: 800px;
      margin: 0 auto;
      text-align: center;
    }
    .root-cause-headline {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 20px;
    }
    .root-cause-body {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.8;
    }

    /* ─── BRIDGE ─── */
    #bridge {
      background: var(--navy);
      padding: 64px 0;
    }
    .bridge-inner {
      max-width: 700px;
      margin: 0 auto;
      padding: 0 32px;
      text-align: center;
    }
    .bridge-headline {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 24px;
      letter-spacing: -0.01em;
    }
    .bridge-body {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.8;
      margin-bottom: 40px;
    }
    .pull-quote {
      border-left: 3px solid var(--purple);
      padding-left: 24px;
      text-align: left;
      max-width: 580px;
      margin: 0 auto;
    }
    .pull-quote p {
      font-size: 20px;
      font-style: italic;
      font-weight: 400;
      color: var(--text-primary);
      line-height: 1.6;
    }

    /* ─── HOW IT WORKS ─── */
    #how-it-works {
      background: var(--ink);
      padding: 96px 0;
    }
    #how-it-works .section-header {
      text-align: center;
      margin-bottom: 80px;
    }
    .steps-stack {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .step {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 64px;
      align-items: center;
      padding: 64px 0;
      border-bottom: 1px solid var(--border);
    }
    .step:last-child { border-bottom: none; }
    .step.reversed { direction: rtl; }
    .step.reversed > * { direction: ltr; }
    .step-text {}
    .step-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--purple);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .step-label::before {
      content: '';
      width: 2px;
      height: 20px;
      background: var(--purple);
      border-radius: 2px;
    }
    .step-headline {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.2;
      margin-bottom: 18px;
      letter-spacing: -0.01em;
    }
    .step-body {
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.75;
      margin-bottom: 16px;
    }
    .step-detail {
      font-size: 14px;
      color: var(--text-muted);
    }
    .step-visual {
      background: var(--navy);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      padding: 32px;
      min-height: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .step-visual-label {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      color: var(--text-muted);
      text-transform: uppercase;
      text-align: center;
    }
    .step-visual-mock {
      width: 100%;
    }
    .mock-chat {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mock-msg {
      padding: 12px 16px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.5;
      max-width: 90%;
    }
    .mock-msg.ai {
      background: var(--surface);
      color: var(--text-secondary);
      align-self: flex-start;
      border: 1px solid var(--border);
    }
    .mock-msg.user {
      background: rgba(108,71,255,0.2);
      color: var(--text-primary);
      align-self: flex-end;
    }
    .mock-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
    .mock-chip {
      font-size: 11px;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--teal);
      color: var(--teal);
      background: rgba(0,212,170,0.08);
    }
    .mock-jobs { display: flex; flex-direction: column; gap: 10px; }
    .mock-job-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .mock-job-info { font-size: 12px; }
    .mock-job-title { font-weight: 600; color: var(--text-primary); margin-bottom: 3px; }
    .mock-job-company { color: var(--text-muted); }
    .mock-fit-badge {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 10px;
      border-radius: 6px;
    }
    .mock-fit-badge.high { background: rgba(0,212,170,0.15); color: var(--teal); }
    .mock-fit-badge.med { background: rgba(108,71,255,0.15); color: var(--purple-light); }
    .mock-docs { display: flex; flex-direction: column; gap: 10px; }
    .mock-doc {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 12px;
    }
    .mock-doc-icon {
      width: 32px;
      height: 32px;
      border-radius: 6px;
      background: rgba(108,71,255,0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      flex-shrink: 0;
    }
    .mock-doc-name { font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }
    .mock-doc-sub { color: var(--text-muted); }
    .mock-doc-badge {
      margin-left: auto;
      font-size: 10px;
      font-weight: 600;
      color: var(--teal);
      background: rgba(0,212,170,0.12);
      padding: 3px 8px;
      border-radius: 10px;
    }

    /* ─── FEATURES ─── */
    #features {
      background: var(--ink);
      padding: 96px 0;
    }
    #features .section-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 80px;
    }
    .feature-card {
      background: var(--navy);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 28px;
      transition: border-color 200ms, transform 200ms;
    }
    .feature-card:hover {
      border-color: rgba(108,71,255,0.5);
      transform: translateY(-2px);
    }
    .feature-icon-wrap {
      width: 48px;
      height: 48px;
      background: var(--surface);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 18px;
    }
    .feature-card-headline {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .feature-card-body {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.65;
    }
    .diff-block {
      background: var(--navy);
      padding: 96px 32px;
      text-align: center;
    }
    .diff-headline {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 20px;
      letter-spacing: -0.01em;
    }
    .diff-body {
      font-size: 1.25rem;
      color: var(--text-secondary);
      line-height: 1.7;
      max-width: 680px;
      margin: 0 auto 48px;
    }
    .comparison-table {
      max-width: 720px;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .comparison-header {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .comparison-col-header {
      padding: 14px 24px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .comparison-col-header.left {
      background: var(--surface);
      color: var(--text-muted);
      border-right: 1px solid var(--border);
    }
    .comparison-col-header.right {
      background: rgba(108,71,255,0.1);
      color: var(--purple);
    }
    .comparison-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .comparison-row:nth-child(odd) .comparison-cell { background: var(--ink); }
    .comparison-row:nth-child(even) .comparison-cell { background: var(--navy); }
    .comparison-cell {
      padding: 14px 24px;
      font-size: 15px;
      line-height: 1.5;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .comparison-cell.left {
      color: var(--text-muted);
      border-right: 1px solid var(--border);
    }
    .comparison-cell.right { color: var(--text-primary); }
    .comparison-x { color: var(--text-muted); font-size: 16px; flex-shrink: 0; }
    .comparison-check { color: var(--teal); font-size: 16px; flex-shrink: 0; }

    /* ─── SOCIAL PROOF ─── */
    #social-proof {
      background: var(--light-bg);
      padding: 96px 0;
    }
    #social-proof .section-label { color: var(--text-sec-on-light); }
    #social-proof .section-label::before { background: var(--purple); }
    #social-proof .section-headline { color: var(--text-on-light); }
    #social-proof .section-sub { color: var(--text-sec-on-light); }
    .trust-header {
      text-align: center;
      margin-bottom: 16px;
    }
    .trust-body {
      font-size: 18px;
      color: var(--text-sec-on-light);
      line-height: 1.7;
      max-width: 640px;
      margin: 0 auto 56px;
      text-align: center;
    }
    .trust-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      margin-bottom: 56px;
    }
    .trust-card {
      background: var(--light-surface);
      border: 1px solid var(--light-border);
      border-radius: 12px;
      padding: 28px;
    }
    .trust-icon-wrap {
      width: 48px;
      height: 48px;
      background: #EEF0FF;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      margin-bottom: 16px;
    }
    .trust-card-headline {
      font-size: 16px;
      font-weight: 600;
      color: var(--text-on-light);
      margin-bottom: 10px;
    }
    .trust-card-body {
      font-size: 15px;
      color: var(--text-sec-on-light);
      line-height: 1.65;
    }
    .beta-invite {
      background: var(--navy);
      border-radius: 12px;
      padding: 56px 64px;
      max-width: 600px;
      margin: 0 auto;
      text-align: center;
    }
    .beta-invite-headline {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 14px;
    }
    .beta-invite-body {
      font-size: 17px;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 28px;
    }

    /* ─── FAQ ─── */
    #faq {
      background: var(--light-bg);
      padding: 96px 0;
      border-top: 1px solid var(--light-border);
    }
    #faq .section-label { color: var(--text-sec-on-light); }
    #faq .section-label::before { background: var(--purple); }
    #faq .section-headline { color: var(--text-on-light); }
    .faq-header { text-align: center; margin-bottom: 48px; }
    .faq-list {
      max-width: 800px;
      margin: 0 auto;
    }
    .faq-item {
      border-bottom: 1px solid var(--light-border);
    }
    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      text-align: left;
      gap: 16px;
    }
    .faq-question-text {
      font-size: 18px;
      font-weight: 600;
      color: var(--text-on-light);
      line-height: 1.4;
    }
    .faq-item.open .faq-question-text { color: var(--purple); }
    .faq-icon {
      font-size: 22px;
      font-weight: 400;
      color: var(--purple);
      flex-shrink: 0;
      line-height: 1;
      width: 24px;
      text-align: center;
    }
    .faq-answer {
      font-size: 16px;
      color: var(--text-sec-on-light);
      line-height: 1.75;
      max-height: 0;
      overflow: hidden;
      transition: max-height 300ms ease, padding-bottom 300ms ease;
    }
    .faq-item.open .faq-answer {
      max-height: 400px;
      padding-bottom: 22px;
    }

    /* ─── FINAL CTA ─── */
    #final-cta {
      background: linear-gradient(160deg, #131629 0%, #1a1040 100%);
      padding: 120px 32px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    #final-cta::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      height: 400px;
      background: radial-gradient(circle, rgba(108,71,255,0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .final-cta-inner {
      max-width: 600px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    .final-cta-headline {
      font-size: 3rem;
      font-weight: 700;
      color: var(--text-primary);
      line-height: 1.15;
      letter-spacing: -0.02em;
      margin-bottom: 20px;
    }
    .final-cta-body {
      font-size: 1.25rem;
      color: var(--text-secondary);
      line-height: 1.7;
      margin-bottom: 40px;
    }
    .final-cta-trust {
      font-size: 0.8125rem;
      color: var(--text-muted);
      margin-top: 16px;
    }
    .final-cta-signin {
      display: block;
      margin-top: 16px;
      font-size: 14px;
      color: var(--text-secondary);
      text-decoration: none;
    }
    .final-cta-signin a { color: var(--text-link); text-decoration: underline; }

    /* ─── FOOTER ─── */
    footer {
      background: var(--ink);
      border-top: 1px solid var(--border);
      padding: 48px 0 32px;
    }
    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 32px;
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 48px;
      margin-bottom: 40px;
    }
    .footer-brand { }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
      text-decoration: none;
    }
    .footer-logo-text {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .footer-tagline {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
    }
    .footer-nav {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .footer-nav-group h4 {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .footer-nav-group ul { list-style: none; }
    .footer-nav-group ul li { margin-bottom: 8px; }
    .footer-nav-group ul a {
      font-size: 14px;
      color: var(--text-muted);
      text-decoration: none;
      transition: color 150ms;
    }
    .footer-nav-group ul a:hover { color: var(--text-primary); }
    .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 32px 0;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-copy {
      font-size: 13px;
      color: var(--text-muted);
    }
    .footer-social a {
      color: var(--text-muted);
      text-decoration: none;
      transition: color 150ms;
    }
    .footer-social a:hover { color: var(--text-primary); }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 1199px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
      .step { grid-template-columns: 1fr 1fr; gap: 40px; }
    }

    @media (max-width: 767px) {
      .hero-headline { font-size: 2.25rem; }
      .hero-sub { font-size: 17px; }
      .section-headline { font-size: 1.75rem; }
      .section-sub { font-size: 17px; }

      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-cta { display: none; }

      #hero { padding: 120px 24px 80px; }
      .hero-screenshot { display: none; }

      #problem { padding: 72px 0; }
      .problem-grid { grid-template-columns: 1fr; }
      .problem-grid-row2 { grid-template-columns: 1fr; max-width: 100%; }

      #bridge { padding: 48px 0; }
      .bridge-headline { font-size: 1.75rem; }

      #how-it-works { padding: 72px 0; }
      .step {
        grid-template-columns: 1fr;
        direction: ltr;
        gap: 28px;
        padding: 48px 0;
      }
      .step.reversed { direction: ltr; }
      .step-headline { font-size: 1.5rem; }

      #features { padding: 72px 0; }
      .features-grid { grid-template-columns: 1fr; }
      .diff-block { padding: 72px 24px; }
      .diff-headline { font-size: 1.75rem; }
      .comparison-header, .comparison-row { grid-template-columns: 1fr; }
      .comparison-col-header.left, .comparison-cell.left { border-right: none; border-bottom: 1px solid var(--border); }

      .trust-grid { grid-template-columns: 1fr; }
      .beta-invite { padding: 36px 24px; }

      #faq { padding: 72px 0; }

      #final-cta { padding: 80px 24px; }
      .final-cta-headline { font-size: 2rem; }
      .final-cta-body { font-size: 17px; }

      .footer-inner { grid-template-columns: 1fr; gap: 32px; }
      .footer-nav { grid-template-columns: repeat(2, 1fr); }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

      .container, .container--narrow { padding: 0 20px; }
    }