:root {
    /* Brand */
    --brand-deep: #7a56b9;
    --brand-bright: #a25cce;
    --brand-gradient: linear-gradient(135deg, #7a56b9 0%, #a25cce 100%);
    /* Dark scale */
    --purple-950: #1a0f2e;
    --purple-900: #261845;
    --purple-800: #3a2466;
    --purple-700: #7a56b9;
    --purple-600: #8a6bc4;
    --purple-500: #a25cce;
    --purple-400: #b785d8;
    --purple-300: #cfb0e3;
    --purple-200: #e4d3f0;
    --purple-100: #f3ebfa;
    --accent: #a25cce;
    --accent-bright: #c47fe0;
    --white: #ffffff;
    --gray-50: #fafafa;
    --gray-100: #f4f4f5;
    --gray-200: #e4e4e7;
    --gray-400: #a1a1aa;
    --gray-600: #52525b;
    --gray-800: #27272a;
    --text-primary: #1a0f2e;
    --text-secondary: #7a56b9;
    --nav-height: 80px;
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--white);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ─── NAVBAR ─── */
  nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--nav-height);
    background: #ffffff;
    border-bottom: 1px solid rgba(122,86,185,0.12);
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 0 40px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  }
  .nav-inner {
    max-width: 1280px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: transform 0.2s ease;
  }
  .logo:hover { transform: scale(1.03); }
  /* V2 logo styles override anything from V1 — see .logo-box / .logo-img below */
  .nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
  }
  .nav-links > li { position: relative; }
  .nav-links > li > a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .nav-links > li > a:hover { color: var(--purple-600); background: var(--purple-100); }
  .nav-links > li > a .chevron {
    width: 14px; height: 14px;
    transition: transform 0.2s;
    opacity: 0.5;
  }
  .nav-links > li:hover > a .chevron { transform: rotate(180deg); opacity: 1; }

  /* Dropdown */
  .dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    background: white;
    border: 1px solid rgba(162,92,206,0.18);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(122,86,185,0.18), 0 4px 16px rgba(0,0,0,0.06);
    padding: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-6px);
    transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  }
  .nav-links > li:hover .dropdown {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-50%) translateY(0);
  }
  .dropdown a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--gray-800);
    transition: all 0.15s;
  }
  .dropdown a:hover { background: var(--purple-100); color: var(--purple-700); }
  .dropdown-icon {
    width: 28px; height: 28px;
    background: var(--purple-100);
    border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .dropdown-icon svg { width: 14px; height: 14px; stroke: var(--purple-600); fill: none; stroke-width: 2; }
  .dropdown-label { display: flex; flex-direction: column; }
  .dropdown-label span { font-size: 11px; font-weight: 400; color: var(--gray-400); margin-top: 1px; }

  .nav-ctas {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .btn-ghost {
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--purple-700);
    background: transparent;
    border: 1.5px solid var(--purple-300);
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
  }
  .btn-ghost:hover { border-color: var(--purple-500); background: var(--purple-100); }
  .btn-primary {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    box-shadow: 0 4px 14px rgba(122,86,185,0.40);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
  }
  .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(162,92,206,0.50);
  }

  /* (V1 hero CSS removed — V2 hero defined later in this stylesheet replaces it entirely) */

  .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(162,92,206,0.18);
    border: 1px solid rgba(122,86,185,0.40);
    border-radius: 100px;
    padding: 6px 16px 6px 8px;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s both;
  }
  .hero-badge-dot {
    width: 20px; height: 20px;
    background: linear-gradient(135deg, var(--purple-500), var(--accent-bright));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-badge-dot::after {
    content: '';
    width: 6px; height: 6px;
    background: white;
    border-radius: 50%;
  }
  .hero-badge span {
    font-size: 13px;
    font-weight: 500;
    color: var(--purple-300);
    letter-spacing: 0.2px;
  }

  .hero-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(42px, 6vw, 78px);
    font-weight: 800;
    color: white;
    text-align: center;
    line-height: 1.08;
    letter-spacing: -2px;
    max-width: 900px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s 0.1s both;
  }
  .hero-title .gradient-text {
    background: linear-gradient(135deg, var(--purple-300) 0%, var(--accent-bright) 50%, #f0abfc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .hero-subtitle {
    margin-top: 24px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 400;
    color: rgba(207,176,227,0.85);
    text-align: center;
    max-width: 680px;
    line-height: 1.6;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s 0.2s both;
  }

  .hero-platforms {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s 0.25s both;
  }
  .platform-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
  }
  .platform-chip .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-bright);
  }

  .hero-ctas {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 36px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s 0.3s both;
    flex-wrap: wrap;
    justify-content: center;
  }
  .btn-hero-primary {
    padding: 15px 32px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: white;
    background: linear-gradient(135deg, var(--purple-600), var(--purple-400));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(162,92,206,0.55);
    letter-spacing: -0.2px;
  }
  .btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 36px rgba(162,92,206,0.60);
  }
  .btn-hero-ghost {
    padding: 15px 28px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
  }
  .btn-hero-ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }

  /* Video placeholder */
  .hero-video {
    margin-top: 60px;
    width: 100%;
    max-width: 1080px;
    position: relative;
    z-index: 1;
    animation: fadeUp 0.8s 0.4s both;
  }
  .video-frame {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-800) 100%);
    border-radius: 20px;
    border: 1px solid rgba(122,86,185,0.27);
    overflow: hidden;
    box-shadow:
      0 40px 80px rgba(0,0,0,0.5),
      0 0 0 1px rgba(162,92,206,0.12),
      inset 0 1px 0 rgba(255,255,255,0.08);
    position: relative;
    cursor: pointer;
  }
  .video-frame-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
  }
  .video-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(162,92,206,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(162,92,206,0.12) 1px, transparent 1px);
    background-size: 40px 40px;
  }
  /* Simulated dashboard UI inside video */
  .video-mockup {
    position: absolute;
    inset: 20px;
    display: flex;
    gap: 12px;
    opacity: 0.7;
  }
  .vm-sidebar {
    width: 180px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    flex-shrink: 0;
  }
  .vm-sidebar-logo {
    width: 80px; height: 8px;
    background: linear-gradient(90deg, var(--purple-500), transparent);
    border-radius: 4px;
    margin-bottom: 16px;
  }
  .vm-sidebar-item {
    height: 7px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .vm-sidebar-item.active { background: rgba(162,92,206,0.45); }
  .vm-main { flex: 1; display: flex; flex-direction: column; gap: 12px; }
  .vm-topbar {
    height: 40px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 8px;
  }
  .vm-topbar-dot { width: 8px; height: 8px; border-radius: 50%; }
  .vm-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .vm-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    padding: 12px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .vm-card-val {
    height: 18px;
    background: linear-gradient(90deg, var(--purple-500) 60%, transparent);
    border-radius: 4px;
  }
  .vm-card-label { height: 6px; background: rgba(255,255,255,0.08); border-radius: 3px; width: 60%; }
  .vm-heatgrid {
    flex: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
    overflow: hidden;
  }
  .vm-dot {
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.8;
  }

  .play-btn {
    width: 72px; height: 72px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: absolute;
    z-index: 2;
    transition: all 0.2s;
  }
  .video-frame:hover .play-btn { background: rgba(162,92,206,0.45); transform: scale(1.08); }
  .play-btn svg { width: 24px; height: 24px; fill: white; margin-left: 3px; }

  .video-label {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.75);
    white-space: nowrap;
  }

  /* Trust bar */
  .trust-bar {
    padding: 40px 40px;
    background: var(--purple-950);
    border-top: 1px solid rgba(122,86,185,0.15);
    position: relative;
    z-index: 1;
  }
  .trust-bar-inner {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
  }
  .trust-bar p {
    font-size: 12px;
    font-weight: 500;
    color: rgba(207,176,227,0.55);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 24px;
  }
  .trust-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .trust-logo {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: rgba(255,255,255,0.2);
    letter-spacing: -0.5px;
    transition: color 0.2s;
  }
  .trust-logo:hover { color: rgba(255,255,255,0.4); }

  /* ─── SECTIONS COMMON ─── */
  section { padding: 80px 40px; }
  .section-inner { max-width: 1200px; margin: 0 auto; }
  .section-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-600);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  .section-tag::before {
    content: '';
    width: 16px; height: 2px;
    background: var(--purple-500);
    border-radius: 2px;
  }
  .section-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    color: var(--purple-950);
    letter-spacing: -1.5px;
    line-height: 1.1;
  }
  .section-subtitle {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 580px;
    margin-top: 14px;
  }

  /* ─── FEATURE SECTIONS (Slack-style) ─── */
  .feature-section { background: white; }
  .feature-section:nth-child(even) { background: var(--purple-100); }

  .feature-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 60px 0;
    border-bottom: 1px solid var(--gray-100);
  }
  .feature-block:last-child { border-bottom: none; }
  .feature-block.reverse { direction: rtl; }
  .feature-block.reverse > * { direction: ltr; }

  .feature-text {}
  .feature-icon-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
  }
  .feature-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(122,86,185,0.32);
  }
  .feature-icon svg { width: 20px; height: 20px; stroke: white; fill: none; stroke-width: 2; }
  /* ── Section header above the seven feature rows ──────────────
     Added 28.08.26. Uses the same Sora / purple-950 / -0.8px letter
     spacing as .feature-heading below it, one step larger, so it reads
     as the parent of that list rather than as an eighth item in it. */
  .platform-head {
    max-width: 760px;
    margin: 0 auto 52px;
    text-align: center;
  }
  .platform-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 4.4vw, 44px);
    font-weight: 800;
    color: var(--purple-950);
    letter-spacing: -1.1px;
    line-height: 1.15;
    margin: 0 0 16px;
  }
  /* The "+" is structure, not a word — quieter than the two halves it
     joins so the eye reads "Website ... Visibility Dashboard". */
  .platform-plus {
    color: var(--purple-500);
    font-weight: 600;
    margin: 0 2px;
  }
  .platform-sub {
    font-size: 16px;
    color: var(--gray-600);
    line-height: 1.7;
    margin: 0;
  }
  /* Two guaranteed lines. display:block on the spans forces the break
     between the sentences instead of wherever the container happens to
     run out of room. */
  .platform-sub-a,
  .platform-sub-b { display: block; }
  /* The first line is the claim, the second is the answer to it — so the
     claim carries the weight and the answer stays quiet. */
  .platform-sub-a {
    font-family: 'Sora', sans-serif;
    font-size: clamp(17px, 2vw, 20px);
    font-weight: 700;
    color: var(--purple-950);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
  }
  @media (max-width: 700px) {
    .platform-head { margin-bottom: 36px; }
    .platform-sub  { font-size: 15px; }
  }

  .feature-category {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-500);
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  .feature-heading {
    font-family: 'Sora', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--purple-950);
    letter-spacing: -0.8px;
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .feature-desc {
    font-size: 15px;
    color: var(--gray-600);
    line-height: 1.7;
    margin-bottom: 20px;
  }
  .feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800);
  }
  .feature-list li::before {
    content: '';
    width: 18px; height: 18px;
    background: var(--purple-100);
    border-radius: 50%;
    border: 2px solid var(--purple-300);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%238b5cf6' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: 10px;
    background-position: center;
    background-repeat: no-repeat;
  }
  .feature-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--purple-600);
    text-decoration: none;
    transition: gap 0.2s;
  }
  .feature-link:hover { gap: 10px; }
  .feature-link svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

  /* Screen mockup */
  .screen-mockup {
    background: var(--purple-950);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(122,86,185,0.22);
    box-shadow: 0 20px 60px rgba(122,86,185,0.22), 0 4px 16px rgba(0,0,0,0.1);
    aspect-ratio: 16/10;
    position: relative;
  }
  .mockup-bar {
    height: 36px;
    background: rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 6px;
  }
  .mockup-dot { width: 8px; height: 8px; border-radius: 50%; }
  .mockup-content {
    padding: 16px;
    height: calc(100% - 36px);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .mc-row { display: flex; gap: 8px; }
  .mc-block {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
  }
  .mc-block.sm { width: 80px; height: 50px; }
  .mc-block.md { flex: 1; height: 50px; }
  .mc-block.lg { flex: 1; height: 100px; }
  .mc-block.accent { background: rgba(122,86,185,0.22); border-color: rgba(122,86,185,0.32); }
  .mc-block.green { background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.2); }

  /* Heat grid mockup */
  .heatgrid-mockup {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    height: 100%;
    align-content: center;
  }
  .hg-dot {
    aspect-ratio: 1;
    border-radius: 50%;
    transition: transform 0.2s;
  }
  .screen-mockup:hover .hg-dot { transform: scale(1.1); }

  /* ─── AI SECTION ─── */
  .ai-section {
    background: var(--purple-950);
    position: relative;
    overflow: hidden;
  }
  .ai-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(196,127,224,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,127,224,0.12) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
  }
  .ai-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(162,92,206,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .ai-section .section-title { color: white; }
  .ai-section .section-subtitle { color: rgba(207,176,227,0.70); }

  /* ─── AI SECTION V3: two-column layout with mobile dashboard demo ─── */
  .ai-section {
    padding: 140px 40px 70px;
  }
  .ai-two-col {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
  }
  .ai-col-left .section-tag {
    margin-bottom: 16px;
    display: inline-block;
  }
  .ai-col-left h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.9rem, 3.2vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    max-width: 540px;
  }
  .ai-lead {
    color: rgba(255,255,255,0.92);   /* MUCH whiter than the old 0.70 — readable on dark purple */
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 14px;
    max-width: 520px;
  }
  .ai-lead strong { color: #ffffff; font-weight: 700; }
  /* "We get you listed." — punchy single-line CTA below the descriptive lead */
  .ai-lead-cta {
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin: 0 0 28px;
    white-space: nowrap;          /* keep on a single line */
    text-shadow: 0 0 24px rgba(196,127,224,0.35);
  }

  /* Enthusiastic sub-pitch block about the mobile dashboard */
  .ai-mobile-pitch {
    padding: 22px 24px;
    background: rgba(196,127,224,0.08);
    border: 1px solid rgba(196,127,224,0.22);
    border-radius: 14px;
    max-width: 540px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .ai-mobile-pitch-eyebrow {
    font-family: 'Sora', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c47fe0;
    margin-bottom: 6px;
  }
  .ai-mobile-pitch-headline {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
    background: linear-gradient(135deg, #c47fe0 0%, #ffffff 50%, #c47fe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    margin-bottom: 8px;
  }
  .ai-mobile-pitch-sub {
    color: rgba(255,255,255,0.85);
    font-size: 14.5px;
    line-height: 1.55;
    margin: 0;
  }

  /* ── iPhone-shaped video frame (right column) ── */
  .ai-col-right {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* ── THE FRAME HAS NO ASPECT-RATIO OF ITS OWN ──────────────────
     Fixed 29.08.26, and this is the real fix for the cropping.

     The mistake before was setting the ratio on the FRAME. The frame
     includes a 10px black bezel on every side, so the screen inside it
     is a different shape from the frame around it. With the frame at
     9/20.4 the screen came out at 328 x 769, a ratio of 0.427 — while
     the video is 946 x 1920, a ratio of 0.493. object-fit:cover then
     did what it is supposed to do and cropped the video to fill,
     losing about 13% of its width, which is the thin slice missing
     down both sides.

     Now the SCREEN carries the ratio, matched exactly to the video, and
     the frame's height is simply whatever the screen needs plus the
     bezel. Nothing is cropped because there is nothing to crop: the box
     and the clip are the same shape.

     The frame ends up ~686px tall instead of 789px. To make it taller
     again, increase the WIDTH — height now follows from it. Do not put
     an aspect-ratio back on the frame; that is what caused this. */
  .ai-phone-frame {
    position: relative;
    width: 348px;
    background: #0a0a0a;
    border-radius: 48px;
    padding: 10px;
    box-shadow:
      0 0 0 2px rgba(196,127,224,0.35),
      0 30px 80px rgba(76,29,149,0.55),
      0 0 60px rgba(196,127,224,0.30),
      inset 0 0 0 1px rgba(255,255,255,0.05);
  }
  .ai-phone-notch {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 24px;
    background: #000;
    border-radius: 14px;
    z-index: 2;
  }
  .ai-phone-screen {
    width: 100%;
    /* The video's own dimensions, 946 x 1920. Matching them here is what
       stops object-fit:cover cropping anything. If the clip is ever
       re-recorded at a different size, change this number to match it. */
    aspect-ratio: 946 / 1920;
    /* Outer radius minus the padding, so the two curves stay concentric.
       48 - 10 = 38. Get this wrong and the bezel looks thicker at the
       corners than along the sides. */
    border-radius: 38px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1033 0%, #2d1b4e 100%);
    position: relative;
  }
  .ai-phone-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ai-phone-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.4);
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    gap: 12px;
  }
  .ai-phone-placeholder-icon { font-size: 40px; opacity: 0.5; }

  /* ─── STATS SECTION V3: integrated platforms + numerical stats ─── */
  .ai-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
  }
  .ai-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(122,86,185,0.22);
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
  }
  .ai-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--purple-500), transparent);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .ai-card:hover { transform: translateY(-4px); border-color: rgba(162,92,206,0.45); background: rgba(255,255,255,0.06); }
  .ai-card:hover::before { opacity: 1; }
  .ai-card-icon {
    width: 48px; height: 48px;
    background: linear-gradient(135deg, var(--purple-800), var(--purple-600));
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 6px 16px rgba(122,86,185,0.32);
  }
  .ai-card-icon svg { width: 22px; height: 22px; stroke: var(--purple-200); fill: none; stroke-width: 1.8; }
  .ai-card h3 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.4px;
  }
  .ai-card p {
    font-size: 14px;
    color: rgba(207,176,227,0.65);
    line-height: 1.65;
  }

  /* AI Integrations logos */
  .ai-integrations {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
  }
  .ai-int-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(207,176,227,0.40);
  }
  .ai-logos-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .ai-logo-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    transition: all 0.2s;
  }
  .ai-logo-chip:hover { background: rgba(162,92,206,0.18); border-color: rgba(122,86,185,0.32); color: white; }
  .ai-logo-chip .ai-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
  }

  /* ─── PRICING ─── */
  /* ─── TEAM SECTION ─── */
  /* Same dark purple background as pricing for visual continuity. The team and pricing
     sections share a continuous dark-purple slab (no curve between them since both are dark). */
  .team-section {
    background: var(--purple-950);
    padding: 120px 40px 120px;
    position: relative;
    overflow: hidden;
  }
  .team-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(196,127,224,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,127,224,0.12) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
  }
  .team-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 50% 60% at 50% 40%, rgba(122,86,185,0.22) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .team-section .section-inner {
    position: relative;
    z-index: 2;
  }
  /* ── Centered intro block: eyebrow + headline + paragraphs all centered ── */
  .team-intro {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 56px;
  }
  .team-eyebrow {
    font-family: 'Sora', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #c47fe0;
    margin-bottom: 12px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(196,127,224,0.5);
  }
  .team-h {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin: 0 0 26px;
    letter-spacing: -0.015em;
  }
  .team-h-neon {
    background: linear-gradient(135deg, #c47fe0 0%, #ffffff 50%, #c47fe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(196,127,224,0.55));
  }
  .team-intro .team-paragraph {
    color: rgba(255,255,255,0.92);
    font-size: 18px;
    line-height: 1.65;
    margin: 0 auto 18px;
    font-weight: 400;
    max-width: 800px;
    text-align: center;
  }
  .team-intro .team-paragraph:last-child { margin-bottom: 0; }
  .team-intro .team-paragraph strong { color: #ffffff; font-weight: 700; }

  /* ── Featured card (Chen) — centered, wider ── */
  .team-featured {
    max-width: 640px;
    margin: 0 auto 24px;
  }
  .team-card-featured {
    /* slightly stronger presence: brighter border + soft glow */
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(196,127,224,0.35);
    box-shadow: 0 0 32px rgba(196,127,224,0.12);
  }

  /* ── 2-column grid for remaining 4 cards ── */
  .team-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ── Age inline next to name ── */
  .team-age {
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0;
  }

  @media (max-width: 768px) {
    .team-grid-4 { grid-template-columns: 1fr; }
    .team-featured { max-width: 100%; }
  }
  .team-card {
    display: flex;
    align-items: flex-start;       /* photo at top, text wraps below */
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(196,127,224,0.18);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.25s;
  }
  .team-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(196,127,224,0.35);
    transform: translateX(4px);
  }
  .team-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--purple-700);
    background-image: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    flex-shrink: 0;
    border: 2px solid rgba(196,127,224,0.30);
    position: relative;
    overflow: hidden;
    margin-top: 2px;               /* nudge down a tiny bit to align with name baseline */
  }
  /* Initial letter fallback */
  .team-photo::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 22px;
    z-index: -1;
  }
  .team-info {
    flex: 1;
    min-width: 0;
  }
  .team-name {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 3px;
  }
  .team-meta {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
    font-weight: 500;
    margin-bottom: 8px;
  }
  .team-role { color: rgba(255,255,255,0.85); }
  .team-city { color: #c47fe0; font-weight: 600; }
  .team-bio {
    color: rgba(255,255,255,0.78);
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    font-weight: 400;
  }

  @media (max-width: 968px) {
    .team-section { padding: 80px 20px 80px; }
    .team-intro .team-paragraph { font-size: 16px; }
  }

  .pricing-section {
    background:
      radial-gradient(60% 80% at 80% 10%, rgba(122,63,197,0.55) 0%, rgba(60,30,110,0.25) 35%, transparent 65%),
      radial-gradient(50% 70% at 15% 90%, rgba(162,92,206,0.35) 0%, rgba(30,15,55,0.2) 40%, transparent 70%),
      radial-gradient(40% 60% at 50% 50%, rgba(122,63,197,0.18) 0%, transparent 60%),
      #0e0620;
    padding-top: 120px;
    padding-bottom: 120px;
    position: relative;
    overflow: hidden;
  }
  /* Quadrant grid pattern matching the hero */
  .pricing-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(196,127,224,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,127,224,0.12) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 0;
  }
  /* Soft ambient radial glow on top of grid */
  .pricing-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(162,92,206,0.18) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .pricing-section .section-tag { color: var(--purple-300); }
  .pricing-section .section-title { color: white; }
  .pricing-section .section-subtitle { color: rgba(207,176,227,0.75); }
  .pricing-section .section-inner { position: relative; z-index: 2; }

  /* ─── Currency switcher ─── */
  .currency-switcher {
    display: inline-flex;
    margin: 28px auto 0;
    padding: 5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(196,127,224,0.25);
    border-radius: 100px;
    gap: 2px;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
    position: relative;
    z-index: 3;
  }
  .currency-switcher-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto;
  }
  .cur-btn {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgba(255,255,255,0.65);
    background: transparent;
    border: none;
    padding: 9px 18px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.25s;
    min-width: 64px;
  }
  .cur-btn:hover {
    color: rgba(255,255,255,0.95);
  }
  .cur-btn.active {
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    color: #fff;
    box-shadow: 0 0 18px rgba(196,127,224,0.55), 0 2px 8px rgba(122,63,197,0.4);
  }
  @media (max-width: 480px) {
    .cur-btn { font-size: 12px; padding: 8px 14px; min-width: 56px; }
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 50px;
    align-items: start;       /* cards size to their own content - no empty stretch space below */
  }
  .pricing-card {
    background: white;
    border: 1px solid rgba(196,127,224,0.2);
    border-radius: 20px;
    /* Bottom padding raised from 32 to 34px so the outline of the second
       button is not sitting on the card's rounded corner. */
    padding: 32px 24px 34px;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 28px rgba(196,127,224,0.18), 0 4px 14px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
  }
  /* ══ TWO-PLAN GRID (28.08.26) ══════════════════════════════════
     Was repeat(4, 1fr). Two cards across the same container would be
     900px each — too wide to scan a feature list in, because the eye
     loses the line. Capped at 480px each and centred instead. */
  .pricing-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 480px));
    justify-content: center;
    gap: 26px;
    /* Overrides align-items:start on .pricing-grid. With four cards that
       was right — each sized to its own content and the ragged bottoms
       read as four separate options. With two side by side, different
       heights read as one card being "less" than the other, which is
       exactly the wrong message when both include the same thing. */
    align-items: stretch;

    /* ── ROW-BY-ROW ALIGNMENT ──────────────────────────────────────
       Equal card height was not enough. Inside the cards each block
       still sized itself independently, so a tagline wrapping to two
       lines in one card and one line in the other pushed "Pay today",
       the feature list and everything below it out of step by a line.

       Nine rows, one per block, declared here on the PARENT. Each card
       opts into them with subgrid below, so "Pay today" in one card sits
       on the same physical row as "Pay today" in the other, whatever the
       text does. Padding blocks out with min-height would hold only
       until somebody edits a sentence; this cannot drift.

       Row order: name, WHAT, price, period, tagline, terms, explain,
       included-heading, features, buttons.  KEEP THE COUNT IN STEP with
       the markup — add a block to the card and this must go up by one.

       17.09.26: nine became TEN when "Full Website + Visibility Dashboard"
       was added under the plan name. The warning above was written for
       exactly this and I walked into it anyway: the tenth block had no row
       to sit in, so it was auto-placed and the Purchase button landed on
       top of the feature list. Both cards have ten direct children — the
       "Most Popular" ribbon does not count, it is position:absolute. */
    grid-template-rows: repeat(10, auto);
  }

  /* Only browsers that actually support subgrid switch to it. Everywhere
     else the flex column still applies and the cards look exactly as they
     did — same height, bottom-aligned buttons, just without the row-for-row
     match. A progressive improvement, never a dependency. */
  @supports (grid-template-rows: subgrid) {
    .pricing-grid-2 .pricing-card {
      display: grid;
      grid-row: span 10;
      grid-template-rows: subgrid;
      /* No gap: every block keeps the margins it had under flex. */
      gap: 0;
    }
    /* Reordered 31.08.26: "How you pay" now sits ABOVE the feature list,
       on this page and on /pricing, so the explanation is read before the
       list rather than after it. The subgrid declares ten rows since
       17.09.26 — what each row holds comes from the markup, and the COUNT
       is what must be kept in step with it.

       Two rules had to be undone. .plan-explain used to carry flex:1 and
       height:100% so it could absorb the height difference between the
       two cards; from the middle of the card it would swallow the slack
       and push the list down instead. The feature list takes that job.
       And .plan-features had margin-bottom:0 because .plan-explain sat
       between it and the buttons; the list now runs straight into them,
       so the gap comes back. */
    .pricing-grid-2 .plan-explain { height: auto; flex: 0 0 auto; }
    .pricing-grid-2 .plan-features { flex: 1 1 auto; margin-bottom: 26px; }
  }
  @media (max-width: 900px) {
    .pricing-grid-2 { grid-template-columns: minmax(0, 480px); }
  }

  /* The recommended card. NOT .featured: that one fills with purple and
     inverts every colour inside it, which makes two identical feature
     lists look like two different offers. This keeps the white card and
     marks it with the ribbon and a stronger border — the reader compares
     the two prices instead of reacting to the colour. */
  .pricing-card-best {
    border-color: rgba(196,127,224,0.55);
    box-shadow: 0 0 34px rgba(196,127,224,0.30), 0 6px 18px rgba(0,0,0,0.28);
  }
  .pricing-card-best:hover {
    border-color: rgba(196,127,224,0.75);
  }

  /* The pay-today / monthly / billing-starts block. This is the whole
     difference between the plans, so it sits ABOVE the shared feature
     list where the comparison actually happens. */
  .plan-terms {
    margin: 18px 0 4px;
    padding: 14px 0;
    border-top: 1px solid rgba(196,127,224,0.22);
    border-bottom: 1px solid rgba(196,127,224,0.22);
  }
  .plan-term {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 6px 0;
    font-size: 13.5px;
  }
  .plan-term .pt-k { color: var(--gray-600); }
  .plan-term .pt-v {
    font-weight: 700;
    color: var(--purple-950);
    text-align: right;
    white-space: nowrap;
  }

  /* Says out loud what the two identical lists mean, so nobody scans
     both looking for the difference. */
  /* The written version of .plan-terms. Tinted panel, not plain text on
     white: it has to read as a self-contained explanation, or it looks
     like the feature list carried on into prose. */
  .plan-explain {
    margin-top: 18px;
    padding: 16px 16px 14px;
    background: rgba(196,127,224,0.07);
    border: 1px solid rgba(196,127,224,0.20);
    border-radius: 14px;
    /* This panel is the only part of the card whose length differs between
       the two plans, so it is the right place to absorb the difference.
       flex:1 makes it grow to fill whatever height the taller card sets;
       the note below is pushed to its bottom edge, so the panel reads as
       deliberately sized rather than as a box with a hole in it. */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .plan-explain-h {
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple-500);
    margin-bottom: 10px;
  }
  .plan-explain p {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--gray-600);
    margin: 0 0 9px;
    text-wrap: pretty;
  }
  .plan-explain p:last-child { margin-bottom: 0; }
  /* Only the figures are bold. Bolding the surrounding words too would
     leave nothing standing out, which is the same as bolding nothing. */
  .plan-explain strong { color: var(--purple-950); font-weight: 700; }
  .plan-explain-note {
    margin-top: auto;      /* sits on the panel's bottom edge */
    padding-top: 9px;
    border-top: 1px solid rgba(196,127,224,0.20);
    font-size: 12.5px !important;
    color: var(--gray-500, #6b7280) !important;
  }

  .plan-inc-h {
    margin: 18px 0 10px;
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple-500);
  }

  .pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 36px rgba(196,127,224,0.35), 0 18px 40px rgba(0,0,0,0.3);
    border-color: rgba(196,127,224,0.45);
  }
  .pricing-card.featured {
    background: linear-gradient(160deg, var(--purple-900) 0%, var(--purple-700) 100%);
    border-color: rgba(255,255,255,0.2);
    box-shadow: 0 0 38px rgba(255,255,255,0.22), 0 4px 18px rgba(0,0,0,0.3);
    transform: scale(1.04);
  }
  .pricing-card.featured:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 0 50px rgba(255,255,255,0.32), 0 18px 40px rgba(0,0,0,0.35);
  }
  .pricing-badge {
    position: absolute;
    top: 20px; right: 20px;
    background: linear-gradient(135deg, var(--accent), #f0abfc);
    color: white;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 100px;
    text-transform: uppercase;
  }
  .plan-name {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--purple-500);
    margin-bottom: 6px;
  }
  .pricing-card.featured .plan-name { color: var(--purple-300); }

  /* What the plan actually is, between the label and the number. Added
     17.09.26 — the two plans differ only in how you pay, and nothing on
     the card said what you get for either. Sentence case, not uppercase:
     the line above is already shouting, and two shouts read as none. */
  .plan-what {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rzn-ink, #1a0f2e);
    margin: 0 0 14px;
  }
  .pricing-card.featured .plan-what { color: rgba(255,255,255,.92); }

  /* Premium savings line — sits AFTER the tagline as a "you're saving" callout */
  .plan-savings-line {
    margin: 0 0 24px;
    padding: 14px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    line-height: 1.4;
    overflow: hidden;
  }
  .plan-savings-line .ps-label {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    text-align: left;
    margin-bottom: 8px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .plan-savings-line .ps-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }
  .plan-savings-line .ps-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: rgba(255,255,255,0.95);
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  .plan-savings-line .ps-name {
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    font-size: 13px;
  }
  .plan-savings-line .ps-amt { color: rgba(255,255,255,0.95); }
  .plan-savings-line .ps-old {
    color: rgba(255,255,255,0.55);
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,0.85);
    text-decoration-thickness: 2px;
  }
  .plan-savings-line .ps-equals {
    color: rgba(255,255,255,0.55);
    margin: 0 4px;
    font-weight: 500;
  }
  .plan-savings-line .ps-new {
    font-size: 17px;
    color: #c47fe0;
    text-shadow: 0 0 14px rgba(196,127,224,0.85);
    font-weight: 800;
  }
  .plan-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 14px 0 6px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .plan-price .currency {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--purple-950);
    margin-top: 4px;
  }
  .plan-price .amount {
    font-family: 'Sora', sans-serif;
    font-size: 52px;
    font-weight: 800;
    color: var(--purple-950);
    letter-spacing: -2px;
    line-height: 1;
  }
  .pricing-card.featured .plan-price .currency,
  .pricing-card.featured .plan-price .amount { color: white; }
  .plan-period {
    font-size: 13px;
    color: var(--purple-600);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 8px;
    text-align: left;
  }
  .plan-period .pp-line1 {
    display: block;
    font-size: 12px;
    color: var(--purple-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2px;
  }
  .plan-period .pp-line2 {
    display: block;
    font-size: 14px;
    color: var(--purple-700);
    font-weight: 600;
  }
  .pricing-card.featured .plan-period { color: rgba(255,255,255,0.95); }
  .pricing-card.featured .plan-period .pp-line1 { color: rgba(255,255,255,0.75); }
  .pricing-card.featured .plan-period .pp-line2 { color: #ffffff; }
  .plan-tagline {
    font-size: 14px;
    color: var(--gray-600);
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gray-100);
    line-height: 1.5;
  }
  .pricing-card.featured .plan-tagline {
    color: rgba(207,176,227,0.75);
    border-bottom-color: rgba(255,255,255,0.1);
  }
  .plan-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }
  .plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--gray-800);
    line-height: 1.4;
  }
  .pricing-card.featured .plan-features li { color: rgba(255,255,255,0.85); }
  .check-icon {
    width: 18px; height: 18px;
    background: var(--purple-100);
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .pricing-card.featured .check-icon { background: rgba(255,255,255,0.15); }
  .check-icon svg { width: 10px; height: 10px; stroke: var(--purple-600); fill: none; stroke-width: 3; }
  .pricing-card.featured .check-icon svg { stroke: var(--purple-200); }
  /* ─── Plan CTA buttons (stacked: Purchase + View Plan Details) ─── */
  .plan-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* 28px, not 18. The Purchase button carries a 0 0 18px glow that
       spreads in every direction, so 18px of margin left only a few
       visible pixels between the glow and the panel above — the button
       read as sitting ON the explanation rather than below it.
       This gap has to stay larger than the glow radius. */
    margin-top: 28px;
  }
  .plan-cta {
    display: block;
    width: 100%;
    padding: 14px;
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s;
    border: none;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    letter-spacing: 0.01em;
  }

  /* ── PRIMARY: "Purchase" button — on white cards (Starter/Website/Growth) ── */
  .plan-cta.purchase {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(122,86,185,0.35), 0 0 18px rgba(196,127,224,0.25);
  }
  .plan-cta.purchase:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(122,86,185,0.50), 0 0 26px rgba(196,127,224,0.45);
    filter: brightness(1.05);
  }

  /* ── SECONDARY: "View Plan Details" — quieter outline below Purchase (white cards) ── */
  .plan-cta.details {
    background: transparent;
    border: 1.5px solid var(--purple-300);
    color: var(--purple-700);
    font-size: 13px;
    padding: 10px;
  }
  .plan-cta.details:hover {
    background: var(--purple-100);
    border-color: var(--purple-500);
    color: var(--purple-800);
  }

  /* ── PRIMARY: "Purchase" button — Premium card override ── */
  /* Solid white with deep purple text — pops strongly against the dark Premium card */
  .plan-cta.purchase-premium {
    background: #ffffff;
    color: var(--purple-900);
    box-shadow: 0 6px 22px rgba(255,255,255,0.30), 0 0 24px rgba(255,255,255,0.20);
  }
  .plan-cta.purchase-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,255,255,0.45), 0 0 36px rgba(255,255,255,0.30);
    background: #ffffff;
    color: var(--purple-950);
  }

  /* ── SECONDARY: "View Plan Details" — Premium card override ── */
  /* White outline + white text, lighter weight than the solid Purchase button */
  .plan-cta.details-on-dark {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.45);
    color: rgba(255,255,255,0.95);
  }
  .plan-cta.details-on-dark:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.80);
    color: #ffffff;
  }

  .pricing-note {
    text-align: center;
    margin-top: 32px;
    font-size: 13px;
    color: var(--gray-400);
  }
  .pricing-note strong { color: var(--purple-600); }

  /* ─── WEBSITE BOOSTER ─── */
  .booster-section {
    background: white;
    padding: 20px 0 20px;       /* tight both sides - curves above and below handle spacing */
    overflow: hidden;
  }
  .booster-header {
    text-align: center;
    padding: 0 40px;          /* Restore horizontal padding for the heading text only */
    max-width: 800px;
    margin: 0 auto 50px;
  }
  .booster-header .section-tag { margin-bottom: 12px; display: inline-block; }
  .booster-header .section-title { margin: 6px 0 14px; }
  .booster-header .section-subtitle { margin: 0; }

  /* Header treatment matching the Website Templates page (kept dark for the white section) */
  .booster-header .bh-eyebrow {
    display: block;
    font-family: 'Sora', sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    margin-bottom: 14px;
  }
  .booster-header .bh-headline {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: var(--purple-950);
    margin: 0 0 14px;
  }
  .booster-header .bh-headline span {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }
  .booster-header .bh-sub {
    font-size: 17px;
    color: var(--gray-600);
    line-height: 1.65;
    max-width: 580px;
    margin: 0 auto;
  }

  /* ── Full-width auto-scrolling carousel ── */
  /* ── Native horizontal scroll. JS drives scrollLeft, user can swipe back/forth, pauses on touch ── */
  .booster-carousel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: relative;
    margin-bottom: 36px;
    padding: 6px 0;
    scroll-snap-type: none;
    will-change: scroll-position;
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  .booster-carousel::-webkit-scrollbar { display: none; }
  .booster-track {
    display: flex;
    gap: 18px;
    padding: 4px 24px;
    width: max-content;
  }
  .booster-card {
    flex: 0 0 auto;
    width: 280px;
    height: 200px;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
    background-color: var(--gray-100);
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .booster-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.75) 100%);
  }
  .booster-card span {
    position: absolute;
    left: 16px;
    bottom: 14px;
    color: white;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
    z-index: 1;
  }
  .booster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(122,86,185,0.25), 0 4px 12px rgba(0,0,0,0.08);
  }

  /* CTA button below the carousel */
  .booster-cta-wrap {
    text-align: center;
    margin-top: 24px;
    padding: 0 40px;
  }
  .booster-cta {
    display: inline-block;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    color: #ffffff;
    border-radius: 100px;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(122,86,185,0.35), 0 0 18px rgba(196,127,224,0.25);
    transition: all 0.25s;
  }
  .booster-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(122,86,185,0.50), 0 0 28px rgba(196,127,224,0.45);
    filter: brightness(1.05);
  }

  /* ─── STATS ─── */
  .stats-section {
    background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-700) 100%);
    padding: 15px 40px 120px;
    position: relative;
    overflow: hidden;
  }
  .stats-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  /* ── Integrated with 20 platforms intro (moved here from AI section) ── */
  .stats-section .ai-integrations {
    text-align: center;
    margin-bottom: 28px;
  }
  .stats-section .ai-int-label {
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(1rem, 1.7vw, 1.3rem);
    letter-spacing: -0.01em;
    display: block;
    margin-bottom: 16px;
  }
  .stats-section .ai-logos-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    max-width: 900px;
    margin: 0 auto;
  }
  .stats-section .ai-logo-chip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #ffffff;
    padding: 6px 13px;
    border-radius: 100px;
    font-family: 'Sora', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .stats-section .ai-logo-chip-more {
    background: rgba(196,127,224,0.18);
    border-color: rgba(196,127,224,0.40);
    color: #ffffff;
    font-weight: 700;
  }
  .stats-section .ai-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .stats-grid {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    text-align: center;
  }
  .stat-item {}
  .stat-number {
    font-family: 'Sora', sans-serif;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    color: white;
    letter-spacing: -1.5px;
    line-height: 1;
    margin-bottom: 10px;
  }
  .stat-label {
    font-size: 16px;
    color: rgba(255,255,255,0.88);
    font-weight: 600;
    line-height: 1.3;
  }

  /* ─── TESTIMONIALS ─── */
  /* ─── TESTIMONIALS V2 — 2-row carousel with Trustpilot-style cards ─── */
  .testimonials-section {
    background: #ffffff;               /* uniform white — matches the booster section above */
    padding: 64px 0 80px;
    overflow: hidden;
  }
  .tm-header {
    text-align: center;
    padding: 0 40px;
    max-width: 800px;
    margin: 0 auto 50px;
  }
  .tm-header .section-tag {
    background: linear-gradient(135deg, var(--purple-700), var(--purple-500));
    color: #ffffff;
    font-weight: 700;
    padding: 6px 18px;
    border-radius: 100px;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    display: inline-block;
    box-shadow: 0 4px 14px rgba(122,86,185,0.30);
  }
  .tm-title-accent {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
  }

  /* ── Full-width 2-row carousel — each row is a native horizontal scroller ── */
  .tm-carousel {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 60px, #000 calc(100% - 60px), transparent 100%);
  }
  /* Each row scrolls independently — user can flick each one back and forth */
  .tm-row {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 0;
    scroll-snap-type: none;
    will-change: scroll-position;
  }
  .tm-row::-webkit-scrollbar { display: none; }
  /* Inner track holds the cards in a single horizontal line */
  .tm-row-track {
    display: flex;
    gap: 18px;
    padding: 0 24px;
    width: max-content;
  }

  /* ── Individual testimonial card ── */
  .tm-card {
    flex: 0 0 auto;
    width: 360px;
    min-height: 180px;
    background: #f5f0fa;            /* very light lavender, matching the reference */
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 2px 12px rgba(122,86,185,0.06);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .tm-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(122,86,185,0.12);
  }

  /* ── Card top: green Trustpilot-style stars + date ── */
  .tm-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
  }
  .tm-stars {
    display: flex;
    gap: 3px;
  }
  .tm-star {
    width: 22px;
    height: 22px;
    background: #00b67a;            /* Trustpilot green */
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    line-height: 1;
  }
  .tm-star.tm-star-empty {
    background: #d1d5db;            /* gray, for non-filled stars */
  }
  .tm-date {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: var(--gray-600);
    font-weight: 500;
  }

  /* ── Quote text ── */
  .tm-quote {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--gray-800);
    margin: 0 0 18px;
    flex-grow: 1;
  }

  /* ── Card footer: name left, city right ── */
  .tm-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(122,86,185,0.10);
  }
  .tm-name {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--gray-800);
  }
  .tm-city {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    color: var(--purple-700);
    font-weight: 600;
  }

  /* ── Footer Trustpilot link ── */
  .tm-footer-link {
    text-align: center;
    margin-top: 40px;
    padding: 0 40px;
  }
  .tm-trustpilot-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00b67a;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .tm-trustpilot-link:hover { opacity: 0.75; }
  .tm-tp-star { font-size: 18px; }
  .tm-arrow { width: 16px; height: 16px; }

  @media (max-width: 768px) {
    .testimonials-section { padding: 44px 0 60px; }
    .tm-card { width: 300px; padding: 18px 20px; }
    .tm-quote { font-size: 13.5px; }
  }

  /* ─── FAQ ─── */
  .faq-section { background: white; scroll-margin-top: 90px; padding: 20px 40px 20px; }
  .faq-list {
    max-width: 820px;
    margin: 50px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  /* ── Two-level (cascade) FAQ ──────────────────────────────────
     Level 1 = section (click to reveal its questions).
     Level 2 = question (click to reveal its answer).
     A section with a single Q&A reveals the answer directly. */
  .faq-cat {
    background: #fff;
    border: 1.5px solid var(--purple-200);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .faq-cat.open { border-color: var(--purple-300); }
  .faq-cat-head {
    width: 100%;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Sora', sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--purple-900);
    transition: background 0.2s;
  }
  .faq-cat-head:hover { background: var(--purple-100); }
  .faq-cat.open > .faq-cat-head { border-bottom: 1.5px solid var(--purple-200); }
  .faq-plus {
    width: 32px; height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--purple-100);
    color: var(--purple-700);
    display: grid;
    place-items: center;
    font-size: 22px;
    line-height: 1;
    transition: transform 0.3s, background 0.3s, color 0.3s;
  }
  .faq-cat.open > .faq-cat-head .faq-plus {
    background: var(--brand-gradient);
    color: #fff;
    transform: rotate(45deg);
  }
  .faq-cat-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
  }
  .faq-cat.open > .faq-cat-body { grid-template-rows: 1fr; }
  .faq-cat-inner { overflow: hidden; min-height: 0; }
  .faq-item {
    border-bottom: 1px solid var(--purple-100);
  }
  .faq-cat-inner .faq-item:last-child { border-bottom: none; }
  .faq-question {
    width: 100%;
    padding: 18px 20px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--purple-950);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.2s;
  }
  .faq-question:hover { background: var(--purple-100); }
  .faq-question .faq-plus { width: 28px; height: 28px; font-size: 20px; }
  .faq-item.open .faq-question .faq-plus {
    background: var(--brand-gradient);
    color: #fff;
    transform: rotate(45deg);
  }
  .faq-answer {
    padding: 0 20px;
    font-size: 14px;
    color: var(--gray-600);
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, padding 0.3s;
  }
  .faq-item.open .faq-answer { max-height: 1800px; padding-bottom: 20px; }
  /* Single-answer section: answer shown directly (revealed by the section toggle) */
  .faq-answer-static { max-height: none; padding: 4px 24px 22px; }

  /* Rich answer formatting (used when answer contains HTML) */
  .faq-answer p { margin: 0 0 10px; }
  .faq-answer p:last-child { margin-bottom: 0; }
  .faq-answer strong { color: var(--purple-900); font-weight: 700; }
  .faq-answer .faq-h {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--purple-900);
    margin: 16px 0 8px;
    letter-spacing: -0.01em;
  }
  .faq-answer .faq-h:first-child { margin-top: 4px; }
  .faq-answer .faq-ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .faq-answer .faq-ul li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--gray-700);
    line-height: 1.6;
  }
  .faq-answer .faq-ul li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 9px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a3fc5, #c47fe0);
    box-shadow: 0 0 6px rgba(196,127,224,0.4);
  }
  .faq-answer .faq-ul .faq-ul {
    margin: 6px 0 8px;
  }
  .faq-answer .faq-ul .faq-ul li {
    font-size: 13px;
    color: var(--gray-600);
  }
  .faq-answer .faq-highlight {
    background: linear-gradient(135deg, rgba(196,127,224,0.10), rgba(122,63,197,0.06));
    border: 1px solid rgba(196,127,224,0.25);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 14px 0;
    text-align: center;
  }
  .faq-answer .faq-highlight-amt {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 800;
    color: var(--purple-800);
  }
  .faq-answer .faq-highlight-sub {
    font-size: 12px;
    color: var(--gray-600);
    margin-top: 2px;
  }
  .faq-answer .faq-note {
    background: rgba(245,158,11,0.08);
    border-left: 3px solid #f59e0b;
    padding: 10px 14px;
    border-radius: 6px;
    margin: 12px 0;
    font-size: 13px;
  }

  /* Group heading between FAQ sections */
  .faq-group-heading {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 800;
    color: #c47fe0;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 32px 0 14px;
    text-shadow: 0 0 12px rgba(196,127,224,0.35);
  }
  .faq-group-heading:first-child { margin-top: 8px; }

  /* ─── CTA BOTTOM ─── */
  .cta-section {
    background: #000000;
    /* Was 120/80 when it held a headline and a button. It now holds only
       the blog carousel, which needs less room above it. */
    padding: 90px 40px 70px;
    text-align: center;
    position: relative;
    overflow: visible;             /* allow particles to spill into FAQ above + footer below */
  }
  .cta-inner {
    position: relative;
    z-index: 2;                    /* sits above the particles */
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
  }

  /* CTA-specific particles — extend the container vertically beyond the section bounds
     so the floating dots invade the FAQ section above and the footer below */
  .cta-particles {
    position: absolute;
    left: 0;
    right: 0;
    top: -180px;                   /* invades 180px into FAQ section above */
    bottom: -180px;                /* invades 180px into footer below */
    pointer-events: none;
    z-index: 1;
    overflow: visible;             /* particles never get clipped */
  }
  @media (max-width: 768px) {
    .cta-section p,
    .pricing-cta p,
    .cta-subline { font-size: 15px; }
    /* The <br> before "with Rizon Maps AI." keeps two tidy lines on a wide
       screen. On a phone the first half already wraps, so the break added
       a third line with three words on it. Hidden here; the sentence then
       breaks wherever it needs to. */
    .cta-subline br { display: none; }
    .cta-particles { top: -120px; bottom: -120px; }
  }
  .cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(122,86,185,0.18) 0%, transparent 70%);
  }
  /* ── CTA, now inside the pricing section ──────────────────────
     Moved 29.08.26. It sits under the two plan cards, on the dark
     background they already share, so it needs no surface of its own —
     only spacing and a rule to separate it from the cards above. */
  .pricing-cta {
    margin: 64px auto 0;
    padding-top: 56px;
    max-width: 680px;
    text-align: center;
    position: relative;
  }
  /* Hairline that fades at both ends, same treatment as the footer
     divider. A solid full-width rule on a dark section is louder than
     anything it separates. */
  .pricing-cta::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent, rgba(196,127,224,0.30) 20%,
      rgba(196,127,224,0.30) 80%, transparent);
  }
  @media (max-width: 768px) {
    .pricing-cta { margin-top: 44px; padding-top: 40px; }
  }

  /* Brought down from clamp(32px,5vw,58px) to match .section-title —
     the same size as "Everything included. Two simple ways to get
     started." above it. At 58px it was the largest type on the page. */
  .cta-section h2,
  .pricing-cta h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    color: white;
    letter-spacing: -1.5px;
    line-height: 1.1;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }
  .cta-section p,
  .pricing-cta p {
    font-size: 17px;
    line-height: 1.5;
    color: #ffffff;
    font-weight: 500;
    margin: 0;
    max-width: 560px;
    text-shadow: 0 0 18px rgba(196,127,224,0.25);
    position: relative;
    z-index: 2;
  }
  .cta-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
  }

  /* ─── FOOTER (pure black) ─────────────────────────────────────
     Reworked 28.08.26. Same structure, more air and less weight.
     A footer feels premium when it is mostly empty and everything in
     it is quiet; the previous one was tight and loud. */
  footer {
    background: #000000;
    padding: 96px 40px 0;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 56px 40px;
    padding-bottom: 64px;
    /* A hairline that fades out at both ends rather than a hard rule
       running the full width. On pure black a solid 1px line is the
       most visible thing on the screen, which is the wrong thing for
       a divider to be. */
    border-bottom: none;
    position: relative;
  }
  .footer-top::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(255,255,255,0.10) 15%,
      rgba(255,255,255,0.10) 85%,
      transparent);
  }
  .footer-brand {}
  /* The wordmark is the one thing in the footer allowed to be full
     white. Everything else steps down from it. */
  .footer-brand .logo-text { color: #ffffff; letter-spacing: -0.015em; }
  .footer-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 16px;
  }
  /* Same change as the nav logo: no ring, the rounding is on the image. */
  .footer-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Wordmark beside the mark, matching the cardealers footer. */
  .footer-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
  .footer-logo-text {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    color: #ffffff;
    letter-spacing: -0.015em;
  }
  /* Phone and email under the blurb. Kept at the same weight and colour as
     the column links so the brand block reads as one quiet unit rather
     than competing with the four columns beside it. */
  .footer-contact {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .footer-contact a {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    transition: color 0.22s ease;
  }
  .footer-contact a:hover { color: #ffffff; }
  .footer-logo-img {
    width: 56px;
    height: 56px;
    display: block;
    border-radius: 22%;
    transition: transform .25s;
  }
  .footer-logo-link:hover .footer-logo-img { transform: scale(1.04); }
  .footer-tagline {
    margin-top: 18px;
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.7;
    max-width: 300px;
    font-weight: 400;
  }
  /* ── Footer columns, reworked 28.08.26 ──────────────────────────
     Everything in the footer was competing: 700-weight headings and
     600-weight links, all near-white, all at similar sizes. Twenty-four
     links shouting at the same volume is a wall, not a menu.

     The fix is contrast between the two levels, not more decoration.
     The heading is small, wide-tracked and dim — a label. The links are
     lighter in weight and quieter in colour, and only brighten on
     hover. Nothing is bold. That is what makes it read as expensive:
     restraint, then one thing responding when you touch it. */
  .footer-col h4 {
    font-family: 'Sora', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    /* Full white. The wide tracking and small size already separate a
       heading from the links under it, so the colour does not have to
       do that job as well — and at 38% these read as disabled rather
       than as labels. */
    color: #ffffff;
    letter-spacing: 0.16em;
    margin-bottom: 20px;
    text-transform: uppercase;
  }
  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding: 0;
    margin: 0;
  }
  .footer-col ul li a {
    font-family: 'DM Sans', sans-serif;
    font-size: 14.5px;
    /* 400, not 600. A footer link is a signpost, not a statement. */
    font-weight: 400;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    letter-spacing: 0.005em;
    transition: color 0.22s ease;
  }
  .footer-col ul li a:hover {
    color: #ffffff;
  }

  /* Footer bottom — sign-off strip with brand heart */
  .footer-bottom {
    padding: 40px 24px 44px;
    margin: 0 -40px;
    background: #000000;
    /* No border here. The gradient hairline above already separates the
       columns from the sign-off; a second rule 40px below it made the
       footer look like three stacked boxes. */
    border-top: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  }
  .footer-copy {
    font-size: 14.5px;
    color: #ffffff;
    line-height: 2;
    letter-spacing: 0.03em;
    font-weight: 400;
  }
  /* ABN sits under the sign-off, quieter than the brand line above it.
     Added 23.08.26 to match the cardealers footer. */
  .footer-abn {
    display: inline-block;
    margin-top: 4px;
    font-size: 12.5px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
  }
  /* The cardealers heartbeat, copied exactly. It was a slow 2.4s pulse with
     a glow; the cardealers one is a real double-beat — quick, quick, pause —
     which reads as a heart rather than as something breathing. Colour
     #BE9DE7 and 1.05em also come from there. */
  .footer-copy .heart {
    display: inline-block;
    color: #BE9DE7;
    font-size: 1.05em;
    margin: 0 3px;
    animation: heart-beat 1.8s ease-in-out infinite;
  }
  @keyframes heart-beat {
    0%, 100% { transform: scale(1); }
    12%      { transform: scale(1.28); }
    24%      { transform: scale(1); }
    36%      { transform: scale(1.18); }
    48%      { transform: scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .footer-copy .heart { animation: none; }
  }
  .footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  /* Matched to .footer-copy beside it: same size, same white. These two
     lines are the same kind of information and should not be two
     different brightnesses. Hover dims slightly instead of brightening,
     because there is nowhere brighter than white to go. */
  .footer-links a {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 14.5px;
    color: #ffffff;
    text-decoration: none;
    transition: opacity 0.22s ease;
    font-weight: 400;
    letter-spacing: 0.03em;
  }
  .footer-links a:hover {
    opacity: 0.7;
  }
  .footer-links .sep {
    color: rgba(255,255,255,0.30);
    user-select: none;
  }

  /* ─── ANIMATIONS ─── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── MOBILE MENU ─── */
  .menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
  }
  .menu-toggle span {
    width: 22px; height: 2px;
    background: var(--purple-900);
    border-radius: 2px;
    transition: all 0.3s;
  }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1100px) {
    .pricing-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
    .pricing-card.featured { transform: none; }
  }
  @media (max-width: 1024px) {
    .feature-block { grid-template-columns: 1fr; gap: 40px; }
    .feature-block.reverse { direction: ltr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin-left: auto; margin-right: auto; }
    /* AI section: stack the 2 columns vertically on tablet.
       Centred once stacked — left-aligned text made sense beside the
       phone, but under it the block sat hard against the left edge while
       the phone above it was centred. */
    .ai-two-col { grid-template-columns: 1fr; gap: 50px; }
    .ai-col-left { text-align: center; }
    .ai-col-left h2 { max-width: 100%; }
    .ai-lead { max-width: 100%; margin-left: auto; margin-right: auto; }
    .ai-mobile-pitch { max-width: 100%; }
  }
  @media (max-width: 640px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 400px; }
  }

  @media (max-width: 768px) {
    nav { padding: 0 20px; }
    .nav-links, .nav-ctas { display: none; }
    .menu-toggle { display: flex; }
    .hero { padding: calc(var(--nav-height) + 40px) 20px 0; }
    section { padding: 60px 20px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stat-number { font-size: 36px; }
    .footer-top { grid-template-columns: 1fr; gap: 28px; }
    /* Height follows from the width now, so only the width is set. The
       bezel drops to 9px and the inner radius follows it: 44 - 9 = 35. */
    .ai-phone-frame { width: 292px; padding: 9px; border-radius: 44px; }
    .ai-phone-screen { border-radius: 35px; }
    .ai-mobile-pitch { padding: 18px 20px; }
    .ai-mobile-pitch-headline { font-size: 19px; }
    .booster-card { width: 220px; height: 160px; }
    .stats-section .ai-int-label { font-size: 1.1rem; }
    .stats-section .ai-logo-chip { font-size: 13px; padding: 8px 14px; }
    /* ─── Mobile spacing: balanced curve pattern. Mobile curves are 60px tall, so:
         curve-containing sections need ~80px padding on that side (60 + 20 buffer)
         curve-adjacent sections can use tight 10-20px padding ─── */
    /* Hero → Platform: templates teaser pushes button away, platform pulls content up */
    .templates-teaser { padding: 32px 0 80px; }
    #platform { padding: 10px 40px 10px !important; }
    /* Platform feature rows: tighter on mobile, first/last neutralised */
    .feature-row { padding: 30px 0 !important; }
    #platform .feature-row:first-of-type { padding-top: 0 !important; }
    #platform .feature-row:last-of-type { padding-bottom: 0 !important; }
    /* AI section: needs to clear inverted curve at TOP (80px), no curve at bottom (40px clean) */
    .ai-section { padding: 80px 20px 40px; }
    /* Stats: no curve at top (10px tight), DOWNWARD curve at bottom needs clearance (80px) */
    .stats-section { padding: 10px 20px 80px; }
    /* Booster: above curve gives 10px to be close to curve, below gives 10px tight */
    .booster-section { padding: 10px 0 10px; }
    /* Team: BOTH curves to clear — inverted at top AND downward at bottom */
    .team-section { padding: 80px 20px 80px; }
    /* Testimonials: 10px top (tight to curve above), 10px bottom (tight to curve below) */
    .testimonials-section { padding: 28px 0 30px; }
    /* Pricing: BOTH curves to clear — inverted at top AND downward at bottom */
    .pricing-section { padding-top: 80px; padding-bottom: 80px; }
    /* FAQ: tight top (curve from pricing above), tight bottom (curve into CTA below) */
    .faq-section { padding: 20px 20px 10px; }
    /* CTA: 80px top to clear inverted curve from FAQ above, 40px bottom (footer is same colour) */
    .cta-section { padding: 64px 20px 48px; }
  }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }

  /* ─── PREMIUM NEON GRID (for dark sections) ─── */
  .neon-grid-bg {
    position: relative;
  }
  .neon-grid-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(196,127,224,0.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,127,224,0.10) 1px, transparent 1px);
    background-size: 64px 64px;
    filter: drop-shadow(0 0 1px rgba(196,127,224,0.4));
    pointer-events: none;
    z-index: 0;
  }
  .neon-grid-bg > * { position: relative; z-index: 1; }

  /* ─── PREMIUM NEON BADGE ─── */
  .neon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, rgba(162,92,206,0.22) 0%, rgba(122,86,185,0.22) 100%);
    border: 1px solid rgba(196,127,224,0.55);
    border-radius: 100px;
    padding: 7px 18px;
    font-size: 12.5px;
    font-weight: 700;
    color: #e8d3f5;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow:
      0 0 8px rgba(196,127,224,0.7),
      0 0 16px rgba(162,92,206,0.45);
    box-shadow:
      0 0 18px rgba(162,92,206,0.45),
      0 0 36px rgba(122,86,185,0.25),
      inset 0 1px 0 rgba(255,255,255,0.08);
    animation: neonPulse 3s ease-in-out infinite;
  }
  @keyframes neonPulse {
    0%, 100% {
      box-shadow:
        0 0 18px rgba(162,92,206,0.45),
        0 0 36px rgba(122,86,185,0.25),
        inset 0 1px 0 rgba(255,255,255,0.08);
    }
    50% {
      box-shadow:
        0 0 26px rgba(196,127,224,0.6),
        0 0 50px rgba(162,92,206,0.4),
        inset 0 1px 0 rgba(255,255,255,0.12);
    }
  }

  /* ─── MOBILE NAV ─── */
  @media (max-width: 768px) {
    .logo-img { width: 34px; height: 34px; }
    .logo-text { font-size: 1.05rem; }
    nav { height: 64px; padding: 0 16px; }
  }

  /* ─── MEGA DROPDOWN (Multi-AI & Templates) ─── */
  .dropdown.mega {
    min-width: 560px;
    padding: 14px;
  }
  .dropdown.mega-wide {
    min-width: 540px;
    padding: 14px;
  }
  .mega-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 14px;
  }
  .mega-section-title {
    grid-column: 1 / -1;
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-700);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 10px 12px 6px;
    border-top: 1px solid rgba(162,92,206,0.14);
    margin-top: 4px;
  }
  .mega-section-title:first-child {
    border-top: none;
    margin-top: 0;
  }

  /* AI Platform Logo (matches dashboard style) */
  .ai-logo {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--white);
    border: 1px solid rgba(162,92,206,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .ai-logo img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
  }

  /* Featured platforms (ChatGPT, Claude, Gemini) — most relevant */
  .dropdown a.featured {
    background: linear-gradient(135deg, rgba(162,92,206,0.06) 0%, rgba(122,86,185,0.04) 100%);
    border: 1px solid rgba(162,92,206,0.22);
  }
  .dropdown a.featured .ai-logo {
    border-color: rgba(162,92,206,0.45);
    box-shadow: 0 2px 8px rgba(162,92,206,0.15);
  }
  .dropdown a.featured .dropdown-label > div:first-child {
    font-weight: 600;
    color: var(--purple-700);
  }
  .featured-badge {
    margin-left: auto;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--purple-700);
    background: var(--purple-100);
    padding: 3px 7px;
    border-radius: 100px;
    text-transform: uppercase;
  }

  /* Heat Grid flashing purple button (inside dropdown) */
  .dropdown a.heatgrid-cta {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    color: white;
    margin-top: 8px;
    border-radius: 10px;
    padding: 12px 14px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(122,86,185,0.40);
    animation: hg-pulse 2s ease-in-out infinite;
  }
  .dropdown a.heatgrid-cta:hover {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(162,92,206,0.55);
  }
  .dropdown a.heatgrid-cta .dropdown-icon {
    background: rgba(255,255,255,0.20);
  }
  .dropdown a.heatgrid-cta .dropdown-icon svg { stroke: white; }
  .dropdown a.heatgrid-cta .dropdown-label > div:first-child {
    color: white;
    font-weight: 700;
  }
  .dropdown a.heatgrid-cta .dropdown-label span {
    color: rgba(255,255,255,0.80);
  }
  .heatgrid-flash-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    margin-left: auto;
    box-shadow: 0 0 12px 2px rgba(255,255,255,0.9);
    animation: hg-flash 1.2s ease-in-out infinite;
  }
  @keyframes hg-pulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(122,86,185,0.40); }
    50%      { box-shadow: 0 4px 22px rgba(162,92,206,0.75), 0 0 0 4px rgba(162,92,206,0.12); }
  }
  @keyframes hg-flash {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
  }

  /* Templates mega menu */
  .templates-mega {
    min-width: 620px;
    padding: 14px;
  }
  /* Three columns since Offices & Clinics was removed 30.08.26. It said
     5 while the menu had 4, which happened to look fine because an `auto`
     track with nothing in it collapses to zero width — but a stale number
     here is the kind of thing that breaks the day someone adds a column
     back and cannot work out why it wrapped. */
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 0;
    justify-content: center;
  }
  .templates-col {
    padding: 0 10px;
    border-left: 1px solid rgba(162,92,206,0.12);
    min-width: 0;
  }
  .templates-col:first-child { border-left: none; }
  .templates-col h5 {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: var(--purple-700);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 6px 8px 10px;
    margin: 0;
    white-space: nowrap;
  }
  .templates-col a {
    padding: 7px 8px;
    font-size: 13px;
    border-radius: 6px;
    color: var(--gray-800);
    text-decoration: none;
    display: block;
    transition: all 0.15s;
    white-space: nowrap;
  }
  .templates-col a:hover {
    background: var(--purple-100);
    color: var(--purple-700);
  }

  /* Responsive — collapse mega menus on smaller screens */
  @media (max-width: 1100px) {
    .dropdown.mega, .dropdown.mega-wide, .templates-mega {
      min-width: 480px;
    }
    .templates-grid { grid-template-columns: repeat(2, 1fr); }
    .templates-col { border-left: none; border-top: 1px solid rgba(162,92,206,0.12); padding-top: 8px; margin-top: 4px; }
    .templates-col:first-child, .templates-col:nth-child(2) { border-top: none; margin-top: 0; padding-top: 0; }
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 OVERRIDES — gardening-template style: clean white header,
     small purple dots, no icons, no sub-descriptions, dark hero with video
     These overrides come last so they win the cascade.
     ════════════════════════════════════════════════════════════════════ */

  :root {
    /* Darker purple set used by V2 header & hero */
    --rzn-deep:    #4a2d8a;   /* darker brand */
    --rzn-mid:     #5b34a8;
    --rzn-bright:  #7a3fc5;
    --rzn-soft:    #ede4fa;   /* light tint for hover/featured bg */
    --rzn-softer:  #f6f0fd;
    --rzn-ink:     #14091f;   /* near-black with purple tone */
    --rzn-muted:   #5a6275;
    --rzn-line:    #e9ebf1;
    --rzn-grad:    linear-gradient(135deg, #4a2d8a 0%, #7a3fc5 100%);
    --rzn-grad-soft: linear-gradient(135deg, #f3eafd 0%, #e7d8f8 100%);

    /* Dark hero gradient — purple version of gardening hero */
    --rzn-hero-bg:
      radial-gradient(60% 80% at 80% 10%, rgba(122,63,197,0.55) 0%, rgba(60,30,110,0.25) 35%, transparent 65%),
      radial-gradient(50% 70% at 15% 90%, rgba(162,92,206,0.35) 0%, rgba(30,15,55,0.2) 40%, transparent 70%),
      radial-gradient(40% 60% at 50% 50%, rgba(122,63,197,0.18) 0%, transparent 60%),
      #0e0620;
  }

  /* ── Reset nav from V1 ── */
  nav {
    position: sticky;
    top: 0;
    height: 72px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--rzn-line);
    z-index: 100;
    box-shadow: none;
    padding: 0 28px;
    transition: box-shadow 0.3s;
  }
  nav.scrolled { box-shadow: 0 10px 30px rgba(15,20,32,0.08); }

  .nav-inner { height: 72px; }

  /* Logo: gardening style — mark + wordmark */
  .logo {
    gap: 10px;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.20rem;
    color: var(--rzn-ink);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .logo:hover { transform: none; }
  /* The border/shadow this used to animate went with the box on
     28.08.26. The hover now lives on .logo-img (a small scale). */
  /* ── LOGO ─────────────────────────────────────────────────────
     The bordered box was removed 28.08.26. It was there to give the
     favicon a clean edge, but the mark already has its own shape and
     the ring around it read as a UI element the logo happened to sit
     inside, rather than as the logo itself.

     The box is now a plain wrapper with no border, background or
     shadow; the ROUNDING moved onto the image. The wrapper stays in
     the markup because the nav and the footer both use it for
     alignment, and removing it would mean editing every page. */
  .logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .logo-img {
    /* Bigger than before: at 26px it was floating inside a 42px box.
       Without the box it can occupy the space the box used to. */
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    /* 22% rather than a fixed radius, so the curve keeps its
       proportion if the size ever changes. */
    border-radius: 22%;
    transition: transform .25s;
  }
  .logo:hover .logo-img { transform: scale(1.04); }
  .logo-text {
    color: var(--rzn-ink);
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 1.20rem;
    letter-spacing: -0.01em;
  }
  .logo-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: var(--rzn-grad);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 8px 20px rgba(91,52,168,0.45);
    flex-shrink: 0;
  }
  .logo-mark svg { width: 22px; height: 22px; }
  .logo-text { line-height: 1; }

  /* Nav links */
  .nav-links {
    gap: 4px;
  }
  .nav-links > li > a {
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--rzn-ink);
    padding: 10px 14px;
    border-radius: 10px;
    gap: 6px;
    transition: background 0.2s, color 0.2s;
  }
  .nav-links > li > a:hover {
    background: var(--rzn-soft);
    color: var(--rzn-deep);
  }
  .nav-links > li > a .chevron {
    width: 13px; height: 13px;
    opacity: 0.7;
  }

  /* Dropdown shell */
  .dropdown {
    border: 1px solid var(--rzn-line);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,20,32,0.14);
    padding: 12px;
    transform: translateX(-50%) translateY(8px);
    top: calc(100% + 6px);
  }
  .nav-links > li:hover .dropdown {
    transform: translateX(-50%) translateY(0);
  }

  /* All dropdown links — clean dot + text only, no big icons, no descriptions */
  .dropdown a {
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--rzn-ink);
    transition: background 0.18s, color 0.18s;
  }
  .dropdown a:hover {
    background: var(--rzn-grad-soft);
    color: var(--rzn-deep);
  }

  /* The purple dot (replaces all the old icon boxes) */
  .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--rzn-grad);
    flex-shrink: 0;
    display: inline-block;
  }

  /* Hide the old V1 icon boxes / descriptions inside dropdowns */
  .dropdown .dropdown-icon { display: none !important; }
  .dropdown .dropdown-label span { display: none !important; }
  .dropdown .dropdown-label {
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  /* ── Heat Grid flashing button — keep dark purple gradient ── */
  .dropdown a.heatgrid-cta {
    background: var(--rzn-grad);
    margin-top: 6px;
    padding: 11px 14px;
    box-shadow: 0 4px 14px rgba(74,45,138,0.45);
    color: #fff;
  }
  .dropdown a.heatgrid-cta:hover {
    background: var(--rzn-grad);
    color: #fff;
    transform: translateY(-1px);
  }
  .dropdown a.heatgrid-cta .dot {
    background: #fff;
    width: 8px; height: 8px;
    box-shadow: 0 0 12px 2px rgba(255,255,255,0.9);
    animation: hg-flash 1.2s ease-in-out infinite;
  }
  .dropdown a.heatgrid-cta .dropdown-label { color: #fff; }

  /* ── AI Multi-Platform mega menu — tighter ── */
  .dropdown.mega-wide {
    min-width: 540px;
    max-width: 560px;
    padding: 12px;
  }
  .mega-grid-2 {
    grid-template-columns: 1fr 1fr;
    gap: 2px 10px;
  }
  .mega-section-title {
    font-family: 'Sora', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--rzn-deep);
    letter-spacing: 0.08em;
    padding: 8px 12px 6px;
    border-top: 1px solid var(--rzn-line);
    margin-top: 4px;
  }
  .mega-section-title:first-child {
    border-top: none;
    margin-top: 0;
  }

  /* AI logo box — small, clean */
  .ai-logo {
    width: 26px; height: 26px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid var(--rzn-line);
    overflow: hidden;
  }
  .ai-logo img {
    width: 18px; height: 18px;
    object-fit: contain;
  }

  /* Featured AI platforms (ChatGPT, Claude, Gemini, Google Maps) — dark purple style */
  .dropdown a.featured {
    background: var(--rzn-grad-soft);
    border: 1px solid rgba(91,52,168,0.18);
  }
  .dropdown a.featured:hover {
    background: linear-gradient(135deg, #e1cffa 0%, #d0b6f3 100%);
    color: var(--rzn-deep);
  }
  .dropdown a.featured .ai-logo {
    border-color: rgba(91,52,168,0.35);
    box-shadow: 0 2px 8px rgba(91,52,168,0.18);
  }
  .dropdown a.featured .dropdown-label { color: var(--rzn-deep); font-weight: 700; }
  .featured-badge {
    margin-left: auto;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--rzn-grad);
    padding: 3px 7px;
    border-radius: 50px;
    text-transform: uppercase;
  }

  /* ── Templates mega menu — wider with proper internal spacing ── */
  /* 720px, down from 980px. That number was sized for four columns; with
     three it left a blank quarter on the right. It is a min-width, so the
     panel still grows to fit its content — but it must not be wider than
     the content needs, or the extra space has nowhere to go.
     Update this whenever a column is added or removed. */
  .dropdown.templates-mega {
    min-width: 720px;
    max-width: calc(100vw - 40px);
    padding: 18px;
  }
  .templates-grid { gap: 0; }
  .templates-col {
    border-left: 1px solid var(--rzn-line);
    padding: 0 18px;
  }
  .templates-col:first-child { border-left: none; padding-left: 8px; }
  .templates-col:last-child { padding-right: 8px; }
  .templates-col h5 {
    font-family: 'Sora', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--rzn-deep);
    letter-spacing: 0.08em;
    padding: 6px 10px 8px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .templates-col a {
    padding: 7px 10px;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--rzn-ink);
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }
  .templates-col a::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rzn-grad);
    flex-shrink: 0;
    display: inline-block;
  }
  .templates-col a:hover {
    background: var(--rzn-grad-soft);
    color: var(--rzn-deep);
  }

  /* ── Nav CTAs — darker brand ── */
  .btn-ghost {
    color: var(--rzn-deep);
    border: 1.5px solid var(--rzn-soft);
    padding: 9px 18px;
    border-radius: 10px;
    font-weight: 600;
  }
  .btn-ghost:hover { border-color: var(--rzn-deep); background: var(--rzn-soft); }
  .btn-primary {
    background: var(--rzn-grad);
    box-shadow: 0 6px 18px rgba(74,45,138,0.40);
    padding: 9px 20px;
    border-radius: 10px;
    font-weight: 700;
  }
  .btn-primary:hover {
    box-shadow: 0 8px 22px rgba(91,52,168,0.55);
    transform: translateY(-1px);
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 HERO — centered, vibrant even background, rotating words + floating particles
     ════════════════════════════════════════════════════════════════════ */
  .hero {
    min-height: auto;
    background: linear-gradient(180deg, #1a0b3a 0%, #15082e 25%, #0c0420 60%, #080318 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
    padding: 56px 0 0;
    display: block;
    text-align: center;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
      linear-gradient(rgba(196,127,224,0.12) 1px, transparent 1px),
      linear-gradient(90deg, rgba(196,127,224,0.12) 1px, transparent 1px);
    background-size: 64px 64px;
    pointer-events: none;
    z-index: 1;
  }
  .hero .orb { display: none; }

  /* ─── Floating ambient particles — premium SaaS aesthetic ─── */
  /* Used in both .hero and .pricing-section for visual continuity */
  .hero-particles,
  .section-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  .hp {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffff 0%, #c47fe0 25%, rgba(196,127,224,0.6) 50%, transparent 75%);
    box-shadow:
      0 0 8px rgba(196,127,224,0.9),
      0 0 18px rgba(196,127,224,0.6),
      0 0 32px rgba(196,127,224,0.3);
    will-change: transform, opacity;
    opacity: 0.7;
  }

  /* Particle positions + drift paths — 18 particles total */
  .hp-1  { width: 5px;  height: 5px;  left: 6%;   top: 12%;  animation: hp-float-a 22s ease-in-out infinite,         hp-flash 2.4s ease-in-out infinite 0s; }
  .hp-2  { width: 4px;  height: 4px;  left: 16%;  top: 64%;  animation: hp-float-b 27s ease-in-out infinite 2s,      hp-flash 3.1s ease-in-out infinite 0.4s; }
  .hp-3  { width: 7px;  height: 7px;  left: 28%;  top: 8%;   animation: hp-float-a 30s ease-in-out infinite 1s,      hp-flash 2.8s ease-in-out infinite 0.8s; }
  .hp-4  { width: 3px;  height: 3px;  left: 42%;  top: 76%;  animation: hp-float-c 19s ease-in-out infinite 3s,      hp-flash 2.2s ease-in-out infinite 1.2s; }
  .hp-5  { width: 6px;  height: 6px;  left: 54%;  top: 26%;  animation: hp-float-b 25s ease-in-out infinite 5s,      hp-flash 3.4s ease-in-out infinite 0.2s; }
  .hp-6  { width: 4px;  height: 4px;  left: 66%;  top: 58%;  animation: hp-float-c 23s ease-in-out infinite 4s,      hp-flash 2.6s ease-in-out infinite 1.6s; }
  .hp-7  { width: 5px;  height: 5px;  left: 78%;  top: 18%;  animation: hp-float-a 28s ease-in-out infinite 6s,      hp-flash 3.0s ease-in-out infinite 1.0s; }
  .hp-8  { width: 3px;  height: 3px;  left: 88%;  top: 70%;  animation: hp-float-b 21s ease-in-out infinite 1.5s,    hp-flash 2.3s ease-in-out infinite 0.6s; }
  .hp-9  { width: 6px;  height: 6px;  left: 36%;  top: 44%;  animation: hp-float-c 32s ease-in-out infinite 2.5s,    hp-flash 3.6s ease-in-out infinite 0s; }
  .hp-10 { width: 4px;  height: 4px;  left: 60%;  top: 84%;  animation: hp-float-a 26s ease-in-out infinite 3.5s,    hp-flash 2.7s ease-in-out infinite 1.4s; }
  .hp-11 { width: 5px;  height: 5px;  left: 8%;   top: 88%;  animation: hp-float-b 24s ease-in-out infinite 4.5s,    hp-flash 2.9s ease-in-out infinite 1.8s; }
  .hp-12 { width: 3px;  height: 3px;  left: 22%;  top: 32%;  animation: hp-float-c 20s ease-in-out infinite 2.2s,    hp-flash 2.1s ease-in-out infinite 0.3s; }
  .hp-13 { width: 4px;  height: 4px;  left: 48%;  top: 56%;  animation: hp-float-a 29s ease-in-out infinite 5.5s,    hp-flash 3.2s ease-in-out infinite 1.1s; }
  .hp-14 { width: 6px;  height: 6px;  left: 72%;  top: 38%;  animation: hp-float-b 23s ease-in-out infinite 0.5s,    hp-flash 2.5s ease-in-out infinite 1.5s; }
  .hp-15 { width: 5px;  height: 5px;  left: 92%;  top: 50%;  animation: hp-float-c 26s ease-in-out infinite 3.8s,    hp-flash 3.3s ease-in-out infinite 0.7s; }
  .hp-16 { width: 3px;  height: 3px;  left: 4%;   top: 48%;  animation: hp-float-a 21s ease-in-out infinite 1.8s,    hp-flash 2.4s ease-in-out infinite 1.3s; }
  .hp-17 { width: 4px;  height: 4px;  left: 32%;  top: 92%;  animation: hp-float-b 27s ease-in-out infinite 6.5s,    hp-flash 2.8s ease-in-out infinite 0.5s; }
  .hp-18 { width: 5px;  height: 5px;  left: 84%;  top: 6%;   animation: hp-float-c 24s ease-in-out infinite 4.2s,    hp-flash 3.0s ease-in-out infinite 1.7s; }

  /* 19-34 — added when the hero grew to include the templates teaser and the
     mobile showcase. Positions are weighted below 40% so the new lower area
     is not bare while the top stays as it was. */
  .hp-19 { width: 4px;  height: 4px;  left: 12%;  top: 108%; animation: hp-float-b 25s ease-in-out infinite 1.2s,    hp-flash 2.6s ease-in-out infinite 0.9s; }
  .hp-20 { width: 6px;  height: 6px;  left: 26%;  top: 122%; animation: hp-float-a 31s ease-in-out infinite 3.2s,    hp-flash 3.1s ease-in-out infinite 0.2s; }
  .hp-21 { width: 3px;  height: 3px;  left: 44%;  top: 104%; animation: hp-float-c 22s ease-in-out infinite 5.1s,    hp-flash 2.2s ease-in-out infinite 1.5s; }
  .hp-22 { width: 5px;  height: 5px;  left: 58%;  top: 130%; animation: hp-float-b 28s ease-in-out infinite 0.8s,    hp-flash 2.9s ease-in-out infinite 0.4s; }
  .hp-23 { width: 4px;  height: 4px;  left: 74%;  top: 112%; animation: hp-float-a 24s ease-in-out infinite 4.4s,    hp-flash 3.4s ease-in-out infinite 1.1s; }
  .hp-24 { width: 6px;  height: 6px;  left: 90%;  top: 126%; animation: hp-float-c 29s ease-in-out infinite 2.7s,    hp-flash 2.5s ease-in-out infinite 1.8s; }
  .hp-25 { width: 3px;  height: 3px;  left: 5%;   top: 142%; animation: hp-float-a 26s ease-in-out infinite 1.9s,    hp-flash 2.3s ease-in-out infinite 0.6s; }
  .hp-26 { width: 5px;  height: 5px;  left: 20%;  top: 156%; animation: hp-float-b 30s ease-in-out infinite 5.8s,    hp-flash 3.2s ease-in-out infinite 1.3s; }
  .hp-27 { width: 4px;  height: 4px;  left: 38%;  top: 168%; animation: hp-float-c 23s ease-in-out infinite 3.6s,    hp-flash 2.7s ease-in-out infinite 0.1s; }
  .hp-28 { width: 6px;  height: 6px;  left: 52%;  top: 148%; animation: hp-float-a 27s ease-in-out infinite 0.3s,    hp-flash 3.0s ease-in-out infinite 1.6s; }
  .hp-29 { width: 3px;  height: 3px;  left: 68%;  top: 162%; animation: hp-float-b 21s ease-in-out infinite 4.9s,    hp-flash 2.4s ease-in-out infinite 0.8s; }
  .hp-30 { width: 5px;  height: 5px;  left: 84%;  top: 144%; animation: hp-float-c 32s ease-in-out infinite 2.1s,    hp-flash 3.5s ease-in-out infinite 1.4s; }
  .hp-31 { width: 4px;  height: 4px;  left: 14%;  top: 178%; animation: hp-float-a 25s ease-in-out infinite 6.2s,    hp-flash 2.8s ease-in-out infinite 0.5s; }
  .hp-32 { width: 6px;  height: 6px;  left: 46%;  top: 190%; animation: hp-float-b 29s ease-in-out infinite 1.4s,    hp-flash 3.3s ease-in-out infinite 1.9s; }
  .hp-33 { width: 3px;  height: 3px;  left: 78%;  top: 184%; animation: hp-float-c 20s ease-in-out infinite 3.9s,    hp-flash 2.1s ease-in-out infinite 0.3s; }
  .hp-34 { width: 5px;  height: 5px;  left: 94%;  top: 172%; animation: hp-float-a 28s ease-in-out infinite 5.3s,    hp-flash 2.9s ease-in-out infinite 1.0s; }

  /* Three different drift paths so particles don't move in unison */
  @keyframes hp-float-a {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(40px, -30px); }
    50%      { transform: translate(20px, -60px); }
    75%      { transform: translate(-25px, -30px); }
  }
  @keyframes hp-float-b {
    0%, 100% { transform: translate(0, 0); }
    33%      { transform: translate(-35px, 40px); }
    66%      { transform: translate(45px, 15px); }
  }
  @keyframes hp-float-c {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(50px, -50px); }
  }
  /* Neon flash — pulses brightness and glow intensity */
  @keyframes hp-flash {
    0%, 100% {
      opacity: 0.35;
      box-shadow:
        0 0 4px rgba(196,127,224,0.5),
        0 0 10px rgba(196,127,224,0.3);
    }
    50% {
      opacity: 1;
      box-shadow:
        0 0 12px rgba(196,127,224,1),
        0 0 26px rgba(196,127,224,0.75),
        0 0 44px rgba(196,127,224,0.4);
    }
  }

  /* Mobile: keep the effect but reduce the count for performance */
  @media (max-width: 768px) {
    .hp-9, .hp-10, .hp-11, .hp-12, .hp-13, .hp-14, .hp-15, .hp-16, .hp-17, .hp-18 {
      display: none;
    }
  }
  /* Respect motion preferences — keep dots visible, just static */
  @media (prefers-reduced-motion: reduce) {
    .hp { animation: none !important; opacity: 0.6; }
  }

  .hero-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 28px;
    position: relative;
    z-index: 2;
  }
  .hero-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }
  .hero-text-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 920px;
  }

  /* Status badge */
  /* ── HERO PILL ────────────────────────────────────────────────
     Replaced 28.08.26. Was a translucent badge with a pulsing dot;
     now it is the SAME spinning-light pill as the cardealers pricing
     hero (.pr-anchor-line there), so the two products introduce
     themselves the same way.

     Built by ROTATING an oversized conic-gradient behind the pill and
     letting overflow:hidden clip it to the pill shape, rather than
     animating a gradient angle with @property. Both look identical;
     only this one works in every browser, and the first thing a
     visitor sees is not the place to depend on a new CSS feature.

     The square is 260% of the pill's WIDTH with aspect-ratio 1, so it
     still covers the corners as it turns. If the pill ever gets much
     taller, raise that number.

     The light is one bright sweep in a mostly transparent circle, so
     the eye reads a single point travelling round the edge rather
     than a spinning wheel. */
  .v2-status-badge {
    display: inline-flex;
    align-items: center;
    margin-bottom: 22px;
  }
  .glow-pill {
    position: relative; isolation: isolate;
    display: inline-block; padding: 1.5px; border-radius: 999px;
    background: rgba(196,127,224,.30);
    overflow: hidden;
  }
  .glow-pill::before {
    content: ""; position: absolute; z-index: 0;
    top: 50%; left: 50%; width: 260%; aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(from 0deg,
      transparent 0 62%,
      rgba(196,165,233,.85) 76%,
      #FFFFFF 82%,
      rgba(196,165,233,.85) 88%,
      transparent 100%);
    animation: glow-pill-spin 3.4s linear infinite;
  }
  .glow-pill-in {
    position: relative; z-index: 1; display: block;
    font-family: 'Sora', sans-serif; font-weight: 500;
    font-size: clamp(.8rem, 1.7vw, .95rem);
    letter-spacing: .01em; color: #fff;
    padding: 10px 21px; border-radius: 999px;
    /* Solid, not translucent: a see-through face would let the
       spinning light show through the middle of the pill. */
    background: #1B0F32;
    white-space: nowrap;
  }
  @keyframes glow-pill-spin { to { rotate: 360deg; } }
  /* A permanently moving object on the page is exactly what this
     setting exists for. */
  @media (prefers-reduced-motion: reduce) {
    .glow-pill::before { animation: none; }
  }
  @media (max-width: 520px) {
    /* The three items no longer fit on one line on a narrow phone, and
       shrinking the type further would make it unreadable. */
    .glow-pill-in { white-space: normal; text-align: center; padding: 9px 16px; }
  }

  /* Kept: @keyframes pulse no longer drives the hero badge (replaced by
     .glow-pill above), but it is a generic name and other pages may still
     reference it. Two lines of CSS is cheaper than the risk. */
  @keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(2.6); opacity: 0; }
  }

  /* H1 */
  .v2-hero-h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 18px;
    text-align: center;
    font-size: clamp(2.3rem, 5.5vw, 4.2rem);
  }
  /* ── "Grow Online" — a white light sweeping through the letters ──
     Added 28.08.26.

     HOW IT WORKS. The word is painted with a gradient that is clipped to
     the glyph shapes (background-clip:text), so what you see IS the
     background. Animating background-position slides that gradient
     THROUGH the letters instead of over them — the light appears to be
     inside the type, not a shine sitting on top.

     The gradient is 300% of the element's width: three panels' worth of
     colour on a one-panel window, so the bright band has somewhere to
     travel from and to. Moving from 100% to 0% runs it left-to-right.

     text-shadow does NOT work on clipped text (the shadow is drawn from
     the transparent glyph, so there is nothing to cast). The outer glow
     is a drop-shadow filter instead, which reads the painted result.

     Do not switch this to an ::after overlay with mix-blend-mode. That
     approach needs the text duplicated in the DOM for screen readers to
     stay sane, and it breaks the moment the line wraps. */
  .v2-hero-h1 .neon-word {
    display: inline-block;
    background: linear-gradient(
      100deg,
      #c47fe0 0%,
      #c47fe0 35%,
      #ffffff 46%,          /* the bright core of the sweep */
      #f3e6fb 52%,
      #c47fe0 63%,
      #c47fe0 100%
    );
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(196,127,224,0.45));
    position: relative;
    /* 11s, not 4.5s. The first version travelled fast enough to read as a
       glint; slowed down, the light drifts through the word and the
       movement registers as something expensive rather than something
       flashing at you. */
    animation: neon-sweep 11s cubic-bezier(.5,0,.25,1) infinite;
  }
  @keyframes neon-sweep {
    /* The sweep uses the first ~45% of the cycle (about 5 seconds), then
       the word rests for the remaining 6. A light that never stops moving
       stops reading as a highlight and starts reading as a broken page. */
    0%   { background-position: 100% 0; }
    45%  { background-position: 0% 0; }
    100% { background-position: 0% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .v2-hero-h1 .neon-word {
      animation: none;
      /* Parked mid-sweep so the word still has the highlight in it. */
      background-position: 42% 0;
    }
  }

  /* "Get Found on [rotating word]" — sits below subtitle, white label, bigger */
  .v2-rotator-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(1.25rem, 2.1vw, 1.75rem);
    color: #fff;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.4;
  }
  .v2-rotator-line .label {
    color: #fff;
    font-weight: 700;
  }
  .v2-rotator {
    position: relative;
    display: inline-block;
    min-width: 220px;
    height: 1.4em;
    line-height: 1.4em;
    text-align: left;
  }
  .v2-rotator span {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1.4em;
    white-space: nowrap;
    background: linear-gradient(135deg, #c47fe0 0%, #ffffff 50%, #c47fe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(196,127,224,0.5));
    opacity: 0;
    transform: translateY(8px);
    animation: rotate-word 12.5s infinite;
  }
  .v2-rotator span:nth-child(1) { animation-delay: 0s; }
  .v2-rotator span:nth-child(2) { animation-delay: 2.5s; }
  .v2-rotator span:nth-child(3) { animation-delay: 5s; }
  .v2-rotator span:nth-child(4) { animation-delay: 7.5s; }
  .v2-rotator span:nth-child(5) { animation-delay: 10s; }
  @keyframes rotate-word {
    0%, 2%   { opacity: 0; transform: translateY(8px); }
    6%, 18%  { opacity: 1; transform: translateY(0); }
    22%, 100%{ opacity: 0; transform: translateY(-8px); }
  }

  /* Subtitle */
  .v2-hero-sub {
    color: rgba(255,255,255,0.92);
    font-size: clamp(1.02rem, 1.3vw, 1.18rem);
    font-weight: 400;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto 14px;
    text-align: center;
  }

  /* Hero video */
  .v2-hero-visual {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
  }
  .v2-hero-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.18);
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    display: block;
    box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 0 1px rgba(196,127,224,0.20), 0 0 60px rgba(196,127,224,0.15);
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 TEMPLATES TEASER STRIP — lives inside the hero section now
     No background of its own — inherits the hero's gradient + grid
     Slight darker overlay at the bottom for subtle depth
     ════════════════════════════════════════════════════════════════════ */
  .templates-teaser {
    padding: 60px 28px 140px;
    position: relative;
    overflow: hidden;
  }
  /* Subtle overlay darkens this area without breaking the background flow */
  .templates-teaser::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.28) 100%);
    pointer-events: none;
    z-index: 0;
  }
  /* Bottom-right floating purple glow — same drift animation as the hero corner */
  .tt-inner::before {
    content: '';
    position: absolute;
    bottom: -25%;
    right: -10%;
    width: 50%;
    height: 65%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(196,127,224,0.20) 0%, transparent 70%);
    pointer-events: none;
    z-index: -1;
    animation: tt-drift-br 18s ease-in-out infinite;
    will-change: transform;
  }
  @keyframes tt-drift-br {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40%      { transform: translate(-50px, -25px) scale(1.1); }
    75%      { transform: translate(30px, -40px) scale(0.92); }
  }
  @media (prefers-reduced-motion: reduce) {
    .tt-inner::before { animation: none; }
  }
  .tt-inner {
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* ─── Curved transition: half-moon arc into the next (lighter) section ─── */
  /* Reusable component — drop into any section that ends dark and is followed by a light section.
     Uses absolute positioning to span full width regardless of parent padding. */
  .section-curve-divider {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;        /* -1px closes any sub-pixel seam with the next section */
    width: 100%;
    height: 90px;
    line-height: 0;
    z-index: 3;
    pointer-events: none;
  }
  .section-curve-divider svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* INVERTED variant: sits at the TOP of a dark section that follows a light one.
     The arc bulges upward into the dark, revealing the light section behind. */
  .section-curve-divider-top {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    width: 100%;
    height: 90px;
    line-height: 0;
    z-index: 3;
    pointer-events: none;
  }
  .section-curve-divider-top svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  /* Parent must be position:relative + must have enough bottom padding to clear the curve */
  .has-curve-divider {
    padding-bottom: 120px !important;
  }
  @media (max-width: 768px) {
    .section-curve-divider,
    .section-curve-divider-top { height: 60px; }
    .has-curve-divider { padding-bottom: 90px !important; }
  }

  /* Header — title centered */
  .tt-header {
    text-align: center;
    margin-bottom: 28px;
  }
  .tt-left {
    margin: 0 auto;
    max-width: 720px;
  }
  .tt-eyebrow {
    font-family: 'Sora', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #c47fe0;
    margin-bottom: 12px;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(196,127,224,0.5);
  }
  .tt-headline {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    color: #fff;
    margin-bottom: 14px;
    letter-spacing: -0.015em;
  }
  .tt-headline .tt-neon {
    background: linear-gradient(135deg, #c47fe0 0%, #ffffff 50%, #c47fe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(196,127,224,0.55));
  }
  .tt-sub {
    font-size: 1.12rem;
    color: rgba(255,255,255,0.75);
    margin: 0;
  }

  /* CTA — sits below the cards, centered, auto-width */
  /* ─── Mobile showcase — four phone cards under the CTA ───────────────
     Same shape as the cardealers version, restyled with this page's type
     (Sora) and lilac accent so it reads as one section, not a transplant. */
  .tt-mobile {
    margin-top: clamp(48px, 7vw, 88px);
    text-align: center;
  }
  /* Same treatment as .tt-headline above, so the two headings in this
     section read as a pair: Sora 800, tight leading, and the lilac-to-white
     gradient on the emphasised words. */
  /* ─── "Get Found on" rotator, moved down from the hero ───────────────
     Stacked in two lines rather than side by side. The rotating word needs
     a fixed-height row of its own: the names differ a lot in width (Google
     vs Google Maps) and a side-by-side layout would shift the static label
     left and right on every change. */
  .tt-rotator-line {
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    margin: 0 auto clamp(24px, 3.5vw, 38px);
  }
  .tt-rotator-label {
    display: block;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: -0.015em;
    color: #fff;
  }
  .tt-rotator {
    position: relative;
    display: block;
    /* Height reserved even though the words are absolutely positioned —
       without it the block collapses and everything below jumps. */
    height: 1.25em;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: -0.015em;
  }
  .tt-rotator span {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    white-space: nowrap;
    /* Flat purple. The three-layer neon glow was removed 28.08.26: with the
       sweeping light now on the hero H1 and on the phone-carousel heading,
       a third glowing element on the same screen made the page look lit
       rather than designed. The word still stands out — it is the only
       coloured thing on a white line, and it moves. */
    color: #c47fe0;
    opacity: 0;
    transform: translateY(8px);
    /* 4 words x 2.5s. Keep in step with the delays below if the list changes. */
    animation: rotate-word 10s infinite;
  }
  .tt-rotator span:nth-child(1) { animation-delay: 0s; }
  .tt-rotator span:nth-child(2) { animation-delay: 2.5s; }
  .tt-rotator span:nth-child(3) { animation-delay: 5s; }
  .tt-rotator span:nth-child(4) { animation-delay: 7.5s; }

  /* Hero line with no rotator — keeps the size of the line it replaced. */
  .v2-static-line { justify-content: center; }
  /* .tt-phones / .tt-phone removed 24.08.26 — the four fixed phone cards
     were replaced by the shared video carousel, which brings its own styles
     (.vc-*) inline in index.html. */

  .tt-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
  }
  .tt-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--rzn-deep);
    padding: 12px 28px;
    border-radius: 11px;
    font-family: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 0.93rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(0,0,0,0.30);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .tt-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(196,127,224,0.45);
  }

  /* Two horizontal rows that move as ONE block.
     Outer .tt-rows is the scrollable element; both rows ride along inside it. */
  .tt-rows {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Bleed to screen edges */
    margin: 0 -28px;
    padding: 6px 0;
    scroll-snap-type: none;
    will-change: scroll-position;
    /* Gradient fade-out mask on left/right edges — cards smoothly fade instead of hard cut */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .tt-rows::-webkit-scrollbar { display: none; }

  .tt-thumbs {
    display: flex;
    gap: 14px;
    padding: 4px 28px;
    width: max-content;
  }
  .tt-thumbs + .tt-thumbs { margin-top: 14px; }

  .tt-thumb {
    flex: 0 0 280px;
    aspect-ratio: 1500 / 870;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,0.10);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a0f2e;
    display: flex;
    align-items: flex-end;
    padding: 10px 14px;
    font-family: 'Sora', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
  .tt-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.78) 100%);
    pointer-events: none;
  }
  .tt-thumb span {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
  }
  .tt-thumb:hover {
    transform: translateY(-3px);
    border-color: rgba(196,127,224,0.5);
    box-shadow: 0 12px 30px rgba(196,127,224,0.25);
  }

  /* ═══ BLOG CAROUSEL (inside .cta-section) ══════════════════════
     Copied from the .tt-* template marquee above so the two behave
     identically. Renamed to .bc-* rather than reused, because the
     template one lives on a purple gradient and this one on pure
     black — sharing the class would mean every future tweak to one
     silently changing the other. */
  /* The CTA moved up into the pricing section on 29.08.26, so this is now
     the only thing in the final dark band. Margins are even top and bottom
     rather than pushed down under something that is no longer there. */
  .blog-carousel {
    position: relative;
    z-index: 2;                    /* above .cta-particles */
    max-width: 1280px;
    margin: 0 auto;
  }
  /* Copied value for value from the .blog-hero block in /blog/index.html,
     so the carousel heading and the page it links to are the same thing
     seen twice rather than two different designs. */
  .bc-head {
    text-align: center;
    margin-bottom: 34px;
  }
  /* .bc-tag replaced 29.08.26 by .glow-pill, the hero pill. Only the
     spacing below it is set here; everything else comes from .glow-pill so
     the two pills stay identical. */
  .bc-pill { margin-bottom: 22px; }
  .bc-gradient {
    background: linear-gradient(135deg, #cfb0e3 0%, #a25cce 50%, #c47fe0 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  /* Written as `.blog-carousel .bc-sub` — specificity (0,2,0) — because
     `.cta-section p` further up is (0,1,1) and beats a bare `.bc-sub`.
     That rule sets `margin: 0`, which killed the `auto` doing the
     centring, so the paragraph sat hard left under a centred heading.
     It also forces max-width 560px, colour and a text-shadow, all of
     which have to be re-stated here to win. */
  .blog-carousel .bc-sub {
    margin: 18px auto 0;
    font-size: 17px;
    font-weight: 400;
    color: #ffffff;
    max-width: 620px;
    line-height: 1.6;
    text-align: center;
    text-shadow: none;
  }
  @media (max-width: 700px) {
    .blog-carousel .bc-sub { font-size: 15px; }
    .bc-head { margin-bottom: 26px; }
  }
  /* Exactly the /blog/ hero h1: same clamp, same tracking, same width cap. */
  .bc-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -1.5px;
    line-height: 1.1;
    max-width: 760px;
    margin: 0 auto;
  }

  /* Same scroller as .tt-rows: the edge mask is what gives the cards the
     fade instead of a hard cut, and it must match the .tt- one exactly. */
  .bc-rows {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -28px;
    padding: 6px 0;
    scroll-snap-type: none;
    will-change: scroll-position;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  }
  .bc-rows::-webkit-scrollbar { display: none; }

  .bc-track {
    display: flex;
    gap: 14px;
    padding: 4px 28px;
    width: max-content;
  }

  /* A real card: image on top, then date, time and title on white —
     the same shape as the cards on the blog index, so a visitor who
     clicks through recognises where they landed.
     Fixed height, not aspect-ratio: the titles run from four words to
     fourteen, and cards of different heights in a moving row look
     broken rather than varied. */
  /* No fixed height. It was 320px, which left a band of empty white under
     every two-line title. The card is now exactly as tall as it needs to
     be: a 16/9 image on a 300px card is always 169px, and the body below
     is a fixed height too (see .bc-card-title), so every card still comes
     out identical without a magic number to keep in sync. */
  .bc-card {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.10);
    text-decoration: none;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
  .bc-card:hover {
    transform: translateY(-3px);
    border-color: rgba(196,127,224,0.5);
    box-shadow: 0 12px 30px rgba(196,127,224,0.25);
  }

  /* 16/9 rather than the templates' 1500/870 — the blog images are
     illustrations, and a wider crop cuts the top and bottom off the art. */
  .bc-img {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #1a0f2e;
  }

  .bc-body {
    padding: 13px 16px 15px;
    display: flex;
    flex-direction: column;
    gap: 7px;
  }
  .bc-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: #6b7280;
    white-space: nowrap;
  }
  .bc-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .bc-meta svg {
    width: 12px; height: 12px;
    fill: none; stroke: currentColor; stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  .bc-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: #c47fe0;
    flex-shrink: 0;
  }

  /* Exactly two lines, always. The clamp cuts anything longer; the
     matching min-height holds the space open when a title only runs to
     one, so every card is the same height whatever the title does.
     Two lines fits every title in the set with room to spare — three
     was reserving a line nothing used, which is what produced the empty
     white band under the text. */
  .bc-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    color: #1a0f2e;
    letter-spacing: -0.2px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;          /* 2 x line-height */
  }
  .bc-card:hover .bc-card-title { color: #7a56b9; }

  @media (max-width: 1024px) {
    .bc-card { flex: 0 0 270px; }
  }
  @media (max-width: 700px) {

    .bc-rows { margin: 0 -20px; }
    .bc-track { padding: 4px 20px; }
    .bc-card { flex: 0 0 240px; }
    .bc-card-title { font-size: 13.5px; }
  }

  /* Hide the old V1 hero markup entirely */
  .hero .hero-badge,
  .hero .hero-platforms,
  .hero .hero-ctas { display: none !important; }

  /* Responsive */
  @media (max-width: 1024px) {
    .v2-hero-sub { max-width: 100%; }
    .dropdown.mega-wide { min-width: 480px; }
    .tt-thumb { flex: 0 0 calc((100% - 36px) / 4); }   /* tablets: 4 cards visible */
  }
  @media (max-width: 768px) {
    nav { padding: 0 16px; height: 64px; }
    .nav-inner { height: 64px; }
    .logo-img { width: 32px; height: 32px; }
    .logo-text { font-size: 1rem; }

    /* ── Mobile slide-in menu ── */
    .menu-toggle { display: flex; position:relative; z-index:1003; }
    .nav-backdrop{ position:fixed; top:0; left:0; right:0; bottom:auto; height:100vh; height:100dvh; background:rgba(10,6,24,.5); opacity:0; visibility:hidden; transition:opacity .3s; z-index:95; }
    body.menu-open{ overflow:hidden; }
    body.menu-open .nav-backdrop{ opacity:1; visibility:visible; }
    #siteNav .menu-toggle{ z-index:1003; }
    #siteNav.nav-open .menu-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    #siteNav.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
    #siteNav.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    /* ─── MOBILE MENU GEOMETRY ─── rewritten 17.09.26 ───
       THE BUG THIS FIXES: on the home page the two buttons at the bottom of
       the open menu were pushed off the screen.

       Two causes, both here.

       1. `nav` carries backdrop-filter, and a filtered element becomes the
          containing block for position:fixed DESCENDANTS. Both panels live
          inside <nav>, so `top: calc(100dvh - 84px)` was measured from the
          nav, not from the viewport — and on the home page the sticky nav
          sits below the black banner, so that offset was added on top. The
          buttons landed roughly a banner-height below the fold. Every other
          page has no banner, the offset was zero, and it looked fine.

       2. The numbers 64 and 148 assumed a nav at y=0 that is 64px tall.

       Both are gone. The blur is dropped on mobile (see the nav rule below),
       so fixed resolves against the viewport again; the panel is anchored
       top-and-bottom instead of by height; and the offset comes from
       --rz-nav-offset, which the home page updates from the nav's real
       position. Pages without the banner never set it and fall back to 64. */
    nav{ backdrop-filter:none; -webkit-backdrop-filter:none; background:#fff; }

    .nav-links{
      display:flex; flex-direction:column; align-items:stretch; gap:0;
      position:fixed; top:var(--rz-nav-offset, 64px); left:0; right:0; width:auto;
      bottom:calc(84px + env(safe-area-inset-bottom, 0px)); height:auto;
      background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch;
      padding:10px 20px 18px; box-shadow:0 22px 40px rgba(10,6,24,.18);
      opacity:0; visibility:hidden; transform:translateY(-12px);
      transition:opacity .28s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; z-index:1001;
    }
    .nav-ctas{
      display:flex; flex-direction:row; gap:12px;
      /* bottom:0, not top:calc(100dvh - 84px). It pins to the real bottom of
         the visual viewport with no arithmetic, and the safe-area inset
         keeps the buttons clear of the iPhone home indicator. */
      position:fixed; left:0; right:0; width:auto; top:auto; bottom:0;
      height:calc(84px + env(safe-area-inset-bottom, 0px));
      background:#fff; align-items:center; padding:0 20px env(safe-area-inset-bottom, 0px);
      box-shadow:0 -10px 30px rgba(10,6,24,.10); border-top:1px solid #efeaf6;
      opacity:0; visibility:hidden; transform:translateY(12px);
      transition:opacity .28s ease, transform .3s cubic-bezier(.4,0,.2,1), visibility .3s; z-index:1001;
    }
    #siteNav.nav-open .nav-links, #siteNav.nav-open .nav-ctas{ opacity:1; visibility:visible; transform:translateY(0); }
    .nav-ctas .btn-ghost, .nav-ctas .btn-primary{ flex:1; text-align:center; justify-content:center; padding:13px 18px; font-size:.98rem; border-radius:12px; }

    /* The nav paints over the panel, never under it. If --rz-nav-offset is
       ever missing or stale for a frame, the worst case is a sliver of the
       panel hidden behind an opaque nav — not the hamburger sitting on top
       of the first menu item, which is what a lower nav would give. */
    nav{ z-index:1002; }

    .nav-links > li{ border-bottom:1px solid #f1edf7; width:100%; }
    .nav-links > li:last-child{ border-bottom:none; }
    .nav-links > li > a{ display:flex; align-items:center; justify-content:space-between; padding:15px 6px; color:#1a0f2e; font-weight:600; font-size:1rem; }
    .nav-links > li > a .chevron{ width:16px; height:16px; opacity:1; color:#a25cce; transition:transform .25s; flex-shrink:0; margin-left:10px; }
    .nav-links > li.open > a .chevron{ transform:rotate(180deg); }

    /* dropdowns → accordions, single-column stack */
    .nav-links .dropdown{
      position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important;
      pointer-events:auto !important; box-shadow:none !important; border:none !important; background:transparent !important;
      min-width:0 !important; width:100% !important; left:auto !important; margin:0 !important;
      max-height:0; overflow:hidden; transition:max-height .35s ease; display:block !important; padding:0 !important;
    }
    .nav-links > li.open > .dropdown{ max-height:2600px; padding:2px 0 12px !important; }
    .nav-links .dropdown .mega-grid-2,
    .nav-links .dropdown .templates-grid,
    .nav-links .dropdown .templates-col{ display:block !important; width:100% !important; grid-template-columns:1fr !important; }
    .nav-links .dropdown a{ display:flex !important; align-items:center; gap:10px; padding:11px 8px 11px 14px !important; color:#3f3f46 !important; font-size:.95rem; }
    .nav-links .dropdown a .ai-logo{ width:26px; height:26px; flex-shrink:0; }
    .nav-links .dropdown a .ai-logo img{ width:100%; height:100%; object-fit:contain; }
    .nav-links .dropdown .featured-badge{ margin-left:auto; }
    .nav-links .dropdown .dot{ display:none; }
    .nav-links .dropdown .mega-section-title{ margin:10px 0 2px; padding-left:6px; }
    .nav-links .dropdown .heatgrid-cta{ margin-top:8px; }

    /* Hero — bigger video on mobile, smaller side margins */
    .hero { padding: 48px 0 0; }
    .hero-container { padding: 0 12px; }
    .hero-grid { gap: 28px; }
    .v2-rotator { min-width: 140px; }
    .v2-hero-video { border-radius: 14px; }

    /* Templates teaser — 3 cards + 4th peeking */
    .templates-teaser { padding: 32px 0 70px; }
    .tt-inner { padding: 0 16px; }
    .tt-header { margin-bottom: 22px; }
    .tt-cta-wrap { margin-top: 22px; }

    /* Mobile: smaller cards so more fit per row */
    .tt-rows { margin: 0 -16px; }
    .tt-thumbs { gap: 10px; padding: 4px 16px; }
    .tt-thumbs + .tt-thumbs { margin-top: 10px; }
    .tt-thumb {
      flex: 0 0 200px;
      font-size: 0.72rem;
      padding: 8px 12px;
      border-radius: 11px;
    }
  }
  @media (max-width: 480px) {
    .tt-thumb { flex: 0 0 180px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 FAB (Floating Contact Button) — ported from gardening template
     Same structure, same content, neon-purple instead of green
     ════════════════════════════════════════════════════════════════════ */
  .fab {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 80;
  }
  .fab-btn {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a3fc5 0%, #c47fe0 100%);
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 14px 34px rgba(196,127,224,0.55), 0 0 30px rgba(196,127,224,0.40);
    position: relative;
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .fab-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 18px 40px rgba(196,127,224,0.65), 0 0 40px rgba(196,127,224,0.55);
  }
  .fab-btn svg {
    width: 28px;
    height: 28px;
    color: #fff;
  }
  .fab-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #c47fe0;
    animation: fab-ring 2s infinite;
  }
  @keyframes fab-ring {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.7); opacity: 0;   }
  }

  /* ─── Contact Modal: backdrop overlay + bottom-sheet panel ─── */
  .contact-overlay {
    position: fixed;
    top: var(--nav-height);     /* start below the fixed navbar so the panel never gets covered */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15,5,30,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    display: flex;
    align-items: flex-end;          /* panel anchored to bottom */
    justify-content: center;
    padding: 20px;
  }
  .contact-overlay.open {
    opacity: 1;
    visibility: visible;
  }
  .contact-panel {
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - var(--nav-height) - 40px);   /* fit within viewport area below the navbar */
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(15,5,30,0.55);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(40px);
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .contact-overlay.open .contact-panel { transform: translateY(0); }

  /* ── Purple header with team avatars + close button ── */
  .contact-head {
    background: linear-gradient(135deg, #4a2d8a 0%, #7a3fc5 50%, #c47fe0 100%);
    color: #ffffff;
    padding: 24px 22px 26px;
    display: flex;
    align-items: center;            /* greeting block + avatar/close row vertically centered */
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
    position: relative;             /* explicit stacking so the body never bleeds under it */
    z-index: 2;
  }
  .contact-head-text { flex: 1; min-width: 0; }
  .contact-greeting {
    font-family: 'Sora', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: #ffffff;
    letter-spacing: -0.015em;
  }
  .contact-subgreeting {
    font-family: 'Sora', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
    color: rgba(255,255,255,0.85);
  }
  /* Right side of header: avatars and X in a SINGLE horizontal row */
  .contact-head-side {
    display: flex;
    flex-direction: row;            /* avatars + X side by side */
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .contact-avatars {
    display: flex;
    flex-direction: row-reverse;    /* right-most avatar is forward-most */
  }
  .contact-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: #7a3fc5;
    border: 2.5px solid #ffffff;
    margin-left: -12px;
    position: relative;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  }
  .contact-avatar:last-child { margin-left: 0; }
  /* Initial fallback when photo isn't loaded */
  .contact-avatar::after {
    content: attr(data-initial);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-family: 'Sora', sans-serif;
    font-weight: 800;
    font-size: 15px;
    z-index: -1;
  }
  .contact-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: none;
    color: #ffffff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s;
    flex-shrink: 0;
  }
  .contact-close:hover { background: rgba(255,255,255,0.32); }
  .contact-close svg { width: 18px; height: 18px; }

  /* ── Body: FAQ list (explicit z-index ensures it sits below the header, never overlapping) ── */
  .contact-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 22px 18px 12px;
    background: #fafafa;
    position: relative;
    z-index: 1;
  }
  .contact-faq-heading {
    font-family: 'Sora', sans-serif;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--purple-700);
    margin-bottom: 12px;
    padding: 0 4px;
  }
  .contact-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .contact-faq-item {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .contact-faq-item.open { border-color: var(--purple-300); }
  .contact-faq-q {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 14px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--purple-950);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    line-height: 1.35;
  }
  .contact-faq-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--purple-500);
    transition: transform 0.2s;
  }
  .contact-faq-item.open .contact-faq-chevron { transform: rotate(180deg); }
  .contact-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 14px;
    color: var(--gray-700);
    font-size: 13.5px;
    line-height: 1.6;
  }
  .contact-faq-item.open .contact-faq-a {
    max-height: 1200px;       /* large enough to fit any answer */
    padding: 0 14px 14px;
  }
  .contact-faq-a p { margin: 0 0 8px; }
  .contact-faq-a p:last-child { margin-bottom: 0; }
  .contact-faq-a a { color: var(--purple-700); font-weight: 600; }
  /* Lists: explicit padding so bullet markers stay inside the answer box, not clipped by container padding */
  .contact-faq-a ul,
  .contact-faq-a ol {
    margin: 0 0 8px;
    padding-left: 22px;     /* room for the bullet markers to render */
  }
  .contact-faq-a li { margin-bottom: 4px; }
  .contact-faq-a li:last-child { margin-bottom: 0; }

  /* ── Group dividers inside the FAQ list ── */
  .contact-faq-group {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gray-500);
    padding: 14px 4px 6px;
  }
  .contact-faq-group:first-child { padding-top: 0; }

  /* ── Popup FAQ: collapsible topic groups (6 topics, mirrors the main FAQ) ── */
  .contact-faq-cat {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    overflow: hidden;
    transition: border-color 0.2s;
  }
  .contact-faq-cat.open { border-color: var(--purple-300); }
  .contact-faq-cat-head {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 13px 14px;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--purple-950);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
  }
  .contact-faq-cat.open .contact-faq-cat-head { color: var(--purple-700); }
  .contact-faq-cat.open .contact-faq-cat-head .contact-faq-chevron { transform: rotate(180deg); }
  .contact-faq-cat-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .contact-faq-cat.open > .contact-faq-cat-body { max-height: 6000px; }
  .contact-faq-cat-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 10px 10px;
  }
  /* nested question cards inside an open topic — tinted to read as a sub-level */
  .contact-faq-cat-inner .contact-faq-item { background: var(--gray-50); }
  /* single-answer topic: answer shown directly when the topic opens */
  .contact-faq-a-static {
    max-height: none;
    overflow: visible;
    padding: 2px 4px 4px;
    color: var(--gray-700);
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* ── Footer: WhatsApp + Email buttons ── */
  .contact-foot {
    background: #ffffff;
    border-top: 1px solid var(--gray-200);
    padding: 14px 16px 18px;
    display: flex;
    gap: 10px;
    flex-shrink: 0;
  }
  .contact-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 14px;
    border-radius: 12px;
    border: none;
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    color: #ffffff;
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
  }
  .contact-action svg { width: 18px; height: 18px; }
  .contact-action:hover { transform: translateY(-2px); filter: brightness(1.08); }
  .contact-action-wa {
    background: #25d366;
    box-shadow: 0 4px 14px rgba(37,211,102,0.40);
  }
  .contact-action-email {
    background: linear-gradient(135deg, var(--purple-700) 0%, var(--purple-500) 100%);
    box-shadow: 0 4px 14px rgba(122,86,185,0.40);
  }

  /* Lock background scroll when modal open */
  body.contact-open { overflow: hidden; }

  @media (max-width: 480px) {
    .contact-overlay { padding: 24px 14px 14px; }
    .contact-panel { border-radius: 18px; max-height: calc(100vh - var(--nav-height) - 38px); }
    .contact-head { padding: 20px 18px 22px; }
    .contact-greeting { font-size: 1.25rem; }
    .contact-subgreeting { font-size: 0.85rem; }
    .contact-avatar { width: 36px; height: 36px; margin-left: -11px; border-width: 2px; }
    .contact-close { width: 32px; height: 32px; }
    .contact-close svg { width: 16px; height: 16px; }
    .contact-head-side { gap: 10px; }
    .contact-body { padding: 18px 14px 10px; }
  }

  /* ════════════════════════════════════════════════════════════════════
     V2 FEATURE ROWS — head + visual + body
     Desktop: 2 columns. Default: visual LEFT, [head+body stacked] RIGHT.
             .flip: [head+body stacked] LEFT, visual RIGHT.
     Mobile:  natural HTML order — head, video, body
     ════════════════════════════════════════════════════════════════════ */
  .feature-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "visual head"
                         "visual body";
    grid-template-rows: auto 1fr;
    column-gap: 60px;
    row-gap: 12px;
    align-items: start;
    padding: 60px 0;
    border-bottom: 1px solid var(--gray-100);
    scroll-margin-top: 100px;
  }
  .feature-row:last-child { border-bottom: none; }
  /* First and last feature rows: zero outer padding so the section padding alone
     controls the gap between the curve and the first/last content. Keeps both
     sides of every curve junction visually balanced. */
  #platform .feature-row:first-of-type { padding-top: 0; }
  #platform .feature-row:last-of-type  { padding-bottom: 0; }

  .feature-row-visual {
    grid-area: visual;
    align-self: center;     /* video sits vertically centered next to text */
  }
  .feature-row-head { grid-area: head; align-self: end; }
  .feature-row-body { grid-area: body; }

  /* Flipped: video on the right, text on the left */
  .feature-row.flip {
    grid-template-areas: "head visual"
                         "body visual";
  }

  /* Hero-sized video styling */
  .feature-row-visual .feature-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 20px;
    border: 1px solid rgba(74,45,138,0.18);
    background: linear-gradient(135deg, #f6f0fd 0%, #ede4fa 100%);
    display: block;
    box-shadow: 0 24px 60px rgba(74,45,138,0.18), 0 0 0 1px rgba(196,127,224,0.10);
  }

  /* HEAD: eyebrow + heading */
  .feature-row-head .feature-category {
    display: inline-block;
    font-family: 'Sora', sans-serif;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #c47fe0;
    text-transform: uppercase;
    margin-bottom: 14px;
    text-shadow: 0 0 12px rgba(196,127,224,0.45);
  }
  .feature-row-head .feature-heading {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #14091f;
    margin: 0;
  }
  /* Neon-purple highlight on key phrase of the heading (mirrors the hero & teaser style) */
  .feature-row-head .feature-heading .neon-accent {
    background: linear-gradient(135deg, #7a3fc5 0%, #c47fe0 50%, #7a3fc5 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 14px rgba(196,127,224,0.45));
  }

  /* BODY: description + bullets */
  .feature-row-body .feature-desc {
    font-size: 1rem;
    color: #5a6275;
    line-height: 1.65;
    margin: 0 0 22px;
  }
  .feature-row-body .feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .feature-row-body .feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.96rem;
    color: #14091f;
    font-weight: 500;
  }
  /* Static purple dot (no flashing) */
  .feature-row-body .feature-list li::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7a3fc5, #c47fe0);
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(196,127,224,0.4);
  }

  @media (max-width: 900px) {
    .feature-row {
      grid-template-columns: 1fr;
      grid-template-areas: "head"
                           "visual"
                           "body";
      gap: 20px;
      padding: 44px 0;
    }
    .feature-row.flip {
      grid-template-areas: "head"
                           "visual"
                           "body";
    }
    /* Extend video to section edges on mobile (same visual size as hero video) */
    .feature-row-visual {
      margin-left: -28px;
      margin-right: -28px;
    }
    .feature-row-visual .feature-video { border-radius: 14px; }
    .feature-row-head { align-self: auto; text-align: center; }
    /* Headings: use full mobile width, slightly smaller, natural wrapping (no balance) */
    .feature-row-head .feature-heading {
      font-size: clamp(1.6rem, 6.8vw, 2.2rem);
      max-width: 100%;
      width: 100%;
      padding: 0 4px;
      text-wrap: wrap;
    }
  }
  @media (max-width: 768px) {
    /* Section's mobile padding is 40px sides — match the negative margin */
    #platform { padding-left: 16px !important; padding-right: 16px !important; }
    .feature-row-visual {
      margin-left: -4px;
      margin-right: -4px;
    }
    /* Headings can use the extra width gained from the tighter section padding */
    .feature-row-head .feature-heading {
      font-size: clamp(1.5rem, 6.5vw, 2rem);
      padding: 0;
    }
  }

  /* ════════════════════════════════════════════════════════════════════
     END V2 FEATURE ROWS
     ════════════════════════════════════════════════════════════════════ */

  /* ─── COMPARISON TABLE ─── */
  .compare-wrap {
    background: white;
    border: 1.5px solid var(--gray-200);
    border-radius: 16px;
    overflow: hidden;
  }
  .compare-title {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--purple-950);
    padding: 20px 24px;
    border-bottom: 1px solid var(--gray-100);
  }
  .compare-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(122,63,197,0.3) transparent;
  }
  .compare-scroll::-webkit-scrollbar { height: 6px; }
  .compare-scroll::-webkit-scrollbar-track { background: transparent; }
  .compare-scroll::-webkit-scrollbar-thumb {
    background: rgba(122,63,197,0.25);
    border-radius: 3px;
  }
  .compare-table {
    min-width: 640px;   /* keeps columns readable; activates horizontal scroll on narrower screens */
  }
  .compare-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, 1fr);
    align-items: center;
    padding: 14px 24px;
    border-bottom: 1px solid #f4f4f5;
    gap: 12px;
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-head {
    background: linear-gradient(180deg, rgba(196,127,224,0.06), rgba(196,127,224,0.02));
  }
  .compare-head .compare-cell {
    font-family: 'Sora', sans-serif;
    font-size: 11px;
    font-weight: 800;
    color: var(--purple-700);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    text-shadow: 0 0 8px rgba(196,127,224,0.25);
  }
  .compare-label {
    font-size: 14px;
    color: #27272a;
    font-weight: 500;
    line-height: 1.35;
  }
  .compare-cell {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .compare-check, .compare-dash { width: 18px; height: 18px; flex-shrink: 0; }
  .compare-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--purple-600);
    text-align: center;
    line-height: 1.3;
  }

  @media (max-width: 768px) {
    .compare-title { padding: 16px 18px; font-size: 14px; }
    .compare-row { padding: 12px 18px; gap: 8px; }
    .compare-label { font-size: 13px; }
    .compare-table { min-width: 580px; }
  }