/* Snabbl — marketing landing page
   Reuses the product's identity: money-green accent, Plus Jakarta Sans,
   soft white cards, tabular numerals. Light mode first. */

:root{
  --accent:#0E7A52; --accent-press:#0A5E40; --accent-deep:#08482F;
  --accent-tint:#E7F2EC; --accent-tint-2:#D2E7DA;
  --grad:linear-gradient(150deg,#13a06b 0%,#0E7A52 52%,#0A5E40 100%);

  --ink:#0F1A16; --ink-2:#46535A; --ink-3:#7C878D; --ink-4:#A8B1B5;
  --line:#E5EAE8; --line-2:#EFF2F1;
  --surface:#FFFFFF; --bg:#F4F6F5;

  --maxw:1180px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --shadow-card:0 1px 2px rgba(15,26,22,.05), 0 12px 30px rgba(15,26,22,.06);
  --shadow-cta:0 1px 2px rgba(8,72,47,.28), 0 12px 26px rgba(14,122,82,.30);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--surface); color:var(--ink);
  font-family:var(--font); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  line-height:1.5;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1,"ss01" 1; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,p{ margin:0; }
section{ position:relative; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* ── shared type ─────────────────────────────────────────── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{ content:""; width:18px; height:2px; border-radius:2px; background:var(--accent); }
h1.display{
  font-size:clamp(38px,6.2vw,68px); line-height:1.02; font-weight:800;
  letter-spacing:-0.04em; color:var(--ink); text-wrap:balance;
}
h2.headline{
  font-size:clamp(30px,4.2vw,46px); line-height:1.06; font-weight:800;
  letter-spacing:-0.038em; color:var(--ink); text-wrap:balance;
}
h3.subhead{ font-size:clamp(21px,2.4vw,26px); font-weight:800; letter-spacing:-0.03em; }
.lede{ font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:var(--ink-2); font-weight:500; }
.muted{ color:var(--ink-3); }

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:54px; padding:0 26px; border:none; border-radius:15px; cursor:pointer;
  font-family:var(--font); font-weight:700; font-size:17px; letter-spacing:-0.01em;
  transition:transform .12s ease, background .15s, box-shadow .15s; white-space:nowrap;
}
.btn:active{ transform:scale(.975); }
.btn-primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-cta); }
.btn-primary:hover{ background:var(--accent-press); }
.btn-secondary{ background:var(--surface); color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-secondary:hover{ box-shadow:inset 0 0 0 1.5px var(--accent-tint-2); }
.btn-ghost{ background:transparent; color:var(--accent); height:auto; padding:0; }
.btn-sm{ height:46px; font-size:15.5px; padding:0 20px; border-radius:13px; }
.arrow{ transition:transform .15s; }
.btn:hover .arrow{ transform:translateX(3px); }

/* ── store badges ────────────────────────────────────────── */
.badges{ display:flex; gap:12px; flex-wrap:wrap; }
.store-badge{
  display:inline-flex; align-items:center; gap:11px;
  height:54px; padding:0 18px 0 16px; border-radius:13px;
  background:#0F1A16; color:#fff; transition:transform .12s, box-shadow .15s;
  box-shadow:0 6px 18px rgba(15,26,22,.18);
}
.store-badge:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,26,22,.24); }
.store-badge svg{ flex-shrink:0; }
.store-badge .sb-top{ font-size:10.5px; font-weight:500; letter-spacing:.02em; opacity:.82; line-height:1.1; }
.store-badge .sb-main{ font-size:18px; font-weight:700; letter-spacing:-0.01em; line-height:1.15; margin-top:1px; }

/* ── nav ─────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.78); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:box-shadow .2s, background .2s;
}
.nav.scrolled{ box-shadow:0 1px 0 var(--line), 0 8px 24px rgba(15,26,22,.05); background:rgba(255,255,255,.9); }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:11px; }
.brand .word{ font-weight:800; font-size:23px; letter-spacing:-0.035em; color:var(--ink); }
.logo-mark{
  width:42px; height:42px; border-radius:13px; background:var(--grad);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(14,122,82,.32), inset 0 1px 0 rgba(255,255,255,.25);
}
.nav-links{ display:flex; align-items:center; gap:34px; }
.nav-links a{ font-size:15.5px; font-weight:600; color:var(--ink-2); transition:color .15s; }
.nav-links a:hover{ color:var(--ink); }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-signin{ font-size:15.5px; font-weight:600; color:var(--ink-2); }
.nav-signin:hover{ color:var(--ink); }
.hamburger{ display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.hamburger span{ width:22px; height:2px; border-radius:2px; background:var(--ink); transition:.2s; }
.mobile-menu{ display:none; }

/* ── hero ────────────────────────────────────────────────── */
.hero{ overflow:hidden; }
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(90% 60% at 78% -6%, var(--accent-tint) 0%, rgba(231,242,236,0) 55%),
             linear-gradient(to bottom,#FFFFFF 62%, #F4F6F5 100%);
}
.hero-grid{
  position:relative; z-index:1; display:grid; grid-template-columns:1fr 0.92fr;
  gap:40px; align-items:center; padding:clamp(40px,6vw,76px) 0 clamp(48px,6vw,84px);
}
.hero-copy{ max-width:560px; }
.hero h1{ margin-top:22px; }
.hero .lede{ margin-top:22px; max-width:480px; }
.hero-cta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:30px; }
.hero-badges{ margin-top:22px; }
.trust-line{
  display:flex; align-items:center; gap:14px; margin-top:24px;
  font-size:14.5px; font-weight:600; color:var(--ink-2); flex-wrap:wrap;
}
.trust-line .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-4); }
.stars{ display:inline-flex; gap:2px; color:#E0A40C; }
.hero-visual{ position:relative; display:flex; justify-content:center; align-items:flex-start; }
.hero-glow{
  position:absolute; width:420px; height:420px; border-radius:50%; top:40px; left:50%;
  transform:translateX(-50%); background:radial-gradient(circle, rgba(14,122,82,.16), transparent 62%);
  z-index:0; filter:blur(8px);
}

/* floating proof chips around hero phone */
.float-chip{
  position:absolute; z-index:5; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:15px; padding:11px 15px;
  box-shadow:0 14px 34px rgba(15,26,22,.14), 0 0 0 1px rgba(15,26,22,.04);
}
.float-chip .ic{ width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.float-chip .ft{ font-size:12.5px; font-weight:700; color:var(--ink); letter-spacing:-0.01em; }
.float-chip .fs{ font-size:11.5px; font-weight:600; color:var(--ink-3); margin-top:1px; }
.chip-a{ top:54px; left:-6px; }
.chip-b{ bottom:96px; right:-10px; }

/* ── phone frame wrapper ─────────────────────────────────── */
.phone{ pointer-events:none; flex-shrink:0; }
.phone.tilt{ transform:perspective(1600px) rotateY(-9deg) rotateX(3deg); }

/* ── trust bar ───────────────────────────────────────────── */
.trustbar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--surface); }
.trustbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:30px; padding:24px 0; flex-wrap:wrap; }
.trust-stat{ display:flex; align-items:center; gap:13px; }
.trust-stat .big{ font-size:24px; font-weight:800; letter-spacing:-0.03em; color:var(--ink); }
.trust-stat .sm{ font-size:13.5px; font-weight:600; color:var(--ink-3); line-height:1.3; }
.logo-wall{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; }
.logo-wall .pl{ font-size:17px; font-weight:800; letter-spacing:-0.02em; color:var(--ink-4); display:flex; align-items:center; gap:7px; }

/* ── generic section ─────────────────────────────────────── */
.section{ padding:clamp(64px,8vw,108px) 0; }
.section.tint{ background:var(--bg); }
.section-head{ max-width:680px; }
.section-head.center{ margin:0 auto; text-align:center; }
.section-head h2{ margin-top:16px; }
.section-head .lede{ margin-top:18px; }

/* ── problem ─────────────────────────────────────────────── */
.problem{ background:var(--ink); color:#fff; overflow:hidden; }
.problem .eyebrow{ color:#5FD3A0; }
.problem .eyebrow::before{ background:#5FD3A0; }
.problem h2{ color:#fff; }
.problem-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:48px; align-items:center; }
.problem .lede{ color:rgba(255,255,255,.66); }
.pain-list{ display:flex; flex-direction:column; gap:14px; margin-top:30px; }
.pain{ display:flex; gap:14px; align-items:flex-start; }
.pain .x{ width:30px; height:30px; border-radius:9px; background:rgba(224,89,12,.16); color:#FF8A4C; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.pain .pt{ font-size:16.5px; font-weight:700; color:#fff; letter-spacing:-0.01em; }
.pain .ps{ font-size:14.5px; font-weight:500; color:rgba(255,255,255,.55); margin-top:2px; line-height:1.45; }
.flip-card{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:24px;
  padding:30px; backdrop-filter:blur(6px);
}
.flip-row{ display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.flip-row:last-child{ border-bottom:none; }
.flip-row .tick{ width:30px; height:30px; border-radius:9px; background:rgba(20,160,107,.2); color:#5FD3A0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.flip-row .ft{ font-size:16px; font-weight:700; color:#fff; }
.flip-row .fnum{ margin-left:auto; font-weight:800; color:#5FD3A0; font-size:16px; }

/* ── benefits (alternating rows) ─────────────────────────── */
.benefit{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; padding:clamp(40px,5vw,64px) 0; }
.benefit + .benefit{ border-top:1px solid var(--line); }
.benefit.flip .benefit-media{ order:2; }
.benefit.flip .benefit-copy{ order:1; }
.benefit-copy{ max-width:480px; }
.b-index{ font-size:13px; font-weight:800; letter-spacing:.08em; color:var(--accent); }
.benefit-copy h3{ margin-top:14px; }
.benefit-copy .lede{ margin-top:14px; }
.b-points{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-direction:column; gap:12px; }
.b-points li{ display:flex; gap:11px; align-items:flex-start; font-size:15.5px; font-weight:600; color:var(--ink-2); }
.b-points .tk{ width:23px; height:23px; border-radius:7px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.benefit-media{ display:flex; justify-content:center; position:relative; }
.benefit-media .glow{ position:absolute; inset:auto; width:340px; height:340px; border-radius:50%; top:24px; background:radial-gradient(circle, rgba(14,122,82,.12), transparent 64%); z-index:0; }

/* ── how it works ────────────────────────────────────────── */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; counter-reset:step; }
.step{ position:relative; background:var(--surface); border-radius:22px; padding:32px 28px; box-shadow:var(--shadow-card); }
.section.tint .step{ box-shadow:0 1px 2px rgba(15,26,22,.05), 0 1px 0 var(--line); }
.step .sn{ width:52px; height:52px; border-radius:15px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.step h3{ font-size:21px; font-weight:800; letter-spacing:-0.025em; margin-top:22px; }
.step p{ margin-top:10px; font-size:15.5px; color:var(--ink-2); font-weight:500; line-height:1.5; }
.step .num-tag{ position:absolute; top:30px; right:30px; font-size:13px; font-weight:800; color:var(--ink-4); letter-spacing:.08em; }

/* ── showcase gallery ────────────────────────────────────── */
.gallery-scroll{ display:flex; gap:26px; overflow-x:auto; padding:14px 28px 30px; scroll-snap-type:x mandatory; }
.gallery-scroll::-webkit-scrollbar{ height:0; }
.gallery-item{ scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; flex-shrink:0; }
.gallery-item .cap{ font-size:14px; font-weight:700; color:var(--ink-2); letter-spacing:-0.01em; }

/* ── testimonials ────────────────────────────────────────── */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:54px; }
.quote{ background:var(--surface); border-radius:22px; padding:30px 28px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; }
.section.tint .quote{ box-shadow:0 1px 2px rgba(15,26,22,.05), 0 1px 0 var(--line); }
.quote .stars{ margin-bottom:16px; }
.quote p{ font-size:17px; line-height:1.5; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.quote .who{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.quote .av{ width:44px; height:44px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; flex-shrink:0; }
.quote .nm{ font-size:14.5px; font-weight:700; color:var(--ink); }
.quote .tr{ font-size:13px; font-weight:600; color:var(--ink-3); margin-top:1px; }

/* ── pricing ─────────────────────────────────────────────── */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:54px; align-items:stretch; }
.tier{ background:var(--surface); border-radius:24px; padding:32px 28px 30px; box-shadow:inset 0 0 0 1.5px var(--line); display:flex; flex-direction:column; position:relative; }
.tier.featured{ background:var(--grad); color:#fff; box-shadow:0 18px 40px rgba(14,122,82,.32); }
.tier-badge{ position:absolute; top:26px; right:26px; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:8px; background:var(--accent-tint); color:var(--accent); }
.tier.featured .tier-badge{ background:rgba(255,255,255,.2); color:#fff; }
.tier .tn{ font-size:15px; font-weight:700; color:var(--ink-2); letter-spacing:.01em; }
.tier.featured .tn{ color:rgba(255,255,255,.86); }
.tier .price{ display:flex; align-items:baseline; gap:5px; margin-top:12px; }
.tier .price .amt{ font-size:46px; font-weight:800; letter-spacing:-0.04em; }
.tier .price .per{ font-size:15px; font-weight:600; color:var(--ink-3); }
.tier.featured .price .per{ color:rgba(255,255,255,.72); }
.tier .tsub{ font-size:14px; font-weight:600; color:var(--ink-3); margin-top:8px; }
.tier.featured .tsub{ color:rgba(255,255,255,.74); }
.tier ul{ list-style:none; padding:0; margin:22px 0 26px; display:flex; flex-direction:column; gap:13px; }
.tier li{ display:flex; gap:11px; align-items:flex-start; font-size:14.5px; font-weight:600; color:var(--ink-2); }
.tier.featured li{ color:rgba(255,255,255,.94); }
.tier li .tk{ color:var(--accent); flex-shrink:0; margin-top:1px; }
.tier.featured li .tk{ color:#9DEBC4; }
.tier .btn{ margin-top:auto; width:100%; }
.tier.featured .btn-primary{ background:#fff; color:var(--accent-deep); box-shadow:0 8px 20px rgba(8,72,47,.2); }
.tier.featured .btn-primary:hover{ background:#F4F6F5; }
.pricing-foot{ text-align:center; margin-top:30px; font-size:15px; font-weight:600; color:var(--ink-3); display:flex; align-items:center; justify-content:center; gap:9px; flex-wrap:wrap; }
.pricing-foot b{ color:var(--ink); font-weight:700; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-grid{ max-width:780px; margin:54px auto 0; display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:20px; background:transparent; border:none; cursor:pointer; padding:24px 4px; text-align:left; font-family:var(--font); }
.faq-q span{ font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-0.015em; }
.faq-ic{ width:30px; height:30px; border-radius:9px; background:var(--accent-tint); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .25s; }
.faq-item.open .faq-ic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a-inner{ padding:0 4px 24px; font-size:16px; line-height:1.6; color:var(--ink-2); font-weight:500; max-width:680px; }

/* ── final CTA ───────────────────────────────────────────── */
.finalcta{ overflow:hidden; }
.finalcta-card{
  position:relative; background:var(--grad); border-radius:32px; overflow:hidden;
  padding:clamp(48px,6vw,80px) clamp(28px,5vw,72px); text-align:center; color:#fff;
  box-shadow:0 30px 60px rgba(14,122,82,.3);
}
.finalcta-card::before{ content:""; position:absolute; top:-80px; right:-60px; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.08); }
.finalcta-card::after{ content:""; position:absolute; bottom:-120px; left:-40px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.06); }
.finalcta-card > *{ position:relative; z-index:1; }
.finalcta h2{ color:#fff; font-size:clamp(30px,4.4vw,50px); font-weight:800; letter-spacing:-0.038em; text-wrap:balance; }
.finalcta p{ margin:18px auto 0; max-width:520px; font-size:clamp(17px,1.7vw,20px); color:rgba(255,255,255,.82); font-weight:500; }
.finalcta .badges{ justify-content:center; margin-top:32px; }
.finalcta .store-badge{ background:#fff; color:var(--ink); box-shadow:0 10px 26px rgba(8,72,47,.24); }
.finalcta .store-badge .sb-top{ opacity:.6; }
.finalcta-trust{ margin-top:26px; font-size:14.5px; font-weight:600; color:rgba(255,255,255,.78); display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:wrap; }

/* ── footer ──────────────────────────────────────────────── */
.footer{ background:var(--surface); border-top:1px solid var(--line); padding:clamp(56px,7vw,84px) 0 40px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.footer-brand{ max-width:300px; }
.footer-brand .word{ font-weight:800; font-size:22px; letter-spacing:-0.035em; }
.footer-brand p{ margin-top:16px; font-size:14.5px; color:var(--ink-3); font-weight:500; line-height:1.55; }
.footer-brand .badges{ margin-top:22px; }
.footer-brand .store-badge{ height:46px; }
.footer-brand .store-badge .sb-main{ font-size:15px; }
.footer-col h4{ font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; }
.footer-col a{ display:block; font-size:15px; font-weight:600; color:var(--ink-2); padding:7px 0; transition:color .15s; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; }
.footer-bottom .cr{ font-size:14px; font-weight:500; color:var(--ink-3); }
.socials{ display:flex; gap:10px; }
.socials a{ width:40px; height:40px; border-radius:11px; background:var(--bg); color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:.15s; }
.socials a:hover{ background:var(--accent-tint); color:var(--accent); }

/* ── headline note callout ───────────────────────────────── */
.note{ max-width:var(--maxw); margin:0 auto; }
.note-card{ background:var(--accent-tint); border-radius:18px; padding:22px 26px; display:flex; gap:16px; align-items:flex-start; }
.note-card .ic{ width:36px; height:36px; border-radius:11px; background:#fff; color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.note-card .nt{ font-size:14px; font-weight:700; color:var(--accent-deep); letter-spacing:-0.01em; }
.note-card .nb{ font-size:14px; font-weight:500; color:var(--accent-press); margin-top:4px; line-height:1.55; }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; gap:8px; }
  .hero-copy{ max-width:620px; }
  .hero-visual{ margin-top:10px; }
  .problem-grid{ grid-template-columns:1fr; gap:36px; }
  .benefit{ grid-template-columns:1fr; gap:34px; }
  .benefit.flip .benefit-media{ order:0; }
  .benefit.flip .benefit-copy{ order:0; }
  .benefit-copy{ max-width:560px; }
  .steps,.quotes,.pricing-grid{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
  .footer-brand{ grid-column:1 / -1; max-width:none; }
}
@media (max-width:760px){
  .nav-links,.nav-signin{ display:none; }
  .hamburger{ display:flex; }
  .nav-cta .btn{ display:none; }
  .mobile-menu{ display:block; position:fixed; inset:74px 0 auto 0; z-index:99;
    background:rgba(255,255,255,.97); backdrop-filter:blur(18px);
    box-shadow:0 14px 30px rgba(15,26,22,.1); padding:18px 28px 28px;
    transform:translateY(-120%); transition:transform .28s ease; }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{ display:block; font-size:18px; font-weight:700; color:var(--ink); padding:14px 0; border-bottom:1px solid var(--line); }
  .mobile-menu .btn{ width:100%; margin-top:18px; }
  .float-chip{ transform:scale(.86); }
  .chip-a{ left:-2px; } .chip-b{ right:-2px; }
}
@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
  .badges{ width:100%; }
  .store-badge{ flex:1; justify-content:center; }
  .footer-top{ grid-template-columns:1fr; }
  .trustbar-inner{ gap:20px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
}