/*!
 * Top Digital Push — Home Page template styles
 * File: assets/css/home.css   (loaded only by the "Home Page" template)
 * Zero dependencies, no @import, no web fonts, no external requests.
 */
/* ══════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — brand pulled from the Top Digital Push logo
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --purple:#4A1DBE;
  --purple-600:#5A2BD8;
  --purple-700:#3D169F;
  --purple-900:#1E0A57;
  --ink:#140B2E;
  --ink-soft:#3B2E5A;
  --muted:#6B6086;
  --orange:#FF7A2F;
  --orange-400:#FF9A5C;
  --peach:#FFB98A;
  --lav-50:#F7F5FF;
  --lav-100:#EEE9FE;
  --lav-200:#DCD2FC;
  --line:#E6E0F7;
  --white:#fff;
  --ok:#12A66B;

  --grad-brand:linear-gradient(135deg,#5A2BD8 0%,#4A1DBE 55%,#2E0F80 100%);
  --grad-fire:linear-gradient(135deg,#FF9A5C 0%,#FF7A2F 100%);

  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
  --sh-sm:0 1px 2px rgba(20,11,46,.06),0 2px 8px rgba(20,11,46,.05);
  --sh:0 4px 12px rgba(20,11,46,.07),0 12px 32px rgba(20,11,46,.07);
  --sh-lg:0 8px 24px rgba(20,11,46,.10),0 24px 64px rgba(30,10,87,.14);
  --sh-glow:0 10px 30px rgba(255,122,47,.32);

  --ff:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1180px;
  --gut:clamp(18px,4vw,40px);
  --sec:clamp(64px,8vw,116px);
}

/* ── reset ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
body{
  margin:0;font-family:var(--ff);color:var(--ink);background:var(--white);
  font-size:clamp(16px,1.02vw,17.5px);line-height:1.68;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--purple);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.022em;margin:0 0 .55em;font-weight:800;color:var(--ink)}
h1{font-size:clamp(2.05rem,5.3vw,4rem);letter-spacing:-.032em}
h2{font-size:clamp(1.72rem,3.7vw,2.85rem);letter-spacing:-.028em}
h3{font-size:clamp(1.12rem,1.55vw,1.34rem);font-weight:750}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.15em}
li{margin-bottom:.5em}
strong{font-weight:700;color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
::selection{background:var(--purple);color:#fff}

/* ── layout ── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sec{padding-block:var(--sec)}
.sec--tight{padding-block:clamp(46px,5.5vw,76px)}
.center{text-align:center}
.lead{font-size:clamp(1.04rem,1.35vw,1.22rem);color:var(--ink-soft);line-height:1.62}
.mx{max-width:74ch;margin-inline:auto}
.mx-sm{max-width:60ch;margin-inline:auto}

.eyebrow{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.735rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--purple);background:var(--lav-100);
  padding:.5em 1em;border-radius:var(--r-pill);margin-bottom:1.1em;
  border:1px solid var(--lav-200);
}
.eyebrow--on-dark{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--orange);flex:0 0 auto}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-weight:750;font-size:1rem;line-height:1;text-align:center;
  padding:1.05em 1.85em;border-radius:var(--r-pill);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,background .18s,color .18s;
  white-space:nowrap;text-decoration:none!important;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--fire{background:var(--grad-fire);color:#2A1200;box-shadow:var(--sh-glow)}
.btn--fire:hover{box-shadow:0 14px 38px rgba(255,122,47,.44)}
.btn--purple{background:var(--purple);color:#fff;box-shadow:0 8px 24px rgba(74,29,190,.28)}
.btn--purple:hover{background:var(--purple-600);box-shadow:0 12px 32px rgba(74,29,190,.36)}
.btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34)}
.btn--ghost:hover{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.btn--outline{background:#fff;color:var(--purple);box-shadow:inset 0 0 0 2px var(--lav-200)}
.btn--outline:hover{box-shadow:inset 0 0 0 2px var(--purple)}
.btn--lg{padding:1.18em 2.2em;font-size:1.06rem}
.btn--full{width:100%}
.btn .arw{transition:transform .18s}
.btn:hover .arw{transform:translateX(3px)}

/* ══════════════ HEADER ══════════════ */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;color:var(--purple);padding:1em 1.4em;font-weight:700;border-radius:0 0 var(--r) 0}
.skip:focus{left:0}

.hdr{
  position:sticky;top:0;z-index:120;
  background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;
}
.hdr.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 18px rgba(20,11,46,.06)}
.hdr__in{
  display:flex;align-items:center;flex-wrap:nowrap;
  gap:clamp(12px,2vw,28px);min-height:74px;
  transition:min-height .25s ease;
}
/* Shave 10px off the bar once the page has scrolled. Small enough that nobody
   consciously notices, big enough that the content feels like it gained room. */
.hdr.is-stuck .hdr__in{min-height:64px}
.logo{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.logo__mark{width:42px;height:42px;flex:0 0 auto;border-radius:12px}
.logo__txt{font-weight:900;letter-spacing:-.035em;line-height:.98;font-size:1.02rem;color:var(--ink);text-transform:uppercase}
.logo__txt span{display:block}
.logo__txt .accent{color:var(--purple)}
.logo:hover{text-decoration:none}

.nav{display:flex;align-items:center;gap:clamp(6px,1.35vw,22px);margin-left:auto;min-width:0}
.nav a{
  position:relative;white-space:nowrap;
  font-size:.93rem;font-weight:600;color:var(--ink-soft);padding:.5em .28em;
  transition:color .16s;
}
/* The hover underline is a pseudo-element that opens from the centre rather
   than a border-bottom that switches colour. Two reasons: it can animate, and
   it occupies no layout, so a link cannot nudge its neighbours on hover. */
.nav a::after{
  content:"";position:absolute;left:50%;right:50%;bottom:.05em;height:2px;
  background:var(--orange);border-radius:2px;
  transition:left .22s cubic-bezier(.2,.8,.3,1),right .22s cubic-bezier(.2,.8,.3,1);
}
.nav a:hover{color:var(--purple);text-decoration:none}
.nav a:hover::after{left:.28em;right:.28em}

/* ── Mobile-only members of the nav list ──────────────────────────────────
   The phone link and the CTA button ship inside <nav> so the burger menu has
   them, and so the page still works with CSS disabled. Above the burger
   breakpoint they duplicate .hdr__cta — that duplication is what pushed the
   header past its 1180px container, wrapped "How It Works" onto three lines
   and ran the last button off the right edge. Hide them on desktop. */
.nav .m-tel,.nav .btn{display:none}

/* Extra breathing room and a hairline before the actions. Without it the
   phone number reads as a seventh nav link instead of the start of the
   "do something" group. */
.hdr__cta{
  display:flex;align-items:center;gap:12px;flex:0 0 auto;
  margin-left:clamp(4px,1vw,14px);padding-left:clamp(10px,1.4vw,20px);
  border-left:1px solid var(--line);
}
.hdr__tel{
  font-weight:750;font-size:.94rem;color:var(--ink);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.45em;
  transition:color .16s,background .16s;
}
.hdr__tel:hover{color:var(--purple);text-decoration:none}
.hdr .btn{padding:.8em 1.35em;font-size:.92rem}

.burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;margin-left:auto;background:var(--lav-100)}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative;transition:transform .22s,opacity .22s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);transition:transform .22s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{transform:rotate(45deg)}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(-90deg)}
.burger[aria-expanded="true"] span::after{opacity:0}

/* ── 1000–1199px ───────────────────────────────────────────────────────────
   Six nav links, a phone number and a CTA is more than this width can hold
   comfortably. The number collapses to its icon: it keeps the same tel: href
   and the same aria-label, so it still dials and screen readers still
   announce "Call Top Digital Push" — it just stops spending 130px saying so. */
@media (max-width:1199px){
  .hdr__tel{
    width:40px;height:40px;gap:0;justify-content:center;
    border-radius:50%;background:var(--lav-100);
  }
  .hdr__tel:hover{background:var(--lav-200)}
  .hdr__tel__num{display:none}
  .hdr__tel svg{width:18px;height:18px}
}

@media (max-width:1000px){
  .nav,.hdr__cta{display:none}
  .burger{display:flex}
  .nav.is-open{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;left:0;right:0;top:100%;background:#fff;
    padding:12px var(--gut) 26px;border-bottom:1px solid var(--line);
    box-shadow:var(--sh-lg);max-height:calc(100vh - 74px);overflow-y:auto;
  }
  .nav.is-open a{padding:.95em 0;border-bottom:1px solid var(--line);font-size:1.05rem;font-weight:650;color:var(--ink)}
  /* Bring back the two items desktop hides — the open drawer is the only
     place they are shown, and the rule above hides them everywhere. */
  .nav.is-open .btn{display:flex;margin-top:18px;justify-content:center;padding:1.05em 1.6em;font-size:1rem}
  .nav.is-open .m-tel{display:block;margin-top:10px;text-align:center;font-weight:750;color:var(--purple);border:0}
  /* Stacked rows already have divider lines; the sliding underline would just
     be noise on top of them. */
  .nav.is-open a::after{display:none}
}

/* ══════════════ HERO ══════════════ */
.hero{position:relative;background:var(--grad-brand);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(760px 460px at 84% 8%,rgba(255,122,47,.34),transparent 62%),
    radial-gradient(620px 520px at 6% 96%,rgba(255,185,138,.18),transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 22%,#000 12%,transparent 72%);
  -webkit-mask-image:radial-gradient(circle at 50% 22%,#000 12%,transparent 72%);
}
.hero__in{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(34px,4.4vw,68px);
  align-items:center;padding-block:clamp(52px,6.5vw,92px) clamp(56px,6.5vw,96px);
}
.hero h1{color:#fff;text-wrap:balance}
.hero h1 .hl{
  background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.hero__sub{font-size:clamp(1.06rem,1.42vw,1.26rem);color:rgba(255,255,255,.9);max-width:56ch;line-height:1.6;margin-bottom:1.6em}
.hero__acts{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}
.hero__ticks{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;padding:0;margin:0;font-size:.93rem;color:rgba(255,255,255,.86);font-weight:600}
.hero__ticks li{display:flex;align-items:center;gap:.5em;margin:0}
.tick{width:18px;height:18px;flex:0 0 auto;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.tick svg{width:10px;height:10px}

/* engine logos strip */
.engines{margin-top:34px;padding-top:26px;border-top:1px solid rgba(255,255,255,.16)}
.engines__lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:rgba(255,255,255,.58);margin-bottom:14px}
.engines__row{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:.5em;font-size:.855rem;font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:.55em 1em;border-radius:var(--r-pill);color:#fff;
}
.chip svg{width:15px;height:15px;opacity:.95}

/* ── hero form card ── */
.card-form{
  background:#fff;color:var(--ink);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,34px);box-shadow:var(--sh-lg);position:relative;
}
.card-form__flag{
  position:absolute;top:-13px;left:clamp(22px,2.4vw,34px);
  background:var(--grad-fire);color:#2A1200;font-size:.715rem;font-weight:850;
  letter-spacing:.09em;text-transform:uppercase;padding:.5em 1em;border-radius:var(--r-pill);
  box-shadow:var(--sh-glow);
}
.card-form h2{font-size:clamp(1.34rem,2vw,1.66rem);margin-bottom:.35em;margin-top:.2em}
.card-form__sub{font-size:.93rem;color:var(--muted);margin-bottom:1.35em;line-height:1.55}

.f-grid{display:grid;gap:13px}
.f-grid--2{grid-template-columns:1fr 1fr}
.field{display:block;position:relative}
.field > span{display:block;font-size:.815rem;font-weight:750;color:var(--ink-soft);margin-bottom:.42em}
.field > span .req{color:var(--orange)}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:.975rem;color:var(--ink);
  padding:.86em 1em;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--lav-50);transition:border-color .16s,box-shadow .16s,background .16s;
}
.field textarea{min-height:88px;resize:vertical}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B6086' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:11px;padding-right:2.6em}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(74,29,190,.11);
}
.field input::placeholder,.field textarea::placeholder{color:#A79FBD}
.field.err input,.field.err select{border-color:#E03B3B;background:#FFF6F6}
.f-err{display:none;font-size:.79rem;color:#D22B2B;font-weight:650;margin-top:.35em}
.field.err .f-err{display:block}
.f-note{font-size:.775rem;color:var(--muted);line-height:1.5;margin:.9em 0 0}
.f-note a{font-weight:650}
.f-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:1em;font-size:.775rem;color:var(--muted);font-weight:650}
.f-trust span{display:inline-flex;align-items:center;gap:.4em}
.f-trust svg{width:13px;height:13px;color:var(--ok)}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

.f-ok{display:none;text-align:center;padding:1.2em .5em}
.f-ok.show{display:block}
.f-ok__ic{width:62px;height:62px;margin:0 auto 1em;border-radius:50%;background:#E9F9F1;display:grid;place-items:center}
.f-ok__ic svg{width:30px;height:30px;color:var(--ok)}
.f-ok h3{font-size:1.3rem;margin-bottom:.4em}
.f-ok p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.5em}
form.sent .f-body{display:none}

/* ══════════════ SOCIAL PROOF BAR ══════════════ */
.proof{background:var(--lav-50);border-block:1px solid var(--line)}
.proof__in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(18px,3.4vw,54px);padding-block:26px}
.proof__item{display:flex;align-items:center;gap:.7em;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.proof__item svg{width:20px;height:20px;color:var(--purple);flex:0 0 auto}
.stars{display:inline-flex;gap:2px;color:var(--orange)}
.stars svg{width:15px;height:15px;color:var(--orange)}

/* ══════════════ GENERIC CARD GRIDS ══════════════ */
.grid{display:grid;gap:clamp(16px,1.9vw,26px)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.3vw,32px);box-shadow:var(--sh-sm);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--lav-200)}
.card h3{margin-bottom:.5em}
.card p{font-size:.945rem;color:var(--ink-soft);margin-bottom:.85em}
.card p:last-child{margin-bottom:0}
.ic{
  width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-bottom:1.1em;
  background:var(--lav-100);color:var(--purple);flex:0 0 auto;
}
.ic svg{width:25px;height:25px}
.ic--fire{background:linear-gradient(135deg,#FFF0E5,#FFE3D0);color:#E85D00}
.card--flag::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad-fire);
}

/* problem cards (dark) */
.dark{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.dark::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(680px 420px at 12% 4%,rgba(90,43,216,.42),transparent 62%),radial-gradient(560px 380px at 90% 92%,rgba(255,122,47,.16),transparent 62%)}
.dark h2,.dark h3{color:#fff}
.dark .lead{color:rgba(255,255,255,.78)}
.card--dark{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11);box-shadow:none}
.card--dark:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}
.card--dark p{color:rgba(255,255,255,.74)}
.card--dark .ic{background:rgba(255,122,47,.16);color:var(--orange-400)}

/* ══════════════ SEARCH-DEMO MOCKUP ══════════════ */
.demo{
  background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden;
  border:1px solid var(--line);max-width:560px;
}
.demo__bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--lav-50);border-bottom:1px solid var(--line)}
.demo__bar i{width:10px;height:10px;border-radius:50%;background:#D9D2EC;display:block}
.demo__bar i:first-child{background:#FF7A2F}
.demo__url{margin-left:8px;font-size:.76rem;color:var(--muted);font-weight:650}
.demo__body{padding:20px 22px 24px}
.demo__q{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}
.demo__q .av{width:26px;height:26px;border-radius:50%;background:var(--lav-100);color:var(--purple);display:grid;place-items:center;font-size:.68rem;font-weight:900;flex:0 0 auto}
.demo__q p{margin:0;font-size:.95rem;font-weight:700;color:var(--ink)}
.demo__a{display:flex;gap:10px;align-items:flex-start}
.demo__a .av{width:26px;height:26px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.demo__a .av svg{width:13px;height:13px}
.demo__a p{margin:0 0 .7em;font-size:.9rem;color:var(--ink-soft);line-height:1.62}
.demo__a p:last-child{margin-bottom:0}
.demo mark{background:linear-gradient(180deg,transparent 58%,rgba(255,122,47,.42) 58%);color:var(--ink);font-weight:800;padding:0 2px}
.demo__cite{font-size:.76rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.demo__cite b{color:var(--purple);font-weight:750;background:var(--lav-100);padding:.2em .6em;border-radius:5px}
.blink{display:inline-block;width:7px;height:14px;background:var(--purple);vertical-align:-2px;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}

/* ══════════════ AT-A-GLANCE TABLE (LLM-friendly) ══════════════ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--sh-sm)}
table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:600px}
caption{text-align:left;font-size:.85rem;color:var(--muted);padding:14px 18px 0;font-weight:650}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--lav-50);font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--purple);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--lav-50)}
td:first-child{font-weight:700;color:var(--ink)}

/* ══════════════ PROCESS ══════════════ */
.steps{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:repeat(4,1fr);counter-reset:s}
.step{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);position:relative;box-shadow:var(--sh-sm);
}
.step__n{
  width:44px;height:44px;border-radius:13px;background:var(--grad-brand);color:#fff;
  display:grid;place-items:center;font-weight:900;font-size:1.06rem;margin-bottom:1em;
  box-shadow:0 6px 16px rgba(74,29,190,.26);
}
.step h3{font-size:1.06rem;margin-bottom:.45em}
.step p{font-size:.9rem;color:var(--ink-soft);margin:0}
.step__wk{display:inline-block;margin-top:1em;font-size:.735rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--orange);background:#FFF3EA;padding:.42em .8em;border-radius:var(--r-pill)}

/* ══════════════ STATS ══════════════ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,24px)}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);padding:clamp(20px,2.2vw,30px);text-align:center}
.stat__n{font-size:clamp(2rem,3.6vw,2.9rem);font-weight:900;letter-spacing:-.04em;line-height:1;background:var(--grad-fire);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;margin-bottom:.3em}
.stat__l{font-size:.875rem;color:rgba(255,255,255,.76);line-height:1.45;font-weight:600}

/* ══════════════ WHY US split ══════════════ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);align-items:center}
.feat{display:flex;gap:16px;margin-bottom:26px}
.feat:last-child{margin-bottom:0}
.feat__ic{width:44px;height:44px;border-radius:13px;background:var(--lav-100);color:var(--purple);display:grid;place-items:center;flex:0 0 auto}
.feat__ic svg{width:21px;height:21px}
.feat h3{font-size:1.06rem;margin-bottom:.3em}
.feat p{font-size:.925rem;color:var(--ink-soft);margin:0}

/* vs comparison */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,22px)}
.vs__col{border-radius:var(--r-lg);padding:clamp(22px,2.3vw,30px);border:1px solid var(--line);background:#fff}
.vs__col--bad{background:var(--lav-50)}
.vs__col--good{border-color:var(--purple);box-shadow:0 0 0 4px rgba(74,29,190,.09),var(--sh);position:relative}
.vs__col--good::before{content:"Top Digital Push";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--purple);color:#fff;font-size:.7rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;padding:.45em 1em;border-radius:var(--r-pill);white-space:nowrap}
.vs__h{font-size:.78rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1em}
.vs__col--good .vs__h{color:var(--purple)}
.vs ul{list-style:none;padding:0;margin:0}
.vs li{display:flex;gap:.7em;font-size:.925rem;margin-bottom:.85em;color:var(--ink-soft);line-height:1.55}
.vs li:last-child{margin-bottom:0}
.vs li svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px}
.vs--x svg{color:#C9BFE0}
.vs--v svg{color:var(--ok)}

/* ══════════════ PRICING ══════════════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,26px);align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(24px,2.4vw,34px);box-shadow:var(--sh-sm);display:flex;flex-direction:column;height:100%}
.plan--top{border:2px solid var(--purple);box-shadow:0 0 0 5px rgba(74,29,190,.08),var(--sh-lg);position:relative;transform:scale(1.015)}
.plan__tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad-fire);color:#2A1200;font-size:.7rem;font-weight:850;letter-spacing:.09em;text-transform:uppercase;padding:.5em 1.1em;border-radius:var(--r-pill);box-shadow:var(--sh-glow);white-space:nowrap}
.plan h3{font-size:1.22rem;margin-bottom:.25em}
.plan__for{font-size:.85rem;color:var(--muted);margin-bottom:1.2em;font-weight:600;min-height:2.6em}
.plan__p{display:flex;align-items:baseline;gap:.25em;margin-bottom:.2em}
.plan__cur{font-size:1.16rem;font-weight:800;color:var(--ink-soft)}
.plan__amt{font-size:clamp(2.05rem,3vw,2.5rem);font-weight:900;letter-spacing:-.04em;color:var(--ink);line-height:1}
.plan__per{font-size:.88rem;color:var(--muted);font-weight:650}
.plan__vat{font-size:.76rem;color:var(--muted);margin-bottom:1.5em}
.plan ul{list-style:none;padding:0;margin:0 0 1.7em}
.plan li{display:flex;gap:.65em;font-size:.9rem;color:var(--ink-soft);margin-bottom:.72em;line-height:1.5}
.plan li svg{width:16px;height:16px;color:var(--ok);flex:0 0 auto;margin-top:3px}
.plan .btn{margin-top:auto}

/* ══════════════ TESTIMONIALS ══════════════ */
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.3vw,30px);box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.quote__stars{margin-bottom:1em}
.quote blockquote{margin:0 0 1.3em;font-size:1rem;line-height:1.66;color:var(--ink);font-weight:500}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.av-init{width:42px;height:42px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-weight:850;font-size:.9rem;flex:0 0 auto}
.quote__who{font-size:.9rem;font-weight:800;color:var(--ink);line-height:1.3}
.quote__role{font-size:.815rem;color:var(--muted);font-weight:600}

/* ══════════════ FAQ ══════════════ */
.faq{max-width:860px;margin-inline:auto}
.acc{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;overflow:hidden;transition:box-shadow .2s,border-color .2s}
.acc[open]{box-shadow:var(--sh);border-color:var(--lav-200)}
.acc summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:19px 22px;font-weight:750;font-size:1.02rem;cursor:pointer;list-style:none;color:var(--ink);
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--purple)}
.acc summary .pm{width:26px;height:26px;flex:0 0 auto;border-radius:8px;background:var(--lav-100);color:var(--purple);display:grid;place-items:center;transition:transform .22s,background .22s}
.acc[open] summary .pm{transform:rotate(45deg);background:var(--purple);color:#fff}
.acc summary .pm svg{width:13px;height:13px}
.acc__body{padding:0 22px 22px}
.acc__body p{font-size:.945rem;color:var(--ink-soft);margin-bottom:.8em}
.acc__body p:last-child{margin-bottom:0}
.acc__body ul{font-size:.945rem;color:var(--ink-soft)}

/* ══════════════ FINAL CTA ══════════════ */
.cta{background:var(--grad-brand);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(700px 420px at 78% 12%,rgba(255,122,47,.3),transparent 62%)}
.cta__in{display:grid;grid-template-columns:1fr .88fr;gap:clamp(30px,4vw,62px);align-items:center}
.cta h2{color:#fff}
.cta .lead{color:rgba(255,255,255,.86)}
/* the form card sits on a dark section — keep its own text dark (specificity
   must beat `.cta h2` / `.dark h2`, hence the element-qualified selector) */
form.card-form h2,form.card-form h3{color:var(--ink)}
.cta__ways{display:grid;gap:12px;margin-top:26px}
.cta__way{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:14px 18px;color:#fff;font-weight:700;transition:background .18s,transform .18s}
.cta__way:hover{background:rgba(255,255,255,.15);transform:translateX(3px);text-decoration:none}
.cta__way .ic-sm{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:0 0 auto}
.cta__way .ic-sm svg{width:18px;height:18px}
.cta__way small{display:block;font-size:.76rem;font-weight:600;color:rgba(255,255,255,.66);letter-spacing:.02em}

/* ══════════════ FOOTER ══════════════ */
.ftr{background:var(--ink);color:rgba(255,255,255,.68);padding-block:clamp(46px,5.5vw,72px) 0;font-size:.93rem}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(26px,3.4vw,48px);padding-bottom:44px}
.ftr h4{color:#fff;font-size:.78rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2em}
.ftr ul{list-style:none;padding:0;margin:0}
.ftr li{margin-bottom:.7em}
.ftr a{color:rgba(255,255,255,.68)}
.ftr a:hover{color:#fff}
.ftr .logo__txt{color:#fff}
.ftr .logo__txt .accent{color:var(--orange-400)}
.ftr__blurb{margin:1.2em 0 1.4em;font-size:.9rem;line-height:1.62;max-width:36ch}
.ftr__soc{display:flex;gap:10px}
.ftr__soc a{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff;transition:background .18s,transform .18s}
.ftr__soc a:hover{background:var(--purple-600);transform:translateY(-2px)}
.ftr__soc svg{width:17px;height:17px}
.nap{font-style:normal;line-height:1.75}
.nap a{font-weight:700;color:#fff}
.ftr__bot{border-top:1px solid rgba(255,255,255,.1);padding-block:22px;display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;justify-content:space-between;font-size:.83rem}
.ftr__bot ul{display:flex;flex-wrap:wrap;gap:10px 20px}
.ftr__bot li{margin:0}

/* ══════════════ STICKY MOBILE CTA ══════════════ */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.95);backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -4px 22px rgba(20,11,46,.1);
  transform:translateY(110%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
}
.sticky.show{transform:translateY(0)}
.sticky .btn{flex:1;padding:.95em 1em;font-size:.925rem}
@media (max-width:780px){.sticky{display:flex}body{padding-bottom:0}}

/* whatsapp float */
.wa{
  position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:105;
  width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(37,211,102,.42);
  transition:transform .2s;
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:29px;height:29px}
@media (max-width:780px){.wa{bottom:calc(84px + env(safe-area-inset-bottom));width:50px;height:50px}.wa svg{width:25px;height:25px}}

/* ══════════════ MODAL (exit intent / scroll) ══════════════ */
.mdl{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(20,11,46,.68);backdrop-filter:blur(5px);
}
.mdl.open{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.mdl__box{
  background:#fff;border-radius:var(--r-lg);max-width:520px;width:100%;
  max-height:92vh;overflow-y:auto;box-shadow:var(--sh-lg);position:relative;
  animation:pop .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes pop{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.mdl__hd{background:var(--grad-brand);color:#fff;padding:26px clamp(22px,3vw,32px);border-radius:var(--r-lg) var(--r-lg) 0 0}
.mdl__hd .eyebrow{margin-bottom:.8em}
.mdl__hd h2{color:#fff;font-size:clamp(1.34rem,2.4vw,1.72rem);margin-bottom:.35em}
.mdl__hd p{margin:0;font-size:.94rem;color:rgba(255,255,255,.85);line-height:1.55}
.mdl__bd{padding:clamp(22px,3vw,32px)}
.mdl__x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;z-index:2;
  transition:background .18s;
}
.mdl__x:hover{background:rgba(255,255,255,.34)}
.mdl__x svg{width:15px;height:15px}
body.lock{overflow:hidden}

/* ══════════════════════════════════════════════════════════════════════
   LIQUID GLASS LAYER  (iOS 26-style)
   ──────────────────────────────────────────────────────────────────────
   Recipe per surface: translucent fill + backdrop blur/saturate, a bright
   1px top-edge specular highlight, an inner rim light, and a soft ambient
   shadow so the panel reads as floating glass rather than a flat card.

   Three guardrails, all deliberate:
   • Text stays fully opaque — only surfaces are translucent, never copy.
   • `@supports` fallback to a solid tint where backdrop-filter is absent.
   • Blur is dropped on small screens (see RESPONSIVE) because dozens of
     simultaneous backdrop-filters jank scrolling on mid-range Android.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --g-blur:22px;
  --g-sat:180%;
  --g-fill:rgba(255,255,255,.58);
  --g-fill-strong:rgba(255,255,255,.76);
  --g-rim:rgba(255,255,255,.75);
  --g-spec:rgba(255,255,255,.92);
  --g-sh:0 1px 1px rgba(20,11,46,.04),0 8px 24px rgba(30,10,87,.07),0 26px 52px rgba(30,10,87,.06);
  --g-sh-lift:0 2px 4px rgba(20,11,46,.05),0 14px 34px rgba(30,10,87,.11),0 34px 68px rgba(30,10,87,.09);
  /* dark-section glass */
  --gd-fill:rgba(255,255,255,.07);
  --gd-rim:rgba(255,255,255,.16);
  --gd-spec:rgba(255,255,255,.30);
  --r-glass:28px;
}

/* the shared glass surface */
.card,.step,.plan,.quote,.acc,form.card-form,.demo,.tbl-wrap,.vs__col,.stat,.mdl__box{
  background:var(--g-fill);
  backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  -webkit-backdrop-filter:blur(var(--g-blur)) saturate(var(--g-sat));
  border:1px solid var(--g-rim);
  border-radius:var(--r-glass);
  box-shadow:var(--g-sh),inset 0 1px 0 var(--g-spec),inset 0 0 0 1px rgba(255,255,255,.22);
  position:relative;
}
/* specular sheen falling off from the top edge */
.card::after,.step::after,.plan::after,.quote::after,form.card-form::after,
.demo::after,.vs__col::after,.stat::after,.mdl__box::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.06) 38%,transparent 64%);
}
/* keep real content above the sheen */
.card > *,.step > *,.plan > *,.quote > *,form.card-form > *,.vs__col > *,.stat > *{position:relative;z-index:1}

.card:hover,.step:hover,.plan:hover,.quote:hover{
  box-shadow:var(--g-sh-lift),inset 0 1px 0 var(--g-spec),inset 0 0 0 1px rgba(255,255,255,.3);
  border-color:rgba(255,255,255,.9);
}
.card:hover{transform:translateY(-5px)}
.acc[open]{box-shadow:var(--g-sh-lift),inset 0 1px 0 var(--g-spec);border-color:rgba(255,255,255,.9)}
.plan--top{
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1.5px rgba(74,29,190,.28),var(--g-sh-lift),inset 0 1px 0 var(--g-spec);
}
.vs__col--good{box-shadow:0 0 0 1.5px rgba(74,29,190,.26),var(--g-sh-lift),inset 0 1px 0 var(--g-spec)}
.vs__col--bad{background:rgba(255,255,255,.4)}

/* dark sections: glass tinted the other way */
.dark .card,.dark .stat,.card--dark{
  background:var(--gd-fill);
  border-color:var(--gd-rim);
  box-shadow:0 8px 30px rgba(0,0,0,.18),inset 0 1px 0 var(--gd-spec);
}
.dark .card::after,.dark .stat::after,.card--dark::after{
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,transparent 52%);
}
.card--dark:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.26)}

/* glass pills: eyebrows, chips, icon tiles */
.eyebrow{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  border-color:rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(30,10,87,.07),inset 0 1px 0 rgba(255,255,255,.9);
}
.eyebrow--on-dark{
  background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.2);
  box-shadow:0 2px 12px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.24);
}
.chip{
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 2px 12px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.26);
}
.ic{
  background:rgba(255,255,255,.5);
  backdrop-filter:blur(10px) saturate(160%);
  -webkit-backdrop-filter:blur(10px) saturate(160%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 4px 14px rgba(30,10,87,.09),inset 0 1px 0 rgba(255,255,255,.95);
  border-radius:18px;
}
.ic--fire{background:linear-gradient(160deg,rgba(255,240,229,.9),rgba(255,227,208,.75))}
.dark .ic,.card--dark .ic{
  background:rgba(255,122,47,.18);border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.feat__ic,.step__n,.av-init,.cta__way .ic-sm{border-radius:16px}
.feat__ic{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 3px 12px rgba(30,10,87,.08),inset 0 1px 0 rgba(255,255,255,.95);
}

/* chrome: header, sticky bar, modal scrim */
.hdr{background:rgba(255,255,255,.62);backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%)}
.hdr.is-stuck{
  background:rgba(255,255,255,.74);border-bottom-color:rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 8px 30px rgba(30,10,87,.09);
}
.sticky{
  background:rgba(255,255,255,.72);backdrop-filter:blur(26px) saturate(190%);-webkit-backdrop-filter:blur(26px) saturate(190%);
  border-top:1px solid rgba(255,255,255,.75);
  box-shadow:0 -1px 0 rgba(255,255,255,.6),0 -10px 34px rgba(30,10,87,.12);
}
.mdl{background:rgba(20,11,46,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mdl__box{background:var(--g-fill-strong);border-radius:32px}
.mdl__hd{border-radius:31px 31px 0 0}
/* The mobile drawer deliberately opts OUT of the glass treatment the rest of
   the surfaces share. It is the one panel that overlays the saturated hero,
   and translucency there puts dark 1.05rem menu labels on top of 3rem white
   headline type — legible in a mockup, a mess on a real phone in daylight.
   It is also the fourth backdrop-filter in a stack the file elsewhere caps at
   three for compositing cost. Solid, with a soft edge to keep it feeling
   attached to the header. */
.nav.is-open{
  background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:var(--line);
  box-shadow:0 18px 40px rgba(30,10,87,.18),0 2px 0 rgba(30,10,87,.04);
}
.burger{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

/* buttons get a glass-adjacent sheen too */
.btn--outline{
  background:rgba(255,255,255,.6);backdrop-filter:blur(14px) saturate(170%);-webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:inset 0 0 0 1.5px rgba(74,29,190,.2),0 2px 10px rgba(30,10,87,.07),inset 0 1px 0 rgba(255,255,255,.9);
}
.btn--outline:hover{box-shadow:inset 0 0 0 1.5px rgba(74,29,190,.55),0 6px 18px rgba(30,10,87,.1),inset 0 1px 0 rgba(255,255,255,.9)}
.btn--ghost{backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);background:rgba(255,255,255,.1)}
.btn--fire{box-shadow:var(--sh-glow),inset 0 1px 0 rgba(255,255,255,.5)}
.btn--purple{box-shadow:0 8px 24px rgba(74,29,190,.28),inset 0 1px 0 rgba(255,255,255,.24)}
.cta__way{
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
  border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}

/* form fields: inset glass wells */
.field input,.field select,.field textarea{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.85);
  border-radius:14px;
  box-shadow:inset 0 1px 3px rgba(30,10,87,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.field input:focus,.field select:focus,.field textarea:focus{
  background:rgba(255,255,255,.95);border-color:var(--purple);
  box-shadow:0 0 0 4px rgba(74,29,190,.13),inset 0 1px 3px rgba(30,10,87,.04);
}

/* ── SECTION SUBSTRATE ───────────────────────────────────────────────
   Glass needs something behind it to refract. These soft colour meshes
   give every light section depth without touching text contrast.       */
#ai-visibility,#services,#process,#why,#pricing,#results,#faq{
  position:relative;isolation:isolate;
}
#ai-visibility::before,#services::before,#process::before,#why::before,
#pricing::before,#results::before,#faq::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
}
#services,#pricing,#faq{background:var(--lav-50);border-block:1px solid rgba(255,255,255,.6)}
#services::before{background:
  radial-gradient(700px 460px at 6% 2%,rgba(255,122,47,.11),transparent 62%),
  radial-gradient(760px 520px at 97% 22%,rgba(90,43,216,.13),transparent 64%),
  radial-gradient(600px 420px at 44% 100%,rgba(255,185,138,.10),transparent 60%)}
#pricing::before{background:
  radial-gradient(720px 480px at 92% 4%,rgba(255,122,47,.12),transparent 62%),
  radial-gradient(680px 460px at 4% 40%,rgba(90,43,216,.12),transparent 62%)}
#faq::before{background:
  radial-gradient(680px 440px at 12% 6%,rgba(90,43,216,.11),transparent 62%),
  radial-gradient(620px 420px at 94% 60%,rgba(255,122,47,.09),transparent 62%)}
#ai-visibility::before{background:
  radial-gradient(760px 500px at 96% 6%,rgba(90,43,216,.10),transparent 64%),
  radial-gradient(620px 420px at 2% 70%,rgba(255,122,47,.08),transparent 62%)}
#process::before{background:
  radial-gradient(700px 460px at 8% 8%,rgba(255,122,47,.09),transparent 62%),
  radial-gradient(720px 480px at 95% 70%,rgba(90,43,216,.11),transparent 62%)}
#why::before{background:
  radial-gradient(700px 460px at 94% 4%,rgba(255,122,47,.09),transparent 62%),
  radial-gradient(680px 460px at 4% 62%,rgba(90,43,216,.10),transparent 62%)}
#results::before{background:
  radial-gradient(660px 440px at 10% 4%,rgba(90,43,216,.09),transparent 62%),
  radial-gradient(640px 440px at 92% 66%,rgba(255,185,138,.10),transparent 62%)}

/* ── FALLBACKS & PREFERENCES ── */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.step,.plan,.quote,.acc,form.card-form,.demo,.tbl-wrap,.vs__col,.mdl__box,
  .hdr,.sticky,.nav.is-open,.eyebrow,.btn--outline,.field input,.field select,.field textarea{
    background:#fff;
  }
  .hdr,.sticky,.nav.is-open{background:rgba(255,255,255,.98)}
  .dark .card,.dark .stat,.card--dark{background:#241542}
  .mdl{background:rgba(20,11,46,.82)}
}
/* respect users who find translucency hard to read */
@media (prefers-reduced-transparency:reduce){
  .card,.step,.plan,.quote,.acc,form.card-form,.demo,.tbl-wrap,.vs__col,.mdl__box,
  .eyebrow,.btn--outline,.field input,.field select,.field textarea{
    background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .hdr,.sticky,.nav.is-open{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}
  .dark .card,.dark .stat,.card--dark{background:#241542;backdrop-filter:none;-webkit-backdrop-filter:none}
  .card::after,.step::after,.plan::after,.quote::after,form.card-form::after,
  .demo::after,.vs__col::after,.stat::after,.mdl__box::after{display:none}
}

/* ══════════════════════════════════════════════════════════════════════
   ASK AI ABOUT US
   Two halves: deep links that open the real answer engines with a scoped
   prompt, and an on-site assistant that only answers about this company.
   ══════════════════════════════════════════════════════════════════════ */
#ask-ai{position:relative;isolation:isolate;background:var(--lav-50);border-block:1px solid rgba(255,255,255,.6)}
#ask-ai::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(760px 500px at 4% 0%,rgba(90,43,216,.14),transparent 62%),
  radial-gradient(700px 480px at 98% 30%,rgba(255,122,47,.13),transparent 62%),
  radial-gradient(620px 420px at 50% 100%,rgba(255,185,138,.12),transparent 60%)}

.ask{max-width:900px;margin-inline:auto}
.ask__lbl{
  font-size:.735rem;font-weight:850;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 16px;
}
.ask__row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:14px}
.ask__engine{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:104px;padding:16px 10px 13px;border-radius:22px;text-decoration:none!important;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%);
  box-shadow:0 2px 10px rgba(30,10,87,.06),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,background .2s;
}
.ask__engine:hover{transform:translateY(-4px) scale(1.03);background:rgba(255,255,255,.85);
  box-shadow:0 10px 28px rgba(30,10,87,.13),inset 0 1px 0 #fff}
.ask__engine svg{width:26px;height:26px}
.ask__engine b{font-size:.775rem;font-weight:750;color:var(--ink-soft);letter-spacing:-.01em}
.ask__hint{text-align:center;font-size:.8rem;color:var(--muted);margin:0 0 30px}

/* ── on-site assistant ── */
.bot{
  border-radius:32px;overflow:hidden;
  background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);
  backdrop-filter:blur(24px) saturate(185%);-webkit-backdrop-filter:blur(24px) saturate(185%);
  box-shadow:var(--g-sh-lift),inset 0 1px 0 var(--g-spec);
}
.bot__hd{
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.35);
}
.bot__av{
  width:38px;height:38px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:0 4px 12px rgba(74,29,190,.3);
}
.bot__av svg{width:19px;height:19px}
.bot__ttl{font-size:.95rem;font-weight:800;color:var(--ink);line-height:1.25}
.bot__ttl small{display:block;font-size:.755rem;font-weight:600;color:var(--muted);letter-spacing:0}
.bot__live{
  margin-left:auto;display:inline-flex;align-items:center;gap:.45em;flex:0 0 auto;
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ok);
}
.bot__live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

.bot__log{
  padding:20px;display:flex;flex-direction:column;gap:14px;
  max-height:390px;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:smooth;
}
.msg{display:flex;gap:11px;align-items:flex-start;animation:msgIn .32s cubic-bezier(.2,.9,.3,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.msg__av{
  width:28px;height:28px;border-radius:10px;flex:0 0 auto;display:grid;place-items:center;
  font-size:.64rem;font-weight:900;letter-spacing:-.02em;
}
.msg--bot .msg__av{background:var(--grad-brand);color:#fff}
.msg--bot .msg__av svg{width:14px;height:14px}
.msg--me{flex-direction:row-reverse}
.msg--me .msg__av{background:rgba(74,29,190,.1);color:var(--purple);border:1px solid rgba(74,29,190,.14)}
.msg__b{
  padding:12px 15px;border-radius:18px;font-size:.925rem;line-height:1.6;max-width:82%;
  background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 2px 8px rgba(30,10,87,.05);color:var(--ink-soft);
}
.msg--bot .msg__b{border-bottom-left-radius:7px}
.msg--me .msg__b{
  background:var(--grad-brand);color:#fff;border-color:transparent;
  border-bottom-right-radius:7px;box-shadow:0 4px 14px rgba(74,29,190,.26);font-weight:600;
}
.msg__b strong{color:var(--ink)}
.msg--me .msg__b strong{color:#fff}
.msg__b p{margin:0 0 .6em}
.msg__b p:last-child{margin:0}
.msg__b ul{margin:.5em 0 .2em;padding-left:1.1em}
.msg__b li{margin-bottom:.35em}
.msg__b a{font-weight:700}
.msg__cta{
  display:inline-flex;align-items:center;gap:.5em;margin-top:.85em;
  font-size:.85rem;font-weight:800;color:#2A1200;background:var(--grad-fire);
  padding:.6em 1.05em;border-radius:var(--r-pill);text-decoration:none!important;
  box-shadow:0 4px 14px rgba(255,122,47,.3);transition:transform .18s,box-shadow .18s;
}
.msg__cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(255,122,47,.42)}

/* typing indicator */
.dots{display:inline-flex;gap:4px;padding:3px 0}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--lav-200);animation:bounce 1.25s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.16s}
.dots i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.55}30%{transform:translateY(-5px);opacity:1}}

.bot__chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 16px}
.bot__chip{
  font-size:.83rem;font-weight:700;color:var(--purple);
  padding:.6em 1em;border-radius:var(--r-pill);cursor:pointer;text-align:left;
  background:rgba(255,255,255,.72);border:1px solid rgba(74,29,190,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 8px rgba(30,10,87,.05),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;
}
.bot__chip:hover{transform:translateY(-2px);background:#fff;border-color:var(--purple);box-shadow:0 6px 16px rgba(74,29,190,.16)}

.bot__bar{display:flex;gap:9px;padding:14px 16px;border-top:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.35)}
.bot__bar input{
  flex:1;min-width:0;font:inherit;font-size:.93rem;color:var(--ink);
  padding:.82em 1.05em;border-radius:var(--r-pill);
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 1px 3px rgba(30,10,87,.05);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.bot__bar input::placeholder{color:#A79FBD}
.bot__bar input:focus{outline:none;border-color:var(--purple);background:#fff;box-shadow:0 0 0 4px rgba(74,29,190,.12)}
.bot__send{
  width:46px;height:46px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-brand);color:#fff;box-shadow:0 6px 18px rgba(74,29,190,.32);
  transition:transform .18s,box-shadow .18s;
}
.bot__send:hover{transform:scale(1.07)}
.bot__send svg{width:17px;height:17px}
.bot__foot{font-size:.735rem;color:var(--muted);text-align:center;padding:0 20px 16px;margin:0;line-height:1.5}

@media (max-width:620px){
  .ask__engine{width:calc(50% - 6px);flex-direction:row;justify-content:flex-start;gap:11px;padding:14px 16px;border-radius:18px}
  .ask__row{gap:10px}
  .bot{border-radius:26px}
  /* keep the log bounded and scrolling. Letting it grow naturally pushed the
     input bar off-screen and shoved the rest of the page down as the
     conversation got longer. */
  .bot__log{padding:16px;max-height:min(56vh,400px)}
  .msg__b{max-width:88%;font-size:.9rem}
  .bot__chips{padding:0 16px 14px}
  .bot__chip{font-size:.8rem;padding:.62em .95em}
  .bot__bar{padding:12px}
}

/* ══════════════ MOTION / REVEAL ══════════════ */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1080px){
  .g4,.stats,.steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero__in,.cta__in,.split{grid-template-columns:1fr}
  .hero__in{padding-block:clamp(40px,6vw,60px) clamp(46px,6vw,68px)}
  /* NOTE: the form deliberately stays AFTER the copy on small screens.
     Leading with a form asks for details before the visitor knows what we
     sell; the hero CTA scrolls them the short distance down to it. */
  .g3,.plans{grid-template-columns:1fr}
  .plan--top{transform:none}
  .demo{max-width:100%}
  html{scroll-padding-top:80px}
}
@media (max-width:620px){
  .g2,.vs,.f-grid--2{grid-template-columns:1fr}
  .g4,.stats,.steps{grid-template-columns:1fr}
  .hero__acts .btn{width:100%}
  /* long CTA labels must wrap on narrow screens — nowrap sets a min-content
     width that pushes grid columns wider than the viewport and clips text */
  .btn{white-space:normal;text-wrap:balance;line-height:1.25}
  /* standalone footer/nav links need a proper tap target (inline links in
     body copy are exempt under WCAG 2.5.8) */
  .ftr li a,.nap a{display:inline-block;padding-block:.5em}
  .proof__in{gap:14px 22px}
  .proof__item{font-size:.845rem}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__bot{flex-direction:column;align-items:flex-start;text-align:left}
  .logo__mark{width:38px;height:38px}
  .logo__txt{font-size:.94rem}
}
@media (max-width:420px){
  .ftr__grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════
   MOBILE POLISH  (≤780px)
   Less density, fewer words per line, cheaper compositing.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:780px){
  :root{
    --sec:clamp(50px,7vw,72px);       /* shorter sections = less scrolling */
    --r-glass:22px;
    --gut:clamp(16px,4.4vw,22px);
  }

  /* PERFORMANCE: a phone compositing 30+ backdrop-filters while scrolling
     drops frames on mid-range Android. Keep the glass *look* via a higher
     opacity fill, but stop blurring the cheap-to-fake surfaces. Header,
     sticky bar and modal keep real blur — there are only three of them. */
  .card,.step,.plan,.quote,.acc,.demo,.tbl-wrap,.vs__col,.stat,.ic,.feat__ic,
  .eyebrow,.chip,.bot__chip,.field input,.field select,.field textarea,.ask__engine{
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .card,.step,.plan,.quote,.acc,.demo,.tbl-wrap,.vs__col,form.card-form,.ask__engine,.bot{
    background:rgba(255,255,255,.86);
  }
  .dark .card,.dark .stat,.card--dark{background:rgba(255,255,255,.09)}

  /* tighter, calmer cards */
  .card,.step,.plan,.quote{padding:20px 18px}
  .card p,.step p{font-size:.92rem}
  .card ul{margin-bottom:0}
  .card li,.plan li{margin-bottom:.42em;line-height:1.5}
  .ic{width:46px;height:46px;margin-bottom:.85em;border-radius:15px}
  .ic svg{width:22px;height:22px}

  /* headings: shorter measure, no orphan words */
  h1,h2,h3{text-wrap:balance}
  .lead{font-size:1rem}
  .center.mx,.mx-sm{max-width:38ch}
  .sec .center.mx p.lead{margin-bottom:0}

  /* the comparison table needs a nudge that it scrolls */
  .swipe-hint{
    display:flex;align-items:center;gap:.45em;
    font-size:.775rem;font-weight:750;color:var(--purple);margin:0 0 10px;
  }
  .swipe-hint svg{width:14px;height:14px;animation:nudge 1.8s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}

  /* forms: roomier targets, iOS-safe 16px to stop zoom-on-focus */
  .field input,.field select,.field textarea,.bot__bar input{font-size:16px;padding:.9em 1em}
  .card-form{padding:20px 18px}
  .card-form h2{font-size:1.28rem}

  /* trust bar reads as a list, not a cramped row */
  .proof__in{flex-direction:column;align-items:flex-start;gap:11px;padding-block:20px}
  .proof__item{font-size:.875rem}

  /* process steps: number beside the title saves vertical space */
  .step{display:grid;grid-template-columns:auto 1fr;gap:0 14px;align-items:center}
  .step__n{margin-bottom:0;width:40px;height:40px;font-size:.98rem}
  .step h3{margin:0;align-self:center}
  .step p{grid-column:1/-1;margin-top:.7em}
  .step__wk{grid-column:1/-1;margin-top:.8em}

  /* stats: two up reads better than one giant column */
  .stats{grid-template-columns:1fr 1fr;gap:10px}
  .stat{padding:16px 12px}
  .stat__n{font-size:1.85rem}
  .stat__l{font-size:.8rem}

  .plan--top{transform:none}
  .plan__for{min-height:0}
  .quote blockquote{font-size:.95rem}
  .acc summary{padding:16px 18px;font-size:.96rem}
  .acc__body{padding:0 18px 18px}
}
/* hide the swipe hint wherever the table already fits */
@media (min-width:781px){ .swipe-hint{display:none} }

/* ── collapsible service detail ──────────────────────────────────────
   Ships open, so desktop and no-JS visitors see the full list and search
   engines always index it. On phones a small script closes them, turning
   six tall cards into six scannable ones. */
.more > summary{display:none}
@media (max-width:780px){
  .more > summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    list-style:none;cursor:pointer;margin-top:.9em;
    font-size:.85rem;font-weight:800;color:var(--purple);
    padding:.6em .9em;border-radius:12px;
    background:rgba(74,29,190,.06);border:1px solid rgba(74,29,190,.12);
  }
  .more > summary::-webkit-details-marker{display:none}
  .more > summary svg{width:12px;height:12px;flex:0 0 auto;transition:transform .22s}
  .more[open] > summary{margin-bottom:.4em}
  .more[open] > summary svg{transform:rotate(45deg)}
  .more ul{margin-top:.7em}
}
@media print{
  .hdr,.sticky,.wa,.mdl,.hero::after{display:none!important}
  body{color:#000}
}