/* =====================================================================
   Dubinsko BGD — Koncept 1b „Sveže i jasno — kreativno“
   One stylesheet. Mobile-first: 360 → 768 → 1200 → 1440.
   ---------------------------------------------------------------------
   KONTRAST (WCAG 2.2, izračunato iz hex vrednosti)
   --ink      #16212e on #ffffff ............ 16.27:1  AA/AAA tekst
   --blue-900 #0b2a4a on #ffffff ............ 14.54:1  naslovi
   --blue-900 #0b2a4a on --blue-50 #eef7ff .. 13.42:1
   --blue-900 #0b2a4a on --blue-100 #d9eeff . 12.20:1
   --muted    #5a6878 on #ffffff ............  5.70:1  sekundarni tekst
   --muted    #5a6878 on --blue-50 #eef7ff ..  5.26:1
   #ffffff on --blue-700 #0070c9 ............  5.05:1  dugmad, mobilni meni
   --blue-700 #0070c9 on #ffffff ............  5.05:1  linkovi
   --blue-700 #0070c9 on --blue-50 #eef7ff ..  4.66:1  linkovi na svetloplavoj
   --blue-600 #0094ff on #ffffff ............  3.14:1  SAMO ikone, velike površine, tekst ≥ 24px
   #ffffff on --blue-600 #0094ff ............  3.14:1  SAMO naslov ≥ 24px (CTA blok)
   --ink #16212e on --sun-400 #ffc83d ....... 10.52:1  stikeri, „Najčešće“
   --blue-900 on --sun-400 .................. 9.40:1
   --ink #16212e on --todo #ffe58a .......... 13.03:1  [POTVRDITI] oznake
   --blue-900 on --aqua-300 #7fdcff ......... 9.41:1
   --success #12a150 on #ffffff ............. 3.37:1  SAMO ikone (non-text ≥ 3:1)
   --sun-400 se nikad ne koristi kao boja teksta na beloj.
   ===================================================================== */

@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-ext.woff2) format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Color */
  --blue-600:#0094ff; --blue-700:#0070c9; --blue-900:#0b2a4a;
  --blue-50:#eef7ff; --blue-100:#d9eeff; --aqua-300:#7fdcff;
  --sun-400:#ffc83d; --ink:#16212e; --muted:#5a6878; --line:#e3ebf3;
  --bg:#ffffff; --success:#12a150; --todo:#ffe58a;
  /* thin-film hues — only for bubble decorations */
  --film-pink:#ff9ad5; --film-gold:#ffd66b; --film-lilac:#b9a4ff;

  /* Type: 2 families, 4 cuts (Bricolage 700/800, Inter 400/600) */
  --ff-display:"Bricolage Grotesque","Plus Jakarta Sans",ui-sans-serif,system-ui,sans-serif;
  --ff-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-display:clamp(2.75rem,1.833rem + 4.074vw,5.5rem);  /* 44 → 88 */
  --fs-big:clamp(3.5rem,2.667rem + 3.704vw,6rem);         /* 56 → 96 */
  --fs-h2:clamp(1.875rem,1.5rem + 1.667vw,3rem);          /* 30 → 48 */
  --fs-h3:clamp(1.25rem,1.125rem + .556vw,1.625rem);      /* 20 → 26 */
  --fs-body:clamp(1rem,.958rem + .185vw,1.125rem);        /* 16 → 18 */
  --fs-small:.875rem;                                     /* 14 */

  /* Space (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --s11:160px;
  --section:72px; --container:1240px; --gutter:20px; --header-h:64px;

  /* Shape */
  --r-sm:16px; --r-md:24px; --r-lg:36px; --r-pill:999px;
  --blob-a:58% 42% 46% 54% / 44% 52% 48% 56%;
  --blob-b:42% 58% 62% 38% / 52% 40% 60% 48%;
  --blob-c:50% 50% 38% 62% / 60% 44% 56% 40%;
  --shadow:0 14px 40px rgba(0,148,255,.16);
  --shadow-sm:0 6px 18px rgba(11,42,74,.10);

  /* Motion tokens */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:150ms; --dur-base:300ms; --dur-slow:500ms;
}
@media (min-width:768px){ :root{ --gutter:32px; --header-h:76px; } }
@media (min-width:1200px){ :root{ --section:128px; } }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0;font-family:var(--ff-body);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--bg);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:var(--blue-700);text-underline-offset:3px}
h1,h2,h3{font-family:var(--ff-display);color:var(--blue-900);margin:0 0 var(--s4);font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--s4)}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit}
.num,[data-total],.price,.item-price,.big-num{font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--blue-700);outline-offset:3px;border-radius:6px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--blue-700);color:#fff;padding:12px 18px;border-radius:12px;font-weight:600;text-decoration:none;transition:transform var(--dur-fast) var(--ease-out)}
.skip-link:focus{transform:translateY(72px)}
.container{width:100%;max-width:calc(var(--container) + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}
main{overflow-x:clip} /* rotated trust band + bleeding decorations; clip (not hidden) keeps sticky working */
.section--soft{background:var(--blue-50)}
.deco{position:absolute;pointer-events:none}
/* every loop stops off-screen (IntersectionObserver) and in background tabs */
.is-paused,.is-paused *,html.is-hidden *{animation-play-state:paused!important}

/* [POTVRDITI] placeholder */
.todo{display:inline-block;background:var(--todo);color:var(--ink);font:600 .8125rem/1.35 var(--ff-body);padding:2px 8px;border-radius:6px;border:1px dashed #c9a400;letter-spacing:0;vertical-align:middle;text-transform:none;white-space:normal}
h1 .todo,h2 .todo,h3 .todo{font-size:.8125rem}
.img-missing{position:relative;background:repeating-linear-gradient(45deg,var(--blue-50) 0 12px,var(--blue-100) 12px 24px);min-height:160px}
.img-missing img{opacity:0}
.img-missing::before{content:"[SLIKA: " attr(data-file) "]";position:absolute;inset:auto 8px 8px 8px;background:var(--todo);color:var(--ink);font:600 12px/1.3 var(--ff-body);padding:4px 8px;border-radius:6px;z-index:3;word-break:break-all}

/* ---------- Decorative accents ---------- */
/* Hand-drawn scribble underline under one key word */
.scribble{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.scribble-svg{position:absolute;left:-3%;right:-3%;bottom:-.14em;width:106%;height:.32em;overflow:visible;z-index:-1;color:var(--sun-400)}
.scribble-svg path{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .scribble-svg path{stroke-dashoffset:1;transition:stroke-dashoffset 600ms var(--ease-out) 200ms}
.js .is-in .scribble-svg path,.js .scribble.is-in .scribble-svg path{stroke-dashoffset:0}
/* one-shot ✦ sparkle */
.sparkle{position:absolute;width:.42em;height:.42em;right:-.38em;top:-.18em;color:var(--sun-400);opacity:0;transform:scale(0) rotate(-30deg)}
.is-in .sparkle,.scribble.is-in .sparkle{animation:sparkle 600ms var(--ease-out) 650ms 1 both}
.sparkle--blue{color:var(--blue-600)}
@keyframes sparkle{0%{opacity:0;transform:scale(0) rotate(-30deg)}55%{opacity:1;transform:scale(1.2) rotate(10deg)}100%{opacity:0;transform:scale(.6) rotate(25deg)}}

/* Sticker chips */
.sticker{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--blue-900);font:600 var(--fs-small)/1.2 var(--ff-body);padding:10px 14px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm);border:1.5px solid var(--line);transform:rotate(-3deg);position:relative;text-decoration:none}
.sticker--sun{background:var(--sun-400);color:var(--ink);border-color:transparent}
.sticker--tilt-r{transform:rotate(2deg)}
.sticker svg{width:18px;height:18px;flex:none}
.sticker .bub{position:absolute;right:-7px;top:-9px;width:14px;height:14px;animation:bob 3.2s var(--ease-in-out) infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
a.sticker{min-height:48px}

/* CSS soap bubble (fallback + decorations) */
.bub{border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 7%,rgba(255,255,255,0) 20%),
    radial-gradient(circle at 50% 50%,rgba(127,220,255,0) 56%,rgba(127,220,255,.28) 68%,rgba(255,154,213,.36) 78%,rgba(255,214,107,.36) 86%,rgba(185,164,255,.5) 95%,rgba(185,164,255,0) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}

/* Wavy dividers */
.wave{display:block;width:100%;height:clamp(28px,4vw,64px);color:var(--blue-50);pointer-events:none}
.wave--flip{transform:scaleY(-1)}
.wave-wrap{position:relative;overflow:hidden;line-height:0}
.wave-wrap .bub{position:absolute;bottom:20%;animation:cross 26s linear infinite}
.wave-wrap .bub:nth-of-type(2){animation-duration:34s;animation-delay:-12s;bottom:45%}
.wave-wrap .bub:nth-of-type(3){animation-duration:40s;animation-delay:-24s;bottom:10%}
@keyframes cross{from{transform:translateX(-10vw)}to{transform:translateX(110vw)}}

/* ---------- Buttons ---------- */
.btn{--bg:var(--blue-700);--fg:#fff;position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 24px;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);border:2px solid var(--bg);font:600 1rem/1.2 var(--ff-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 250ms var(--ease-spring);-webkit-tap-highlight-color:transparent}
.btn svg{width:20px;height:20px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.96);transition:transform 90ms var(--ease-out)}
.btn--primary{box-shadow:var(--shadow)}
.btn--primary .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none;z-index:-1}
.btn--primary .shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-130%) skewX(-18deg)}
@media (hover:hover){.btn--primary:hover .shine::after{transform:translateX(330%) skewX(-18deg);transition:transform 500ms var(--ease-out)}}
.btn--secondary{--bg:#fff;--fg:var(--blue-700);border-color:var(--blue-700)}
.btn--sun{--bg:var(--sun-400);--fg:var(--ink);box-shadow:0 14px 40px rgba(11,42,74,.18)}
.btn--white{--bg:#fff;--fg:var(--blue-900)}
.btn--sm{min-height:48px;padding:10px 18px;font-size:.9375rem}
.btn--lg{min-height:60px;padding:16px 30px;font-size:1.0625rem}
.icon-btn{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--blue-50);color:var(--blue-700);cursor:pointer;transition:transform 250ms var(--ease-spring)}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:22px;height:22px}
.link-arrow{display:inline-flex;align-items:center;gap:8px;min-height:48px;font-weight:600;color:var(--blue-700);text-decoration:none}
.link-arrow svg{width:20px;height:20px;transition:transform var(--dur-base) var(--ease-spring)}
.link-arrow:hover svg{transform:translateX(4px)}

/* Bubbles rising behind CTAs */
.cta-wrap{position:relative;display:inline-flex;isolation:isolate}
.rise{position:absolute;inset:-60px 10% 30% 10%;pointer-events:none;z-index:-1}
.rise .bub{position:absolute;bottom:0;opacity:0;animation:rise 2.6s var(--ease-out) infinite}
.rise .bub:nth-child(1){left:8%;width:12px;height:12px;animation-delay:0s}
.rise .bub:nth-child(2){left:30%;width:20px;height:20px;animation-delay:.5s;animation-duration:3s}
.rise .bub:nth-child(3){left:52%;width:9px;height:9px;animation-delay:1.1s;animation-duration:2.2s}
.rise .bub:nth-child(4){left:72%;width:16px;height:16px;animation-delay:1.6s}
.rise .bub:nth-child(5){left:88%;width:24px;height:24px;animation-delay:.9s;animation-duration:2.9s}
.rise .bub:nth-child(6){left:44%;width:14px;height:14px;animation-delay:2s;animation-duration:2.4s}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:.9}100%{opacity:0;transform:translateY(-56px) scale(1)}}
.rise--hover .bub{animation-play-state:paused}
.rise--hover .bub{opacity:0}
@media (hover:hover){.cta-wrap:hover .rise--hover .bub,.card:hover .rise--hover .bub{animation-play-state:running}}
/* click burst (JS) */
.pop-bub{position:fixed;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;animation:popbub 600ms var(--ease-out) forwards}
@keyframes popbub{0%{opacity:1;transform:translate(0,0) scale(.4)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:60;height:var(--header-h)}
.site-header::before,.site-header::after{content:"";position:absolute;inset:0;z-index:-1;transition:opacity var(--dur-base) var(--ease-out)}
.site-header::before{background:#fff}
.site-header::after{background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line),0 8px 24px rgba(11,42,74,.06);opacity:0}
.site-header.is-scrolled::before{opacity:0}
.site-header.is-scrolled::after{opacity:1}
.site-header>.container{height:100%;display:flex;align-items:center;gap:var(--s5)}
.logo{display:flex;align-items:center;min-height:48px;margin-right:auto}
.logo img{width:auto;height:40px}
.nav{display:none}
.nav ul{display:flex;gap:4px}
.nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--r-pill);color:var(--blue-900);font-weight:600;font-size:.9375rem;text-decoration:none;transition:background-color var(--dur-fast)}
.nav a:hover{background:var(--blue-50)}
.nav a[aria-current="page"]{color:var(--blue-700);background:var(--blue-50)}
.header-tel{display:none}
.header-mobile-actions{display:flex;gap:8px}
/* clip wrapper: the off-screen panel must not widen the page */
.mnav-clip{position:fixed;left:0;right:0;top:var(--header-h);height:calc(100dvh - var(--header-h));overflow:hidden;visibility:hidden;pointer-events:none;transition:visibility 0s linear var(--dur-base)}
.mnav-clip.is-open{visibility:visible;pointer-events:auto;transition:none}
.mobile-nav{position:absolute;inset:0;background:var(--blue-700);padding:var(--s6) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:4px;overflow:auto;transform:translateX(100%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)}
.mobile-nav.is-open{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility 0s}
.mobile-nav a:not(.btn){color:#fff;font:800 2rem/1.15 var(--ff-display);text-decoration:none;padding:10px 0;min-height:48px;letter-spacing:-.02em}
.mobile-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--sun-400);text-decoration-thickness:4px;text-underline-offset:8px}
.mobile-nav .btn{margin-top:auto}
.mobile-nav .bub{position:absolute}
@media (min-width:1100px){
  .nav{display:block}
  .header-tel{display:inline-flex}
  .header-mobile-actions{display:none}
  .mnav-clip{display:none}
  .logo{margin-right:0}
  .nav{margin-inline:auto}
}

/* ---------- Hero ---------- */
.hero{position:relative;padding:var(--s6) 0 var(--s8);overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.hero-mesh{position:absolute;inset:-25%;background:
  radial-gradient(40% 35% at 78% 30%,rgba(0,148,255,.30),transparent 70%),
  radial-gradient(35% 30% at 92% 75%,rgba(127,220,255,.55),transparent 70%),
  radial-gradient(30% 30% at 55% 85%,rgba(127,220,255,.35),transparent 70%),
  radial-gradient(40% 40% at 10% 10%,rgba(217,238,255,.9),transparent 70%);
  animation:mesh 20s var(--ease-in-out) infinite alternate}
@keyframes mesh{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(-4%,3%,0) rotate(6deg) scale(1.06)}100%{transform:translate3d(3%,-2%,0) rotate(-4deg) scale(1.02)}}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.css-bubbles{position:absolute;inset:0;z-index:-1;pointer-events:none}
.css-bubbles .bub{position:absolute;bottom:-60px;animation:float-up linear infinite}
.css-bubbles .bub:nth-child(1){left:6%;width:22px;height:22px;animation-duration:19s}
.css-bubbles .bub:nth-child(2){left:22%;width:12px;height:12px;animation-duration:15s;animation-delay:-6s}
.css-bubbles .bub:nth-child(3){left:41%;width:34px;height:34px;animation-duration:24s;animation-delay:-11s}
.css-bubbles .bub:nth-child(4){left:58%;width:16px;height:16px;animation-duration:17s;animation-delay:-3s}
.css-bubbles .bub:nth-child(5){left:70%;width:44px;height:44px;animation-duration:27s;animation-delay:-15s}
.css-bubbles .bub:nth-child(6){left:83%;width:20px;height:20px;animation-duration:18s;animation-delay:-9s}
.css-bubbles .bub:nth-child(7){left:92%;width:28px;height:28px;animation-duration:22s;animation-delay:-2s}
.css-bubbles .bub:nth-child(8){left:33%;width:10px;height:10px;animation-duration:14s;animation-delay:-8s}
@keyframes float-up{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(10px,-30vh,0)}50%{transform:translate3d(-8px,-60vh,0)}75%{transform:translate3d(9px,-90vh,0)}100%{transform:translate3d(0,-125vh,0)}}
.hero.has-canvas .css-bubbles{display:none}

.hero-grid{display:grid;gap:var(--s7);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .sticker{margin-bottom:var(--s5)}
.hero h1{font-size:var(--fs-display);line-height:1.05;letter-spacing:-.035em;margin-bottom:var(--s5)}
.hero h1 .scribble-svg{height:.26em;bottom:-.1em}
.hero-sub{font-size:clamp(1.0625rem,1rem + .3vw,1.25rem);color:var(--muted);max-width:36em;margin-bottom:var(--s6)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);margin-bottom:var(--s6)}
.hero-ctas>.btn,.hero-ctas>.cta-wrap{flex:1 1 100%}
.hero-ctas .cta-wrap .btn{flex:1}
.nowrap{white-space:nowrap}
.facts{display:flex;flex-wrap:wrap;gap:10px 12px}
.facts .sticker{margin:0;box-shadow:none;font-weight:600}
.facts li:nth-child(1) .sticker{transform:rotate(-2deg)}
.facts li:nth-child(2) .sticker{transform:rotate(2deg)}
.facts li:nth-child(3) .sticker{transform:rotate(-1deg)}
.facts .sticker svg{color:var(--blue-600)}

.hero-media{position:relative;z-index:1;justify-self:center;width:min(100%,460px)}
.hero-blob{border-radius:var(--blob-a);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/5;background:var(--blue-100)}
.hero-blob .ba{border-radius:0;height:100%;aspect-ratio:auto}
.hero-media .deco-ring{position:absolute;inset:-14px;border-radius:var(--blob-b);border:2px dashed rgba(0,148,255,.35);pointer-events:none;z-index:-1}
.price-float{position:absolute;left:-8px;bottom:18%;z-index:4;display:flex;flex-direction:column;gap:2px;background:var(--sun-400);color:var(--ink);padding:12px 16px;border-radius:18px;box-shadow:0 12px 28px rgba(11,42,74,.18);transform:rotate(-4deg);max-width:220px}
.price-float b{font:800 1.5rem/1 var(--ff-display);letter-spacing:-.02em}
.price-float span{font-size:.8125rem;font-weight:600}
.price-float .todo{margin-top:4px;font-size:.6875rem}
.hero-media .bub.b1{position:absolute;width:56px;height:56px;right:-10px;top:6%;z-index:3}
.hero-media .bub.b2{position:absolute;width:22px;height:22px;right:30px;top:-6px;z-index:3}
@media (min-width:768px){
  .hero{padding:var(--s8) 0 var(--s9)}
  .hero-ctas>.btn,.hero-ctas>.cta-wrap{flex:0 0 auto}
  .price-float{left:-36px}
}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:7fr 5fr;gap:var(--s6)}
  .hero-media{width:100%;max-width:none;margin-bottom:calc(-1 * (var(--s9) + 40px))}
  .hero{overflow:visible;z-index:2}
  .hero-bg{bottom:0}
}

/* ---------- Before / after comparator ---------- */
.ba{--pos:50%;position:relative;overflow:hidden;border-radius:var(--r-md);aspect-ratio:3/4;background:var(--blue-100);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;isolation:isolate}
.ba>figure{position:absolute;inset:0;margin:0}
.ba img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-top{z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-tag{position:absolute;top:14px;z-index:3;background:#fff;color:var(--blue-900);font:800 .875rem/1 var(--ff-display);padding:8px 12px;border-radius:10px;box-shadow:var(--shadow-sm);letter-spacing:.02em;text-transform:uppercase}
.ba-top .ba-tag{left:14px;transform:rotate(-5deg)}
.ba-bottom .ba-tag{right:14px;transform:rotate(4deg);background:var(--sun-400);color:var(--ink)}
.ba--reverse .ba-top .ba-tag{background:var(--sun-400);color:var(--ink)}
.ba--reverse .ba-bottom .ba-tag{background:#fff;color:var(--blue-900)}
/* track = full width; translateX(%) of itself == % of comparator → handle moves on transform only */
.ba-track{position:absolute;inset:0;z-index:2;pointer-events:none;transform:translateX(var(--pos))}
/* foam front: wavy white edge + bubbles riding the line */
.ba-foam{position:absolute;top:0;bottom:0;left:-14px;width:28px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='60' viewBox='0 0 28 60'%3E%3Cpath d='M14 0c7 7.5 7 22.5 0 30s-7 22.5 0 30' fill='none' stroke='white' stroke-width='3.5'/%3E%3C/svg%3E") center top/28px 60px repeat-y;filter:drop-shadow(0 0 3px rgba(11,42,74,.35))}
.ba-foam i{position:absolute;left:50%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 30%,rgba(255,255,255,.75) 55%,rgba(217,238,255,.55));box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.ba-foam i:nth-child(1){top:6%;width:14px;height:14px;margin-left:-4px}
.ba-foam i:nth-child(2){top:14%;width:9px;height:9px;margin-left:-9px}
.ba-foam i:nth-child(3){top:27%;width:16px;height:16px;margin-left:-6px}
.ba-foam i:nth-child(4){top:62%;width:12px;height:12px;margin-left:-2px}
.ba-foam i:nth-child(5){top:70%;width:8px;height:8px;margin-left:-10px}
.ba-foam i:nth-child(6){top:82%;width:15px;height:15px;margin-left:-7px}
.ba-foam i:nth-child(7){top:92%;width:10px;height:10px;margin-left:-3px}
.ba-sheen{position:absolute;top:0;bottom:0;right:100%;width:40%;background:linear-gradient(90deg,transparent,rgba(127,220,255,.18) 70%,rgba(255,255,255,.35));opacity:0;transition:opacity var(--dur-base)}
.ba.is-wiping .ba-sheen{opacity:1}
.ba-handle{position:absolute;top:50%;left:0;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:auto;cursor:grab;border-radius:50%;display:grid;place-items:center;transition:transform 250ms var(--ease-spring)}
.ba-handle:active{cursor:grabbing;transform:scale(.94)}
.ba-handle:focus-visible{outline:3px solid #fff;box-shadow:0 0 0 6px var(--blue-700)}
.nozzle{width:64px;height:64px;filter:drop-shadow(0 6px 12px rgba(11,42,74,.3))}
.ba-hint{position:absolute;left:50%;bottom:14px;z-index:3;transform:translateX(-50%) rotate(-2deg);background:rgba(11,42,74,.86);color:#fff;font-size:.8125rem;font-weight:600;padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;transition:opacity var(--dur-base)}
.ba.is-touched .ba-hint{opacity:0}
.drop{position:absolute;z-index:3;width:8px;height:8px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff 0 20%,rgba(127,220,255,.85) 45%,rgba(0,148,255,.5));animation:drip 400ms var(--ease-out) forwards}
@keyframes drip{from{opacity:.95;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}
.ba-done{position:absolute;z-index:4;top:42%;left:50%;width:84px;height:84px;margin:-42px 0 0 -42px;color:#fff;opacity:0;pointer-events:none}
.ba.is-clean .ba-done{animation:sparkle 600ms var(--ease-out) 1 both}
/* no-JS fallback: two images side by side */
html:not(.js) .ba{aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:4px;cursor:auto}
html:not(.js) .ba>figure{position:relative;clip-path:none}
html:not(.js) .ba-track,html:not(.js) .ba-hint{display:none}

/* ---------- Trust marquee ---------- */
.trust{position:relative;z-index:0;background:var(--blue-700);color:#fff;padding:0;transform:rotate(-1.2deg);margin:var(--s5) -2vw 0;box-shadow:var(--shadow)}
.marquee{overflow:hidden;display:flex}
.marquee-track{display:flex;flex:none;gap:0;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track,.is-paused .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-100%)}}
.marquee ul{display:flex;flex:none;align-items:center}
.marquee li{display:flex;align-items:center;gap:10px;padding:16px 28px;white-space:nowrap;font-weight:600;font-size:.9375rem}
.marquee li::after{content:"";width:10px;height:10px;margin-left:28px;border-radius:50%;background:var(--aqua-300);opacity:.8}
.marquee li svg{width:22px;height:22px;color:var(--aqua-300)}
.marquee a{color:#fff;min-height:48px;display:inline-flex;align-items:center}
/* trust band: white on --blue-700 = 5.05:1; aqua icons on --blue-700 ≈ 3.2:1 (non-text) */

/* ---------- Section heads ---------- */
.section-head{max-width:760px;margin-bottom:var(--s7)}
.section-head p{color:var(--muted)}
.section-head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);max-width:none}
.section-head--row>div{max-width:680px}
.section-head--center{margin-inline:auto;text-align:center}
.eyebrow{display:inline-block;font:700 .8125rem/1 var(--ff-body);text-transform:uppercase;letter-spacing:.12em;color:var(--blue-700);margin-bottom:var(--s3)}

/* ---------- Services bento ---------- */
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.card{min-width:0;position:relative;isolation:isolate;display:flex;flex-direction:column;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--s3);transition:transform 220ms var(--ease-spring)}
.card::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 24px 50px rgba(0,148,255,.22);opacity:0;transition:opacity 220ms var(--ease-out);z-index:-1}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-6px) rotate(-1deg)}
  .card:nth-child(even):hover{transform:translateY(-6px) rotate(1deg)}
  .card:hover::after{opacity:1}
}
.card-media{position:relative;aspect-ratio:1/1;border-radius:18px;overflow:hidden;background:var(--blue-50);transform:rotate(-1.5deg);margin:2px 2px var(--s3)}
.card:nth-child(even) .card-media{transform:rotate(1.5deg)}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media--icon{display:grid;place-items:center;color:var(--blue-600)}
.card-media--icon svg{width:46%;height:46%}
.card-media--icon .bub{position:absolute}
.card-media--icon .bub:nth-of-type(1){width:30px;height:30px;right:14%;top:14%}
.card-media--icon .bub:nth-of-type(2){width:14px;height:14px;left:16%;bottom:18%}
.price-sticker{position:absolute;right:8px;bottom:8px;z-index:2;background:var(--sun-400);color:var(--ink);font:800 1.0625rem/1 var(--ff-display);padding:9px 12px;border-radius:14px;transform:rotate(-4deg);box-shadow:0 8px 18px rgba(11,42,74,.18);white-space:nowrap}
.price-sticker small{font:600 .75rem var(--ff-body)}
.card:nth-child(even) .price-sticker{transform:rotate(3deg)}
.card h3{font-size:1.0625rem;margin-bottom:4px}
.card .note{font-size:.8125rem;color:var(--muted);margin-bottom:var(--s2)}
.card-cta{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:600;color:var(--blue-700);text-decoration:none;position:relative}
.card-cta svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-spring)}
.card-cta:hover svg{transform:translateX(4px)}
.card-cta .rise{inset:-40px auto 40% 0;width:90px}
.card--wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:var(--s4)}
.card--wide .card-media{width:96px;flex:none;margin:0}
.card--wide .card-body{flex:1}
.card--feature .price-sticker{font-size:1.5rem;padding:12px 16px}
.badge-one{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:.75rem;font-weight:600;color:var(--blue-900);background:var(--blue-50);padding:4px 10px;border-radius:var(--r-pill);margin-bottom:var(--s2)}
@media (min-width:768px){
  .bento{grid-template-columns:repeat(4,1fr);gap:var(--s5)}
  .card{padding:var(--s4)}
  .card--feature{grid-column:span 2;grid-row:span 2}
  .card--feature .card-media{aspect-ratio:4/3.4}
  .card--feature h3{font-size:var(--fs-h3)}
  .card h3{font-size:1.1875rem}
  .card .note{font-size:.875rem}
  .card--wide{grid-column:auto;flex-direction:column;align-items:stretch;gap:0}
  .card--wide .card-media{width:auto;margin:2px 2px var(--s3)}
}
@media (min-width:1200px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .card{grid-column:span 3}
  .card.card--feature{grid-column:span 6;grid-row:span 2}
  .card.card--wide{grid-column:span 3}
}

/* ---------- Big number band ---------- */
.band{position:relative;background:var(--blue-50);text-align:center;padding-block:var(--s7) var(--s7)}
.big-num{display:block;font:800 var(--fs-big)/.95 var(--ff-display);letter-spacing:-.04em;color:var(--blue-600);margin-bottom:var(--s4)}
.big-num .unit{font-size:.42em;letter-spacing:-.01em;color:var(--blue-900);margin-left:.15em}
.big-num [data-count]{display:inline-block;text-align:right}
.band p{font:700 clamp(1.25rem,1rem + 1vw,1.75rem)/1.3 var(--ff-display);color:var(--blue-900);max-width:28em;margin:0 auto var(--s3)}
.band .bub{position:absolute}
.band .b1{width:80px;height:80px;left:6%;top:20%}
.band .b2{width:36px;height:36px;right:10%;top:16%}
.band .b3{width:54px;height:54px;right:18%;bottom:10%}
.band .sticker{position:absolute;left:50%;top:-28px;transform:translateX(-50%) rotate(-3deg);white-space:nowrap}

/* ---------- Steps path ---------- */
.steps-wrap{position:relative}
.steps{display:grid;gap:var(--s6);position:relative;z-index:1;counter-reset:s}
.step{position:relative;padding-left:76px}
.step-num{position:absolute;left:0;top:0;width:60px;height:60px;display:grid;place-items:center;font:800 1.75rem/1 var(--ff-display);color:#fff;background:var(--blue-700);border-radius:var(--blob-c);box-shadow:var(--shadow)}
.step:nth-child(2) .step-num{border-radius:var(--blob-a);background:var(--blue-600)}
.step:nth-child(2) .step-num{color:var(--blue-900);background:var(--aqua-300)}
.step:nth-child(3) .step-num{border-radius:var(--blob-b);background:var(--sun-400);color:var(--ink)}
.step h3{margin-bottom:var(--s2)}
.step p{color:var(--muted);margin:0}
.steps-path{display:none}
.steps-path .dots{fill:none;stroke:var(--blue-600);stroke-width:4;stroke-linecap:round;stroke-dasharray:0 14}
.steps-path .reveal{fill:none;stroke:#fff;stroke-width:16;stroke-dasharray:1;stroke-dashoffset:0}
.js .steps-path .reveal{stroke-dashoffset:1;transition:stroke-dashoffset 1400ms var(--ease-in-out)}
.js .steps-wrap.is-in .steps-path .reveal{stroke-dashoffset:0}
@media (min-width:900px){
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s7)}
  .step{padding:96px 0 0}
  .step-num{width:76px;height:76px;font-size:2.25rem}
  .steps-path{display:block;position:absolute;left:4%;right:4%;top:0;width:92%;height:90px;z-index:0;pointer-events:none}
}
.micro{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.micro li{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--line);padding:10px 16px;border-radius:var(--r-pill);font-size:.9375rem}
.micro svg{width:20px;height:20px;color:var(--blue-600);flex:none}

/* ---------- Scroll wipe (full-bleed) ---------- */
.wipe{position:relative;background:linear-gradient(180deg,#fff 0%,var(--blue-50) 100%)}
.wipe-stage{display:grid;gap:var(--s6);align-items:center;padding-block:var(--s7)}
.wipe-copy .big{font:800 clamp(1.5rem,1.2rem + 1.2vw,2.25rem)/1.1 var(--ff-display);color:var(--blue-900);letter-spacing:-.03em;margin-bottom:var(--s4)}
.wipe-copy p{color:var(--muted)}
.wipe-meter{display:flex;align-items:center;gap:12px;margin-top:var(--s5);font-weight:600;color:var(--blue-900)}
.wipe-meter .bar{flex:1;max-width:260px;height:10px;border-radius:var(--r-pill);background:var(--blue-100);overflow:hidden}
.wipe-meter .fill{display:block;height:100%;background:linear-gradient(90deg,var(--blue-600),var(--aqua-300));transform-origin:left;transform:scaleX(var(--p,0))}
.wipe .ba{max-height:78vh;aspect-ratio:3/4;margin-inline:auto;width:min(100%,calc(78vh * .75));border-radius:var(--r-lg);box-shadow:var(--shadow)}
html:not(.js) .wipe-meter{display:none}
.wipe .stickers{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--s4)}
@media (min-width:1000px){
  .wipe.is-scrolly{height:200vh}
  .wipe.is-scrolly .wipe-sticky{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));display:flex;align-items:center}
  .wipe-stage{grid-template-columns:5fr 7fr;width:100%;padding-block:var(--s5)}
  .wipe .ba{max-height:calc(100vh - var(--header-h) - 64px);width:auto;height:calc(100vh - var(--header-h) - 64px)}
}

/* ---------- Stack gallery ---------- */
.stack-wrap{display:grid;gap:var(--s6);align-items:center}
.stack{position:relative;width:min(100%,420px);margin-inline:auto;aspect-ratio:3/4.35;outline:none}
.stack-card{position:absolute;inset:0;background:#fff;border-radius:var(--r-lg);padding:10px 10px 0;box-shadow:var(--shadow);border:1.5px solid var(--line);display:flex;flex-direction:column;transition:transform 450ms var(--ease-spring),opacity 300ms var(--ease-out);transform-origin:50% 90%}
.stack-card .ba{flex:1;aspect-ratio:auto;border-radius:26px}
.stack-card figcaption{padding:12px 8px 14px;min-height:72px;cursor:grab;touch-action:pan-y}
.stack-card figcaption strong{display:block;font:800 1.0625rem/1.2 var(--ff-display);color:var(--blue-900)}
.stack-card figcaption span{font-size:.875rem;color:var(--muted)}
.stack-card[data-depth="0"]{z-index:4;transform:none}
.stack-card[data-depth="1"]{z-index:3;transform:translate(14px,10px) rotate(4deg) scale(.97)}
.stack-card[data-depth="2"]{z-index:2;transform:translate(-12px,18px) rotate(-5deg) scale(.94)}
.stack-card[data-depth="3"]{z-index:1;transform:translate(6px,24px) rotate(2deg) scale(.91);opacity:.9}
.stack-card:not([data-depth="0"]){pointer-events:none}
.stack-card.is-leaving{transform:translateX(var(--fly,-120%)) rotate(var(--rot,-14deg));opacity:0;z-index:5}
.stack-controls{display:flex;align-items:center;justify-content:center;gap:var(--s4);margin-top:var(--s6)}
.stack-dots{display:flex;gap:8px}
.stack-dots span{width:10px;height:10px;border-radius:50%;background:var(--blue-100);transition:transform var(--dur-base) var(--ease-spring),background-color var(--dur-fast)}
.stack-dots span.on{background:var(--blue-700);transform:scale(1.35)}
.stack-status{font-size:.875rem;color:var(--muted);text-align:center;margin-top:var(--s2)}
html:not(.js) .stack{aspect-ratio:auto;display:grid;gap:var(--s5)}
html:not(.js) .stack-card{position:relative;transform:none!important}
html:not(.js) .stack-controls{display:none}
@media (min-width:1000px){.stack-wrap{grid-template-columns:5fr 7fr}.stack-wrap .stack-side{order:-1}.stack-side .stack-controls{justify-content:flex-start}.stack-side .stack-status{text-align:left}}

/* ---------- Why ---------- */
.why-row{display:grid;gap:var(--s6);align-items:center}
.why-row+.why-row{margin-top:var(--s8)}
.why-photo{position:relative;width:min(100%,480px);margin-inline:auto}
.why-photo .mask{border-radius:var(--blob-b);overflow:hidden;aspect-ratio:1/1;box-shadow:var(--shadow);background:var(--blue-100)}
.why-row--rev .why-photo .mask{border-radius:var(--blob-c)}
.why-photo img{width:100%;height:100%;object-fit:cover}
.why-photo .bub{position:absolute}
.why-photo .b1{width:70px;height:70px;right:-8px;top:4%}
.why-photo .b2{width:30px;height:30px;left:4%;bottom:6%}
.why-photo .b3{width:18px;height:18px;right:20%;bottom:-8px}
.why-photo .sticker{position:absolute;left:-6px;bottom:16%}
.why-text h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);font-weight:800}
.why-text p{color:var(--muted)}
.why-list{display:grid;gap:var(--s4)}
.why-list li{display:flex;gap:var(--s4);align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--s4)}
.why-list .ic{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:var(--blob-a);background:var(--blue-50);color:var(--blue-700)}
.why-list li:nth-child(2) .ic{border-radius:var(--blob-b)}
.why-list li:nth-child(3) .ic{border-radius:var(--blob-c)}
.why-list .ic svg{width:26px;height:26px}
.why-list h3{font-size:1.125rem;margin-bottom:2px}
.why-list p{margin:0;color:var(--muted);font-size:.9375rem}
@media (min-width:900px){
  .why-row{grid-template-columns:1fr 1fr;gap:var(--s9)}
  .why-row--rev .why-photo{order:2}
}

/* ---------- Audience pills ---------- */
.pills{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.pill{display:inline-flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--blue-100);border-radius:var(--r-pill);padding:12px 22px 12px 12px;min-height:56px;transition:transform 300ms var(--ease-spring)}
.pill .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--blue-50);color:var(--blue-700);flex:none}
.pill .ic svg{width:22px;height:22px}
.pill b{font:700 1.0625rem/1.2 var(--ff-display);color:var(--blue-900)}
.pill small{display:block;font-size:.8125rem;color:var(--muted);font-weight:400}
.pill:nth-child(odd){transform:rotate(-1.5deg)}
.pill:nth-child(even){transform:rotate(1.5deg)}
@media (hover:hover) and (pointer:fine){.pill:hover{animation:bounce 600ms var(--ease-spring)}}
@keyframes bounce{0%{transform:translateY(0)}35%{transform:translateY(-8px) rotate(0)}65%{transform:translateY(2px)}100%{transform:translateY(0)}}

/* ---------- Reviews ---------- */
.rev-head .count-wrap{position:relative;display:inline-block}
.rev-head [data-count]{display:inline-block;text-align:right}
.count-wrap .bub{position:absolute;opacity:0;width:14px;height:14px;top:-6px;right:-14px}
.count-wrap .bub+.bub{width:9px;height:9px;top:-18px;right:-2px}
.count-wrap.is-done [data-count]{animation:countbounce 300ms var(--ease-spring)}
.count-wrap.is-done .bub{animation:rise 900ms var(--ease-out) 1 both}
.count-wrap.is-done .bub+.bub{animation-delay:120ms}
@keyframes countbounce{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.reviews{display:grid;gap:var(--s5)}
.review{background:#fff;border-radius:var(--r-md);padding:var(--s5);box-shadow:var(--shadow-sm);border:1.5px solid var(--line);position:relative}
.review:nth-child(1){transform:rotate(-1.5deg)}
.review:nth-child(2){transform:rotate(1deg)}
.review:nth-child(3){transform:rotate(-.8deg)}
.review::before{content:"“";position:absolute;right:18px;top:-6px;font:800 5rem/1 var(--ff-display);color:var(--blue-100)}
.review blockquote{margin:0 0 var(--s4)}
.review figcaption{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.g-badge{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;color:var(--blue-900);background:var(--blue-50);padding:6px 10px;border-radius:var(--r-pill)}
.g-badge svg{width:16px;height:16px}
.widget-slot{margin-top:var(--s6);border:2px dashed var(--blue-100);border-radius:var(--r-md);padding:var(--s5);text-align:center;color:var(--muted);font-size:.9375rem;background:#fff}
@media (min-width:900px){.reviews{grid-template-columns:repeat(3,1fr);gap:var(--s6)}}
.reviews--strip .review{transform:none}

/* ---------- FAQ ---------- */
.faq{max-width:860px;display:grid;gap:var(--s3)}
.faq details{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);transition:border-color var(--dur-fast)}
.faq details[open]{border-color:var(--blue-100);box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:64px;padding:var(--s3) var(--s5);cursor:pointer;font:700 1.0625rem/1.35 var(--ff-display);color:var(--blue-900)}
.faq summary::-webkit-details-marker{display:none}
.pm{flex:none;position:relative;width:36px;height:36px;border-radius:50%;background:var(--blue-50)}
.pm::before,.pm::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;background:var(--blue-700);border-radius:2px;transition:transform var(--dur-base) var(--ease-spring)}
.pm::after{transform:rotate(90deg)}
details[open] .pm::after{transform:rotate(90deg) scaleX(0)}
details[open] .pm::before{transform:rotate(180deg)}
.faq .answer{padding:0 var(--s5) var(--s4);color:var(--muted)}
.faq .answer p{margin:0}

/* ---------- Closing CTA ---------- */
.cta-block{position:relative;isolation:isolate;overflow:hidden;color:#fff;padding:var(--s8) var(--s5);border-radius:48px 120px 56px 140px / 64px 48px 120px 72px;background:linear-gradient(118deg,var(--blue-700) 0%,var(--blue-700) 38%,var(--blue-600) 72%,var(--aqua-300) 115%);box-shadow:var(--shadow);text-align:center}
.cta-block h2{color:#fff;font-size:clamp(2rem,1.4rem + 2.8vw,4rem);line-height:1.05;margin-bottom:var(--s3)}
.cta-block p{font-size:1.125rem;font-weight:600;margin-bottom:var(--s6)}
.cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s3)}
.cta-block .stream{position:absolute;inset:0;z-index:-1;pointer-events:none}
.cta-block .stream .bub{position:absolute;bottom:-40px;opacity:0;animation:stream 6s linear infinite}
@keyframes stream{0%{opacity:0;transform:translateY(0)}12%{opacity:.9}100%{opacity:0;transform:translateY(-520px)}}
.cta-block .scribble-svg{color:var(--sun-400)}
@media (min-width:768px){.cta-block{padding:var(--s9) var(--s8)}}

/* ---------- Footer ---------- */
.site-footer{background:var(--blue-50);color:var(--blue-900);padding:var(--s7) 0 calc(var(--s6) + env(safe-area-inset-bottom));margin-top:0}
.footer-wave{margin-top:var(--section)}
.footer-grid{display:grid;gap:var(--s6)}
.site-footer h3{font-size:1rem;margin-bottom:var(--s3)}
.site-footer p,.site-footer li{font-size:.9375rem;color:var(--muted)}
.site-footer a{color:var(--blue-700);display:inline-flex;align-items:center;min-height:44px}
.footer-logo img{height:40px;width:auto}
.footer-bottom{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--blue-100);font-size:.875rem;color:var(--muted)}
@media (min-width:768px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}

/* ---------- Sticky mobile bar ---------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -8px 30px rgba(11,42,74,.12);transform:translateY(110%);transition:transform 220ms var(--ease-spring);visibility:hidden}
.mbar.is-visible{transform:none;visibility:visible}
.mbar .btn{padding-inline:10px;gap:6px;font-size:.875rem;min-height:52px;white-space:normal;text-align:center;line-height:1.15}
.mbar .btn svg{width:18px;height:18px}
.mbar .num{white-space:nowrap}
.mbar .rise{inset:-50px 20% 50% 20%}
.mbar .rise .bub{animation-iteration-count:1;animation-play-state:paused}
.mbar.is-visible .rise .bub{animation-play-state:running}
.mbar .rise .bub:nth-child(n+3){display:none}
body.has-mbar{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:640px){.mbar{display:none}body.has-mbar{padding-bottom:0}}

/* ---------- Pop easter-egg sticker ---------- */
.pop-note{position:absolute;z-index:6;left:var(--gutter);bottom:20px;max-width:300px;display:flex;align-items:flex-start;gap:10px;background:var(--sun-400);color:var(--ink);padding:12px 12px 12px 16px;border-radius:18px;box-shadow:0 12px 28px rgba(11,42,74,.18);font-weight:600;font-size:.9375rem;transform:rotate(-2deg);animation:noteIn 400ms var(--ease-spring) both}
.pop-note button{flex:none;width:44px;height:44px;margin:-6px -6px -6px 0;border:0;border-radius:50%;background:rgba(255,255,255,.55);cursor:pointer;display:grid;place-items:center}
.pop-note svg{width:18px;height:18px}
@keyframes noteIn{from{opacity:0;transform:translateY(16px) rotate(-6deg) scale(.9)}to{opacity:1;transform:rotate(-2deg)}}

/* ---------- Scroll reveal ---------- */
.js [data-reveal]{opacity:0;transform:translateY(24px) scale(.98);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);transition-delay:calc(var(--i,0) * 70ms)}
.js [data-reveal].is-in{opacity:1;transform:none}
.js .card[data-reveal].is-in{transition:transform 220ms var(--ease-spring),opacity var(--dur-slow) var(--ease-out)}
.js .review[data-reveal].is-in:nth-child(1){transform:rotate(-1.5deg)}
.js .review[data-reveal].is-in:nth-child(2){transform:rotate(1deg)}
.js .review[data-reveal].is-in:nth-child(3){transform:rotate(-.8deg)}
.js .reviews--strip .review[data-reveal].is-in{transform:none}
.js .pill[data-reveal].is-in:nth-child(odd){transform:rotate(-1.5deg)}
.js .pill[data-reveal].is-in:nth-child(even){transform:rotate(1.5deg)}

/* =====================================================================
   PRICING PAGE
   ===================================================================== */
.page-hero{position:relative;overflow:hidden;isolation:isolate;padding:var(--s7) 0 var(--s8)}
.page-hero .hero-mesh{opacity:.8}
.page-hero h1{font-size:clamp(2.5rem,1.8rem + 3.2vw,4.75rem);line-height:1.05;letter-spacing:-.035em}
.page-hero p{font-size:1.125rem;color:var(--muted);max-width:34em}
.breadcrumb{font-size:.875rem;color:var(--muted);margin-bottom:var(--s4)}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
.page-hero .sticker{margin-top:var(--s2)}

.info-card{position:relative;overflow:hidden;background:var(--blue-50);border-radius:var(--r-lg) 120px var(--r-lg) var(--r-lg);padding:var(--s6) var(--s5);border:1.5px solid var(--blue-100)}
.info-card::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:var(--blob-a);background:var(--blue-100);z-index:0}
.info-card>*{position:relative;z-index:1}
.info-card h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.info-card h2 svg{width:32px;height:32px;color:var(--sun-400);flex:none}
.info-card dl{display:grid;gap:var(--s3);margin:0}
.info-card dl>div{background:#fff;border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.info-card dt{font-size:.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--blue-700);margin-bottom:4px}
.info-card dd{margin:0;font-weight:600;color:var(--blue-900)}
@media (min-width:640px){.info-card dl{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.info-card{padding:var(--s7)}.info-card dl{grid-template-columns:repeat(4,1fr)}}

.price-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6);align-items:start}
@media (min-width:1000px){.price-layout{grid-template-columns:minmax(0,1fr) 360px;gap:var(--s7)}}

/* Tabs with sliding pill */
.tabs{position:sticky;top:var(--header-h);z-index:20;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:10px 0;margin-bottom:var(--s5)}
.tabs::-webkit-scrollbar{display:none}
.tabs-inner{position:relative;display:flex;gap:6px;padding:6px;background:var(--blue-50);border-radius:var(--r-pill)}
.tab-ind{position:absolute;left:0;top:6px;bottom:6px;width:100px;border-radius:var(--r-pill);background:var(--blue-700);box-shadow:var(--shadow);transform-origin:left center;transition:transform var(--dur-base) var(--ease-out);pointer-events:none}
html:not(.js) .tab-ind{display:none}
.tab{position:relative;z-index:1;flex:none;min-height:48px;padding:0 20px;border:0;border-radius:var(--r-pill);background:transparent;font-weight:600;color:var(--blue-900);cursor:pointer;white-space:nowrap;transition:color var(--dur-base)}
.tab[aria-selected="true"]{color:#fff}
html:not(.js) .tab[aria-selected="true"]{background:var(--blue-700)}
.tab-panel>h2{font-size:1.5rem}
.js .tab-panel[hidden]{display:none}

.items{display:grid;gap:var(--s3)}
.item{position:relative;display:grid;grid-template-columns:56px 1fr;gap:var(--s3) var(--s4);background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--s4);transition:border-color var(--dur-fast)}
.item.is-selected{border-color:var(--blue-600);box-shadow:0 0 0 1px var(--blue-600),var(--shadow)}
.item-icon{width:56px;height:56px;display:grid;place-items:center;background:var(--blue-50);border-radius:var(--blob-c);color:var(--blue-700)}
.item-icon svg{width:36px;height:36px}
.item-icon svg{stroke-dasharray:100;stroke-dashoffset:0}
.js .item-icon svg{stroke-dashoffset:100;transition:stroke-dashoffset 800ms var(--ease-out)}
.js .item.is-in .item-icon svg{stroke-dashoffset:0}
.item h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:1.25rem;margin-bottom:4px}
.item p{font-size:.875rem;color:var(--muted);margin:0 0 4px}
.item .one-price{color:var(--blue-900);font-weight:600}
.badge-sun{display:inline-block;background:var(--sun-400);color:var(--ink);font:700 .75rem/1 var(--ff-body);padding:6px 10px;border-radius:8px;transform:rotate(-4deg);letter-spacing:.02em}
.item-side{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.item-price{font:800 1.75rem/1 var(--ff-display);color:var(--blue-900);letter-spacing:-.02em}
.item-price small{font:600 .875rem var(--ff-body);color:var(--muted)}
.item-book{display:inline-flex;align-items:center;min-height:48px;font-weight:600;font-size:.9375rem;color:var(--blue-700)}
@media (min-width:640px){
  .item{grid-template-columns:64px 1fr auto;align-items:center}
  .item-icon{width:64px;height:64px}
  .item-side{grid-column:auto;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
}

/* Stepper */
.stepper{display:inline-flex;align-items:center;gap:4px;background:var(--blue-50);border-radius:var(--r-pill);padding:4px}
.stepper button{width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--blue-700);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm)}
.stepper button[data-step="1"]{background:var(--blue-700);color:#fff}
.stepper button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.stepper button svg{width:18px;height:18px}
.stepper button.is-spring{animation:spring 320ms var(--ease-spring)}
@keyframes spring{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.stepper output,.stepper input{min-width:3ch;text-align:center;font:700 1.0625rem var(--ff-body);font-variant-numeric:tabular-nums;color:var(--blue-900)}
.stepper input{width:4.5ch;border:0;background:transparent;padding:0;-moz-appearance:textfield;min-height:44px}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper .unit{font-size:.875rem;color:var(--muted);margin-right:4px}

/* Summary panel / drawer */
.summary{position:sticky;top:calc(var(--header-h) + 16px);background:#fff;border:1.5px solid var(--blue-100);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:var(--s5);overflow:hidden;isolation:isolate}
.summary::before{content:"";position:absolute;right:-50px;top:-50px;width:150px;height:150px;border-radius:var(--blob-b);background:var(--blue-50);z-index:-1}
.summary-head{display:flex;align-items:center;gap:var(--s3)}
.totals{flex:1;min-width:0}
.summary .label{display:block;font-size:.8125rem;font-weight:600;color:var(--muted)}
.summary-total{position:relative;display:inline-block;font:800 clamp(1.75rem,1.5rem + 1vw,2.25rem)/1.1 var(--ff-display);color:var(--blue-900);letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform-origin:left center}
.summary-total.is-pulse{animation:countbounce 300ms var(--ease-out)}
.summary-total .bub{position:absolute;right:-22px;top:-4px;width:16px;height:16px;opacity:0}
.summary-total.is-pulse .bub{animation:pop-ring 400ms var(--ease-out)}
@keyframes pop-ring{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.8)}}
.summary-quick,.summary-toggle{display:none}
.summary-list{display:grid;gap:8px;margin:var(--s4) 0}
.summary-list li{display:flex;justify-content:space-between;gap:var(--s3);font-size:.9375rem;padding:10px 12px;background:var(--blue-50);border-radius:12px;animation:dropin 350ms var(--ease-spring)}
.summary-list li span:last-child{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.summary-list li.is-out{animation:shrink 200ms var(--ease-out) forwards}
@keyframes dropin{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
@keyframes shrink{to{opacity:0;transform:scale(.85)}}
.summary-empty{color:var(--muted);font-size:.9375rem;margin:var(--s4) 0}
.summary-min{font-size:.875rem;background:var(--blue-50);padding:10px 12px;border-radius:12px;color:var(--blue-900)}
.summary-actions{display:grid;gap:var(--s2);margin-top:var(--s4)}
.summary-note{font-size:.8125rem;color:var(--muted);margin:var(--s3) 0 0}
.fly-bub{position:fixed;z-index:95;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px}
@media (max-width:999px){
  .summary{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:55;border-radius:28px 28px 0 0;border-width:1.5px 0 0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);visibility:hidden;transition:transform 220ms var(--ease-spring),visibility 0s linear 220ms}
  .summary.is-visible{transform:none;visibility:visible;transition:transform 220ms var(--ease-spring),visibility 0s}
  .summary::before{display:none}
  .summary-quick{display:inline-flex}
  .summary-toggle{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--blue-50);color:var(--blue-700);cursor:pointer;flex:none}
  .summary-toggle svg{width:22px;height:22px;transition:transform var(--dur-base) var(--ease-spring)}
  .summary.is-open .summary-toggle svg{transform:rotate(180deg)}
  .summary-body{display:none;max-height:55vh;overflow:auto}
  .summary.is-open .summary-body{display:block}
  .summary-total{font-size:1.3125rem;white-space:nowrap}
  body.has-drawer{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* On request */
.on-request{display:grid;gap:var(--s4)}
.on-request li{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:var(--r-md);padding:var(--s5)}
.on-request .ic{position:relative;width:60px;height:60px;display:grid;place-items:center;border-radius:var(--blob-a);background:var(--blue-50);color:var(--blue-700);margin-bottom:var(--s4)}
.on-request .ic svg{width:30px;height:30px}
.on-request .ic .spk{position:absolute;right:-6px;top:-6px;width:20px;height:20px;color:var(--sun-400)}
.on-request h3{font-size:1.25rem;margin-bottom:6px}
.on-request p{color:var(--muted);font-size:.9375rem;margin-bottom:var(--s2)}
.price-chip{display:inline-flex;align-items:baseline;gap:4px;background:var(--blue-50);color:var(--blue-900);font:800 1.125rem/1 var(--ff-display);padding:10px 14px;border-radius:var(--r-pill)}
@media (min-width:768px){.on-request{grid-template-columns:repeat(3,1fr)}}

/* =====================================================================
   REDUCED MOTION — every animation has a defined static state
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
  .hero-mesh{animation:none}
  .css-bubbles .bub{animation:none;bottom:auto}
  .css-bubbles .bub:nth-child(n+6){display:none}
  .css-bubbles .bub:nth-child(1){top:68%}
  .css-bubbles .bub:nth-child(2){top:22%}
  .css-bubbles .bub:nth-child(3){top:80%}
  .css-bubbles .bub:nth-child(4){top:12%}
  .css-bubbles .bub:nth-child(5){top:58%}
  .rise,.stream,.wave-wrap .bub,.count-wrap .bub,.summary-total .bub{display:none}
  .marquee{flex-wrap:wrap;justify-content:center}
  .marquee-track{animation:none;flex-wrap:wrap;justify-content:center}
  .marquee ul[aria-hidden="true"]{display:none}
  .marquee ul{flex-wrap:wrap;justify-content:center}
  .trust{transform:none;margin-inline:0}
  .js [data-reveal]{transform:none}
  .js [data-reveal].is-in{transform:none}
  .sparkle,.ba-done{display:none}
  .card:hover,.pill:hover,.btn:hover,.btn:active{transform:none;animation:none}
  .card-media,.card:nth-child(even) .card-media{transform:none}
  .pop-note{animation:none}
}