html body .elementor-container, body .container{
 max-width:100% !important;
 }
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
menu, ol, ul{margin:0px; padding:0px;}
a:visited, a:hover {
    color: var(--navy);
}
 /* ============================
       DESIGN TOKENS
    ============================ */
    :root {
      --accent: #4F46E5;
      --accent-hover: #4338CA;
      --accent-active: #3730A3;
      --accent-2: #3B82F6;
      --accent-ai: #7C3AED;
      --accent-mid: #818CF8;
      --accent-ai-light: rgba(139, 92, 246, 0.1);
      --accent-light: rgba(79, 70, 229, 0.08);
      --accent-light-2: rgba(79, 70, 229, 0.15);
      --navy: #0F172A;
      --navy-2: #1E293B;
      --color-bg: #F8F9FC;
      --color-surface: #FFFFFF;
      --color-surface-2: #F1F5F9;
      --color-border: #E2E8F0;
      --color-text: #0F172A;
      --color-text-muted: #64748B;
      --color-text-faint: #94A3B8;
      --color-error: #EF4444;
      --color-success: #22C55E;
      --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
      --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
      --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
      --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
      --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
      --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
      --text-3xl: clamp(2.375rem, 1.5rem + 3vw, 4rem);
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;
      --space-24: 6rem;
      --radius-sm: 0.375rem;
      --radius-md: 0.5rem;
      --radius-lg: 0.75rem;
      --radius-xl: 1rem;
      --radius-2xl: 1.5rem;
      --radius-full: 9999px;
      --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
      --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
      --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
      --shadow-xl: 0 20px 48px rgba(15, 23, 42, 0.16);
      --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --content-narrow: 640px;
      --content-default: 960px;
      --content-wide: 1200px;
    }

    /* ============================
       BASE RESET
    ============================ */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    html {
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      scroll-behavior: smooth;
      scroll-padding-top: 80px;
    }
    body {
      min-height: 100dvh;
      line-height: 1.6;
      font-family: var(--font-body);
      font-size: var(--text-base);
      color: var(--color-text);
      background-color: var(--color-bg);
    }
    img, picture, video, canvas, svg {
      display: block;
      max-width: 100%;
    }
    ul[role="list"], ol[role="list"] { list-style: none; }
    input, button, textarea, select { font: inherit; color: inherit; }
    h1, h2, h3, h4, h5, h6 {
      text-wrap: balance;
      line-height: 1.15;
      font-family: var(--font-display);
    }
    p, li, figcaption { text-wrap: pretty; max-width: 72ch; }
    button { cursor: pointer; background: none; border: none; }
    a { text-decoration: none; color: inherit; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ============================
       LAYOUT UTILITIES
    ============================ */
    .container {
      width: 100%;
      max-width: var(--content-wide);
      margin-inline: auto;
      padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
    }
    .container--narrow {
      max-width: var(--content-narrow);
      margin-inline: auto;
    }
    .section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    }

    /* ============================
       TYPOGRAPHY UTILITIES
    ============================ */
    .pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-3);
      background: var(--accent-light);
      color: var(--accent);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .section-label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-faint);
    }

    /* ============================
       BUTTONS
    ============================ */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 0.75rem 1.5rem;
      border-radius: var(--radius-lg);
      font-size: var(--text-sm);
      font-weight: 700;
      transition:
        background var(--transition-interactive),
        color var(--transition-interactive),
        box-shadow var(--transition-interactive),
        transform var(--transition-interactive),
        border-color var(--transition-interactive);
      cursor: pointer;
      text-decoration: none;
      white-space: nowrap;
    }
    .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
    .btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
    .btn--primary {
      background: var(--accent);
      color: #fff;
      border: 2px solid transparent;
    }
    .btn--primary:hover { background: var(--accent-hover); }
    .btn--primary:active { background: var(--accent-active); }
    .btn--ghost {
      background: transparent;
      color: var(--color-text);
      border: 2px solid var(--color-border);
    }
    .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
    .btn--ghost-white {
      background: transparent;
      color: #fff;
      border: 2px solid rgba(255,255,255,0.4);
    }
    .btn--ghost-white:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
    .btn--white {
      background: #fff;
      color: var(--accent-ai);
      border: 2px solid transparent;
    }
    .btn--white:hover { background: #F5F3FF; }
    .btn--lg {
      padding: 0.875rem 2rem;
      font-size: var(--text-base);
      border-radius: var(--radius-xl);
    }

    /* ============================
       NAVIGATION
    ============================ */
    .nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--color-border);
    }
    .nav__inner {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 68px;
      gap: var(--space-6);
    }
    .nav__logo {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: var(--space-2);
    }
    .nav__logo-icon {
      width: 36px;
      height: 36px;
      background: transparent;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .nav__links {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      list-style: none;
    }
    .nav__links a {
      font-size: var(--text-sm);
      font-weight: 500;
      font-size: 0.8rem;
      color: var(--color-text-muted);
      transition: color var(--transition-interactive);
    }
    .nav__links a:hover { color: var(--color-text); }
    .nav__links a.nav__link--active { color: var(--accent-ai); }
    .nav__signin {
      font-size: var(--text-sm);
      font-weight: 500;
      font-size: 0.8rem;
      color: var(--color-text-muted);
      transition: color var(--transition-interactive);
      text-decoration: none;
      padding: 0.375rem 0;
    }
    .nav__signin:hover { color: var(--color-text); }
    .btn--nav-cta {
      padding: 0.5rem 1.125rem;
      font-size: 0.8125rem;
      border-radius: var(--radius-full);
      font-weight: 700;
      background: var(--accent);
      color: #fff;
      border: none;
      transition: background var(--transition-interactive), transform var(--transition-interactive);
      white-space: nowrap;
    }
    .btn--nav-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
    .nav__actions {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      flex-shrink: 0;
      margin-left: auto;
    }
    .nav__mobile-toggle {
      display: none;
      padding: var(--space-2);
      color: var(--color-text);
      border-radius: var(--radius-md);
      transition: background var(--transition-interactive);
    }
    .nav__mobile-toggle:hover { background: var(--color-surface-2); }
    @media (max-width: 900px) {
      .nav__links { display: none; }
      .nav__mobile-toggle { display: flex; }
      .nav__actions .btn--ghost { display: none; }
    }
    @media (max-width: 600px) {
      .nav__actions .btn--primary { padding: 0.5rem 0.875rem; font-size: var(--text-xs); }
    }

    /* ============================
       MEGA-MENU
    ============================ */
    .nav__item { position: static; }
    .nav__item--mega { position: static; }
    .nav__item--mega > a {
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    .nav__item--mega > a .mm-chevron {
      width: 10px; height: 10px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg) translateY(-2px);
      transition: transform 200ms ease;
      display: inline-block;
      flex-shrink: 0;
    }
    .nav__item--mega.mm-open > a .mm-chevron {
      transform: rotate(-135deg) translateY(2px);
    }
    .nav__inner { position: relative; }
    .megamenu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      transform: translateY(4px);
      width: min(860px, 92vw);
      background: #fff;
      border: 1px solid rgba(15,23,42,0.08);
      border-radius: 18px;
      box-shadow: 0 8px 16px rgba(15,23,42,0.06), 0 24px 56px rgba(15,23,42,0.12);
      z-index: 300;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: opacity 180ms ease, transform 180ms ease, visibility 0ms 180ms;
      overflow: hidden;
    }
    .nav__item--mega.mm-open .megamenu {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0);
      transition: opacity 180ms ease, transform 180ms ease, visibility 0ms 0ms;
    }
    .megamenu::before {
      content: '';
      position: absolute;
      top: -16px;
      left: 0; right: 0;
      height: 16px;
      background: transparent;
    }
    .megamenu::after {
      content: '';
      position: absolute;
      top: -5px;
      left: 48px;
      transform: rotate(45deg);
      width: 10px; height: 10px;
      background: #fff;
      border-top: 1px solid rgba(15,23,42,0.08);
      border-left: 1px solid rgba(15,23,42,0.08);
      border-radius: 2px;
    }
    .megamenu__inner {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      padding: 28px 28px 0;
    }
    .megamenu__col {
      padding: 0 18px 24px;
      border-right: 1px solid rgba(15,23,42,0.06);
    }
    .megamenu__col:first-child { padding-left: 0; }
    .megamenu__col:last-child { border-right: none; padding-right: 0; }
    .megamenu__col-label {
      font-size: 0.65rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-faint);
      margin-bottom: 14px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(15,23,42,0.05);
    }
    .megamenu__items { display: flex; flex-direction: column; gap: 2px; }
    .megamenu__item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 9px 10px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 130ms ease;
      text-decoration: none;
      color: inherit;
    }
    .megamenu__item:hover { background: #F8F9FF; }
    .megamenu__item:hover .megamenu__item-label { color: var(--accent); }
    .megamenu__item-icon {
      width: 32px; height: 32px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(59,130,246,0.08));
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      margin-top: 1px;
    }
    .megamenu__item-label {
      font-size: 0.8125rem;
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.3;
      transition: color 130ms ease;
    }
    .megamenu__item-desc {
      font-size: 0.7rem;
      color: var(--color-text-muted);
      line-height: 1.4;
      margin-top: 1px;
    }
    .megamenu__footer {
      margin: 8px 0 0;
      padding: 16px 28px;
      background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(59,130,246,0.04));
      border-top: 1px solid rgba(79,70,229,0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .megamenu__footer-text {
      font-size: 0.8125rem;
      color: var(--color-text-muted);
    }
    .megamenu__footer-text strong { color: var(--color-text); }
    .megamenu__footer-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 0.45rem 1.1rem;
      background: var(--accent);
      color: #fff !important;
      text-decoration: none !important;
      border-radius: var(--radius-full);
      font-size: 0.8rem;
      font-weight: 700;
      white-space: nowrap;
      transition: background 150ms ease, transform 150ms ease;
      flex-shrink: 0;
    }
    .megamenu__footer-cta:hover { background: var(--accent-hover); transform: translateY(-1px); }
    @media (max-width: 1000px) {
      .megamenu { display: none !important; }
    }

    /* ============================
       HERO
    ============================ */
    .hero {
      position: relative;
      overflow: hidden;
      padding-block: clamp(var(--space-16), 9vw, 110px);
      background: var(--color-bg);
    }
    .hero__mesh {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .hero__mesh::before {
      content: '';
      position: absolute;
      top: -15%;
      left: -5%;
      width: 55%;
      height: 65%;
      background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.09) 0%, transparent 70%);
      animation: meshDrift1 14s ease-in-out infinite alternate;
    }
    .hero__mesh::after {
      content: '';
      position: absolute;
      top: 15%;
      right: -10%;
      width: 45%;
      height: 55%;
      background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.07) 0%, transparent 70%);
      animation: meshDrift2 17s ease-in-out infinite alternate;
    }
    @keyframes meshDrift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(3%, 4%) scale(1.05); } }
    @keyframes meshDrift2 { from { transform: translate(0, 0) scale(1); } to { transform: translate(-4%, 3%) scale(1.06); } }

    .hero__breadcrumb {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      color: var(--color-text-faint);
      font-weight: 500;
      margin-bottom: var(--space-4);
    }
    .hero__breadcrumb span { color: var(--color-text-muted); }
    .hero__breadcrumb-sep {
      color: var(--color-border);
      font-size: 0.7rem;
    }
    .hero__breadcrumb-current {
      color: var(--accent-ai);
      font-weight: 700;
    }

    .hero__content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-10), 5vw, var(--space-20));
      align-items: center;
    }
    .hero__text { display: flex; flex-direction: column; gap: var(--space-6); }
    .hero__pill {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      background: rgba(139,92,246,0.1);
      border: 1px solid rgba(139,92,246,0.2);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 700;
      color: #7C3AED;
      width: fit-content;
      letter-spacing: 0.04em;
    }
    .hero__pill-dot {
      width: 6px;
      height: 6px;
      background: #7C3AED;
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.85); }
    }
    .hero__h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.04em;
      line-height: 1.1;
    }
    .hero__h1 span {
      background: linear-gradient(135deg, #7C3AED, var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero__sub {
      font-size: 1.125rem;
      color: var(--color-text-muted);
      line-height: 1.65;
      max-width: 50ch;
    }
    .hero__ctas {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      flex-wrap: wrap;
    }

    /* Hero visual — AI mockup */
    .hero__visual {
      position: relative;
    }
    .hero__mockup {
      background: var(--navy);
      border-radius: var(--radius-2xl);
      padding: var(--space-5) var(--space-5) var(--space-6);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
      position: relative;
      overflow: hidden;
    }
    .hero__mockup::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 70%;
      height: 70%;
      background: radial-gradient(ellipse, rgba(139,92,246,0.22) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Mockup top bar */
    .mock-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mock-dots { display: flex; gap: var(--space-2); }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-dot--red { background: #FF5F57; }
    .mock-dot--yellow { background: #FEBC2E; }
    .mock-dot--green { background: #28C840; }
    .mock-topbar-title {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.35);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    /* AI Mockup panels */
    .mock-ai-header {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      margin-bottom: var(--space-3);
    }
    .mock-ai-avatar {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: linear-gradient(135deg, #7C3AED, #4F46E5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }
    .mock-ai-contact-info { display: flex; flex-direction: column; gap: 3px; }
    .mock-ai-name {
      font-size: 12px;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
    }
    .mock-ai-role {
      font-size: 10px;
      color: rgba(255,255,255,0.4);
    }
    .mock-ai-badge {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      background: rgba(139,92,246,0.15);
      border: 1px solid rgba(139,92,246,0.3);
      border-radius: var(--radius-full);
      font-size: 9px;
      font-weight: 700;
      color: #C4B5FD;
    }
    .mock-ai-badge-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #A78BFA;
      animation: pulse 1.5s ease-in-out infinite;
    }

    /* AI Summary panel */
    .mock-summary-panel {
      background: rgba(139,92,246,0.07);
      border: 1px solid rgba(139,92,246,0.2);
      border-radius: var(--radius-xl);
      padding: var(--space-4);
      margin-bottom: var(--space-3);
    }
    .mock-summary-label {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #A78BFA;
      margin-bottom: var(--space-3);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .mock-summary-items {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .mock-summary-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 10px;
      color: rgba(255,255,255,0.65);
      line-height: 1.5;
    }
    .mock-summary-bullet {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #A78BFA;
      margin-top: 5px;
      flex-shrink: 0;
    }

    /* Icebreaker panel */
    .mock-icebreaker-panel {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-xl);
      padding: var(--space-3) var(--space-4);
    }
    .mock-icebreaker-label {
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.3);
      margin-bottom: var(--space-2);
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .mock-icebreaker-text {
      font-size: 10px;
      color: rgba(255,255,255,0.6);
      line-height: 1.6;
      font-style: italic;
    }
    .mock-icebreaker-text span {
      color: #C4B5FD;
      font-style: normal;
      font-weight: 600;
    }

    @media (max-width: 900px) {
      .hero__content { grid-template-columns: 1fr; }
      .hero__visual { display: none; }
    }
    @media (max-width: 600px) {
      .hero__h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
      .hero__ctas { flex-direction: column; align-items: flex-start; }
    }

    /* ============================
       AI FEATURES GRID (2×2, large)
    ============================ */
    .ai-features-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface);
    }
    .ai-features-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .ai-features-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .ai-features-section__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .ai-features-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
    @media (max-width: 700px) {
      .ai-features-grid { grid-template-columns: 1fr; }
    }
    .ai-feature-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-8);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
      position: relative;
      overflow: hidden;
    }
    .ai-feature-card::after {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 120px;
      height: 120px;
      background: radial-gradient(ellipse at top right, rgba(139,92,246,0.06) 0%, transparent 70%);
      pointer-events: none;
    }
    .ai-feature-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-3px);
      border-color: rgba(124,58,237,0.2);
    }
    .ai-feature-card__top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-4);
    }
    .ai-feature-card__icon {
      width: 54px;
      height: 54px;
      background: rgba(139,92,246,0.1);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #7C3AED;
      flex-shrink: 0;
    }
    .ai-feature-card__badge {
      display: inline-flex;
      align-items: center;
      padding: var(--space-1) var(--space-3);
      background: rgba(139,92,246,0.08);
      border: 1px solid rgba(139,92,246,0.15);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      font-weight: 700;
      color: #7C3AED;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .ai-feature-card__title {
      font-size: var(--text-lg);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
    }
    .ai-feature-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.7;
    }

    /* ============================
       WHY AI SECTION (dark navy)
    ============================ */
    .why-ai-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    .why-ai-section::before {
      content: '';
      position: absolute;
      top: -20%;
      left: -10%;
      width: 50%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(139,92,246,0.1) 0%, transparent 70%);
      pointer-events: none;
    }
    .why-ai-section::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 45%;
      height: 55%;
      background: radial-gradient(ellipse, rgba(79,70,229,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .why-ai-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
      position: relative;
      z-index: 1;
    }
    .why-ai-section__label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-bottom: var(--space-3);
    }
    .why-ai-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .why-ai-section__sub {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.55);
      max-width: 54ch;
      margin-inline: auto;
    }
    .why-ai-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
      position: relative;
      z-index: 1;
    }
    @media (max-width: 800px) {
      .why-ai-cards { grid-template-columns: 1fr; }
    }
    .why-ai-card {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: border-color var(--transition-interactive), background var(--transition-interactive);
    }
    .why-ai-card:hover {
      border-color: rgba(139,92,246,0.3);
      background: rgba(139,92,246,0.05);
    }
    .why-ai-card__stat {
      font-size: var(--text-xl);
      font-weight: 800;
      background: linear-gradient(135deg, #C4B5FD, #A78BFA);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .why-ai-card__title {
      font-size: var(--text-base);
      font-weight: 800;
      color: #fff;
      line-height: 1.3;
    }
    .why-ai-card__desc {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.5);
      line-height: 1.65;
    }

    /* ============================
       HOW IT WORKS (3 steps)
    ============================ */
    .how-it-works {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-bg);
    }
    .how-it-works__header {
      text-align: center;
      margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
    }
    .how-it-works__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-3);
    }
    .how-it-works__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .steps-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
      position: relative;
    }
    .steps-row::before {
      content: '';
      position: absolute;
      top: 28px;
      left: calc(33.333% - 24px);
      right: calc(33.333% - 24px);
      height: 2px;
      background: linear-gradient(90deg, rgba(124,58,237,0.2) 0%, rgba(124,58,237,0.4) 50%, rgba(124,58,237,0.2) 100%);
      pointer-events: none;
    }
    @media (max-width: 700px) {
      .steps-row::before { display: none; }
      .steps-row { grid-template-columns: 1fr; }
    }
    .step-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      position: relative;
      transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive);
    }
    .step-card:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(124,58,237,0.2);
    }
    .step-number {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, #7C3AED, #4F46E5);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25rem;
      font-weight: 800;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(124,58,237,0.35);
    }
    .step-title {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.3;
    }
    .step-desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.65;
    }

    /* ============================
       USE CASES
    ============================ */
    .use-cases {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface-2);
    }
    .use-cases__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-14));
    }
    .use-cases__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-3);
    }
    .use-cases__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .use-cases-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
    @media (max-width: 700px) {
      .use-cases-grid { grid-template-columns: 1fr; }
    }
    .use-case-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-8);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .use-case-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: rgba(124,58,237,0.2);
    }
    .use-case-card__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent-ai);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .use-case-card__title {
      font-size: var(--text-lg);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
    }
    .use-case-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.7;
    }
    .use-case-card__cta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--accent-ai);
      transition: gap var(--transition-interactive);
    }
    .use-case-card:hover .use-case-card__cta { gap: var(--space-3); }

    /* ============================
       FINAL CTA BANNER
    ============================ */
    .final-cta {
      background: linear-gradient(135deg, #2E1065 0%, #7C3AED 50%, #4F46E5 100%);
      padding-block: clamp(var(--space-20), 10vw, 120px);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .final-cta::before {
      content: '';
      position: absolute;
      top: -30%;
      left: -10%;
      width: 60%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -5%;
      width: 40%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta__content { position: relative; z-index: 1; }
    .final-cta__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .final-cta__sub {
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.75);
      margin-bottom: var(--space-8);
      max-width: 52ch;
      margin-inline: auto;
    }
    .final-cta__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }

    /* ============================
       FOOTER
    ============================ */
    .footer {
      background: var(--navy);
      padding-block: clamp(var(--space-16), 6vw, var(--space-20));
      color: rgba(255,255,255,0.6);
    }
    .footer__top {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
      gap: clamp(var(--space-8), 4vw, var(--space-12));
      margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
      padding-bottom: clamp(var(--space-10), 4vw, var(--space-12));
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .footer__logo {
      font-size: 1.5rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-2);
    }
    .footer__tagline {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.35);
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      margin-bottom: var(--space-5);
    }
    .footer__brand-desc {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.4);
      line-height: 1.7;
      max-width: 32ch;
    }
    .footer__col-title {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
      margin-bottom: var(--space-5);
    }
    .footer__links {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      list-style: none;
    }
    .footer__links a {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.45);
      transition: color var(--transition-interactive);
    }
    .footer__links a:hover { color: rgba(255,255,255,0.85); }
    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .footer__copy {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.3);
    }
    .footer__legal {
      display: flex;
      gap: var(--space-5);
    }
    .footer__legal a {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.3);
      transition: color var(--transition-interactive);
    }
    .footer__legal a:hover { color: rgba(255,255,255,0.6); }
    @media (max-width: 1000px) {
      .footer__top { grid-template-columns: 1fr 1fr 1fr; }
      .footer__brand { grid-column: 1 / -1; }
    }
    @media (max-width: 600px) {
      .footer__top { grid-template-columns: 1fr 1fr; }
    }

    /* ============================
       SCROLL REVEAL ANIMATIONS
    ============================ */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.6s var(--ease-out),
        transform 0.6s var(--ease-out);
    }
    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    .reveal--delay-1 { transition-delay: 0.1s; }
    .reveal--delay-2 { transition-delay: 0.2s; }
    .reveal--delay-3 { transition-delay: 0.3s; }
    .reveal--delay-4 { transition-delay: 0.4s; }
    .reveal--delay-5 { transition-delay: 0.5s; }

    /* ============================
       MISC UTILITIES
    ============================ */
    .text-center { text-align: center; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* Mockup top bar */
    .mock-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-4);
      padding-bottom: var(--space-3);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mock-dots { display: flex; gap: var(--space-2); }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-dot--red { background: #FF5F57; }
    .mock-dot--yellow { background: #FEBC2E; }
    .mock-dot--green { background: #28C840; }
    .mock-topbar-title {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.35);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    /* Mockup layout: sidebar + results */
    .mock-layout {
      display: grid;
      grid-template-columns: 140px 1fr;
      gap: var(--space-3);
    }

    /* Filter sidebar */
    .mock-sidebar {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .mock-sidebar-title {
      font-size: 9px;
      font-weight: 800;
      color: rgba(255,255,255,0.3);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--space-1);
    }
    .mock-filter {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-2);
    }
    .mock-filter-label {
      font-size: 9px;
      font-weight: 600;
      color: rgba(255,255,255,0.3);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .mock-filter-value {
      font-size: 10px;
      font-weight: 700;
      color: rgba(255,255,255,0.75);
    }
    .mock-filter-value--accent { color: #818CF8; }
    .mock-filter-add {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: var(--space-2);
      background: rgba(79,70,229,0.1);
      border: 1px dashed rgba(79,70,229,0.3);
      border-radius: var(--radius-md);
      font-size: 9px;
      font-weight: 700;
      color: #818CF8;
      cursor: pointer;
    }
    .mock-results-count {
      font-size: 9px;
      font-weight: 800;
      color: rgba(255,255,255,0.25);
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: var(--space-2);
    }
    .mock-results-count span { color: #818CF8; }

    /* Contact result cards */
    .mock-results { display: flex; flex-direction: column; gap: var(--space-2); }
    .mock-result {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-2);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius-lg);
      transition: border-color 150ms ease;
    }
    .mock-result:first-child {
      border-color: rgba(79,70,229,0.35);
      background: rgba(79,70,229,0.07);
    }
    .mock-avatar {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }
    .mock-result-info { flex: 1; min-width: 0; }
    .mock-result-name {
      font-size: 11px;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mock-result-meta {
      font-size: 9px;
      color: rgba(255,255,255,0.32);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mock-enrich-btn {
      padding: 3px 8px;
      background: var(--accent);
      border-radius: var(--radius-full);
      font-size: 9px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .mock-badge {
      padding: 3px 8px;
      border-radius: var(--radius-full);
      font-size: 9px;
      font-weight: 700;
      flex-shrink: 0;
    }
    .mock-badge--done {
      background: rgba(52, 211, 153, 0.15);
      color: #34D399;
      border: 1px solid rgba(52, 211, 153, 0.2);
    }
@media (max-width: 900px) {
      .hero__content { grid-template-columns: 1fr; }
      .hero__visual { display: none; }
    }
    @media (max-width: 600px) {
      .hero__h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
      .hero__ctas { flex-direction: column; align-items: flex-start; }
    }

    /* ============================
       FEATURES GRID
    ============================ */
    .features-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface);
    }
    .features-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .features-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .features-section__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .feature-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .feature-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: rgba(79,70,229,0.2);
    }
    .feature-card__icon {
      width: 48px;
      height: 48px;
      background: var(--accent-light);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .feature-card__title {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.3;
    }
    .feature-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.65;
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 580px) {
      .features-grid { grid-template-columns: 1fr; }
    }

.mock-topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-5);
      padding-bottom: var(--space-4);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .mock-dots { display: flex; gap: var(--space-2); }
    .mock-dot { width: 10px; height: 10px; border-radius: 50%; }
    .mock-dot--red { background: #FF5F57; }
    .mock-dot--yellow { background: #FEBC2E; }
    .mock-dot--green { background: #28C840; }
    .mock-topbar-title {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.35);
      font-weight: 500;
      letter-spacing: 0.04em;
    }

    /* Filter bar */
    .mock-filters {
      display: flex;
      gap: var(--space-2);
      margin-bottom: var(--space-4);
      flex-wrap: wrap;
    }
    .mock-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 700;
      border: 1px solid;
    }
    .mock-filter-chip--sector {
      background: rgba(79,70,229,0.15);
      border-color: rgba(79,70,229,0.3);
      color: #818CF8;
    }
    .mock-filter-chip--size {
      background: rgba(59,130,246,0.12);
      border-color: rgba(59,130,246,0.25);
      color: #60A5FA;
    }
    .mock-filter-chip--geo {
      background: rgba(52,211,153,0.1);
      border-color: rgba(52,211,153,0.2);
      color: #34D399;
    }
    .mock-filter-chip--tech {
      background: rgba(251,191,36,0.1);
      border-color: rgba(251,191,36,0.2);
      color: #FBBF24;
    }

    /* Results count */
    .mock-results-count {
      font-size: 10px;
      color: rgba(255,255,255,0.35);
      font-weight: 600;
      margin-bottom: var(--space-3);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    /* Company rows */
    .mock-companies { display: flex; flex-direction: column; gap: var(--space-2); }
    .mock-company {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3) var(--space-3);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius-lg);
      transition: background 150ms ease;
    }
    .mock-company:first-child {
      background: rgba(79,70,229,0.1);
      border-color: rgba(79,70,229,0.2);
    }
    .mock-company-logo {
      width: 32px;
      height: 32px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }
    .mock-company-info { flex: 1; min-width: 0; }
    .mock-company-name {
      font-size: var(--text-xs);
      font-weight: 700;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .mock-company-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: rgba(255,255,255,0.35);
    }
    .mock-company-meta-sep { color: rgba(255,255,255,0.15); }
    .mock-sector-badge {
      padding: 2px 7px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 700;
      background: rgba(79,70,229,0.2);
      color: #818CF8;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .mock-contacts-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 700;
      background: rgba(52,211,153,0.12);
      color: #34D399;
      border: 1px solid rgba(52,211,153,0.2);
      white-space: nowrap;
      flex-shrink: 0;
    }

    @media (max-width: 900px) {
      .hero__content { grid-template-columns: 1fr; }
      .hero__visual { display: none; }
    }
    @media (max-width: 600px) {
      .hero__h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
      .hero__ctas { flex-direction: column; align-items: flex-start; }
    }

    /* ============================
       FEATURES GRID SECTION
    ============================ */
    .features-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }
    .features-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .features-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .features-section__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .feature-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .feature-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: rgba(79,70,229,0.2);
    }
    .feature-card__icon {
      width: 48px;
      height: 48px;
      background: var(--accent-light);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .feature-card__title {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
    }
    .feature-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.6;
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) {
      .features-grid { grid-template-columns: 1fr; }
    }
.mock-search {
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-md);
      padding: var(--space-2) var(--space-3);
      display: flex;
      align-items: center;
      gap: var(--space-2);
      margin-bottom: var(--space-5);
    }
    .mock-search-text {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.4);
    }
    .mock-stats {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    .mock-stat {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-4);
    }
    .mock-stat-label {
      font-size: 10px;
      color: rgba(255,255,255,0.35);
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: var(--space-1);
    }
    .mock-stat-value {
      font-size: var(--text-lg);
      font-weight: 800;
      color: #fff;
      line-height: 1;
    }
    .mock-stat-value--accent { color: #818CF8; }
    .mock-stat-value--blue { color: #60A5FA; }
    .mock-stat-value--green { color: #34D399; }
    .mock-contacts { display: flex; flex-direction: column; gap: var(--space-2); }
    .mock-contact {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-3);
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--radius-lg);
    }
    .mock-contact-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }
    .mock-contact-info { flex: 1; min-width: 0; }
    .mock-contact-name {
      font-size: var(--text-xs);
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      margin-bottom: 2px;
    }
    .mock-contact-role {
      font-size: 10px;
      color: rgba(255,255,255,0.35);
    }
    .mock-badge {
      padding: 3px 8px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 700;
    }
    .mock-badge--enriched {
      background: rgba(52, 211, 153, 0.15);
      color: #34D399;
      border: 1px solid rgba(52, 211, 153, 0.2);
    }
    .mock-badge--pending {
      background: rgba(251, 191, 36, 0.12);
      color: #FBBF24;
      border: 1px solid rgba(251, 191, 36, 0.18);
    }

    @media (max-width: 900px) {
      .hero__content {
        grid-template-columns: 1fr;
      }
      .hero__visual { display: none; }
    }
    @media (max-width: 600px) {
      .hero__h1 { font-size: clamp(2rem, 8vw, 2.8rem); }
      .hero__ctas { flex-direction: column; align-items: flex-start; }
    }

    /* ============================
       TRUSTED BY STRIP
    ============================ */
    .trusted {
      padding-block: var(--space-12);
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }
    .trusted__inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: var(--space-6);
    }
    .trusted__label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-text-faint);
    }
    .trusted__logos {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(var(--space-8), 4vw, var(--space-16));
      flex-wrap: wrap;
    }
    .trusted__logo {
      font-size: var(--text-lg);
      font-weight: 800;
      color: var(--color-border);
      letter-spacing: -0.03em;
      transition: color var(--transition-interactive);
      user-select: none;
    }
    .trusted__logo:hover { color: var(--color-text-faint); }

    /* ============================
       FEATURE SECTIONS
    ============================ */
    .feature-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
    }
    .feature-section--alt { background: var(--color-surface); }
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(var(--space-12), 5vw, var(--space-20));
      align-items: center;
    }
    .feature-grid--reverse .feature-grid__content { order: 2; }
    .feature-grid--reverse .feature-grid__visual { order: 1; }
    .feature-grid__content {
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
    }
    .feature-grid__text { display: flex; flex-direction: column; gap: var(--space-4); }
    .feature-grid__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
    }
    .feature-grid__p {
      font-size: var(--text-base);
      color: var(--color-text-muted);
      line-height: 1.7;
    }
    .feature-mini-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
    }
    .feature-mini-card {
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
      padding: var(--space-4);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive);
    }
    .feature-section--alt .feature-mini-card { background: var(--color-surface-2); }
    .feature-mini-card:hover { box-shadow: var(--shadow-md); border-color: rgba(79,70,229,0.2); }
    .feature-mini-card__icon {
      width: 36px;
      height: 36px;
      background: var(--accent-light);
      border-radius: var(--radius-lg);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .feature-mini-card__label {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text);
    }
    .feature-mini-card__desc {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      line-height: 1.5;
    }
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .feature-list__item {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .feature-list__icon {
      width: 22px;
      height: 22px;
      background: var(--accent-light);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      flex-shrink: 0;
    }

    /* Dark visual card */
    .dark-card {
      background: var(--navy);
      border-radius: var(--radius-2xl);
      padding: var(--space-6);
      box-shadow: var(--shadow-xl);
      position: relative;
      overflow: hidden;
    }
    .dark-card::before {
      content: '';
      position: absolute;
      top: -30%;
      right: -20%;
      width: 60%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(79,70,229,0.2) 0%, transparent 70%);
      pointer-events: none;
    }

    /* Enrichment mock */
    .enrich-mock { position: relative; }
    .enrich-mock__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--space-5);
    }
    .enrich-mock__title {
      font-size: var(--text-sm);
      font-weight: 700;
      color: rgba(255,255,255,0.85);
    }
    .enrich-mock__status {
      display: flex;
      align-items: center;
      gap: var(--space-2);
      font-size: 11px;
      color: #34D399;
      font-weight: 600;
    }
    .enrich-mock__status-dot {
      width: 6px; height: 6px;
      background: #34D399;
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    .enrich-contact {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      padding: var(--space-4);
      background: rgba(255,255,255,0.05);
      border-radius: var(--radius-xl);
      margin-bottom: var(--space-4);
      border: 1px solid rgba(255,255,255,0.07);
    }
    .enrich-avatar {
      width: 48px; height: 48px;
      background: linear-gradient(135deg, #4F46E5, #3B82F6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }
    .enrich-name {
      font-size: var(--text-base);
      font-weight: 700;
      color: #fff;
      margin-bottom: 2px;
    }
    .enrich-role {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.45);
    }
    .enrich-fields {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .enrich-field {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-3) var(--space-4);
      background: rgba(255,255,255,0.04);
      border-radius: var(--radius-lg);
      border: 1px solid rgba(255,255,255,0.06);
    }
    .enrich-field__key {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.35);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .enrich-field__value {
      font-size: var(--text-xs);
      font-weight: 600;
      color: rgba(255,255,255,0.75);
      font-family: monospace;
    }
    .enrich-field__tag {
      padding: 2px 8px;
      border-radius: var(--radius-full);
      font-size: 10px;
      font-weight: 700;
    }
    .enrich-field__tag--found { background: rgba(52,211,153,0.15); color: #34D399; }
    .enrich-field__tag--verified { background: rgba(79,70,229,0.2); color: #818CF8; }

    /* LinkedIn mock */
    .linkedin-mock { position: relative; }
    .lk-profile {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--radius-xl);
      overflow: hidden;
    }
    .lk-cover {
      height: 64px;
      background: linear-gradient(135deg, rgba(79,70,229,0.4), rgba(59,130,246,0.4));
      position: relative;
    }
    .lk-avatar {
      width: 52px; height: 52px;
      background: linear-gradient(135deg, #4F46E5, #3B82F6);
      border-radius: 50%;
      border: 3px solid var(--navy);
      position: absolute;
      bottom: -26px;
      left: var(--space-4);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      color: #fff;
    }
    .lk-info {
      padding: var(--space-8) var(--space-4) var(--space-4);
    }
    .lk-name {
      font-size: var(--text-sm);
      font-weight: 700;
      color: rgba(255,255,255,0.9);
      margin-bottom: 2px;
    }
    .lk-title {
      font-size: 11px;
      color: rgba(255,255,255,0.4);
      margin-bottom: var(--space-3);
    }
    .lk-meta { display: flex; gap: var(--space-3); }
    .lk-meta-item {
      font-size: 10px;
      color: rgba(255,255,255,0.3);
    }
    .lk-import-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
      width: 100%;
      padding: var(--space-3);
      background: var(--accent);
      border-radius: var(--radius-lg);
      font-size: var(--text-xs);
      font-weight: 700;
      color: #fff;
      margin-top: var(--space-4);
      cursor: pointer;
      transition: background var(--transition-interactive);
    }
    .lk-import-btn:hover { background: var(--accent-hover); }
    .lk-list {
      margin-top: var(--space-4);
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }
    .lk-list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-2) var(--space-3);
      background: rgba(255,255,255,0.04);
      border-radius: var(--radius-md);
    }
    .lk-list-name {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.6);
    }
    .lk-list-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: var(--radius-full);
      background: rgba(79,70,229,0.2);
      color: #818CF8;
    }

    /* AI cards */
    .ai-cards-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .ai-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .ai-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: rgba(79,70,229,0.2); }
    .ai-card__icon {
      width: 48px; height: 48px;
      background: var(--accent-light);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .ai-card__title {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
    }
    .ai-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    @media (max-width: 900px) {
      .feature-grid {
        grid-template-columns: 1fr;
      }
      .feature-grid--reverse .feature-grid__content { order: 1; }
      .feature-grid--reverse .feature-grid__visual { order: 2; }
      .ai-cards-row { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .feature-mini-grid { grid-template-columns: 1fr; }
    }

    /* ============================
       WHY SAALZ — COMPARISON
    ============================ */
    .comparison {
      background: var(--navy);
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      position: relative;
      overflow: hidden;
    }
    .comparison::before {
      content: '';
      position: absolute;
      top: -20%;
      left: -10%;
      width: 50%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(79,70,229,0.15) 0%, transparent 65%);
      pointer-events: none;
    }
    .comparison::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 40%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(59,130,246,0.10) 0%, transparent 65%);
      pointer-events: none;
    }
    .comparison__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .comparison__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .comparison__sub {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.5);
    }
    .comparison__cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
      position: relative;
      z-index: 1;
    }
    .comparison__col {
      border-radius: var(--radius-2xl);
      padding: clamp(var(--space-6), 3vw, var(--space-10));
    }
    .comparison__col--without {
      background: rgba(239, 68, 68, 0.06);
      border: 1px solid rgba(239, 68, 68, 0.15);
    }
    .comparison__col--with {
      background: rgba(79, 70, 229, 0.10);
      border: 1px solid rgba(79, 70, 229, 0.25);
    }
    .comparison__col-title {
      font-size: var(--text-lg);
      font-weight: 800;
      margin-bottom: var(--space-6);
    }
    .comparison__col--without .comparison__col-title { color: #F87171; }
    .comparison__col--with .comparison__col-title { color: #818CF8; }
    .comparison__items {
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .comparison__item {
      display: flex;
      align-items: flex-start;
      gap: var(--space-3);
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.7);
      line-height: 1.5;
    }
    .comparison__item-icon {
      width: 20px; height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .comparison__item-icon--x { background: rgba(239,68,68,0.2); color: #F87171; }
    .comparison__item-icon--check { background: rgba(79,70,229,0.2); color: #818CF8; }
    .comparison__banner {
      margin-top: clamp(var(--space-10), 4vw, var(--space-16));
      background: linear-gradient(135deg, #312E81, #4F46E5, #3B82F6);
      border-radius: var(--radius-2xl);
      padding: clamp(var(--space-8), 4vw, var(--space-12));
      text-align: center;
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    .comparison__banner::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.05) 100%);
    }
    .comparison__banner-text {
      font-size: var(--text-lg);
      font-weight: 800;
      color: #fff;
      margin-bottom: var(--space-2);
      position: relative;
      z-index: 1;
    }
    .comparison__banner-sub {
      font-size: var(--text-sm);
      color: rgba(255,255,255,0.7);
      margin-bottom: var(--space-6);
      position: relative;
      z-index: 1;
    }
    .comparison__banner-cta { position: relative; z-index: 1; }

    @media (max-width: 700px) {
      .comparison__cols { grid-template-columns: 1fr; }
    }

    /* ============================
       PRICING PREVIEW
    ============================ */
    .pricing-preview {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-bg);
    }
    .pricing-preview__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .pricing-preview__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .pricing-preview__sub {
      font-size: var(--text-lg);
      color: var(--color-text-muted);
    }
    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-5);
      align-items: start;
    }
    .pricing-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      position: relative;
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
    }
    .pricing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .pricing-card--popular {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg);
      transform: scale(1.02);
    }
    .pricing-card--popular:hover { transform: scale(1.02) translateY(-2px); }
    .pricing-card__badge {
      position: absolute;
      top: -13px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--accent);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: var(--radius-full);
      letter-spacing: 0.04em;
      white-space: nowrap;
    }
    .pricing-card__name {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
    }
    .pricing-card__price-row {
      display: flex;
      align-items: baseline;
      gap: var(--space-1);
    }
    .pricing-card__price {
      font-size: clamp(2rem, 4vw, 2.5rem);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.04em;
      line-height: 1;
    }
    .pricing-card__period {
      font-size: var(--text-sm);
      color: var(--color-text-faint);
      font-weight: 500;
    }
    .pricing-card__credits {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      padding: var(--space-2) var(--space-3);
      background: var(--color-surface-2);
      border-radius: var(--radius-md);
      font-weight: 600;
    }
    .pricing-card .btn { width: 100%; justify-content: center; }
    .pricing-preview__link {
      text-align: center;
      margin-top: var(--space-8);
    }
    .pricing-preview__link a {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--accent);
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color var(--transition-interactive);
    }
    .pricing-preview__link a:hover { color: var(--accent-hover); }

    @media (max-width: 1000px) {
      .pricing-cards { grid-template-columns: repeat(2, 1fr); }
      .pricing-card--popular { transform: none; }
    }
    @media (max-width: 600px) {
      .pricing-cards { grid-template-columns: 1fr; }
    }

    /* ============================
       TESTIMONIALS
    ============================ */
    .testimonials {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface);
    }
    .testimonials__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .testimonials__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-3);
    }
    .testimonials__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .testimonials__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-6);
    }
    .testimonial-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
    }
    .testimonial-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .testimonial-card__stars {
      display: flex;
      gap: 3px;
      color: #F59E0B;
    }
    .testimonial-card__quote {
      font-size: var(--text-base);
      color: var(--color-text);
      line-height: 1.7;
      font-style: italic;
      flex: 1;
    }
    .testimonial-card__quote::before { content: '"'; }
    .testimonial-card__quote::after { content: '"'; }
    .testimonial-card__author {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    .testimonial-card__avatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--text-sm);
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }
    .testimonial-card__name {
      font-size: var(--text-sm);
      font-weight: 800;
      color: var(--navy);
    }
    .testimonial-card__role {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
    }

    @media (max-width: 900px) {
      .testimonials__grid { grid-template-columns: 1fr; }
    }

    /* ============================
       FAQ
    ============================ */
    .faq {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-bg);
    }
    .faq__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-14));
    }
    .faq__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
    }
    .faq__list {
      max-width: 720px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
    }
    .faq__item {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      overflow: hidden;
      transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
    }
    .faq__item[open] {
      border-color: rgba(79,70,229,0.25);
      box-shadow: var(--shadow-md);
    }
    .faq__question {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--space-5) var(--space-6);
      cursor: pointer;
      list-style: none;
      font-size: var(--text-base);
      font-weight: 700;
      color: var(--navy);
      gap: var(--space-4);
      user-select: none;
    }
    .faq__question::-webkit-details-marker { display: none; }
    .faq__question:hover { background: var(--color-bg); }
    .faq__icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: var(--accent-light);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: transform var(--transition-interactive), background var(--transition-interactive);
    }
    .faq__item[open] .faq__icon {
      transform: rotate(45deg);
      background: var(--accent);
      color: #fff;
    }
    .faq__answer {
      padding: 0 var(--space-6) var(--space-5);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.7;
    }

    /* ============================
       FINAL CTA
    ============================ */
    .final-cta {
      background: linear-gradient(135deg, #312E81 0%, #4F46E5 50%, #3B82F6 100%);
      padding-block: clamp(var(--space-20), 10vw, 120px);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .final-cta::before {
      content: '';
      position: absolute;
      top: -30%;
      left: -10%;
      width: 60%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -5%;
      width: 40%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta__content { position: relative; z-index: 1; }
    .final-cta__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .final-cta__sub {
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.75);
      margin-bottom: var(--space-8);
      max-width: 52ch;
      margin-inline: auto;
    }
    .final-cta__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .hero__social-proof {
      display: flex;
      align-items: center;
      gap: var(--space-3);
      font-size: var(--text-sm);
      color: var(--color-text-muted);
    }
    .hero__avatars {
      display: flex;
    }
    .hero__avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid #fff;
      margin-left: -8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
    }
    .hero__avatar:first-child { margin-left: 0; }
    .hero__avatar--1 { background: linear-gradient(135deg, #4F46E5, #7C3AED); }
    .hero__avatar--2 { background: linear-gradient(135deg, #3B82F6, #06B6D4); }
    .hero__avatar--3 { background: linear-gradient(135deg, #10B981, #059669); }
    .hero__avatar--4 { background: linear-gradient(135deg, #F59E0B, #EF4444); }
    .hero__stars {
      display: flex;
      gap: 2px;
      color: #F59E0B;
    }

    /* Hero mockup */
    .hero__visual {
      position: relative;
    }
    .hero__mockup {
      background: var(--navy);
      border-radius: var(--radius-2xl);
      padding: var(--space-6);
      box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,0.05);
      position: relative;
      overflow: hidden;
    }
    .hero__mockup::before {
      content: '';
      position: absolute;
      top: -40%;
      right: -20%;
      width: 70%;
      height: 70%;
      background: radial-gradient(ellipse, rgba(79,70,229,0.25) 0%, transparent 70%);
      pointer-events: none;
    }
/* ============================
       KEY STATS SECTION
    ============================ */
    .stats-section {
      padding-block: clamp(var(--space-12), 6vw, var(--space-16));
      background: var(--color-surface);
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-5);
    }
    @media (max-width: 900px) {
      .stats-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 500px) {
      .stats-grid { grid-template-columns: 1fr; }
    }
    .stat-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-6) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-3);
      transition: box-shadow var(--transition-interactive), border-color var(--transition-interactive), transform var(--transition-interactive);
    }
    .stat-card:hover {
      box-shadow: var(--shadow-md);
      border-color: rgba(59,130,246,0.2);
      transform: translateY(-2px);
    }
    .stat-card__icon {
      width: 44px;
      height: 44px;
      background: rgba(59,130,246,0.08);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent-2);
    }
    .stat-card__value {
      font-size: var(--text-xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .stat-card__label {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--navy);
      line-height: 1.3;
    }
    .stat-card__desc {
      font-size: var(--text-xs);
      color: var(--color-text-muted);
      line-height: 1.6;
    }

    /* ============================
       CASCADE SECTION (dark navy)
    ============================ */
    .cascade-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    .cascade-section::before {
      content: '';
      position: absolute;
      top: -20%;
      left: -10%;
      width: 50%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(59,130,246,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .cascade-section::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -10%;
      width: 45%;
      height: 55%;
      background: radial-gradient(ellipse, rgba(79,70,229,0.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .cascade-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-12), 5vw, var(--space-16));
      position: relative;
      z-index: 1;
    }
    .cascade-section__label {
      font-size: var(--text-xs);
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      margin-bottom: var(--space-3);
    }
    .cascade-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .cascade-section__sub {
      font-size: var(--text-base);
      color: rgba(255,255,255,0.55);
      max-width: 54ch;
      margin-inline: auto;
    }
    .cascade-steps {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
      position: relative;
      z-index: 1;
    }
    .cascade-steps::before {
      content: '';
      position: absolute;
      top: 32px;
      left: calc(12.5% + 12px);
      right: calc(12.5% + 12px);
      height: 2px;
      background: linear-gradient(90deg, rgba(59,130,246,0.2), rgba(79,70,229,0.5), rgba(59,130,246,0.2));
      pointer-events: none;
    }
    @media (max-width: 800px) {
      .cascade-steps { grid-template-columns: 1fr 1fr; }
      .cascade-steps::before { display: none; }
    }
    @media (max-width: 500px) {
      .cascade-steps { grid-template-columns: 1fr; }
    }
    .cascade-step {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--radius-2xl);
      padding: var(--space-6) var(--space-5);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: border-color var(--transition-interactive), background var(--transition-interactive);
    }
    .cascade-step:hover {
      border-color: rgba(59,130,246,0.3);
      background: rgba(59,130,246,0.05);
    }
    .cascade-step__num {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: linear-gradient(135deg, #3B82F6, #4F46E5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 800;
      color: #fff;
      box-shadow: 0 4px 12px rgba(59,130,246,0.4);
      flex-shrink: 0;
    }
    .cascade-step__title {
      font-size: var(--text-sm);
      font-weight: 800;
      color: #fff;
      line-height: 1.3;
    }
    .cascade-step__desc {
      font-size: var(--text-xs);
      color: rgba(255,255,255,0.5);
      line-height: 1.65;
    }
    .cascade-note {
      position: relative;
      z-index: 1;
      margin-top: var(--space-8);
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-2);
    }
    .cascade-note__badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-2) var(--space-4);
      background: rgba(59,130,246,0.1);
      border: 1px solid rgba(59,130,246,0.25);
      border-radius: var(--radius-full);
      font-size: var(--text-xs);
      color: #93C5FD;
      font-weight: 600;
    }

    /* ============================
       FEATURES GRID
    ============================ */
    .features-section {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface);
    }
    .features-section__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
    }
    .features-section__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .features-section__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-5);
    }
    .feature-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      display: flex;
      flex-direction: column;
      gap: var(--space-4);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .feature-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: rgba(79,70,229,0.2);
    }
    .feature-card__icon {
      width: 48px;
      height: 48px;
      background: var(--accent-light);
      border-radius: var(--radius-xl);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
    }
    .feature-card__title {
      font-size: var(--text-base);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.3;
    }
    .feature-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.65;
    }
    @media (max-width: 900px) {
      .features-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 580px) {
      .features-grid { grid-template-columns: 1fr; }
    }

    /* ============================
       USE CASES
    ============================ */
    .use-cases {
      padding-block: clamp(var(--space-16), 8vw, var(--space-24));
      background: var(--color-surface-2);
    }
    .use-cases__header {
      text-align: center;
      margin-bottom: clamp(var(--space-10), 5vw, var(--space-14));
    }
    .use-cases__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: var(--navy);
      letter-spacing: -0.03em;
      margin-bottom: var(--space-3);
    }
    .use-cases__sub {
      font-size: var(--text-base);
      color: var(--color-text-muted);
    }
    .use-cases-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-6);
    }
    @media (max-width: 700px) {
      .use-cases-grid { grid-template-columns: 1fr; }
    }
    .use-case-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-8);
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
      transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive);
    }
    .use-case-card:hover {
      box-shadow: var(--shadow-lg);
      transform: translateY(-2px);
      border-color: rgba(79,70,229,0.2);
    }
    .use-case-card__eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--accent-2);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .use-case-card__title {
      font-size: var(--text-lg);
      font-weight: 800;
      color: var(--navy);
      line-height: 1.25;
    }
    .use-case-card__desc {
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      line-height: 1.7;
    }
    .use-case-card__cta {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--accent);
      transition: gap var(--transition-interactive);
    }
    .use-case-card:hover .use-case-card__cta { gap: var(--space-3); }

    /* ============================
       FINAL CTA BANNER
    ============================ */
    .final-cta {
      background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 50%, #4F46E5 100%);
      padding-block: clamp(var(--space-20), 10vw, 120px);
      position: relative;
      overflow: hidden;
      text-align: center;
    }
    .final-cta::before {
      content: '';
      position: absolute;
      top: -30%;
      left: -10%;
      width: 60%;
      height: 80%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta::after {
      content: '';
      position: absolute;
      bottom: -20%;
      right: -5%;
      width: 40%;
      height: 60%;
      background: radial-gradient(ellipse, rgba(255,255,255,0.05) 0%, transparent 65%);
      pointer-events: none;
    }
    .final-cta__content { position: relative; z-index: 1; }
    .final-cta__h2 {
      font-size: var(--text-2xl);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      margin-bottom: var(--space-4);
    }
    .final-cta__sub {
      font-size: var(--text-lg);
      color: rgba(255,255,255,0.75);
      margin-bottom: var(--space-8);
      max-width: 52ch;
      margin-inline: auto;
    }
    .final-cta__actions {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
/* =========================================
       HERO
    ========================================= */
    .hero {
      position: relative;
      overflow: hidden;
      background: var(--bg);
      padding: 100px 24px 80px;
      text-align: center;
    }
    /* Animated gradient mesh background */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 700px 500px at 20% 30%, rgba(79,70,229,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 80% 20%, rgba(99,102,241,0.03) 0%, transparent 70%),
        radial-gradient(ellipse 600px 400px at 60% 80%, rgba(59,130,246,0.04) 0%, transparent 70%),
        radial-gradient(ellipse 400px 300px at 10% 80%, rgba(129,140,248,0.03) 0%, transparent 70%);
      animation: meshMove 12s ease-in-out infinite alternate;
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 300px 300px at 50% 50%, rgba(79,70,229,0.025) 0%, transparent 70%);
      animation: meshMove2 8s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes meshMove {
      0%   { transform: translate(0, 0) scale(1); }
      33%  { transform: translate(20px, -15px) scale(1.02); }
      66%  { transform: translate(-10px, 20px) scale(0.98); }
      100% { transform: translate(15px, 10px) scale(1.01); }
    }
    @keyframes meshMove2 {
      0%   { transform: translate(0, 0) scale(1); opacity: 1; }
      50%  { transform: translate(-25px, 15px) scale(1.05); opacity: 0.7; }
      100% { transform: translate(20px, -20px) scale(0.95); opacity: 1; }
    }
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 760px;
      margin: 0 auto;
    }
    .hero h1 {
      font-size: clamp(36px, 4.5vw, 60px);
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1.05;
      color: var(--text);
      margin-bottom: 24px;
    }
    .hero h1 span { color: var(--accent); }
    .hero-subtitle {
      font-size: 18px;
      color: var(--text-muted);
      max-width: 560px;
      margin: 0 auto 40px;
      line-height: 1.65;
    }

    /* Billing Toggle */
    .billing-toggle {
      display: inline-flex;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 100px;
      padding: 4px;
      gap: 4px;
      align-items: center;
    }
    .billing-toggle button {
      font-family: var(--font);
      font-size: 14px;
      font-weight: 600;
      padding: 8px 20px;
      border-radius: 100px;
      border: none;
      cursor: pointer;
      background: transparent;
      color: var(--text-muted);
      transition: background .2s, color .2s;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .billing-toggle button.active {
      background: var(--accent);
      color: #fff;
    }
    .annual-badge {
      background: var(--success);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 100px;
      letter-spacing: .02em;
    }

    /* =========================================
       PRICING SECTION
    ========================================= */
    .pricing-section {
      padding: 0 24px 80px;
      background: var(--bg);
    }
    .pricing-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1.2fr 1fr;
      gap: 16px;
      align-items: start;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Base card */
    .plan-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 28px 24px;
      position: relative;
      transition: box-shadow .2s;
    }
    .plan-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.06); }

    /* Free card */
    .card-free {
      background: var(--bg);
    }

    /* Enterprise card */
    .card-enterprise {
      background: var(--bg);
    }

    /* SCALE card — featured */
    .card-scale {
      background: linear-gradient(145deg, #312E81 0%, #4F46E5 50%, #3B82F6 100%);
      border: none;
      box-shadow: 0 20px 60px rgba(79,70,229,.35), 0 4px 16px rgba(0,0,0,.1);
      padding: 36px 28px 28px;
    }
    .card-scale:hover {
      box-shadow: 0 24px 72px rgba(79,70,229,.4), 0 6px 20px rgba(0,0,0,.12);
    }

    .plan-badge-top {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: #fff;
      color: var(--accent);
      font-size: 11px;
      font-weight: 800;
      padding: 4px 14px;
      border-radius: 100px;
      letter-spacing: .06em;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(79,70,229,.15);
    }

    .plan-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .card-scale .plan-label { color: rgba(255,255,255,.65); }

    .plan-price-row {
      display: flex;
      align-items: baseline;
      gap: 4px;
      margin-bottom: 8px;
    }
    .plan-price-currency {
      font-size: 22px;
      font-weight: 700;
      color: var(--text);
      line-height: 1;
    }
    .card-scale .plan-price-currency { color: #fff; }

    .plan-price-amount {
      font-size: 44px;
      font-weight: 800;
      color: var(--text);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .card-scale .plan-price-amount { color: #fff; }

    .plan-price-period {
      font-size: 14px;
      font-weight: 500;
      color: var(--text-muted);
    }
    .card-scale .plan-price-period { color: rgba(255,255,255,.6); }

    .plan-desc {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 20px;
    }
    .card-scale .plan-desc { color: rgba(255,255,255,.75); }

    /* Credits badge */
    .credits-badge {
      display: inline-block;
      font-size: 12px;
      font-weight: 600;
      padding: 5px 12px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .credits-badge-neutral {
      background: #F1F5F9;
      color: var(--text-muted);
    }
    .credits-badge-indigo {
      background: var(--accent-soft);
      color: var(--accent);
    }

    /* Credits selector */
    .credits-selector-wrap {
      margin-bottom: 20px;
    }
    .credits-selector-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      color: var(--text-faint);
      margin-bottom: 6px;
    }
    .card-scale .credits-selector-label { color: rgba(255,255,255,.55); }

    .credits-selector-wrap select {
      width: 100%;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 500;
      padding: 9px 12px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%2364748B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      padding-right: 32px;
      outline: none;
      transition: border-color .2s;
    }
    .credits-selector-wrap select:focus { border-color: var(--accent); }

    .card-scale .credits-selector-wrap select {
      background-color: rgba(255,255,255,.12);
      background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='rgba(255,255,255,0.7)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      border: 1.5px solid rgba(255,255,255,.25);
      color: #fff;
    }
    .card-scale .credits-selector-wrap select option { background: #312E81; }

    /* CTA buttons */
    .plan-cta {
      display: block;
      width: 100%;
      text-align: center;
      font-family: var(--font);
      font-size: 14px;
      font-weight: 700;
      padding: 12px;
      border-radius: 10px;
      cursor: pointer;
      border: none;
      transition: all .2s;
      margin-bottom: 24px;
      letter-spacing: -.01em;
    }
    .cta-outline {
      background: transparent;
      border: 1.5px solid var(--border);
      color: var(--text);
    }
    .cta-outline:hover {
      border-color: var(--accent);
      color: var(--accent);
    }
    .cta-indigo {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 8px rgba(79,70,229,.25);
    }
    .cta-indigo:hover {
      background: var(--accent-dark);
      transform: translateY(-1px);
      box-shadow: 0 4px 16px rgba(79,70,229,.35);
    }
    .cta-scale {
      background: #fff;
      color: var(--accent);
      font-weight: 800;
      box-shadow: 0 2px 12px rgba(0,0,0,.12);
    }
    .cta-scale:hover {
      background: #F8F8FF;
      transform: translateY(-1px);
      box-shadow: 0 4px 20px rgba(0,0,0,.16);
    }

    /* Feature list */
    .feature-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px;
      margin-bottom: 20px;
    }
    .feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
      line-height: 1.4;
    }
    .feature-list li.inherited {
      color: var(--text-faint);
    }
    .card-scale .feature-list li {
      color: rgba(255,255,255,.85);
    }
    .card-scale .feature-list li.inherited {
      color: rgba(255,255,255,.45);
    }
    .feature-check {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .check-indigo { color: var(--accent); }
    .check-white { color: #fff; }

    /* Usage block */
    .extra-user-note {
      margin-top: 10px;
      font-size: 0.72rem;
      color: var(--color-text-faint);
      text-align: center;
      letter-spacing: 0.01em;
    }
    .extra-user-price {
      font-weight: 700;
      color: var(--color-text-muted);
    }
    .plan-card--scale .extra-user-note,
    .card-scale .extra-user-note {
      color: rgba(255, 255, 255, 0.6);
    }
    .plan-card--scale .extra-user-price,
    .card-scale .extra-user-price {
      color: #ffffff;
    }
    .usage-block {
      background: #F1F5F9;
      border-radius: 10px;
      padding: 14px 16px;
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.6;
    }
    .card-scale .usage-block {
      background: rgba(0,0,0,.18);
      color: rgba(255,255,255,.7);
    }
    .usage-block-dot {
      display: inline-block;
      width: 4px;
      height: 4px;
      background: var(--text-faint);
      border-radius: 50%;
      vertical-align: middle;
      margin: 0 6px;
    }
    .card-scale .usage-block-dot { background: rgba(255,255,255,.3); }

    /* =========================================
       DATABASE BANNER
    ========================================= */
    .db-section {
      background: #0F172A;
      padding: 72px 24px;
    }
    .db-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 64px;
    }
    .db-left { flex: 1; min-width: 0; }
    .db-icon-wrap {
      width: 52px;
      height: 52px;
      background: var(--accent);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
    }
    .db-left h2 {
      font-size: clamp(24px, 3vw, 34px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.03em;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .db-left h2 span { color: var(--accent-mid); }
    .db-left p {
      font-size: 15px;
      color: rgba(255,255,255,.5);
      line-height: 1.7;
      max-width: 520px;
    }
    .db-right {
      display: flex;
      gap: 40px;
      flex-shrink: 0;
    }
    .db-stat {
      text-align: center;
    }
    .db-stat-number {
      font-size: 42px;
      font-weight: 800;
      color: var(--accent-mid);
      letter-spacing: -0.04em;
      line-height: 1;
      display: block;
    }
    .db-stat-label {
      font-size: 12px;
      color: rgba(255,255,255,.45);
      font-weight: 500;
      margin-top: 6px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    /* =========================================
       CREDITS SECTION
    ========================================= */
    .credits-section {
      background: var(--bg);
      padding: 80px 24px;
    }
    .credits-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    .section-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .section-h2 {
      font-size: clamp(26px, 3.5vw, 38px);
      font-weight: 800;
      color: var(--text);
      letter-spacing: -0.03em;
      line-height: 1.15;
      margin-bottom: 12px;
    }
    .section-h2 span { color: var(--accent); }
    .section-desc {
      font-size: 15px;
      color: var(--text-muted);
      margin-bottom: 40px;
      max-width: 480px;
    }
    .credits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .credits-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-left: 3px solid var(--accent);
      border-radius: 12px;
      padding: 24px;
      transition: box-shadow .2s;
    }
    .credits-card:hover { box-shadow: 0 4px 16px rgba(79,70,229,.08); }
    .credits-card-icon {
      width: 36px;
      height: 36px;
      background: var(--accent-soft);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
      color: var(--accent);
    }
    .credits-card h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }
    .credits-card p {
      font-size: 13px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* =========================================
       COST TABLE
    ========================================= */
    .cost-section {
      background: var(--bg);
      padding: 0 24px 80px;
    }
    .cost-inner {
      max-width: 860px;
      margin: 0 auto;
    }
    .cost-table-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 2px 16px rgba(0,0,0,.04);
    }
    .cost-table {
      width: 100%;
      border-collapse: collapse;
    }
    .cost-table thead tr {
      background: #F8FAFF;
      border-bottom: 1px solid var(--border);
    }
    .cost-table thead th {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--text-faint);
      padding: 14px 20px;
      text-align: left;
    }
    .cost-table tbody tr {
      border-bottom: 1px solid #F1F5F9;
      transition: background .15s;
    }
    .cost-table tbody tr:last-child { border-bottom: none; }
    .cost-table tbody tr:hover { background: #FAFBFF; }
    .cost-table td {
      padding: 16px 20px;
      font-size: 13.5px;
      vertical-align: middle;
    }
    .cost-table td:first-child { font-weight: 600; color: var(--text); }
    .cost-table td.data-desc { color: var(--text-muted); font-weight: 400; font-size: 12.5px; }
    .cost-badge {
      display: inline-block;
      background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
      color: var(--accent);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 14px;
      border-radius: 100px;
      white-space: nowrap;
    }
    .cost-table-disclaimer {
      font-size: 12px;
      color: var(--text-faint);
      padding: 14px 20px;
      border-top: 1px solid #F1F5F9;
      font-style: italic;
    }

    /* =========================================
       WHY SAALZ
    ========================================= */
    .why-section {
      background: var(--surface);
      padding: 80px 24px;
    }
    .why-inner {
      max-width: 1200px;
      margin: 0 auto;
    }
    .why-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .why-card {
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px 24px;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      background: var(--surface);
    }
    .why-card:hover {
      border-color: var(--accent);
      box-shadow: 0 4px 20px rgba(79,70,229,.08);
      transform: translateY(-3px);
    }
    .why-icon-box {
      width: 44px;
      height: 44px;
      background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
      color: var(--accent);
    }
    .why-card h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
    }
    .why-card p {
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.55;
    }

    /* =========================================
       COMPARE SECTION
    ========================================= */
    .compare-section {
      background: #0F172A;
      padding: 80px 24px;
    }
    .compare-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 45% 55%;
      gap: 64px;
      align-items: center;
    }
    .compare-left h2 {
      font-size: clamp(28px, 3.5vw, 44px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .compare-left p {
      font-size: 15px;
      color: rgba(255,255,255,.6);
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .compare-cta {
      display: inline-block;
      background: var(--accent);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 13px 28px;
      border-radius: 10px;
      margin-top: 12px;
      transition: background .2s, transform .15s;
    }
    .compare-cta:hover { background: var(--accent-dark); transform: translateY(-1px); }
    .compare-items {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .compare-item {
      display: flex;
      align-items: center;
      gap: 16px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px;
      padding: 16px 20px;
    }
    .compare-check {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      background: linear-gradient(135deg, #4F46E5, #3B82F6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .compare-item-text {
      font-size: 14px;
      font-weight: 600;
      color: rgba(255,255,255,.85);
    }

    /* =========================================
       FAQ
    ========================================= */
    .faq-section {
      background: var(--bg);
      padding: 80px 24px;
    }
    .faq-inner {
      max-width: 1100px;
      margin: 0 auto;
    }
    .faq-header {
      text-align: center;
      margin-bottom: 48px;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .faq-question {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 18px 20px;
      cursor: pointer;
      gap: 12px;
      user-select: none;
    }
    .faq-question-text {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      line-height: 1.4;
    }
    .faq-toggle {
      font-size: 18px;
      font-weight: 700;
      color: #F59E0B;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1.5px solid #FEF3C7;
      background: #FFFBEB;
      font-size: 16px;
      line-height: 1;
      transition: transform .2s;
    }
    .faq-item.open .faq-toggle {
      transform: rotate(45deg);
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .35s ease, padding .25s ease;
    }
    .faq-item.open .faq-answer {
      max-height: 300px;
    }
    .faq-answer-inner {
      padding: 0 20px 18px;
      font-size: 13.5px;
      color: var(--text-muted);
      line-height: 1.65;
    }
    /* =========================================
       BOTTOM CTA
    ========================================= */
    .bottom-cta {
      background: linear-gradient(135deg, #312E81 0%, #4F46E5 60%, #3B82F6 100%);
      padding: 96px 24px;
      text-align: center;
    }
    .bottom-cta h2 {
      font-size: clamp(30px, 4vw, 52px);
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.04em;
      line-height: 1.1;
      margin-bottom: 16px;
    }
    .bottom-cta h2 span { color: #A5B4FC; }
    .bottom-cta p {
      font-size: 16px;
      color: rgba(255,255,255,.7);
      margin-bottom: 36px;
    }
    .bottom-cta-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      flex-wrap: wrap;
    }
    .btn-white {
      background: #fff;
      color: var(--accent);
      font-family: var(--font);
      font-size: 15px;
      font-weight: 700;
      padding: 13px 28px;
      border-radius: 10px;
      border: none;
      cursor: pointer;
      transition: background .2s, transform .15s;
    }
    .btn-white:hover { background: #F5F3FF; transform: translateY(-1px); }
    .btn-outline-white {
      background: transparent;
      color: #fff;
      font-family: var(--font);
      font-size: 15px;
      font-weight: 700;
      padding: 12px 28px;
      border-radius: 10px;
      border: 1.5px solid rgba(255,255,255,.4);
      cursor: pointer;
      transition: border-color .2s, transform .15s;
    }
    .btn-outline-white:hover { border-color: rgba(255,255,255,.8); transform: translateY(-1px); }

    /* ── COMPARISON TABLE ── */
    .comparison-section {
      padding: 5rem 0 6rem;
      background: #F8F9FC;
    }
    .comparison-header {
      text-align: center;
      margin-bottom: 3rem;
    }
    .comparison-header h2 {
      font-size: clamp(1.75rem, 3.5vw, 2.5rem);
      font-weight: 800;
      color: var(--navy);
      margin: 0.75rem 0 0.5rem;
      letter-spacing: -0.02em;
    }
    .comparison-subtitle {
      color: var(--color-text-muted);
      font-size: 1.0625rem;
      max-width: 560px;
      margin: 0 auto;
    }
    .comparison-table-wrapper {
      overflow-x: auto;
      border-radius: 16px;
      border: 1px solid var(--color-border);
      background: white;
      box-shadow: 0 4px 24px rgba(15,23,42,0.06);
    }
    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.9rem;
    }
    .comparison-table th {
      padding: 1.25rem 1rem;
      text-align: center;
      font-weight: 700;
      font-size: 0.9375rem;
      color: var(--navy);
      border-bottom: 2px solid var(--color-border);
      white-space: nowrap;
    }
    .comparison-table th:first-child {
      text-align: left;
      width: 35%;
      padding-left: 1.5rem;
    }
    .comparison-table th.th-scale {
      background: linear-gradient(145deg, #312E81, #4F46E5);
      color: white;
      border-radius: 0;
    }
    .comparison-table td {
      padding: 0.75rem 1rem;
      text-align: center;
      border-bottom: 1px solid var(--color-border);
      color: var(--color-text);
      vertical-align: middle;
    }
    .comparison-table td:first-child {
      text-align: left;
      padding-left: 1.5rem;
      color: var(--color-text);
      font-size: 0.875rem;
    }
    .comparison-table tr:last-child td {
      border-bottom: none;
    }
    .comparison-table tr.category-row td {
      background: rgba(79,70,229,0.04);
      font-weight: 700;
      font-size: 0.8125rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent);
      padding: 0.625rem 1rem 0.625rem 1.5rem;
      text-align: left;
      border-bottom: 1px solid rgba(79,70,229,0.1);
    }
    .comparison-table tr:hover:not(.category-row) td {
      background: rgba(248,249,252,0.8);
    }
    .comp-check {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(79,70,229,0.1);
      color: var(--accent);
    }
    .comp-check svg { width: 13px; height: 13px; }
    .comp-cross {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px; height: 22px;
      border-radius: 50%;
      background: rgba(148,163,184,0.1);
      color: var(--color-text-faint);
    }
    .comp-cross svg { width: 12px; height: 12px; }
    .comp-limited {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--color-text-muted);
      white-space: nowrap;
    }
    .comp-text {
      font-size: 0.8125rem;
      font-weight: 600;
      color: var(--accent);
    }
    /* Scale column highlight */
    .comparison-table td.col-scale {
      background: rgba(79,70,229,0.03);
    }
    .comparison-table tr.category-row td.col-scale {
      background: rgba(79,70,229,0.07);
    }