: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; }
  .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;
  }
  .ai-phone-frame {
    position: relative;
    width: 280px;
    aspect-ratio: 9 / 19.5;             /* iPhone 14/15 ratio */
    background: #0a0a0a;
    border-radius: 44px;
    padding: 12px;
    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%;
    height: 100%;
    border-radius: 32px;
    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: var(--purple-950);
    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;
    padding: 32px 24px;
    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;
  }
  .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); }

  /* 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;
    margin-top: 4px;
  }
  .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; }

  /* ── 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: var(--gray-50);
    padding: 20px 0 80px;             /* tight top - curve from team above does the heavy lifting */
    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: 60px 0; }
    .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;
    padding: 120px 40px 80px;
    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 { font-size: 15px; }
    .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-section h2 {
    font-family: 'Sora', sans-serif;
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 800;
    color: white;
    letter-spacing: -2px;
    line-height: 1.1;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
  }
  .cta-section 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 (full black, white typography) ─── */
  footer {
    background: #000000;
    padding: 80px 40px 0;
  }
  .footer-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .footer-brand {}
  .footer-brand .logo-text { color: #ffffff; }
  .footer-logo-link {
    display: inline-block;
    text-decoration: none;
    margin-bottom: 16px;
  }
  .footer-logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(196,127,224,0.06);
    border: 1.5px solid rgba(196,127,224,0.35);
    border-radius: 14px;
    box-shadow: 0 0 24px rgba(196,127,224,0.18), inset 0 0 0 1px rgba(255,255,255,0.04);
    transition: all 0.25s;
  }
  .footer-logo-link:hover .footer-logo-box {
    border-color: rgba(196,127,224,0.65);
    box-shadow: 0 0 32px rgba(196,127,224,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
  }
  .footer-logo-img {
    width: 40px;
    height: 40px;
    display: block;
  }
  .footer-tagline {
    margin-top: 14px;
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    max-width: 260px;
    font-weight: 500;
  }
  .footer-col h4 {
    font-family: 'Sora', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.08em;
    margin-bottom: 18px;
    text-transform: uppercase;
  }
  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
  }
  .footer-col ul li a {
    font-family: 'Sora', sans-serif;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s, color 0.2s;
    opacity: 0.92;
  }
  .footer-col ul li a:hover {
    color: #ffffff;
    opacity: 1;
    text-shadow: 0 0 12px rgba(196,127,224,0.6);
  }

  /* Footer bottom — sign-off strip with brand heart */
  .footer-bottom {
    padding: 36px 24px;
    margin: 0 -40px;
    background: #000000;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
  }
  .footer-copy {
    font-size: 14px;
    color: rgba(255,255,255,0.90);
    line-height: 1.9;
    letter-spacing: 0.02em;
    font-weight: 500;
  }
  .footer-copy .heart {
    color: #c47fe0;
    display: inline-block;
    margin: 0 3px;
    text-shadow: 0 0 14px rgba(196,127,224,0.85), 0 0 24px rgba(196,127,224,0.5);
    animation: heart-pulse 2.4s ease-in-out infinite;
  }
  @keyframes heart-pulse {
    0%, 100% { transform: scale(1);    text-shadow: 0 0 14px rgba(196,127,224,0.85), 0 0 24px rgba(196,127,224,0.5); }
    50%      { transform: scale(1.12); text-shadow: 0 0 18px rgba(196,127,224,1),    0 0 32px rgba(196,127,224,0.75); }
  }
  .footer-links {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .footer-links a {
    font-family: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
  }
  .footer-links a:hover {
    color: #ffffff;
  }
  .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 */
    .ai-two-col { grid-template-columns: 1fr; gap: 50px; }
    .ai-col-left h2 { max-width: 100%; }
    .ai-lead { max-width: 100%; }
    .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; }
    .ai-phone-frame { width: 240px; }
    .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: 10px 0 10px; }
    /* 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: 80px 20px 40px; }
  }

  /* 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-box { width: 38px; height: 38px; }
    .logo-img { width: 24px; height: 24px; }
    .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: 760px;
    padding: 14px;
  }
  .templates-grid {
    display: grid;
    grid-template-columns: repeat(5, 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; }
  .logo:hover .logo-box {
    border-color: rgba(122,86,185,0.65);
    box-shadow: 0 0 18px rgba(122,86,185,0.30);
  }
  /* Bordered box around the favicon — no longer depends on the source PNG having clean edges */
  .logo-box {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(122,86,185,0.06);
    border: 1.5px solid rgba(122,86,185,0.35);
    border-radius: 11px;
    box-shadow: 0 0 14px rgba(122,86,185,0.15), inset 0 0 0 1px rgba(255,255,255,0.04);
    transition: all 0.25s;
    flex-shrink: 0;
  }
  .logo-img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
  }
  .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 ── */
  .dropdown.templates-mega {
    min-width: 980px;
    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; }

  /* 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 */
  .v2-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(196,127,224,0.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 22px;
  }
  .v2-status-badge .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #c47fe0;
    position: relative;
    box-shadow: 0 0 8px #c47fe0;
  }
  .v2-status-badge .pulse-dot::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 50%;
    background: #c47fe0;
    animation: pulse 1.8s infinite;
  }
  @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);
  }
  .v2-hero-h1 .neon-word {
    display: inline-block;
    background: linear-gradient(135deg, #c47fe0 0%, #d8a4ef 50%, #c47fe0 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    text-shadow: 0 0 40px rgba(196,127,224,0.55);
    filter: drop-shadow(0 0 18px rgba(196,127,224,0.45));
    position: relative;
  }

  /* "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 */
  .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);
  }

  /* 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-box { width: 34px; height: 34px; border-radius: 9px; }
    .logo-img { width: 22px; height: 22px; }
    .logo-text { font-size: 1rem; }
    .nav-links, .nav-ctas { display: none; }
    .menu-toggle { display: flex; }

    /* 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; }

  /* ── 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; }
  }