@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');
/* =====================================================================
   LensPro — high-conversion landing page
   Design system: "Optical Editorial" — warm paper, ink, one optical-blue
   accent, Fraunces (serif headlines) + Hanken Grotesk (sans).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  --ink:#16202A;          /* near-black navy */
  --ink-2:#33414E;
  --muted:#6E7884;
  --line:rgba(22,32,42,.13);
  --bg:#F6F2EA;           /* warm off-white paper */
  --bg-soft:#EFE7D9;
  --bg-soft-2:#E7DDCB;
  --brand:#1B6FB3;        /* optical blue */
  --brand-ink:#13567F;
  --brand-2:#1B6FB3;
  --accent:#C0492F;       /* clay — sale / urgency only */
  --accent-ink:#A23A22;
  --star:#C8901C;
  --grad:linear-gradient(135deg,#2480C4,#13567F);     /* tonal blue (not rainbow) */
  --grad-warm:linear-gradient(135deg,#C0492F,#A23A22);/* clay (sale tags) */
  --radius:16px;
  --radius-sm:11px;
  --shadow-sm:0 2px 10px rgba(22,32,42,.06);
  --shadow:0 10px 34px rgba(22,32,42,.10);
  --shadow-lg:0 26px 70px rgba(22,32,42,.16);
  --maxw:1140px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:'Hanken Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Fraunces','Georgia',serif;line-height:1.08;letter-spacing:-.02em;margin:0 0 .4em;font-weight:700}
h1{font-size:clamp(2.05rem,7vw,3.7rem)}
h2{font-size:clamp(1.7rem,5.2vw,2.7rem)}
h3{font-size:clamp(1.15rem,3.6vw,1.5rem)}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px}
section{position:relative}
.eyebrow{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-ink);background:rgba(27,111,179,.09);padding:.4em .9em;border-radius:999px;margin-bottom:1rem}
.muted{color:var(--muted)}
.center{text-align:center}
.grad-text{color:var(--brand);font-style:italic}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:1.02rem;
  padding:1.05em 1.8em;border-radius:999px;border:0;cursor:pointer;
  text-align:center;line-height:1;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 26px rgba(27,111,179,.30)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(27,111,179,.42);filter:brightness(1.05)}
.btn-dark{background:var(--ink);color:#fff;box-shadow:var(--shadow-sm)}
.btn-dark:hover{transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25)}
.btn-block{width:100%}
.btn .sub{font-weight:500;font-size:.78em;opacity:.85}
.btn-lg{font-size:1.1rem;padding:1.2em 2.1em}

/* ---------- Announcement bar ---------- */
.announce{background:var(--ink);color:#fff;font-size:.82rem;font-weight:500;text-align:center;padding:.6em 14px;position:relative;z-index:60}
.announce b{font-weight:700}
.announce .dot{opacity:.45;margin:0 .55em}

/* ---------- Nav ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 6px 24px rgba(16,24,40,.07)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{display:flex;align-items:center;gap:.55em;font-family:'Hanken Grotesk';font-weight:700;font-size:1.22rem;letter-spacing:-.02em}
.brand .logo{width:30px;height:30px;flex:0 0 auto}
.nav .btn{padding:.7em 1.25em;font-size:.92rem}
.nav-links{display:none;gap:1.6rem;font-weight:600;font-size:.92rem;color:var(--ink-2)}
.nav-links a:hover{color:var(--brand-ink)}
@media(min-width:860px){.nav-links{display:flex}}

/* ---------- Hero ---------- */
.hero{position:relative;padding:42px 0 30px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:680px;z-index:-1;
  background:
    radial-gradient(40% 50% at 78% 18%,rgba(27,111,179,.30),transparent 70%),
    radial-gradient(45% 55% at 12% 8%,rgba(27,111,179,.28),transparent 70%);
  filter:blur(8px)}
.hero-grid{display:grid;gap:26px}
.hero-rating{display:flex;align-items:center;gap:.6em;font-weight:600;font-size:.92rem;color:var(--ink-2);margin-bottom:14px}
.stars{color:var(--star);letter-spacing:1px;font-size:1.02rem}
.hero h1{margin-bottom:.45em}
.hero .lede{font-size:clamp(1.04rem,2.6vw,1.22rem);color:var(--muted);max-width:34ch;margin-bottom:1.4rem}
.hero-cta{display:flex;flex-direction:column;gap:.7rem;max-width:420px}
.assure{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin-top:1.1rem;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.assure span{display:inline-flex;align-items:center;gap:.4em}
.assure svg{width:17px;height:17px;color:var(--brand-2);flex:0 0 auto}
.pay-row{display:flex;align-items:center;gap:.5rem;margin-top:1.2rem;flex-wrap:wrap}
.pay-row .lbl{font-size:.76rem;color:var(--muted);font-weight:600}
.pay-badges{display:flex;gap:.4rem}
.pay-badges img,.pay-badges svg{height:24px;width:auto;opacity:.92}

/* hero visual */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:330px}
.hero-blob{position:absolute;inset:0;margin:auto;width:min(92%,440px);aspect-ratio:1;border-radius:42% 58% 56% 44%/46% 44% 56% 54%;
  background:var(--grad);filter:blur(2px);opacity:.96;box-shadow:var(--shadow-lg);
  animation:morph 14s ease-in-out infinite}
@keyframes morph{0%,100%{border-radius:42% 58% 56% 44%/46% 44% 56% 54%}50%{border-radius:56% 44% 40% 60%/54% 56% 44% 46%}}
.hero-device{position:relative;z-index:2;width:min(74%,330px);filter:drop-shadow(0 30px 40px rgba(10,14,26,.35))}
.float-card{position:absolute;z-index:3;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-radius:16px;padding:.7em .95em;box-shadow:var(--shadow);font-size:.82rem;font-weight:600;display:flex;align-items:center;gap:.5em;animation:floaty 5s ease-in-out infinite}
.float-card .ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
.float-card small{display:block;font-weight:500;color:var(--muted);font-size:.74rem}
.fc-1{top:6%;left:-2%}
.fc-2{bottom:8%;right:-2%;animation-delay:1.6s}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media(min-width:880px){
  .hero{padding:60px 0 40px}
  .hero-grid{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
  .hero-cta{flex-direction:row;align-items:center}
  .hero-visual{min-height:460px}
}

/* ============ CONVERSION COMPONENTS ============ */
/* coupon bar */
.coupon{position:sticky;top:0;z-index:58;background:var(--grad-warm);color:#fff;display:flex;align-items:center;justify-content:center;gap:.6em 1em;flex-wrap:wrap;padding:.7em 14px;font-size:.86rem;font-weight:600;text-align:center}
.coupon .code{font-family:'Hanken Grotesk';font-weight:700;letter-spacing:.12em;background:rgba(255,255,255,.22);border:1px dashed rgba(255,255,255,.7);padding:.25em .7em;border-radius:8px}
.coupon b{font-weight:700}
.coupon .ctimer{font-variant-numeric:tabular-nums;font-family:'Hanken Grotesk';background:rgba(10,14,26,.25);padding:.2em .6em;border-radius:6px}
.coupon .apply{background:#fff;color:var(--accent-ink);border:0;font-family:'Hanken Grotesk';font-weight:700;font-size:.82rem;padding:.5em 1.1em;border-radius:999px;cursor:pointer;transition:transform .2s}
.coupon .apply:hover{transform:scale(1.05)}
.coupon .apply.done{background:rgba(255,255,255,.25);color:#fff}
.coupon .x{background:none;border:0;color:rgba(255,255,255,.8);font-size:1.2rem;cursor:pointer;line-height:1;padding:0 .2em}

/* stats strip with animated counters */
.stats{background:var(--ink);color:#fff;padding:26px 0}
.stats .container{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 10px}
@media(min-width:760px){.stats .container{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat .n{font-family:'Hanken Grotesk';font-weight:700;font-size:clamp(1.5rem,5vw,2.1rem);line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat .l{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.4em;font-weight:500}
.stat .stars{color:var(--star);font-size:1.1rem}

/* section CTA helper */
.sec-cta{text-align:center;margin-top:30px}
.urgency-line{font-size:.84rem;color:var(--accent-ink);font-weight:600;margin-top:.7rem}

/* viewing now pill */
.viewing{display:inline-flex;align-items:center;gap:.5em;font-size:.8rem;font-weight:600;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4em .85em;box-shadow:var(--shadow-sm);margin-bottom:12px}
.viewing .live{width:8px;height:8px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 0 0 rgba(255,59,92,.6);animation:pulse 1.8s infinite}

/* stock scarcity bar */
.scarcity{margin:4px 0 16px}
.scarcity .row{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.scarcity .row .left{color:var(--accent-ink)}
.scarcity .track{height:8px;border-radius:999px;background:var(--bg-soft-2);overflow:hidden}
.scarcity .fill{height:100%;width:18%;background:var(--grad-warm);border-radius:999px;transition:width 1s var(--ease)}

/* free gift callout */
.gift{display:flex;align-items:center;gap:.7em;background:linear-gradient(135deg,rgba(27,111,179,.08),rgba(27,111,179,.08));border:1px dashed var(--brand);border-radius:14px;padding:.8em 1em;font-size:.86rem;font-weight:600;margin-bottom:16px}
.gift .em{font-size:1.4rem}
.gift small{display:block;font-weight:500;color:var(--muted)}

/* photo review wall */
.rev-summary{display:grid;gap:20px;align-items:center;max-width:760px;margin:0 auto 34px}
@media(min-width:680px){.rev-summary{grid-template-columns:auto 1fr}}
.rev-score{text-align:center;padding-right:24px}
@media(min-width:680px){.rev-score{border-right:1px solid var(--line)}}
.rev-score .big{font-family:'Hanken Grotesk';font-weight:700;font-size:3.2rem;line-height:1}
.rev-score .stars{color:var(--star);font-size:1.1rem}
.rev-score small{color:var(--muted);font-size:.82rem}
.rev-bars{display:grid;gap:6px}
.rev-bar{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--muted)}
.rev-bar .lbl{width:34px;flex:0 0 auto}
.rev-bar .track{flex:1;height:8px;border-radius:999px;background:var(--bg-soft-2);overflow:hidden}
.rev-bar .fill{height:100%;background:var(--star);border-radius:999px}
.rev-photos{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:24px;-webkit-overflow-scrolling:touch}
.rev-photo{flex:0 0 auto;width:120px;height:120px;border-radius:14px;overflow:hidden;position:relative;box-shadow:var(--shadow-sm)}
.rev-photo img{width:100%;height:100%;object-fit:cover}
.rev-photo .st{position:absolute;bottom:6px;left:6px;color:#FFB400;font-size:.7rem;background:rgba(10,14,26,.6);padding:.1em .4em;border-radius:6px}
.review .rphoto{width:100%;border-radius:12px;margin-bottom:12px;aspect-ratio:16/10;object-fit:cover}
.review .who .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.review .who .av{overflow:hidden;padding:0}
.helpful{margin-top:12px;font-size:.78rem;color:var(--muted);display:flex;gap:14px;border-top:1px solid var(--line);padding-top:10px}
.helpful b{color:var(--ink-2)}

/* ============ ECOMMERCE PRODUCT (PDP) ============ */
.product{padding:24px 0 36px;position:relative;overflow:hidden}
.product::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:520px;z-index:-1;
  background:radial-gradient(40% 50% at 80% 12%,rgba(27,111,179,.18),transparent 70%),radial-gradient(45% 55% at 10% 6%,rgba(27,111,179,.16),transparent 70%)}
.crumb{font-size:.78rem;color:var(--muted);margin-bottom:14px}
.crumb a:hover{color:var(--brand-ink)}
.pdp-grid{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.pdp-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start}}

/* gallery */
.gallery{position:relative;min-width:0}
.gallery-main{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);aspect-ratio:4/3}
.gallery-main img,.gallery-main video{width:100%;height:100%;object-fit:cover;display:block}
.gallery-main img[hidden],.gallery-main video[hidden]{display:none}
.gallery-main .gbadge{position:absolute;top:14px;left:14px;background:var(--grad-warm);color:#fff;font-weight:700;font-size:.74rem;letter-spacing:.04em;padding:.45em .9em;border-radius:999px;box-shadow:var(--shadow-sm);z-index:2}
.gallery-main .vplay{position:absolute;inset:0;display:none;place-items:center;background:rgba(10,14,26,.28);z-index:3;cursor:pointer}
.gallery-main .vplay.show{display:grid}
.gallery-main .vplay span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:var(--shadow);color:var(--brand-ink);font-size:1.4rem;padding-left:5px}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;min-width:0;max-width:100%}
.thumb{position:relative;flex:0 0 auto;width:72px;height:72px;border-radius:12px;overflow:hidden;border:2px solid transparent;cursor:pointer;background:#fff;transition:border-color .2s,transform .2s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb.active{border-color:var(--brand)}
.thumb:hover{transform:translateY(-2px)}
.thumb.video::after,.thumb.video2::after{content:"▶";position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,14,26,.4);color:#fff;font-size:1rem}

/* buy box */
.buybox{position:relative;min-width:0}
@media(min-width:900px){.buybox{position:sticky;top:78px}}
.pdp-rating{display:flex;align-items:center;gap:.5em;font-size:.88rem;color:var(--ink-2);font-weight:600;margin-bottom:10px}
.pdp-rating .stars{color:var(--star);font-size:1rem;letter-spacing:1px}
.pdp-rating a{color:var(--muted);text-decoration:underline;font-weight:500}
.pdp-title{font-size:clamp(1.6rem,5vw,2.3rem);margin-bottom:.25em}
.pdp-sub{color:var(--muted);font-size:1.02rem;margin-bottom:1rem}
.pdp-price{display:flex;align-items:baseline;gap:.55em;margin-bottom:.4rem}
.pdp-price .now{font-family:'Hanken Grotesk';font-weight:700;font-size:2.1rem}
.pdp-price .was{color:var(--muted);text-decoration:line-through;font-weight:600}
.pdp-price .off{background:rgba(192,73,47,.12);color:var(--accent-ink);font-weight:700;font-size:.8rem;padding:.3em .7em;border-radius:999px}
.stock{display:inline-flex;align-items:center;gap:.5em;font-size:.84rem;font-weight:600;color:#0f9d6b;margin-bottom:1.1rem}
.stock .pulse{width:9px;height:9px;border-radius:50%;background:#12b886;box-shadow:0 0 0 0 rgba(18,184,134,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(18,184,134,.55)}70%{box-shadow:0 0 0 9px rgba(18,184,134,0)}100%{box-shadow:0 0 0 0 rgba(18,184,134,0)}}

/* bundle selector */
.bundles{display:grid;gap:10px;margin-bottom:18px}
.bundle{position:relative;display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:16px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .2s;background:#fff}
.bundle:hover{border-color:#b9c6da}
.bundle.sel{border-color:var(--brand);background:linear-gradient(180deg,rgba(27,111,179,.05),rgba(27,111,179,.04));box-shadow:var(--shadow-sm)}
.bundle input{position:absolute;opacity:0;pointer-events:none}
.bundle .radio{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:2px solid #c4cee0;display:grid;place-items:center;transition:border-color .2s}
.bundle.sel .radio{border-color:var(--brand)}
.bundle.sel .radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--grad)}
.bundle .b-main{flex:1;min-width:0}
.bundle .b-name{font-family:'Hanken Grotesk';font-weight:700;font-size:1.02rem;display:flex;align-items:center;gap:.5em;flex-wrap:wrap}
.bundle .b-tag{font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--grad);padding:.25em .6em;border-radius:999px}
.bundle .b-tag.warm{background:var(--grad-warm)}
.bundle .b-sub{font-size:.8rem;color:var(--muted)}
.bundle .b-price{flex:0 0 auto;text-align:right}
.bundle .b-price .bp-now{font-family:'Hanken Grotesk';font-weight:700;font-size:1.15rem;display:block}
.bundle .b-price .bp-was{font-size:.78rem;color:var(--muted);text-decoration:line-through}

.pdp-cta{width:100%;font-size:1.12rem;padding:1.15em 1.8em;margin-bottom:8px}
.pdp-cta .sub{font-weight:500;font-size:.78em;opacity:.9}
.pdp-express{font-size:.8rem;color:var(--muted);text-align:center;margin-bottom:16px}
.pdp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.pdp-trust div{display:flex;flex-direction:column;align-items:center;gap:.35em;text-align:center;font-size:.74rem;font-weight:600;color:var(--ink-2);background:var(--bg-soft);border-radius:12px;padding:12px 6px}
.pdp-trust svg{width:22px;height:22px;color:var(--brand)}
.pdp-bullets{list-style:none;padding:0;margin:0 0 16px;display:grid;gap:.5rem}
.pdp-bullets li{display:flex;gap:.6em;font-size:.92rem;align-items:flex-start}
.pdp-bullets svg{width:18px;height:18px;color:var(--brand-2);flex:0 0 auto;margin-top:3px}
.pay-inline{display:flex;align-items:center;gap:.5rem;justify-content:center;flex-wrap:wrap}
.pay-inline .lbl{font-size:.74rem;color:var(--muted)}

/* content media figures */
.figure{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#fff}
.figure img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.split{display:grid;gap:26px;align-items:center}
@media(min-width:840px){.split{grid-template-columns:1fr 1fr;gap:44px}.split.rev .split-media{order:2}}
.split-copy h2{margin-bottom:.4em}
.split-copy p{color:var(--muted)}

/* video section */
.videosec .frame{max-width:880px;margin-inline:auto;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);background:#000;position:relative;aspect-ratio:16/9}
.videosec video{width:100%;height:100%;object-fit:cover;display:block}

/* video lightbox */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(6,9,16,.86);backdrop-filter:blur(6px);display:none;place-items:center;padding:20px}
.lightbox.show{display:grid}
.lightbox video{width:min(92vw,900px);max-height:84vh;border-radius:16px;box-shadow:var(--shadow-lg);background:#000}
.lightbox .x{position:absolute;top:18px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;border:0;font-size:1.4rem;cursor:pointer}

/* Cash-on-Delivery order modal (Morocco) */
.order-modal{position:fixed;inset:0;z-index:95;background:rgba(6,9,16,.62);backdrop-filter:blur(5px);display:none;align-items:flex-start;justify-content:center;padding:20px;overflow-y:auto}
.order-modal.show{display:flex}
.om-card{background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);width:min(460px,100%);margin:auto;padding:24px 22px;position:relative}
.om-card h3{font-size:1.35rem;margin:0 0 2px}
.om-card .om-sub{color:var(--muted);font-size:.9rem;margin:0 0 16px}
.om-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--bg-soft);color:var(--ink);font-size:1.3rem;cursor:pointer;line-height:1}
.om-pill{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(180deg,rgba(27,111,179,.06),rgba(27,111,179,.05));border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-bottom:16px}
.om-pill b{font-family:'Hanken Grotesk'}
.om-pill .om-amt{font-family:'Hanken Grotesk';font-weight:700;font-size:1.2rem;color:var(--brand-ink);white-space:nowrap}
.om-field{display:block;margin-bottom:12px}
.om-field span{display:block;font-size:.82rem;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.om-field input,.om-field textarea{width:100%;font:inherit;font-size:1rem;padding:.8em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);transition:border-color .2s}
.om-field input:focus,.om-field textarea:focus{outline:0;border-color:var(--brand)}
.om-field textarea{resize:vertical;min-height:58px}
.om-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.om-card .btn{margin-top:6px}
.om-cod{display:flex;align-items:center;gap:.6em;justify-content:center;font-size:.82rem;color:var(--muted);margin:12px 0 0}
.om-cod b{color:#0f9d6b}

/* ============ V2 EDITORIAL BODY ============ */
.marquee{background:var(--ink);color:#fff;overflow:hidden;padding:13px 0}
.marquee .track{display:flex;width:max-content;animation:mq 30s linear infinite}
.marquee b{display:inline-flex;align-items:center;gap:.4em;padding:0 24px;font-family:'Hanken Grotesk';font-weight:600;font-size:.9rem;white-space:nowrap;letter-spacing:.02em}
.marquee .s{color:var(--brand-2)}
@keyframes mq{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee .track{animation:none}}

.hook{position:relative;color:#fff;overflow:hidden;background:#070b14}
.hook>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.hook .wrap{position:relative;text-align:center;max-width:820px;margin:0 auto;padding:86px 20px}
.hook .eyebrow{background:rgba(255,255,255,.13);color:#fff}
.hook h2{font-size:clamp(2.1rem,6.6vw,3.7rem);color:#fff;margin-bottom:.28em}
.hook h2 .grad-text{color:var(--brand);font-style:italic}
.hook p{color:rgba(255,255,255,.76);font-size:clamp(1rem,2.4vw,1.18rem);max-width:48ch;margin:0 auto 1.6rem}

.ugc2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:820px){.ugc2{grid-template-columns:repeat(4,1fr)}}
.uv{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:9/16;background:#000;cursor:pointer;box-shadow:var(--shadow-sm)}
.uv video,.uv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.uv .ovr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.08) 45%,rgba(10,14,26,.82));z-index:2}
.uv .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand-ink);padding-left:4px;box-shadow:var(--shadow);transition:transform .25s}
.uv:hover .pl{transform:translate(-50%,-50%) scale(1.12)}
.uv .hd{position:absolute;left:12px;bottom:12px;z-index:3;color:#fff;font-size:.82rem}
.uv .hd b{font-weight:700;display:block}
.uv .hd .s{color:#FFB400;font-size:.76rem}
.uv .tt{position:absolute;top:10px;left:10px;z-index:3;background:rgba(255,255,255,.92);border-radius:999px;font-size:.6rem;font-weight:700;padding:.25em .6em;letter-spacing:.04em}
.uv.playing .ovr,.uv.playing .pl,.uv.playing .hd,.uv.playing .tt{opacity:0;transition:opacity .3s}

.eband{position:relative;color:#fff;min-height:clamp(440px,72vh,560px);display:flex;align-items:flex-end;overflow:hidden}
@media(min-width:760px){.eband{min-height:clamp(520px,78vh,680px)}.eband.left{align-items:center}}
.eband>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.eband .g{position:absolute;inset:0}
.eband.left .g{background:linear-gradient(90deg,rgba(7,11,20,.9),rgba(7,11,20,.25) 72%)}
.eband.bottom .g{background:linear-gradient(180deg,rgba(7,11,20,.05) 38%,rgba(7,11,20,.88))}
.eband .in{position:relative;z-index:2;padding:46px 24px;max-width:560px}
.eband .num{font-family:'Hanken Grotesk';font-weight:700;font-size:.92rem;color:var(--brand-2);letter-spacing:.14em}
.eband h2{color:#fff;font-size:clamp(1.9rem,5.4vw,3rem);margin:.25em 0 .3em}
.eband p{color:rgba(255,255,255,.85);font-size:1.06rem;max-width:42ch;margin-bottom:1.2rem}

.howx{display:grid;gap:30px;align-items:center}
@media(min-width:860px){.howx{grid-template-columns:1fr 1fr;gap:50px}}
.howx .vid{border-radius:26px;overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:1/1;background:#000}
.howx .vid video{width:100%;height:100%;object-fit:cover;display:block}
.howx ol{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:18px}
.howx li{counter-increment:s;display:flex;gap:16px;align-items:flex-start}
.howx li::before{content:counter(s);flex:0 0 auto;width:44px;height:44px;border-radius:14px;background:var(--grad);color:#fff;font-family:'Hanken Grotesk';font-weight:700;font-size:1.1rem;display:grid;place-items:center}
.howx li h3{margin:0 0 .15em;font-size:1.18rem}
.howx li p{margin:0;color:var(--muted);font-size:.96rem}

.vsx{display:grid;gap:16px;max-width:860px;margin-inline:auto}
@media(min-width:740px){.vsx{grid-template-columns:1fr 1fr}}
.vsx .c{border-radius:22px;padding:30px 26px}
.vsx .old{background:#fbecec;border:1px solid #f1cccc}
.vsx .new{background:linear-gradient(150deg,#eaf2ff,#e0f7f1);border:2px solid var(--brand);box-shadow:var(--shadow)}
.vsx h3{font-size:1.22rem;margin:0 0 1.1rem;display:flex;align-items:center;gap:.5em}
.vsx .old h3{color:#c0392b}.vsx .new h3{color:var(--brand-ink)}
.vsx ul{list-style:none;padding:0;margin:0;display:grid;gap:.72rem}
.vsx li{display:flex;gap:.6em;font-size:.95rem;align-items:flex-start;line-height:1.4}
.vsx .old li::before{content:"✕";color:#d0463b;font-weight:800;flex:0 0 auto}
.vsx .new li::before{content:"✓";color:#0f9d6b;font-weight:800;flex:0 0 auto}

.bigstats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 16px;text-align:center;max-width:900px;margin:0 auto}
@media(min-width:760px){.bigstats{grid-template-columns:repeat(4,1fr)}}
.bigstats .n{font-family:'Hanken Grotesk';font-weight:700;font-size:clamp(2.2rem,6vw,3rem);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.bigstats .l{font-size:.85rem;color:var(--muted);margin-top:.45em;font-weight:600}

/* ============ FULL-BLEED CREATIVE SECTIONS ============ */
.bleed{width:100%;display:block}
.bleed img{width:100%;display:block}
.creative-band{position:relative;line-height:0}
.creative-band img{width:100%;display:block}
.creative-band .cta-over{position:absolute;left:0;right:0;bottom:24px;display:flex;justify-content:center;line-height:1.5;z-index:2}
@media(min-width:760px){.creative-band .cta-over{bottom:40px}}

/* video ad (vertical, phone-framed) */
.videoad{display:grid;gap:28px;align-items:center}
@media(min-width:820px){.videoad{grid-template-columns:auto 1fr;gap:50px}}
.phone{position:relative;width:min(300px,78vw);margin:0 auto;aspect-ratio:1080/1350;border-radius:30px;overflow:hidden;background:#000;box-shadow:var(--shadow-lg);border:6px solid #0a0e1a}
.phone video{width:100%;height:100%;object-fit:cover;display:block}
.phone .tap{position:absolute;inset:0;display:grid;place-items:center;z-index:3;cursor:pointer;background:rgba(10,14,26,.18)}
.phone .tap span{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand-ink);font-size:1.4rem;padding-left:5px;box-shadow:var(--shadow)}
.phone.playing .tap{opacity:0;pointer-events:none;transition:opacity .3s}
.videoad-copy h2{margin-bottom:.4em}
.videoad-copy p{color:var(--muted)}

/* creative showcase strip */
.cr-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.cr-strip{grid-template-columns:1fr 1fr}}
.cr-strip .shot{border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);aspect-ratio:1;background:var(--bg-soft)}
.cr-strip .shot img{width:100%;height:100%;object-fit:cover}

/* ============ UGC VIDEO WALL ============ */
.ugc-wall{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 16px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
.ugc-card{position:relative;flex:0 0 auto;width:220px;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:#0a0e1a;box-shadow:var(--shadow);scroll-snap-align:center;cursor:pointer}
@media(max-width:520px){.ugc-card{width:74vw;max-width:300px}}
.ugc-card video,.ugc-card img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ugc-card .ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.05) 40%,rgba(10,14,26,.78));z-index:2}
.ugc-card .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--brand-ink);font-size:1.2rem;padding-left:4px;box-shadow:var(--shadow);transition:transform .25s}
.ugc-card:hover .play{transform:translate(-50%,-50%) scale(1.1)}
.ugc-card .meta{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;color:#fff}
.ugc-card .meta .h{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:.4em}
.ugc-card .meta .s{color:#FFB400;font-size:.82rem}
.ugc-card .vbadge{position:absolute;top:12px;left:12px;z-index:3;background:rgba(255,255,255,.92);color:var(--ink);font-size:.66rem;font-weight:700;padding:.25em .6em;border-radius:999px;display:flex;align-items:center;gap:.3em}
.ugc-card .vbadge .live{width:7px;height:7px;border-radius:50%;background:#ff3b5c}
.ugc-card.playing .ov,.ugc-card.playing .play,.ugc-card.playing .meta,.ugc-card.playing .vbadge{opacity:0;transition:opacity .3s}

/* ============ HOT COMPARISON (versus) ============ */
.compare.hot{border:0;background:transparent;box-shadow:none;max-width:820px}
.compare.hot table{border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.compare.hot th,.compare.hot td{padding:16px 10px;border-bottom:1px solid var(--line)}
.compare.hot thead th{vertical-align:bottom;font-size:.82rem;color:var(--muted);background:var(--bg-soft)}
.compare.hot thead th.us{color:#fff;background:var(--grad);font-size:1rem;position:relative;box-shadow:0 -2px 24px rgba(27,111,179,.4)}
.compare.hot thead th.us .crown{font-size:1.3rem;display:block;margin-bottom:2px}
.compare.hot tbody td.us{background:linear-gradient(180deg,rgba(27,111,179,.10),rgba(27,111,179,.07));border-left:2px solid rgba(27,111,179,.35);border-right:2px solid rgba(27,111,179,.35)}
.compare.hot tbody tr:last-child td.us{border-bottom:2px solid rgba(27,111,179,.35);border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.compare.hot tbody td:first-child{text-align:left;font-weight:600;color:var(--ink-2);font-size:.92rem}
.compare.hot .yes{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#10b981;color:#fff;font-weight:800;box-shadow:0 4px 12px rgba(16,185,129,.35)}
.compare.hot td.us .yes{background:#fff;color:#0f9d6b;box-shadow:0 4px 14px rgba(16,185,129,.45)}
.compare.hot .no{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fdecec;color:#e5484d;font-weight:800}
.compare.hot .mid{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff4e0;color:#d98307;font-weight:800}

/* ============ BENEFITS — bento ============ */
.bento{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}}
.bento .cell{background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s}
.bento .cell:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.bento .feat{grid-column:span 2;grid-row:span 2;padding:0;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;min-height:240px}
.bento .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bento .feat .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,26,.05) 30%,rgba(10,14,26,.82))}
.bento .feat .t{position:relative;z-index:2;padding:24px}
.bento .feat h3{color:#fff;font-size:1.4rem;margin-bottom:.2em}
.bento .feat p{color:rgba(255,255,255,.82);margin:0;font-size:.92rem}
.bento .stat-cell{background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:center}
.bento .stat-cell .big{font-family:'Hanken Grotesk';font-weight:700;font-size:2.2rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bento .stat-cell .sub{font-size:.82rem;color:rgba(255,255,255,.72);margin-top:.3em}
.bento .ic{width:46px;height:46px;border-radius:13px;background:rgba(27,111,179,.1);color:var(--brand);display:grid;place-items:center;margin-bottom:12px}
.bento .ic svg{width:25px;height:25px}
.bento .cell h3{font-size:1.05rem;margin-bottom:.25em}
.bento .cell p{font-size:.88rem;color:var(--muted);margin:0}

/* ============ ECOM BUNDLE BOXES ============ */
.bundlebox{display:grid;gap:18px;max-width:980px;margin-inline:auto}
@media(min-width:840px){.bundlebox{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.bx{position:relative;background:#fff;border:2px solid var(--line);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.bx:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.bx.best{border-color:var(--brand);box-shadow:0 24px 60px rgba(27,111,179,.22)}
@media(min-width:840px){.bx.best{transform:scale(1.04)}.bx.best:hover{transform:scale(1.04) translateY(-5px)}}
.bx .burst{position:absolute;top:14px;right:-34px;transform:rotate(45deg);background:var(--grad-warm);color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:.4em 40px;z-index:3;box-shadow:0 6px 14px rgba(192,73,47,.4)}
.bx .bx-top{position:relative;background:linear-gradient(135deg,#eef4fc,#e2f6f2);padding:18px;text-align:center}
.bx.best .bx-top{background:linear-gradient(135deg,#e7f0ff,#dffaf4)}
.bx .bx-top .tagline{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink)}
.bx .bx-top img{height:130px;width:auto;margin:6px auto 0;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(10,14,26,.18))}
.bx .qty{position:absolute;left:12px;top:12px;background:var(--ink);color:#fff;font-family:'Hanken Grotesk';font-weight:700;font-size:.8rem;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;z-index:2}
.bx .bx-body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;text-align:center}
.bx .bx-name{font-family:'Hanken Grotesk';font-weight:700;font-size:1.2rem}
.bx .bx-save{display:inline-block;font-size:.74rem;font-weight:800;color:#fff;background:var(--accent);padding:.3em .8em;border-radius:999px;margin:.5rem auto}
.bx .bx-price{display:flex;align-items:baseline;justify-content:center;gap:.4em;margin:.2rem 0}
.bx .bx-price .now{font-family:'Hanken Grotesk';font-weight:700;font-size:2.1rem}
.bx .bx-price .was{color:var(--muted);text-decoration:line-through;font-weight:600}
.bx .bx-per{font-size:.82rem;color:var(--muted)}
.bx .bx-feat{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:.5rem;text-align:left}
.bx .bx-feat li{display:flex;gap:.55em;font-size:.88rem;align-items:flex-start}
.bx .bx-feat svg{width:17px;height:17px;color:var(--brand-2);flex:0 0 auto;margin-top:3px}
.bx .bx-feat .gift{background:none;border:0;padding:0;font-weight:600;color:var(--brand-ink)}
.bx .btn{margin-top:auto}
.bx .bx-pay{display:flex;justify-content:center;gap:5px;margin-top:12px;opacity:.8}
.bx .bx-pay svg{height:20px}

/* ---------- Press / marquee ---------- */
.press{border-block:1px solid var(--line);background:var(--bg-soft);padding:18px 0}
.press .container{display:flex;align-items:center;gap:18px 30px;flex-wrap:wrap;justify-content:center}
.press .lbl{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.press .logos{display:flex;align-items:center;gap:22px 30px;flex-wrap:wrap;justify-content:center}
.press .logos span{font-family:'Hanken Grotesk';font-weight:700;color:#8b94a6;font-size:1.05rem;letter-spacing:-.01em;filter:grayscale(1);opacity:.8}

/* ---------- Generic section ---------- */
.sec{padding:60px 0}
.sec-head{max-width:640px;margin:0 auto 40px;text-align:center}
.sec-head p{color:var(--muted);font-size:1.05rem}
@media(min-width:880px){.sec{padding:84px 0}}

/* ---------- Problem cards ---------- */
.bg-soft{background:var(--bg-soft)}
.cards-3{display:grid;gap:16px}
@media(min-width:760px){.cards-3{grid-template-columns:repeat(3,1fr)}}
.pcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 22px;box-shadow:var(--shadow-sm)}
.pcard .emoji{font-size:1.7rem;display:block;margin-bottom:.5rem}
.pcard h3{font-size:1.12rem;margin-bottom:.35em}
.pcard p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- How it works ---------- */
.steps{display:grid;gap:22px;counter-reset:step}
@media(min-width:780px){.steps{grid-template-columns:repeat(3,1fr);gap:18px}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 24px;text-align:center;box-shadow:var(--shadow-sm)}
.step .num{counter-increment:step;width:46px;height:46px;border-radius:14px;background:var(--grad);color:#fff;font-family:'Hanken Grotesk';font-weight:700;font-size:1.2rem;display:grid;place-items:center;margin:0 auto 16px}
.step .num::after{content:counter(step)}
.step .art{width:84px;height:84px;margin:0 auto 14px;color:var(--brand)}
.step h3{font-size:1.16rem}
.step p{color:var(--muted);font-size:.95rem;margin:0}

/* ---------- Comparison table ---------- */
.compare{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);max-width:760px;margin-inline:auto}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{padding:15px 12px;text-align:center;font-size:.92rem;border-bottom:1px solid var(--line)}
.compare th{font-family:'Hanken Grotesk';font-weight:700}
.compare thead th{font-size:.84rem}
.compare tbody td:first-child,.compare thead th:first-child{text-align:left;font-weight:600;color:var(--ink-2)}
.compare .us{background:linear-gradient(180deg,rgba(27,111,179,.08),rgba(27,111,179,.06));position:relative}
.compare thead .us{color:var(--brand-ink)}
.compare .yes{color:#10b981;font-weight:700}
.compare .no{color:#cbd2de;font-weight:700}
.compare tr:last-child td{border-bottom:0}

/* ---------- Benefits ---------- */
.benefits{display:grid;gap:14px}
@media(min-width:620px){.benefits{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.benefits{grid-template-columns:repeat(3,1fr)}}
.benefit{display:flex;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:20px;box-shadow:var(--shadow-sm)}
.benefit .ic{width:44px;height:44px;flex:0 0 auto;border-radius:12px;background:rgba(27,111,179,.10);color:var(--brand);display:grid;place-items:center}
.benefit .ic svg{width:24px;height:24px}
.benefit h3{font-size:1.04rem;margin-bottom:.25em}
.benefit p{font-size:.9rem;color:var(--muted);margin:0}

/* ---------- Before / After slider ---------- */
.ba-wrap{max-width:620px;margin:0 auto}
.ba{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;user-select:none;touch-action:none;cursor:ew-resize}
.ba .layer{position:absolute;inset:0;display:grid;place-items:center;font-family:'Hanken Grotesk';font-weight:700;font-size:1.1rem}
.ba .after{background:radial-gradient(120% 120% at 50% 0,#cfe8ff,#eaf4ff)}
.ba .before{background:radial-gradient(120% 120% at 50% 0,#9aa6b8,#717d90);clip-path:inset(0 50% 0 0);color:#fff}
.ba .tag{position:absolute;top:12px;padding:.3em .8em;border-radius:999px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(10,14,26,.55);color:#fff;backdrop-filter:blur(4px)}
.ba .tag.l{left:12px}.ba .tag.r{right:12px}
.ba .smudge{position:absolute;inset:0;background:
  radial-gradient(circle at 30% 40%,rgba(255,255,255,.35),transparent 18%),
  radial-gradient(circle at 62% 58%,rgba(255,255,255,.28),transparent 16%),
  radial-gradient(circle at 48% 30%,rgba(255,255,255,.22),transparent 14%)}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ba-handle::after{content:"⟺";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:#fff;color:var(--brand);display:grid;place-items:center;font-size:1rem;box-shadow:var(--shadow)}

/* ---------- Works on everything ---------- */
.surfaces{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.surface{display:flex;flex-direction:column;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px 20px;min-width:120px;box-shadow:var(--shadow-sm);font-weight:600;font-size:.9rem}
.surface .emoji{font-size:1.7rem}

/* ---------- Offer / pricing ---------- */
.offer{background:radial-gradient(80% 60% at 50% 0,rgba(27,111,179,.10),transparent 60%),var(--bg-soft)}
.timer{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;font-weight:600;font-size:.9rem;box-shadow:var(--shadow-sm);margin-bottom:1.4rem}
.timer b{font-family:'Hanken Grotesk';color:var(--accent-ink);font-variant-numeric:tabular-nums}
.plans{display:grid;gap:18px;max-width:920px;margin-inline:auto}
@media(min-width:820px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{position:relative;background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:26px 22px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plan.popular{border-color:var(--brand);box-shadow:var(--shadow);transform:scale(1.0)}
@media(min-width:820px){.plan.popular{transform:scale(1.05)}}
.plan .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4em 1em;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px rgba(27,111,179,.35)}
.plan .pname{font-family:'Hanken Grotesk';font-weight:700;font-size:1.18rem}
.plan .save{display:inline-block;font-size:.78rem;font-weight:700;color:var(--accent-ink);background:rgba(192,73,47,.10);padding:.25em .7em;border-radius:999px;margin:.5rem 0}
.plan .price{display:flex;align-items:baseline;gap:.4em;margin:.4rem 0 .1rem}
.plan .price .now{font-family:'Hanken Grotesk';font-weight:700;font-size:2.3rem}
.plan .price .was{color:var(--muted);text-decoration:line-through;font-weight:600}
.plan .per{font-size:.84rem;color:var(--muted);margin-bottom:1rem}
.plan ul{list-style:none;padding:0;margin:0 0 1.3rem;display:grid;gap:.55rem}
.plan li{display:flex;gap:.6em;font-size:.92rem;align-items:flex-start}
.plan li svg{width:18px;height:18px;color:var(--brand-2);flex:0 0 auto;margin-top:2px}
.plan .btn{margin-top:auto}
.offer-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.4rem;margin-top:2rem;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.offer-trust span{display:inline-flex;align-items:center;gap:.45em}
.offer-trust svg{width:18px;height:18px;color:var(--brand)}

/* ---------- Guarantee ---------- */
.guarantee{display:grid;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 26px;box-shadow:var(--shadow);max-width:880px;margin-inline:auto}
@media(min-width:740px){.guarantee{grid-template-columns:auto 1fr;padding:40px}}
.seal{width:130px;height:130px;margin-inline:auto;flex:0 0 auto}
.guarantee h2{font-size:clamp(1.5rem,4vw,2rem)}
.guarantee p{color:var(--muted);margin:0}

/* ---------- Reviews ---------- */
.reviews{display:grid;gap:16px}
@media(min-width:720px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm)}
.review .stars{font-size:.95rem;margin-bottom:.6rem}
.review p{font-size:.96rem;margin-bottom:1rem}
.review .who{display:flex;align-items:center;gap:.7em}
.review .av{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-weight:700;font-family:'Hanken Grotesk'}
.review .who b{display:block;font-size:.9rem}
.review .who small{color:var(--muted);font-size:.78rem;display:flex;align-items:center;gap:.3em}
.verified{color:#10b981;font-weight:700;font-size:.72rem}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-inline:auto;display:grid;gap:12px}
.qa{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:18px 20px;font-weight:600;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .pm{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--bg-soft);display:grid;place-items:center;transition:transform .3s,background .3s;font-size:1.1rem;color:var(--brand)}
.qa[open] summary .pm{transform:rotate(45deg);background:var(--brand);color:#fff}
.qa .ans{padding:0 20px 18px;color:var(--muted);font-size:.95rem}

/* ---------- Final CTA ---------- */
.final{background:var(--ink);color:#fff;border-radius:var(--radius);padding:46px 26px;text-align:center;max-width:880px;margin-inline:auto;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:260px;background:radial-gradient(50% 100% at 50% 100%,rgba(27,111,179,.5),transparent 70%)}
.final h2{position:relative;color:#fff}
.final p{position:relative;color:rgba(255,255,255,.72);max-width:46ch;margin-inline:auto}
.final .btn{position:relative;margin-top:1rem}

/* ---------- Footer ---------- */
footer{background:var(--bg-soft);border-top:1px solid var(--line);padding:40px 0 110px;font-size:.86rem;color:var(--muted)}
@media(min-width:760px){footer{padding-bottom:48px}}
.foot-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
.foot-grid .brand{color:var(--ink)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a:hover{color:var(--brand-ink)}
.disclaimer{font-size:.74rem;line-height:1.6;border-top:1px solid var(--line);padding-top:18px}

/* ---------- Sticky mobile buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:55;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px;display:flex;align-items:center;gap:12px;transform:translateY(120%);transition:transform .4s var(--ease);box-shadow:0 -8px 30px rgba(16,24,40,.12)}
.buybar.show{transform:translateY(0)}
.buybar .info{flex:1;min-width:0}
.buybar .info b{font-family:'Hanken Grotesk';font-size:1.05rem;display:block;line-height:1.1}
.buybar .info small{color:var(--muted);font-size:.76rem}
.buybar .btn{flex:0 0 auto;padding:.95em 1.5em}
@media(min-width:760px){.buybar{display:none}}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:90px;translate:-50% 20px;background:var(--ink);color:#fff;padding:.8em 1.2em;border-radius:12px;font-size:.88rem;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s,translate .3s;z-index:80;max-width:90vw;text-align:center}
.toast.show{opacity:1;translate:-50% 0}

/* ---------- Social-proof popup ---------- */
.spop{position:fixed;left:16px;bottom:90px;z-index:54;display:flex;align-items:center;gap:.7em;background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7em .9em;box-shadow:var(--shadow);font-size:.84rem;max-width:280px;opacity:0;translate:0 16px;transition:opacity .4s,translate .4s;pointer-events:none}
.spop.show{opacity:1;translate:0 0}
.spop-ic{font-size:1.3rem}
.spop b{font-weight:700;font-size:.86rem}
.spop small{color:var(--muted);font-size:.74rem}
@media(min-width:760px){.spop{bottom:24px}}

/* ---------- Image slots with graceful fallback ---------- */
[data-ph]{position:relative;background:linear-gradient(135deg,#e9f1fc,#dff5f1);overflow:hidden}
[data-ph]::after{content:attr(data-ph);position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:1rem;font-size:.8rem;font-weight:600;color:#8a97ac;opacity:0;transition:opacity .3s}
[data-ph].img-failed::after{opacity:1}
[data-ph] img{position:relative;z-index:1}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-blob,.float-card{animation:none}
  html{scroll-behavior:auto}
}