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

    :root {
      /* Dark (hero only) */
      --navy:   #060d1f;
      --navy2:  #0d1a35;
      --navy3:  #0f2040;
      --dark-border: rgba(255,255,255,0.08);

      /* Light (content sections) */
      --white:  #ffffff;
      --gray50: #f8f9fc;
      --gray100:#f0f2f8;
      --gray200:#e2e6f0;
      --gray400:#9aa3bc;
      --gray600:#5a6480;
      --gray900:#0f1629;

      /* Accents */
      --blue:   #2563eb;
      --blue2:  #3b82f6;
      --blue-lt:#eff6ff;
      --gold:   #2563eb;
      --gold-lt:#eff6ff;
      --green:  #16a34a;
      --green2: #22c55e;
      --green-lt:#f0f7ff;
      --purple: #7c3aed;
      --purple-lt:#f5f3ff;
      --red:    #dc2626;
      --red-lt: #fef2f2;
      --cyan:   #1d4ed8;
      --cyan-lt:#eff6ff;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Inter', sans-serif; background: var(--white); color: var(--gray900); overflow-x: hidden; line-height: 1.6; }
    h1,h2,h3,h4,h5 { font-family: 'Bungee', sans-serif; letter-spacing: 0.01em; }
    a { color: inherit; }

    /* ─── NAV ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 48px; height: 64px;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      transition: all 0.3s;
    }
    nav.dark {
      background: rgba(255,255,255,0.98);
      border-bottom-color: rgba(0,0,0,0.1);
    }
    .nav-logo {
      display: flex; align-items: center; gap: 9px; text-decoration: none;
      font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.1rem;
    }
    nav:not(.dark) .nav-logo { color: #0a1628; }
    nav.dark .nav-logo { color: #0a1628; }
    .nav-logo-mark {
      width: 34px; height: 34px; border-radius: 8px;
      background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.9rem; font-weight: 800; color: white;
    }
    .nav-links { display: flex; align-items: center; gap: 30px; position: absolute; left: 50%; transform: translateX(-50%); }
    nav:not(.dark) .nav-links a { color: rgba(10,22,40,0.6); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: color 0.2s; }
    nav:not(.dark) .nav-links a:hover { color: #0a1628; }
    nav:not(.dark) .nav-links a.active { color: #0a1628; font-weight: 600; }
    nav.dark .nav-links a { color: rgba(10,22,40,0.6); font-size: 0.88rem; font-weight: 500; text-decoration: none; transition: color 0.2s; }
    nav.dark .nav-links a:hover { color: #0a1628; }
    nav.dark .nav-links a.active { color: #0a1628; font-weight: 600; }
    .nav-cta { display: flex; gap: 10px; align-items: center; }
    .btn-ghost-light {
      padding: 8px 20px; border-radius: 100px; font-size: 0.85rem; font-weight: 600;
      color: rgba(10,22,40,0.75); background: transparent; border: 1px solid rgba(10,22,40,0.2);
      cursor: pointer; text-decoration: none; transition: all 0.2s;
    }
    .btn-ghost-light:hover { border-color: rgba(10,22,40,0.45); color: #0a1628; background: rgba(10,22,40,0.04); }
    .btn-ghost-dark {
      padding: 8px 20px; border-radius: 100px; font-size: 0.85rem; font-weight: 600;
      color: rgba(255,255,255,0.7); background: transparent; border: 1px solid rgba(255,255,255,0.15);
      cursor: pointer; text-decoration: none; transition: all 0.2s;
    }
    .btn-ghost-dark:hover { border-color: rgba(255,255,255,0.4); color: white; }
    .btn-primary {
      padding: 9px 22px; border-radius: 100px; font-size: 0.85rem; font-weight: 700;
      color: white; background: var(--blue); border: none;
      cursor: pointer; text-decoration: none; transition: all 0.2s;
    }
    .btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); }

    /* ─── HERO (light gradient) ─── */
    .hero {
      background: linear-gradient(160deg, #e8eeff 0%, #f0f4ff 35%, #f8f9fc 65%, #ffffff 100%);
      min-height: 100vh;
      display: flex; flex-direction: column; align-items: center;
      justify-content: center; text-align: center;
      padding: 100px 0 0;
      position: relative; overflow: hidden;
    }
    .hero-glow {
      position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(99,102,241,0.07) 0%, transparent 70%);
    }
    .hero-grid { display: none; }
    .hero-badge {
      position: relative; z-index: 1;
      display: inline-flex; align-items: center; gap: 7px; margin-bottom: 28px;
      background: #eff6ff; border: 1px solid #bfdbfe;
      border-radius: 100px; padding: 5px 14px; font-size: 0.78rem; font-weight: 600;
      color: #1d4ed8;
    }
    .hero-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: #2563eb; animation: blink 2s infinite; }
    @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .hero h1 {
      position: relative; z-index: 1;
      font-size: clamp(2.2rem, 3.5vw, 3.2rem);
      font-weight: 800; line-height: 1.08; color: var(--gray900);
      max-width: 1080px; margin: 0 auto 22px;
    }
    .hero h1 em {
      font-style: normal; color: var(--blue);
      -webkit-text-fill-color: var(--blue);
    }
    .hero-sub {
      position: relative; z-index: 1;
      font-size: 1.1rem; color: var(--gray600); max-width: 560px;
      margin: 0 auto 36px; line-height: 1.8;
    }
    .hero-actions {
      position: relative; z-index: 1;
      display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 52px;
    }
    .btn-hero-primary {
      padding: 13px 32px; border-radius: 100px; font-size: 0.95rem; font-weight: 700;
      color: white; background: var(--blue); border: none; cursor: pointer;
      text-decoration: none; transition: all 0.2s;
      box-shadow: 0 4px 16px rgba(37,99,235,0.35);
    }
    .btn-hero-primary:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.45); }
    .btn-hero-ghost {
      padding: 13px 32px; border-radius: 100px; font-size: 0.95rem; font-weight: 700;
      color: var(--gray700, var(--gray900)); background: white;
      border: 1.5px solid var(--gray200); cursor: pointer;
      text-decoration: none; transition: all 0.2s;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .btn-hero-ghost:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

    /* Hero stat bar */
    .hero-stats {
      position: relative; z-index: 1;
      display: grid; grid-template-columns: repeat(4,1fr);
      gap: 12px; margin-bottom: 60px; width: 100%; max-width: 960px;
    }
    .hstat {
      background: white; border: 1px solid var(--gray200); border-radius: 18px;
      padding: 18px 20px 16px; box-shadow: 0 2px 14px rgba(0,0,0,0.06);
      display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .hstat:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-2px); }
    .hstat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; border-radius:18px 18px 0 0; }
    .hstat.c-gold::before { background: var(--gold); }
    .hstat.c-blue::before { background: var(--blue); }
    .hstat.c-green::before { background: var(--green); }
    .hstat.c-purple::before { background: #8b5cf6; }
    .hstat-top { display:flex; align-items:center; justify-content:space-between; }
    .hstat-icon { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .hstat-icon svg { width:16px; height:16px; }
    .hstat-icon.c-gold { background:rgba(37,99,235,0.1); color:var(--gold); }
    .hstat-icon.c-blue { background:rgba(37,99,235,0.1); color:var(--blue); }
    .hstat-icon.c-green { background:rgba(22,163,74,0.1); color:var(--green); }
    .hstat-icon.c-purple { background:rgba(139,92,246,0.1); color:#8b5cf6; }
    .hstat-val { font-family:'Bungee',sans-serif; font-size:1.65rem; font-weight:400; line-height:1; }
    .hstat-val.c-gold { color:var(--gold); }
    .hstat-val.c-blue { color:var(--blue); }
    .hstat-val.c-green { color:var(--green); }
    .hstat-val.c-purple { color:#8b5cf6; }
    .hstat-label { font-size:0.8rem; font-weight:700; color:var(--gray800); }
    .hstat-sub { font-size:0.7rem; color:var(--gray400); margin-top:1px; }
    .hstat-bar { height:5px; background:var(--gray100); border-radius:3px; overflow:hidden; margin-top:2px; }
    .hstat-bar-fill { height:100%; border-radius:3px; }
    .hstat-pills { display:flex; gap:4px; flex-wrap:wrap; margin-top:2px; }
    .hstat-pill { font-size:0.64rem; font-weight:700; padding:2px 8px; border-radius:100px; }

    /* Hero app screenshot */
    .hero-screen {
      position: relative; z-index: 1;
      width: 100%; max-width: 1080px; margin: 0 auto;
    }
    .screen-chrome {
      background: #0f1c38; border-radius: 16px 16px 0 0;
      border: 1px solid rgba(15,28,56,0.18); border-bottom: none;
      overflow: hidden;
      box-shadow: 0 8px 40px rgba(15,28,56,0.18), 0 32px 80px rgba(15,28,56,0.12), 0 2px 0 rgba(255,255,255,0.6) inset;
    }
    .screen-titlebar {
      display: flex; align-items: center; gap: 8px;
      padding: 11px 16px; background: #0a1628;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .dot { width: 10px; height: 10px; border-radius: 50%; }
    .dot-r { background: #ff5f57; }
    .dot-y { background: #febc2e; }
    .dot-g { background: #28c840; }
    .screen-url {
      flex: 1; max-width: 380px; margin: 0 auto;
      background: rgba(255,255,255,0.05); border-radius: 6px;
      padding: 4px 12px; font-size: 0.72rem; color: rgba(255,255,255,0.3); text-align: center;
    }
    /* ─ App shell inside browser chrome ─ */
    .app-shell {
      display: grid; grid-template-columns: 196px 1fr;
      height: 500px; overflow: hidden; font-size: 0.8rem;
    }
    .app-sidebar {
      background: #060f22; border-right: 1px solid rgba(255,255,255,0.07);
      padding: 16px 0; display: flex; flex-direction: column;
    }
    .app-sidebar-logo {
      display: flex; align-items: center; gap: 8px; padding: 0 14px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.07); margin-bottom: 10px;
      font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.82rem; color: white;
    }
    .app-logo-icon {
      width: 26px; height: 26px; border-radius: 6px;
      background: linear-gradient(135deg,#1d4ed8,#3b82f6);
      display: flex; align-items: center; justify-content: center;
      font-size: 0.7rem; font-weight: 900; color: white;
    }
    .app-nav-item {
      display: flex; align-items: center; gap: 8px; padding: 7px 14px;
      color: rgba(255,255,255,0.4); font-size: 0.76rem; cursor: default;
    }
    .app-nav-item.active {
      color: white; background: rgba(59,130,246,0.12);
      border-right: 2px solid #3b82f6;
    }
    .app-nav-badge {
      margin-left: auto; background: #dc2626; color: white;
      font-size: 0.6rem; font-weight: 700; padding: 1px 5px; border-radius: 100px;
    }
    .app-main { background: #f8faff; overflow: hidden; padding: 0; }

    /* Home dashboard content */
    .app-top-bar {
      background: white; border-bottom: 1px solid #e8ecf4;
      padding: 10px 20px; display: flex; align-items: center; gap: 10px;
    }
    .app-search {
      flex: 1; background: #f1f4fb; border-radius: 7px;
      padding: 6px 12px; font-size: 0.72rem; color: #9aa3bc; display: flex; align-items: center; gap: 6px;
    }
    .app-support {
      font-size: 0.7rem; color: #9aa3bc; border: 1px solid #e2e6f0;
      border-radius: 6px; padding: 4px 10px; display: flex; align-items: center; gap: 5px;
    }
    .app-weather {
      font-size: 0.7rem; background: #dbeafe; color: #1e3a8a;
      border-radius: 6px; padding: 4px 10px; display: flex; align-items: center; gap: 5px;
    }
    .dash-inner { padding: 16px 20px; }
    .dash-greeting { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 800; color: #0f1629; }
    .dash-sub { font-size: 0.68rem; color: #9aa3bc; margin-bottom: 10px; }
    .dash-sub span { color: #3b82f6; font-weight: 600; }
    .dash-alert {
      background: #eff6ff; border: 1px solid #93c5fd; border-left: 3px solid #2563eb;
      border-radius: 7px; padding: 8px 12px; margin-bottom: 12px;
      font-size: 0.68rem; color: #78350f; display: flex; align-items: center; gap: 7px;
    }
    .dash-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
    .dash-kpi {
      background: white; border: 1px solid #e8ecf4; border-radius: 8px; padding: 10px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    .dash-kpi-label { font-size: 0.63rem; color: #9aa3bc; margin-bottom: 5px; font-weight: 500; }
    .dash-kpi-val { font-family: 'Inter', sans-serif; font-size: 0.95rem; font-weight: 700; color: #0f1629; }
    .dash-kpi-change { font-size: 0.6rem; color: #16a34a; margin-top: 2px; font-weight: 500; }
    .dash-kpi-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: auto; float: right; }
    .dash-section-hd { font-size: 0.63rem; font-weight: 700; color: #9aa3bc; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
    .dash-ret-table { width: 100%; border-collapse: collapse; font-size: 0.67rem; }
    .dash-ret-table th { color: #9aa3bc; font-weight: 500; text-align: left; padding: 3px 8px; font-size: 0.6rem; border-bottom: 1px solid #e8ecf4; }
    .dash-ret-table td { padding: 5px 8px; border-bottom: 1px solid #f1f4fb; color: #0f1629; }
    .pill { display: inline-block; padding: 2px 7px; border-radius: 100px; font-size: 0.58rem; font-weight: 600; }
    .pill-green { background: #f0f7ff; color: #16a34a; }
    .pill-blue { background: #eff6ff; color: #2563eb; }
    .pill-yellow { background: #eff6ff; color: #1e3a8a; }
    .pill-shopify { background: #f0f7ff; color: #16a34a; font-size: 0.58rem; font-weight: 600; }
    .pill-wholesale { background: #eff6ff; color: #1d4ed8; }

    /* ─── SECTION BASE ─── */
    section { padding: 96px 24px; }
    .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
    .eyebrow {
      display: inline-block; font-size: 0.7rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em;
      color: var(--blue); margin-bottom: 14px;
    }
    .section-title { font-size: clamp(1.9rem, 3.5vw, 2.6rem); font-weight: 800; color: var(--gray900); line-height: 1.15; margin-bottom: 16px; }
    .section-title em { font-style: normal; color: var(--blue); }
    .section-sub { font-size: 1rem; color: var(--gray600); line-height: 1.8; max-width: 540px; margin-left: auto; margin-right: auto; text-align: center; }

    /* ─── LOGOS STRIP ─── */
    .logos-strip {
      background: linear-gradient(135deg, #eff6ff 0%, #f0f7ff 25%, #f8f9fc 50%, #f0f7ff 75%, #eff6ff 100%);
      border-top: 2px solid rgba(37,99,235,0.2);
      border-bottom: 2px solid rgba(37,99,235,0.2);
      padding: 20px 24px;
      box-shadow: 0 2px 12px rgba(37,99,235,0.06), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 0 rgba(255,255,255,0.85);
      position: relative;
    }
    .logos-strip::before, .logos-strip::after {
      content: ''; position: absolute; top: 0; bottom: 0; width: 60px;
      pointer-events: none;
    }
    .logos-strip::before { left: 0; background: linear-gradient(90deg, rgba(37,99,235,0.06), transparent); }
    .logos-strip::after  { right: 0; background: linear-gradient(270deg, rgba(37,99,235,0.06), transparent); }
    .logos-label { text-align: center; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #64748b; margin-bottom: 24px; }
    .logos-row { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
    .logo-chip {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      padding: 12px 18px; border-radius: 14px;
      background: #fff; border: 1px solid #e2e8f0;
      transition: border-color .2s, box-shadow .2s, transform .2s;
      cursor: default;
    }
    .logo-chip:hover { border-color: #93c5fd; box-shadow: 0 4px 16px rgba(37,99,235,.1); transform: translateY(-2px); }
    .logo-chip-icon {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 8px; overflow: hidden;
      background: #f8fafc;
    }
    .logo-chip-icon img { width: 28px; height: 28px; object-fit: contain; }
    .logo-chip-label { font-size: 0.72rem; font-weight: 600; color: #475569; white-space: nowrap; }

    /* ─── FEATURES ─── */
    .features-section { background: var(--gray50); }
    .features-header { text-align: center; margin-bottom: 48px; }
    .features-header .section-sub { margin: 0 auto; }

    /* Tab nav */
    .feat-tab-nav {
      display: flex; gap: 0; border-radius: 14px; overflow: hidden;
      background: white; border: 1px solid var(--gray200);
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
      margin-bottom: 32px; width: 100%;
    }
    .feat-tab-btn {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; padding: 16px 10px; cursor: pointer; border: none; background: transparent;
      border-right: 1px solid var(--gray200); transition: all 0.2s; position: relative;
      font-family: 'Inter', sans-serif;
    }
    .feat-tab-btn:last-child { border-right: none; }
    .feat-tab-btn .ftb-icon {
      width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center;
      justify-content: center; transition: all 0.2s;
    }
    .feat-tab-btn .ftb-icon svg { width: 17px; height: 17px; }
    .feat-tab-btn .ftb-label { font-size: 0.72rem; font-weight: 600; color: var(--gray600); text-align: center; line-height: 1.3; transition: color 0.2s; }
    .feat-tab-btn:hover .ftb-label { color: var(--gray900); }
    .feat-tab-btn:hover .ftb-icon { opacity: 0.85; }
    .feat-tab-btn.active { background: linear-gradient(160deg, #f0f6ff 0%, #f8faff 100%); }
    .feat-tab-btn.active .ftb-label { color: var(--blue); }
    .feat-tab-btn.active::after {
      content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px;
      background: var(--blue); border-radius: 2px 2px 0 0;
    }
    /* Progress bar hidden — tabs are manual click only */
    .ftb-progress { display: none; }
    .ftb-progress-bar {
      height: 100%; width: 0%; background: var(--blue); border-radius: 2px;
      transition: width linear;
    }

    /* Panel */
    .feat-panels { position: relative; min-height: 500px; }
    .feat-panel {
      display: none; grid-template-columns: 1fr 1.7fr; gap: 52px; align-items: center;
      background: white; border-radius: 20px; border: 1px solid var(--gray200);
      padding: 52px 52px 52px 56px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.04);
      animation: panelIn 0.35s cubic-bezier(0.22,1,0.36,1);
    }
    .feat-panel.active { display: grid; }
    @keyframes panelIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .feat-panel-text {}
    .feat-panel-eyebrow {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 14px;
    }
    .feat-panel-icon {
      width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center;
      justify-content: center; margin-right: 8px; vertical-align: middle;
    }
    .feat-panel-icon svg { width: 20px; height: 20px; }
    .feat-panel-icon.blue   { background: var(--blue-lt);   color: var(--blue); }
    .feat-panel-icon.gold   { background: var(--gold-lt);   color: var(--gold); }
    .feat-panel-icon.green  { background: var(--green-lt);  color: var(--green); }
    .feat-panel-icon.purple { background: var(--purple-lt); color: var(--purple); }
    .feat-panel-icon.red    { background: var(--red-lt);    color: var(--red); }
    .feat-panel-icon.cyan   { background: var(--cyan-lt);   color: var(--cyan); }
    .feat-panel-text h3 {
      font-family: 'Bungee', sans-serif; font-size: 1.45rem; color: var(--gray900);
      margin-bottom: 14px; line-height: 1.25;
    }
    .feat-panel-text p { font-size: 0.9rem; color: var(--gray600); line-height: 1.7; margin-bottom: 22px; }
    .feat-bullets { display: flex; flex-direction: column; gap: 9px; margin-bottom: 22px; }
    .feat-bullet {
      display: flex; align-items: flex-start; gap: 9px;
      font-size: 0.84rem; color: var(--gray900); font-weight: 500;
    }
    .feat-bullet-dot {
      width: 18px; height: 18px; border-radius: 50%; background: var(--blue-lt);
      display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px;
    }
    .feat-bullet-dot svg { width: 10px; height: 10px; color: var(--blue); }
    .feat-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .feat-tag {
      font-size: 0.68rem; font-weight: 600; padding: 4px 10px; border-radius: 100px;
      background: var(--gray100); color: var(--gray600); border: 1px solid var(--gray200);
    }

    /* Screenshot side */
    .feat-panel-screenshot {
      border-radius: 14px; overflow: hidden;
      border: 1px solid var(--gray200);
      box-shadow: 0 12px 40px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
      background: var(--gray50);
      position: relative;
    }
    .feat-panel-screenshot img {
      width: 100%; display: block;
      max-height: 380px; object-fit: cover; object-position: top;
    }
    /* Browser chrome bar */
    .feat-panel-screenshot::before {
      content: ''; display: block; height: 28px;
      background: white; border-bottom: 1px solid var(--gray200);
      background-image: radial-gradient(circle, #e2e8f0 4px, transparent 4px),
                        radial-gradient(circle, #e2e8f0 4px, transparent 4px),
                        radial-gradient(circle, #e2e8f0 4px, transparent 4px);
      background-size: 16px 16px, 16px 16px, 16px 16px;
      background-position: 12px 50%, 30px 50%, 48px 50%;
      background-repeat: no-repeat;
    }

    /* ─── LAYERED SCREENSHOT STACK (Inventory) ─── */
    .inv-ss-wrap {
      position: relative;
      overflow: hidden;
    }
    .inv-ss-main {
      border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(0,0,0,0.1);
      box-shadow: 0 20px 56px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.08);
    }
    .inv-ss-chrome {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 12px; background: #0a1628;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .inv-ss-main > img {
      width: 100%; display: block; height: auto;
    }
    .inv-ss-float {
      position: absolute;
      border-radius: 12px; overflow: hidden;
      box-shadow: 0 10px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
      border: 2px solid white;
      background: white;
    }
    .inv-ss-float img {
      width: 100%; display: block;
      object-fit: cover; object-position: top;
    }
    .inv-ss-f1 { bottom: 0; left: -3%; width: 47%; }
    .inv-ss-f1 img { height: 195px; }
    .inv-ss-f2 { bottom: 0; right: -4%; width: 52%; }
    .inv-ss-f2 img { height: 170px; }

    /* ─── GENERIC MULTI-SCREENSHOT STACK (panels 1-5) ─── */
    .ms-wrap {
      position: relative;
      overflow: hidden;
    }
    .ms-main {
      border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(0,0,0,0.1);
      box-shadow: 0 20px 56px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.08);
    }
    .ms-chrome {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 12px; background: #0a1628;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .ms-main > img {
      width: 100%; display: block; height: auto;
    }
    .ms-float {
      position: absolute;
      border-radius: 12px; overflow: hidden;
      box-shadow: 0 10px 32px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
      border: 2px solid white;
      background: white;
    }
    .ms-float img {
      width: 100%; display: block;
      object-fit: cover; object-position: top;
    }
    .ms-f1 { bottom: 0; left: -3%; width: 47%; }
    .ms-f1 img { height: 195px; }
    .ms-f2 { bottom: 0; right: -4%; width: 52%; }
    .ms-f2 img { height: 170px; }

    /* ─── BRAND HEALTH 3-UP SCREENSHOT LAYOUT ─── */
    .bh3-wrap { display: flex; flex-direction: column; }
    .bh3-main {
      border-radius: 14px; overflow: hidden;
      border: 1px solid rgba(0,0,0,0.1);
      box-shadow: 0 20px 56px rgba(0,0,0,0.16), 0 4px 14px rgba(0,0,0,0.08);
      position: relative; z-index: 2;
    }
    .bh3-chrome {
      display: flex; align-items: center; gap: 7px;
      padding: 8px 12px; background: #0a1628;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .bh3-main > img { width: 100%; display: block; height: auto; }
    /* Bottom row: two side-by-side, overlapping main image */
    .bh3-bottom {
      display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
      margin-top: -28px; padding: 0 10px;
      position: relative; z-index: 3;
    }
    .bh3-sub {
      border-radius: 10px; overflow: hidden;
      border: 2px solid white; background: white;
      box-shadow: 0 10px 32px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
    }
    .bh3-sub img { width: 100%; display: block; object-fit: cover; object-position: top; height: 160px; }

    /* ─── BRAND HEALTH LIVE MOCKUP ─── */
    .bhm-wrap {
      border-radius: 14px; overflow: hidden;
      box-shadow: 0 24px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
      background: #f1f5f9;
    }
    .bhm-chrome {
      background: #1e293b; padding: 9px 14px;
      display: flex; align-items: center; gap: 10px;
    }
    .bhm-dots { display: flex; gap: 5px; }
    .bhm-dots span { width: 10px; height: 10px; border-radius: 50%; display: block; }
    .bhm-breadcrumb { font-size: 0.6rem; color: rgba(255,255,255,0.45); letter-spacing: 0.02em; }
    .bhm-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f8fafc; }

    /* Top row */
    .bhm-top-row { display: flex; gap: 10px; align-items: stretch; }
    .bhm-gauge-card {
      width: 130px; flex-shrink: 0;
      background: #0f172a; border-radius: 10px; padding: 14px 10px;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
    }
    .bhm-grade-chip {
      background: #1d4ed8; color: white; font-family: 'Bungee', sans-serif;
      font-size: 0.65rem; padding: 2px 10px; border-radius: 20px; margin-top: 2px;
    }
    .bhm-gauge-label { font-size: 0.62rem; font-weight: 700; color: white; text-align: center; margin-top: 4px; }
    .bhm-gauge-sub { font-size: 0.54rem; color: rgba(255,255,255,0.4); text-align: center; }
    .bhm-gauge-warn { font-size: 0.52rem; color: #fbbf24; background: rgba(245,158,11,0.12); border-radius: 4px; padding: 2px 7px; margin-top: 4px; text-align: center; }
    .bhm-kpi-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .bhm-kpi { background: white; border-radius: 8px; padding: 10px 12px; border: 1px solid #e2e8f0; }
    .bhm-kpi-label { font-size: 0.5rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 3px; }
    .bhm-kpi-val { font-family: 'Bungee', sans-serif; font-size: 1.15rem; line-height: 1; }
    .bhm-kpi-sub { font-size: 0.52rem; color: #94a3b8; margin-top: 2px; }

    /* Section label */
    .bhm-section-label { font-size: 0.54rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 0 2px; }

    /* Pillar cards */
    .bhm-pillars-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .bhm-pillar-card { background: white; border-radius: 8px; padding: 9px 10px; border: 1px solid #e2e8f0; }
    .bhm-pc-header { display: flex; align-items: center; gap: 5px; font-size: 0.58rem; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
    .bhm-pc-icon { width: 20px; height: 20px; border-radius: 5px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .bhm-pc-bar { height: 4px; background: #e2e8f0; border-radius: 2px; margin-bottom: 6px; overflow: hidden; }
    .bhm-pc-bar div { height: 100%; border-radius: 2px; }
    .bhm-pc-desc { font-size: 0.52rem; color: #64748b; line-height: 1.4; }
    .bhm-pc-warn { color: #ef4444 !important; }

    /* Goals */
    .bhm-goals-header {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.62rem; font-weight: 700; color: #1e293b;
      background: white; border-radius: 8px; padding: 8px 12px;
      border: 1px solid #e2e8f0;
    }
    .bhm-goals-badge { margin-left: 6px; background: #f0fdf4; color: #16a34a; font-size: 0.52rem; font-weight: 600; border-radius: 20px; padding: 2px 8px; border: 1px solid #bbf7d0; }
    .bhm-goals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .bhm-goal-card { background: white; border-radius: 8px; padding: 9px 10px; border: 1px solid #e2e8f0; }
    .bhm-goal-top { display: flex; align-items: center; justify-content: space-between; font-size: 0.57rem; font-weight: 600; color: #334155; margin-bottom: 4px; }
    .bhm-goal-val { font-family: 'Bungee', sans-serif; font-size: 0.9rem; color: #1e293b; line-height: 1; margin-bottom: 5px; }
    .bhm-goal-val span { font-family: 'Inter', sans-serif; font-size: 0.52rem; color: #94a3b8; font-weight: 400; }
    .bhm-goal-bar { height: 4px; background: #e2e8f0; border-radius: 2px; margin-bottom: 6px; overflow: hidden; }
    .bhm-goal-bar div { height: 100%; border-radius: 2px; }
    .bhm-goal-tip { font-size: 0.52rem; color: #64748b; line-height: 1.4; }

    /* Feature chips row under mockup */
    .bh-chips-row {
      display: grid; grid-template-columns: repeat(4, 1fr);
      gap: 12px; margin-top: 24px;
    }
    .bh-chip {
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px; padding: 12px 14px;
      font-size: 0.78rem; color: rgba(255,255,255,0.6); line-height: 1.5;
    }
    .bh-chip strong { color: white; display: block; margin-bottom: 3px; font-size: 0.8rem; }
    .bh-chip-dot { display: none; }
    @media (max-width: 768px) {
      .bh-chips-row { grid-template-columns: 1fr 1fr; }
    }

    /* ─── DARK BRAND ANALYTICS SECTION ─── */
    .bh-section { background: var(--navy) !important; }
    .bh-section .eyebrow { color: #93c5fd; }
    .bh-section .section-title { color: white; }
    .bh-section .section-sub { color: rgba(255,255,255,0.6); }
    .bh-section .check-item p { color: rgba(255,255,255,0.6); }
    .bh-section .check-item strong { color: white; }
    .bh-section .check-icon { color: #22c55e; }
    .bh-section .check-icon svg { stroke: #22c55e; }
    .bh-section .bh-card { border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 32px rgba(0,0,0,0.3); }

    /* Lucide icon base */
    i[data-lucide], [data-lucide] { display: inline-flex; flex-shrink: 0; }
    .lc { width: 14px; height: 14px; }
    .feat-icon {
      width: 44px; height: 44px; border-radius: 10px; margin-bottom: 16px;
      display: flex; align-items: center; justify-content: center;
    }
    .feat-icon svg { width: 22px; height: 22px; }
    .feat-icon.blue { background: var(--blue-lt); color: var(--blue); }
    .feat-icon.gold { background: var(--gold-lt); color: var(--gold); }
    .feat-icon.green { background: var(--green-lt); color: var(--green); }
    .feat-icon.purple { background: var(--purple-lt); color: var(--purple); }
    .feat-icon.red { background: var(--red-lt); color: var(--red); }
    .feat-icon.cyan { background: var(--cyan-lt); color: var(--cyan); }
    .check-icon svg { width: 15px; height: 15px; }

    /* ─── BRAND HEALTH SPOTLIGHT ─── */
    .bh-section { background: var(--navy); }
    .bh-inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: start; }
    .bh-card {
      background: white; border: 1px solid var(--gray200); border-radius: 20px;
      padding: 28px; box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }
    .bh-top { display: flex; align-items: center; gap: 20px; margin-bottom: 22px; }
    .bh-ring { width: 88px; height: 88px; flex-shrink: 0; position: relative; }
    .bh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
    .bh-ring-bg { fill: none; stroke: var(--gray100); stroke-width: 8; }
    .bh-ring-fill { fill: none; stroke: var(--gold); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 245; stroke-dashoffset: 61; }
    .bh-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .bh-score-val { font-family: 'Inter', sans-serif; font-size: 1.35rem; font-weight: 800; color: var(--gray900); line-height: 1; }
    .bh-score-max { font-size: 0.6rem; color: var(--gray400); }
    .bh-info h4 { font-size: 0.9rem; font-weight: 700; color: var(--gray900); margin-bottom: 4px; }
    .bh-info p { font-size: 0.78rem; color: var(--gray600); line-height: 1.55; }
    .bh-grade { font-family: 'Inter', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--blue2); }
    .bh-pillars { display: flex; flex-direction: column; gap: 9px; }
    .bh-pillar { display: flex; align-items: center; gap: 10px; }
    .bh-pillar-name { font-size: 0.72rem; color: var(--gray600); width: 148px; flex-shrink: 0; }
    .bh-bar-wrap { flex: 1; height: 6px; background: var(--gray100); border-radius: 100px; overflow: hidden; }
    .bh-bar { height: 100%; border-radius: 100px; }
    .bh-bar.green { background: var(--green2); }
    .bh-bar.gold { background: var(--gold); }
    .bh-bar.red { background: #ef4444; }
    .bh-pillar-val { font-size: 0.7rem; font-weight: 700; color: var(--gray900); width: 26px; text-align: right; }
    .bh-alert {
      margin-top: 16px; background: #eff6ff; border: 1px solid #93c5fd;
      border-radius: 8px; padding: 10px 12px; font-size: 0.75rem; color: #78350f;
      display: flex; align-items: flex-start; gap: 7px;
    }
    .bh-kpis { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 18px; }
    .bh-kpi {
      background: var(--gray50); border: 1px solid var(--gray200); border-radius: 10px; padding: 12px;
    }
    .bh-kpi-label { font-size: 0.62rem; color: var(--gray400); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; font-weight: 600; }
    .bh-kpi-val { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 700; }
    .bh-kpi-val.green { color: var(--green); }
    .bh-kpi-val.blue { color: var(--blue); }
    .bh-kpi-val.gold { color: var(--gold); }
    .bh-kpi-val.dark { color: var(--gray900); }

    .bh-text .section-sub { margin-bottom: 28px; }
    .check-list { display: flex; flex-direction: column; gap: 14px; }
    .check-item { display: flex; gap: 10px; align-items: flex-start; }
    .check-icon { color: var(--green); font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; }
    .check-item p { font-size: 0.88rem; color: var(--gray600); line-height: 1.65; }
    .check-item strong { color: var(--gray900); }

    /* ─── AI ADVISOR ─── */
    .ai-section { background: var(--white); }
    .ai-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .ai-chat-card {
      background: white; border: 1px solid var(--gray200); border-radius: 20px;
      overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    }
    .ai-chat-header {
      background: var(--navy); padding: 16px 20px;
      display: flex; align-items: center; gap: 12px;
    }
    .ai-avatar {
      width: 34px; height: 34px; border-radius: 9px;
      background: linear-gradient(135deg, var(--purple), var(--blue2));
      display: flex; align-items: center; justify-content: center; font-size: 0.9rem;
    }
    .ai-chat-title { font-size: 0.85rem; font-weight: 700; color: white; }
    .ai-chat-sub { font-size: 0.68rem; color: rgba(255,255,255,0.45); }
    .ai-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
    .ai-msg-u {
      align-self: flex-end; background: var(--blue); color: white;
      border-radius: 12px 12px 3px 12px; padding: 9px 13px;
      font-size: 0.8rem; max-width: 88%; line-height: 1.5;
    }
    .ai-msg-b {
      align-self: flex-start; background: var(--gray50); border: 1px solid var(--gray200);
      border-radius: 12px 12px 12px 3px; padding: 11px 13px;
      font-size: 0.8rem; max-width: 95%; color: var(--gray900); line-height: 1.6;
    }
    .ai-msg-b .hl { color: var(--blue); font-weight: 600; }
    .ai-msg-b .hl-gold { color: var(--gold); font-weight: 600; }
    .ai-chips { padding: 0 18px 18px; display: flex; flex-wrap: wrap; gap: 7px; }
    .ai-chip {
      font-size: 0.72rem; padding: 5px 11px; border-radius: 100px;
      background: var(--gray50); border: 1px solid var(--gray200);
      color: var(--gray600); cursor: default; transition: all 0.2s;
    }
    .ai-chip:hover { border-color: #bfdbfe; color: var(--blue); background: var(--blue-lt); }

    /* ─── VIDEO / GIF SECTION ─── */
    .video-section { background: var(--navy); padding: 96px 24px; }
    .video-section .eyebrow { color: #93c5fd; }
    .video-section .section-title { color: white; }
    .video-section .section-sub { color: rgba(255,255,255,0.5); }
    .video-intro { text-align: center; margin-bottom: 48px; }
    .video-intro .section-sub { margin: 0 auto; }
    .vid-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; flex-wrap: wrap; }
    .vid-tab {
      padding: 7px 18px; border-radius: 100px; font-size: 0.83rem; font-weight: 600;
      background: transparent; border: 1px solid rgba(255,255,255,0.12);
      color: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s;
    }
    .vid-tab.active, .vid-tab:hover { background: var(--blue); border-color: var(--blue); color: white; }
    .vid-frame {
      max-width: 920px; margin: 0 auto; border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow: 0 24px 80px rgba(0,0,0,0.5);
      background: var(--navy2);
    }
    .vid-top-bar {
      background: #0a1628; padding: 10px 14px;
      display: flex; align-items: center; gap: 7px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .vid-dot { width: 9px; height: 9px; border-radius: 50%; }
    .vid-url { flex: 1; max-width: 320px; margin: 0 auto; background: rgba(255,255,255,0.05); border-radius: 5px; padding: 3px 10px; font-size: 0.67rem; color: rgba(255,255,255,0.25); text-align: center; }
    /* GIF or placeholder area */
    .vid-body {
      position: relative;
      aspect-ratio: 16/9;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    /* If the GIF is present, it shows; otherwise the placeholder shows */
    .vid-body img.vid-gif {
      width: 100%; height: 100%; object-fit: cover;
      display: block;
    }
    .vid-placeholder {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
      background: radial-gradient(ellipse at center, rgba(59,130,246,0.07), transparent 70%);
    }
    .vid-play {
      width: 66px; height: 66px; border-radius: 50%;
      background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.15);
      display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
      cursor: pointer; transition: all 0.2s;
    }
    .vid-play:hover { background: rgba(59,130,246,0.6); border-color: var(--blue2); }
    .vid-placeholder h3 { font-size: 1.05rem; font-weight: 700; color: white; }
    .vid-placeholder p { font-size: 0.83rem; color: rgba(255,255,255,0.4); }
    .vid-badge { position: absolute; bottom: 14px; right: 14px; background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.7); font-size: 0.72rem; font-weight: 600; padding: 3px 9px; border-radius: 5px; }

    /* ─── INTEGRATIONS (dark) ─── */
    .int-section {
      background: var(--navy2, #0d1a35);
      position: relative; overflow: hidden;
    }
    .int-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 60% 50% at 50% -10%, rgba(37,99,235,0.18) 0%, transparent 65%);
    }
    .int-header { text-align: center; margin-bottom: 52px; position: relative; }
    .int-header .section-sub { margin: 0 auto; }
    .int-section .eyebrow { color: #93c5fd; }
    .int-section .section-title { color: white; }
    .int-section .section-sub { color: rgba(255,255,255,0.5); }
    .int-grid-dark {
      display: grid; grid-template-columns: repeat(3,1fr);
      gap: 16px; position: relative;
    }
    .int-card-dark {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 16px; padding: 18px 20px;
      display: flex; align-items: center; gap: 14px;
      transition: all 0.25s; cursor: default; position: relative; overflow: hidden;
    }
    .int-card-dark::before {
      content: ''; position: absolute; inset: 0; border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 55%);
      pointer-events: none;
    }
    .int-card-dark:not(.int-card-soon):hover {
      background: rgba(59,130,246,0.1);
      border-color: rgba(59,130,246,0.35);
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(0,0,0,0.35);
    }
    .int-card-soon { opacity: 0.65; }
    .int-card-soon:hover { opacity: 0.85; }
    .int-logo-dark {
      width: 48px; height: 48px; border-radius: 12px; border: 1px solid;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .int-card-body { flex: 1; min-width: 0; }
    .int-card-name { font-size: 0.88rem; font-weight: 700; color: white; }
    .int-card-cat { font-size: 0.64rem; color: rgba(255,255,255,0.35); margin-top: 3px; line-height: 1.4; }
    .int-status-live {
      font-size: 0.62rem; font-weight: 700;
      background: rgba(22,163,74,0.15); color: #4ade80;
      border: 1px solid rgba(34,197,94,0.22);
      border-radius: 100px; padding: 4px 10px;
      display: flex; align-items: center; gap: 5px;
      white-space: nowrap; flex-shrink: 0;
    }
    .int-pulse { width: 5px; height: 5px; border-radius: 50%; background: #22c55e; animation: blink 2s infinite; flex-shrink: 0; }
    .int-status-soon {
      font-size: 0.62rem; font-weight: 600;
      background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.3);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 100px; padding: 4px 10px;
      white-space: nowrap; flex-shrink: 0;
    }
    .int-more-strip {
      text-align: center; margin-top: 36px; position: relative;
      font-size: 0.8rem; color: rgba(255,255,255,0.3);
      display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
    }
    .int-more-divider { width: 32px; height: 1px; background: rgba(255,255,255,0.1); }
    .int-more-strip strong { color: rgba(255,255,255,0.5); font-weight: 600; }

    /* ─── MOBILE / PULSE ─── */
    .pulse-section {
      background:
        radial-gradient(ellipse 820px 640px at 6%  42%, rgba(33,96,227,.17)  0%, transparent 55%),
        radial-gradient(ellipse 700px 540px at 94% 65%, rgba(99,102,241,.13) 0%, transparent 54%),
        radial-gradient(ellipse 560px 440px at 50% 72%, rgba(139,92,246,.09) 0%, transparent 52%),
        radial-gradient(ellipse 600px 460px at 90% 28%, rgba(59,130,246,.11) 0%, transparent 55%),
        #edf2fb;
      position: relative;
      z-index: 1;
      margin-top: -1px;
    }
    .pulse-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
    .pulse-copy-glass {
      background: rgba(255,255,255,.28);
      backdrop-filter: blur(18px) saturate(1.5);
      -webkit-backdrop-filter: blur(18px) saturate(1.5);
      border: 1px solid rgba(255,255,255,.7);
      border-radius: 24px;
      box-shadow: 0 8px 40px rgba(33,96,227,.10), inset 0 1px 0 rgba(255,255,255,.9);
      padding: 36px 40px;
    }
    .pulse-phone-wrap { display: flex; justify-content: center; }
    .phone {
      width: 268px; background: #0A0E27; border-radius: 38px;
      border: 7px solid #e2e6f0;
      box-shadow: 0 32px 72px rgba(0,0,0,0.14), inset 0 0 0 1px rgba(0,0,0,0.04);
      overflow: hidden;
    }
    .phone-notch { width: 72px; height: 5px; background: rgba(255,255,255,0.15); border-radius: 100px; margin: 12px auto 14px; }
    .phone-inner { padding: 0 12px 16px; }
    .p-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .p-brand { font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 800; color: var(--gray900); }
    .p-score-card {
      background: var(--navy); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    }
    .p-score-label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.45); margin-bottom: 5px; }
    .p-score-row { display: flex; align-items: center; gap: 8px; }
    .p-grade { font-family: 'Inter', sans-serif; font-size: 1.4rem; font-weight: 800; color: #60a5fa; }
    .p-score-val { font-family: 'Inter', sans-serif; font-size: 0.9rem; font-weight: 700; color: white; }
    .p-bar-wrap { margin-top: 7px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 100px; }
    .p-bar-fill { height: 100%; width: 75%; background: linear-gradient(90deg, #2563eb, #38bdf8); border-radius: 100px; }
    .p-rev-card {
      background: var(--gray50); border: 1px solid var(--gray200); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px;
    }
    .p-rev-label { font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray400); margin-bottom: 4px; }
    .p-rev-val { font-family: 'Inter', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--gray900); margin-bottom: 8px; }
    .p-rev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
    .p-rev-item { background: white; border: 1px solid var(--gray200); border-radius: 7px; padding: 6px; text-align: center; }
    .p-rev-item-label { font-size: 0.55rem; color: var(--gray400); }
    .p-rev-item-val { font-size: 0.7rem; font-weight: 700; color: var(--gray900); font-family: 'Inter', sans-serif; }
    .p-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
    .p-stat { background: var(--gray50); border: 1px solid var(--gray200); border-radius: 10px; padding: 10px 10px; }
    .p-stat-label { font-size: 0.55rem; color: var(--gray400); margin-bottom: 3px; font-weight: 500; }
    .p-stat-val { font-family: 'Inter', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--gray900); }

    /* ─── COMPARISON ─── */
    .cmp-section {
      background:
        radial-gradient(ellipse 820px 620px at 8% 35%, rgba(33,96,227,.18) 0%, transparent 55%),
        radial-gradient(ellipse 700px 520px at 92% 70%, rgba(99,102,241,.14) 0%, transparent 54%),
        radial-gradient(ellipse 560px 440px at 50% 90%, rgba(139,92,246,.10) 0%, transparent 52%),
        radial-gradient(ellipse 600px 480px at 96% 30%, rgba(59,130,246,.11) 0%, transparent 55%),
        #edf2fb;
      padding-top: 80px;
      padding-bottom: 96px;
      position: relative;
      z-index: 1;
      margin-top: -1px;
    }
    .cmp-header { text-align: center; margin-bottom: 52px; }
    .cmp-header .eyebrow { color: #2563eb; }
    .cmp-header h2.section-title { color: #0a1628; }
    .cmp-header .section-sub { margin: 0 auto; }
    .cmp-scroll-hint { text-align: center; font-size: 0.75rem; color: #6b7280; margin: -36px 0 20px; display: none; }
    @media (max-width: 720px) { .cmp-scroll-hint { display: block; } }
    .cmp-wrap {
      background: rgba(255,255,255,.22);
      border: 1px solid rgba(255,255,255,.65);
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 48px rgba(33,96,227,.13), inset 0 1px 0 rgba(255,255,255,.9);
      backdrop-filter: blur(24px) saturate(1.6);
      -webkit-backdrop-filter: blur(24px) saturate(1.6);
    }
    .cmp-table { width: 100%; border-collapse: collapse; }
    .cmp-table th, .cmp-table td { text-align: center; padding: 0 12px; }
    .cmp-table th:first-child, .cmp-table td:first-child { text-align: left; padding-left: 28px; }
    .cmp-head-row { border-bottom: 1px solid rgba(33,96,227,.10); }
    .cmp-head-row th { padding-top: 24px; padding-bottom: 20px; font-family: 'Inter', sans-serif; }
    .cmp-col-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9aa3bc; }
    .cmp-col-us {
      background: linear-gradient(160deg, rgba(37,99,235,.14) 0%, rgba(99,102,241,.08) 100%);
      border-radius: 12px 12px 0 0; border: 2px solid rgba(37,99,235,.30); border-bottom: none;
      padding: 14px 16px 10px;
    }
    .cmp-col-us-name { font-size: 0.85rem; font-weight: 800; color: #1d4ed8; font-family: 'Bungee', sans-serif; letter-spacing: 0.02em; }
    .cmp-col-us-price { font-size: 0.7rem; color: #1d4ed8; font-weight: 600; opacity: 0.8; margin-top: 2px; }
    .cmp-col-them-name { font-size: 0.82rem; font-weight: 700; color: #374151; }
    .cmp-col-them-price { font-size: 0.7rem; color: #9aa3bc; margin-top: 2px; }
    .cmp-row { border-bottom: 1px solid rgba(33,96,227,.07); }
    .cmp-row:last-child { border-bottom: none; }
    .cmp-row td { padding-top: 14px; padding-bottom: 14px; }
    .cmp-row:hover { background: rgba(255,255,255,.18); }
    .cmp-feat-name { font-size: 0.84rem; font-weight: 500; color: #0a1628; }
    .cmp-feat-sub { font-size: 0.72rem; color: #9aa3bc; margin-top: 2px; }
    .cmp-us-cell { background: linear-gradient(160deg, rgba(37,99,235,.10) 0%, rgba(99,102,241,.06) 100%); border-left: 2px solid rgba(37,99,235,.25); border-right: 2px solid rgba(37,99,235,.25); }
    .cmp-last-us { border-bottom: 2px solid rgba(37,99,235,.25); border-radius: 0 0 12px 12px; }
    .cmp-check { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; }
    .cmp-check.yes { background: var(--green-lt); color: var(--green); }
    .cmp-check.yes svg { width: 13px; height: 13px; }
    .cmp-check.no { background: var(--red-lt); color: var(--red); font-size: 1rem; font-weight: 700; line-height: 1; }
    .cmp-check.partial { background: var(--gold-lt); color: var(--gold); font-size: 0.75rem; font-weight: 700; }
    .cmp-text-cell { font-size: 0.8rem; font-weight: 600; }
    .cmp-text-cell.blue { color: #1d4ed8; }
    .cmp-text-cell.gray { color: #9aa3bc; }
    .cmp-footer { padding: 16px 28px; background: rgba(255,255,255,.15); border-top: 1px solid rgba(33,96,227,.09); display: flex; align-items: center; gap: 16px; }
    .cmp-footer-note { font-size: 0.75rem; color: #9aa3bc; }

    /* ─── PRICING ─── */
    .pricing-section { background: var(--white); text-align: center; }
    .pricing-header .section-sub { margin: 0 auto; }
    .pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 52px; }
    .price-card {
      border: 1px solid var(--gray200); border-radius: 18px; padding: 32px 26px;
      background: white; text-align: left; display: flex; flex-direction: column;
      position: relative; overflow: hidden; transition: transform 0.2s;
    }
    .price-card:hover { transform: translateY(-2px); }
    .price-card.featured { border-color: var(--blue); background: var(--navy); }
    .price-badge {
      position: absolute; top: 0; right: 0;
      background: var(--blue); color: white; font-size: 0.68rem; font-weight: 700;
      padding: 4px 14px; border-radius: 0 18px 0 10px;
    }
    .price-tier { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gray400); margin-bottom: 10px; }
    .price-card.featured .price-tier { color: rgba(255,255,255,0.4); }
    .price-amount { font-family: 'Inter', sans-serif; font-size: 2.2rem; font-weight: 800; color: var(--gray900); }
    .price-card.featured .price-amount { color: white; }
    .price-period { font-size: 0.78rem; color: var(--gray400); margin-bottom: 10px; }
    .price-card.featured .price-period { color: rgba(255,255,255,0.35); }
    .price-desc { font-size: 0.83rem; color: var(--gray600); line-height: 1.6; margin-bottom: 22px; }
    .price-card.featured .price-desc { color: rgba(255,255,255,0.5); }
    .price-features { flex: 1; display: flex; flex-direction: column; gap: 9px; margin-bottom: 28px; }
    .price-feat { display: flex; align-items: flex-start; gap: 9px; font-size: 0.83rem; color: var(--gray700, var(--gray600)); }
    .price-card.featured .price-feat { color: rgba(255,255,255,0.7); }
    .pck { color: var(--green); font-size: 0.85rem; flex-shrink: 0; }
    .pck-off { color: var(--gray200); font-size: 0.85rem; flex-shrink: 0; }
    .price-card.featured .pck-off { color: rgba(255,255,255,0.15); }
    .btn-price-primary {
      display: block; width: 100%; padding: 12px; border-radius: 100px; font-size: 0.88rem;
      font-weight: 700; color: white; background: var(--blue); border: none;
      cursor: pointer; text-decoration: none; transition: all 0.2s; text-align: center;
    }
    .btn-price-primary:hover { background: #1d4ed8; }
    .btn-price-outline {
      display: block; width: 100%; padding: 12px; border-radius: 100px; font-size: 0.88rem;
      font-weight: 700; color: var(--gray900); background: transparent;
      border: 1.5px solid var(--gray200); cursor: pointer; text-decoration: none; transition: all 0.2s; text-align: center;
    }
    .btn-price-outline:hover { border-color: var(--blue); color: var(--blue); }
    .btn-price-outline-inv {
      display: block; width: 100%; padding: 12px; border-radius: 100px; font-size: 0.88rem;
      font-weight: 700; color: white; background: transparent;
      border: 1.5px solid rgba(255,255,255,0.2); cursor: pointer; text-decoration: none; transition: all 0.2s; text-align: center;
    }
    .btn-price-outline-inv:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }

    /* ─── DEMO CTA ─── */
    .cta-section {
      background: var(--navy);
      padding: 96px 24px;
      position: relative; overflow: hidden;
    }
    .cta-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.2) 0%, transparent 65%);
    }
    .cta-card {
      max-width: 960px; margin: 0 auto; position: relative;
      display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
    }
    /* Left — blends into section */
    .cta-left {
      padding: 0; display: flex; flex-direction: column; justify-content: center;
      position: relative;
    }
    .cta-left::before { display: none; }
    .cta-eyebrow {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: #60a5fa; margin-bottom: 14px; position: relative;
    }
    .cta-left h2 {
      font-family: 'Bungee', sans-serif; font-size: 1.9rem; color: white;
      line-height: 1.15; margin: 0 0 12px; position: relative;
    }
    .cta-left h2 em { font-style: normal; color: #60a5fa; }
    .cta-left > p {
      font-size: 0.9rem; color: rgba(255,255,255,0.6); line-height: 1.65; margin: 0 0 28px; position: relative;
    }
    .cta-props { display: flex; flex-direction: column; gap: 12px; position: relative; }
    .cta-prop { display: flex; align-items: flex-start; gap: 11px; }
    .cta-prop-icon {
      width: 22px; height: 22px; border-radius: 50%; background: rgba(37,99,235,0.2);
      border: 1px solid rgba(59,130,246,0.3); display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 1px;
    }
    .cta-prop-icon svg { display: block; }
    .cta-prop-text { font-size: 0.84rem; color: rgba(255,255,255,0.75); line-height: 1.4; }
    .cta-prop-text strong { color: white; font-weight: 600; }
    /* Right — white form panel */
    .cta-right {
      background: white; padding: 44px 40px;
      border-radius: 20px; border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 8px 40px rgba(0,0,0,0.25);
      display: flex; flex-direction: column; justify-content: center;
    }
    .cta-right h3 {
      font-size: 1.1rem; font-weight: 700; color: var(--navy); margin: 0 0 6px;
    }
    .cta-right > p {
      font-size: 0.82rem; color: var(--gray500); margin: 0 0 24px; line-height: 1.5;
    }
    .cta-form { display: flex; flex-direction: column; gap: 13px; }
    .cta-form label { font-size: 0.74rem; font-weight: 600; color: var(--gray600); display: block; margin-bottom: 5px; letter-spacing: 0.02em; }
    .cta-form input, .cta-form select {
      width: 100%; padding: 11px 14px; border-radius: 10px;
      background: var(--gray50); border: 1.5px solid var(--gray200);
      color: var(--gray900); font-size: 0.88rem; font-family: 'Inter', sans-serif;
      outline: none; transition: border-color 0.18s, background 0.18s; box-sizing: border-box;
    }
    .cta-form input:focus, .cta-form select:focus {
      border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(37,99,235,0.08);
    }
    .cta-form input::placeholder { color: var(--gray400); }
    .cta-form select option { background: white; }
    .cta-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .btn-cta {
      padding: 14px; border-radius: 100px; font-size: 0.92rem; font-weight: 700;
      color: white; background: var(--blue); border: none; cursor: pointer;
      transition: all 0.2s; letter-spacing: 0.01em; width: 100%; margin-top: 4px;
    }
    .btn-cta:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.35); }
    .cta-trust {
      text-align: center; font-size: 0.71rem; color: var(--gray400);
      margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    /* responsive */
    @media (max-width: 700px) {
      .cta-card { grid-template-columns: 1fr; gap: 36px; }
      .cta-right { padding: 32px 28px; }
    }

    /* ─── DIFFERENTIATORS CAROUSEL ─── */
    :root { --elec: #38bdf8; }
    .diff-section {
      background: #f0f4f8; padding: 96px 0 80px;
      position: relative; overflow: hidden;
    }
    .diff-section::before { display: none; }
    .diff-header { text-align: center; margin-bottom: 52px; padding: 0 24px; position: relative; }
    .diff-eyebrow {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: #2563eb;
    }
    .diff-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #2563eb; }
    .diff-header h2 {
      font-family: 'Bungee', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
      color: #0a1628; margin: 0 0 14px; line-height: 1.1;
    }
    .diff-header h2 em { font-style: normal; color: #2563eb; }
    .diff-header p { font-size: 1rem; color: #4b5a74; max-width: 520px; margin: 0 auto; line-height: 1.65; }

    /* Carousel outer */
    .diff-carousel-outer { position: relative; display: flex; align-items: center; }
    /* Arrow nav buttons */
    .diff-nav {
      position: absolute; z-index: 10; top: 50%; transform: translateY(-50%);
      width: 44px; height: 44px; border-radius: 50%;
      background: white; border: 1px solid rgba(37,99,235,0.2);
      color: #0a1628; font-size: 1.1rem; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      transition: background 0.2s, transform 0.2s, box-shadow 0.2s; flex-shrink: 0;
    }
    .diff-nav:hover { background: #2563eb; color: white; border-color: #2563eb; transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 20px rgba(37,99,235,0.3); }
    .diff-nav:disabled { opacity: 0.25; cursor: default; }
    .diff-prev { left: 20px; }
    .diff-next { right: 20px; }

    /* Scrollable track */
    .diff-carousel {
      display: flex; gap: 20px;
      overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
      padding: 16px 80px 20px;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .diff-carousel::-webkit-scrollbar { display: none; }

    /* Each slide — dark navy tile on light bg */
    .diff-slide {
      flex-shrink: 0;
      width: min(1080px, calc(100vw - 100px));
      scroll-snap-align: center;
      background: #0a1628;
      border: 1px solid rgba(56,189,248,0.15);
      border-radius: 22px; overflow: hidden;
      display: grid; grid-template-columns: 1fr 1.4fr;
      box-shadow: 0 4px 24px rgba(10,22,40,0.1);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .diff-slide:hover {
      border-color: rgba(56,189,248,0.35);
      box-shadow: 0 8px 32px rgba(10,22,40,0.14), 0 0 0 1px rgba(37,99,235,0.12);
    }

    /* Left text panel */
    .diff-text {
      padding: 44px 40px; display: flex; flex-direction: column; justify-content: center;
      position: relative;
    }
    /* Electric blue left border accent */
    .diff-text::before {
      content: ''; position: absolute; top: 0; left: 0; bottom: 0;
      width: 3px; background: linear-gradient(180deg, #38bdf8, #2563eb);
    }
    .diff-num {
      font-family: 'Bungee', sans-serif; font-size: 0.65rem; letter-spacing: 0.14em;
      color: rgba(255,255,255,0.2); margin-bottom: 16px;
    }
    .diff-icon {
      width: 46px; height: 46px; border-radius: 13px;
      background: rgba(56,189,248,0.12);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 16px; flex-shrink: 0;
    }
    .diff-slide h3 {
      font-family: 'Bungee', sans-serif; font-size: 1.25rem; color: white;
      margin: 0 0 10px; line-height: 1.2;
    }
    .diff-stat {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em;
      background: rgba(56,189,248,0.12); color: var(--elec);
      border-radius: 100px; padding: 4px 12px; margin-bottom: 16px; width: fit-content;
    }
    .diff-text p {
      font-size: 0.88rem; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0;
    }

    /* Right screenshot panel */
    .diff-img {
      display: flex; align-items: center; justify-content: center;
      padding: 24px; border-left: 1px solid rgba(56,189,248,0.1);
    }
    /* Browser card — chrome + screenshot wrapped together */
    .diff-browser {
      width: 100%; border-radius: 12px; overflow: hidden;
      box-shadow: 0 12px 48px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.25);
    }
    .diff-img-chrome {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 12px;
      background: #e8eaed;
      border-bottom: 1px solid #d1d5db;
    }
    .diff-img-body { overflow: hidden; }
    .diff-img-body img { width: 100%; height: auto; display: block; }
    .diff-img-empty {
      min-height: 240px; display: flex; align-items: center; justify-content: center;
      background: #f3f4f6;
      font-size: 0.78rem; color: #9ca3af; font-style: italic;
    }

    /* Email compose frame (slide 5) */
    .diff-email-chrome {
      background: #1a2e4a; padding: 10px 14px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(56,189,248,0.15);
    }
    .diff-email-title {
      display: flex; align-items: center; gap: 8px;
      font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85);
    }
    .diff-email-close {
      font-size: 0.72rem; color: rgba(255,255,255,0.3);
      width: 18px; height: 18px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.08);
    }
    .diff-email-fields { background: #fff; border-bottom: 1px solid #e5e7eb; }
    .diff-email-field {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 14px; font-size: 0.78rem; color: #374151;
      border-bottom: 1px solid #f3f4f6;
    }
    .diff-email-field:last-child { border-bottom: none; }
    .diff-email-field-label {
      font-weight: 600; color: #9ca3af; font-size: 0.68rem;
      text-transform: uppercase; letter-spacing: 0.05em; min-width: 52px;
    }

    /* Dot indicators */
    .diff-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
    .diff-dot {
      width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer;
      background: rgba(37,99,235,0.2); transition: all 0.2s; padding: 0;
    }
    .diff-dot.active { width: 24px; border-radius: 4px; background: #2563eb; }

    @media (max-width: 700px) {
      .diff-slide { grid-template-columns: 1fr; width: min(420px, calc(100vw - 80px)); min-height: auto; }
      .diff-img { max-height: 240px; }
      .diff-text { padding: 28px 24px; }
      .diff-carousel { padding: 12px 40px 16px; }
      .diff-prev { left: 6px; } .diff-next { right: 6px; }
    }

    /* ─── WAVE SEPARATORS ─── */
    .wave-sep { display: block; line-height: 0; font-size: 0; overflow: hidden; margin-bottom: -2px; }
    .wave-sep svg { display: block; width: 100%; }

    /* Subtle section divider for same-color transitions */
    .sect-rule {
      max-width: 1100px; margin: 0 auto;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(37,99,235,0.15) 30%, rgba(56,189,248,0.2) 50%, rgba(37,99,235,0.15) 70%, transparent);
    }
    .sect-rule-wrap { padding: 0 24px; }

    /* ─── ONBOARDING (journey scroll) ─── */
    .onboard-section {
      /* background handled by #gradient-zone wrapper */
      background: transparent; padding: 0 !important; position: relative;
      height: 320vh;
    }
    .onboard-section::before { display: none; }
    .onboard-header {
      text-align: center; max-width: 620px; margin: 0 auto 48px; position: relative;
    }
    .onboard-header .eyebrow { color: #1d4ed8; }
    .onboard-header h2 {
      font-family: 'Bungee', sans-serif; font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      color: #0a1628; margin: 0 0 14px; line-height: 1.1;
    }
    .onboard-header h2 em { font-style: normal; color: var(--blue); }
    .onboard-header p { font-size: 1rem; color: #5a6a82; line-height: 1.65; margin: 0; }

    /* Steps layout */
    .onboard-steps {
      max-width: 1300px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
      align-items: stretch; position: relative;
    }
    .onboard-connector {
      display: flex; align-items: center; justify-content: center; padding-top: 44px; flex-shrink: 0;
    }
    .onboard-connector svg { display: block; }
    .onboard-step {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 28px 24px;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.55);
      border-radius: 16px;
      backdrop-filter: blur(22px) saturate(1.5);
      -webkit-backdrop-filter: blur(22px) saturate(1.5);
      box-shadow: 0 4px 28px rgba(33,96,227,.1), inset 0 1px 0 rgba(255,255,255,.82);
    }
    .onboard-icon-ring {
      width: 88px; height: 88px; border-radius: 50%; position: relative;
      background: white;
      box-shadow: 0 0 0 1px rgba(37,99,235,0.15), 0 6px 24px rgba(37,99,235,0.12);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 20px; flex-shrink: 0;
    }
    .onboard-icon-inner {
      width: 58px; height: 58px; border-radius: 50%;
      background: linear-gradient(135deg, #1d4ed8, #38bdf8);
      display: flex; align-items: center; justify-content: center;
    }
    .onboard-step-num {
      position: absolute; top: -6px; right: -6px;
      width: 24px; height: 24px; border-radius: 50%;
      background: #0a1628; border: 2px solid white;
      font-family: 'Bungee', sans-serif; font-size: 0.6rem;
      color: white; display: flex; align-items: center; justify-content: center;
    }
    .onboard-day-badge {
      display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px;
      font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
      color: #1e3a8a; background: rgba(37,99,235,0.09);
      border: 1px solid rgba(37,99,235,0.25); border-radius: 100px; padding: 3px 10px;
    }
    .onboard-step h3 {
      font-family: 'Bungee', sans-serif; font-size: 1.05rem; color: #0a1628;
      margin: 0 0 10px; line-height: 1.2;
    }
    .onboard-step p {
      font-size: 0.84rem; color: #6b7280; line-height: 1.65; margin: 0;
    }

    /* Stats bar */
    .onboard-stats {
      max-width: 580px; margin: 40px auto 0;
      background: var(--navy); border-radius: 100px;
      padding: 0;
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    }
    .onboard-stat {
      text-align: center; padding: 18px 20px;
      border-right: 1px solid rgba(255,255,255,0.1);
      display: flex; flex-direction: column; align-items: center; gap: 2px;
    }
    .onboard-stat:last-child { border-right: none; }
    .onboard-stat-num {
      font-family: 'Bungee', sans-serif; font-size: 1.6rem; color: #ffffff;
      line-height: 1;
    }
    .onboard-stat-unit {
      font-family: 'Bungee', sans-serif; font-size: 0.65rem; color: #38bdf8;
      text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px;
    }
    .onboard-stat-label { font-size: 0.7rem; color: rgba(255,255,255,0.45); }

    @media (max-width: 760px) {
      .onboard-steps { grid-template-columns: 1fr; gap: 40px; }
      .onboard-connector { display: none; }
      .onboard-stats { grid-template-columns: 1fr; }
      .onboard-stat { border-right: none; border-bottom: 1px solid #e5e7eb; padding: 16px 0; }
      .onboard-stat:last-child { border-bottom: none; }
    }

    /* ─── CUSTOMER SUCCESS ─── */
    .success-section {
      background: var(--navy); padding: 96px 24px 100px; position: relative; overflow: hidden;
    }
    .success-section::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 55% 60% at 15% 50%, rgba(37,99,235,0.12) 0%, transparent 65%),
        radial-gradient(ellipse 40% 50% at 85% 30%, rgba(56,189,248,0.07) 0%, transparent 60%);
    }
    .success-inner {
      max-width: 1100px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: center;
      position: relative;
    }
    .success-text .eyebrow { color: #38bdf8; }
    .success-text h2 {
      font-family: 'Bungee', sans-serif; font-size: clamp(1.8rem, 3vw, 2.5rem);
      color: white; margin: 0 0 16px; line-height: 1.1;
    }
    .success-text h2 em { font-style: normal; color: #38bdf8; }
    .success-text > p {
      font-size: 0.95rem; color: rgba(255,255,255,0.5); line-height: 1.7; margin: 0 0 36px;
    }
    .success-feats { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
    .success-feat {
      display: flex; align-items: flex-start; gap: 14px;
    }
    .success-feat-icon {
      width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
      background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.18);
      display: flex; align-items: center; justify-content: center; margin-top: 1px;
    }
    .success-feat-body h4 { font-size: 0.86rem; font-weight: 700; color: white; margin: 0 0 2px; }
    .success-feat-body p { font-size: 0.78rem; color: rgba(255,255,255,0.42); margin: 0; line-height: 1.5; }

    /* "vs a ticket" callout */
    .vs-ticket {
      background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
      border-radius: 12px; padding: 14px 18px;
      display: flex; align-items: flex-start; gap: 14px;
    }
    .vs-ticket-x {
      width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
      background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.18);
      display: flex; align-items: center; justify-content: center;
    }
    .vs-ticket-body { font-size: 0.75rem; color: rgba(255,255,255,0.35); line-height: 1.55; }
    .vs-ticket-body strong { color: rgba(255,255,255,0.5); display: block; margin-bottom: 4px; font-size: 0.78rem; }
    .vs-status {
      display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
      font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
      color: #f87171; background: rgba(239,68,68,0.15); border-radius: 4px; padding: 2px 8px;
    }

    /* Slack window */
    .slack-window {
      background: #1a1d21; border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 28px 80px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
    }
    .slack-titlebar {
      background: #141619; padding: 10px 14px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .slack-dots { display: flex; gap: 6px; }
    .slack-dot { width: 10px; height: 10px; border-radius: 50%; }
    .slack-titlebar-label {
      font-size: 0.72rem; color: rgba(255,255,255,0.3); letter-spacing: 0.04em;
    }
    .slack-channel-bar {
      background: #1a1d21; padding: 10px 16px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .slack-channel-name {
      font-weight: 700; color: white; font-size: 0.84rem;
      display: flex; align-items: center; gap: 6px;
    }
    .slack-online {
      display: flex; align-items: center; gap: 5px;
      font-size: 0.68rem; color: rgba(255,255,255,0.35);
    }
    .slack-online-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #22c55e;
      box-shadow: 0 0 5px rgba(34,197,94,0.5);
    }
    .slack-msgs { padding: 16px 14px; display: flex; flex-direction: column; gap: 14px; }
    .slack-msg { display: flex; gap: 10px; align-items: flex-start; }
    .slack-avatar {
      width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.58rem; font-weight: 800; color: white; letter-spacing: 0;
    }
    .slack-msg-body {}
    .slack-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
    .slack-msg-name { font-size: 0.78rem; font-weight: 700; color: white; }
    .slack-msg-time { font-size: 0.65rem; color: rgba(255,255,255,0.28); }
    .slack-msg-text {
      font-size: 0.78rem; color: rgba(255,255,255,0.65); line-height: 1.55;
    }
    .slack-msg-text strong { color: white; }
    .slack-msg-text .slack-mention {
      color: #60a5fa; background: rgba(96,165,250,0.1); border-radius: 3px; padding: 1px 4px;
    }
    .slack-reaction {
      display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; color: rgba(255,255,255,0.5);
    }
    .slack-input-bar {
      padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.07);
    }
    .slack-input {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px; padding: 9px 14px;
      font-size: 0.74rem; color: rgba(255,255,255,0.3);
      display: flex; align-items: center; justify-content: space-between;
    }

    /* ─── TICKET WINDOW MOCK ─── */
    .ticket-window {
      background: #0d1a35; border-radius: 16px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 28px 80px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.3);
    }
    .ticket-titlebar {
      background: #060d1f; padding: 10px 14px;
      display: flex; align-items: center; justify-content: space-between;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .ticket-titlebar-label {
      font-size: 0.72rem; color: rgba(255,255,255,0.3); letter-spacing: 0.04em;
    }
    .ticket-header-bar {
      background: #0d1a35; padding: 12px 16px;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .ticket-id-badge {
      font-size: 0.7rem; font-weight: 700; color: #38bdf8;
      background: rgba(56,189,248,0.1); border: 1px solid rgba(56,189,248,0.2);
      border-radius: 5px; padding: 2px 8px; letter-spacing: 0.04em; flex-shrink: 0;
    }
    .ticket-subject-label {
      font-size: 0.8rem; font-weight: 600; color: white; flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .ticket-status-pill {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; border-radius: 20px; padding: 2px 10px; flex-shrink: 0;
    }
    .ticket-status-pill.open {
      background: rgba(56,189,248,0.12); color: #38bdf8; border: 1px solid rgba(56,189,248,0.25);
    }
    .ticket-meta-row {
      padding: 8px 16px; display: flex; gap: 20px; flex-wrap: wrap;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      background: rgba(255,255,255,0.02);
    }
    .ticket-meta-item {
      font-size: 0.68rem; color: rgba(255,255,255,0.35);
      display: flex; align-items: center; gap: 5px;
    }
    .ticket-thread {
      padding: 16px 14px; display: flex; flex-direction: column; gap: 14px;
    }
    .tkt-msg { display: flex; flex-direction: column; gap: 4px; max-width: 85%; }
    .tkt-msg.from-admin { align-self: flex-end; align-items: flex-end; }
    .tkt-msg.from-customer { align-self: flex-start; align-items: flex-start; }
    .tkt-sender { font-size: 0.65rem; font-weight: 600; color: rgba(255,255,255,0.4); margin-bottom: 2px; }
    .tkt-bubble {
      font-size: 0.75rem; line-height: 1.55; color: rgba(255,255,255,0.85);
      border-radius: 12px; padding: 9px 13px;
    }
    .customer-bubble {
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.09);
      border-bottom-left-radius: 3px;
    }
    .admin-bubble {
      background: linear-gradient(135deg, rgba(37,99,235,0.7), rgba(56,189,248,0.5));
      border: 1px solid rgba(56,189,248,0.2);
      border-bottom-right-radius: 3px; color: white;
    }
    .tkt-time { font-size: 0.62rem; color: rgba(255,255,255,0.22); }
    .ticket-reply-bar {
      padding: 10px 14px; border-top: 1px solid rgba(255,255,255,0.07);
    }
    .ticket-reply-input {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px; padding: 9px 14px;
      font-size: 0.74rem;
      display: flex; align-items: center; justify-content: space-between;
    }

    @media (max-width: 900px) {
      .success-inner { grid-template-columns: 1fr; gap: 48px; }
    }

    /* ─── FOOTER ─── */
    footer { background: var(--gray900); padding: 64px 24px 32px; }
    .footer-inner { max-width: 1120px; margin: 0 auto; }
    .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
    .footer-brand p { font-size: 0.85rem; color: rgba(255,255,255,0.35); line-height: 1.7; margin-top: 14px; max-width: 260px; }
    .footer-col h4 { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
    .footer-col a { display: block; font-size: 0.84rem; color: rgba(255,255,255,0.35); text-decoration: none; margin-bottom: 8px; transition: color 0.2s; }
    .footer-col a:hover { color: rgba(255,255,255,0.7); }
    .footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: rgba(255,255,255,0.25); }
    .footer-bottom-links { display: flex; gap: 20px; }
    .footer-bottom-links a { color: rgba(255,255,255,0.25); text-decoration: none; }
    .footer-bottom-links a:hover { color: rgba(255,255,255,0.5); }

    /* ─── MODALS ─── */
    .overlay {
      position: fixed; inset: 0; z-index: 200;
      background: rgba(10,14,39,0.6); backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center; padding: 24px;
      opacity: 0; pointer-events: none; transition: opacity 0.25s;
    }
    .overlay.open { opacity: 1; pointer-events: all; }
    /* ── Demo modal: wide two-column ── */
    .modal-wide {
      background: white; border-radius: 22px; max-width: 820px; width: 100%;
      position: relative; transform: translateY(20px) scale(0.98);
      transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 32px 100px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .overlay.open .modal-wide { transform: translateY(0) scale(1); }
    .modal-wide-top {
      background: linear-gradient(160deg, #eef2ff 0%, #f5f7ff 50%, #f8f9fc 100%);
      padding: 36px 40px 28px; text-align: center; border-bottom: 1px solid var(--gray200);
    }
    .modal-wide-top .modal-eyebrow {
      font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--blue); margin-bottom: 10px;
    }
    .modal-wide-top h2 {
      font-family: 'Bungee', sans-serif; font-size: 1.8rem; color: var(--navy);
      margin: 0 0 8px; line-height: 1.15;
    }
    .modal-wide-top h2 em { font-style: normal; color: var(--blue); }
    .modal-wide-top p { font-size: 0.88rem; color: var(--gray500); margin: 0; }
    .modal-wide-body { display: grid; grid-template-columns: 1fr 1fr; }
    .modal-form-col { padding: 28px 32px 24px; display: flex; flex-direction: column; gap: 0; }
    .modal-graphic-col {
      background: linear-gradient(155deg, #0A0E27 0%, #1a2347 100%);
      padding: 28px 24px; display: flex; flex-direction: column;
      justify-content: center; gap: 10px; position: relative; overflow: hidden;
    }
    .modal-graphic-col::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 140% 80% at 50% -10%, rgba(59,130,246,0.2) 0%, transparent 65%);
    }
    .mg-label {
      font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 4px;
    }
    .mg-card {
      background: white; border-radius: 12px; padding: 14px 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.18); position: relative; z-index: 1;
    }
    .mg-card-dark {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px; padding: 14px 16px; position: relative; z-index: 1;
    }
    .mg-row { display: flex; gap: 8px; }
    .mg-stat { flex: 1; background: white; border-radius: 10px; padding: 10px 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.14); }
    /* ── Shared modal form styles ── */
    .modal-form { display: flex; flex-direction: column; gap: 13px; }
    .modal-form label { font-size: 0.74rem; font-weight: 600; color: var(--gray600); display: block; margin-bottom: 5px; letter-spacing: 0.02em; }
    .modal-form input, .modal-form select, .modal-form textarea {
      width: 100%; padding: 11px 14px; border-radius: 10px;
      background: var(--gray50); border: 1.5px solid var(--gray200);
      color: var(--gray900); font-size: 0.88rem; font-family: 'Inter', sans-serif;
      outline: none; transition: border-color 0.18s, background 0.18s; box-sizing: border-box;
    }
    .modal-form input:focus, .modal-form select:focus, .modal-form textarea:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(37,99,235,0.08); }
    .modal-form input::placeholder, .modal-form textarea::placeholder { color: var(--gray400); }
    .modal-form select option { background: white; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .btn-modal {
      padding: 14px; border-radius: 100px; font-size: 0.92rem; font-weight: 700;
      color: white; background: var(--blue); border: none; cursor: pointer;
      transition: all 0.2s; letter-spacing: 0.01em; margin-top: 4px; width: 100%;
    }
    .btn-modal:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,0.35); }
    .modal-trust {
      text-align: center; font-size: 0.71rem; color: var(--gray400);
      margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 5px;
    }
    .modal-trust svg { flex-shrink: 0; }
    /* ── Slim modal for waitlist ── */
    .modal {
      background: white; border-radius: 22px; max-width: 480px; width: 100%;
      position: relative; transform: translateY(20px) scale(0.98);
      transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
      box-shadow: 0 32px 100px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .overlay.open .modal { transform: translateY(0) scale(1); }
    .modal-header {
      background: linear-gradient(135deg, #0A0E27 0%, #1a2347 100%);
      padding: 28px 32px 24px; position: relative; overflow: hidden;
    }
    .modal-header::before {
      content: ''; position: absolute; inset: 0;
      background: radial-gradient(ellipse 120% 100% at 80% -20%, rgba(59,130,246,0.25) 0%, transparent 60%);
    }
    .modal-header-eyebrow {
      font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
      color: rgba(255,255,255,0.45); margin-bottom: 6px; position: relative;
    }
    .modal-header h2 {
      font-family: 'Bungee', sans-serif; font-size: 1.5rem; color: white;
      margin: 0; line-height: 1.2; position: relative;
    }
    .modal-header h2 em { font-style: normal; color: #60a5fa; }
    .modal-header p {
      font-size: 0.84rem; color: rgba(255,255,255,0.55); margin: 8px 0 0; line-height: 1.6; position: relative;
    }
    .modal-close {
      position: absolute; top: 16px; right: 16px; z-index: 10;
      background: rgba(255,255,255,0.12); border: none; border-radius: 50%;
      width: 30px; height: 30px; font-size: 1.1rem; cursor: pointer;
      color: rgba(255,255,255,0.8); line-height: 30px; text-align: center; transition: all 0.2s;
    }
    .modal-close:hover { background: rgba(255,255,255,0.22); color: white; }
    .modal-body { padding: 28px 32px 20px; }
    .modal-success { display: none; text-align: center; padding: 52px 32px; }
    .modal-success.show { display: flex; flex-direction: column; align-items: center; gap: 14px; }
    .modal-success .s-check {
      width: 64px; height: 64px; border-radius: 50%;
      background: linear-gradient(135deg, #16a34a, #22c55e);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(22,163,74,0.3);
    }
    .modal-success h3 { font-family: 'Bungee', sans-serif; font-size: 1.25rem; color: var(--gray900); margin: 0; }
    .modal-success p { font-size: 0.86rem; color: var(--gray500); max-width: 280px; line-height: 1.6; margin: 0; }

    /* ─── VIDEO SCREEN PANELS ─── */
    .vscreen { display: none; }
    .vscreen.active { display: block; }

    /* ─── SCROLL ANIMATIONS ─── */
    @keyframes revealUp {
      from { opacity: 0; transform: translateY(30px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes springUp {
      0%   { opacity: 0; transform: translateY(42px) scale(0.93); }
      55%  { opacity: 1; transform: translateY(-7px) scale(1.012); }
      75%  { transform: translateY(3px) scale(0.998); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .fade { opacity: 0; }
    .fade.in { animation: revealUp 0.65s cubic-bezier(0.22,1,0.36,1) both; }
    .fade.d1.in { animation-delay: 0.1s; }  .fade.d2.in { animation-delay: 0.18s; }
    .fade.d3.in { animation-delay: 0.26s; } .fade.d4.in { animation-delay: 0.34s; }
    .fade.d5.in { animation-delay: 0.42s; } .fade.d6.in { animation-delay: 0.5s; }

    /* ─── RESPONSIVE ─── */
    @media (max-width: 960px) {
      nav { padding: 0 20px; }
      .nav-links { display: none; }
      .bh-inner, .pulse-inner { grid-template-columns: 1fr; gap: 40px; }
      .int-grid-dark { grid-template-columns: 1fr 1fr; }
      .features-grid, .pricing-grid { grid-template-columns: 1fr 1fr; }
      .testi-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .app-shell { grid-template-columns: 1fr; }
      .app-sidebar { display: none; }
      .dash-kpis { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 600px) {
      .features-grid, .pricing-grid { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr; }
      .hero h1 { font-size: 2.2rem; }
      .hero-stats { grid-template-columns: repeat(2,1fr); }
      section { padding: 72px 20px; }
    }

    /* ═══════════════════════════════════════════════════════════
       MOBILE OPTIMIZATION  ≤ 768px
       Desktop layout is untouched — all overrides are scoped here
       ═══════════════════════════════════════════════════════════ */

    /* ─── HAMBURGER BUTTON ─── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      z-index: 110;
      margin-left: 10px;
      flex-shrink: 0;
    }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: rgba(255,255,255,0.85);
      border-radius: 2px;
      transition: all 0.25s;
      transform-origin: center;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* ─── NAV DRAWER ─── */
    .nav-drawer {
      display: none;
      position: fixed;
      top: 64px; left: 0; right: 0;
      background: rgba(6,13,31,0.97);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      padding: 8px 24px 28px;
      z-index: 98;
      flex-direction: column;
    }
    .nav-drawer.open { display: flex; animation: drawerIn 0.2s ease; }
    @keyframes drawerIn {
      from { opacity: 0; transform: translateY(-6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .nav-drawer a.drawer-link {
      display: block;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      font-size: 1rem;
      font-weight: 500;
      padding: 14px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      font-family: 'Inter', sans-serif;
      transition: color 0.15s;
    }
    .nav-drawer a.drawer-link:last-of-type { border-bottom: none; }
    .nav-drawer a.drawer-link.active,
    .nav-drawer a.drawer-link:hover { color: white; }
    .drawer-actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 20px;
    }
    .drawer-login {
      display: block; text-align: center;
      padding: 12px 20px; border-radius: 100px;
      font-size: 0.9rem; font-weight: 600;
      color: rgba(255,255,255,0.8);
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.2);
      text-decoration: none;
      font-family: 'Inter', sans-serif;
    }
    .drawer-cta {
      display: block; text-align: center;
      padding: 13px 20px; border-radius: 100px;
      font-size: 0.9rem; font-weight: 700;
      color: white; background: var(--blue);
      border: none; text-decoration: none;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
    }

    /* ─── SCROLL HINT (comparison table) ─── */
    .cmp-scroll-hint {
      display: none;
      text-align: center;
      font-size: 0.72rem;
      color: var(--gray400);
      margin-bottom: 10px;
    }

    @media (max-width: 768px) {
      /* ── Nav ── */
      nav { padding: 0 20px; }
      .nav-links { display: none !important; }
      .nav-cta { display: none !important; }
      .nav-hamburger { display: flex; }

      /* ── Hero ── */
      .hero { padding: 88px 20px 0; min-height: auto; }
      .hero h1 { font-size: 1.9rem; line-height: 1.12; margin-bottom: 16px; }
      .hero-sub { font-size: 0.92rem; margin-bottom: 24px; line-height: 1.7; }
      .hero-badge { font-size: 0.72rem; margin-bottom: 20px; }
      .hero-actions {
        flex-direction: column; align-items: stretch;
        gap: 10px; margin-bottom: 32px;
      }
      .btn-hero-primary, .btn-hero-ghost {
        width: 100%; text-align: center;
        padding: 14px 20px; font-size: 0.92rem;
      }
      .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; margin-bottom: 32px; padding: 0;
      }
      .hstat { padding: 13px 12px 11px; }
      .hstat-val { font-size: 1.3rem; }
      .hstat-sub { display: none; }
      .hstat-pills { display: none; }

      /* ── Hero screenshot — show as clean image, hide browser chrome ── */
      .hero-screen { display: block; padding: 0 16px; }
      .screen-titlebar { display: none; }
      .screen-chrome {
        border-radius: 14px;
        overflow: hidden;
        border: none;
        box-shadow: 0 8px 32px rgba(15,28,56,0.22);
      }
      #hero-real-img { max-height: 260px; object-fit: cover; object-position: top; }
      #hero-fallback { display: none !important; }
      .app-shell { display: none !important; }

      /* ── Teaser carousel cards — narrower + adjust scroll padding ── */
      .teaser-card-xl { min-width: min(300px, 84vw); }
      .teaser-scroll-track { padding: 10px 20px 28px; }
      .teaser-scroll-outer::before,
      .teaser-scroll-outer::after { width: 24px; }
      .tcx-bottom { padding: 20px 20px 18px; }
      .tcx-bottom h3 { font-size: 0.95rem; }
      .tcx-bottom p { font-size: 0.82rem; margin-bottom: 14px; }
      .platform-teaser { padding: 56px 0 56px; }

      /* ── Section base ── */
      section { padding: 60px 20px; }
      .container { padding: 0; }
      .section-title { font-size: 1.55rem; line-height: 1.2; }
      .section-sub { font-size: 0.9rem; }
      .eyebrow { font-size: 0.65rem; }

      /* ── Logos strip ── */
      .logos-strip { padding: 22px 20px; }
      .logos-row { gap: 0; justify-content: center; }
      .logo-chip { font-size: 0.75rem; gap: 16px; }
      .logo-chip:not(:last-child)::after { height: 12px; }

      /* ── Feature tabs ── */
      .feat-tab-nav {
        overflow-x: auto; flex-wrap: nowrap;
        scrollbar-width: none; -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px;
        padding-bottom: 0;
      }
      .feat-tab-nav::-webkit-scrollbar { display: none; }
      .feat-tab-btn {
        flex-shrink: 0; min-width: 72px;
        padding: 11px 6px; gap: 5px;
      }
      .feat-tab-btn .ftb-icon { width: 26px; height: 26px; border-radius: 6px; }
      .feat-tab-btn .ftb-icon svg { width: 13px; height: 13px; }
      .feat-tab-btn .ftb-label { font-size: 0.6rem; line-height: 1.2; }

      /* ── Feature panels ── */
      .feat-panels { min-height: auto; }
      .feat-panel {
        display: none;
        flex-direction: column;
        padding: 24px 20px 20px;
        gap: 24px;
        grid-template-columns: 1fr !important;
      }
      .feat-panel.active { display: flex; }
      .feat-panel-screenshot { order: -1; }
      .feat-panel-screenshot img { max-height: 210px; object-fit: cover; }
      .feat-panel-text h3 { font-size: 1.15rem; }
      .feat-panel-text p { font-size: 0.84rem; }
      .feat-bullet { font-size: 0.8rem; }
      .feat-tags { display: none; }

      /* ── Brand health ── */
      .bh-inner { gap: 36px; }
      .bhm-wrap { font-size: 0.9em; }
      .bhm-pillars-row { grid-template-columns: repeat(2, 1fr); }
      .bhm-goals-row { grid-template-columns: repeat(2, 1fr); }
      .bhm-gauge-card { width: 100px; }
      .bh-card { padding: 18px; }
      .bh-chips-row { grid-template-columns: 1fr 1fr; }

      /* ── Comparison table — scrollable ── */
      .cmp-scroll-hint { display: block; }
      .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 16px; }
      .cmp-table { min-width: 560px; }
      .cmp-header { margin-bottom: 12px; }

      /* ── Integrations ── */
      .int-grid-dark { grid-template-columns: 1fr !important; gap: 10px; }
      .int-card-dark { padding: 14px 16px; }

      /* ── AI section ── */
      .ai-inner { grid-template-columns: 1fr; gap: 36px; }

      /* ── Pulse/mobile section ── */
      .pulse-inner { grid-template-columns: 1fr; gap: 36px; }
      .pulse-phone-wrap { order: -1; }
      .phone { width: 230px; }
      .pulse-copy-glass { padding: 24px 22px; }

      /* ── Diff carousel ── */
      .diff-slide {
        grid-template-columns: 1fr !important;
        width: min(340px, calc(100vw - 60px));
      }
      .diff-img { display: none; }
      .diff-text { padding: 28px 24px 32px; }
      .diff-carousel { padding: 10px 28px 14px; }
      .diff-prev { left: 2px; }
      .diff-next { right: 2px; }
      .diff-nav { width: 34px; height: 34px; font-size: 0.9rem; }
      .diff-slide h3 { font-size: 1.05rem; }
      .diff-stat { font-size: 0.62rem; }

      /* ── Onboarding ── */
      .onboard-steps { grid-template-columns: 1fr; gap: 20px; }
      .onboard-connector { display: none; }
      .onboard-stats { grid-template-columns: 1fr; border-radius: 16px; max-width: 100%; }
      .onboard-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 14px 0; }
      .onboard-stat:last-child { border-bottom: none; }

      /* ── Success section ── */
      .success-inner { gap: 40px; }
      .slack-window, .ticket-window { font-size: 0.88em; }

      /* ── CTA section ── */
      .cta-card { grid-template-columns: 1fr; gap: 28px; }
      .cta-right { padding: 26px 22px; }
      .cta-form-row { grid-template-columns: 1fr; gap: 10px; }
      .cta-left h2 { font-size: 1.5rem; }
      .cta-props { gap: 10px; }

      /* ── Video section ── */
      .vid-tabs { gap: 6px; }
      .vid-tab { padding: 6px 12px; font-size: 0.76rem; }
      .vid-frame { border-radius: 10px; }
      .video-section { padding: 60px 20px; }

      /* ── Footer ── */
      footer { padding: 44px 20px 24px; }
      .footer-top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
      .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
      .footer-bottom-links { gap: 16px; justify-content: center; flex-wrap: wrap; }

      /* ── Modals ── */
      .overlay { padding: 16px; align-items: flex-end; }
      .modal-wide {
        border-radius: 20px 20px 16px 16px;
        max-height: 90vh; overflow-y: auto;
      }
      .modal-wide-body { grid-template-columns: 1fr; }
      .modal-graphic-col { display: none; }
      .modal-form-col { padding: 20px 20px 16px; }
      .modal-wide-top { padding: 24px 20px 18px; }
      .modal-wide-top h2 { font-size: 1.35rem; }
      .form-row { grid-template-columns: 1fr; gap: 10px; }
      .modal { max-height: 90vh; overflow-y: auto; border-radius: 20px 20px 16px 16px; }
      .modal-header { padding: 22px 22px 18px; }
      .modal-body { padding: 18px 22px 14px; }

      /* ── Platform page specifics ── */
      .plat-hero-grid { grid-template-columns: 1fr !important; gap: 28px; }
      .plat-hero-visual { display: none !important; }

      /* ── Contact / About page ── */
      .about-inner { grid-template-columns: 1fr !important; gap: 36px; }
      .about-values { grid-template-columns: 1fr 1fr !important; gap: 10px; }

      /* ── Pricing page ── */
      .pricing-grid { grid-template-columns: 1fr !important; max-width: 480px; margin-left: auto; margin-right: auto; }
      .price-card.featured { order: -1; }
      .pricing-header { margin-bottom: 32px; }

      /* ── Shipment tracking section ── */
      .ship-logos-row { flex-wrap: wrap; justify-content: center; gap: 10px !important; }
    }

    /* ── Very small phones ── */
    @media (max-width: 390px) {
      .hero h1 { font-size: 1.7rem; }
      nav { padding: 0 16px; }
      .hero-stats { gap: 8px; }
      .hstat-val { font-size: 1.2rem; }
      .diff-slide { width: calc(100vw - 52px); }
      .feat-tab-btn { min-width: 64px; }
    }