/* ═══════════════════════════════════════════════════════════
   ONOSONIC — The Smile Ritual
   Theme: porcelain white / blues / grey · calm premium
   ═══════════════════════════════════════════════════════════ */

:root{
  --white:#ffffff;
  --mist:#f2f8fb;
  --cloud:#e6f1f7;
  --ink:#0b1e2b;
  --slate:#51677a;
  --grey:#8ba2b2;
  --blue:#0aa2e0;
  --blue-deep:#0673b8;
  --blue-ice:#7fd4ff;
  --grad:linear-gradient(120deg,#0673b8,#0aa2e0 55%,#7fd4ff);
  --shadow-soft:0 18px 60px rgba(11,30,43,.10);
  --shadow-card:0 10px 34px rgba(6,115,184,.10);
  --r-lg:28px;
  --r-md:18px;
  --ease:cubic-bezier(.22,.9,.24,1);
  --font-d:'Sora',sans-serif;
  --font-b:'Manrope',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);
  background:var(--white);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
::selection{background:var(--blue);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--mist)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--blue),var(--blue-deep));border-radius:99px}

/* ═══════════ TYPO ═══════════ */
.eyebrow{
  font-family:var(--font-d);font-size:.72rem;font-weight:700;letter-spacing:.32em;
  color:var(--blue-deep);text-transform:uppercase;margin-bottom:1.1rem;
}
.eyebrow--center{text-align:center}
.eyebrow--light{color:var(--blue-ice)}
.h2{
  font-family:var(--font-d);font-weight:800;line-height:1.06;
  font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.02em;margin-bottom:1.4rem;
}
.h2 em{
  font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.h2--center{text-align:center}
.h2--light{color:#fff}
.h2--light em{background:linear-gradient(120deg,#bfeaff,#fff);-webkit-background-clip:text;background-clip:text}
.lead{font-size:1.06rem;line-height:1.75;color:var(--slate);max-width:34rem}
.lead--light{color:rgba(255,255,255,.85)}
.lead--center{margin:0 auto;text-align:center;max-width:40rem}

[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ═══════════ PRELOADER ═══════════ */
.preloader{
  position:fixed;inset:0;z-index:1000;background:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .7s ease,visibility .7s;
}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center}
.preloader__logo{font-family:var(--font-d);font-weight:800;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.14em;color:var(--ink)}
.preloader__logo span{display:inline-block;opacity:0;transform:translateY(24px);animation:plUp .6s var(--ease) forwards}
.preloader__logo span:nth-child(1){animation-delay:.05s}.preloader__logo span:nth-child(2){animation-delay:.1s}
.preloader__logo span:nth-child(3){animation-delay:.15s}.preloader__logo span:nth-child(4){animation-delay:.2s}
.preloader__logo span:nth-child(5){animation-delay:.25s}.preloader__logo span:nth-child(6){animation-delay:.3s}
.preloader__logo span:nth-child(7){animation-delay:.35s}.preloader__logo span:nth-child(8){animation-delay:.4s}
@keyframes plUp{to{opacity:1;transform:none}}
.preloader__tag{margin-top:.5rem;font-size:.68rem;letter-spacing:.42em;color:var(--grey)}
.preloader__bar{width:220px;height:2px;background:var(--cloud);margin:1.6rem auto 0;border-radius:99px;overflow:hidden}
.preloader__bar i{display:block;height:100%;width:0;background:var(--grad);transition:width .3s ease}

/* ═══════════ CURSOR / PROGRESS ═══════════ */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:999;border-radius:50%}
.cursor-dot{width:7px;height:7px;background:var(--blue);transform:translate(-50%,-50%)}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid rgba(10,162,224,.55);
  transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s,background .25s;
}
.cursor-ring.is-hover{width:64px;height:64px;background:rgba(10,162,224,.08);border-color:rgba(10,162,224,.9)}
@media (hover:none),(max-width:900px){.cursor-dot,.cursor-ring{display:none}}
.scroll-progress{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;height:3px;z-index:120}
.scroll-progress i{display:block;height:100%;width:0;background:var(--grad)}

/* ═══════════ NAV ═══════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.2rem,4vw,3rem);
  padding-top:calc(1.1rem + env(safe-area-inset-top,0px));
  transition:background .4s,box-shadow .4s,padding .4s;
}
.nav.is-scrolled{
  background:rgba(255,255,255,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 rgba(11,30,43,.06),0 10px 30px rgba(11,30,43,.05);
  padding:.7rem clamp(1.2rem,4vw,3rem);
  padding-top:calc(.7rem + env(safe-area-inset-top,0px));
}
.nav__logo{display:flex;flex-direction:column;line-height:1}
.nav__logo-badge{
  font-family:var(--font-d);font-weight:800;letter-spacing:.12em;font-size:1.15rem;
  color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:.28em .7em;
}
.nav__logo-sub{font-size:.52rem;letter-spacing:.34em;color:var(--grey);margin-top:.35rem;text-align:center}
.nav__links{display:flex;gap:1.8rem}
.nav__links a{font-weight:600;font-size:.9rem;color:var(--slate);position:relative;transition:color .25s}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--grad);
  border-radius:99px;transition:width .3s var(--ease);
}
.nav__links a:hover{color:var(--ink)}
.nav__links a:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:1.1rem}
.nav__aed{font-size:.8rem;font-weight:700;color:var(--slate)}
.nav__cart{position:relative;width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;transition:background .3s,transform .3s}
.nav__cart:hover{background:var(--cloud);transform:scale(1.06)}
.nav__cart svg{color:var(--ink)}
.nav__cart-count{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;border-radius:99px;
  background:var(--grad);color:#fff;font-size:.66rem;font-weight:800;
  display:grid;place-items:center;padding:0 4px;transition:transform .3s var(--ease);
}
.nav__cart-count.is-pop{transform:scale(1.45)}
.nav__burger{
  display:none;width:44px;height:44px;border-radius:50%;background:var(--mist);
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .3s;
}
.nav__burger span{width:18px;height:2px;background:var(--ink);border-radius:99px;transition:transform .35s var(--ease),opacity .25s}
.nav__burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){
  .nav__links{display:none}
  .nav__aed{display:none}
  .nav__burger{display:flex}
}

/* ═══════════ MOBILE MENU ═══════════ */
.mmenu{
  position:fixed;inset:0;z-index:100;
  background:rgba(255,255,255,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(5rem + env(safe-area-inset-top,0px)) clamp(1.6rem,8vw,3rem) 3rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.mmenu.is-open{opacity:1;visibility:visible}
.mmenu__links{display:flex;flex-direction:column;gap:.4rem}
.mmenu__links a{
  display:flex;align-items:baseline;gap:1rem;
  font-family:var(--font-d);font-weight:800;font-size:clamp(1.7rem,7.5vw,2.4rem);
  color:var(--ink);padding:.45em 0;border-bottom:1px solid var(--cloud);
  opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.mmenu.is-open .mmenu__links a{opacity:1;transform:none}
.mmenu.is-open .mmenu__links a:nth-child(1){transition-delay:.05s}
.mmenu.is-open .mmenu__links a:nth-child(2){transition-delay:.1s}
.mmenu.is-open .mmenu__links a:nth-child(3){transition-delay:.15s}
.mmenu.is-open .mmenu__links a:nth-child(4){transition-delay:.2s}
.mmenu.is-open .mmenu__links a:nth-child(5){transition-delay:.25s}
.mmenu__links em{font-style:normal;font-size:.8rem;font-weight:700;color:var(--blue-deep);letter-spacing:.1em}
.mmenu__foot{margin-top:2.4rem;display:flex;flex-direction:column;gap:.7rem}
.mmenu__foot span{display:inline-flex;align-items:center;gap:.6em;font-size:.8rem;font-weight:700;color:var(--slate)}
.mmenu__foot svg{color:var(--blue-deep)}

/* ═══════════ CART ═══════════ */
.cart-overlay{
  position:fixed;inset:0;z-index:150;background:rgba(11,30,43,.35);backdrop-filter:blur(4px);
  opacity:0;visibility:hidden;transition:.4s;
}
.cart-overlay.is-open{opacity:1;visibility:visible}
.cart{
  position:fixed;top:0;right:0;bottom:0;z-index:160;width:min(440px,94vw);
  background:var(--white);box-shadow:-30px 0 80px rgba(11,30,43,.18);
  transform:translateX(105%);transition:transform .55s var(--ease);
  display:flex;flex-direction:column;visibility:hidden;
}
.cart.is-open{transform:none;visibility:visible}
.cart__head{display:flex;align-items:center;justify-content:space-between;padding:calc(1.4rem + env(safe-area-inset-top,0px)) 1.6rem 1.4rem;border-bottom:1px solid var(--cloud)}
.cart__head h3{font-family:var(--font-d);font-size:1.15rem}
.cart__head span{color:var(--grey);font-weight:600;font-size:.9rem}
.cart__close{width:38px;height:38px;border-radius:50%;background:var(--mist);display:grid;place-items:center;transition:.3s}
.cart__close:hover{background:var(--cloud);transform:rotate(90deg)}
.cart__free{padding:.8rem 1.6rem;font-size:.8rem;font-weight:700;color:var(--blue-deep);background:var(--mist)}
.cart__items{flex:1;overflow-y:auto;padding:1rem 1.6rem}
.cart__empty{color:var(--grey);text-align:center;margin-top:3rem;font-size:.95rem;line-height:1.7}
.cart-item{display:grid;grid-template-columns:74px 1fr auto;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--mist)}
.cart-item img{width:74px;height:74px;object-fit:cover;border-radius:14px}
.cart-item h4{font-size:.88rem;font-weight:700;margin-bottom:.25rem}
.cart-item .ci-price{font-size:.82rem;color:var(--blue-deep);font-weight:800}
.ci-qty{display:flex;align-items:center;gap:.5rem;margin-top:.4rem}
.ci-qty button{width:24px;height:24px;border-radius:8px;background:var(--mist);font-weight:800;font-size:.8rem;transition:.2s}
.ci-qty button:hover{background:var(--cloud)}
.ci-qty span{font-size:.85rem;font-weight:700;min-width:1.2em;text-align:center}
.ci-remove{color:var(--grey);font-size:1rem;transition:.2s}
.ci-remove:hover{color:#e0554d;transform:scale(1.15)}
.cart__upsell{padding:0 1.6rem}
.upsell{
  display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center;
  background:var(--mist);border-radius:16px;padding:.8rem .9rem;margin-bottom:1rem;
}
.upsell img{width:56px;height:56px;object-fit:cover;border-radius:12px}
.upsell h5{font-size:.8rem;font-weight:800;margin-bottom:.15rem}
.upsell p{font-size:.72rem;color:var(--slate)}
.upsell button{
  font-family:var(--font-d);font-weight:700;font-size:.74rem;color:#fff;
  background:var(--ink);padding:.6em 1.1em;border-radius:99px;transition:.3s;white-space:nowrap;
}
.upsell button:hover{background:var(--blue-deep)}
.cart__foot{padding:1.3rem 1.6rem;border-top:1px solid var(--cloud)}
.cart__row{display:flex;justify-content:space-between;font-size:1rem;margin-bottom:.4rem}
.cart__row strong{font-family:var(--font-d)}
.cart__row--muted{color:var(--blue-deep);font-size:.85rem;font-weight:700;margin-bottom:1rem}
.cart__reassure{display:flex;justify-content:space-between;gap:.5rem;margin-top:.9rem;flex-wrap:wrap}
.cart__reassure span{display:inline-flex;align-items:center;gap:.35em;font-size:.66rem;font-weight:700;color:var(--grey)}
.cart__reassure svg{color:var(--blue-deep);flex:none}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-d);font-weight:700;font-size:.95rem;
  padding:1em 2.1em;border-radius:99px;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s,background .35s;
  will-change:transform;
}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 10px 28px rgba(10,162,224,.35)}
.btn--primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 40px rgba(10,162,224,.45)}
.btn--ghost{background:rgba(255,255,255,.7);color:var(--ink);border:1.5px solid rgba(11,30,43,.14);backdrop-filter:blur(8px)}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue-deep);transform:translateY(-3px)}
.btn--white{background:#fff;color:var(--blue-deep);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.btn--white:hover{transform:translateY(-3px) scale(1.02)}
.btn--block{width:100%}

/* ═══════════ HERO ═══════════ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__video{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 30%,rgba(255,255,255,.55) 78%,var(--white) 100%),
    linear-gradient(100deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.5) 38%,rgba(255,255,255,0) 68%);
}
.hero__content{
  padding:clamp(6.5rem,13vh,9rem) clamp(1.4rem,6vw,5rem) 1rem;
  padding-top:calc(clamp(6.5rem,13vh,9rem) + env(safe-area-inset-top,0px));
  max-width:860px;
}
.hero__eyebrow{
  font-family:var(--font-d);font-size:.74rem;font-weight:700;letter-spacing:.34em;color:var(--blue-deep);
  margin-bottom:1.4rem;
}
.hero__title{
  font-family:var(--font-d);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(2.7rem,6.6vw,5.2rem);line-height:1.04;margin-bottom:1.4rem;
}
.hero__title .line{display:block;overflow:hidden}
.hero__title .word{display:inline-block;white-space:nowrap}
.hero__title .char{display:inline-block;transform:translateY(110%);animation:charUp .9s var(--ease) forwards}
@keyframes charUp{to{transform:none}}
.hero__title .line--accent .char{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{font-size:clamp(1rem,1.4vw,1.13rem);line-height:1.75;color:var(--slate);margin-bottom:2rem;max-width:33rem}
.hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.hero__ritual{display:flex;gap:.9rem;flex-wrap:wrap}
.ritual-chip{
  display:flex;align-items:center;gap:.8rem;
  background:rgba(255,255,255,.8);border:1px solid rgba(11,30,43,.08);
  border-radius:99px;padding:.45rem 1.25rem .45rem .45rem;
  backdrop-filter:blur(10px);box-shadow:0 6px 20px rgba(11,30,43,.06);
  transition:transform .35s var(--ease),box-shadow .35s;
}
.ritual-chip:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(6,115,184,.16)}
.ritual-chip img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.ritual-chip span{font-family:var(--font-d);font-weight:700;font-size:.88rem;display:flex;align-items:baseline;gap:.5em}
.ritual-chip em{font-style:normal;font-size:.66rem;color:var(--blue-deep);letter-spacing:.08em}
.hero__trust{
  display:flex;gap:clamp(1rem,3vw,2.6rem);flex-wrap:wrap;
  padding:1.6rem clamp(1.4rem,6vw,5rem) 2rem;
}
.hero__trust span{display:inline-flex;align-items:center;gap:.55em;font-size:.8rem;font-weight:700;color:var(--slate)}
.hero__trust svg{color:var(--blue-deep);flex:none}

/* ═══════════ WHITENING LOOP ═══════════ */
.wl{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.6rem,7vw,6.5rem) 0 clamp(3.6rem,7vw,6rem);
  background:linear-gradient(180deg,#fff 0%,#f6fbfe 42%,var(--mist) 100%);
}
.wl::before,.wl::after{
  content:'';position:absolute;z-index:-1;border-radius:50%;pointer-events:none;
  filter:blur(70px);opacity:.55;
}
.wl::before{
  width:60vw;height:60vw;max-width:820px;max-height:820px;top:-32%;left:-10%;
  background:radial-gradient(circle,rgba(10,162,224,.30),transparent 68%);
  animation:wDriftA 22s ease-in-out infinite alternate;
}
.wl::after{
  width:52vw;height:52vw;max-width:720px;max-height:720px;bottom:-30%;right:-8%;
  background:radial-gradient(circle,rgba(127,212,255,.34),transparent 68%);
  animation:wDriftB 26s ease-in-out infinite alternate;
}
@keyframes wDriftA{to{transform:translate3d(9vw,5vh,0) scale(1.14)}}
@keyframes wDriftB{to{transform:translate3d(-8vw,-5vh,0) scale(1.1)}}

.wl__head{max-width:1240px;margin:0 auto clamp(2rem,4vw,3rem);padding:0 clamp(1.4rem,5vw,5rem)}
/* the poster holds still — one at a time, changing every 2.5s */
.wl__frame{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem)}
.wl__stage{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:26px;background:#eef6fb;border:1px solid rgba(255,255,255,.85);
  box-shadow:0 2px 6px rgba(11,30,43,.05),0 22px 50px rgba(11,30,43,.12),0 52px 110px rgba(6,115,184,.14);
}
/* light sweeps across the glass on every change */
.wl__stage::after{
  content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.40) 50%,transparent 62%);
  transform:translateX(-120%);animation:wSheen 2.5s ease-in-out infinite;
}
@keyframes wSheen{0%,64%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

.wslide{
  position:absolute;inset:0;z-index:0;opacity:0;overflow:hidden;margin:0;
  transform:scale(1.035);
  transition:opacity .6s var(--ease),transform .9s var(--ease);
}
.wslide.is-on{opacity:1;z-index:1;transform:scale(1)}
.wslide__img{display:block;width:100%;height:100%;object-fit:cover}
/* a breath of movement so a still frame never feels frozen */
.wslide.is-on .wslide__img{animation:wKen 3.4s linear forwards}
@keyframes wKen{from{transform:scale(1)}to{transform:scale(1.045)}}

.wl__controls{
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;
  margin-top:clamp(1.1rem,2.4vw,1.6rem);
}
.wl__dots{display:flex;gap:.55rem;align-items:center}
.wl__dot{
  position:relative;width:46px;height:6px;padding:0;border:0;border-radius:99px;
  background:rgba(11,30,43,.14);cursor:pointer;overflow:hidden;
  transition:background .4s,width .5s var(--ease);
}
.wl__dot:hover{background:rgba(11,30,43,.26)}
.wl__dot.is-on{width:74px;background:rgba(6,115,184,.20)}
/* the fill drains across 2.5s — you can see the next one coming */
.wl__dot span{
  position:absolute;inset:0;border-radius:99px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--blue-deep),var(--blue-ice));
}
.wl__dot.is-on span{animation:wTick 2.5s linear forwards}
.wl__frame.is-held .wl__dot.is-on span{animation-play-state:paused}
@keyframes wTick{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.wl__buy{display:flex;align-items:center;gap:1rem;margin-left:auto}
.wl__name{font-weight:600;font-size:.95rem;color:var(--ink);white-space:nowrap}
.wl__add{padding:.92em 1.5em}

@media(max-width:760px){
  .wl__stage{border-radius:18px}
  .wl__controls{justify-content:center;gap:1rem}
  .wl__buy{margin-left:0;width:100%;flex-direction:column;align-items:stretch;text-align:center}
  .wl__add{width:100%;justify-content:center}
  .wl__dot{width:34px}
  .wl__dot.is-on{width:56px}
}
@media (prefers-reduced-motion:reduce){
  .wslide{transition:opacity .4s;transform:none}
  .wslide.is-on{transform:none}
  .wslide.is-on .wslide__img{animation:none}
  .wl::before,.wl::after{animation:none}
  .wl__stage::after{display:none}
}

/* ═══════════ FLOSSING FILM ═══════════ */
.fl{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(3.8rem,7vw,6.5rem) 0 clamp(4rem,8vw,7rem);
  background:linear-gradient(180deg,#fff 0%,#fbfdff 44%,#f6fbfe 100%);
}
/* barely-there cool light, so the dark film frames carry the contrast */
.fl::before{
  content:'';position:absolute;z-index:-1;inset:auto 50% auto 50%;
  width:min(1200px,120vw);height:min(1200px,120vw);transform:translate(-50%,-30%);
  border-radius:50%;filter:blur(90px);opacity:.34;
  background:radial-gradient(circle,rgba(127,212,255,.22),transparent 68%);
}
.fl__head{max-width:1240px;margin:0 auto clamp(2rem,4vw,3rem);padding:0 clamp(1.4rem,5vw,5rem)}
.fl__frame{max-width:1120px;margin:0 auto;padding:0 clamp(1.2rem,5vw,2rem)}

.fl__stage{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:26px;background:#0b1e2b;
  box-shadow:0 2px 6px rgba(11,30,43,.06),0 26px 60px rgba(11,30,43,.16),0 60px 120px rgba(6,115,184,.18);
}
.fl__video{width:100%;height:100%;object-fit:cover;display:block}
/* keeps captions legible — lifts away for the clean brand end card */
.fl__scrim{
  position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,20,31,.62));
  opacity:0;transition:opacity .55s var(--ease);
}
.fl__stage.has-cap .fl__scrim{opacity:1}
.fl__cap{
  position:absolute;left:clamp(1.2rem,3.4vw,2.6rem);right:clamp(1.2rem,3.4vw,2.6rem);
  bottom:clamp(1.1rem,3vw,2.2rem);margin:0;
  font-family:var(--font-d);font-weight:800;color:#fff;
  font-size:clamp(1.05rem,2.7vw,2.05rem);line-height:1.16;letter-spacing:-.02em;
  text-shadow:0 2px 24px rgba(4,20,31,.55);
  opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .6s var(--ease);
}
.fl__cap.is-on{opacity:1;transform:none}

.fl__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap;
  margin-top:clamp(1.2rem,2.6vw,1.8rem);
}
.fl__specs{display:flex;gap:.6rem;flex-wrap:wrap;list-style:none}
.fl__specs li{
  display:flex;align-items:baseline;gap:.45em;
  background:rgba(255,255,255,.78);border:1px solid rgba(11,30,43,.07);
  border-radius:99px;padding:.55em 1.1em;
  font-size:.82rem;font-weight:600;color:var(--slate);
  box-shadow:0 6px 18px rgba(11,30,43,.05);
}
.fl__specs span{font-family:var(--font-d);font-weight:800;font-size:.98rem;color:var(--blue-deep)}
/* warranty reads as reassurance, not another spec — brand blue, shield, first in line */
.warranty{
  background:rgba(10,162,224,.10)!important;
  border-color:rgba(10,162,224,.26)!important;
  color:var(--blue-deep)!important;
}
.warranty svg{color:var(--blue-deep);flex:none}
.warranty--dark{
  display:inline-flex;align-items:center;gap:.45em;
  background:rgba(255,255,255,.12)!important;border:1px solid rgba(191,234,255,.32)!important;
  border-radius:99px;padding:.5em 1.05em;margin-top:.9rem;
  font-size:.8rem;font-weight:600;color:#dff2ff!important;
}
.warranty--dark svg{color:#bfeaff}
.warranty--dark span{font-family:var(--font-d);font-weight:800;color:#fff}

.fl__buy{display:flex;align-items:center;gap:1.1rem;margin-left:auto}
.fl__price{display:flex;align-items:baseline;gap:.5rem;white-space:nowrap}
.fl__price em{font-family:var(--font-d);font-style:normal;font-weight:800;font-size:1.15rem;color:var(--ink)}
.fl__price s{font-size:.85rem;color:var(--grey)}
.fl__add{padding:.92em 1.6em}

@media(max-width:760px){
  .fl__stage{border-radius:18px}
  .fl__bar{justify-content:center;gap:1.1rem}
  .fl__specs{justify-content:center}
  .fl__specs li{font-size:.76rem;padding:.5em .95em}
  .fl__buy{margin-left:0;width:100%;justify-content:space-between}
  .fl__add{flex:1;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .fl__cap{transition:opacity .2s;transform:none}
}

/* ═══════════ BRUSHING INTRO → hands off to the DX-1 film ═══════════ */
.br{
  position:relative;isolation:isolate;
  padding:clamp(3.8rem,7vw,6.5rem) 0 clamp(7rem,12vw,9.5rem);
  background:linear-gradient(180deg,#fff 0%,#fbfdff 40%,#eaf4fa 100%);
}
/* the lights dim before the film starts — capped below the padding so it never reaches the copy */
.br::after{
  content:'';position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  height:clamp(70px,9vh,100px);
  background:linear-gradient(180deg,rgba(4,9,14,0),#04090e);
}
.br__head{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:0 clamp(1.4rem,5vw,5rem)}

/* ═══════════ QUIZ ═══════════ */
.quiz{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7.5rem) clamp(1.4rem,6vw,5rem)}
.quiz__bg{position:absolute;inset:0;z-index:-1}
.quiz__bg video,.quiz__bg img{width:100%;height:100%;object-fit:cover}
.quiz__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.88) 45%,rgba(255,255,255,.55) 100%);
}
.quiz__bg{filter:saturate(.9)}
.quiz__inner{position:relative;max-width:1200px;margin:0 auto}
.quiz__options{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem;max-width:860px}
.qopt{
  display:inline-flex;align-items:center;gap:.8em;
  font-family:var(--font-d);font-weight:600;font-size:.93rem;color:var(--ink);
  background:rgba(255,255,255,.9);border:1.5px solid rgba(11,30,43,.1);
  padding:1em 1.6em;border-radius:99px;backdrop-filter:blur(8px);
  transition:all .35s var(--ease);box-shadow:0 4px 16px rgba(11,30,43,.05);
}
.qopt svg{color:var(--blue-deep);flex:none;transition:transform .35s var(--ease)}
.qopt:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 34px rgba(6,115,184,.14)}
.qopt:hover svg{transform:scale(1.15)}
.qopt.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.qopt.is-active svg{color:var(--blue-ice)}
.quiz__result{margin-top:2rem;max-width:980px}
.routine{
  display:grid;grid-template-columns:1.05fr 1.4fr;border-radius:var(--r-lg);overflow:hidden;
  background:#fff;box-shadow:var(--shadow-soft);
  opacity:0;transform:translateY(30px);
  animation:routineIn .8s var(--ease) forwards;
}
@keyframes routineIn{to{opacity:1;transform:none}}
.routine__media{position:relative;min-height:300px}
.routine__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.routine__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 55%,rgba(255,255,255,.4));
}
.routine__body{padding:clamp(1.6rem,3vw,2.6rem)}
.routine__body h3{font-family:var(--font-d);font-weight:800;font-size:clamp(1.3rem,2.2vw,1.7rem);margin-bottom:.5rem}
.routine__body>p{color:var(--slate);font-size:.95rem;line-height:1.7;margin-bottom:1.4rem}
.routine__items{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem}
.routine__item{display:flex;align-items:center;gap:.9rem}
.routine__item img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.routine__item div{flex:1}
.routine__item h5{font-size:.86rem;font-weight:800}
.routine__item span{font-size:.76rem;color:var(--slate)}
.routine__item strong{font-family:var(--font-d);font-size:.88rem}
.routine__buy{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.routine__price{display:flex;flex-direction:column;line-height:1.2}
.routine__price .was{font-size:.8rem;color:var(--grey);text-decoration:line-through;font-weight:600}
.routine__price .now{font-family:var(--font-d);font-weight:800;font-size:1.5rem}
.routine__eta{margin-top:1rem;display:inline-flex;align-items:center;gap:.5em;font-size:.76rem;font-weight:700;color:var(--slate)}
.routine__eta svg{color:var(--blue-deep)}
@media(max-width:820px){.routine{grid-template-columns:1fr}.routine__media{min-height:200px}}

/* ═══════════ BENEFITS ═══════════ */
.benefits{padding:clamp(4rem,9vw,7.5rem) clamp(1.4rem,5vw,5rem)}
.benefits__grid{
  max-width:1240px;margin:2.6rem auto 0;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.bcard{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 4px 20px rgba(11,30,43,.06);
  transition:transform .5s var(--ease),box-shadow .5s;
}
.bcard:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(6,115,184,.15)}
.bcard__media{aspect-ratio:4/3;overflow:hidden;background:var(--cloud)}
.bcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bcard:hover .bcard__media img{transform:scale(1.06)}
.bcard__body{padding:1.4rem 1.5rem 1.6rem}
.bcard__body h3{font-family:var(--font-d);font-size:1.05rem;font-weight:700;margin-bottom:.4rem}
.bcard__body p{font-size:.86rem;color:var(--slate);line-height:1.6;margin-bottom:.9rem}
.bcard__proof{
  display:flex;align-items:center;gap:.5em;
  font-size:.72rem;font-weight:700;color:var(--blue-deep);
  background:var(--mist);border-radius:99px;padding:.5em 1em;
  margin-bottom:1rem;width:fit-content;
}
.bcard__proof svg{flex:none}
.bcard__link{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-d);font-weight:700;font-size:.82rem;color:var(--blue-deep);
}
.bcard__link svg{transition:transform .3s var(--ease)}
.bcard:hover .bcard__link svg{transform:translateX(5px)}

/* ═══════════ BUNDLES ═══════════ */
.bundles{position:relative;overflow:hidden;padding:clamp(4rem,9vw,7.5rem) clamp(1.4rem,5vw,5rem);background:var(--mist)}
.bundles__bg{position:absolute;inset:0;opacity:.5}
.bundles__bg img{width:100%;height:100%;object-fit:cover}
.bundles__head{position:relative;max-width:1240px;margin:0 auto 2.6rem}
.bundles__grid{
  position:relative;max-width:1240px;margin:0 auto;display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:stretch;
}
.bundle{
  background:#fff;border-radius:var(--r-lg);padding:1.8rem 1.7rem;
  box-shadow:0 6px 26px rgba(11,30,43,.07);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s;position:relative;
  opacity:0;transform:translateY(40px);
}
.bundle.is-in{opacity:1;transform:none}
.bundle:hover{transform:translateY(-8px);box-shadow:0 30px 70px rgba(6,115,184,.16)}
.bundle--hot{border:2px solid transparent;background:
  linear-gradient(#fff,#fff) padding-box,var(--grad) border-box}
.bundle__flag{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  font-family:var(--font-d);font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  background:var(--grad);color:#fff;padding:.5em 1.3em;border-radius:99px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(10,162,224,.35);
}
.bundle__for{font-size:.72rem;font-weight:800;letter-spacing:.18em;color:var(--blue-deep);text-transform:uppercase;margin-bottom:.5rem}
.bundle h3{font-family:var(--font-d);font-weight:800;font-size:1.35rem;margin-bottom:.4rem}
.bundle>p{font-size:.88rem;color:var(--slate);line-height:1.65;margin-bottom:1.2rem}
.bundle__thumbs{display:flex;margin-bottom:1.2rem}
.bundle__thumbs img{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:3px solid #fff;box-shadow:0 4px 14px rgba(11,30,43,.12);
  margin-left:-14px;transition:transform .3s var(--ease);
}
.bundle__thumbs img:first-child{margin-left:0}
.bundle:hover .bundle__thumbs img{transform:translateY(-4px)}
.bundle:hover .bundle__thumbs img:nth-child(2){transition-delay:.05s}
.bundle:hover .bundle__thumbs img:nth-child(3){transition-delay:.1s}
.bundle__list{list-style:none;margin-bottom:1.4rem;display:grid;gap:.5rem}
.bundle__list li{display:flex;align-items:center;gap:.6em;font-size:.85rem;font-weight:600;color:var(--slate)}
.bundle__list svg{color:var(--blue-deep);flex:none}
.bundle__price{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.4rem;margin-top:auto}
.bundle__price .was{color:var(--grey);text-decoration:line-through;font-size:.95rem;font-weight:600}
.bundle__price .now{font-family:var(--font-d);font-weight:800;font-size:1.75rem}
.bundle__save{font-size:.78rem;font-weight:800;color:#0a9e63;background:#e5f7ef;padding:.4em .9em;border-radius:99px}
.bundle__eta{display:flex;align-items:center;gap:.5em;font-size:.74rem;font-weight:700;color:var(--slate);margin:.9rem 0 1.2rem}
.bundle__eta svg{color:var(--blue-deep)}
.bundle .btn{width:100%}

/* prices (orbit / shared) */
.price__was{color:var(--grey);text-decoration:line-through;font-size:1rem;font-weight:600}
.price__now{font-family:var(--font-d);font-weight:800;font-size:1.7rem;color:var(--ink)}
.price__save{font-size:.78rem;font-weight:800;color:#0a9e63;background:#e5f7ef;padding:.4em .9em;border-radius:99px}

/* ═══════════ DX-1 CINEMA ═══════════ */
.cinema{position:relative;height:100svh;overflow:hidden;background:#04090e}
.cinema__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cinema__grad{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(4,9,14,.72) 0%,rgba(4,9,14,0) 24%),
    linear-gradient(0deg,rgba(4,9,14,.82) 0%,rgba(4,9,14,0) 26%);
}
.cinema__head{
  position:absolute;top:0;left:0;right:0;text-align:center;
  padding-top:clamp(4.6rem,9vh,6.5rem);pointer-events:none;
}
.cinema__eyebrow{font-family:var(--font-d);font-size:.72rem;font-weight:700;letter-spacing:.34em;color:var(--blue-ice);margin-bottom:.5rem}
.cinema__title{
  font-family:var(--font-d);font-weight:800;font-size:clamp(1.7rem,3.6vw,2.7rem);
  letter-spacing:-.02em;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.cinema__chips{position:absolute;inset:0;pointer-events:none}
.holo-chip{
  position:absolute;font-size:.85rem;font-weight:700;color:#eaf6fd;
  background:rgba(8,20,30,.55);border:1px solid rgba(127,212,255,.45);
  padding:.65em 1.3em;border-radius:99px;backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(127,212,255,.08),0 14px 40px rgba(0,0,0,.45),0 0 24px rgba(10,162,224,.18);
  white-space:nowrap;opacity:0;overflow:hidden;
}
.holo-chip::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--blue-ice);margin-right:.65em;vertical-align:middle;
  box-shadow:0 0 10px var(--blue-ice),0 0 20px rgba(127,212,255,.6);
  animation:holoDot 1.6s ease infinite;
}
@keyframes holoDot{50%{opacity:.45}}
.holo-chip::after{
  content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(127,212,255,.28),transparent);
}
.holo-chip.is-on{animation:holoPop .6s cubic-bezier(.2,1.4,.35,1) forwards}
.holo-chip.is-on::after{animation:holoScan 1.1s ease .25s}
@keyframes holoPop{
  0%{opacity:0;transform:translateY(18px) scale(.6);filter:blur(8px)}
  60%{opacity:1;transform:translateY(-3px) scale(1.05);filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes holoScan{to{left:130%}}
.holo-chip--l1{left:clamp(1rem,9vw,12rem);top:26%}
.holo-chip--l2{left:clamp(1rem,9vw,12rem);top:44%}
.holo-chip--l3{left:clamp(1rem,9vw,12rem);top:60%}
.holo-chip--r1{right:clamp(1rem,9vw,12rem);top:28%}
.holo-chip--r2{right:clamp(1rem,9vw,12rem);top:46%}
.cinema__buy{
  position:absolute;left:50%;bottom:clamp(1.2rem,4vh,2.6rem);transform:translateX(-50%);
  display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;justify-content:center;
  background:rgba(8,20,30,.45);border:1px solid rgba(127,212,255,.2);
  border-radius:99px;padding:.7rem 1.6rem;backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.orbit__price{display:flex;align-items:baseline;gap:.8rem}
.cinema .price__now{color:#fff}
.cinema .price__was{color:#5f7686}
@media(max-width:760px){
  /* portrait phones: Annexe-style stacked card — full film, no cropping */
  .cinema{
    height:auto;display:flex;flex-direction:column;gap:1rem;
    padding:3.2rem 1.2rem 3.4rem;
  }
  .cinema__grad{display:none}
  .cinema__head{position:static;padding:0;text-align:left;pointer-events:auto;order:-1}
  .cinema__title{font-size:1.9rem}
  .cinema__video{
    position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;
    border-radius:18px;
    box-shadow:0 0 0 1px rgba(127,212,255,.15),0 24px 60px rgba(10,162,224,.18);
  }
  .cinema__chips{position:relative;inset:auto;height:3.1rem}
  .holo-chip{
    font-size:.78rem;top:.2rem;left:0 !important;right:auto !important;bottom:auto;
    margin:0;max-width:100%;white-space:normal;
  }
  .cinema__buy{
    position:static;transform:none;width:100%;
    justify-content:space-between;border-radius:22px;
    padding:.8rem 1.1rem;gap:.8rem;
  }
  .cinema .price__now{font-size:1.35rem}
  .cinema__buy .btn{padding:.85em 1.4em;font-size:.85rem}
}

/* ═══════════ BEFORE / AFTER ═══════════ */
.ba{
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;padding:clamp(4rem,9vw,7.5rem) clamp(1.4rem,6vw,6rem);
}
.ba__note{margin:1rem 0 1.4rem;font-size:.76rem;color:var(--grey)}
.ba__stage{
  position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;
  box-shadow:var(--shadow-soft);user-select:none;touch-action:none;cursor:ew-resize;
}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba__clip{position:absolute;inset:0;pointer-events:none;clip-path:inset(0 50% 0 0)}
.ba__clip .ba__img{position:absolute;inset:0;width:100%;height:100%}
.ba__handle{position:absolute;top:0;bottom:0;left:50%;width:0;z-index:3}
.ba__handle-line{position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#fff;box-shadow:0 0 18px rgba(0,0,0,.3)}
.ba__handle-knob{
  position:absolute;top:50%;left:0;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:#fff;color:var(--blue-deep);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.ba__tag{
  position:absolute;bottom:1.1rem;z-index:2;font-size:.68rem;font-weight:800;letter-spacing:.22em;
  background:rgba(255,255,255,.85);padding:.5em 1.1em;border-radius:99px;backdrop-filter:blur(6px);
}
.ba__tag--l{left:1.1rem}
.ba__tag--r{right:1.1rem;background:var(--grad);color:#fff}
@media(max-width:900px){.ba{grid-template-columns:1fr}}

/* ═══════════ COLLECTION ═══════════ */
.collection{padding:clamp(3rem,7vw,6rem) clamp(1.4rem,5vw,5rem);background:var(--mist);border-radius:60px 60px 0 0}
.collection__head{max-width:1240px;margin:0 auto 2.5rem}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.6rem}
.filter{
  font-weight:700;font-size:.85rem;color:var(--slate);
  padding:.6em 1.4em;border-radius:99px;background:#fff;border:1.5px solid transparent;
  transition:.3s;box-shadow:0 2px 10px rgba(11,30,43,.05);
}
.filter:hover{color:var(--blue-deep);transform:translateY(-2px)}
.filter.is-active{background:var(--ink);color:#fff}
.grid{
  max-width:1240px;margin:0 auto;display:grid;gap:1.6rem;
  grid-template-columns:repeat(auto-fill,minmax(262px,1fr));
}
.card{
  background:#fff;border-radius:var(--r-lg);overflow:hidden;position:relative;
  box-shadow:0 4px 20px rgba(11,30,43,.06);
  transition:transform .5s var(--ease),box-shadow .5s,opacity .5s;
  opacity:0;transform:translateY(40px);
}
.card.is-in{opacity:1;transform:none}
.card.is-hidden{display:none}
.card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(6,115,184,.16)}
.card__media{position:relative;aspect-ratio:1;overflow:hidden;background:var(--cloud)}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform .8s var(--ease)}
.card__media .img-b{opacity:0}
.card:hover .card__media .img-a{transform:scale(1.06)}
.card:hover .card__media .img-b{opacity:1;transform:scale(1.06)}
.card:hover .card__media .img-a.solo{transform:scale(1.08)}
.card__badge{
  position:absolute;top:1rem;left:1rem;z-index:2;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.9);color:var(--blue-deep);
  padding:.5em 1em;border-radius:99px;backdrop-filter:blur(6px);
  box-shadow:0 4px 14px rgba(11,30,43,.12);
}
.card__badge--hot{background:var(--grad);color:#fff}
.card__body{padding:1.3rem 1.4rem 1.5rem}
.card__cat{font-size:.68rem;font-weight:800;letter-spacing:.2em;color:var(--grey);text-transform:uppercase}
.card__name{font-family:var(--font-d);font-weight:700;font-size:1.06rem;margin:.35rem 0 .3rem}
.card__desc{font-size:.83rem;color:var(--slate);line-height:1.55;min-height:2.6em}
.card__foot{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;gap:.6rem}
.card__price{display:flex;flex-direction:column;line-height:1.15}
.card__price .was{font-size:.76rem;color:var(--grey);text-decoration:line-through;font-weight:600}
.card__price .now{font-family:var(--font-d);font-weight:800;font-size:1.18rem}
.card__add{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--font-d);font-weight:700;font-size:.82rem;color:#fff;
  background:var(--ink);padding:.75em 1.3em;border-radius:99px;
  transition:.35s var(--ease);
}
.card__add:hover{background:var(--blue-deep);transform:scale(1.05);box-shadow:0 10px 24px rgba(6,115,184,.35)}
.card__add.is-added{background:#0a9e63}
.card__save{
  position:absolute;top:1rem;right:1rem;z-index:2;
  font-size:.64rem;font-weight:800;color:#0a9e63;background:#e5f7ef;
  padding:.45em .8em;border-radius:99px;
}
.fly-dot{
  position:fixed;z-index:500;width:52px;height:52px;border-radius:50%;
  background-size:cover;background-position:center;pointer-events:none;
  box-shadow:0 8px 24px rgba(6,115,184,.4);border:2px solid #fff;
}

/* ═══════════ PROOF ═══════════ */
.proof{padding:clamp(3.5rem,7vw,6rem) clamp(1.4rem,5vw,5rem);background:var(--mist)}
.proof__inner{
  max-width:1240px;margin:0 auto;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.proof__item{
  background:#fff;border-radius:var(--r-lg);padding:2rem 1.8rem;
  transition:transform .45s var(--ease),box-shadow .45s;
}
.proof__item:hover{transform:translateY(-6px);box-shadow:0 20px 46px rgba(6,115,184,.12)}
.proof__item svg{color:var(--blue-deep);margin-bottom:1rem}
.proof__item h3{font-family:var(--font-d);font-size:1rem;margin-bottom:.45rem}
.proof__item p{font-size:.84rem;color:var(--slate);line-height:1.6}

/* ═══════════ SCAN ═══════════ */
.scan{padding:clamp(3rem,7vw,6rem) clamp(1.4rem,5vw,5rem)}
.scan__card{
  max-width:1150px;margin:0 auto;border-radius:40px;overflow:hidden;position:relative;
  background:linear-gradient(130deg,#054a77,#0673b8 45%,#0aa2e0 80%,#7fd4ff);
  display:grid;grid-template-columns:1.4fr .8fr;gap:2rem;align-items:center;
  padding:clamp(2.2rem,5vw,4.5rem);box-shadow:0 40px 90px rgba(6,115,184,.35);
}
.scan__card::before{
  content:'';position:absolute;top:-40%;right:-15%;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%);
}
.scan__copy .lead{margin-bottom:2rem}
.scan__qr{
  justify-self:center;text-align:center;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.25);border-radius:26px;padding:1.6rem;
  backdrop-filter:blur(8px);
}
.scan__qr img{width:170px;height:170px;border-radius:16px;background:#fff;padding:10px;margin:0 auto}
.scan__qr span{display:block;margin-top:.9rem;color:rgba(255,255,255,.85);font-size:.8rem;font-weight:700;letter-spacing:.08em}
@media(max-width:900px){.scan__card{grid-template-columns:1fr}}

/* ── In-app: the card IS the scanner's front door ── */
.scan__demo{display:none}
body.in-app .scan__qr{display:none}
body.in-app .scan__demo{
  display:block;position:relative;border-radius:22px;overflow:hidden;
  box-shadow:0 22px 55px rgba(4,26,44,.45);
  transform:translateZ(0);
}
body.in-app .scan__demo img,
body.in-app .scan__demo video{width:100%;display:block;aspect-ratio:1/1;object-fit:cover;object-position:50% 14%}
body.in-app .scan__demo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:46%;
  background:linear-gradient(180deg,rgba(4,26,44,0) 0%,rgba(4,26,44,.62) 100%);
  pointer-events:none;
}
.scan__demo-cta{
  position:absolute;left:50%;bottom:1.1rem;transform:translateX(-50%);z-index:1;
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  background:rgba(255,255,255,.94);color:#0b5387;font-weight:800;font-size:.92rem;
  border-radius:999px;padding:.78rem 1.35rem;
  box-shadow:0 10px 26px rgba(4,26,44,.35);
}
/* compact the whole card so it fits one phone screen */
body.in-app .scan{padding:2rem 1.2rem}
body.in-app .scan__card{padding:1.5rem 1.2rem 1.3rem;gap:.9rem}
body.in-app .scan__copy .eyebrow{margin-bottom:.45rem}
body.in-app .scan__copy .h2{font-size:1.65rem;line-height:1.12;margin-bottom:.55rem}
body.in-app .scan__copy .lead{font-size:.93rem;line-height:1.5;margin-bottom:.5rem}
/* the button inside the copy is now redundant in-app — the card is the button */
body.in-app .scan__copy .btn{display:none}

/* ── In-app: the tab bar owns navigation, so the footer slims down to
      the one thing the tabs don't cover — support ── */
body.in-app .footer__col--shop,
body.in-app .footer__col--explore,
body.in-app .footer__brand p{display:none}
body.in-app .footer__inner{grid-template-columns:1fr;gap:1.4rem;padding-top:2.2rem;padding-bottom:1.4rem}
body.in-app .footer__col--support h4{margin-bottom:.7rem}
body.in-app .footer__col--support a{display:inline-block;margin:0 1.4rem .5rem 0}

/* ═══════════ MOBILE CTA ═══════════ */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:105;
  display:none;align-items:center;gap:.8rem;
  padding:.8rem 1rem calc(.8rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px);
  box-shadow:0 -8px 30px rgba(11,30,43,.1);
}
.mobile-cta .btn{flex:1;padding:.95em 1em;font-size:.9rem}
.mobile-cta__cart{
  position:relative;width:48px;height:48px;border-radius:50%;background:var(--mist);
  display:grid;place-items:center;flex:none;
}
.mobile-cta__cart span{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:99px;
  background:var(--grad);color:#fff;font-size:.62rem;font-weight:800;
  display:grid;place-items:center;padding:0 4px;
}
@media(max-width:760px){.mobile-cta{display:flex}}

/* ═══════════ FOOTER ═══════════ */
.footer{position:relative;background:var(--ink);color:#c6d4de;overflow:hidden}
.footer__glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:70%;height:320px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(10,162,224,.35),transparent 70%);
}
.footer__inner{
  position:relative;max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;
  padding:clamp(3.5rem,7vw,5.5rem) clamp(1.4rem,5vw,3rem) 2.5rem;
}
.footer__brand .nav__logo-badge{color:#fff;border-color:rgba(255,255,255,.6);display:inline-block;margin-bottom:1.1rem}
.footer__brand p{font-size:.88rem;line-height:1.7;color:#8ba2b2;max-width:26rem}
.footer__col h4{font-family:var(--font-d);color:#fff;font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:1.1rem}
.footer__col a{display:block;font-size:.88rem;color:#8ba2b2;margin-bottom:.65rem;transition:.25s}
.footer__col a:hover{color:var(--blue-ice);transform:translateX(4px)}
.footer__bar{
  position:relative;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  max-width:1240px;margin:0 auto;padding:1.4rem clamp(1.4rem,5vw,3rem);
  border-top:1px solid rgba(255,255,255,.08);font-size:.76rem;color:#5f7686;
}
@media(max-width:900px){.footer__inner{grid-template-columns:1fr 1fr}}

/* ═══════════ SMALL-SCREEN POLISH ═══════════ */
@media(max-width:760px){
  /* hero: film becomes a rounded card below the copy, Annexe-style */
  .hero{min-height:auto;display:flex;flex-direction:column}
  .hero__media{
    position:relative;inset:auto;z-index:0;order:2;
    margin:.2rem 1.2rem 1.2rem;border-radius:20px;overflow:hidden;
    aspect-ratio:16/9;box-shadow:var(--shadow-soft);
  }
  .hero__video{transform:none;height:100%}
  .hero__veil{display:none}
  .hero__content{order:1;padding:5.6rem 1.2rem .9rem;padding-top:calc(6.6rem + env(safe-area-inset-top,0px))}
  .hero__eyebrow{margin-bottom:1rem}
  .hero__title{margin-bottom:1.1rem}
  .hero__sub{margin-bottom:1.5rem}
  .hero__cta{flex-direction:column;gap:.7rem;margin-bottom:1.5rem}
  .hero__cta .btn{width:100%;justify-content:center;white-space:nowrap;padding:1em 1.5em}
  .hero__ritual{margin-top:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
  .ritual-chip{
    flex-direction:column;gap:.45rem;padding:.7rem .3rem .6rem;
    border-radius:16px;justify-content:center;text-align:center;
  }
  .ritual-chip img{width:44px;height:44px}
  .ritual-chip span{flex-direction:column;gap:.15em;font-size:.78rem;align-items:center}
  .ritual-chip em{font-size:.58rem}
  .hero__trust{
    order:3;display:grid;grid-template-columns:1fr 1fr;
    gap:.65rem .8rem;padding:1.1rem 1.2rem 1.9rem;
  }
  .hero__trust span{font-size:.72rem;gap:.45em;align-items:flex-start;line-height:1.35}
  .hero__trust svg{margin-top:1px;flex:none}
  .hero__scroll{display:none}
  .quiz__options{flex-direction:column}
  .qopt{width:100%;justify-content:flex-start;padding:1.05em 1.4em}
  .routine__buy .btn{width:100%}
  .bundles__grid{gap:1.2rem}
  .bundle{padding:1.6rem 1.4rem}
  .ba__stage{aspect-ratio:4/3}
  .scan__qr{width:100%}
  .footer__inner{grid-template-columns:1fr;gap:1.8rem}
  .footer__bar{padding-bottom:calc(4.8rem + env(safe-area-inset-bottom))}
  .collection{border-radius:34px 34px 0 0}
}

/* ═══════════ MOTION SAFETY ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* real-order bridge note under the checkout button */
.cart__bridge-note{margin:.55rem 0 0;font-size:.74rem;line-height:1.5;color:var(--grey);text-align:center}

/* ═══ Official logo lockup — gradient wordmark, no pill ═══ */
.nav__logo-badge{
  border:0;padding:0;border-radius:0;
  font-weight:800;letter-spacing:.14em;font-size:1.3rem;
  background:linear-gradient(180deg,#3fa9e8 0%,#0f5fa4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nav__logo-sub{color:#6a7883;letter-spacing:.3em;font-size:.5rem}
.preloader__logo span{
  background:linear-gradient(180deg,#3fa9e8 0%,#0f5fa4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ═══ Apple-HIG tap targets: visuals stay slim, touch areas grow ═══ */
/* slideshow dots: 6px track inside a 28px touch strip */
.wl__dot{
  height:28px;background:transparent;border-radius:0;overflow:visible;position:relative;
}
.wl__dot::before{
  content:'';position:absolute;left:0;right:0;top:11px;height:6px;border-radius:99px;
  background:rgba(11,30,43,.14);transition:background .4s;
}
.wl__dot:hover::before{background:rgba(11,30,43,.26)}
.wl__dot.is-on::before{background:rgba(6,115,184,.20)}
.wl__dot span{top:11px;height:6px;bottom:auto}
/* cart line controls */
.ci-qty button{width:34px;height:34px}
.ci-remove{width:36px;height:36px;display:grid;place-items:center;font-size:1.35rem}
/* product-card add + collection filters on touch screens */
@media (max-width:900px){
  .card__add{padding:.95em 1rem;min-height:44px}
  .filter{min-height:44px;padding:.6em 1.25em}
  .wcard .card__add,.wl__add{min-height:44px}
}


/* Meet the DX-1: buy sits beside a quieter way in for people who want the story first */
.cinema__actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;justify-content:center}
.btn--learn{
  display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.1);color:#dff2ff;
  border:1px solid rgba(191,234,255,.38);border-radius:99px;
  padding:.85em 1.4em;font-weight:700;font-size:.86rem;
  backdrop-filter:blur(8px);transition:background .3s,border-color .3s,transform .3s;
}
.btn--learn:hover{background:rgba(255,255,255,.2);border-color:#bfeaff;transform:translateY(-2px)}
.btn--learn svg{flex:none;opacity:.85}
@media(max-width:760px){
  .cinema__actions{width:100%;flex-direction:column;align-items:stretch}
  .cinema__actions .btn{width:100%;justify-content:center;min-height:46px}
}

/* ── My Routine section ── */
.routines{padding:clamp(3.5rem,8vw,7rem) clamp(1.4rem,5vw,5rem);background:linear-gradient(180deg,#fff 0%,#f2f8fc 100%)}
.routines__head{max-width:44rem;margin:0 auto;text-align:center}
.routines__head .lead{margin:0 auto 2rem}
.rt-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 auto 1.8rem;max-width:46rem}
.rt-chip{border:1.5px solid #cfe0ee;background:#fff;border-radius:999px;padding:.7rem 1.15rem;font-weight:700;font-size:.86rem;color:#3d5468;cursor:pointer;transition:.22s;font-family:inherit}
.rt-chip.on{background:linear-gradient(90deg,#0aa5e0,#2f7cf6);border-color:transparent;color:#fff;box-shadow:0 8px 22px rgba(47,124,246,.3)}
.rt-card{display:grid;grid-template-columns:1fr 1.1fr;gap:0;max-width:56rem;margin:0 auto;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(11,30,43,.10)}
.rt-media img{width:100%;height:100%;object-fit:cover;display:block}
.rt-body{padding:clamp(1.4rem,3vw,2.2rem)}
.rt-body h3{font-size:1.35rem;margin:0 0 .7rem}
.rt-body p{font-size:.93rem;line-height:1.65;color:#4a6172;margin:0 0 1.1rem}
.rt-items{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.rt-items span{display:flex;align-items:center;gap:.5rem;font-size:.9rem;font-weight:600;color:#123}
.rt-items svg{color:#0aa5e0;flex-shrink:0}
.rt-price{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.1rem;flex-wrap:wrap}
.rt-price s{color:#9db0c0;font-size:.95rem}
.rt-price b{font-size:1.5rem}
.rt-price em{font-style:normal;font-size:.78rem;font-weight:800;color:#0a8a4a;background:rgba(10,138,74,.1);border-radius:999px;padding:.3em .8em}
@media(max-width:900px){.rt-card{grid-template-columns:1fr}.rt-media img{aspect-ratio:16/10}}