/* ==========================================================================
   XEBAYI DERMACEUTICALS — Clinical Luxe
   Design system + page styles
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Utilities (buttons, headings, reveal, image slots)
   4.  Loader / progress / announce / nav / mobile menu
   5.  Hero + pillars
   6.  Marquee
   7.  Products / bundles / trust
   8.  Concerns
   9.  Results (before-after)
   10. Science (ingredients)
   11. About
   12. Routine
   13. Reviews
   14. Guarantee / FAQ
   15. Footer
   16. Modal / drawer / toast / back-to-top
   17. Responsive
   18. Reduced motion & print
   ========================================================================== */

/* ------------------------------ 1. TOKENS ------------------------------- */
:root{
  --ink:#111111;
  --ink-2:#0d0d0d;
  --ink-3:#0b0b0b;
  --surface:#1a1a1a;
  --surface-2:#171717;
  --bone:#ffffff;
  --sand:#f6f5f2;
  --sand-2:#efeee9;
  --sand-3:#f1f0ec;

  --gold:#E4B531;
  --gold-lit:#f2c94c;
  --gold-deep:#9a8226;
  --gold-dark:#6b571a;

  --line:#ececec;
  --line-2:#e2e2e2;
  --line-dark:#2a2a2a;
  --line-dark-2:#232323;

  --text:#141414;
  --text-2:#3a3a3a;
  --muted:#6c6c6c;
  --muted-2:#8a8a8a;
  --muted-3:#9a9a9a;
  --on-dark:#f0f0f0;
  --on-dark-2:#b7b7b7;
  --on-dark-3:#8f8f8f;

  --display:'Playfair Display', Georgia, serif;
  --body:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gutter:28px;
  --max:1300px;
  --max-narrow:1240px;

  --r-sm:12px;
  --r-md:16px;
  --r-lg:20px;
  --r-xl:24px;
  --shadow-sm:0 4px 14px rgba(0,0,0,.07);
  --shadow-md:0 14px 40px rgba(0,0,0,.05);
  --shadow-lg:0 24px 70px rgba(0,0,0,.10);
  --shadow-nav:0 12px 40px rgba(0,0,0,.06);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

/* --------------------------- 2. RESET & BASE ---------------------------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  background:var(--bone);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body.is-locked{overflow:hidden}


img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:10001;background:var(--ink);color:#fff;padding:14px 22px;border-radius:0 0 12px 0}
.skip-link:focus{left:0}

/* ------------------------------ 3. UTILITIES ---------------------------- */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
.eyebrow i{font-style:normal;opacity:.5;margin:0 2px}
.eyebrow--gold{color:var(--gold-deep)}

.sec-head{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sec-head--center{text-align:center}
.sec-head--center .sec-sub{margin-left:auto;margin-right:auto}

.sec-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,4.4vw,46px);line-height:1.1;
  letter-spacing:-.5px;color:var(--ink);margin-top:12px;
}
.sec-sub{margin-top:12px;font-size:17px;color:var(--muted);max-width:560px;line-height:1.6}

.rule{border:none;height:1px;background:#ededed;margin:20px 0}

/* buttons ---------------------------------------------------------------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;white-space:nowrap;
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-family:var(--body);font-size:15px;font-weight:600;
  padding:15px 30px;border-radius:40px;border:1.5px solid transparent;
  cursor:pointer;overflow:hidden;isolation:isolate;text-align:center;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .75s var(--ease-out);
}
.btn:hover::before{transform:translateX(120%)}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(-1px) scale(.99)}

.btn--gold{--btn-bg:var(--gold);--btn-fg:var(--ink)}
.btn--gold:hover{box-shadow:0 14px 32px rgba(228,181,49,.42)}
.btn--dark{--btn-bg:var(--ink);--btn-fg:#fff;border-radius:var(--r-sm);padding:16px}
.btn--dark:hover{box-shadow:0 14px 32px rgba(17,17,17,.28)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink);font-weight:500}
.btn--ghost:hover{--btn-bg:var(--ink);--btn-fg:#fff}
.btn--outline{--btn-bg:#fff;--btn-fg:var(--ink);border-color:var(--line-2);border-radius:var(--r-sm);padding:15px;font-weight:500}
.btn--outline:hover{border-color:var(--ink)}
.btn--gold-outline{--btn-bg:transparent;--btn-fg:var(--gold);border-color:rgba(228,181,49,.5);margin-top:30px}
.btn--gold-outline:hover{--btn-bg:var(--gold);--btn-fg:var(--ink);border-color:var(--gold)}
.btn--block{display:flex;width:100%}
.btn--sm{padding:11px 22px;font-size:13.5px;white-space:nowrap}
.btn--lg{padding:17px 34px;font-size:16px}
.btn--lg::after,.hero__cta .btn::after{content:"→";font-weight:500;transition:transform .3s var(--ease-out)}
.btn--lg:hover::after{transform:translateX(4px)}

.pill-gold{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gold);color:var(--ink);
  font-size:11.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  padding:7px 14px;border-radius:30px;
}

.stars{display:flex;gap:3px}
.stars svg{width:16px;height:16px;fill:var(--gold)}
.stars--sm svg{width:14px;height:14px}
/* Unfilled stars. The reviews are real, so some are 3 and 4 stars — without
   this a 3-star review renders as three gold stars floating with nothing to
   compare them against, which reads as an error rather than a rating.
   Gold at low opacity so it works on the light page and the dark panel. */
.stars svg.is-empty{fill:rgba(228,181,49,.24)}

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

/* image slots ------------------------------------------------------------ */
.img-slot{
  position:relative;display:block;width:100%;height:100%;overflow:hidden;
  background-color:var(--sand-3);
  background-image:repeating-linear-gradient(135deg,rgba(17,17,17,.045) 0 1px,transparent 1px 11px);
}
.img-slot::after{
  content:attr(data-label);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;max-width:78%;text-align:center;
  font-size:11px;font-weight:500;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(17,17,17,.32);
  border:1px dashed rgba(17,17,17,.20);border-radius:30px;
  padding:8px 16px;background:rgba(255,255,255,.55);backdrop-filter:blur(2px);
}
.img-slot--dark{
  background-color:#1e1e1e;
  background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.05) 0 1px,transparent 1px 11px);
}
.img-slot--dark::after{color:rgba(255,255,255,.38);border-color:rgba(255,255,255,.22);background:rgba(0,0,0,.28)}
.img-slot img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity .7s var(--ease), transform 1.2s var(--ease-out);
}
.img-slot.is-filled{background-image:none}
.img-slot.is-filled::after{display:none}
.img-slot.is-filled img{opacity:1}

/* the supplied product shots are packshots on white — show them whole, on white,
   rather than cropping them. The hero lifestyle frame keeps object-fit:cover. */
.card__media,.xs__media,.buybar__thumb,.modal__media,
.gallery__main,.gallery__thumb,.hero__frame{background:#fff}
.card__media .img-slot.is-filled,
.xs__media .img-slot.is-filled,
.buybar__thumb .img-slot.is-filled,
.modal__media .img-slot.is-filled,
.gallery__main .img-slot.is-filled,
.gallery__thumb .img-slot.is-filled,


.card__media .img-slot img,
.xs__media .img-slot img,
.buybar__thumb .img-slot img,
.modal__media .img-slot img,
.gallery__main .img-slot img,
.gallery__thumb .img-slot img{object-fit:contain}

/* frame 1 of the hero is the lifestyle shot — that one should fill the frame */

/* ---------------- 4. LOADER / PROGRESS / ANNOUNCE / NAV ----------------- */
.loader{
  position:fixed;inset:0;z-index:10050;
  display:flex;align-items:center;justify-content:center;background:var(--ink);
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{text-align:center}
.loader__word{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,6vw,52px);letter-spacing:12px;color:#fff;padding-left:12px;
  animation:loaderIn 1s var(--ease-out) both;
}
.loader__tag{
  margin-top:8px;font-size:11px;letter-spacing:5px;text-transform:uppercase;
  color:var(--gold);animation:loaderIn 1s var(--ease-out) .15s both;
}
.loader__bar{width:180px;height:2px;margin:26px auto 0;background:rgba(255,255,255,.16);overflow:hidden}
.loader__bar span{display:block;height:100%;width:100%;background:var(--gold);transform-origin:left;animation:loaderBar 1.15s var(--ease-out) forwards}
@keyframes loaderIn{from{opacity:0;letter-spacing:24px}to{opacity:1}}
@keyframes loaderBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.scroll-progress{
  position:fixed;top:0;left:0;z-index:10020;height:3px;width:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-lit));
  transform:scaleX(0);transform-origin:left;transition:transform .12s linear;
}

/* top marquee ------------------------------------------------------------ */
.topbar{
  background:var(--ink);color:#fff;overflow:hidden;white-space:nowrap;
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;
  padding-block:11px;
}
.topbar__track{display:inline-flex;animation:topbarRun 38s linear infinite}
.topbar:hover .topbar__track{animation-play-state:paused}
.topbar__set{display:inline-flex;align-items:center}
.topbar__set > span{padding-inline:26px}
.topbar__set i{font-style:normal;color:var(--gold);font-size:9px}
@keyframes topbarRun{to{transform:translateX(-50%)}}

/* header ----------------------------------------------------------------- */
.header{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
}
.header.is-scrolled{box-shadow:0 10px 34px -20px rgba(0,0,0,.28)}
.header__inner{
  max-width:var(--max-narrow);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

.brand{display:inline-flex;align-items:center;gap:12px;flex-shrink:0}
/* The supplied logo is a full wordmark on white, not an icon — so when it
   loads it replaces the whole ✕-square + text lockup rather than being
   squeezed inside a 42px tile. Until then the ✕ lockup is the fallback. */
.brand__mark{
  position:relative;
  display:grid;place-items:center;
  width:42px;height:42px;border-radius:12px;
  background:var(--ink);color:var(--gold);
  font-size:17px;overflow:hidden;flex-shrink:0;
  transition:transform .35s var(--ease-out);
}
.brand:hover .brand__mark{transform:rotate(-8deg)}
.brand__mark i{font-style:normal}

/* Hidden with width/opacity rather than display:none — a display:none
   subtree can stop the browser fetching the image at all, which is exactly
   what kept the wordmark from ever appearing. */
.img-slot--logo{
  position:absolute;inset:0;
  width:1px;height:1px;opacity:0;pointer-events:none;
  background:none;overflow:hidden;
}
.img-slot--logo::after{display:none}

/* wordmark loaded → show it, drop the tile and the typed name */
.brand:has(.img-slot--logo.is-filled) .brand__mark{
  width:auto;height:44px;border-radius:0;background:none;overflow:visible;
}
.brand:has(.img-slot--logo.is-filled) .brand__mark i,
.brand:has(.img-slot--logo.is-filled) .brand__text{display:none}
.brand:has(.img-slot--logo.is-filled):hover .brand__mark{transform:none}

.img-slot--logo.is-filled{
  position:static;width:auto;height:44px;opacity:1;overflow:visible;
  pointer-events:auto;
}
.img-slot--logo.is-filled img{
  width:auto;height:100%;object-fit:contain;object-position:left center;
}

/* the Shop Now pill must never be squeezed into wrapping */
.nav__actions > *{flex-shrink:0}

.brand__text{display:flex;flex-direction:column;line-height:1.05}
.brand__name{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:.5px}
.brand__sub{font-size:8.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--muted-2);margin-top:3px}

.nav__links{display:flex;align-items:center;gap:26px;font-size:14.5px;font-weight:500;color:#2a2a2a}
.nav__links a{position:relative;padding:4px 0;transition:color .3s var(--ease)}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out);
}
.nav__links a:hover{color:var(--gold-deep)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__actions{display:flex;align-items:center;gap:12px}
.btn-cart{
  position:relative;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line-2);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
  transition:background-color .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), transform .3s var(--ease-out);
}
.btn-cart svg{width:19px;height:19px}
.btn-cart:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}
.btn-cart__count{
  position:absolute;top:-4px;right:-4px;
  background:var(--gold);color:var(--ink);font-weight:600;font-size:11px;
  border-radius:50%;width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  border:2px solid #fff;
}
.btn-cart__count.is-pop{animation:pop .5s var(--ease-out)}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}

.nav__burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav__burger span{display:block;width:18px;height:1.6px;background:var(--ink);transition:transform .4s var(--ease-out), opacity .3s var(--ease)}
.nav__burger.is-open span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.nav__burger.is-open span:nth-child(2){opacity:0}
.nav__burger.is-open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--ink);
  clip-path:circle(0% at calc(100% - 52px) 52px);
  transition:clip-path .7s var(--ease-out);
  display:flex;align-items:center;justify-content:center;visibility:hidden;
}
.mobile-menu.is-open{clip-path:circle(150% at calc(100% - 52px) 52px);visibility:visible}
.mobile-menu__inner{display:flex;flex-direction:column;gap:4px;text-align:center;padding:0 var(--gutter)}
.mobile-menu__inner a{
  font-family:var(--display);font-weight:700;font-size:clamp(26px,7vw,40px);color:#fff;line-height:1.35;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out), color .3s;
}
.mobile-menu__inner a:hover{color:var(--gold)}
.mobile-menu.is-open .mobile-menu__inner a{opacity:1;transform:none}
.mobile-menu.is-open [data-i="1"]{transition-delay:.18s}
.mobile-menu.is-open [data-i="2"]{transition-delay:.24s}
.mobile-menu.is-open [data-i="3"]{transition-delay:.30s}
.mobile-menu.is-open [data-i="4"]{transition-delay:.36s}
.mobile-menu.is-open [data-i="5"]{transition-delay:.42s}
.mobile-menu.is-open [data-i="6"]{transition-delay:.48s}
.mobile-menu__foot{
  margin-top:34px;color:var(--gold);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  opacity:0;transform:translateY(24px);
  transition:opacity .5s var(--ease-out) .54s, transform .5s var(--ease-out) .54s;
}
.mobile-menu.is-open .mobile-menu__foot{opacity:1;transform:none}

/* --------------------------- 5. HERO + PILLARS -------------------------- */
/* A normal-height hero with a single image.
   .hero__pin stays position:relative (never static) so it remains the
   containing block for .hero__ghost — otherwise overflow:hidden stops
   clipping the oversized watermark and the page scrolls sideways. */
.hero{position:relative;background:var(--bone)}
.hero__pin{
  position:relative;
  padding:clamp(44px,6vw,80px) 0 clamp(56px,7vw,96px);
  display:flex;align-items:center;
  overflow:hidden;
}
/* Sits behind everything as texture. Anchored to the right half and kept
   faint so it never reads as a clipped word behind the headline. */
.hero__ghost{
  position:absolute;right:-6%;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:clamp(9rem,22vw,20rem);font-weight:700;
  color:transparent;-webkit-text-stroke:1px rgba(12,12,12,.045);
  pointer-events:none;user-select:none;white-space:nowrap;
  z-index:0;
}

.hero__grid{
  position:relative;z-index:1;
  width:100%;max-width:var(--max-narrow);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1.08fr .92fr;
  align-items:center;gap:clamp(2rem,5vw,4.5rem);
}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:12px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;
  color:var(--ink);margin-bottom:26px;
}
.hero__eyebrow::before{content:"";width:2rem;height:2px;background:var(--gold);flex-shrink:0}

.hero__title{
  font-family:var(--body);font-weight:500;
  font-size:clamp(2.7rem,6.2vw,5.5rem);line-height:.98;letter-spacing:-.015em;
  color:var(--ink);
}
.hero__line{display:block;overflow:hidden;padding-bottom:.06em}
.hero__line > *,.hero__line{--y:0}
.hero__line--outline{color:transparent;-webkit-text-stroke:2px var(--ink)}
.hero__title em{font-style:normal;box-shadow:inset 0 -.14em 0 0 var(--gold)}

/* staged entrance */
.hero__line{transform:translateY(105%);transition:transform 1.05s var(--ease-out)}
body.is-ready .hero__line{transform:none}
body.is-ready .hero__line:nth-child(1){transition-delay:.10s}
body.is-ready .hero__line:nth-child(2){transition-delay:.20s}
body.is-ready .hero__line:nth-child(3){transition-delay:.30s}

.hero__lede{margin-top:26px;font-size:17px;color:var(--muted);max-width:33rem;line-height:1.65}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px;font-size:14px;color:var(--muted)}
.hero__proof strong{color:var(--ink);font-weight:600}

.hero__lede,.hero__cta,.hero__proof,.hero__eyebrow{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
body.is-ready .hero__eyebrow{opacity:1;transform:none;transition-delay:.05s}
body.is-ready .hero__lede{opacity:1;transform:none;transition-delay:.42s}
body.is-ready .hero__cta{opacity:1;transform:none;transition-delay:.52s}
body.is-ready .hero__proof{opacity:1;transform:none;transition-delay:.62s}

/* visual — one image, with the offset outline and floating chips ---------- */
.hero__visual{position:relative;display:grid;place-items:center}

.hero__ring{
  position:absolute;width:min(430px,92%);aspect-ratio:4/5;
  border-radius:var(--r-lg);border:1.5px solid var(--ink);
  transform:translate(18px,18px);pointer-events:none;
}
.hero__frame{
  position:relative;z-index:1;
  width:min(500px,100%);aspect-ratio:4/5;
  border-radius:var(--r-lg);overflow:hidden;
  background:var(--sand-3);
  box-shadow:var(--shadow-lg);
}
.hero__frame .img-slot{position:absolute;inset:0}
.hero__frame .img-slot img{object-fit:cover}

.hero__chip{
  position:absolute;z-index:2;
  background:#fff;border:1px solid var(--line);color:var(--ink);
  padding:.55rem 1.1rem;border-radius:999px;
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;
  box-shadow:var(--shadow-md);
  animation:float 5.5s ease-in-out infinite;
}
.hero__chip--a{top:12%;left:-4%}
.hero__chip--b{top:46%;right:-6%;animation-delay:1.2s;background:var(--gold);border-color:var(--gold)}
.hero__chip--c{bottom:12%;left:-2%;animation-delay:2.4s;background:var(--ink);color:#fff;border-color:var(--ink)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

@keyframes scrollHint{0%{transform:translateY(-100%)}60%,100%{transform:translateY(240%)}}

.pillars{
  max-width:var(--max);margin:0 auto;padding:56px var(--gutter) 10px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.pillar{
  border:1px solid var(--line);border-radius:var(--r-md);padding:26px 24px;
  background:#fff;transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s;
}
.pillar:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#e0dcc9}
.pillar svg{width:28px;height:28px;color:var(--gold-deep)}
.pillar h3{margin-top:16px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--text);line-height:1.25}
.pillar p{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.55}

/* ------------------------------ 6. MARQUEE ------------------------------ */
.marquee{margin-top:46px;background:var(--gold);color:var(--ink);overflow:hidden;padding:16px 0}
.marquee__track{display:flex;width:max-content;animation:scrollX 34s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;align-items:center;white-space:nowrap}
.marquee__set span{font-weight:600;font-size:16px;letter-spacing:1px;padding:0 30px}
.marquee__set i{font-style:normal;opacity:.55;font-size:11px}
@keyframes scrollX{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* --------------------- 7. PRODUCTS / BUNDLES / TRUST -------------------- */
.products{max-width:var(--max);margin:0 auto;padding:90px var(--gutter) 30px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:46px}

.card{
  position:relative;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:#fff;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;
  transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out), border-color .4s;
  transform-style:preserve-3d;
}
.card:hover{box-shadow:var(--shadow-lg);border-color:#e0dcc9}
.card.is-tilting{transition:transform .16s var(--ease-soft), box-shadow .5s var(--ease-out), border-color .4s}

.card__media{position:relative;aspect-ratio:1/1;background:var(--sand-3);overflow:hidden}
.card__media .img-slot{position:absolute;inset:0;transition:transform 1.1s var(--ease-out)}
.card:hover .card__media .img-slot{transform:scale(1.045)}

/* whole image area is a link through to the product page */
.card__link{position:absolute;inset:0;z-index:4;display:block}
.card__name a{transition:color .3s var(--ease)}
.card__name a:hover{color:var(--gold-deep)}
.bundle__title a{transition:color .3s var(--ease)}
.bundle__title a:hover{color:var(--gold)}

.card__save{
  position:absolute;top:14px;left:14px;z-index:5;
  background:var(--gold);color:var(--ink);
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  padding:6px 12px;border-radius:30px;
}
.card__flag{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(17,17,17,.82);backdrop-filter:blur(6px);color:#f2f2f2;
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  font-size:12.5px;font-weight:500;letter-spacing:.3px;
}
.card__flag svg{width:14px;height:14px;color:var(--gold);flex-shrink:0}
.card__flag strong{font-weight:600}

.card__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.card__cat{font-size:11.5px;font-weight:600;letter-spacing:1.8px;color:var(--gold-deep);text-transform:uppercase}
.card__name{margin-top:12px;font-family:var(--display);font-weight:700;font-size:24px;color:var(--text);line-height:1.2}
.card__tag{margin-top:6px;font-family:var(--display);font-style:italic;font-size:15px;color:var(--muted-2)}

.benefits{display:flex;flex-direction:column;gap:12px}
.benefits li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;color:var(--text-2);line-height:1.45}
.benefits svg{width:15px;height:15px;fill:var(--gold);flex-shrink:0;margin-top:3px}

.price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:18px}
.price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.price > span{font-family:var(--display);font-weight:700;font-size:27px;color:var(--text);line-height:1}
.price s{font-size:15px;color:var(--muted-3);text-decoration-thickness:1px}
.price__unit{font-size:12px;letter-spacing:1px;color:var(--gold-deep);text-transform:uppercase;white-space:nowrap;padding-bottom:2px}

.card .btn--dark{margin-top:20px}
.card .btn--outline{margin-top:10px}

/* helper tile ------------------------------------------------------------ */
.card--helper{
  background:linear-gradient(165deg,var(--sand) 0%,var(--sand-2) 100%);
  padding:34px 30px;justify-content:center;border-color:#e4e1d6;
}
.card--helper h3{font-family:var(--display);font-weight:700;font-size:26px;color:var(--text);line-height:1.15}
.card--helper > p{margin-top:14px;font-size:15px;color:var(--muted);line-height:1.6}
.helper-list{margin:24px 0 26px;display:flex;flex-direction:column;gap:0}
.helper-list li{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-top:1px solid rgba(17,17,17,.09);font-size:14px;
}
.helper-list li:last-child{border-bottom:1px solid rgba(17,17,17,.09)}
.helper-list span{color:var(--muted)}
.helper-list b{font-weight:600;color:var(--text);text-align:right}

/* bundles ---------------------------------------------------------------- */
/* ------------------------ bundle slider --------------------------------- */
.bslider{position:relative;margin-top:26px}
.bslider__viewport{overflow:hidden;border-radius:var(--r-lg)}
.bslider__track{
  display:flex;align-items:stretch;
  will-change:transform;
  transition:transform .7s var(--ease-out);
}
.bslider__track.is-jumping{transition:none}
.bslider__track > .bundle{flex:0 0 100%;width:100%}

.bslider__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);color:var(--ink);
  display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
  transition:background-color .3s var(--ease), color .3s var(--ease),
             transform .3s var(--ease-out), opacity .3s var(--ease);
}
.bslider__nav svg{width:18px;height:18px}
.bslider__nav:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.bslider__nav--prev{left:16px}
.bslider__nav--next{right:16px}
.bslider__nav--prev:hover{transform:translateY(-50%) translateX(-3px)}
.bslider__nav--next:hover{transform:translateY(-50%) translateX(3px)}

.bslider__dots{display:flex;justify-content:center;gap:8px;margin-top:20px}
.bslider__dots button{
  width:26px;height:3px;border-radius:3px;background:rgba(17,17,17,.16);
  transition:background-color .4s var(--ease), width .4s var(--ease-out);
}
.bslider__dots button[aria-selected="true"]{background:var(--gold);width:44px}
/* One wide card per bundle, photo beside the text.
   The column is a real percentage — `.42fr` against `1fr` resolves to 29%,
   not 42%, which squeezed the photo into a strip. At 44% the column is
   near-square, so `cover` fills it edge to edge with almost no crop
   instead of letterboxing the way `contain` did. */
.bundle{
  position:relative;overflow:hidden;background:var(--ink);color:#f4f4f4;
  border-radius:var(--r-lg);
  display:grid;grid-template-columns:minmax(300px,44%) 1fr;
  transition:transform .5s var(--ease-out);
}
.bundle__media{
  position:relative;display:block;overflow:hidden;
  background:#f4f1ea;
  min-height:100%;
}
.bundle__media .img-slot{position:absolute;inset:0;background-color:#f4f1ea}
.bundle__media .img-slot img{
  object-fit:contain;
  transition:transform 1.2s var(--ease-out);
}
.bundle:hover .bundle__media .img-slot img{transform:scale(1.04)}

.bundle:hover{transform:translateY(-5px)}
.bundle--alt{background:var(--ink-2)}

@media (max-width:820px){
  .bundle{grid-template-columns:1fr}
  /* the bundle photos are 1:1 — a 4:3 band left a quarter of the width as
     empty bars either side, so the artwork looked shrunken. Square band =
     the whole graphic, edge to edge, nothing cropped. */
  .bundle__media{min-height:0;aspect-ratio:1/1}
}
.bundle__glow{
  position:absolute;right:-8%;top:-40%;width:52%;height:160%;
  background:radial-gradient(ellipse at center,rgba(228,181,49,.22),transparent 62%);
  pointer-events:none;animation:heroGlow 11s ease-in-out infinite alternate;
}
.bundle__body{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;padding:32px 34px 34px}
.bundle__title{margin-top:18px;font-family:var(--display);font-weight:700;font-size:clamp(26px,3.2vw,32px);color:#fff;line-height:1.15}
.bundle__sub{margin-top:8px;font-size:15.5px;color:var(--on-dark-2);line-height:1.55}

.bundle__list{margin-top:22px;display:flex;flex-direction:column;gap:0}
.bundle__list li{
  display:flex;align-items:center;gap:14px;padding:13px 0;
  border-top:1px solid #262626;font-size:15px;color:#e2e2e2;
}
.bundle__list li:last-child{border-bottom:1px solid #262626}
.bundle__list i{
  font-style:normal;font-family:var(--display);font-size:13px;
  color:var(--gold);letter-spacing:1px;min-width:22px;
}
.bundle__note{margin-top:16px;font-size:13.5px;color:var(--on-dark-3);line-height:1.6}

.bundle__price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:auto;padding-top:24px}
.bundle__price-key{font-size:11.5px;font-weight:600;letter-spacing:2px;color:var(--muted-3);text-transform:uppercase;padding-bottom:4px}
.bundle__price{display:flex;align-items:baseline;gap:10px}
.bundle__price > span{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.6vw,34px);color:#fff;line-height:1}
.bundle__price s{font-size:15px;color:#7d7d7d}
.bundle .btn--gold{margin-top:22px;border-radius:var(--r-sm);padding:17px}

/* trust ------------------------------------------------------------------ */
.trust{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r-md);
  padding:20px 30px;display:flex;flex-wrap:wrap;gap:16px 30px;
  justify-content:center;color:#4a4a4a;font-size:14px;
}
.trust div{display:flex;align-items:center;gap:9px}
.trust span{color:var(--gold);font-size:10px}

/* ------------------------------ 8. CONCERNS ----------------------------- */
.concerns{max-width:var(--max);margin:0 auto;padding:90px var(--gutter) 20px}
.concern-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:48px}
.concern{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:34px 20px 30px;border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out),
             border-color .4s, background-color .4s;
}
.concern:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--gold);background:var(--sand)}
.concern svg{width:34px;height:34px;color:var(--ink);transition:color .4s}
.concern:hover svg{color:var(--gold-deep)}
.concern h3{margin-top:18px;font-family:var(--display);font-weight:700;font-size:19px;color:var(--text)}
.concern p{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.5}

/* --------------------- 9. RESULTS (BEFORE / AFTER) ---------------------- */
.results{background:var(--ink);color:#fff;padding:84px var(--gutter) 94px;margin-top:80px}
.results__inner{max-width:var(--max-narrow);margin:0 auto;text-align:center}
.results__title{font-family:var(--display);font-weight:700;font-size:clamp(32px,5.4vw,58px);line-height:1.05;letter-spacing:.5px}
.results__sub{margin-top:14px;font-size:clamp(13px,1.5vw,17px);letter-spacing:2.4px;color:var(--gold);font-weight:500;text-transform:uppercase}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:52px}
.compare__key{font-size:14px;letter-spacing:2.6px;color:#cfcfcf;margin-bottom:18px;text-transform:uppercase}
.compare{
  position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#222;
  user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize;
}
.compare__after,.compare__before{position:absolute;inset:0}
.compare .img-slot img{object-fit:cover;object-position:center 28%}
.compare__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare__line{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;background:#fff;
  transform:translateX(-50%);pointer-events:none;box-shadow:0 0 18px rgba(0,0,0,.4);
}
.compare__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .3s var(--ease-out);
}
.compare:hover .compare__grip{transform:translate(-50%,-50%) scale(1.1)}
.compare__tag{position:absolute;top:14px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 11px;border-radius:20px;pointer-events:none}
.compare__tag--l{left:14px;background:rgba(0,0,0,.6);color:#fff}
.compare__tag--r{right:14px;background:var(--gold);color:var(--ink);font-weight:600}
.compare__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.compare__range:focus-visible{opacity:.001;outline:2px solid var(--gold);outline-offset:-2px}

.results__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:58px;padding-top:44px;border-top:1px solid #232323}
.results__stats div{display:flex;flex-direction:column;gap:6px}
.results__stats strong{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,48px);color:var(--gold)}
.results__stats span{font-size:13px;letter-spacing:1.6px;color:var(--on-dark-3);text-transform:uppercase}

/* -------------------------- 10. SCIENCE --------------------------------- */
.science{background:var(--ink-2);color:#fff;padding:88px var(--gutter) 96px}
.science__head{max-width:var(--max-narrow)}
.science__title{color:#fff}
.science__sub{color:var(--on-dark-3)}
.science-grid{
  max-width:var(--max-narrow);margin:52px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.ing{
  border:1px solid #232323;border-radius:var(--r-md);padding:28px 24px 26px;
  background:var(--surface);
  transition:transform .5s var(--ease-out), border-color .4s, background-color .4s;
}
.ing:hover{transform:translateY(-5px);border-color:rgba(228,181,49,.4);background:#1d1d1d}
.ing__pc{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:52px;height:30px;padding:0 12px;border-radius:30px;
  background:rgba(228,181,49,.12);border:1px solid rgba(228,181,49,.35);
  color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.6px;
}
.ing h3{margin-top:16px;font-family:var(--display);font-weight:700;font-size:20px;color:#fff;line-height:1.25}
.ing p{margin-top:10px;font-size:14px;color:#a8a8a8;line-height:1.6}

/* ---------------------------- 11. ABOUT --------------------------------- */
.about{background:var(--sand);padding:90px var(--gutter) 96px}
.about__inner{max-width:var(--max-narrow);margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start}
.about__lead h2{margin-top:14px;font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,52px);line-height:1.06;color:var(--ink)}
.about__intro{margin-top:22px;font-size:16.5px;line-height:1.75;color:var(--muted)}
.about__lead .btn{margin-top:30px}

.about__cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.about__block{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:30px 28px}
.about__block h3{font-family:var(--display);font-weight:700;font-size:21px;color:var(--text)}
.about__block p{margin-top:12px;font-size:14.5px;line-height:1.7;color:var(--muted)}
.about__block--gold{background:var(--gold);border-color:var(--gold)}
.about__block--gold h3{color:var(--ink)}
.about__block--gold p{color:#4a3d12}

/* ---------------------------- 12. ROUTINE ------------------------------- */
.routine{background:#fff;padding:90px var(--gutter) 96px;text-align:center}
.routine__title{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.4vw,48px);color:var(--text);margin-top:12px}
.routine-grid{max-width:var(--max-narrow);margin:60px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.step{position:relative;display:flex;flex-direction:column;align-items:center}
.step__no{
  font-family:var(--display);font-size:60px;font-weight:700;color:rgba(17,17,17,.06);line-height:1;
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);pointer-events:none;
}
.step__icon{
  position:relative;width:92px;height:92px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .55s var(--ease-out);
}
.step:hover .step__icon{transform:translateY(-6px) rotate(-4deg)}
.step__icon svg{width:36px;height:36px}
.step h3{margin-top:22px;font-family:var(--display);font-weight:700;font-size:23px;color:var(--text)}
.step p{margin-top:10px;font-size:14.5px;color:var(--muted);line-height:1.6;max-width:250px}

/* ---------------------------- 13. REVIEWS ------------------------------- */
.reviews{background:var(--sand);padding:88px var(--gutter) 90px;overflow:hidden}
.review-rail{
  max-width:var(--max-narrow);margin:48px auto 0;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.review-rail::-webkit-scrollbar{display:none}
.review-track{display:flex;gap:22px;padding:4px 2px 8px}
.review{
  flex:0 0 340px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;gap:16px;
  box-shadow:var(--shadow-md);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.review:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.review blockquote{font-family:var(--display);font-style:italic;font-size:17.5px;line-height:1.6;color:var(--text-2);flex:1}
.review figcaption{display:flex;align-items:center;gap:14px;padding-top:14px;border-top:1px solid #f0f0f0}
.review figcaption > span:last-child{display:flex;flex-direction:column;gap:2px}
.review__ini{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:var(--ink);color:var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:16px;font-weight:700;
}
.review figcaption strong{font-size:15px;font-weight:600;color:var(--text)}
.review figcaption em{font-style:normal;font-size:13px;color:var(--muted-2);letter-spacing:.3px}

.rail-nav{display:flex;justify-content:center;gap:12px;margin-top:34px}
.rail-nav button{
  width:46px;height:46px;border-radius:50%;border:1px solid #dcdcdc;background:#fff;
  font-size:17px;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s, color .3s, border-color .3s, transform .3s var(--ease-out);
}
.rail-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px)}

/* ------------------------- 14. GUARANTEE / FAQ -------------------------- */
.guarantee{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;text-align:center;
  padding:96px var(--gutter);border-top:1px solid #222;
}
.guarantee__ring{
  position:absolute;left:50%;top:50%;width:min(760px,120vw);aspect-ratio:1;
  transform:translate(-50%,-50%);border:1px solid rgba(228,181,49,.20);border-radius:50%;pointer-events:none;
}
.guarantee__ring::before,.guarantee__ring::after{content:"";position:absolute;inset:14%;border:1px solid rgba(228,181,49,.14);border-radius:50%}
.guarantee__ring::after{inset:30%;border-color:rgba(228,181,49,.09)}
.guarantee h2{position:relative;font-family:var(--display);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.1}
.guarantee p{position:relative;margin:22px auto 0;max-width:720px;font-size:17px;line-height:1.75;color:#bdbdbd}
.guarantee .btn{position:relative;margin-top:34px}

.faq{background:var(--ink-2);color:#fff;padding:88px var(--gutter) 104px}
.faq__inner{max-width:var(--max-narrow);margin:0 auto;display:grid;grid-template-columns:.9fr 1.2fr;gap:60px;align-items:start}
.faq__lead h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.05}
.faq__lead p{margin-top:20px;font-size:16px;color:var(--muted-2);max-width:360px;line-height:1.65}

.faq__list{display:flex;flex-direction:column;gap:14px}
.qa{border:1px solid var(--line-dark);border-radius:14px;overflow:hidden;background:var(--surface-2);transition:border-color .4s var(--ease), background-color .4s var(--ease)}
.qa:hover{border-color:#3a3a3a}
.qa.is-open{border-color:rgba(228,181,49,.42);background:#191919}
.qa__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  color:var(--on-dark);font-family:var(--body);font-size:16.5px;text-align:left;padding:21px 24px;
  transition:color .3s var(--ease);
}
.qa__q:hover{color:#fff}
.qa__q i{font-style:normal;color:var(--gold);font-size:22px;flex-shrink:0;line-height:1;transition:transform .4s var(--ease-out)}
.qa.is-open .qa__q i{transform:rotate(180deg)}
.qa__a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease-out)}
.qa__a p{padding:0 24px 24px;font-family:var(--display);font-style:italic;font-size:15.5px;line-height:1.75;color:#b8b8b8}

/* ---------------------------- 15. FOOTER -------------------------------- */
.footer{background:var(--ink-3);color:#e8e8e8;padding:88px var(--gutter) 40px}
.footer__inner{max-width:var(--max-narrow);margin:0 auto}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px}
.footer__wordmark{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:4px;line-height:1}
.footer__desc{margin-top:6px;font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold)}
.footer__brand > p:not(.footer__desc){margin-top:20px;font-size:14.5px;color:var(--on-dark-3);line-height:1.7;max-width:320px}

.socials{display:flex;gap:12px;margin-top:26px}
.socials a{
  width:40px;height:40px;border-radius:50%;border:1px solid #333;color:#cfcfcf;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease-out);
}
.socials svg{width:17px;height:17px}
.socials a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);transform:translateY(-3px)}

.footer__col{display:flex;flex-direction:column;gap:13px}
.footer h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:4px}
.footer__col a{color:var(--on-dark-2);font-size:14.5px;width:fit-content;transition:color .3s var(--ease), transform .3s var(--ease-out)}
.footer__col a:hover{color:var(--gold);transform:translateX(4px)}

.footer__news h4{margin-bottom:14px}
.footer__news > p{font-size:14px;color:var(--on-dark-3);line-height:1.65}
.news{display:flex;margin-top:18px;background:#161616;border:1px solid #303030;border-radius:40px;padding:6px 6px 6px 20px;transition:border-color .35s var(--ease)}
.news:focus-within{border-color:var(--gold)}
.news input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:#e8e8e8;font-size:14px}
.news input::placeholder{color:#6a6a6a}
.news button{background:var(--gold);color:var(--ink);border-radius:40px;padding:11px 22px;font-weight:600;font-size:14px;transition:background-color .3s var(--ease), transform .3s var(--ease-out)}
.news button:hover{background:var(--gold-lit);transform:translateY(-1px)}
.news__note{margin-top:10px;font-size:13px;color:var(--gold);min-height:18px}
.footer__contact{margin-top:14px;font-size:13px;color:#5f5f5f;font-style:italic}

.footer__bar{
  margin-top:56px;border-top:1px solid var(--line-dark-2);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  font-size:13px;color:#7a7a7a;
}
.footer__legal{display:flex;gap:24px}
.footer__legal a{transition:color .3s var(--ease)}
.footer__legal a:hover{color:var(--gold)}

/* ------------- 16. MODAL / DRAWER / TOAST / BACK-TO-TOP ----------------- */
.modal{position:fixed;inset:0;z-index:10040;display:flex;align-items:center;justify-content:center;padding:24px;visibility:hidden;opacity:0;transition:opacity .4s var(--ease), visibility .4s}
.modal.is-open{visibility:visible;opacity:1}
.modal__scrim{position:absolute;inset:0;background:rgba(10,10,10,.62);backdrop-filter:blur(4px)}
.modal__panel{
  position:relative;z-index:1;
  width:min(940px,100%);max-height:88vh;
  background:#fff;border-radius:var(--r-lg);overflow:hidden;
  display:grid;grid-template-columns:.85fr 1.15fr;
  box-shadow:0 40px 100px rgba(0,0,0,.4);
  transform:translateY(24px) scale(.98);
  transition:transform .5s var(--ease-out);
}
.modal.is-open .modal__panel{transform:none}
.modal__close{
  position:absolute;top:16px;right:16px;z-index:3;
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);
  border:1px solid var(--line);font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s, color .3s, transform .3s var(--ease-out);
}
.modal__close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.modal__media{position:relative;background:var(--sand-3);min-height:100%}
.modal__media .img-slot{position:absolute;inset:0}
.modal__body{padding:36px 34px;overflow-y:auto;max-height:88vh}
.modal__cat{font-size:11.5px;font-weight:600;letter-spacing:1.8px;color:var(--gold-deep);text-transform:uppercase}
.modal__title{margin-top:10px;font-family:var(--display);font-weight:700;font-size:30px;color:var(--text);line-height:1.15}
.modal__price{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.modal__price span{font-family:var(--display);font-weight:700;font-size:26px}
.modal__price s{font-size:15px;color:var(--muted-3)}
.modal__content{margin-top:22px}
.modal__content .pd__intro{font-size:15px;line-height:1.75;color:var(--muted)}
.modal__content h4{
  margin-top:26px;font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--gold-deep);
  padding-bottom:10px;border-bottom:1px solid var(--line);
}
.modal__content ul,.modal__content ol{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.modal__content li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.65;color:var(--text-2)}
.modal__content ul li::before{content:"◆";position:absolute;left:0;top:0;color:var(--gold);font-size:9px;line-height:1.9}
.modal__content ol{counter-reset:s}
.modal__content ol li{counter-increment:s;padding-left:26px}
.modal__content ol li::before{content:counter(s);position:absolute;left:0;top:0;font-family:var(--display);font-weight:700;color:var(--gold-deep);font-size:14px}
.modal__content b{font-weight:600;color:var(--text)}
.modal__body .btn{margin-top:28px}

.drawer-scrim{position:fixed;inset:0;z-index:9990;background:rgba(10,10,10,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .45s var(--ease)}
.drawer-scrim.is-open{opacity:1}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:10000;width:min(420px,100vw);
  background:var(--ink);color:#eee;display:flex;flex-direction:column;
  transform:translateX(101%);transition:transform .55s var(--ease-out);
  box-shadow:-30px 0 80px rgba(0,0,0,.4);
}
.drawer.is-open{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:26px 26px 20px;border-bottom:1px solid var(--line-dark)}
.drawer__head h3{font-family:var(--display);font-weight:700;font-size:24px}
.drawer__close{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line-dark);color:#bbb;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .3s,color .3s,transform .3s var(--ease-out);
}
.drawer__close:hover{background:var(--gold);color:var(--ink);transform:rotate(90deg)}
.drawer__body{flex:1;overflow-y:auto;padding:22px 26px}
.drawer__empty{color:#7d7d7d;font-size:15px;text-align:center;padding:50px 0;font-family:var(--display);font-style:italic}

.line-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid #1e1e1e;animation:slideIn .45s var(--ease-out) both}
@keyframes slideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.line-item__main{flex:1;min-width:0}
.line-item__name{font-size:14.5px;font-weight:500;color:#f0f0f0;line-height:1.35}
.line-item__meta{margin-top:5px;font-size:12.5px;color:var(--muted-3)}
.line-item__price{font-family:var(--display);font-size:17px;color:var(--gold);white-space:nowrap}
.line-item__qty{display:flex;align-items:center;gap:10px;margin-top:10px}
.line-item__qty button{
  width:26px;height:26px;border-radius:50%;border:1px solid var(--line-dark);color:#ccc;font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background-color .25s,color .25s,border-color .25s;
}
.line-item__qty button:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.line-item__qty span{font-size:14px;min-width:16px;text-align:center}
.line-item__del{margin-left:auto;font-size:12px;color:#6c6c6c;letter-spacing:.5px;transition:color .25s}
.line-item__del:hover{color:#e46b6b}

.drawer__foot{padding:22px 26px 26px;border-top:1px solid var(--line-dark)}
.drawer__row{display:flex;align-items:baseline;justify-content:space-between;font-size:14px;color:var(--muted-3)}
.drawer__row strong{font-family:var(--display);font-size:26px;color:#fff}
.drawer__note{margin:10px 0 18px;font-size:12.5px;color:#6f6f6f;line-height:1.5}

.toast{
  position:fixed;left:50%;bottom:34px;z-index:10060;transform:translate(-50%,140%);
  background:var(--ink);color:#fff;border:1px solid var(--line-dark);border-left:3px solid var(--gold);
  border-radius:10px;padding:14px 22px;font-size:14.5px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .55s var(--ease-out);
  max-width:calc(100vw - 40px);
}
.toast.is-on{transform:translate(-50%,0)}

/* floating WhatsApp button ------------------------------------------------ */
.wa{
  position:fixed;right:26px;bottom:86px;z-index:92;
  display:inline-flex;align-items:center;gap:0;
  height:56px;width:56px;padding:0;
  border-radius:40px;overflow:hidden;
  background:#25D366;color:#fff;
  box-shadow:0 14px 34px rgba(37,211,102,.36);
  transition:width .45s var(--ease-out), gap .45s var(--ease-out),
             padding .45s var(--ease-out), transform .35s var(--ease-out),
             box-shadow .35s var(--ease-out);
}
.wa svg{width:28px;height:28px;flex-shrink:0;margin-left:14px;position:relative;z-index:1}
.wa__label{
  white-space:nowrap;font-size:14.5px;font-weight:600;letter-spacing:.01em;
  opacity:0;transform:translateX(-6px);
  transition:opacity .3s var(--ease), transform .35s var(--ease-out);
  position:relative;z-index:1;
}
.wa:hover{width:186px;gap:11px;transform:translateY(-3px);box-shadow:0 18px 42px rgba(37,211,102,.46)}
.wa:hover .wa__label{opacity:1;transform:none}

.wa__pulse{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:#25D366;
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}

.to-top{
  position:fixed;right:26px;bottom:26px;z-index:90;
  width:48px;height:48px;border-radius:50%;background:var(--ink);color:#fff;font-size:18px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(0,0,0,.25);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease-out), visibility .4s, background-color .3s;
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--ink)}

/* ---------------------------- 17. RESPONSIVE ---------------------------- */
@media (max-width:1180px){
  .nav__links{gap:20px;font-size:14px}
  .nav{padding-left:24px}
  .science-grid{grid-template-columns:repeat(3,1fr)}
  .concern-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:1080px){
  .hero__copy{padding:52px 20px 52px 44px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:repeat(2,1fr)}
  .about__inner{grid-template-columns:1fr;gap:40px}
  .faq__inner{grid-template-columns:1fr;gap:40px}
  .routine-grid{grid-template-columns:repeat(2,1fr);gap:44px}
  .footer__grid{grid-template-columns:1.5fr 1fr 1fr;gap:40px}
  .footer__news{grid-column:1/-1}
  .modal__panel{grid-template-columns:1fr;max-height:90vh}
  .modal__media{min-height:220px;height:220px}
  .modal__body{max-height:calc(90vh - 220px)}
}

@media (max-width:900px){
  :root{--gutter:20px}
  .nav__links{display:none}
  .nav__burger{display:flex}
  .topbar{font-size:10.5px;letter-spacing:.24em}
  .header__inner{padding:11px var(--gutter)}
  .brand__mark{width:38px;height:38px}
  .brand__name{font-size:21px}  .hero{height:auto}
  .hero__grid{grid-template-columns:1fr;gap:52px}
  .hero__visual{order:2}
  .hero__copy{order:1}
  .hero__title{font-size:clamp(2.6rem,10vw,3.6rem)}
  .hero__ghost{top:34%;font-size:clamp(8rem,44vw,16rem)}

  .science-grid{grid-template-columns:repeat(2,1fr)}
  .concern-grid{grid-template-columns:repeat(2,1fr)}
  .compare-grid{grid-template-columns:1fr;gap:34px}
  .about__cols{grid-template-columns:1fr}
  .products{padding-top:70px}
  .concerns{padding-top:70px}
}

@media (max-width:620px){
  .product-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr;padding-top:44px}
  .science-grid{grid-template-columns:1fr}
  .concern-grid{grid-template-columns:1fr}
  .routine-grid{grid-template-columns:1fr;gap:48px}
  .bundle__body{padding:26px 22px 28px}
  .bslider__nav{width:40px;height:40px}
  .bslider__nav--prev{left:10px}
  .bslider__nav--next{right:10px}
  .card__body{padding:22px 20px 24px}
  .card--helper{padding:30px 24px}
  .trust{padding:18px 20px;gap:14px 22px;font-size:13.5px}

  .results{padding:64px var(--gutter) 72px}
  .results__stats{grid-template-columns:1fr;padding-top:34px;margin-top:42px;gap:26px}
  .results__stats div{gap:2px}

  .review{flex:0 0 84vw}
  .guarantee{padding:70px var(--gutter)}
  .footer__grid{grid-template-columns:1fr;gap:36px}
  .footer__bar{flex-direction:column;align-items:flex-start;gap:16px}
  .marquee__set span{font-size:14px;padding:0 20px}
  .to-top{right:16px;bottom:16px;width:44px;height:44px}
  .wa{right:16px;bottom:72px;height:50px;width:50px}
  .wa svg{width:25px;height:25px;margin-left:12.5px}
  .wa__pulse{left:12.5px;width:25px;height:25px}
  .wa:hover{width:50px;gap:0}
  .wa:hover .wa__label{opacity:0}
  .compare__grip{width:38px;height:38px;font-size:15px}
  .drawer{width:100vw}
  .modal{padding:0}
  .modal__panel{border-radius:0;max-height:100vh}
  .modal__body{padding:28px 22px;max-height:calc(100vh - 200px)}
  .modal__media{height:200px;min-height:200px}
  .announce span:last-child{display:none}
  .announce i{display:none}
}

@media (max-width:400px){
  .btn-cart__label{display:none}
  .nav__wordmark{font-size:20px;letter-spacing:2.5px}
}

/* ============================ 18. MOTION ===============================
   Site-wide motion layer. Everything here is applied by js/main.js via
   selectors, so the markup stays clean.
   ====================================================================== */

/* --- split-text headings: word masks, staggered ------------------------- */
[data-reveal].is-split{opacity:1;transform:none;transition:none}
.sp{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding-bottom:.1em;margin-bottom:-.1em;
}
.sp > span{
  display:inline-block;
  transform:translateY(112%);
  transition:transform .95s var(--ease-out);
}
.is-in .sp > span{transform:none}

/* --- band curtain for the full-bleed sections --------------------------- */
.band{
  clip-path:inset(4% 0 4% 0 round 26px);
  opacity:.001;
  transition:clip-path 1.15s var(--ease-out), opacity .7s var(--ease);
  will-change:clip-path;
}
.band.is-in{clip-path:inset(0 0 0 0 round 0);opacity:1}

/* --- icon stroke draw --------------------------------------------------- */
.icon-draw [data-len]{
  transition:stroke-dashoffset 1.25s var(--ease-out);
}
.icon-draw.is-drawn [data-len]{stroke-dashoffset:0 !important}

/* --- pointer spotlight on the dark bands -------------------------------- */
.science,.results{position:relative;isolation:isolate}
.science::before,.results::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(228,181,49,.09),transparent 68%);
  opacity:0;transition:opacity .5s var(--ease);
}
.science:hover::before,.results:hover::before{opacity:1}

/* --- routine connector line --------------------------------------------- */
.routine-grid{position:relative}
.routine__line{
  position:absolute;left:12%;right:12%;top:46px;height:1px;
  background:rgba(17,17,17,.12);
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease-out);
  pointer-events:none;z-index:0;
}
.routine__line.is-in{transform:scaleX(1)}
.step{position:relative;z-index:1}

/* --- benefit rows stagger inside product cards -------------------------- */
.benefits li{
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.is-in .benefits li{opacity:1;transform:none}
.is-in .benefits li:nth-child(1){transition-delay:.18s}
.is-in .benefits li:nth-child(2){transition-delay:.26s}
.is-in .benefits li:nth-child(3){transition-delay:.34s}
.is-in .benefits li:nth-child(4){transition-delay:.42s}
.is-in .benefits li:nth-child(5){transition-delay:.50s}

/* --- bundle list stagger ------------------------------------------------- */
.bundle__list li{
  opacity:0;transform:translateX(-10px);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.is-in .bundle__list li{opacity:1;transform:none}
.is-in .bundle__list li:nth-child(1){transition-delay:.22s}
.is-in .bundle__list li:nth-child(2){transition-delay:.32s}
.is-in .bundle__list li:nth-child(3){transition-delay:.42s}

/* --- magnetic buttons ---------------------------------------------------- */
.is-magnetic{transition:transform .18s var(--ease-soft), box-shadow .35s var(--ease-out)}

/* --- gold accent underline sweep on section eyebrows --------------------- */
.eyebrow--gold{position:relative;display:inline-block}
.eyebrow--gold::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease-out) .2s;
}
.eyebrow--gold.is-in::after{transform:scaleX(1)}

/* --- trust strip items drift in ----------------------------------------- */
.trust div{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease-out), transform .6s var(--ease-out)}
.trust.is-in div{opacity:1;transform:none}
.trust.is-in div:nth-child(1){transition-delay:.05s}
.trust.is-in div:nth-child(2){transition-delay:.15s}
.trust.is-in div:nth-child(3){transition-delay:.25s}
.trust.is-in div:nth-child(4){transition-delay:.35s}

/* --- guarantee rings drift with scroll ---------------------------------- */
.guarantee__ring{transition:transform .1s linear}

/* ==================== 19. RESPONSIVE REFINEMENTS =======================
   Layered over the breakpoints in section 17. Coverage:
     ≥1500  large desktop        1181–1499  desktop
     981–1180 laptop             901–980    small laptop
     621–900  tablet             381–620    phone
     ≤380    small phone         + short-viewport and touch handling
   ====================================================================== */

/* --- stable viewport height (mobile/tablet browser toolbars) ------------
   Scoped to ≥901px: below that the hero is unpinned with height:auto and
   must not be forced back to a viewport height. */
@supports (height:100dvh){
  .modal__panel,.modal__body{max-height:88dvh}
}

/* --- guard against sideways scroll -------------------------------------
   DO NOT add any overflow rule to `html`. While html stays `overflow:visible`,
   body's `overflow-x:hidden` propagates to the viewport and body itself is
   treated as visible — which is what keeps `position:sticky` working for the
   header and the pinned hero. Setting overflow on html stops that
   propagation, makes body its own scroll container, and the hero pin dies
   (leaving ~312vh of blank space under the hero).
   Fix real overflow at the source instead — see .hero__ghost above. */
.hero__grid,.header__inner,.footer__inner,.hero__copy,.hero__visual,
.card__body,.footer__brand,.footer__news{min-width:0}

/* --- large desktop ------------------------------------------------------ */
@media (min-width:1500px){
  :root{--gutter:36px}
  .hero__title{font-size:5.6rem}
  .hero__frame{width:min(540px,100%)}
}

/* --- laptop: hold two columns, tighten the visual ----------------------- */
@media (min-width:901px) and (max-width:1180px){
  .hero__grid{gap:2.4rem}
  .hero__frame{width:min(430px,100%)}
}

/* --- short viewports: 768px-tall laptops, tablets in landscape ---------- */
@media (min-width:901px) and (max-height:780px){
  .hero__title{font-size:clamp(2.1rem,4.1vw,3.3rem)}
  .hero__eyebrow{margin-bottom:16px}
  .hero__lede{margin-top:16px;font-size:15px}
  .hero__cta{margin-top:22px}
  .hero__proof{margin-top:18px}
  .hero__frame{width:min(300px,86%)}
  .btn--lg{padding:13px 26px;font-size:15px}
}

/* --- tablet ------------------------------------------------------------- */
@media (min-width:621px) and (max-width:900px){
  .hero__frame{width:min(400px,68%)}
  .review{flex:0 0 48%}
  .trust{gap:14px 26px}
  .values__grid,.science-grid,.concern-grid{gap:16px}
}

/* --- touch devices: bigger targets, no hover-only motion ---------------- */
@media (hover:none){
  .btn:hover,.card:hover,.review:hover,.concern:hover,.pillar:hover,
  .ing:hover,.value:hover,.formula:hover,.bundle:hover,.ccard:hover{transform:none}
  .wa,.wa:hover{width:56px;gap:0}
  .wa:hover .wa__label{opacity:0}
  .nav__links a,.footer__col a,.crumbs a{padding-block:6px}
}

/* --- floating buttons must clear the sticky buy bar --------------------- */
body:has(.buybar.is-on) .wa{bottom:152px}
body:has(.buybar.is-on) .to-top{bottom:92px}

/* --- phone -------------------------------------------------------------- */
@media (max-width:620px){
  .hero__line--outline{-webkit-text-stroke-width:1.4px}
  .hero__eyebrow{font-size:11px;letter-spacing:.24em}
  .hero__lede{font-size:15.5px}
  .crumbs{font-size:11.5px;gap:7px}
  .phero{padding:52px var(--gutter) 56px}
  .faq-nav{gap:8px}
  .faq-nav a{padding:9px 16px;font-size:12.5px}
  .sec-sub{font-size:15.5px}
  .guarantee p,.about__intro{font-size:15.5px}
  .drawer__head h3{font-size:21px}
}

/* --- small phone -------------------------------------------------------- */
@media (max-width:380px){
  :root{--gutter:16px}
  .hero__title{font-size:2.15rem}
  .brand__sub{display:none}
  .brand__name{font-size:19px}
  .btn{padding:13px 20px;font-size:14px}
  .btn--lg{padding:14px 20px;font-size:15px}
  .btn--sm{padding:10px 16px;font-size:12.5px}
  .hero__cta{gap:10px}
  .hero__cta .btn{width:100%}
  .drawer__head,.drawer__body,.drawer__foot{padding-left:18px;padding-right:18px}
  .toast{font-size:13.5px;padding:12px 16px}
}

/* -------------------- 20. REDUCED MOTION & PRINT ------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  .marquee__track,.topbar__track{animation:none}

  /* motion layer off */
  .sp > span{transform:none}
  .band{clip-path:none;opacity:1}
  .icon-draw [data-len]{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .science::before,.results::before{display:none}
  .routine__line{transform:scaleX(1)}
  .benefits li,.bundle__list li,.trust div{opacity:1;transform:none}
  .eyebrow--gold::after{transform:scaleX(1)}
  .guarantee__ring{transform:translate(-50%,-50%) !important}  .hero{height:auto}
  .hero__line{transform:none}
  .hero__eyebrow,.hero__lede,.hero__cta,.hero__proof{opacity:1;transform:none}
}

@media print{
  .header,.topbar,.marquee,.drawer,.drawer-scrim,.to-top,.toast,.loader,.scroll-progress,.modal{display:none !important}
  body{background:#fff}
  [data-reveal]{opacity:1;transform:none}
}