:root{--blue:#1327ff;--lime:#d7ff20;--paper:#f6f2e8;--cream:#f3f0e8;--ink:#050505;--muted:#6f6a60;--line:rgba(19,39,255,.18);--body:'Jost',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;background:#fff}body{font-family:var(--body);background:#fff;color:var(--ink);overflow-x:hidden;line-height:1.25}a{text-decoration:none;color:inherit}button,input{font:inherit}.page{opacity:0;transition:opacity .45s}.page.ready{opacity:1}.loader{position:fixed;inset:0;background:#fff;color:var(--blue);z-index:9999;display:grid;place-items:center;transition:transform .9s cubic-bezier(.76,0,.24,1)}.loader.done{transform:translateY(-110%)}.loader-label{position:absolute;top:9vh;font-size:13px;font-weight:800;letter-spacing:.22em}.loader-count{font-weight:900;font-size:clamp(8rem,28vw,30rem);letter-spacing:-.14em;line-height:.75}.header{position:fixed;z-index:1000;top:0;left:0;right:0;padding:24px clamp(20px,4.7vw,72px);display:flex;align-items:center;justify-content:space-between;color:#fff;mix-blend-mode:difference}.logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;letter-spacing:-.02em}.logo i{width:18px;height:24px;border-radius:80% 0 80% 0;background:currentColor;transform:rotate(-35deg);display:block}.nav-center{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:34px;font-size:14px;font-weight:600}.header-tools{display:flex;align-items:center;gap:17px}.header-tools a{font-size:23px}.menu-open{border:0;background:transparent;color:currentColor;width:38px;height:28px;display:grid;gap:7px;cursor:pointer}.menu-open span{height:2px;background:currentColor;border-radius:99px}.menu-panel{position:fixed;inset:0;z-index:4000;background:var(--lime);color:var(--blue);padding:9vh 7vw 7vh;display:grid;grid-template-columns:minmax(0,1fr) 34%;gap:6vw;transform:translateX(105%);transition:transform .7s cubic-bezier(.76,0,.24,1)}.menu-panel.open{transform:translateX(0)}.menu-close{position:absolute;right:4.4vw;top:24px;border:0;background:transparent;font-size:46px;color:var(--blue);cursor:pointer}.menu-links{display:flex;flex-direction:column;justify-content:center}.menu-links a{font-weight:900;font-size:clamp(4rem,12vw,12rem);letter-spacing:-.13em;line-height:.75;text-transform:lowercase;opacity:0;transform:translateY(34px);transition:.55s cubic-bezier(.16,1,.3,1)}.menu-panel.open .menu-links a{opacity:1;transform:translateY(0)}.menu-panel.open .menu-links a:nth-child(2){transition-delay:.08s}.menu-panel.open .menu-links a:nth-child(3){transition-delay:.16s}.menu-panel.open .menu-links a:nth-child(4){transition-delay:.24s}.menu-social{align-self:end}.menu-social p{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;margin-bottom:19px}.menu-social a{display:block;font-size:25px;font-weight:600;line-height:1.6}.menu-social strong{display:block;margin-top:19vh;max-width:320px;color:var(--ink);font-size:30px;letter-spacing:-.06em;line-height:.95}.hero{height:320vh;background:#fff}.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;display:grid;place-items:center}.hero-stage{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 53% 45%,rgba(215,255,32,.75) 0 13%,rgba(215,255,32,.42) 14% 31%,rgba(215,255,32,0) 55%),#fff}.hero-bottle{width:min(67vw,1010px);max-height:100vh;object-fit:contain;filter:drop-shadow(0 26px 35px rgba(19,39,255,.13));transition:transform .08s linear}.gummy{position:absolute;width:clamp(74px,9vw,150px);filter:drop-shadow(0 16px 20px rgba(0,0,0,.13));animation:float 6s ease-in-out infinite}.g-a{left:5vw;top:18vh}.g-b{left:14vw;bottom:10vh;animation-delay:.8s}.g-c{right:9vw;top:14vh;animation-delay:1.1s}.g-d{right:11vw;bottom:15vh;animation-delay:1.6s}.g-e{top:7vh;left:43vw;width:92px;animation-delay:2s}.g-f{bottom:4vh;right:39vw;width:100px;animation-delay:2.5s}@keyframes float{0%,100%{transform:translateY(-10px) rotate(-5deg)}50%{transform:translateY(18px) rotate(7deg)}}.hero-copy{position:absolute;z-index:3;left:clamp(22px,5vw,74px);bottom:8.5vh;width:min(620px,48vw)}.hero-copy h1{font-size:clamp(4rem,9.5vw,11rem);font-weight:900;letter-spacing:-.13em;line-height:.76;color:var(--blue)}.stars{color:var(--blue);font-weight:800;letter-spacing:.42em;margin:24px 0 20px}.hero-copy p{max-width:430px;border-left:3px solid var(--blue);padding-left:18px;color:#111;font-size:clamp(15px,1.25vw,18px);line-height:1.45}.scroll-hint{position:absolute;right:5vw;bottom:7vh;color:rgba(0,0,0,.55);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.22em;text-align:center}.scroll-hint span{display:block;margin-top:7px;animation:down 1.35s ease-in-out infinite}@keyframes down{50%{transform:translateY(8px)}}.reveal{opacity:0;transform:translateY(44px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:translateY(0)}.formulated{background:var(--paper);padding:clamp(92px,11vw,168px) clamp(20px,5vw,78px)}.formulated-grid{max-width:1440px;margin:auto;display:grid;grid-template-columns:35% 1fr;gap:clamp(40px,6vw,96px);align-items:start}.form-title{position:sticky;top:125px}.form-title p{font-size:clamp(2.8rem,5.8vw,7.8rem);font-weight:900;line-height:.83;letter-spacing:-.11em;color:var(--blue)}.form-title h2{font-size:clamp(3.8rem,8.5vw,11rem);font-weight:900;line-height:.78;letter-spacing:-.13em;color:var(--ink)}.form-text h3{font-size:clamp(1.15rem,1.8vw,1.7rem);font-weight:800;color:var(--blue);margin-bottom:20px}.form-text p{font-weight:900;font-size:clamp(2.8rem,5.8vw,7.5rem);line-height:.86;letter-spacing:-.105em;color:var(--ink)}.form-text img{width:clamp(72px,9vw,135px);height:clamp(50px,7vw,103px);border-radius:999px;object-fit:cover;vertical-align:middle;margin:0 .15em;border:1.5px solid rgba(19,39,255,.2)}.stories{background:#fff;overflow:hidden;padding:clamp(84px,9vw,142px) 0}.story-head{max-width:1440px;margin:0 auto clamp(30px,4vw,56px);padding:0 clamp(20px,5vw,78px);display:grid;grid-template-columns:34% 1fr;align-items:end}.story-head p{font-size:12px;font-weight:900;color:var(--blue);text-transform:uppercase;letter-spacing:.22em;margin-bottom:16px}.story-head h2{font-size:clamp(4.5rem,11.5vw,13.5rem);font-weight:900;color:var(--blue);letter-spacing:-.135em;line-height:.72}.story-carousel{width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}.story-track{display:flex;gap:clamp(16px,2vw,28px);width:max-content;padding:8px 5vw 30px;animation:storyLeft 48s linear infinite;will-change:transform}.story-carousel:hover .story-track{animation-play-state:paused}@keyframes storyLeft{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.story-card{position:relative;flex:0 0 clamp(295px,27vw,430px);height:clamp(340px,34vw,520px);border-radius:clamp(26px,3vw,42px);overflow:hidden;box-shadow:0 22px 60px rgba(19,39,255,.09);transform:translateZ(0);transition:transform .35s}.story-card:hover{transform:translateY(-10px) rotate(-.8deg)}.story-card.quote{background:var(--lime);color:var(--blue);padding:clamp(26px,2.7vw,42px);display:flex;flex-direction:column;justify-content:space-between}.story-card.quote.blue{background:var(--blue);color:var(--lime)}.story-card.quote.cream{background:var(--paper);border:1.5px solid var(--line);color:var(--blue)}.story-card.quote p{font-size:clamp(1.9rem,2.8vw,3.6rem);font-weight:900;letter-spacing:-.08em;line-height:.95}.story-card.quote div{display:flex;align-items:center;gap:14px}.story-card.quote b{display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;border:1.6px solid currentColor;border-radius:999px;font-size:18px}.story-card.quote span{font-weight:900;text-transform:uppercase;letter-spacing:.1em;font-size:12px;line-height:1.25}.story-card.quote small{display:block;font-weight:600;opacity:.72;margin-top:5px}.story-card.media{background:#ddd}.story-card.media img,.story-card.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.story-card.media span{position:absolute;left:22px;bottom:22px;background:var(--lime);color:var(--blue);border:1.5px solid rgba(19,39,255,.18);border-radius:999px;padding:10px 16px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;box-shadow:0 14px 35px rgba(0,0,0,.15)}.tag-marquee{height:112px;background:var(--blue);display:flex;align-items:center;overflow:hidden}.tag-marquee div{display:flex;gap:46px;width:max-content;animation:tagMove 25s linear infinite}.tag-marquee span{white-space:nowrap;color:var(--lime);font-weight:900;font-size:clamp(1.2rem,2.2vw,2rem);letter-spacing:-.04em;text-transform:uppercase}@keyframes tagMove{to{transform:translateX(-50%)}}.benefits{position:relative;min-height:110vh;background:linear-gradient(180deg,#fff 0%,#eef6ca 100%);overflow:hidden;display:grid;place-items:center;padding:clamp(86px,10vw,150px) clamp(20px,5vw,78px)}.benefit-copy{max-width:1160px;text-align:center;position:relative;z-index:3}.benefit-copy p{font-size:12px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);margin-bottom:28px}.benefit-copy h2{font-size:clamp(3.7rem,9.5vw,12rem);font-weight:900;color:var(--blue);letter-spacing:-.135em;line-height:.75}.benefit-copy em{font-style:normal;color:var(--ink)}.float-photo{position:absolute;width:clamp(140px,22vw,340px);border-radius:36px;object-fit:cover;box-shadow:0 22px 70px rgba(0,0,0,.13);animation:float 7s ease-in-out infinite}.p1{left:6vw;top:11vh}.p2{right:4vw;bottom:9vh;animation-delay:1.1s}.float-candy{position:absolute;width:clamp(88px,12vw,180px);filter:drop-shadow(0 20px 30px rgba(0,0,0,.15));animation:float 6s ease-in-out infinite}.c1{right:18vw;top:8vh}.c2{left:22vw;bottom:8vh;animation-delay:1.6s}.product{position:relative;background:var(--lime);padding:clamp(104px,11vw,160px) clamp(20px,5vw,78px) clamp(96px,10vw,145px);overflow:hidden}.grass{position:absolute;left:0;right:0;top:-1px;width:100%;height:92px;object-fit:cover}.product-grid{max-width:1360px;margin:auto;display:grid;grid-template-columns:49% 1fr;gap:clamp(40px,5vw,86px);align-items:center}.product-art{position:relative;min-height:640px;display:grid;place-items:center}.product-art img{width:min(92%,620px);max-height:720px;object-fit:contain;filter:drop-shadow(0 28px 52px rgba(19,39,255,.2))}.mini-tags{position:absolute;left:4%;bottom:6%;display:flex;gap:9px;flex-wrap:wrap}.mini-tags span{background:var(--blue);color:var(--lime);border-radius:999px;padding:10px 16px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.product-info{background:rgba(255,255,255,.58);border:1.5px solid rgba(19,39,255,.22);border-radius:38px;padding:clamp(24px,4vw,54px);box-shadow:0 26px 80px rgba(19,39,255,.11)}.kicker{font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.22em;color:var(--blue)}.product-info h2{font-size:clamp(4.2rem,8vw,9.8rem);font-weight:900;color:var(--blue);line-height:.73;letter-spacing:-.135em;margin:12px 0}.product-info h3{font-size:clamp(1.6rem,3vw,3.3rem);font-weight:900;line-height:.9;letter-spacing:-.08em;margin-bottom:18px}.rating{color:var(--blue);font-weight:900}.rating span{color:#202020;font-weight:600}.rating a{text-decoration:underline}.impact{margin:20px 0;padding-top:18px;border-top:1px solid rgba(19,39,255,.2);color:#282415}.tabs{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:8px;margin:22px 0}.tab{min-height:48px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);border-radius:999px;padding:8px 15px;font-weight:900;cursor:pointer}.tab.active,.tab:hover{background:var(--blue);color:var(--lime)}.tab.clear{border-color:rgba(19,39,255,.35);opacity:.65}.plan{display:none;background:#fff;border-radius:24px;border:1.5px solid rgba(19,39,255,.15);padding:24px;margin-top:14px}.plan.active{display:block}.plan h4{font-size:28px;color:var(--blue);letter-spacing:-.06em}.plan p{margin:5px 0 10px}.plan strong{display:block;font-size:36px;color:var(--blue);margin-bottom:9px}.plan s{font-size:17px;color:#6a665a;margin-left:8px}.plan ul{padding-left:20px}.qty-label{display:block;margin:20px 0 8px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}.cart{display:flex}.cart button,.cart input{height:55px;border:1.5px solid var(--blue);background:transparent;color:var(--blue);font-weight:900;text-align:center}.cart>button:not(.cart-btn){width:49px;cursor:pointer}.cart input{width:64px;border-left:0;border-right:0}.cart-btn{border:0!important;background:var(--blue)!important;color:var(--lime)!important;border-radius:999px!important;flex:1;margin-left:12px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.delivery{text-align:center;font-size:12px;font-weight:900;letter-spacing:.16em;margin-top:15px}.footer{position:relative;background:#050505;color:#fff;padding:130px clamp(20px,5vw,78px) 36px;overflow:hidden}.footer-bottle{position:absolute;right:-12vw;top:-130px;width:min(65vw,880px);opacity:.7;filter:drop-shadow(0 34px 80px rgba(0,0,0,.5))}.footer-grid{position:relative;z-index:2;max-width:1360px;margin:0 auto 85px;display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:54px}.footer h2{font-size:clamp(4.5rem,8.5vw,10rem);font-weight:900;color:var(--lime);letter-spacing:-.13em;line-height:.72}.footer h4{font-size:12px;color:var(--lime);letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}.footer a{display:block;color:rgba(255,255,255,.75);margin-bottom:11px}.footer-bottom{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);padding-top:21px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.58)}.popup{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);z-index:5000;display:grid;place-items:center;padding:20px;opacity:0;pointer-events:none;transition:.3s}.popup.show{opacity:1;pointer-events:auto}.popup-card{position:relative;width:min(94vw,460px);background:var(--lime);color:var(--blue);text-align:center;border-radius:36px;padding:28px 28px 34px;box-shadow:0 36px 100px rgba(0,0,0,.32);transform:translateY(40px) scale(.96);transition:.45s cubic-bezier(.16,1,.3,1)}.popup.show .popup-card{transform:translateY(0) scale(1)}.popup-close{position:absolute;right:18px;top:13px;border:0;background:transparent;font-size:34px;color:var(--blue);cursor:pointer}.popup-card img{width:82%;max-height:365px;object-fit:contain;margin-top:-84px;filter:drop-shadow(0 22px 40px rgba(0,0,0,.18))}.popup-card h2{font-size:clamp(2.3rem,6vw,4.7rem);font-weight:900;letter-spacing:-.12em;line-height:.78}.popup-card p{margin:15px 0 21px;font-weight:700;color:#222}.popup-order{width:100%;height:53px;border:0;border-radius:999px;background:var(--blue);color:var(--lime);font-weight:900;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.popup-no{margin-top:16px;border:0;background:transparent;color:var(--blue);cursor:pointer}@media(max-width:900px){.nav-center{display:none}.header{padding:18px 18px}.hero-copy{left:20px;right:20px;bottom:7vh;width:auto}.hero-copy h1{font-size:19vw}.hero-bottle{width:138vw}.gummy{width:78px}.formulated-grid,.product-grid,.footer-grid{grid-template-columns:1fr}.form-title{position:relative;top:auto}.form-title p{font-size:13vw}.form-title h2,.product-info h2{font-size:18vw}.form-text p{font-size:13vw}.story-head{display:block}.story-head h2{font-size:20vw}.story-carousel{mask-image:none;-webkit-mask-image:none}.story-track{padding-left:20px;animation-duration:38s}.story-card{flex-basis:78vw;height:440px}.story-card.quote p{font-size:11vw}.benefits{min-height:96vh}.float-photo.p1{left:-50px}.float-photo.p2{right:-58px}.product-art{min-height:470px}.tabs{grid-template-columns:1fr 1fr}.tab.clear{grid-column:span 2}.cart{flex-wrap:wrap}.cart-btn{flex-basis:100%;margin:12px 0 0}.menu-panel{grid-template-columns:1fr}.menu-links a{font-size:22vw}.menu-social{align-self:start}.menu-social strong{margin-top:8vh}.footer h2{font-size:18vw}.footer-bottle{opacity:.25}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.hero{height:auto}.hero-pin{position:relative}}
/* =========================================================
   V4 FIXED REFERENCE COMPOSITION
   Changes are written against this package's real HTML/CSS:
   - hero title simplified and placed behind the product layer
   - hero background remains white with lime radial glow
   - Real Stories becomes full-screen reference-style marquee
   - large text sections get safer spacing/line-height
   ========================================================= */

/* --- global text balance --- */
.form-title p,
.form-title h2,
.form-text p,
.story-head h2,
.benefit-copy h2,
.product-info h2,
.footer h2 {
  text-wrap: balance;
}

/* --- header: keep visible but less visually heavy --- */
.header {
  color: #fff;
  mix-blend-mode: difference;
}

/* --- HERO: product above, title behind product, no bottom-left paragraph --- */
.hero {
  background: #fff;
}

.hero-pin {
  position: sticky;
  isolation: isolate;
  background: #fff;
}

.hero-pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 53% 45%,
      rgba(215, 255, 32, 0.72) 0 13%,
      rgba(215, 255, 32, 0.38) 14% 31%,
      rgba(215, 255, 32, 0) 55%
    ),
    #fff;
}

.hero-stage {
  z-index: 3;
  background: transparent !important;
  pointer-events: none;
}

.hero-bottle {
  position: relative;
  z-index: 5;
  width: min(66vw, 990px);
  max-height: 100vh;
  object-fit: contain;
  filter: drop-shadow(0 30px 46px rgba(19, 39, 255, 0.14));
}

.gummy {
  z-index: 4;
}

.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: none;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}

.hero-copy h1 {
  margin: 0;
  max-width: 100vw;
  font-size: clamp(5.8rem, 18vw, 18rem);
  font-weight: 900;
  line-height: 0.72;
  letter-spacing: -0.13em;
  color: rgba(5, 5, 5, 0.78);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-copy .stars,
.hero-copy p {
  display: none;
}

.scroll-hint {
  z-index: 8;
}

/* --- Formulated section: reduce cramped giant typography --- */
.formulated {
  padding-top: clamp(96px, 10vw, 150px);
  padding-bottom: clamp(96px, 10vw, 150px);
}

.formulated-grid {
  grid-template-columns: minmax(260px, 30%) minmax(0, 1fr);
  gap: clamp(56px, 8vw, 132px);
}

.form-title p {
  font-size: clamp(2.25rem, 4.8vw, 6.2rem);
  line-height: 0.92;
  letter-spacing: -0.095em;
}

.form-title h2 {
  font-size: clamp(3.35rem, 7.4vw, 9.2rem);
  line-height: 0.84;
  letter-spacing: -0.115em;
}

.form-text p {
  max-width: 940px;
  font-size: clamp(2.15rem, 4.7vw, 5.95rem);
  line-height: 0.96;
  letter-spacing: -0.082em;
}

/* --- REAL STORIES: full-screen moving cards like the screenshot/reference --- */
.stories {
  position: relative;
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(215, 255, 32, 0.32) 0 10%,
      rgba(215, 255, 32, 0.18) 11% 30%,
      rgba(215, 255, 32, 0) 48%
    ),
    #f8f8f3;
  display: flex;
  align-items: center;
}

.story-head {
  position: absolute;
  inset: 0;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 0 5vw;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.story-head p {
  display: none;
}

.story-head h2 {
  margin: 0;
  width: 100%;
  font-size: 0;
  line-height: 0;
  text-align: center;
}

.story-head h2::before,
.story-head h2::after {
  display: block;
  font-size: clamp(5.4rem, 13vw, 16rem);
  font-weight: 900;
  line-height: 0.78;
  letter-spacing: -0.12em;
  color: rgba(5, 5, 5, 0.78);
  text-transform: uppercase;
}

.story-head h2::before {
  content: "REAL PEOPLE";
}

.story-head h2::after {
  content: "REAL STORIES";
}

.story-carousel {
  position: relative;
  z-index: 3;
  width: 100%;
  overflow: visible;
  mask-image: none;
  -webkit-mask-image: none;
}

.story-track {
  display: flex;
  align-items: center;
  gap: clamp(26px, 3vw, 46px);
  width: max-content;
  padding: 0;
  animation: realStoriesSpinLeft 34s linear infinite;
  will-change: transform;
}

.story-carousel:hover .story-track {
  animation-play-state: running;
}

@keyframes realStoriesSpinLeft {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.story-card {
  position: relative;
  flex: 0 0 clamp(330px, 30vw, 470px);
  height: clamp(430px, 39vw, 570px);
  border-radius: clamp(24px, 2.8vw, 38px);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.14);
  transform-origin: center center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.story-card:nth-child(6n + 1) { transform: rotate(-7deg); }
.story-card:nth-child(6n + 2) { transform: rotate(8deg); }
.story-card:nth-child(6n + 3) { transform: rotate(-4deg); }
.story-card:nth-child(6n + 4) { transform: rotate(6deg); }
.story-card:nth-child(6n + 5) { transform: rotate(-8deg); }
.story-card:nth-child(6n + 6) { transform: rotate(5deg); }

.story-card:hover {
  transform: translateY(-10px) rotate(0deg) scale(1.015);
  box-shadow: 0 36px 90px rgba(0, 0, 0, 0.18);
}

.story-card.quote {
  padding: clamp(30px, 3vw, 46px);
  justify-content: space-between;
}

.story-card.quote p {
  max-width: 92%;
  font-size: clamp(1.45rem, 2.05vw, 2.68rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.story-card.quote b {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  font-size: 14px;
}

.story-card.quote span {
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.08em;
}

.story-card.media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.66), transparent);
}

.story-card.media span {
  z-index: 2;
  left: 24px;
  bottom: 24px;
  background: transparent;
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  font-size: 12px;
  line-height: 1.25;
}

/* --- Lower large headings: cleaner proportions --- */
.benefit-copy h2 {
  font-size: clamp(3.1rem, 7.8vw, 9.5rem);
  line-height: 0.84;
  letter-spacing: -0.105em;
}

.product-info h2 {
  font-size: clamp(3.5rem, 6.8vw, 7.8rem);
  line-height: 0.84;
  letter-spacing: -0.1em;
}

.product-info h3 {
  line-height: 1;
  letter-spacing: -0.055em;
}

@media (max-width: 900px) {
  .hero-bottle {
    width: 132vw;
    max-height: 86vh;
  }

  .hero-copy h1 {
    font-size: clamp(4rem, 22vw, 8rem);
    line-height: 0.82;
    white-space: normal;
  }

  .formulated-grid {
    grid-template-columns: 1fr;
  }

  .form-text p {
    font-size: clamp(2rem, 10vw, 4.2rem);
    line-height: 0.98;
  }

  .stories {
    min-height: 88vh;
  }

  .story-head h2::before,
  .story-head h2::after {
    font-size: clamp(4rem, 20vw, 8.4rem);
    line-height: 0.78;
  }

  .story-track {
    gap: 20px;
    animation-duration: 30s;
  }

  .story-card {
    flex-basis: 76vw;
    height: 430px;
  }

  .story-card.quote p {
    font-size: clamp(1.45rem, 6.7vw, 2.35rem);
    line-height: 1.05;
  }

  .benefit-copy h2 {
    font-size: clamp(3rem, 14vw, 6.4rem);
  }
}

/* =========================================================
   V5 BALANCED REFINEMENT
   - Typography dibuat lebih lega, tidak terlalu besar, dan tidak super-bold
   - Real Stories bergerak rata ke kiri dengan semua kartu condong satu arah
   ========================================================= */

:root {
  --display-weight: 760;
  --heading-tight: -0.085em;
}

/* Kurangi rasa penuh pada semua heading besar tanpa mengubah layout section */
.hero-copy h1,
.form-title p,
.form-title h2,
.form-text p,
.story-head h2::before,
.story-head h2::after,
.benefit-copy h2,
.product-info h2,
.footer h2,
.menu-links a,
.popup-card h2 {
  font-weight: var(--display-weight) !important;
  letter-spacing: var(--heading-tight) !important;
}

/* HERO: tetap di belakang produk, tapi tidak memenuhi layar */
.hero-copy h1 {
  font-size: clamp(4.6rem, 13.6vw, 13.2rem) !important;
  line-height: 0.84 !important;
  max-width: 92vw;
  color: rgba(5, 5, 5, 0.74) !important;
}

.hero-bottle {
  width: min(62vw, 920px) !important;
}

/* FORMULATED: lebih premium dan breathable */
.formulated {
  padding-top: clamp(108px, 11vw, 168px) !important;
  padding-bottom: clamp(108px, 11vw, 168px) !important;
}

.formulated-grid {
  grid-template-columns: minmax(250px, 31%) minmax(0, 1fr) !important;
  gap: clamp(70px, 9vw, 150px) !important;
}

.form-title p {
  font-size: clamp(2rem, 4.15vw, 5.35rem) !important;
  line-height: 0.98 !important;
}

.form-title h2 {
  font-size: clamp(3rem, 6.45vw, 8.2rem) !important;
  line-height: 0.9 !important;
}

.form-text h3 {
  font-weight: 700 !important;
}

.form-text p {
  max-width: 880px !important;
  font-size: clamp(1.95rem, 4.05vw, 5.25rem) !important;
  line-height: 1.01 !important;
}

.form-text img {
  width: clamp(60px, 7.2vw, 112px) !important;
  height: clamp(42px, 5.3vw, 78px) !important;
  margin: 0 0.16em -0.07em !important;
}

/* REAL STORIES: piringan/rail kiri, semua kartu satu arah, tidak zig-zag */
.stories {
  min-height: 96vh !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(215, 255, 32, 0.26) 0 10%, rgba(215, 255, 32, 0.13) 11% 31%, rgba(215, 255, 32, 0) 50%),
    #f8f8f3 !important;
}

.story-head h2::before,
.story-head h2::after {
  font-size: clamp(4.6rem, 10.7vw, 13.4rem) !important;
  line-height: 0.88 !important;
  color: rgba(5, 5, 5, 0.66) !important;
}

.story-carousel {
  overflow: hidden !important;
  padding: 54px 0 64px !important;
  transform: rotate(-2.2deg);
  transform-origin: center center;
}

.story-track {
  gap: clamp(28px, 3vw, 44px) !important;
  padding: 0 0 0 5vw !important;
  animation: realStoriesDiscLeft 36s linear infinite !important;
}

@keyframes realStoriesDiscLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

.story-card,
.story-card:nth-child(6n + 1),
.story-card:nth-child(6n + 2),
.story-card:nth-child(6n + 3),
.story-card:nth-child(6n + 4),
.story-card:nth-child(6n + 5),
.story-card:nth-child(6n + 6) {
  flex-basis: clamp(315px, 27vw, 420px) !important;
  height: clamp(390px, 34vw, 510px) !important;
  border-radius: clamp(24px, 2.4vw, 34px) !important;
  transform: rotate(-6deg) !important;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.12) !important;
}

.story-card:hover {
  transform: translateY(-8px) rotate(-6deg) scale(1.015) !important;
}

.story-card.quote {
  padding: clamp(26px, 2.45vw, 38px) !important;
}

.story-card.quote p {
  max-width: 94% !important;
  font-size: clamp(1.26rem, 1.72vw, 2.18rem) !important;
  font-weight: 720 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.028em !important;
}

.story-card.quote b {
  width: 46px !important;
  height: 46px !important;
  flex-basis: 46px !important;
  font-size: 13px !important;
  font-weight: 720 !important;
}

.story-card.quote span {
  font-size: 10.5px !important;
  font-weight: 720 !important;
  letter-spacing: 0.075em !important;
}

.story-card.media span {
  font-weight: 720 !important;
}

/* Section besar bawah: proporsi lebih aman */
.benefit-copy h2 {
  font-size: clamp(2.85rem, 6.55vw, 8.25rem) !important;
  line-height: 0.94 !important;
}

.product-info h2 {
  font-size: clamp(3rem, 5.85vw, 6.9rem) !important;
  line-height: 0.92 !important;
}

.product-info h3 {
  font-weight: 760 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.02 !important;
}

.footer h2 {
  font-size: clamp(3.75rem, 7.2vw, 8.2rem) !important;
  line-height: 0.84 !important;
}

/* Mobile tetap besar, tapi tidak pecah dan tidak terlalu bold */
@media (max-width: 900px) {
  .hero-copy h1 {
    font-size: clamp(3.7rem, 17.5vw, 6.6rem) !important;
    line-height: 0.92 !important;
    max-width: 94vw;
  }

  .formulated-grid {
    gap: 42px !important;
  }

  .form-title p {
    font-size: clamp(2.35rem, 10.5vw, 4.6rem) !important;
    line-height: 0.98 !important;
  }

  .form-title h2 {
    font-size: clamp(3rem, 13vw, 5.6rem) !important;
    line-height: 0.9 !important;
  }

  .form-text p {
    font-size: clamp(1.85rem, 8.6vw, 3.45rem) !important;
    line-height: 1.04 !important;
  }

  .story-head h2::before,
  .story-head h2::after {
    font-size: clamp(3.55rem, 16.5vw, 6.7rem) !important;
    line-height: 0.88 !important;
  }

  .story-carousel {
    padding: 44px 0 54px !important;
    transform: rotate(-1.5deg);
  }

  .story-track {
    gap: 22px !important;
    animation-duration: 32s !important;
  }

  .story-card,
  .story-card:nth-child(6n + 1),
  .story-card:nth-child(6n + 2),
  .story-card:nth-child(6n + 3),
  .story-card:nth-child(6n + 4),
  .story-card:nth-child(6n + 5),
  .story-card:nth-child(6n + 6) {
    flex-basis: 72vw !important;
    height: 390px !important;
    transform: rotate(-5deg) !important;
  }

  .story-card.quote p {
    font-size: clamp(1.3rem, 5.7vw, 2rem) !important;
    line-height: 1.12 !important;
  }

  .benefit-copy h2 {
    font-size: clamp(2.65rem, 11.8vw, 5.35rem) !important;
    line-height: 0.94 !important;
  }

  .product-info h2 {
    font-size: clamp(3rem, 12.4vw, 5.5rem) !important;
    line-height: 0.92 !important;
  }
}