/* ═════════════════════════════════════════════
   RESPONSIVE — fluid, mobile-first additions
═════════════════════════════════════════════ */

/* GLOBAL — prevent any horizontal overflow on every viewport */
html, body { max-width:100vw; overflow-x:clip; }
img, svg, video { max-width:100%; height:auto }

/* Smooth fluid hero headline & sub */
.hero h1 {
  font-size: clamp(26px, 7vw, 60px);
  letter-spacing: -1px;
  line-height: 1;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-lead {
  font-size: clamp(14px, 3.6vw, 16px);
  max-width: min(460px, 100%);
}

/* Section heads everywhere — fluid */
.section-head-v2 h2,
.stats-head h2,
.cta h2,
.quote blockquote {
  font-size: clamp(28px, 6.5vw, 60px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.footer-mega { font-size: clamp(60px, 18vw, 180px); line-height:.9; overflow-wrap:anywhere }

/* ═════════════════════════════════════════════
   DESKTOP-MID — adjust hero proportions
═════════════════════════════════════════════ */
@media (max-width:1100px) {
  .nav-menu { gap:0 }
  .nav-menu a { padding:8px 11px; font-size:13px }
  .hero-top { grid-template-columns:1fr; gap:36px; align-items:start }
  .hero-services { max-width:680px }
  .svc { grid-template-columns: 150px 1fr auto; padding:14px 20px 14px 14px; gap:20px }
  .svc-img { width:150px; height:104px }
  .svc-num { left:128px; top:10px }
  .cta-inner { grid-template-columns:1fr; gap:48px; padding:64px 40px 56px }
  .cta-content { order:2 }
  .cta-book { order:1; min-height:auto }
  .cta-brick { max-width:300px }
  .cta-actions { justify-content:flex-start }
}

/* ═════════════════════════════════════════════
   TABLET
═════════════════════════════════════════════ */
@media (max-width:1024px) {
  .nav { padding:12px 20px }
  .nav.scrolled { padding:10px 20px }
  .nav-menu { display:none }
  .nav-link { display:none }
  .nav-burger { display:flex }
  .wrap { padding:0 20px }
  .hero { padding:96px 0 32px; min-height:auto }
  .hero-brick { display:none }
  .clients-inner { grid-template-columns:1fr; gap:28px }
  .clients-wall { grid-template-columns:repeat(3, 1fr) }
  .clients-wall .c-logo { height:58px }
  .clients-wall .c-logo:nth-child(3) ~ .c-logo { border-top:1px solid var(--line-soft) }
  .clients-wall .c-logo:nth-child(4)::before,
  .clients-wall .c-logo:nth-child(2)::before,
  .clients-wall .c-logo:nth-child(3)::before,
  .clients-wall .c-logo:nth-child(5)::before,
  .clients-wall .c-logo:nth-child(6)::before { top:18%; bottom:18% }
  .section { padding:72px 0 }
  .approach-grid { grid-template-columns:1fr; gap:18px }
  .approach-gallery-grid { grid-template-columns:1fr 1fr; gap:14px }
  .approach-gallery { margin-top:40px; padding-top:28px }
  .approach-gallery-item { border-width:1px; box-shadow: 0 3px 0 var(--ink) }
  .approach-gallery-item:nth-child(3) { grid-column:1 / -1; aspect-ratio: 16 / 9 }
  .app-card-featured { transform:none }
  .app-card-featured:hover { transform:translate(-2px,-3px) }
  .stats { grid-template-columns:1fr 1fr }
  .stats-head { flex-direction:column; align-items:flex-start; gap:16px }
  .stat:nth-child(1),
  .stat:nth-child(2),
  .stat:nth-child(3),
  .stat:nth-child(4) { transform:translateY(0) }
  .stat:nth-child(1):hover,
  .stat:nth-child(2):hover,
  .stat:nth-child(3):hover,
  .stat:nth-child(4):hover { transform:translate(-2px,-4px) }
  .stat-n { font-size:56px; letter-spacing:-1.8px }
  .stat-n em { font-size:38px }
  .menukaart { padding:48px 0 72px }
  .menukaart-inner { grid-template-columns:1fr; gap:48px }
  .menukaart-preview { min-height:auto; order:-1 }
  .menukaart-book { max-width:340px }
  .menukaart-deco { display:none }
  .quote { padding:64px 0 }
  .cta { padding:0 20px 64px }
  .cta-inner { padding:56px 32px 56px }
  .footer-inner { padding:0 20px }
  .footer-top { grid-template-columns:1fr 1fr; gap:28px }
}

/* ═════════════════════════════════════════════
   MOBILE — ≤ 640px
═════════════════════════════════════════════ */
@media (max-width:640px) {
  /* ───────────── NAV ───────────── */
  /* Header uses exact --bg so it matches the logo's baked-in background.
     Permanent subtle border-bottom gives the bar structure without scroll. */
  .nav {
    padding:10px 14px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
    gap:10px;
    background:var(--bg);
    border-bottom:1px solid var(--line-soft);
  }
  .nav.scrolled {
    padding:8px 14px;
    padding-top: calc(8px + env(safe-area-inset-top, 0px));
    padding-left: calc(14px + env(safe-area-inset-left, 0px));
    padding-right: calc(14px + env(safe-area-inset-right, 0px));
    background:var(--bg);
    border-bottom-color:var(--line);
    box-shadow: 0 4px 14px -10px rgba(21,21,26,.25);
  }
  .nav-brand { gap:10px; min-width:0 }
  .nav-brand img { height:clamp(28px, 7vw, 32px); flex-shrink:0 }
  /* Show compact meta next to logo on mobile — balances the right-side burger.
     Override the desktop variant: no border, smaller type, tighter padding. */
  .nav-brand-meta {
    display:flex;
    padding-left:10px;
    border-left:1px solid var(--line);
    gap:2px;
    min-width:0;
  }
  .nav-brand-meta-tag { font-size:8px; letter-spacing:1px }
  .nav-brand-meta-text { font-size:9px }
  .nav-cta { display:none }
  .nav-burger {
    width:40px; height:40px;
    border-radius:9px;
    border-width:1.25px;
    box-shadow: 0 2px 0 var(--ink);
  }
  .nav-burger:active { box-shadow: 0 1px 0 var(--ink) }
  .nav-burger span { width:17px; height:2.25px }
  .nav-burger.open span:nth-child(1) { transform:translateY(6px) rotate(45deg) }
  .nav-burger.open span:nth-child(3) { transform:translateY(-6px) rotate(-45deg) }
  .nav-actions { gap:0; flex-shrink:0 }

  /* ───────────── MOBILE DRAWER ───────────── */
  /* Full-bleed on phones — no side strip showing the page behind */
  .mobile-menu { width:100%; max-width:none; border-left:none }
  .mobile-menu-header { padding:16px 18px 12px; min-height:60px; gap:10px }
  .mobile-menu-brand img { height:26px }
  .mobile-menu-eyebrow { font-size:8.5px; padding:2.5px 7px 2.5px 5px }
  .mobile-menu-list a { padding:16px 20px; gap:14px; min-height:68px }
  .mobile-menu-title { font-size:18px }
  .mobile-menu-sub { font-size:11.5px }
  .mobile-menu-stud { width:13px; height:13px }
  .mobile-menu-list a::after { font-size:18px }
  .mobile-menu-footer { padding:16px 18px calc(20px + env(safe-area-inset-bottom, 0px)); gap:12px }
  .mobile-menu-phone { font-size:12.5px }
  .mobile-menu-login { font-size:10.5px }

  /* ───────────── WRAP ───────────── */
  .wrap {
    padding:0 clamp(12px, 4vw, 18px);
    width:100%; max-width:100%;
  }

  /* ───────────── HERO ───────────── */
  .hero { padding:92px 0 12px; min-height:auto; overflow:hidden }
  .hero-brick { display:none }
  .hero > .wrap { padding-left:clamp(12px, 4vw, 18px); padding-right:clamp(12px, 4vw, 18px) }

  /* Hero meta */
  .hero-meta {
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-bottom:14px;
    padding-bottom:10px;
    font-size:9px;
  }
  .hero-meta-left { font-size:9px; gap:6px; flex-shrink:0; min-width:0 }
  .hero-meta-dot { width:6px; height:6px }
  .hero-meta-right { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; min-width:0 }
  .flag-pill { font-size:8px; padding:2px 5px 2px 4px; gap:4px; border-radius:5px }
  .flag { width:11px; height:7px }
  .since-badge { font-size:8px; padding:2px 6px; gap:3px; border-radius:5px }
  .since-badge strong { font-size:9.5px }

  /* Hero headline */
  .hero-top { gap:18px; margin-bottom:18px; grid-template-columns:1fr }
  .hero h1 {
    font-size: clamp(24px, 8.2vw, 44px);
    letter-spacing:-0.6px;
    margin-bottom:14px;
    line-height:.98;
    overflow-wrap:anywhere;
  }
  .brick-word { padding:0.05em 0.28em 0.1em; border-width:1.5px }
  .brick-word::before, .brick-word::after { border-width:1.5px }

  .hero-lead {
    font-size: clamp(12.5px, 3.6vw, 15px);
    line-height:1.45;
    margin-bottom:14px;
    max-width:none;
    overflow-wrap:anywhere;
  }
  .hero-lead a { white-space:normal }
  .hero-cta { gap:6px; flex-wrap:wrap }
  .btn { padding:10px 13px; font-size:10.5px; letter-spacing:0.5px; gap:7px; border-radius:8px }
  .btn-arrow { width:10px; height:10px }

  /* Service cards — clean mobile treatment */
  .hero-services { gap:10px; max-width:100%; min-width:0 }
  .svc {
    grid-template-columns: clamp(88px, 26vw, 108px) 1fr 30px;
    gap:clamp(10px, 2.8vw, 14px);
    padding:10px 12px 10px 8px;
    border-radius:10px;
    box-shadow: 0 2px 0 var(--line-soft);
    border:1px solid var(--line);
    min-width:0;
  }
  .svc-img {
    width:clamp(88px, 26vw, 108px);
    height:clamp(70px, 20.5vw, 86px);
    border-radius:7px;
    border-width:1px;
  }
  .svc-num { display:none }
  .svc-body { gap:3px; min-width:0 }
  .svc-body h3 { font-size:clamp(13px, 3.7vw, 15px); letter-spacing:-0.2px; line-height:1.02; overflow-wrap:anywhere }
  .svc-body p {
    font-size:clamp(10.5px, 2.9vw, 12px);
    line-height:1.32;
    -webkit-line-clamp:1;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .svc-meta { font-size:8.5px; letter-spacing:0.5px }
  .svc-meta span + span::before { padding:0 5px }
  .svc-arrow { width:30px; height:30px; border-width:1px }
  .svc-arrow svg { width:11px; height:11px }

  /* Marquee */
  .marquee { margin-top:20px; border-radius:8px }
  .marquee-track { padding:9px 0 }
  .marquee-item { font-size:13px; padding:0 12px; gap:12px }
  .marquee-item::after { width:6px; height:6px }

  /* ───────────── CLIENTS ───────────── */
  .clients { padding:36px 0 44px }
  .clients-inner { gap:18px }
  .clients-label { gap:8px; align-self:flex-start }
  .clients-label-tag { font-size:9px; padding:3px 8px 3px 5px; gap:5px }
  .clients-label-tag::before { width:7px; height:7px }
  .clients-label-text { font-size:clamp(20px, 5.6vw, 26px); letter-spacing:-0.5px; line-height:1.02 }
  .clients-label-meta { font-size:9px; margin-top:2px }
  .clients-label-meta::before { width:14px }
  .clients-wall {
    grid-template-columns:repeat(3, 1fr);
    border-radius:12px;
    box-shadow: 0 4px 0 var(--ink);
    padding:6px 2px;
  }
  .clients-wall::before { inset:5px; border-radius:8px }
  .clients-wall-studs { left:14px; top:-6px; gap:5px }
  .clients-wall-studs .stud { width:9px; height:9px }
  .clients-wall .c-logo { height:48px; padding:0 8px }
  .clients-wall .c-logo:nth-child(4),
  .clients-wall .c-logo:nth-child(5),
  .clients-wall .c-logo:nth-child(6) { border-top:1px solid var(--line-soft) }
  .clients-wall .c-logo + .c-logo::before { top:22%; bottom:22% }
  .clients-wall .c-logo:nth-child(4)::before { display:none }
  .c-logo img { max-height:100%; max-width:100%; object-fit:contain }

  /* ───────────── SECTIONS ───────────── */
  .section { padding:44px 0 }

  /* Approach */
  .section-head-v2 { margin-bottom:24px }
  .section-head-v2 .eyebrow { font-size:9px; padding:4px 9px 4px 6px; gap:6px; margin-bottom:14px }
  .section-head-v2 .eyebrow::before { width:7px; height:7px }
  .section-head-v2 h2 { letter-spacing:-0.5px; margin-bottom:12px }
  .section-head-v2 p { font-size:clamp(13px, 3.6vw, 15px); line-height:1.5 }

  /* Lower & thinner highlight so it reads as underline-highlight, not strikethrough */
  .section-head-v2 h2 em::after,
  .stats-head h2 em::after,
  .cta h2 em::after {
    bottom:0.05em !important;
    height:0.22em !important;
    border-radius:0.05em !important;
  }

  .approach-grid { gap:22px }
  .approach-gallery { margin-top:32px; padding-top:22px }
  .approach-gallery-head { margin-bottom:14px; gap:10px }
  .approach-gallery-eyebrow { font-size:9.5px; padding:3px 8px 3px 6px }
  .approach-gallery-meta { font-size:9px }
  .approach-gallery-grid { gap:10px }
  .approach-gallery-label { font-size:9px; padding:3px 8px; bottom:10px; left:10px }
  .approach-gallery-item { border-radius:11px }
  .app-card { padding:24px 20px 18px; border-radius:14px; box-shadow: 0 5px 0 var(--ink) }
  .app-card-icon { width:48px; height:48px; border-radius:12px; margin-bottom:16px }
  .app-card-icon svg { width:22px; height:22px }
  .app-card-number { font-size:22px; top:14px; right:18px }
  .app-card h3 { font-size:clamp(18px, 5vw, 22px); letter-spacing:-0.5px; margin-bottom:8px; line-height:1.05 }
  .app-card h3 em::after { bottom:0.05em; height:0.2em }
  .app-card-desc { font-size:clamp(12.5px, 3.5vw, 14px); line-height:1.5; margin-bottom:14px }
  .app-card-footer { padding-top:14px }
  .app-card-label { font-size:10px }
  .app-card-arrow { width:30px; height:30px }
  .app-card-arrow svg { width:12px; height:12px }
  .app-studs { left:18px !important }
  .app-studs .stud { width:11px !important; height:11px !important }

  /* ───────────── STATS ───────────── */
  .stats-wrap { padding:44px 0 52px }
  .stats-head { gap:14px; margin-bottom:22px }
  .stats-head .eyebrow { font-size:9px; padding:4px 9px 4px 6px }
  .stats-head h2 { letter-spacing:-0.4px }
  .stats-head-right { font-size:9px; padding:4px 9px; gap:6px }
  .stats { grid-template-columns:1fr; gap:20px }
  .stat {
    min-height:auto;
    padding:18px 16px 16px;
    border-radius:12px;
    box-shadow: 0 4px 0 var(--ink);
    min-width:0;
    /* overflow visible so the colored studs at top:-8px aren't clipped */
    overflow:visible;
  }
  .stat-studs { left:14px; gap:4px }
  .stat-studs .stud { width:9px; height:9px }
  .stat-top { margin-bottom:16px; flex-wrap:wrap; gap:6px }
  .stat-label { font-size:8.5px; padding:3px 8px 3px 5px; gap:5px }
  .stat-label::before { width:5px; height:5px }
  .stat-trend { font-size:8.5px; padding:2px 6px; gap:3px; border-radius:4px }
  .stat-trend svg { width:8px; height:8px }
  .stat-n {
    font-size: clamp(36px, 12vw, 56px);
    letter-spacing:-1.4px;
    margin-bottom:8px;
    line-height:1;
  }
  .stat-n em { font-size: clamp(24px, 8vw, 38px); letter-spacing:-1px }
  .stat-n sup { font-size:14px }
  .stat-l { font-size:clamp(11.5px, 3.4vw, 13px); padding-top:10px; line-height:1.3 }
  .stat-l strong { font-size:9px; margin-bottom:2px }
  .stat-ghost { font-size:clamp(80px, 28vw, 120px); right:6px; bottom:0 }

  /* ───────────── QUOTE ───────────── */
  .quote { padding:44px 0 }
  .quote-card { padding:32px 20px 26px; border-radius:18px; box-shadow: 0 6px 0 var(--ink) }
  .quote-tag { font-size:9.5px; padding:5px 11px 5px 8px; margin-bottom:22px }
  .quote-marks-svg { width:36px; height:30px }
  .quote blockquote {
    font-size: clamp(20px, 6vw, 32px);
    letter-spacing:-0.4px;
    margin-bottom:22px;
    line-height:1.2;
    overflow-wrap:anywhere;
  }
  .quote-author { padding:8px 14px 8px 8px; gap:10px; flex-wrap:wrap }
  .quote-author-avatar { width:32px; height:32px; font-size:11px }
  .quote-author-name { font-size:12.5px }
  .quote-author-meta { font-size:8.5px }

  /* ───────────── CTA — BOOK PROMO ───────────── */
  .cta { padding:0 clamp(12px, 4vw, 18px) 52px }
  .cta-inner {
    padding:44px 18px 36px;
    border-radius:16px;
    box-shadow: 0 6px 0 var(--orange);
    grid-template-columns:1fr;
    gap:24px;
    /* keep studs (top:-7px) visible — pseudo bg is already self-clipped */
    overflow:visible;
  }
  .cta-inner::before { width:100%; opacity:.3 }
  .cta-studs { left:18px; top:-7px; gap:8px }
  .cta-studs .stud { width:11px; height:11px }

  .cta-content { order:2; text-align:left; min-width:0 }
  .cta-book { order:1; min-height:auto; padding:8px 0 16px }

  .cta-eyebrow {
    font-size:9px;
    padding:4px 9px 4px 6px;
    margin-bottom:14px;
    gap:6px;
    border-radius:5px;
  }
  .cta-eyebrow::before { width:6px; height:6px }
  .cta h2 {
    letter-spacing:-0.6px;
    margin-bottom:12px;
    line-height:1;
  }
  .cta p {
    font-size:clamp(13px, 3.6vw, 14.5px);
    margin-bottom:16px;
    line-height:1.45;
  }

  .cta-features { margin-bottom:18px; gap:7px }
  .cta-features li { font-size:clamp(11.5px, 3.4vw, 13px); gap:9px }
  .cta-check { width:18px; height:18px; font-size:9px }

  .cta-actions {
    gap:6px;
    margin-bottom:18px;
    flex-direction:column;
    align-items:stretch;
  }
  .cta-actions .btn {
    justify-content:center;
    width:100%;
    padding:11px 14px;
    font-size:11px;
  }

  .cta-social-proof {
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding-top:16px;
    flex-wrap:wrap;
  }
  .cta-avatar { width:26px; height:26px; font-size:10px; border-width:1.5px }
  .cta-avatar-plus { font-size:8.5px }
  .cta-social-text { font-size:clamp(11px, 3.2vw, 12px); line-height:1.35 }

  /* Book → LEGO brick — mobile */
  .cta-book { display:flex; justify-content:center; padding-top:18px }
  .cta-brick {
    max-width:min(260px, 100%);
    padding:22px 18px 20px;
    border-radius:12px;
    box-shadow: 0 6px 0 var(--ink);
    gap:14px;
  }
  .cta-brick-studs { top:-12px; padding:0 18px }
  .cta-brick-stud { width:22px; height:22px }
  .cta-brick-header { padding-bottom:14px }
  .cta-brick-tag { font-size:9px; padding:4px 8px 4px 6px }
  .cta-brick-tag svg { width:9px; height:9px }
  .cta-brick-pages { font-size:9px }
  .cta-brick-pages strong { font-size:12px }
  .cta-brick-title {
    font-size: clamp(28px, 8vw, 42px);
    letter-spacing:-1px;
    line-height:.95;
  }
  .cta-brick-subtitle { font-size:11.5px; line-height:1.35 }
  .cta-brick-bottom { padding-top:14px }
  .cta-brick-brand { font-size:9px }
  .cta-brick-brand-dot { width:7px; height:7px }
  .cta-brick-download { width:36px; height:36px }
  .cta-brick-download svg { width:15px; height:15px }
  .cta-brick-badge {
    width:60px;
    height:60px;
    top:-14px;
    right:-10px;
  }
  .cta-brick-badge-num { font-size:16px }
  .cta-brick-badge-label { font-size:6.5px; margin-top:2px }

  /* ───────────── FOOTER ───────────── */
  footer { padding:44px 0 24px }
  .footer-inner { padding:0 clamp(12px, 4vw, 18px) }
  .footer-mega {
    font-size: clamp(60px, 22vw, 140px);
    letter-spacing:-1px;
    margin-bottom:28px;
    line-height:.9;
  }
  .footer-top {
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:22px;
    padding-bottom:22px;
  }
  .footer-brand img { height:30px; margin-bottom:12px }
  .footer-brand p { font-size:clamp(12.5px, 3.6vw, 14px); line-height:1.5 }
  .footer-col h5 { font-size:9.5px; margin-bottom:12px; gap:6px }
  .footer-col h5::before { width:8px; height:8px }
  .footer-col ul { gap:8px }
  .footer-col a { font-size:13px }
  .footer-bottom {
    flex-direction:column;
    font-size:9px;
    gap:10px;
    align-items:flex-start;
  }
  .footer-bottom .legal { font-size:9px }

  /* ───────────── CHATBOT LAUNCHER — make compact ───────────── */
  .chatbot-launcher {
    bottom:14px; right:14px;
    padding:10px 12px 12px;
    font-size:11.5px;
    gap:7px;
    border-radius:10px;
    max-width:calc(100vw - 28px);
  }
  .chatbot-launcher-stud { width:12px; height:12px }
  .chatbot-launcher-studs { padding:0 10px; top:-9px }
  .chatbot-launcher-pulse { width:11px; height:11px }
}

/* ═════════════════════════════════════════════
   EXTRA SMALL — iPhone SE / ≤ 380px
═════════════════════════════════════════════ */
@media (max-width:380px) {
  .nav { padding:9px 11px; gap:8px }
  .nav.scrolled { padding:7px 11px }
  .nav-brand { gap:8px }
  .nav-brand img { height:26px }
  /* Tight on iPhone SE — hide meta again to give logo room */
  .nav-brand-meta { display:none }
  .nav-burger { width:38px; height:38px; border-radius:8px }
  .nav-burger span { width:16px; height:2.25px }
  .mobile-menu-list a { padding:14px 18px; min-height:62px; gap:12px }
  .mobile-menu-title { font-size:17px }
  .mobile-menu-sub { font-size:11px }
  .mobile-menu-eyebrow { font-size:9.5px }
  .mobile-menu-header { padding:14px 16px }
  .wrap { padding:0 10px }

  .hero { padding:82px 0 8px }
  .hero h1 { letter-spacing:-0.4px; font-size:clamp(20px, 8vw, 26px); margin-bottom:12px }
  .hero-lead { font-size:12px; margin-bottom:12px }
  .hero-cta .btn { font-size:10px; padding:9px 12px }

  .hero-meta { gap:6px; margin-bottom:12px; padding-bottom:8px }
  .hero-meta-left { font-size:8.5px }
  .hero-meta-right { gap:3px }
  .flag-pill { font-size:7.5px; padding:1.5px 4px 1.5px 3px; gap:3px }
  .flag { width:10px; height:7px }
  .since-badge { font-size:7.5px; padding:1.5px 5px }
  .since-badge strong { font-size:9px }

  .svc { grid-template-columns: 56px 1fr 24px; gap:8px; padding:5px 8px 5px 5px }
  .svc-img { width:56px; height:46px }
  .svc-num { left:38px; width:18px; height:18px; font-size:8.5px }
  .svc-body h3 { font-size:11px }
  .svc-body p { font-size:9.5px; -webkit-line-clamp:1 }
  .svc-meta { gap:2px }
  .svc-meta span { font-size:7px; padding:1px 4px }
  .svc-arrow { width:24px; height:24px }
  .svc-arrow svg { width:9px; height:9px }

  .marquee-item { font-size:12px; padding:0 10px; gap:10px }

  .clients-wall { grid-template-columns:repeat(2, 1fr) }
  .clients-wall .c-logo { height:46px }
  .clients-wall .c-logo:nth-child(3),
  .clients-wall .c-logo:nth-child(4),
  .clients-wall .c-logo:nth-child(5),
  .clients-wall .c-logo:nth-child(6) { border-top:1px solid var(--line-soft) }
  .clients-wall .c-logo:nth-child(3)::before { display:none }
  .clients-wall .c-logo:nth-child(5)::before { display:none }

  .section { padding:36px 0 }
  .app-card { padding:22px 16px 16px }
  .app-card h3 { font-size:18px }
  .app-card-icon { width:44px; height:44px; margin-bottom:14px }
  .app-card-icon svg { width:20px; height:20px }
  .app-card-desc { font-size:12.5px }

  .stat-n { font-size:34px; letter-spacing:-1px }
  .stat-n em { font-size:22px }

  .quote { padding:36px 0 }
  .quote-card { padding:28px 16px 22px }
  .quote blockquote { font-size:18px }

  .cta { padding:0 10px 44px }
  .cta-inner { padding:36px 14px 28px }
  .cta p { font-size:12.5px }
  .cta-features li { font-size:11.5px }
  .cta-actions .btn { font-size:10.5px; padding:10px 12px }

  .cta-brick { max-width:min(220px, 100%); padding:20px 16px 18px }
  .cta-brick-title { font-size:26px }
  .cta-brick-studs { top:-11px; padding:0 14px }
  .cta-brick-stud { width:20px; height:20px }
  .cta-brick-subtitle { font-size:11px }
  .cta-brick-badge { width:50px; height:50px; top:-12px; right:-10px }
  .cta-brick-badge-num { font-size:14px }
  .cta-brick-badge-label { font-size:6px }
  .cta-brick-download { width:32px; height:32px }
  .cta-brick-download svg { width:13px; height:13px }

  .chatbot-launcher { font-size:11px; padding:9px 11px 11px }
}