/* ===== WeReply shared styles (loaded on every page) ===== */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }

    :root {
      /* Exact WeReply color palette from video */
      --page-bg:   #EBF3FF;      /* Light blue-gray page background */
      --page-bg2:  #E4EEF9;      /* Slightly deeper for alternating sections */
      --navy:      #0E2144;      /* Dark navy, nav, feature cards, CTA sections */
      --navy2:     #162540;      /* Slightly lighter navy for cards */
      --navy3:     #1E3050;      /* Card hover / elevated navy */
      --white:     #FFFFFF;
      --text:      #0E2144;      /* Dark navy text */
      --muted:     #5A7099;
      --light:     #94A3B8;
      /* Accent: blue-to-teal gradient matching the site */
      --accent:    #4B7FD4;
      --accent2:   #5BA4CF;
      --grad:      linear-gradient(135deg, #4B7FD4, #56C2C6);
      --green:     #22C55E;
      --border:    #D0DCF0;
      --border-dark: rgba(255,255,255,.1);
      --radius:    14px;
      --radius-nav:18px;
      --shadow:    0 2px 8px rgba(13,27,46,.08);
      --shadow-lg: 0 12px 48px rgba(13,27,46,.14);
    }

    body {
      font-family: 'Inter','Segoe UI',system-ui,sans-serif;
      background: var(--page-bg);
      color: var(--text);
      font-size: 16px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    /* Voorkom dat lange koppen/woorden buiten het scherm vallen op smalle telefoons */
    h1, h2, h3 { overflow-wrap: break-word; }

    /* ─── PAGES ─── */
    .page { display: none; }
    .page.active { display: block; }

    /* ─── FLOATING NAV (matches WeReply exactly) ─── */
    .nav-wrap {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 900;
      padding: 14px 40px;
      pointer-events: none;
      transition: padding .35s ease;
    }
    .nav-wrap.scrolled {
      padding: 6px 72px;
    }
    @media (max-width: 1024px) {
      .nav-wrap { padding: 14px 20px; }
      .nav-wrap.scrolled { padding: 6px 32px; }
    }
    @media (max-width: 768px) {
      .nav-wrap { padding: 10px 12px; }
      .nav-wrap.scrolled { padding: 6px 12px; }
    }
    .site-header {
      max-width: 1160px;
      margin: 0 auto;
      /* Iets lichter dan de donkere secties (#0E2144) + lichte rand,
         zodat de nav overal duidelijk afsteekt en niet wegvalt */
      background: #1B2C4E;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: var(--radius-nav);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 20px;
      pointer-events: all;
      box-shadow: 0 4px 24px rgba(13,27,46,.25), 0 0 0 1px rgba(255,255,255,.04);
      transition: padding .3s ease, box-shadow .3s ease, border-radius .3s ease;
    }
    .nav-wrap.scrolled .site-header {
      padding: 7px 18px;
      border-radius: 13px;
      box-shadow: 0 4px 28px rgba(13,27,46,.38);
    }
    .logo-area {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      text-decoration: none;
    }
    .logo-icon {
      width: 34px;
      height: 34px;
      background: var(--accent);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 16px;
      color: #fff;
      flex-shrink: 0;
    }
    .logo-text {
      font-weight: 700;
      font-size: 17px;
      color: #fff;
    }
    .main-nav {
      display: flex;
      gap: 4px;
      list-style: none;
    }
    .main-nav a {
      color: rgba(255,255,255,.7);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 7px 14px;
      border-radius: 8px;
      transition: all .15s;
      cursor: pointer;
      white-space: nowrap;
    }
    .main-nav a:hover, .main-nav a.active {
      color: #fff;
      background: rgba(255,255,255,.1);
    }
    /* Nav CTA: split-pill style matching real WeReply site */
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 0;
      background: rgba(255,255,255,.92);
      color: var(--navy);
      border: none;
      padding: 6px 6px 6px 18px;
      border-radius: 50px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: all .15s;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(0,0,0,.15);
    }
    .nav-cta:hover { background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.2); }
    .nav-cta-arrow {
      width: 32px;
      height: 32px;
      background: var(--navy);
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
      margin-left: 12px;
      flex-shrink: 0;
    }
    /* Mobile hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
      padding: 4px;
    }
    .hamburger span {
      display: block;
      width: 20px;
      height: 2px;
      background: rgba(255,255,255,.8);
      border-radius: 2px;
    }
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.6);
      z-index: 800;
    }
    .mobile-menu.open { display: block; }
    .mobile-menu-inner {
      position: absolute;
      top: 0; right: 0;
      width: 260px;
      height: 100%;
      /* Lichtere tint dan de nav-balk + rand & schaduw, zodat het
         menu duidelijk losstaat en niet in de nav overloopt */
      background: #1B2C4E;
      border-left: 1px solid rgba(255,255,255,.12);
      box-shadow: -16px 0 48px rgba(0,0,0,.45);
      padding: 72px 20px 32px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .mobile-close {
      position: absolute;
      top: 16px; right: 16px;
      background: rgba(255,255,255,.1);
      border: none;
      color: #fff;
      font-size: 20px;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      cursor: pointer;
    }
    .mobile-menu-inner a {
      color: rgba(255,255,255,.8);
      text-decoration: none;
      font-size: 15px;
      font-weight: 500;
      padding: 12px 14px;
      border-radius: 8px;
      cursor: pointer;
    }
    .mobile-menu-inner a:hover { background: rgba(255,255,255,.08); color: #fff; }

    /* ─── LAYOUT HELPERS ─── */
    .section { padding: 96px 20px; }
    .section-sm { padding: 56px 20px; }
    .container { max-width: 1160px; margin: 0 auto; }
    .text-center { text-align: center; }
    .bg-alt { background: var(--page-bg2); }

    /* ─── TYPOGRAPHY ─── */
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .07em;
      margin-bottom: 14px;
    }
    .eyebrow-icon {
      width: 16px;
      height: 16px;
      background: var(--accent);
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
    }
    h1 {
      font-size: clamp(2.4rem, 5vw, 3.6rem);
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -.03em;
    }
    h2 {
      font-size: clamp(1.9rem, 3.5vw, 2.8rem);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.025em;
    }
    h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
    .grad-text {
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .text-muted { color: var(--muted); }
    p.lead {
      font-size: 17px;
      color: var(--muted);
      line-height: 1.75;
    }

    /* ─── BUTTONS ─── */
    .btn-dark {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--navy);
      color: #fff;
      padding: 13px 22px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .2s;
    }
    .btn-dark .arr {
      width: 24px;
      height: 24px;
      background: rgba(255,255,255,.15);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .btn-dark:hover { background: var(--navy3); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
    .btn-outline-dark {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      color: var(--text);
      padding: 13px 22px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 600;
      text-decoration: none;
      border: 1.5px solid var(--border);
      cursor: pointer;
      transition: all .2s;
    }
    .btn-outline-dark:hover { border-color: var(--accent); color: var(--accent); }
    .btn-white {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      color: var(--navy);
      padding: 13px 24px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .2s;
    }
    .btn-white:hover { background: var(--page-bg); transform: translateY(-1px); }
    .btn-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

    /* ════════════════════════════════════
       HERO
    ════════════════════════════════════ */
    .hero {
      padding: 56px 20px 0;
      text-align: center;
    }
    .hero-inner { max-width: 1160px; margin: 0 auto; }
    .hero-channels {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 28px;
    }
    .ch {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 12px;
      color: var(--muted);
      background: var(--white);
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 20px;
    }
    .ch svg { width: 13px; height: 13px; flex-shrink: 0; }
    .hero h1 { margin-bottom: 20px; }
    .hero p.lead { max-width: 600px; margin: 0 auto 32px; }
    .hero-rating {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 14px;
      font-size: 13px;
      margin-bottom: 28px;
      box-shadow: var(--shadow);
    }
    .stars { color: #F59E0B; }
    .hero-ctas { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
    .hero-micro {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .hero-micro span {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 13px;
      color: var(--muted);
    }
    .hero-micro .chk { color: var(--green); font-weight: 700; }
    .hero-screenshot-wrap {
      margin-top: 48px;
      position: relative;
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-screenshot {
      width: 100%;
      border-radius: 16px 16px 0 0;
      box-shadow: 0 -16px 60px rgba(13,27,46,.12), 0 0 0 1px var(--border);
      display: block;
    }

    /* ════════════════════════════════════
       LOGO BAR
    ════════════════════════════════════ */
    .logo-bar {
      background: var(--navy);
    }
    .logo-bar-inner {
      max-width: 1160px;
      margin: 0 auto;
      padding: 52px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 28px;
    }
    .lb-label {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: rgba(255,255,255,.35);
    }
    .logo-marquee-wrap {
      overflow: hidden;
      width: 100%;
      mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .logo-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: max-content;
      animation: marqueeScroll 28s linear infinite;
    }
    .logo-row:hover { animation-play-state: paused; }
    @keyframes marqueeScroll {
      0%   { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
    .logo-item {
      background: #fff;
      border-radius: 12px;
      padding: 14px 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: box-shadow .2s;
      min-width: 110px;
      flex-shrink: 0;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
    }
    .logo-row img {
      height: 30px;
      width: auto;
      object-fit: contain;
      filter: grayscale(100%);
      opacity: .7;
      transition: filter .2s, opacity .2s;
    }
    .logo-item:hover img {
      filter: grayscale(0%);
      opacity: 1;
    }
    .logo-text-brand {
      font-weight: 800;
      font-size: 18px;
      letter-spacing: -.02em;
      color: var(--navy);
      opacity: .55;
      white-space: nowrap;
      transition: opacity .2s;
    }
    .logo-item:hover .logo-text-brand { opacity: 1; }

    /* ════════════════════════════════════
       AUTOMATE 90%, dark gradient section
    ════════════════════════════════════ */
    .automate-dark {
      background: radial-gradient(ellipse 80% 100% at 70% 50%, #3B1F6E 0%, #1A1040 40%, #0E2144 100%);
      border-radius: 20px;
      overflow: hidden;
    }
    .automate-dark-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      align-items: center;
      min-height: 460px;
    }
    .automate-text-col {
      padding: 64px 56px;
    }
    .automate-text-col .eyebrow { color: rgba(255,255,255,.5); }
    .automate-text-col h2 {
      color: #fff;
      font-size: clamp(1.9rem, 3vw, 2.6rem);
      margin-bottom: 16px;
      line-height: 1.15;
    }
    .automate-text-col .blue-subhead {
      font-size: 20px;
      font-weight: 600;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 16px;
    }
    .automate-text-col p {
      font-size: 15px;
      color: rgba(255,255,255,.55);
      line-height: 1.75;
    }
    .automate-widget-col {
      padding: 48px 40px 48px 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    .automate-widget-label {
      font-size: 12px;
      font-weight: 600;
      color: rgba(255,255,255,.5);
      text-transform: uppercase;
      letter-spacing: .07em;
    }
    /* Inline widget card (visual mockup of the real WeReply widget) */
    .widget-card {
      background: var(--white);
      border-radius: 16px;
      overflow: hidden;
      width: 100%;
      max-width: 360px;
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
    }
    .wc-header {
      background: var(--accent);
      padding: 12px 16px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .wc-avatar {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,.3);
      display: flex; align-items: center; justify-content: center;
      font-size: 14px; color: #fff; font-weight: 700;
      overflow: hidden; flex-shrink: 0;
    }
    .wc-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .wc-name { font-weight: 600; font-size: 14px; color: #fff; }
    .wc-status-dot { width: 8px; height: 8px; background: #4ADE80; border-radius: 50%; margin-left: auto; }
    .wc-messages {
      padding: 16px;
      background: #F8FAFC;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .wc-msg-agent {
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    .wc-msg-av {
      width: 28px; height: 28px;
      background: var(--accent);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; color: #fff; font-weight: 700;
      flex-shrink: 0;
    }
    .wc-bubble-agent {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 0 12px 12px 12px;
      padding: 10px 13px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.5;
      box-shadow: var(--shadow);
    }
    .wc-type-hint {
      text-align: center;
      color: var(--light);
      font-size: 12px;
      padding: 8px 0;
    }
    .wc-input-area {
      border-top: 1px solid var(--border);
      padding: 10px 12px;
      display: flex;
      gap: 8px;
      background: #fff;
    }
    .wc-inp {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      color: var(--text);
      background: var(--page-bg);
      font-family: inherit;
      outline: none;
    }
    .wc-inp:focus { border-color: var(--accent); }
    .wc-send-btn {
      width: 34px; height: 34px;
      background: var(--accent);
      border: none;
      border-radius: 8px;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
      flex-shrink: 0;
    }
    .wc-send-btn:hover { background: #3A6EC0; }
    .wc-footer {
      padding: 6px 12px;
      text-align: center;
      font-size: 10px;
      color: var(--light);
      border-top: 1px solid var(--border);
      background: #fff;
    }
    .wc-footer a { color: var(--light); }

    /* Generic two-col for other sections */
    .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .two-col.reverse { direction: rtl; }
    .two-col.reverse > * { direction: ltr; }
    .col-text h2 { margin-bottom: 16px; }
    .col-text p.lead { margin-bottom: 24px; }
    .col-img img {
      width: 100%;
      border-radius: var(--radius);
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
      display: block;
    }

    /* ════════════════════════════════════
       CUSTOMERS DON'T WAIT, dark panel left
    ════════════════════════════════════ */
    .chaos-section { }
    .chaos-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .chaos-panel {
      background: var(--navy);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .chaos-panel img {
      width: 100%;
      display: block;
      border-radius: var(--radius);
    }
    .chaos-text h2 { margin-bottom: 16px; }
    .chaos-text p.lead { margin-bottom: 8px; }

    /* ════════════════════════════════════
       CLARITY, two-col with screenshot
    ════════════════════════════════════ */
    .clarity-section { background: var(--page-bg2); overflow-x: clip; }
    /* Schuif-track netjes binnen het paneel houden (geen bleed rechts) */
    #baPanels { max-width: 100%; }
    .col-img { max-width: 100%; overflow: hidden; }

    /* ════════════════════════════════════
       FEATURE CARDS, dark navy
    ════════════════════════════════════ */
    .features-section { }
    .features-header {
      text-align: center;
      margin-bottom: 40px;
    }
    .features-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    .feat-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .2s, background .2s, box-shadow .2s;
      cursor: default;
    }
    .feat-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 40px rgba(75,127,212,.12);
      border-color: rgba(75,127,212,.25);
    }
    .feat-img { display: none; }
    .feat-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      transition: transform .2s, background .2s, box-shadow .2s;
      cursor: default;
      position: relative;
    }
    .feat-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--grad);
      opacity: 0;
      transition: opacity .2s;
    }
    .feat-card:hover::before { opacity: 1; }
    /* feat-card hover consolidated above */
    .feat-body { padding: 28px 26px 30px; }
    .feat-icon {
      width: 46px;
      height: 46px;
      background: rgba(75,127,212,.15);
      border: 1px solid rgba(75,127,212,.25);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
    }
    .feat-icon svg {
      width: 22px;
      height: 22px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 1.75;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .feat-body h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 10px;
    }
    .feat-body p {
      font-size: 14px;
      color: var(--muted);
      line-height: 1.7;
    }

    /* Mid-page CTA */
    .mid-cta {
      text-align: center;
      padding: 32px 20px;
      border-top: 1px solid var(--border);
    }
    .mid-cta p {
      font-size: 15px;
      color: var(--muted);
      margin-bottom: 16px;
    }

    /* ════════════════════════════════════
       META COMMENT CALLOUT
    ════════════════════════════════════ */
    .meta-callout {
      background: var(--navy);
      border-radius: var(--radius);
      padding: 36px;
      margin-top: 20px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: center;
    }
    .meta-text .eyebrow { color: rgba(255,255,255,.5); }
    .meta-text h3 { color: #fff; font-size: 1.3rem; margin-bottom: 10px; }
    .meta-text p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: 20px; }

    /* Meta feed */
    .meta-feed { display: flex; flex-direction: column; gap: 10px; }
    .meta-tabs {
      display: flex; gap: 6px; margin-bottom: 10px;
    }
    .meta-tab {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 6px 14px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      color: rgba(255,255,255,.5);
      cursor: pointer;
      transition: all .15s;
    }
    .meta-tab.active { color: #fff; }
    .meta-tab.active-fb  { background: #1877F2; border-color: #1877F2; }
    .meta-tab.active-ig  { background: linear-gradient(135deg,#833ab4,#e1306c,#fcb045); border-color: transparent; }
    .meta-tab.active-fb svg, .meta-tab.active-ig svg { filter: brightness(0) invert(1); }
    .meta-comment-list { display: flex; flex-direction: column; gap: 8px; min-height: 470px; justify-content: flex-start; }
    @media (max-width: 768px) {
      /* Mobiel: compact, past in één scherm; nieuwste comment onderaan zichtbaar */
      .meta-comment-list { min-height: 0; height: 300px; overflow: hidden; justify-content: flex-end; }
    }
    .meta-comment-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 14px 16px;
      transition: background .2s, opacity .4s;
      box-shadow: var(--shadow);
    }
    .meta-comment-card.blurred {
      opacity: .45;
      background: var(--page-bg);
    }
    .mc-top {
      display: flex; align-items: center; gap: 9px; margin-bottom: 7px;
    }
    .mc-avatar {
      width: 32px; height: 32px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .mc-info { flex: 1; display: flex; flex-direction: column; gap: 1px; }
    .mc-name { font-size: 13px; font-weight: 600; color: var(--text); }
    .mc-time { font-size: 11px; color: var(--light); }
    .mc-text { font-size: 13px; color: var(--muted); line-height: 1.55; margin-bottom: 7px; }
    .mc-source {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; color: var(--light);
    }
    .mc-ai-reply {
      margin-top: 10px;
      background: rgba(75,127,212,.05);
      border: 1px solid rgba(75,127,212,.18);
      border-left: 3px solid var(--accent);
      border-radius: 0 8px 8px 0;
      padding: 10px 12px;
    }
    .mc-ai-label {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 700; color: var(--accent);
      margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em;
    }
    .mc-ai-dot {
      width: 6px; height: 6px; background: var(--accent);
      border-radius: 50%; animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }
    .mc-ai-reply p { font-size: 13px; color: var(--text); line-height: 1.55; }

    .mbadge {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 10px; font-weight: 700;
      padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0;
      border: 1px solid transparent;
    }
    .mbadge-red   { background: rgba(239,68,68,.08);   color: #dc2626; border-color: rgba(239,68,68,.2); }
    .mbadge-amber { background: rgba(245,158,11,.08);  color: #b45309; border-color: rgba(245,158,11,.2); }
    .mbadge-green { background: rgba(22,197,94,.08);   color: #16a34a; border-color: rgba(22,197,94,.2); }

    /* ════════════════════════════════════
       LIVE CHAT DEMO
    ════════════════════════════════════ */
    .demo-section { background: var(--page-bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
    .demo-header { text-align: center; margin-bottom: 48px; }
    .demo-header h2 { margin-bottom: 10px; }
    .demo-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      align-items: start;
    }
    /* Chat widget styled like WeReply inbox */
    .demo-widget {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
    }
    .dw-header {
      background: var(--navy);
      padding: 13px 18px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .dw-logo {
      width: 30px; height: 30px;
      background: var(--accent);
      border-radius: 7px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 14px;
      color: #fff;
      flex-shrink: 0;
    }
    .dw-name { font-weight: 600; font-size: 13px; color: #fff; }
    .dw-status { font-size: 11px; color: rgba(255,255,255,.6); }
    .dw-msgs {
      padding: 16px;
      min-height: 240px;
      max-height: 280px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: var(--page-bg);
    }
    .dm { max-width: 80%; }
    .dm.c { align-self: flex-end; }
    .dm.a { align-self: flex-start; }
    .bubble { padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
    .dm.c .bubble { background: var(--navy); color: #fff; border-radius: 12px 12px 2px 12px; }
    .dm.a .bubble { background: var(--white); color: var(--text); border: 1px solid var(--border); border-radius: 12px 12px 12px 2px; }
    .dm-time { font-size: 10px; color: var(--light); margin-top: 3px; }
    .dm.c .dm-time { text-align: right; }
    .typing { display: flex; gap: 4px; align-items: center; padding: 9px 13px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; width: fit-content; }
    .typing span { width: 5px; height: 5px; background: var(--light); border-radius: 50%; animation: blink 1.2s infinite; }
    .typing span:nth-child(2) { animation-delay: .2s; }
    .typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes blink { 0%,60%,100%{opacity:.3;transform:scale(.8);}30%{opacity:1;transform:scale(1);} }
    .dw-bar {
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 7px;
      background: var(--white);
    }
    .dw-inp {
      flex: 1;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      font-family: inherit;
      color: var(--text);
      background: var(--page-bg);
      outline: none;
      transition: border-color .15s;
    }
    .dw-inp:focus { border-color: var(--accent); background: var(--white); }
    .dw-send {
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
      white-space: nowrap;
    }
    .dw-send:hover { background: var(--navy3); }
    /* AI panel */
    .ai-panel {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }
    .ai-ph {
      background: var(--page-bg);
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-badge {
      background: linear-gradient(135deg, var(--accent), #7C3AED);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      text-transform: uppercase;
    }
    .ai-ph-title { font-weight: 600; font-size: 13px; color: var(--text); }
    .ai-body { padding: 16px; }
    .ai-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 6px; }
    .ai-draft {
      background: var(--page-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px;
      font-size: 13px;
      color: var(--text);
      line-height: 1.6;
      margin-bottom: 12px;
      min-height: 68px;
    }
    .ai-btns { display: flex; gap: 7px; margin-bottom: 14px; }
    .ai-approve {
      flex: 1;
      background: var(--green);
      color: #fff;
      border: none;
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .ai-approve:hover { opacity: .9; }
    .ai-edit {
      flex: 1;
      background: var(--page-bg);
      border: 1px solid var(--border);
      color: var(--muted);
      padding: 8px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
    }
    .shopify-box {
      background: var(--page-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 13px;
    }
    .shopify-hdr {
      font-size: 11px;
      font-weight: 700;
      color: #16A34A;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .sp-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 3px;
    }
    .sp-row strong { color: var(--text); }
    .demo-hint { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.65; }
    .demo-hint strong { color: var(--text); display: block; font-size: 15px; margin-bottom: 6px; }
    .demo-hint ul { padding-left: 16px; margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }

    /* ════════════════════════════════════
       STATS, blue bar
    ════════════════════════════════════ */
    .stats-bar { background: var(--navy); }
    .stats-grid {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
    .stat-cell {
      padding: 52px 32px;
      text-align: center;
      border-right: 1px solid rgba(255,255,255,.1);
    }
    .stat-cell:last-child { border-right: none; }
    .stat-num {
      font-size: 3rem;
      font-weight: 800;
      line-height: 1;
      margin-bottom: 8px;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .stat-lbl { font-size: 14px; color: var(--muted); }

    /* ════════════════════════════════════
       TESTIMONIALS
    ════════════════════════════════════ */
    .t-header { text-align: center; margin-bottom: 40px; }
    .t-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .t-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: var(--shadow);
      transition: box-shadow .2s, transform .2s;
    }
    .t-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .t-stars { color: #F59E0B; font-size: 15px; margin-bottom: 12px; }
    .t-quote { font-size: 14px; color: var(--muted); line-height: 1.75; margin-bottom: 18px; font-style: italic; }
    .t-author { display: flex; align-items: center; gap: 10px; }
    .t-av {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: var(--page-bg-deep, var(--page-bg2));
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 15px; color: var(--accent);
      border: 2px solid var(--border);
      overflow: hidden;
      flex-shrink: 0;
    }
    .t-av img { width: 100%; height: 100%; object-fit: cover; }
    .t-name { font-weight: 600; font-size: 13px; }
    .t-role { font-size: 12px; color: var(--light); }
    .t-ph {
      border: 1.5px dashed var(--border);
      border-radius: var(--radius);
      padding: 26px;
      text-align: center;
      color: var(--muted);
      font-size: 13px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
    }
    .t-ph strong { color: var(--text); font-size: 14px; }
    .t-ph-icon { font-size: 26px; }

    /* ════════════════════════════════════
       PRICING
    ════════════════════════════════════ */
    .pricing-section { background: var(--page-bg2); }
    .pricing-header { text-align: center; margin-bottom: 40px; }
    .pricing-header h2 { margin-bottom: 8px; }
    .pricing-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      max-width: 1000px;
      margin: 0 auto;
    }
    .p-card {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      position: relative;
      transition: box-shadow .2s, transform .2s;
    }
    .p-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
    .p-card.featured {
      background: var(--navy);
      border-color: var(--navy);
    }
    .p-badge {
      position: absolute;
      top: -11px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--grad);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 14px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .p-tier { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--accent); margin-bottom: 5px; }
    .p-card.featured .p-tier { color: rgba(255,255,255,.6); }
    .p-desc { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
    .p-card.featured .p-desc { color: rgba(255,255,255,.55); }
    .p-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
    .p-curr { font-size: 16px; font-weight: 700; color: var(--muted); }
    .p-amt { font-size: 44px; font-weight: 800; line-height: 1; color: var(--text); }
    .p-card.featured .p-amt { color: #fff; }
    .p-card.featured .p-curr { color: rgba(255,255,255,.6); }
    .p-period { font-size: 13px; color: var(--muted); }
    .p-card.featured .p-period { color: rgba(255,255,255,.5); }
    .p-ai {
      font-size: 11px;
      color: var(--light);
      background: var(--page-bg);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 5px 9px;
      margin: 9px 0 16px;
    }
    .p-card.featured .p-ai { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); color: rgba(255,255,255,.45); }
    .p-div { height: 1px; background: var(--border); margin: 14px 0; }
    .p-card.featured .p-div { background: rgba(255,255,255,.1); }
    .p-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
    .p-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--muted); }
    .p-card.featured .p-list li { color: rgba(255,255,255,.65); }
    .p-list li::before { content: '✓'; color: var(--green); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
    .p-note { text-align: center; margin-top: 18px; font-size: 13px; color: var(--muted); }
    .p-note a { color: var(--accent); cursor: pointer; }

    /* NOT SURE */
    .not-sure {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
    }
    .not-sure-inner { max-width: 680px; margin: 0 auto; text-align: center; }
    .not-sure-inner h2 { margin-bottom: 12px; }
    .not-sure-inner p.lead { margin-bottom: 28px; }

    /* FINAL CTA, dark navy */
    .final-cta { background: var(--navy); text-align: center; }
    .final-cta h2 { color: #fff; margin-bottom: 14px; }
    .final-cta p.lead { color: rgba(255,255,255,.55); max-width: 520px; margin: 0 auto 32px; }
    .cta-scarcity { font-size: 13px; color: rgba(255,255,255,.35); margin-top: 16px; }

    /* ════════════════════════════════════
       ABOUT PAGE
    ════════════════════════════════════ */
    .about-hero { text-align: center; }
    .about-hero h1 { margin-bottom: 18px; }
    @media (max-width: 768px) { .about-hero { padding-top: 140px !important; } }
    .about-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      margin-top: 48px;
    }
    .astat { background: var(--white); padding: 36px 20px; text-align: center; }
    .astat-num { font-size: 2.6rem; font-weight: 800; line-height: 1; margin-bottom: 7px; }
    .astat-lbl { font-size: 13px; color: var(--muted); }
    .story-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 72px; align-items: start; }
    .story-body h2 { margin-bottom: 16px; }
    .story-body p { font-size: 15px; color: var(--muted); margin-bottom: 15px; line-height: 1.8; }
    .story-body strong { color: var(--text); font-weight: 600; }
    .pull-q {
      border-left: 3px solid var(--accent);
      background: var(--white);
      border-radius: 0 8px 8px 0;
      padding: 14px 18px;
      margin: 22px 0;
      font-size: 16px;
      font-style: italic;
      color: var(--text);
      line-height: 1.6;
      box-shadow: var(--shadow);
    }
    .philo-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 22px;
      margin-bottom: 14px;
      box-shadow: var(--shadow);
    }
    .philo-card h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--light); margin-bottom: 12px; }
    .philo-item { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 9px; font-size: 13px; color: var(--muted); }
    .philo-item span { font-size: 16px; flex-shrink: 0; }
    .founders-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
    .fc {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
      transition: transform .2s, box-shadow .2s;
    }
    .fc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .fc img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: center; display: block; }
    .fc-body { padding: 14px; text-align: center; }
    .fc-name { font-weight: 700; font-size: 14px; margin-bottom: 2px; }
    .fc-role { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 5px; }
    .fc-desc { font-size: 11px; color: var(--muted); line-height: 1.6; }
    .about-cta { background: var(--navy); text-align: center; }
    .about-cta h2 { color: #fff; margin-bottom: 12px; }
    .about-cta p.lead { color: rgba(255,255,255,.55); max-width: 460px; margin: 0 auto 28px; }

    /* ════════════════════════════════════
       CONTACT PAGE
    ════════════════════════════════════ */
    .contact-intro { text-align: center; padding-bottom: 48px; }
    .contact-intro h1 { margin-bottom: 12px; }
    .contact-grid {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 48px;
      align-items: start;
    }
    .cal-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      box-shadow: var(--shadow);
    }
    .cal-card h3 { margin-bottom: 6px; }
    .cal-card > p { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
    .cal-ph {
      background: var(--page-bg);
      border: 1.5px dashed var(--border);
      border-radius: 10px;
      padding: 32px;
      text-align: center;
      font-size: 13px;
      color: var(--muted);
    }
    .cal-ph strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; }
    .cal-code {
      background: #F1F5F9;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px;
      font-size: 11px;
      color: #7C3AED;
      font-family: monospace;
      text-align: left;
      margin-top: 10px;
      overflow-x: auto;
      line-height: 1.6;
    }
    .divider-or { text-align: center; font-size: 12px; color: var(--light); margin: 14px 0; }
    .cform {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 24px;
      box-shadow: var(--shadow);
    }
    .cform h3 { margin-bottom: 14px; }
    .fg { margin-bottom: 11px; }
    .fg label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
    .fg input, .fg textarea {
      width: 100%;
      background: var(--page-bg);
      border: 1.5px solid var(--border);
      color: var(--text);
      padding: 9px 12px;
      border-radius: 8px;
      font-size: 13px;
      font-family: inherit;
      transition: border-color .15s;
    }
    .fg input:focus, .fg textarea:focus { outline: none; border-color: var(--accent); background: var(--white); }
    .fg textarea { resize: vertical; min-height: 90px; }
    .trust-col { }
    .trust-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
      margin-bottom: 12px;
      box-shadow: var(--shadow);
    }
    .trust-card h3 { font-size: 13px; font-weight: 700; margin-bottom: 13px; }
    .tr { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 11px; }
    .t-ico { width: 22px; height: 22px; background: rgba(22,163,74,.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--green); font-size: 11px; flex-shrink: 0; margin-top: 2px; }
    .t-txt strong { display: block; font-size: 12px; }
    .t-txt span { font-size: 12px; color: var(--muted); }
    .cq {
      background: var(--page-bg);
      border-left: 3px solid var(--accent);
      border-radius: 0 8px 8px 0;
      padding: 12px 14px;
      font-size: 13px;
      font-style: italic;
      color: var(--muted);
      margin-bottom: 12px;
    }
    .cq cite { display: block; font-style: normal; font-weight: 600; font-size: 12px; color: var(--text); margin-top: 6px; }
    .urgency-box {
      background: #FEF9C3;
      border: 1px solid #FDE047;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 12px;
      color: #713F12;
    }

    /* ════════════════════════════════════
       FOOTER
    ════════════════════════════════════ */
    .footer { background: var(--navy); padding: 56px 20px 28px; }
    .footer-inner {
      max-width: 1160px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
    }
    .footer-brand .footer-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
    }
    .footer-brand p { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; }
    .footer-col h4 { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.3); margin-bottom: 12px; }
    .footer-col a { display: block; font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; margin-bottom: 8px; transition: color .15s; cursor: pointer; }
    .footer-col a:hover { color: #fff; }
    .footer-bottom {
      max-width: 1160px;
      margin: 32px auto 0;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .footer-bottom span { font-size: 12px; color: rgba(255,255,255,.3); }

    /* ════════════════════════════════════
       MOBILE, v8 improved
    ════════════════════════════════════ */

    /* ── Sticky bottom CTA bar ── */
    .mobile-cta-bar {
      display: none;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 950;
      background: var(--navy);
      padding: 12px 16px;
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
      box-shadow: 0 -4px 24px rgba(13,27,46,.28);
      border-top: 1px solid rgba(255,255,255,.08);
      transform: translateY(100%);
      transition: transform .3s ease;
    }
    .mobile-cta-bar.visible { transform: translateY(0); }
    .mobile-cta-bar-inner {
      display: flex;
      gap: 10px;
      align-items: center;
      max-width: 480px;
      margin: 0 auto;
    }
    .mcb-primary {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: linear-gradient(135deg, #4B7FD4, #56C2C6);
      color: #fff;
      font-size: 15px;
      font-weight: 700;
      padding: 14px 20px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      min-height: 50px;
      font-family: inherit;
    }
    .mcb-secondary {
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.1);
      color: rgba(255,255,255,.8);
      font-size: 13px;
      font-weight: 600;
      padding: 14px 18px;
      border-radius: 50px;
      border: 1px solid rgba(255,255,255,.15);
      cursor: pointer;
      white-space: nowrap;
      min-height: 50px;
      font-family: inherit;
    }

    /* ── Scroll-snap swipe hint ── */
    .swipe-hint {
      display: none;
      align-items: center;
      gap: 5px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 500;
      margin-top: 10px;
    }
    .swipe-hint svg { width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; }

    @media (max-width: 768px) {
      /* Sticky bar verwijderd */

      /* Nav */
      .nav-wrap { top: 10px; padding: 0 12px; }
      .main-nav { display: none; }
      .hamburger { display: flex; }

      /* Sections, tighter */
      .section { padding: 52px 16px; }
      .section-sm { padding: 32px 16px; }

      /* Hero */
      .hero { padding: 40px 16px 0; }
      .hero h1 { font-size: 2rem; }
      .hero-channels { gap: 4px; }
      .hero p.lead { font-size: 15px; }

      /* Hero CTAs, full-width stacked */
      .hero-ctas { flex-direction: column; gap: 10px; align-items: stretch; }
      .hero-ctas .btn-grad,
      .hero-ctas .btn-outline-dark { width: 100%; justify-content: center; font-size: 16px; padding: 15px 24px; min-height: 52px; }

      /* Two-col layouts */
      .two-col, .chaos-inner, .story-grid { grid-template-columns: 1fr; gap: 28px; }
      .automate-dark-inner { grid-template-columns: 1fr; }
      .automate-text-col { padding: 36px 20px 20px; }
      .automate-widget-col { padding: 0 20px 36px; align-items: center; }
      .widget-card { max-width: 100%; }
      .two-col.reverse { direction: ltr; }

      /* Features, horizontal swipe carousel */
      .features-grid {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 4px;
        scrollbar-width: none;
        margin-left: -16px; margin-right: -16px;
        padding-left: 16px; padding-right: 16px;
      }
      .features-grid::-webkit-scrollbar { display: none; }
      .feat-card { min-width: 72vw; max-width: 300px; flex-shrink: 0; scroll-snap-align: start; }

      /* Testimonials, horizontal swipe carousel */
      .t-grid {
        display: flex !important;
        grid-template-columns: unset !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding-bottom: 4px;
        scrollbar-width: none;
        margin-left: -16px; margin-right: -16px;
        padding-left: 16px; padding-right: 16px;
      }
      .t-grid::-webkit-scrollbar { display: none; }
      .t-card-v7 { min-width: 78vw; max-width: 320px; flex-shrink: 0; scroll-snap-align: start; margin-top: 0 !important; }

      /* Pricing, wordt volledig geregeld door het V13 master blok onderaan */
      /* Prijs: inline font-size 46px → 32px op mobiel */
      .p-amt { font-size: 32px !important; }
      .p-curr { font-size: 14px !important; }
      /* AI add-on box compacter */
      .p-ai { padding: 4px 8px !important; margin: 6px 0 12px !important; font-size: 10px !important; }
      /* Feature list: iets kleiner */
      .p-list { gap: 6px !important; margin-bottom: 16px !important; }
      .p-list li { font-size: 12px !important; }
      /* Prijs sectie minder ruimte */
      .p-desc { margin-bottom: 10px !important; font-size: 12px !important; }
      .p-div { margin: 10px 0 !important; }

      /* Show swipe hints */
      .swipe-hint { display: flex; }

      /* Other grids */
      .meta-callout { grid-template-columns: 1fr; gap: 24px; }
      .demo-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; }
      .stat-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 36px 20px; }
      .stat-cell:last-child { border-bottom: none; }
      .about-stats { grid-template-columns: 1fr; }
      .founders-grid { grid-template-columns: 1fr 1fr; }
      .contact-grid { grid-template-columns: 1fr; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
      .footer-brand { grid-column: 1/-1; }
      .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

      /* Buttons, touch-friendly min height */
      .btn-row { flex-direction: column; align-items: stretch; }
      .btn-dark, .btn-white, .btn-outline-dark, .btn-grad { justify-content: center; min-height: 48px; }
      .nav-cta { min-height: 40px; }

      /* How it works, stack vertically */
      #how-it-works [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
      #how-it-works [style*="position:absolute"][style*="height:2px"] { display: none !important; }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 1.85rem; }
      .hero-stats-row { flex-direction: column; }
      .hsr-cell { border-right: none !important; border-bottom: 1px solid var(--border); }
      .hsr-cell:last-child { border-bottom: none; }
    }

    /* ── FADE-IN ANIMATIES ── */
    .fade-in {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-in.delay-1 { transition-delay: .1s; }
    .fade-in.delay-2 { transition-delay: .2s; }
    .fade-in.delay-3 { transition-delay: .3s; }
    .fade-in.delay-4 { transition-delay: .4s; }

    /* ── SCROLL HINT ── */
    .scroll-hint {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin: 32px auto 0;
      cursor: pointer;
      opacity: .5;
      transition: opacity .2s;
      width: fit-content;
    }
    .scroll-hint:hover { opacity: .9; }
    .scroll-hint span { font-size: 11px; color: var(--muted); letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
    .scroll-hint svg { animation: bounce 2s ease-in-out infinite; }
    @keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

    /* ── META COMMENT ANIMATIES ── */
    .mc-card-enter {
      opacity: 0;
      transform: translateY(14px) scale(.98);
      transition: opacity .4s ease, transform .4s ease;
    }
    .mc-card-enter.mc-visible {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .mc-badge-anim {
      opacity: 0;
      transform: scale(.75);
      transition: opacity .3s ease, transform .3s ease;
    }
    .mc-badge-anim.show {
      opacity: 1;
      transform: scale(1);
    }
    .mc-blur-anim {
      transition: opacity .4s ease;
    }
    .mc-blur-anim.blurred { opacity: .45; }

    /* ── BACK TO TOP ── */
    .back-to-top {
      position: fixed;
      bottom: 28px;
      right: 28px;
      width: 44px;
      height: 44px;
      background: var(--navy);
      color: #fff;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(13,27,46,.3);
      opacity: 0;
      transform: translateY(10px);
      transition: opacity .3s ease, transform .3s ease;
      z-index: 800;
      pointer-events: none;
    }
    .back-to-top.visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: all;
    }
    .back-to-top:hover { background: var(--navy3); }

    /* ══ V7 UX IMPROVEMENTS ══ */

    /* Gradient primary button */
    .btn-grad {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--grad);
      color: #fff;
      padding: 14px 26px;
      border-radius: 50px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      border: none;
      cursor: pointer;
      transition: all .2s;
      box-shadow: 0 4px 20px rgba(75,127,212,.35);
    }
    .btn-grad .arr {
      width: 26px; height: 26px;
      background: rgba(255,255,255,.22);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px;
    }
    .btn-grad:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(75,127,212,.45);
      filter: brightness(1.05);
    }

    /* Hero v7, clean trust bar */
    .hero-trust-bar {
      display: inline-flex;
      align-items: center;
      gap: 16px;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 8px 20px 8px 8px;
      margin-bottom: 32px;
      box-shadow: var(--shadow);
      flex-wrap: wrap;
      justify-content: center;
    }
    .hero-trust-stars {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--page-bg);
      border: 1px solid var(--border);
      border-radius: 50px;
      padding: 5px 12px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
    }
    .hero-trust-sep { width: 1px; height: 16px; background: var(--border); }
    .hero-trust-item {
      display: flex; align-items: center; gap: 5px;
      font-size: 12px; color: var(--muted); white-space: nowrap;
    }
    .hero-trust-item img { width: 14px; height: 14px; opacity: .7; }

    /* Hero stats bar, compact 3-stat row */
    .hero-stats-row {
      display: inline-flex;
      align-items: stretch;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow);
      margin-bottom: 32px;
    }
    .hsr-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 20px;
      border-right: 1px solid var(--border);
    }
    .hsr-cell:last-child { border-right: none; }
    .hsr-num {
      font-size: 24px;
      font-weight: 800;
      line-height: 1;
      background: var(--grad);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hsr-lbl {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.35;
      max-width: 80px;
    }
    @media (max-width: 600px) {
      .hero-stats-row { flex-direction: column; border-radius: var(--radius); }
      .hsr-cell { border-right: none; border-bottom: 1px solid var(--border); }
      .hsr-cell:last-child { border-bottom: none; }
    }

    /* Feature cards v7, always-visible accent top border */
    .feat-card::before { opacity: 0.25 !important; }
    .feat-card:hover::before { opacity: 1 !important; }

    /* Feature card accent colors per card */
    .feat-card[data-accent="teal"]   .feat-icon { background: rgba(86,194,198,.1); border-color: rgba(86,194,198,.2); }
    .feat-card[data-accent="teal"]   .feat-icon svg { stroke: #0891B2; }
    .feat-card[data-accent="purple"] .feat-icon { background: rgba(124,58,237,.08); border-color: rgba(124,58,237,.2); }
    .feat-card[data-accent="purple"] .feat-icon svg { stroke: #7C3AED; }
    .feat-card[data-accent="green"]  .feat-icon { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.2); }
    .feat-card[data-accent="green"]  .feat-icon svg { stroke: #16a34a; }
    .feat-card[data-accent="orange"] .feat-icon { background: rgba(249,115,22,.08); border-color: rgba(249,115,22,.2); }
    .feat-card[data-accent="orange"] .feat-icon svg { stroke: #EA580C; }
    .feat-card[data-accent="pink"]   .feat-icon { background: rgba(236,72,153,.08); border-color: rgba(236,72,153,.2); }
    .feat-card[data-accent="pink"]   .feat-icon svg { stroke: #DB2777; }

    /* Step cards v7, big background number */
    .step-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 36px 28px 32px;
      text-align: center;
      position: relative;
      z-index: 1;
      box-shadow: var(--shadow);
      overflow: hidden;
      transition: transform .2s, box-shadow .2s;
    }
    .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
    .step-card.dark { background: var(--navy); border-color: var(--navy); }
    .step-bg-num {
      position: absolute;
      bottom: -20px; right: -8px;
      font-size: 120px;
      font-weight: 900;
      line-height: 1;
      color: rgba(0,0,0,.04);
      pointer-events: none;
      user-select: none;
    }
    .step-card.dark .step-bg-num { color: rgba(255,255,255,.04); }
    .step-icon-wrap {
      width: 56px; height: 56px;
      background: linear-gradient(135deg, rgba(75,127,212,.12), rgba(86,194,198,.12));
      border: 1.5px solid rgba(75,127,212,.2);
      border-radius: 16px;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 10px;
    }
    .step-card.dark .step-icon-wrap {
      background: rgba(255,255,255,.08);
      border-color: rgba(255,255,255,.15);
    }
    .step-num-label {
      font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--accent); margin-bottom: 14px;
    }
    .step-card.dark .step-num-label { color: rgba(255,255,255,.4); }

    /* Testimonial v7, 2-col big quote style */
    .t-card-v7 {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px;
      box-shadow: var(--shadow);
      transition: box-shadow .2s, transform .2s;
      position: relative;
      overflow: hidden;
    }
    .t-card-v7::before {
      content: '"';
      position: absolute;
      top: -10px; left: 24px;
      font-size: 120px;
      font-weight: 900;
      color: rgba(75,127,212,.08);
      line-height: 1;
      pointer-events: none;
    }
    .t-card-v7:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
    .t-result-pill {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(34,197,94,.08);
      border: 1px solid rgba(34,197,94,.2);
      border-radius: 50px;
      padding: 5px 14px;
      font-size: 12px; font-weight: 700; color: #16a34a;
      margin-bottom: 18px;
    }
    .t-result-pill svg { width: 12px; height: 12px; stroke: #16a34a; fill: none; stroke-width: 2.5; stroke-linecap: round; }

    /* Section divider gradient */
    .section-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
    }

    /* Pricing v7, smooth toggle */
    .pt-toggle {
      display: inline-flex;
      align-items: center;
      gap: 0;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: 4px;
      margin-top: 28px;
      box-shadow: var(--shadow);
      position: relative;
    }
    .pt-btn {
      padding: 9px 24px;
      border-radius: 50px;
      border: none;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      color: var(--muted);
      transition: all .25s;
      position: relative;
      z-index: 1;
      white-space: nowrap;
    }
    .pt-btn.active {
      background: var(--navy);
      color: #fff;
      box-shadow: 0 2px 10px rgba(14,33,68,.2);
    }
    .pt-save-badge {
      display: inline-flex; align-items: center;
      background: var(--grad); color: #fff;
      font-size: 10px; font-weight: 700;
      padding: 2px 8px; border-radius: 20px;
      margin-left: 6px; white-space: nowrap;
    }

    /* ── Pricing mobile scroll indicator ── */
    .pricing-scroll-hint {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 12px 0 0;
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
    }
    .pricing-scroll-hint .psh-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--border);
      transition: background .2s;
    }
    .pricing-scroll-hint .psh-dot.active { background: var(--accent); }

    @media (max-width: 768px) {
      /* Toggle: full width, bigger touch area */
      .pt-toggle {
        display: flex;
        width: 100%;
        max-width: 300px;
        margin: 20px auto 0;
      }
      .pt-btn {
        flex: 1;
        padding: 12px 16px;
        font-size: 15px;
        min-height: 48px;
        text-align: center;
      }

      /* Show pricing dots + scroll hint */
      .pricing-scroll-hint { display: flex; }

      /* Pricing cards: compact padding on mobile */
      .p-card { padding: 20px 18px; }
      .p-amt { font-size: 38px; }

      /* Featured card label on mobile, keep badge visible */
      .p-badge {
        font-size: 10px;
        padding: 3px 12px;
        top: -10px;
      }

      /* CTA buttons in pricing cards, full height, easy to tap */
      .p-card .btn-dark,
      .p-card .btn-white,
      .p-card .btn-outline-dark,
      .p-card a[class*="btn"] {
        min-height: 50px !important;
        font-size: 15px !important;
        justify-content: center !important;
      }

      /* Pricing header text smaller */
      .pricing-header { margin-bottom: 24px; }
      .pricing-header .lead { font-size: 14px; }
    }

    /* Contact page v7 */
    .contact-kpi-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 28px;
    }
    .ck-cell {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 18px;
      text-align: center;
      box-shadow: var(--shadow);
    }
    .ck-num {
      font-size: 1.8rem; font-weight: 800; line-height: 1;
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: 4px;
    }
    .ck-lbl { font-size: 11px; color: var(--muted); }
    @media (max-width: 600px) {
      .contact-kpi-row { grid-template-columns: 1fr 1fr; }
    }

    /* ══ ACTIVITY TICKER ══ */
    .activity-ticker {
      position: fixed;
      bottom: 90px;
      left: 24px;
      z-index: 845;
      pointer-events: none;
    }
    .at-card {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 10px 16px 10px 10px;
      box-shadow: 0 8px 32px rgba(13,27,46,.14);
      max-width: 280px;
      transform: translateX(-120%);
      opacity: 0;
      transition: transform .45s cubic-bezier(.34,1.56,.64,1), opacity .35s ease;
    }
    .at-card.visible {
      transform: translateX(0);
      opacity: 1;
    }
    .at-av {
      width: 34px; height: 34px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700; color: #fff;
      flex-shrink: 0;
    }
    .at-text { font-size: 12px; line-height: 1.45; color: var(--text); }
    .at-text strong { font-weight: 700; }
    .at-time { font-size: 10px; color: var(--accent); font-weight: 600; margin-top: 1px; }
    .at-icon { font-size: 16px; flex-shrink: 0; }

    /* ══ ROI CALCULATOR ══ */
    .roi-section { background: var(--page-bg2); }
    .roi-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
      max-width: 900px;
      margin: 0 auto;
    }
    .roi-inputs { }
    .roi-input-group { margin-bottom: 24px; }
    .roi-label {
      display: flex; justify-content: space-between; align-items: center;
      font-size: 13px; font-weight: 600; color: var(--text);
      margin-bottom: 8px;
    }
    .roi-val {
      font-size: 14px; font-weight: 800;
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    /* ── ROI slider, bigger touch target, better track ── */
    .roi-slider {
      -webkit-appearance: none;
      width: 100%; height: 6px;
      border-radius: 3px;
      background: linear-gradient(90deg, var(--accent) 0%, var(--border) 0%);
      outline: none; cursor: pointer;
      touch-action: pan-y; /* allow vertical scroll while dragging */
    }
    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--navy);
      border: 3px solid #fff;
      box-shadow: 0 2px 12px rgba(13,27,46,.3);
      cursor: pointer;
    }
    .roi-slider::-moz-range-thumb {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--navy);
      border: 3px solid #fff;
      box-shadow: 0 2px 12px rgba(13,27,46,.3);
      cursor: pointer;
    }
    .roi-results {
      background: var(--navy);
      border-radius: 20px;
      padding: 28px;
      box-shadow: var(--shadow-lg);
      position: sticky;
      top: 90px;
    }
    /* ── Mobile ROI: results first (impact before effort) ── */
    @media (max-width: 768px) {
      .roi-grid { grid-template-columns: 1fr; gap: 20px; }
      .roi-results {
        position: static;
        order: -1; /* show results ABOVE sliders on mobile */
        padding: 20px;
      }
      /* Compact results on mobile: 2-col grid */
      .roi-result-row {
        padding: 10px 0;
      }
      .roi-result-val { font-size: 18px; }
      .roi-result-val[style*="28px"] { font-size: 24px !important; }

      /* Inputs card: give it a card feel on mobile */
      .roi-inputs {
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 20px;
        box-shadow: var(--shadow);
      }
      .roi-input-group { margin-bottom: 20px; }
      .roi-label { font-size: 14px; }
      .roi-val { font-size: 15px; }
    }

    .roi-result-row {
      display: flex; justify-content: space-between; align-items: flex-end;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .roi-result-row:last-of-type { border-bottom: none; }
    .roi-result-label { font-size: 12px; color: rgba(255,255,255,.5); }
    .roi-result-val { font-size: 20px; font-weight: 800; color: #fff; }
    .roi-result-val.grad { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .roi-result-val.green { color: #4ADE80; }
    .roi-disclaimer { font-size: 10px; color: rgba(255,255,255,.3); margin-top: 14px; line-height: 1.5; }

    /* ══ BEFORE / AFTER ══ */
    .ba-tabs {
      display: inline-flex;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 50px;
      padding: 4px;
      margin-bottom: 24px;
      box-shadow: var(--shadow);
    }
    .ba-tab {
      padding: 8px 22px; border-radius: 50px; border: none;
      font-size: 13px; font-weight: 600; cursor: pointer;
      background: transparent; color: var(--muted);
      transition: all .2s;
    }
    .ba-tab.active { background: var(--navy); color: #fff; box-shadow: 0 2px 10px rgba(14,33,68,.2); }
    .ba-panel { display: none; }
    .ba-panel.active { display: block; }

    /* ── Slide-toggle (Without/With WeReply): pill glijdt + inhoud schuift mee ── */
    #baTabs { position: relative; }
    #baTabs > div[style*="width:1px"] { opacity: 0; }
    .ba-slider {
      position: absolute; top: 4px; bottom: 4px; left: 4px; right: auto;
      width: calc(50% - 6px);
      border-radius: 50px;
      background: var(--navy);
      box-shadow: 0 2px 10px rgba(14,33,68,.25);
      transition: left .35s cubic-bezier(.4,0,.2,1), background-color .35s ease, box-shadow .35s ease;
      z-index: 0;
      pointer-events: none;
    }
    #baTabs.ba-before .ba-slider { left: 4px;            background: #ef4444;    box-shadow: 0 2px 10px rgba(239,68,68,.3); }
    #baTabs.ba-after  .ba-slider { left: calc(50% + 2px); background: var(--navy); box-shadow: 0 2px 10px rgba(14,33,68,.25); }
    .ba-tab { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; transition: color .25s ease; }
    #baTabs.ba-before #baTabBefore { color: #fff !important; font-weight: 700 !important; }
    #baTabs.ba-before #baTabAfter  { color: var(--muted) !important; font-weight: 600 !important; }
    #baTabs.ba-after  #baTabAfter  { color: #fff !important; font-weight: 700 !important; }
    #baTabs.ba-after  #baTabBefore { color: var(--muted) !important; font-weight: 600 !important; }
    /* Inhoud schuift mee met de knop + vloeiende hoogte */
    #baPanels { overflow: hidden; transition: height .35s ease; }
    .ba-track { display: flex; width: 200%; align-items: flex-start; transition: transform .35s cubic-bezier(.4,0,.2,1); }
    .ba-track > .ba-panel { width: 50%; flex: 0 0 50%; display: block !important; }

    /* Chaos mockup */
    .chaos-apps {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 10px; padding: 20px;
      background: #F1F5F9; border-radius: var(--radius);
      border: 1px solid var(--border);
    }
    .chaos-app {
      background: #fff; border-radius: 10px; padding: 12px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      position: relative;
    }
    .chaos-app-head {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 700; color: var(--text);
      margin-bottom: 8px;
    }
    .chaos-badge {
      position: absolute; top: 8px; right: 8px;
      width: 18px; height: 18px; border-radius: 50%;
      background: #ef4444; color: #fff; font-size: 9px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      animation: blink 2s infinite;
    }
    .chaos-msg { font-size: 10px; color: var(--muted); line-height: 1.5; }
    .chaos-stat-row {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
      margin-top: 12px;
    }
    .chaos-stat {
      background: rgba(239,68,68,.06); border: 1px solid rgba(239,68,68,.15);
      border-radius: 8px; padding: 10px; text-align: center;
    }
    .chaos-stat-num { font-size: 18px; font-weight: 800; color: #ef4444; }
    .chaos-stat-lbl { font-size: 10px; color: var(--muted); margin-top: 2px; }

    /* ══ COUNT-UP ══ */
    .count-up-num { display: inline; }

    /* ── SPEED: content-visibility for below-fold sections ──
       (logo-bar bewust NIET: dat pauzeerde de marquee-animatie en gaf
        hapering bij terugscrollen) */
    .clarity-section, .pricing-section,
    .roi-section, .not-sure, .final-cta { content-visibility: auto; contain-intrinsic-size: 0 500px; }

    /* GPU-accelerate ONLY continuously animated elements (not every element) */
    .logo-row { will-change: transform; }
    /* fade-in: will-change added/removed via JS only during transition, NOT permanently */
    .back-to-top { will-change: opacity; }
    .at-card { will-change: transform; }

    /* Paint containment verwijderd van carousel-kaarten: contain:layout breekt 100vw/% in flex */
    /* .feat-card, .t-card-v7 { contain: layout style; } */

    /* ── prefers-reduced-motion: disable all animations ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .logo-row { animation: none; will-change: auto; }
      .fade-in { opacity: 1 !important; transform: none !important; }
      .at-card { animation: none !important; }
    }

    /* ── Mobile: pause marquee to save CPU/battery ── */
    @media (max-width: 768px) {
      .logo-row { animation-duration: 20s; } /* faster = fewer repaints in DOM */
    }

    /* ════════════════════════════════════════
       MOBILE v7, COMPREHENSIVE IMPROVEMENTS
    ════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ── Hero trust bar: horizontaal scrollbaar ── */
      .hero-trust-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 6px 14px;
        max-width: calc(100vw - 32px);
        scrollbar-width: none;
      }
      .hero-trust-bar::-webkit-scrollbar { display: none; }
      .hero-trust-sep { display: none; }
      .hero-trust-item { flex-shrink: 0; }
      .hero-trust-stars { flex-shrink: 0; }

      /* ── Hero CTAs: stapelen ── */
      .hero-ctas {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0 16px;
      }
      .hero-ctas .btn-grad,
      .hero-ctas .btn-outline-dark {
        width: 100%;
        max-width: 320px;
        justify-content: center;
      }

      /* ── Hero micro-claims: verticaal ── */
      .hero-micro {
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-top: 12px;
      }

      /* ── Step cards: 1 kolom ── */
      .step-card { margin-bottom: 0; }
      .step-bg-num { font-size: 80px; }

      /* ── Testimonials: swipe carousel on mobile (v8) ── */
      #page-home .t-card-v7 {
        width: auto; /* let min-width from carousel rule control */
      }

      /* ── Before/After tabs: stapelen ── */
      .ba-tabs {
        display: flex;
        flex-direction: row;
        width: 100%;
        border-radius: 12px;
      }
      .ba-tab { flex: 1; text-align: center; font-size: 12px; padding: 8px 10px; }

      /* ── Pricing toggle: compacter ── */
      .pt-toggle { gap: 0; }
      .pt-btn { padding: 8px 16px; font-size: 13px; }

      /* ── CoI section: minder padding op mobile ── */
      .section { padding: 48px 16px; }
      .section-sm { padding: 32px 16px; }

      /* ── Stats+CTA card: minder padding ── */
      .stat-cell { padding: 32px 20px; }

      /* ── Automate section ── */
      .automate-text-col h2 { font-size: 1.7rem; }
      .automate-text-col { padding: 36px 20px 24px; }
      .automate-widget-col { padding: 0 20px 36px; }

      /* ── ROI calculator (v10 overrides earlier rules) ── */
      .roi-grid { gap: 20px; }
      .roi-results { padding: 20px; order: -1; position: static; }
      .roi-result-val { font-size: 18px; }
      .roi-result-val[style*="28px"] { font-size: 24px !important; }

      /* ── Meta callout ── */
      .meta-callout { padding: 28px 20px; }

      /* ── Sticky CTA bar: compacter ── */
      #stickyCta {
        padding: 10px 16px;
        flex-wrap: nowrap;
      }
      #stickyCta > div:first-child > div[style*="gap:16px"] {
        display: none;
      }

      /* ── Activity ticker: hoger boven sticky bar ── */
      .activity-ticker { left: 12px; }
      .at-card { max-width: calc(100vw - 40px); }

      /* ── Footer ── */
      .footer { padding: 40px 16px 24px; }
      .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px; }

      /* ── Pricing card padding ── */
      .p-card { padding: 22px 18px; }

      /* ── Contact page ── */
      .contact-kpi-row { grid-template-columns: 1fr 1fr; }
      .ck-num { font-size: 1.5rem; }
    }

    @media (max-width: 480px) {

      /* ── Typography ── */
      h1 { font-size: clamp(1.8rem, 8vw, 2.4rem) !important; }
      h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }

      /* ── Hero ── */
      .hero { padding: 32px 14px 0; }
      .hero-stats-row { flex-direction: column; border-radius: 12px; }
      .hsr-cell { border-right: none !important; border-bottom: 1px solid var(--border); padding: 14px 18px; }
      .hsr-cell:last-child { border-bottom: none; }
      .hsr-num { font-size: 20px; }

      /* ── Section ── */
      .section { padding: 40px 14px; }

      /* ── Feature cards: swipe carousel (v8) ── */
      .features-grid { display: flex !important; grid-template-columns: unset !important; }
      .feat-body { padding: 22px 20px 24px; }

      /* ── Testimonials: swipe carousel (v8) ── */
      #page-home div[style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        grid-template-columns: unset !important;
      }

      /* ── ROI inputs ── */
      .roi-label { font-size: 12px; }
      .roi-val { font-size: 13px; }

      /* ── FAQ ── */
      .faq-q { font-size: 14px; padding: 16px 16px; }
      .faq-a { padding: 0 16px; }
      .faq-a.open { padding: 0 16px 16px; }

      /* ── Pricing ── */
      .pricing-grid { max-width: 100%; }
      .p-amt { font-size: 36px; }

      /* ── Footer: 1 kolom op 480px ── */
      .footer-inner { grid-template-columns: 1fr; }
      .footer-col { }

      /* ── Sticky CTA bar ── */
      #stickyCta { padding: 8px 14px; }
      #stickyCta .btn-white { font-size: 12px; padding: 8px 14px; }
    }

    @media (max-width: 380px) {
      /* Heel kleine schermen */
      .hero-ctas .btn-grad,
      .hero-ctas .btn-outline-dark { max-width: 100%; font-size: 14px; padding: 12px 18px; }
      .pt-save-badge { display: none; }
      .ba-tab { font-size: 11px; padding: 7px 6px; }
    }


    @media (max-width: 768px) {
      .coi-card { grid-template-columns: 1fr !important; padding: 32px 20px !important; gap: 28px !important; }
    }


    /* ── INBOX WIDGET: mobiel, 2 kolom (sidebar + lijst), geen conversation) ── */
    @media (max-width: 768px) {
      /* Chaos section: stack op mobiel */
      .chaos-inner {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
      }

      .chaos-panel {
        min-height: unset !important;
        overflow: hidden !important;
      }

      /* Grid: sidebar (44px) + ticket list, verberg conversation (3e kolom) */
      .chaos-panel [style*="grid-template-columns:44px 175px 1fr"] {
        grid-template-columns: 44px 1fr !important;
        height: 300px !important;
      }
      .chaos-panel [style*="grid-template-columns:44px 175px 1fr"] > div:last-child {
        display: none !important;
      }

      /* Ticket list (col 2): neemt resterende breedte */
      .chaos-panel [style*="background:#fff; border-right:1px solid var(--border)"] {
        min-width: 0 !important;
        border-right: none !important;
      }

      /* Toon mobiele app-header */
      .inbox-mobile-header { display: flex !important; }
    }
    /* ↑ Stray blok verwijderd, stats fix zit nu correct in V13 master block ↑ */


    /* ════════════════════════════════════
       HERO MOBILE, COMPLETE REDESIGN
    ════════════════════════════════════ */
    @media (max-width: 768px) {

      /* Hero screenshot: crop tot 200px hoog met fade onderaan */
      .hero-screenshot-wrap {
        max-height: 200px;
        overflow: hidden;
        border-radius: 14px;
        margin-top: 32px;
        position: relative;
      }
      .hero-screenshot-wrap::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--page-bg));
        pointer-events: none;
      }
      .hero-screenshot { border-radius: 14px 14px 0 0; }

      /* Floating badges: verborgen op mobiel */
      .hero-screenshot-wrap > div[style*="position:absolute"] { display: none !important; }

      /* Stats rij: 3 kolommen naast elkaar op mobiel */
      .hero-stats-row {
        flex-direction: row !important;
        width: 100%;
        border-radius: 14px;
      }
      .hsr-cell {
        flex: 1;
        border-right: 1px solid var(--border) !important;
        border-bottom: none !important;
        padding: 14px 8px !important;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
      .hsr-cell:last-child { border-right: none !important; }
      .hsr-num { font-size: 18px; }
      .hsr-lbl { font-size: 10px; text-align: center; max-width: 60px; }

      /* Lead tekst: kleiner en compacter */
      .hero p.lead {
        font-size: 15px !important;
        line-height: 1.6;
        padding: 0 4px;
      }

      /* Hero h1: compacter */
      .hero h1 { line-height: 1.15; margin-bottom: 14px; }

      /* Hero padding verkleinen */
      .hero { padding-top: 90px !important; }

      /* Trust bar: fade rechts aan */
      .hero-trust-bar {
        -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
        mask-image: linear-gradient(to right, black 80%, transparent 100%);
      }

      /* Hero micro-claims: 1 rij met kleinere tekst */
      .hero-micro span { font-size: 12px; }

      /* Minder ruimte onder hero stats */
      .hero-stats-row { margin-bottom: 24px; }
    }

    @media (max-width: 480px) {
      /* Stats rij blijft 3-kolom maar nog compacter */
      .hsr-num { font-size: 16px; }
      .hsr-lbl { font-size: 9px; max-width: 52px; }
      .hsr-cell { padding: 12px 6px !important; }

      /* H1 kleiner */
      .hero h1 { font-size: 1.9rem !important; }

      /* Lead text */
      .hero p.lead { font-size: 14px !important; }
    }


    @media (max-width: 768px) {
      .stat-cell-v7 { padding: 28px 16px !important; }
    }

    /* ════════════════════════════════════
       V11, MOBILE SPACING COMPACT
       Alle overtreders in één blok
    ════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ① Secties: ~48px → 32px (scheelt ~300px totaal) */
      .section { padding: 32px 16px !important; }
      .section-sm { padding: 20px 16px !important; }

      /* ② Logo bar: 52px padding → 18px */
      .logo-bar-inner { padding: 18px 16px !important; gap: 14px !important; }

      /* ③ Hero screenshot: vaste hoogte + object-fit, altijd geclipped */
      .hero-screenshot-wrap {
        margin-top: 20px !important;
        height: 160px !important;
        max-height: 160px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
      }
      .hero-screenshot {
        width: 100% !important;
        height: 160px !important;
        object-fit: cover !important;
        object-position: top center !important;
        border-radius: 0 !important;
      }

      /* ④ Hero elementen: minder ruimte tussen blokken */
      .hero p.lead { margin-bottom: 20px !important; }
      .hero-rating { margin-bottom: 18px !important; }
      .hero-micro { margin-top: 8px !important; gap: 12px !important; }
      .hero-channels { margin-bottom: 16px !important; }
      .hero-ctas { gap: 8px !important; }
      .hero-ctas .btn-grad,
      .hero-ctas .btn-outline-dark { padding: 13px 20px !important; min-height: 48px !important; }

      /* ⑤ Section intro-headers: te veel margin onder h2 */
      .features-header { margin-bottom: 20px !important; }
      .t-header { margin-bottom: 24px !important; }
      .pricing-header { margin-bottom: 20px !important; }

      /* ⑥ Stats stacked cells: minder padding */
      .stat-cell { padding: 24px 16px !important; }

      /* ⑦ Automate dark card: minder padding */
      .automate-text-col { padding: 28px 18px 16px !important; }
      .automate-widget-col { padding: 0 18px 28px !important; }

      /* ⑧ Final CTA: 80px → 40px */
      .final-cta { padding: 40px 16px 28px !important; }

      /* ⑨ Not-sure sectie */
      .not-sure { padding: 28px 16px !important; }
      .not-sure-inner p.lead { margin-bottom: 18px !important; }

      /* ⑩ Inline padding-top overrides (hero, about) */
      section[style*="padding-top: 120px"] { padding-top: 140px !important; }
      section[style*="padding-top: 100px"] { padding-top: 140px !important; }

      /* ⑪ FAQ items: minder padding */
      .faq-q { padding: 14px 18px !important; }
      .faq-a.open { padding: 0 18px 16px !important; }

      /* ⑫ Footer */
      .footer { padding: 28px 16px 16px !important; }
      .footer-bottom { margin-top: 16px !important; padding-top: 14px !important; }

      /* ⑬ Two-col gap */
      .two-col, .chaos-inner { gap: 20px !important; }

      /* ⑭ Step cards */
      .step-card { padding: 20px 18px !important; }

      /* ⑮ ROI calculator, alles compact */

      /* Results kaart: padding en rij-hoogte */
      .roi-results { padding: 16px !important; }
      .roi-result-row { padding: 6px 0 !important; }
      .roi-result-label { font-size: 11px !important; }
      .roi-result-val { font-size: 15px !important; }
      /* ROI getal (was 28px inline), kleiner */
      .roi-result-val[style*="28px"] { font-size: 20px !important; }
      /* "Your numbers" header rij */
      .roi-results > div:first-child { margin-bottom: 10px !important; }
      /* CTA knop in resultaten: compacter */
      .roi-results .btn-white { padding: 11px 16px !important; margin-top: 12px !important; font-size: 14px !important; }
      /* Disclaimer */
      .roi-disclaimer { font-size: 9px !important; margin-top: 8px !important; }

      /* Slider input groepen: minder ruimte */
      .roi-input-group { margin-bottom: 14px !important; }
      .roi-label { font-size: 13px !important; margin-bottom: 6px !important; }
      .roi-val { font-size: 13px !important; }
      /* Min/max labels onder slider */
      .roi-input-group > div[style*="justify-content:space-between"] { margin-top: 2px !important; }

      /* Input kaart (witte achtergrond) */
      .roi-inputs { padding: 16px !important; }

      /* Info box onderaan sliders */
      .roi-inputs > div[style*="background:rgba"] { padding: 10px 12px !important; font-size: 11px !important; }
    }

    @media (max-width: 480px) {
      .section { padding: 24px 14px !important; }
      .logo-bar-inner { padding: 12px 14px !important; }
      .hero-screenshot-wrap { height: 130px !important; max-height: 130px !important; }
      .hero-screenshot { height: 130px !important; }
      .final-cta { padding: 32px 14px 24px !important; }
    }

    /* ════════════════════════════════════════════════
       V13, DEFINITIEF MOBIEL MASTER-BLOK
       Wint van alle eerdere regels via !important
       Eén centraal aanspreekpunt voor alle mobile UX
    ════════════════════════════════════════════════ */
    @media (max-width: 768px) {

      /* ─── LAYOUT ─── */
      .section  { padding: 32px 16px !important; }
      .section-sm { padding: 20px 16px !important; }
      .btn-row  { flex-direction: column !important; align-items: stretch !important; }
      .btn-dark, .btn-white, .btn-outline-dark, .btn-grad { justify-content: center !important; min-height: 44px !important; }
      .two-col, .chaos-inner, .story-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
      .two-col.reverse { direction: ltr !important; }

      /* ─── NAV ─── */
      .nav-wrap { top: 8px !important; padding: 0 12px !important; }
      .main-nav { display: none !important; }
      .hamburger { display: flex !important; }

      /* ─── HERO ─── */
      section[style*="padding-top: 120px"] { padding-top: 80px !important; }
      .hero { padding: 40px 16px 0 !important; }
      .hero h1 { font-size: 1.9rem !important; margin-bottom: 14px !important; }
      .hero p.lead { font-size: 15px !important; margin-bottom: 18px !important; }
      .hero-rating { margin-bottom: 16px !important; }
      .hero-channels { margin-bottom: 16px !important; }
      .hero-ctas {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 8px !important;
      }
      .hero-ctas .btn-grad,
      .hero-ctas .btn-outline-dark {
        display: flex !important;
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px !important;
        padding: 13px 20px !important;
        box-sizing: border-box !important;
      }
      /* Micro-copy: horizontaal op één rij */
      .hero-micro {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 12px !important;
        margin-top: 10px !important;
        width: 100% !important;
      }
      .hero-micro span {
        font-size: 11px !important;
        white-space: nowrap !important;
      }
      /* Screenshot: altijd geclipped via object-fit */
      .hero-screenshot-wrap {
        margin-top: 20px !important;
        height: 160px !important;
        max-height: 160px !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        position: relative !important;
      }
      .hero-screenshot {
        width: 100% !important;
        height: 160px !important;
        object-fit: cover !important;
        object-position: top center !important;
        border-radius: 0 !important;
      }
      .hero-screenshot-wrap > div[style*="position:absolute"] { display: none !important; }

      /* ─── LOGO BAR ─── */
      .logo-bar-inner { padding: 18px 16px !important; gap: 14px !important; }

      /* ─── STATS KAART (inline-gestijlde 3-col section) ─── */
      section[style*="padding: 0 20px 80px"] { padding: 0 12px 32px !important; }
      section[style*="padding: 0 20px 80px"] > div > div[style*="repeat(3,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }
      /* 3e stat (24/7) overspant beide kolommen → geen lege cel */
      section[style*="padding: 0 20px 80px"] > div > div[style*="repeat(3,1fr)"] > div:nth-child(3) {
        grid-column: 1 / -1 !important;
        border-right: none !important;
        border-bottom: none !important;
      }
      section[style*="padding: 0 20px 80px"] .stat-num { font-size: 1.85rem !important; }
      section[style*="padding: 0 20px 80px"] .stat-lbl { font-size: 11px !important; margin-bottom: 2px !important; }
      section[style*="padding: 0 20px 80px"] > div > div > div[style*="padding:44px"] {
        padding: 18px 10px !important;
      }
      /* Beschrijvende tekst per stat verbergen, te klein op mobiel */
      section[style*="padding: 0 20px 80px"] > div > div > div > div[style*="font-size:12px;color:var(--muted)"] {
        display: none !important;
      }
      /* CTA rij onder stats */
      section[style*="padding: 0 20px 80px"] > div > div[style*="padding:40px 52px"] {
        padding: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
      }
      section[style*="padding: 0 20px 80px"] > div > div[style*="padding:40px 52px"] .btn-grad {
        width: 100% !important;
        justify-content: center !important;
      }

      /* ─── AUTOMATE DARK CARD ─── */
      .automate-dark-inner { grid-template-columns: 1fr !important; }
      .automate-text-col { padding: 28px 18px 16px !important; }
      .automate-widget-col { padding: 0 18px 28px !important; align-items: center !important; }
      .widget-card { max-width: 100% !important; }

      /* ─── INBOX WIDGET ─── */
      .chaos-panel { overflow: hidden !important; }
      /* Toon mobiele header */
      .inbox-mobile-header { display: flex !important; }
      /* Sidebar (col1) + ticket list (col2), verberg conversation (col3) */
      .chaos-panel > div > div[style*="44px 175px"] {
        grid-template-columns: 44px 1fr !important;
        height: 300px !important;
      }
      .chaos-panel > div > div[style*="44px 175px"] > div:nth-child(3) {
        display: none !important;
      }
      .chaos-panel > div > div[style*="44px 175px"] > div:nth-child(2) {
        min-width: 0 !important;
        border-right: none !important;
      }

      /* ─── FEATURES CAROUSEL ─── */
      .features-header { margin-bottom: 20px !important; }
      .features-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        /* Links 16px padding zodat eerste kaart netjes begint */
        padding: 4px 16px 8px !important;
        margin: 0 -16px !important;
        max-width: none !important;
        scrollbar-width: none !important;
        grid-template-columns: unset !important;
      }
      .features-grid::-webkit-scrollbar { display: none !important; }
      .feat-card {
        /* 82% zodat ~18% van de volgende kaart zichtbaar is, duidelijke peek */
        min-width: 82% !important;
        max-width: 82% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
      }

      /* ─── TESTIMONIALS CAROUSEL ─── */
      .t-header { margin-bottom: 24px !important; }
      .t-grid {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        padding: 0 16px 8px !important;
        margin: 0 -16px !important;
        max-width: none !important;
        scrollbar-width: none !important;
        grid-template-columns: unset !important;
      }
      .t-grid::-webkit-scrollbar { display: none !important; }
      .t-card-v7 {
        min-width: 82% !important;
        max-width: 82% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        margin-top: 0 !important;
      }

      /* ─── FAQ ─── */
      .faq-q { padding: 14px 16px !important; font-size: 14px !important; }
      .faq-a.open { padding: 0 16px 14px !important; }

      /* ─── PRICING, tab-weergave op mobiel ─── */
      .pricing-header { margin-bottom: 16px !important; }
      .pricing-header .lead { font-size: 13px !important; margin-top: 6px !important; }

      /* Monthly/Yearly toggle: full width */
      .pt-toggle {
        display: flex !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 14px auto 0 !important;
      }
      .pt-btn { flex: 1 !important; min-height: 44px !important; padding: 8px 12px !important; font-size: 13px !important; }

      /* Plan-tabs */
      .pricing-plan-tabs {
        display: flex !important;
        gap: 6px !important;
        margin: 16px 0 14px !important;
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 4px;
        box-shadow: var(--shadow);
      }
      .pricing-plan-tab {
        flex: 1;
        padding: 10px 4px;
        border: none;
        border-radius: 9px;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        color: var(--muted);
        cursor: pointer;
        transition: all .2s;
        font-family: inherit;
        text-align: center;
        white-space: nowrap;
      }
      .pricing-plan-tab.active {
        background: var(--navy);
        color: #fff;
        box-shadow: 0 2px 8px rgba(14,33,68,.2);
      }
      .pricing-plan-tab.tab-featured.active {
        background: linear-gradient(135deg, #4B7FD4, #56C2C6);
      }

      /* Grid: blok-layout */
      .pricing-grid {
        display: block !important;
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        grid-template-columns: unset !important;
      }
      /* Verberg alle 3 kaarten standaard via ID, hoogste specificiteit */
      #pc-starter, #pc-pro, #pc-enterprise {
        display: none !important;
        width: 100% !important;
        min-width: unset !important;
        max-width: unset !important;
        box-sizing: border-box !important;
      }
      /* Pro is standaard zichtbaar */
      #pc-pro { display: flex !important; flex-direction: column !important; }
      /* JS zet data-attribuut om zichtbaarheid te wisselen */
      #pc-starter[data-mobile-visible="true"],
      #pc-pro[data-mobile-visible="true"],
      #pc-enterprise[data-mobile-visible="true"] {
        display: flex !important;
        flex-direction: column !important;
      }
      #pc-starter[data-mobile-visible="false"],
      #pc-pro[data-mobile-visible="false"],
      #pc-enterprise[data-mobile-visible="false"] {
        display: none !important;
      }
      .p-amt { font-size: 40px !important; }
      .p-list li { font-size: 13px !important; }
      .pricing-scroll-hint { display: none !important; }

      /* ─── ROI CALCULATOR ─── */
      .roi-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
      .roi-results { order: -1 !important; position: static !important; padding: 16px !important; }
      .roi-result-row { padding: 6px 0 !important; }
      .roi-result-label { font-size: 11px !important; }
      .roi-result-val { font-size: 15px !important; }
      .roi-results > div[style*="font-size:11px"] { margin-bottom: 10px !important; }
      .roi-disclaimer { font-size: 9px !important; margin-top: 8px !important; }
      .roi-inputs { padding: 16px !important; }
      .roi-input-group { margin-bottom: 14px !important; }

      /* ─── HOW IT WORKS ─── */
      #how-it-works [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
      #how-it-works [style*="position:absolute"][style*="height:2px"] { display: none !important; }
      .step-card { padding: 18px !important; }

      /* ─── FINAL CTA & NOT-SURE ─── */
      .final-cta { padding: 40px 16px 28px !important; }
      .not-sure { padding: 28px 16px !important; }
      .not-sure-inner p.lead { margin-bottom: 16px !important; }

      /* ─── FOOTER ─── */
      .footer { padding: 28px 16px 16px !important; }
      .footer-inner { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
      .footer-brand { grid-column: 1/-1 !important; }
      .footer-bottom { flex-direction: column !important; gap: 6px !important; text-align: center !important; margin-top: 16px !important; padding-top: 14px !important; }

      /* ─── ABOUT ─── */
      .about-stats { grid-template-columns: 1fr !important; }
      .founders-grid { grid-template-columns: 1fr 1fr !important; }
      .contact-grid { grid-template-columns: 1fr !important; }

      /* ─── FOOTER: toon álle kolommen/links op mobiel ─── */
      .footer { padding: 32px 16px 20px !important; }
      .footer-inner { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; }
      .footer-col { display: block !important; }
      .footer-brand { grid-column: 1 / -1 !important; }
      .footer-brand p { display: none !important; }
      .footer-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: center !important;
        margin-top: 28px !important;
        padding-top: 22px !important;
      }

      /* ─── HOW IT WORKS: verberg grote step-cards, toon simpele versie ─── */
      #how-it-works .step-card { display: none !important; }
      #how-it-works [style*="position:relative"][style*="grid"] { display: none !important; }
      .how-it-works-simple { display: flex !important; }

      /* ─── FOOTER: compacte mini-links niet meer nodig (volledige kolommen tonen nu alles) ─── */
      .footer-mobile-links { display: none !important; }
    }

    @media (max-width: 480px) {
      .section { padding: 24px 14px !important; }
      .logo-bar-inner { padding: 14px !important; }
      .hero h1 { font-size: 1.75rem !important; }
      .hero-screenshot-wrap { height: 130px !important; }
      .hero-screenshot { height: 130px !important; }
    }

    /* ════════════════════════════════════════════════════════
       V13.1, LEESBAARHEID & RITME (mobiel)
       Afsluitend blok: consistente type-schaal, witruimte en
       tap-doelen. Staat bewust als laatste zodat het wint.
    ════════════════════════════════════════════════════════ */

    /* Soepele tikken: geen 300ms-vertraging, geen grijze flits */
    a, button, .btn-grad, .btn-dark, .btn-white, .btn-outline-dark,
    .nav-cta, .faq-q, .pricing-plan-tab, .pt-btn, .hamburger, .mobile-close {
      -webkit-tap-highlight-color: transparent;
      touch-action: manipulation;
    }
    /* Ankerlinks (menu) niet meer onder de zwevende nav verstopt */
    html { scroll-padding-top: 84px; }

    @media (max-width: 768px) {

      /* ─── TYPE-SCHAAL: één duidelijke hiërarchie ─── */
      .hero h1 {
        font-size: 2rem !important;
        line-height: 1.18 !important;
        letter-spacing: -.02em !important;
      }
      h2 {
        font-size: 1.55rem !important;
        line-height: 1.25 !important;
        letter-spacing: -.01em !important;
      }
      h3 { font-size: 1.05rem !important; line-height: 1.35 !important; }

      /* Body & lead: 16px is de leesbare ondergrens op telefoon */
      p.lead { font-size: 16px !important; line-height: 1.6 !important; }
      .hero p.lead { font-size: 15.5px !important; line-height: 1.6 !important; }
      .p-list li, .faq-a, .feat-card p, .t-card-v7 p { font-size: 15px !important; line-height: 1.55 !important; }

      /* Eyebrow consistent boven elke sectie */
      .eyebrow { font-size: 11.5px !important; margin-bottom: 10px !important; letter-spacing: .08em !important; }

      /* ─── VERTICAAL RITME: gelijke ademruimte tussen kop en inhoud ─── */
      .features-header,
      .t-header,
      .pricing-header { margin-bottom: 20px !important; }
      .features-header .lead,
      .t-header .lead,
      .pricing-header .lead { margin-top: 8px !important; }
      /* Net iets meer lucht tussen secties voor een rustiger ritme */
      .section { padding: 36px 16px !important; }
      .section-sm { padding: 24px 16px !important; }

      /* ─── NAV-COMPENSATIE: eerste sectie per pagina vrij van de fixed nav ─── */
      .about-hero.section,
      .section.legal-page,
      #page-contact .section:first-of-type { padding-top: 140px !important; }

      /* ─── HERO TRUST BAR: extra ruimte onder de nav ─── */
      .hero .hero-trust-bar { margin-top: 20px !important; }

      /* ─── TAP-DOELEN: alles minstens 44–48px ─── */
      .hamburger {
        padding: 10px !important;
        margin: -6px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .mobile-close {
        width: 42px !important;
        height: 42px !important;
        font-size: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      .mobile-menu-inner { gap: 6px !important; }
      .mobile-menu-inner a {
        display: flex !important;
        align-items: center !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px 16px !important;
      }
      .nav-cta { min-height: 42px !important; }
      .faq-q { min-height: 52px !important; }
      .footer-mobile-links a {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 44px !important;
        padding: 6px 4px !important;
        font-size: 14px !important;
      }
      .pricing-plan-tab { min-height: 46px !important; }
    }

    @media (max-width: 480px) {
      .hero h1 { font-size: 1.8rem !important; line-height: 1.2 !important; }
      h2 { font-size: 1.4rem !important; }
      p.lead { font-size: 15.5px !important; }
      .hero p.lead { font-size: 15px !important; }
    }

    /* ════════════════════════════════════════════════════════
       V13.1, INBOX-WIDGET: exacte laptop-look, geschaald (mobiel)
       Toont de VOLLEDIGE 3-pane (zijbalk + lijst + gesprek) net
       als desktop, verkleind naar schermbreedte via transform.
       JS (scaleInbox) berekent de exacte schaal; CSS geeft een
       nette fallback vóór JS draait.
    ════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .chaos-section { overflow-x: hidden !important; }

      /* Geen aparte mobiele balk, we tonen de échte desktop-UI */
      .inbox-mobile-header { display: none !important; }

      /* Paneel = kader dat de geschaalde widget netjes clipt */
      .chaos-panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        height: 200px; /* fallback; JS zet de exacte hoogte */
      }

      /* Volledige 3-pane op ware proporties, daarna geschaald.
         Smaller gesprek (330px i.p.v. 1fr) → kleinere ontwerpbreedte
         → grotere schaal → grotere, leesbaardere tekst. */
      .chaos-panel > div[style*="44px 175px"] {
        grid-template-columns: 44px 175px 330px !important;
        width: 549px !important;
        height: 360px !important;
        transform: scale(0.65);             /* fallback; JS verfijnt */
        transform-origin: top left !important;
      }
      /* Alle drie de kolommen zichtbaar, gesprek terug in beeld */
      .chaos-panel > div[style*="44px 175px"] > div:nth-child(2) {
        border-right: 1px solid var(--border) !important;
        min-width: 0 !important;
      }
      .chaos-panel > div[style*="44px 175px"] > div:nth-child(3) {
        display: flex !important;
      }
    }

    /* ════════════════════════════════════════════════════════
       V13.1, "GET STARTED IN 3 STEPS" als swipe-slide (mobiel)
       Stappen werden verborgen zonder vervanging; nu tonen we
       ze als horizontale carrousel met peek (net als features).
    ════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      /* Grid-container → horizontale swipe-rij */
      #how-it-works > .container > div[style*="repeat(3,1fr)"] {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 12px !important;
        margin: 0 -16px !important;
        padding: 4px 16px 14px !important;
        scrollbar-width: none !important;
      }
      #how-it-works > .container > div[style*="repeat(3,1fr)"]::-webkit-scrollbar { display: none !important; }
      /* Stappen weer zichtbaar, als snap-kaarten met peek */
      #how-it-works .container .step-card {
        display: flex !important;
        flex-direction: column !important;
        min-width: 80% !important;
        max-width: 80% !important;
        flex-shrink: 0 !important;
        scroll-snap-align: start !important;
        margin: 0 !important;
      }
      /* Connector-lijn blijft verborgen op mobiel */
      #how-it-works [style*="position:absolute"][style*="height:2px"] { display: none !important; }
    }

    /* ════════════════════════════════════════════════════════
       V13.1, HERO-SCREENSHOT: netjes schalen (tablet & desktop)
       De zwevende badges steken met negatieve offsets buiten de
       afbeelding; op tussenbreedtes lopen ze buiten beeld. We
       tonen ze alleen op ruime desktop en blokkeren overflow.
    ════════════════════════════════════════════════════════ */
    .hero { overflow-x: clip; }
    @media (max-width: 1024px) {
      .hero-screenshot-wrap > div[style*="position:absolute"] { display: none !important; }
    }

    /* Mobiel: toon de VOLLEDIGE afbeelding op natuurlijke verhouding
       i.p.v. een bijgesneden strookje van 160px, anders is hij
       nauwelijks zichtbaar. */
    @media (max-width: 768px) {
      .hero-screenshot-wrap {
        height: auto !important;
        max-height: none !important;
        margin-top: 24px !important;
        border-radius: 14px !important;
        overflow: visible !important;
      }
      .hero-screenshot {
        height: auto !important;
        object-fit: contain !important;
        border-radius: 14px !important;
      }
      /* Crop-fade hoort bij de oude strook-weergave → uit */
      .hero-screenshot-wrap::after { display: none !important; }
    }

    /* Mobiel: bij horizontaal swipen over de carrousels geen verticale beweging */
    @media (max-width: 768px) {
      .features-grid,
      #how-it-works > .container > div[style*="repeat(3,1fr)"] {
        touch-action: pan-x !important;
      }
    }
    /* Mobiel: clarity-tekstblok gecentreerd, consistent met de rest */
    @media (max-width: 768px) {
      .clarity-section .col-text { text-align: center !important; }
      .clarity-section .col-text .eyebrow { justify-content: center !important; }
    }

    /* ════════════════════════════════════════════════════════
       V13.1 — ROI-CALCULATOR (mobiel): compact, alles in één scherm
       Geen sticky (dat overlapte de sliders → halve sliders). In plaats
       daarvan: resultaten + sliders zo compact dat ze samen passen, dus
       de cijfers blijven zichtbaar terwijl je de sliders sleept.
    ════════════════════════════════════════════════════════ */
    @media (max-width: 768px) {
      .roi-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
      /* Resultaten bovenaan, normaal in flow (niet sticky) */
      .roi-results {
        position: static !important;
        order: -1 !important;
        padding: 12px 14px !important;
      }
      .roi-results > div:first-child { margin-bottom: 6px !important; }
      .roi-result-row { padding: 3px 0 !important; }
      .roi-result-label { font-size: 10.5px !important; }
      .roi-result-val { font-size: 14px !important; }
      .roi-result-val[style*="28px"] { font-size: 16px !important; }
      .roi-results .btn-white { padding: 9px 14px !important; margin-top: 8px !important; font-size: 12.5px !important; }
      .roi-disclaimer { display: none !important; }

      /* Sliders compact + info-box verbergen voor meer ruimte */
      .roi-inputs { padding: 12px 14px !important; }
      .roi-input-group { margin-bottom: 10px !important; }
      .roi-label { font-size: 12.5px !important; margin-bottom: 4px !important; }
      .roi-inputs > div[style*="background:rgba"] { display: none !important; }
    }

    /* ════════════════════════════════════════════════════════
       LEGAL / JURIDISCHE PAGINA'S (Privacy, DPA, Terms)
    ════════════════════════════════════════════════════════ */
    .legal-page { background: var(--page-bg); }
    .legal-container { max-width: 820px; margin: 0 auto; }
    .legal-page h1 { font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1.15; letter-spacing: -.02em; margin: 12px 0 6px; }
    .legal-updated { font-size: 13px; color: var(--light); margin-bottom: 36px; }
    .legal-page h2 { font-size: 1.2rem; font-weight: 700; color: var(--text); line-height: 1.35; margin: 34px 0 12px; letter-spacing: -.01em; }
    .legal-page p { font-size: 15px; color: var(--muted); line-height: 1.8; margin-bottom: 14px; }
    .legal-page ul { margin: 4px 0 18px; padding-left: 22px; }
    .legal-page li { font-size: 15px; color: var(--muted); line-height: 1.7; margin-bottom: 8px; }
    .legal-page li strong { color: var(--text); display: block; margin-bottom: 2px; }
    .legal-page a.legal-link { color: var(--accent); text-decoration: none; font-weight: 600; }
    .legal-page a.legal-link:hover { text-decoration: underline; }
    .legal-page .legal-intro { font-size: 16px; color: var(--muted); line-height: 1.8; }
    @media (max-width: 768px) {
      .legal-page h1 { font-size: 1.8rem; }
      .legal-page h2 { font-size: 1.1rem; margin-top: 28px; }
      .legal-page p, .legal-page li { font-size: 14.5px; }
      .section.legal-page { padding-top: 140px; }
    }


/* ── mobile pricing plan tabs ── */
  /* Plan-tabs: alleen op mobiel zichtbaar */
  .pricing-plan-tabs { display: none; }
  @media (max-width: 768px) {
    .pricing-plan-tabs { display: flex; }
    /* Verberg de "Most popular" badge op mobiel, tab geeft al context */
    .p-badge { display: none !important; }
  }

/* ── Chat demo iframe: shorter on mobile so the full chat + input stays above the keyboard ── */
.chat-frame { width: 100%; height: 520px; border: 0; display: block; }
@media (max-width: 768px) {
  .chat-frame { height: 440px; scroll-margin-top: 16px; }
}