/* ═══════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════ */
:root{
  --cyan:#16A6C4; --cyan-dk:#0E7E96; --cyan-lt:#E2F6FB;
  --coral:#E0532F; --coral-lt:#FBEFEA;
  --lime:#36AC62;  --lime-lt:#E2F5E9;
  --energy:#E6C21F; --energy-lt:#FBF6E2;
  /* neon accents — used in the hero only; fade out on scroll */
  --cyan-neon:#00D4FF; --lime-neon:#22F07A; --coral-neon:#FF5A33; --energy-neon:#FFE000;
  --purple:#8B5CF6; --purple-lt:#F3F0FF;
  --pink:#FF3DA8;   --pink-lt:#FFF0F8;
  /* matte/muted counterparts — used once the page has "calmed down" past the hero */
  --cyan-matte:#3FA8C2; --coral-matte:#D9694A; --lime-matte:#4FA868; --energy-matte:#C9A93C;
  --navy:#061830;  --ink:#0F172A;
  --sub:#4A5568;   --faint:#94A3B8;
  --bg:#FDFBF6;    --off:#F6F1E7;    --warm:#FCEFE2;
  --mid:#DDD5C4;
  --r-sm:10px; --r-md:20px; --r-lg:32px;
  --sh:0 8px 40px rgba(0,200,240,.18);
  --sh-coral:0 8px 32px rgba(255,69,32,.18);
  --sh-lime:0 8px 32px rgba(34,212,90,.18);
  --ease:cubic-bezier(.4,0,.2,1);
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --spring:cubic-bezier(.175,.885,.32,1.275);
}
/* Once the visitor scrolls past the hero, the page "calms down": neon hero accents
   fade toward their matte counterparts. Pure functional UI elements (buttons, nav)
   intentionally keep full color for usability — only ambient/decorative neon dims. */
body.scrolled .hero-glow{opacity:.3;filter:saturate(.5);}
body.scrolled .hero-dots{opacity:.22;}
.hero-dots{transition:opacity .6s var(--ease);}
body.scrolled .h1-line:nth-child(2){filter:saturate(.55) brightness(.92);}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ═══════════════════════════════════════════════════
   PAGE TRANSITION WIPE
═══════════════════════════════════════════════════ */
#wipe{
  position:fixed;inset:0;z-index:9999;
  background:var(--cyan);
  transform:scaleX(0);transform-origin:left;
  pointer-events:none;
}
#wipe.in{animation:wipe-in .45s var(--ease) forwards;}
#wipe.out{animation:wipe-out .45s var(--ease) .08s forwards;}
@keyframes wipe-in{to{transform:scaleX(1);}}
@keyframes wipe-out{from{transform:scaleX(1);transform-origin:right;}to{transform:scaleX(0);transform-origin:right;}}

/* LIQUID color-wipe — used for the "Our Products" jump specifically.
   A growing/shrinking color blob instead of a flat linear sweep. */
#wipe.liquid{
  background:linear-gradient(120deg,var(--cyan) 0%,var(--lime) 50%,var(--energy) 100%);
  transform:none;clip-path:circle(0% at 88% 50%);
}
#wipe.liquid.in{animation:wipe-liquid-in .6s var(--spring) forwards;}
#wipe.liquid.out{animation:wipe-liquid-out .6s var(--spring) .06s forwards;}
@keyframes wipe-liquid-in{from{clip-path:circle(0% at 88% 50%);}to{clip-path:circle(145% at 88% 50%);}}
@keyframes wipe-liquid-out{from{clip-path:circle(145% at 12% 50%);}to{clip-path:circle(0% at 12% 50%);}}

/* Apple-style zoom + cross-fade used for ALL page navigations */
.page.soft-in{animation:pageSoftIn .55s var(--ease) both;}
@keyframes pageSoftIn{
  from{opacity:0;transform:scale(1.025) translateY(10px);}
  to{opacity:1;transform:none;}
}
.page.pg-out{animation:pgOut .3s var(--ease) both;}
@keyframes pgOut{
  from{opacity:1;transform:translateY(0);}
  to{opacity:0;transform:translateY(-10px);}
}
.page.pg-in{animation:pgIn .78s var(--ease) both;}
@keyframes pgIn{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:translateY(0);}
}
/* quiet, premium page transition — a deep-navy veil fades in, page swaps, veil fades out */
#wipe.veil{background:#0B1B2E;opacity:0;will-change:opacity;}
#wipe.veil.go{animation:veilCover .9s var(--ease) forwards;}
@keyframes veilCover{
  0%{opacity:0;}
  36%{opacity:1;}
  60%{opacity:1;}
  100%{opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .page.soft-in,.page.pg-in,.page.pg-out{animation:none;}
  #wipe.veil.go{animation:none;display:none;}
}

/* ═══════════════════════════════════════════════════
   NAV
═══════════════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:68px;background:transparent;
}
.n-inner{max-width:100%;margin:0;height:100%;padding:0 20px;display:flex;align-items:center;justify-content:center;position:relative;}
/* the cluster holds the logo + links; it spreads full-width at the top and
   collapses into a centered pill once the visitor scrolls (Wolverine-style) */
.n-cluster{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;max-width:1180px;
  padding:9px 12px;border-radius:999px;
  background:transparent;border:1px solid transparent;
  transition:max-width .55s var(--ease),background .45s var(--ease),border-color .45s,
             padding .45s var(--ease),gap .45s var(--ease),box-shadow .45s;
}
.n-logo{display:flex;align-items:center;gap:10px;cursor:pointer;}
.n-drop{width:30px;height:30px;flex-shrink:0;}
.n-word{
  font-size:.98rem;font-weight:800;letter-spacing:-.3px;color:#fff;white-space:nowrap;
  max-width:170px;overflow:hidden;
  transition:max-width .5s var(--ease),opacity .35s var(--ease),margin .5s var(--ease);
}
.n-word span{color:var(--cyan);}
.n-links{display:flex;align-items:center;gap:4px;list-style:none;}
.n-btn{
  padding:.45rem 1rem;border-radius:999px;
  font-size:.83rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:color .2s,background .2s;
}
.n-btn:hover{color:#fff;}
.n-btn.active{color:#fff;font-weight:600;}
/* collapsed: centered dark pill, logo mark only */
#nav.collapsed .n-cluster{
  max-width:max-content;justify-content:center;gap:16px;
  background:rgba(13,24,38,.92);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-color:rgba(255,255,255,.10);
  padding:9px 12px 9px 16px;
  box-shadow:0 12px 38px rgba(0,0,0,.30);
}
#nav.collapsed .n-word{max-width:0;opacity:0;margin-left:-10px;}
.ham{display:none;flex-direction:column;gap:5px;padding:6px;}
.ham span{width:22px;height:1.5px;background:#fff;border-radius:2px;transition:.3s;}
.ham.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.ham.open span:nth-child(2){opacity:0;}
.ham.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
#mob{
  display:none;position:fixed;top:68px;left:0;right:0;bottom:0;
  background:rgba(255,255,255,.97);backdrop-filter:blur(20px);
  z-index:850;padding:3rem 24px;flex-direction:column;gap:2rem;
}
#mob.open{display:flex;}
html:not(.js) #mob:target{display:flex;}
.mob-close{position:absolute;top:.4rem;right:22px;font-size:1.5rem;color:var(--sub);cursor:pointer;padding:.4rem;line-height:1;}
a.mob-btn{display:block;text-decoration:none;}
.lang-flag{display:inline-flex;align-items:center;background:none;border:none;cursor:pointer;line-height:1;padding:.3rem;border-radius:6px;transition:transform .2s,background .2s;}
.flag-img{display:block;width:26px;height:auto;border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.35);}
.n-flag{position:absolute;right:16px;top:50%;transform:translateY(-50%);z-index:6;}
.mob-flag .flag-img{width:40px;}
.lang-flag:hover{transform:scale(1.15);background:rgba(255,255,255,.12);}
.mob-flag{font-size:1.8rem;align-self:flex-start;margin-top:.5rem;}
.mob-btn{font-size:1.4rem;font-weight:700;color:var(--ink);text-align:left;padding:.5rem 0;border-bottom:1px solid var(--mid);}
.mob-btn.active{color:var(--cyan);}

/* ═══════════════════════════════════════════════════
   PAGE ENGINE
═══════════════════════════════════════════════════ */
.page{display:none;min-height:100vh;padding-top:0;}
.page.active{display:block;}

/* ═══════════════════════════════════════════════════
   UNIVERSAL REVEAL ENGINE
═══════════════════════════════════════════════════ */
[data-reveal]{
  opacity:0;transform:translateY(42px);filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.15s cubic-bezier(.22,1,.36,1),filter 1s ease;
}
[data-reveal="left"]{transform:translateX(-55px);}
[data-reveal="right"]{transform:translateX(55px);}
[data-reveal="scale"]{transform:scale(.88);}
[data-reveal="fade"]{transform:none;}
[data-reveal="up-sm"]{transform:translateY(25px);}
[data-reveal].revealed{opacity:1;transform:none;filter:none;}
[data-delay="1"]{transition-delay:.1s;}
[data-delay="2"]{transition-delay:.18s;}
[data-delay="3"]{transition-delay:.28s;}
[data-delay="4"]{transition-delay:.38s;}
[data-delay="5"]{transition-delay:.48s;}
[data-delay="6"]{transition-delay:.58s;}

/* ═══════════════════════════════════════════════════
   HERO — 0% Sugar / 100% Flavor
═══════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  background:#071428;
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:96px 0 8vh;
}
.hero-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 25%,rgba(0,200,240,.32) 0%,transparent 60%),
             radial-gradient(ellipse 45% 45% at 85% 75%,rgba(255,69,32,.22) 0%,transparent 55%),
             radial-gradient(ellipse 40% 40% at 8% 65%,rgba(255,224,0,.14) 0%,transparent 55%),
             radial-gradient(ellipse 35% 35% at 70% 15%,rgba(139,92,246,.16) 0%,transparent 50%);
}
/* animated glow pulse */
@keyframes glowPulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.hero-glow{animation:glowPulse 5s ease-in-out infinite;transition:opacity .6s var(--ease),filter .6s var(--ease);}
/* particles */
.hero-dots{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.hdot{position:absolute;border-radius:50%;animation:hdrift linear infinite;}
@keyframes hdrift{0%{transform:translateY(105vh) scale(0);opacity:0;}8%{opacity:1;}90%{opacity:.4;}100%{transform:translateY(-15vh) scale(1);opacity:0;}}
/* sachet row */
.hero-sachets{
  position:relative;z-index:3;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(-16px,1.5vw,0px);height:clamp(200px,35vh,300px);
  margin-bottom:clamp(1.5rem,4vh,2.5rem);
}
.hs{
  height:100%;width:auto;object-fit:contain;
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.6));
  transform:translateY(40px);opacity:0;
  animation:hsUp 1s var(--ease) forwards;
  animation-delay:var(--d);
  transition:transform .35s var(--ease);
}
.hs:hover{transform:translateY(-10px) scale(1.05)!important;}
@keyframes hsUp{to{transform:translateY(0);opacity:1;}}

/* single full-width showcase image (replaces floating sachet row) */
.hero-showcase-wrap{
  position:relative;z-index:3;width:100%;
  display:flex;justify-content:center;
  padding:0;
  margin-bottom:clamp(1.2rem,3vh,2rem);
}
.hero-showcase{
  width:100%;max-width:none;
  /* full-bleed navy image — tiny side feather + soft top/bottom blend into the hero */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%),linear-gradient(180deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  opacity:0;transform:translateY(30px) scale(.98);
  animation:showcaseIn 1.1s var(--ease) .3s forwards;
}
.hero-showcase img{
  width:100%;max-width:none;height:auto;display:block;
  filter:drop-shadow(0 18px 50px rgba(0,0,0,.45));
  transform-origin:center;
  animation:heroFloat 20s ease-in-out 1.8s infinite;
}
@keyframes heroFloat{0%,100%{transform:scale(1) translateY(0);}50%{transform:scale(1.04) translateY(-1.1%);}}
@media (prefers-reduced-motion: reduce){.hero-showcase img{animation:none;}}
@keyframes showcaseIn{to{opacity:1;transform:none;}}
/* tagline replacing "going viral" label */
.hero-tagline{
  display:inline-block;font-size:clamp(.85rem,1.6vw,1.05rem);font-weight:600;letter-spacing:.5px;
  color:rgba(255,255,255,.55);margin-bottom:1.2rem;
  opacity:0;animation:fadeUp .9s var(--ease) .8s forwards;
}
.hero-tagline .accent{
  background:linear-gradient(90deg,#00D4FF,#7BFFB0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:800;
}
/* HERO HEADLINE — character reveal */
.hero-text{position:relative;z-index:3;text-align:center;padding:0 24px;max-width:900px;}
.hero-label{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:3px;
  text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1.2rem;
  opacity:0;animation:fadeUp .9s var(--ease) .8s forwards;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.hero-h1{
  line-height:1.0;margin-bottom:1.3rem;
}
.h1-line{
  display:block;overflow:hidden;padding-bottom:.08em;
  font-size:clamp(4rem,10vw,9rem);font-weight:900;
  letter-spacing:clamp(-3px,-0.04em,-5px);
}
.h1-inner{display:block;transform:translateY(115%);animation:h1Unwrap 1.05s cubic-bezier(.16,1,.3,1) forwards;}
.h1-line:nth-child(1) .h1-inner{color:#fff;animation-delay:.45s;}
.h1-line:nth-child(2) .h1-inner{
  background:linear-gradient(90deg,#00D4FF,#7BFFB0,#FFD60A,#FF6B35);
  background-size:200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:h1Unwrap 1.05s cubic-bezier(.16,1,.3,1) .62s forwards, shimmer 5s 1.9s ease-in-out infinite;
}
@keyframes h1Unwrap{to{transform:translateY(0);}}
@keyframes shimmer{0%,100%{background-position:0%}50%{background-position:100%}}
.hero-p{
  font-size:clamp(.9rem,1.8vw,1.15rem);color:rgba(255,255,255,.6);
  line-height:1.75;max-width:480px;margin:0 auto;
  opacity:0;animation:fadeUp .9s var(--ease) 1s forwards;
}
.hero-scroll{
  position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  color:rgba(255,255,255,.3);font-size:.65rem;letter-spacing:2px;text-transform:uppercase;
  animation:bounce 2.5s ease-in-out infinite;
}
@keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-9px);}}
.hero-scroll svg{width:18px;opacity:.4;}

/* ═══════════════════════════════════════════════════
   STICKY STORY PANELS
═══════════════════════════════════════════════════ */
.story{background:var(--bg);}
.story-pin{
  position:sticky;top:68px;
  height:calc(100svh - 68px);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.story-panel{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:0 24px;opacity:0;transform:translateY(35px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);pointer-events:none;
}
.story-panel.sp-active{opacity:1;transform:none;pointer-events:auto;}
.sp-inner{max-width:800px;text-align:center;}
.sp-chip{display:inline-block;padding:.3rem .9rem;border-radius:980px;font-size:.72rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:1.2rem;}
.sp-chip.cyan{background:var(--cyan-lt);color:var(--cyan-dk);}
.sp-chip.coral{background:var(--coral-lt);color:var(--coral);}
.sp-chip.lime{background:var(--lime-lt);color:#3A8A35;}
.sp-chip.energy{background:var(--energy-lt);color:#8B6000;}
.sp-h{font-size:clamp(2.2rem,5vw,4.5rem);font-weight:900;letter-spacing:-2px;line-height:1.05;color:var(--navy);margin-bottom:1.2rem;}
.sp-h .em{color:var(--cyan);}
.sp-h .em-e{color:#D4A200;}
.sp-p{font-size:clamp(.9rem,1.6vw,1.1rem);color:var(--sub);line-height:1.85;max-width:600px;margin:0 auto;}
.story-spacer{height:250vh;}
/* progress dots for story */
.story-nav{
  position:sticky;top:calc(56px + 50%);transform:translateY(-50%);
  z-index:10;right:0;float:right;margin-right:28px;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.s-dot{width:7px;height:7px;border-radius:50%;background:var(--mid);transition:.35s;pointer-events:auto;cursor:pointer;}
.s-dot.on{background:var(--cyan);height:22px;border-radius:4px;}

/* ═══════════════════════════════════════════════════
   STATS COUNTER ROW
═══════════════════════════════════════════════════ */
.stats-section{background:var(--off);padding:clamp(60px,8vh,100px) 24px;overflow:hidden;position:relative;}
.stats-section::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,180,216,.1),transparent 60%);
  pointer-events:none;
}
.stats-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(6,24,48,.08);}
.stat-block{
  background:var(--off);padding:3rem 1.5rem;text-align:center;
  position:relative;overflow:hidden;cursor:default;
  transition:background .3s;
}
.stat-block:hover{background:var(--bg);}
/* animated underline */
.stat-block::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--lime));transition:width .8s var(--ease);}
.stat-block.revealed::after{width:55%;}
/* shimmer sweep */
.stat-block::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .6s;pointer-events:none;}
.stat-block:hover::before{left:150%;}
.stat-n{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-2px;color:var(--navy);line-height:1;margin-bottom:.5rem;display:flex;align-items:baseline;justify-content:center;gap:2px;}
.stat-n .suf{font-size:clamp(1.4rem,3vw,2rem);font-weight:700;}
.stat-lbl{font-size:.8rem;color:var(--sub);line-height:1.55;font-weight:400;}

/* ═══════════════════════════════════════════════════
   FEATURE SECTIONS
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   IDLE "PAINTING FLAVOR RIBBONS" — ambient animation
   Plays only while the visitor is not actively scrolling.
═══════════════════════════════════════════════════ */
.feat-zone{position:relative;overflow:hidden;background:var(--bg);}
.feat-ribbons{position:absolute;inset:-10%;z-index:0;pointer-events:none;transform:rotate(-11deg) scale(1.4);transform-origin:center;}
.feat-ribbons svg{width:100%;height:100%;display:block;}
/* flowing painterly lines — always on, never pause, thinner (~2/3) */
.ribbon-path{
  fill:none;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;
  opacity:.4;
  stroke-dasharray:330 70;
  animation:ribbonFlow 10s linear infinite;
  will-change:stroke-dashoffset;
}
.rp1{stroke:var(--cyan);animation-duration:10s;}
.rp2{stroke:var(--lime);animation-duration:13s;}
.rp3{stroke:var(--coral);animation-duration:11s;}
.rp4{stroke:var(--energy);animation-duration:14s;}
.rp5{stroke:var(--cyan);animation-duration:12s;}
.rp6{stroke:var(--lime);animation-duration:15s;}
.rp7{stroke:var(--coral);animation-duration:9s;}
@keyframes ribbonFlow{ to{ stroke-dashoffset:-400; } }
@media (prefers-reduced-motion: reduce){
  .ribbon-path{animation:none;stroke-dasharray:none;opacity:.22;}
}

.feat{padding:clamp(72px,9vh,120px) 24px;position:relative;overflow:hidden;z-index:1;}
.feat.bg-off,.feat.bg-warm{background:transparent;}
/* floating blob bg decoration */
.feat-blob{position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;}
.feat-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1.12fr .88fr;gap:64px;align-items:center;position:relative;z-index:1;}
.feat-inner.rev{direction:rtl;}
.feat-inner.rev>*{direction:ltr;}
.feat-txt .sp-chip{margin-bottom:1rem;}
.feat-h{font-size:clamp(2.2rem,3.7vw,3.5rem);font-weight:800;letter-spacing:-1.4px;line-height:1.08;color:var(--navy);margin:.9rem 0 1.3rem;}
.feat-p{font-size:1.1rem;color:var(--sub);line-height:1.85;margin-bottom:2rem;}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;}
.feat-list li{display:flex;align-items:flex-start;gap:.75rem;font-size:1rem;color:var(--sub);}
.chk{width:20px;height:20px;flex-shrink:0;margin-top:1px;}
/* visual card */
.feat-vis{
  background:transparent;
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  position:relative;
}
.feat-vis.dark{background:transparent;}
.feat-vis img{
  height:58%;width:auto;object-fit:contain;
  transition:transform .5s var(--ease),filter .5s;
  filter:drop-shadow(0 22px 46px rgba(0,0,0,.22));
}
.feat-vis img.feat-doc{height:auto;width:auto;max-height:min(74vh,560px);max-width:100%;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.20);filter:none;}
.feat-vis:hover img{transform:scale(1.06) translateY(-8px);}
.feat-glow-abs{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;opacity:.4;}

/* ═══════════════════════════════════════════════════
   WHO IT'S FOR
═══════════════════════════════════════════════════ */
.for-sec{padding:clamp(80px,10vh,120px) 24px;background:var(--bg);}
.for-hdr{text-align:center;max-width:680px;margin:0 auto 4rem;}
.for-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.for-card{
  padding:2.5rem 2rem;border-radius:var(--r-lg);
  background:var(--off);border:1px solid var(--mid);
  transition:transform .35s var(--bounce),box-shadow .35s,background .3s;
}
.for-card:hover{transform:translateY(-10px) scale(1.01);box-shadow:var(--sh);background:var(--bg);}
.for-iw{
  width:52px;height:52px;border-radius:14px;
  background:var(--cyan-lt);
  display:flex;align-items:center;justify-content:center;margin-bottom:1.3rem;
  transition:transform .35s var(--bounce),background .3s;
}
.for-card:hover .for-iw{transform:scale(1.12) rotate(-5deg);}
.for-iw svg{width:26px;height:26px;stroke:var(--cyan-dk);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.for-card:nth-child(2) .for-iw{background:var(--coral-lt);}
.for-card:nth-child(2) .for-iw svg{stroke:var(--coral);}
.for-card:nth-child(3) .for-iw{background:var(--lime-lt);}
.for-card:nth-child(3) .for-iw svg{stroke:var(--lime);}
.for-title{font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:.6rem;letter-spacing:-.2px;}
.for-desc{font-size:.88rem;color:var(--sub);line-height:1.75;}

/* ═══════════════════════════════════════════════════
   SACHET GALLERY (home page, after hero)
═══════════════════════════════════════════════════ */
.sachet-gallery{
  padding:clamp(72px,9vh,110px) 24px;
  background:var(--bg);
  position:relative;overflow:hidden;
}
.sachet-gallery::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 80% 50%,rgba(0,180,216,.06),transparent 65%),
             radial-gradient(ellipse 40% 40% at 10% 70%,rgba(109,191,103,.06),transparent 60%);
}
.sg-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center;position:relative;z-index:1;}
.sg-txt .sp-chip{margin-bottom:1rem;}
.sg-h{font-size:clamp(1.9rem,3.2vw,3rem);font-weight:800;letter-spacing:-1.2px;line-height:1.1;color:var(--navy);margin:.8rem 0 1.2rem;}
.sg-p{font-size:.98rem;color:var(--sub);line-height:1.85;margin-bottom:2rem;}
.sg-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:10px;
}
.sg-item{
  background:linear-gradient(135deg,var(--off),var(--cyan-lt));
  border-radius:14px;padding:10px;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;overflow:hidden;
  transition:transform .4s var(--bounce),box-shadow .35s,opacity .4s;
  cursor:default;
  opacity:0;
  animation:sgPop .5s var(--bounce) forwards;
  animation-delay:var(--sg-d,0s);
}
.sg-item.energy-bg{background:linear-gradient(135deg,#0D1B2A,#1A2C40);}
.sg-item.aloe-bg{background:linear-gradient(135deg,var(--lime-lt),#c6f0c2);}
.sg-item.tea-bg{background:linear-gradient(135deg,#E8F3E8,#d4eed4);}
.sg-item img{width:100%;height:100%;object-fit:contain;transition:transform .4s var(--ease);}
.sg-item:hover{transform:scale(1.1) translateY(-5px);box-shadow:0 16px 40px rgba(0,180,216,.18);z-index:2;}
.sg-item:hover img{transform:scale(1.12);}
@keyframes sgPop{from{opacity:0;transform:scale(.75);}to{opacity:1;transform:scale(1);}}
/* featured (larger) slot */
.sg-item.big{grid-column:span 2;grid-row:span 2;aspect-ratio:1;}
.sg-item.big img{height:80%;width:auto;}
@media(max-width:900px){.sg-inner{grid-template-columns:1fr;gap:3rem;}.sg-grid{grid-template-columns:repeat(4,1fr);}}
@media(max-width:640px){.sg-grid{grid-template-columns:repeat(3,1fr);}}

/* ═══════════════════════════════════════════════════
   NEW ARRIVALS — INFINITE MARQUEE CAROUSEL
═══════════════════════════════════════════════════ */
.arrivals{background:var(--off);padding:clamp(80px,10vh,120px) 0;}
.arr-hdr{text-align:center;padding:0 24px;margin-bottom:3rem;}

/* infinite marquee */
.inf-marquee-wrap{overflow:hidden;padding:16px 0 32px;position:relative;}
/* soft fade edges */
.inf-marquee-wrap::before,.inf-marquee-wrap::after{
  content:'';position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;
}
.inf-marquee-wrap::before{left:0;background:linear-gradient(to right,var(--off),transparent);}
.inf-marquee-wrap::after{right:0;background:linear-gradient(to left,var(--off),transparent);}
.inf-track{
  display:flex;gap:20px;width:max-content;
  animation:infScroll 65s linear infinite;
  padding:8px 0;
}
.inf-track:hover{animation-play-state:paused;}
@keyframes infScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}

/* card styles (same look, no fixed width constraint) */
.arr-card{
  flex:0 0 clamp(220px,26vw,280px);background:var(--bg);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.06);
  border:1px solid var(--mid);transition:transform .35s var(--bounce),box-shadow .35s;
  cursor:pointer;position:relative;
}
.arr-card:hover{transform:translateY(-10px) scale(1.03);box-shadow:var(--sh);}
.arr-new{
  position:absolute;top:12px;right:12px;z-index:2;
  background:var(--coral);color:#fff;
  font-size:.62rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;
  padding:.22rem .65rem;border-radius:980px;
}
.arr-new.energy-badge{background:var(--energy);color:var(--ink);}
.arr-new.aloe-badge{background:var(--lime);color:#fff;}
.arr-new.tea-badge{background:#27ae60;color:#fff;}
.arr-img{height:200px;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden;}
.arr-img.classic-bg{background:linear-gradient(135deg,var(--off),var(--cyan-lt));}
.arr-img.energy-bg{background:linear-gradient(135deg,#0D1B2A,#162030);}
.arr-img.aloe-bg{background:linear-gradient(135deg,var(--lime-lt),#c6f0c2);}
.arr-img.tea-bg{background:linear-gradient(135deg,#E8F3E8,#d0efd0);}
.arr-img img{height:90%;width:auto;max-height:190px;object-fit:contain;transition:transform .4s var(--ease);}
.arr-card:hover .arr-img img{transform:scale(1.1) translateY(-8px);}
.arr-body{padding:1.3rem;}
.arr-name{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:.22rem;letter-spacing:-.2px;}
.arr-sub{font-size:.72rem;color:var(--faint);margin-bottom:.7rem;}
.arr-chips{display:flex;gap:.3rem;flex-wrap:wrap;}
.chip{font-size:.58rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:.16rem .5rem;border-radius:980px;}
.ch-g{background:#E4F5E5;color:#1E7A25;}
.ch-b{background:#E0F0FF;color:#155DB5;}
.ch-o{background:#FFF0E6;color:#B54800;}
.ch-e{background:#FFFBE0;color:#8B6000;}

/* ═══════════════════════════════════════════════════
   CATEGORY SWITCH — FLASH + FLIP ENTRANCE
═══════════════════════════════════════════════════ */
/* ripple overlay on product grid */
.p-cat{display:none;position:relative;}
.p-cat.vis{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:20px;}
.cat-flash{
  position:fixed;inset:0;pointer-events:none;z-index:800;
  opacity:0;border-radius:0;
  transition:opacity .35s;
  background:radial-gradient(ellipse at var(--fx,50%) var(--fy,50%),rgba(0,180,216,.22) 0%,transparent 70%);
}
.cat-flash.active{animation:catFlash .55s var(--ease) forwards;}
@keyframes catFlash{
  0%{opacity:0;transform:scale(.6);}
  30%{opacity:1;}
  100%{opacity:0;transform:scale(1.4);}
}
.cat-flash.coral{background:radial-gradient(ellipse at var(--fx,50%) var(--fy,50%),rgba(255,107,53,.22) 0%,transparent 70%);}
.cat-flash.lime{background:radial-gradient(ellipse at var(--fx,50%) var(--fy,50%),rgba(109,191,103,.22) 0%,transparent 70%);}
.cat-flash.energy{background:radial-gradient(ellipse at var(--fx,50%) var(--fy,50%),rgba(255,214,10,.22) 0%,transparent 70%);}

/* ═══════════════════════════════════════════════════
   MOSAIC + CTA
═══════════════════════════════════════════════════ */
.flavors-all{padding:clamp(80px,10vh,120px) 24px;background:var(--bg);}
.flavors-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.mosaic-item{
  background:linear-gradient(135deg,var(--off),var(--cyan-lt));
  border-radius:14px;padding:10px;
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;overflow:hidden;
  transition:transform .35s var(--bounce),box-shadow .35s;
}
.mosaic-item:hover{transform:scale(1.08) translateY(-4px);box-shadow:0 12px 30px rgba(0,180,216,.15);z-index:1;}
.mosaic-item.energy-item{background:linear-gradient(135deg,#0D1B2A,#1A2C40);}
.mosaic-item img{width:100%;height:100%;object-fit:contain;transition:transform .35s var(--ease);}
.mosaic-item:hover img{transform:scale(1.15);}
.fa-txt .sp-chip{margin-bottom:1rem;}
.fa-h{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;letter-spacing:-1px;line-height:1.1;color:var(--navy);margin-bottom:1.2rem;}
.fa-p{font-size:1rem;color:var(--sub);line-height:1.8;margin-bottom:2rem;}
.btn-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--cyan);color:#fff;padding:.85rem 2rem;border-radius:980px;
  font-size:.95rem;font-weight:700;letter-spacing:-.1px;
  box-shadow:0 8px 24px rgba(0,180,216,.35);
  transition:background .2s,transform .2s var(--bounce),box-shadow .2s;
}
.btn-cta:hover{background:var(--cyan-dk);transform:translateY(-3px) scale(1.02);box-shadow:0 14px 36px rgba(0,180,216,.45);}
.btn-cta svg{width:16px;height:16px;transition:transform .25s var(--bounce);}
.btn-cta:hover svg{transform:translateX(5px);}

/* ═══════════════════════════════════════════════════
   BOTTOM CTA STRIP
═══════════════════════════════════════════════════ */
.cta-strip{
  background:linear-gradient(135deg,var(--navy) 0%,#0A3D62 100%);
  padding:clamp(70px,9vh,100px) 24px;text-align:center;
  position:relative;overflow:hidden;
}
.cta-strip::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(0,180,216,.18),transparent 60%);
}
/* animated border on strip */
.cta-strip::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--lime),var(--coral),var(--cyan));
  background-size:200%;animation:borderShift 4s linear infinite;
}
@keyframes borderShift{0%{background-position:0%}100%{background-position:200%}}
.cta-strip-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.cta-strip h2{font-size:clamp(1.8rem,3.5vw,3rem);font-weight:800;color:#fff;letter-spacing:-1px;margin-bottom:1rem;line-height:1.15;}
.cta-strip p{font-size:1rem;color:rgba(255,255,255,.6);line-height:1.75;margin-bottom:2rem;}
.btn-white{
  display:inline-flex;align-items:center;gap:.5rem;
  background:#fff;color:var(--navy);padding:.85rem 2.2rem;border-radius:980px;
  font-size:.95rem;font-weight:700;letter-spacing:-.1px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  transition:transform .2s var(--bounce),box-shadow .2s;
}
.btn-white:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 36px rgba(0,0,0,.28);}

/* ═══════════════════════════════════════════════════
   PAGE HEADERS
═══════════════════════════════════════════════════ */
.page-hero{
  background:linear-gradient(145deg,#041320 0%,#083050 100%);
  padding:clamp(116px,15vh,150px) 24px clamp(50px,7vh,80px);
  text-align:center;position:relative;overflow:hidden;
}
.page-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 50% 60%,rgba(0,180,216,.16),transparent 60%);}
.ph-in{position:relative;z-index:1;max-width:680px;margin:0 auto;}
.ph-chip{display:inline-block;padding:.3rem .9rem;border-radius:980px;background:rgba(0,180,216,.18);color:#60DFFF;font-size:.72rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin-bottom:1rem;}
.ph-h{font-size:clamp(2.2rem,4.5vw,4rem);font-weight:900;letter-spacing:-1.5px;color:#fff;margin-bottom:.75rem;}
.ph-sub{font-size:.98rem;color:rgba(255,255,255,.5);line-height:1.7;}
.sec-chip{display:inline-block;padding:.3rem .9rem;border-radius:980px;font-size:.72rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:1rem;}
.sec-chip.cyan{background:var(--cyan-lt);color:var(--cyan-dk);}
.sec-h{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:800;letter-spacing:-1px;color:var(--navy);}
.sec-h .em{color:var(--cyan);}
.sec-p{font-size:.98rem;color:var(--sub);line-height:1.8;margin-top:.75rem;}

/* ═══════════════════════════════════════════════════
   PRODUCTS PAGE
═══════════════════════════════════════════════════ */
.prod-body{max-width:1200px;margin:0 auto;padding:clamp(48px,6vh,72px) 24px clamp(72px,10vh,120px);}
.cat-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2rem;}
.cat-tab{
  padding:.6rem 1.5rem;border-radius:980px;
  font-size:.84rem;font-weight:600;color:var(--sub);
  border:1.5px solid var(--mid);background:var(--bg);
  transition:border-color .2s,color .2s,transform .2s var(--bounce),box-shadow .2s;
}
.cat-tab:hover{transform:translateY(-2px);}
.cat-tab.on{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 4px 14px rgba(10,37,64,.2);}
.cat-tab.on.energy-tab{background:linear-gradient(135deg,#1A1A00,#3A3000);border-color:var(--energy);}
.cat-desc-box{margin-bottom:2.5rem;padding:1.6rem 2rem;background:var(--off);border-radius:var(--r-md);border-left:4px solid var(--cyan);display:none;}
.cat-desc-box.energy-desc-box{border-color:var(--energy);}
.cat-desc-box.vis{display:block;}
.cdb-title{font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:.4rem;}
.cdb-text{font-size:.88rem;color:var(--sub);line-height:1.7;}
.cat-tab.classic-tab:not(.on){border-color:var(--cyan);}
.cat-tab.classic-tab:not(.on):hover{color:var(--cyan-dk);}
.cat-tab.tea-tab:not(.on){border-color:#2E9E5B;}
.cat-tab.tea-tab:not(.on):hover{color:#2E9E5B;}
.cat-tab.aloe-tab:not(.on){border-color:#2BB0A0;}
.cat-tab.aloe-tab:not(.on):hover{color:#2BB0A0;}
.cat-tab.energy-tab:not(.on){border-color:var(--energy);}
.cat-tab.energy-tab:not(.on):hover{color:#8B6000;}
.cat-tab.viewall-tab:not(.on){border-color:transparent;background:linear-gradient(var(--bg),var(--bg)) padding-box,conic-gradient(from 0deg,#00C8F0,#22D45A,#FFE000,#FF6A00,#00C8F0) border-box;}
.cat-tab.viewall-tab:not(.on):hover{color:var(--navy);}
#fireHeadline{
  --b:1;--sc:1;--sat:1;display:block;text-align:center;
  font-family:"ui-rounded","Arial Rounded MT Bold","Segoe UI Rounded","Nunito",system-ui,sans-serif;
  font-weight:900;letter-spacing:-1px;line-height:1.06;
  font-size:clamp(2.3rem,5.6vw,4.6rem);margin:.15em 0 1.1rem;
  background:linear-gradient(92deg,#C40E00 0%,#FF3B00 20%,#FF8A00 40%,#FFD54A 52%,#FF8A00 64%,#FF3B00 84%,#C40E00 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  filter:drop-shadow(0 2px 7px rgba(255,80,0,.32)) brightness(var(--b)) saturate(var(--sat));
  transform:scale(var(--sc));transform-origin:center;
  animation:fireShift 3.4s ease-in-out infinite;
}
@keyframes fireShift{0%,100%{background-position:0% 0;}50%{background-position:100% 0;}}
@media (prefers-reduced-motion: reduce){#fireHeadline{animation:none;}}
.energy-warning{margin-top:.75rem;padding:.75rem 1rem;background:#FFF8E0;border-radius:8px;font-size:.8rem;color:#7A5500;line-height:1.6;border:1px solid #FFE08A;}
.p-cat.vis{display:grid;grid-template-columns:repeat(auto-fill,minmax(195px,1fr));gap:20px;}
.pc{
  background:var(--bg);border-radius:var(--r-lg);border:1px solid var(--mid);
  overflow:hidden;transition:transform .35s var(--bounce),box-shadow .35s;
  opacity:0;transform:translateY(18px) scale(.97);
}
.pc.in{opacity:1;transform:none;}
.pc:hover{transform:translateY(-7px) scale(1.01);box-shadow:var(--sh);}
.pc-img{height:175px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--off),var(--cyan-lt));padding:15px;overflow:hidden;}
.pc-img.energy-bg{background:linear-gradient(135deg,#0D1B2A,#162030);}
.pc-img img{height:90%;width:auto;max-height:158px;object-fit:contain;transition:transform .4s var(--ease);}
.pc:hover .pc-img img{transform:scale(1.1) translateY(-5px);}
.pc-body{padding:1.1rem;}
.pc-name{font-size:.9rem;font-weight:700;color:var(--navy);letter-spacing:-.2px;}
.pc-type{font-size:.72rem;color:var(--faint);margin:.2rem 0 .65rem;}

/* ═══════════════════════════════════════════════════
   SELLING POINTS PAGE
═══════════════════════════════════════════════════ */
.sp-body{max-width:1100px;margin:0 auto;padding:clamp(48px,7vh,80px) 24px clamp(72px,10vh,120px);}
.sp-intro{margin-bottom:3.5rem;max-width:620px;}
.sp-intro h2{font-size:clamp(1.6rem,3vw,2.4rem);font-weight:800;color:var(--navy);letter-spacing:-1px;margin-bottom:.75rem;}
.sp-intro p{font-size:.98rem;color:var(--sub);line-height:1.8;}
.sp-tabs{display:flex;gap:8px;margin-bottom:2.5rem;flex-wrap:wrap;}
.sp-tab{padding:.55rem 1.3rem;border-radius:980px;font-size:.83rem;font-weight:600;color:var(--sub);border:1.5px solid var(--mid);background:var(--bg);transition:border-color .2s,color .2s,transform .2s var(--bounce);}
.sp-tab:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);}
.sp-tab.on{background:var(--cyan);color:#fff;border-color:var(--cyan);}
.sp-section{display:none;}
.sp-section.vis{display:block;}
.sp-list{display:flex;flex-direction:column;gap:0;}
.sp-row{
  display:flex;align-items:center;padding:1.5rem 1rem;
  border-bottom:1px solid var(--mid);gap:1.5rem;
  border-radius:var(--r-sm);
  transition:background .2s,transform .2s var(--ease);
  opacity:0;transform:translateX(-20px);
}
.sp-row:last-child{border-bottom:none;}
.sp-row:hover{background:var(--off);transform:translateX(6px);}
.sp-row.shown{opacity:1;transform:none;}
.sp-row:hover.shown{transform:translateX(6px);}
.sp-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--cyan-lt);}
.sp-icon svg{width:22px;height:22px;stroke:var(--cyan-dk);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sp-icon.coral{background:var(--coral-lt);}
.sp-icon.coral svg{stroke:var(--coral);}
.sp-icon.lime{background:var(--lime-lt);}
.sp-icon.lime svg{stroke:var(--lime);}
.sp-row-name{font-size:.98rem;font-weight:700;color:var(--navy);}
.sp-row-desc{font-size:.83rem;color:var(--sub);margin-top:.18rem;}
.sp-note{margin-top:2.5rem;padding:1.5rem 2rem;background:var(--cyan-lt);border-radius:var(--r-md);font-size:.9rem;color:var(--cyan-dk);line-height:1.7;}
.sp-note strong{font-weight:700;}

/* ═══════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════ */
.ct-body{max-width:1100px;margin:0 auto;padding:clamp(48px,7vh,80px) 24px clamp(72px,10vh,120px);display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;}
.ff-card{background:var(--navy);border-radius:var(--r-lg);padding:2rem;display:flex;align-items:center;gap:1.2rem;margin-bottom:1.5rem;}
.ff-logo-sq{width:78px;height:78px;border-radius:16px;background:#fff;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px;border:1.5px solid var(--mid);transition:transform .25s var(--bounce),box-shadow .25s,border-color .25s;}
.ff-logo-sq:hover,.ff-logo-sq:focus-visible{transform:scale(1.06);box-shadow:0 8px 24px rgba(0,200,240,.25);border-color:var(--cyan);outline:none;}
.ff-logo-sq img{width:100%;height:100%;object-fit:contain;}
.ff-logo-sq img{width:42px;height:42px;object-fit:contain;}
.ff-name{font-size:1rem;font-weight:800;color:#fff;letter-spacing:-.2px;}
.ff-name span{color:var(--cyan);}
.ff-role{font-size:.76rem;color:rgba(255,255,255,.45);margin-top:.2rem;}
.ct-items{display:flex;flex-direction:column;gap:12px;margin-bottom:1.5rem;}
.ct-row{
  display:flex;align-items:flex-start;gap:1rem;padding:1.2rem 1.4rem;
  background:var(--bg);border:1px solid var(--mid);border-radius:var(--r-md);
  transition:border-color .2s,box-shadow .2s,transform .2s var(--ease);}
.ct-row:hover{border-color:var(--cyan);box-shadow:0 4px 20px rgba(0,180,216,.1);transform:translateX(4px);}
.ct-ic{width:38px;height:38px;border-radius:10px;background:var(--cyan-lt);flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.ct-ic svg{width:18px;height:18px;stroke:var(--cyan-dk);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ct-label{font-size:.72rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.8px;margin-bottom:.25rem;}
.ct-val{font-size:.88rem;color:var(--ink);}
.ct-val a{color:var(--cyan);}
.ct-val a:hover{text-decoration:underline;}
.soc-row{display:flex;gap:10px;margin-bottom:1.5rem;}
.soc-btn{flex:1;padding:.6rem;border-radius:10px;border:1.5px solid var(--mid);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.83rem;font-weight:600;color:var(--sub);background:var(--bg);transition:border-color .2s,color .2s,background .2s,transform .2s var(--bounce);}
.soc-btn:hover{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-lt);transform:translateY(-3px);}
.soc-btn svg{width:16px;height:16px;fill:currentColor;}
.ct-map{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--mid);transition:box-shadow .3s;}
.ct-map:hover{box-shadow:0 8px 30px rgba(0,180,216,.12);}
.ct-map iframe{display:block;width:100%;height:240px;border:none;}
.cf-card{background:var(--bg);border:1px solid var(--mid);border-radius:var(--r-lg);padding:2.5rem 2rem;box-shadow:0 4px 24px rgba(0,0,0,.06);position:sticky;top:72px;}
.cf-h{font-size:1.5rem;font-weight:800;letter-spacing:-.5px;color:var(--navy);margin-bottom:.3rem;}
.cf-sub{font-size:.85rem;color:var(--sub);line-height:1.65;margin-bottom:1.8rem;}
.cf-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cf-grp{margin-bottom:14px;}
label{display:block;font-size:.72rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:.8px;margin-bottom:.4rem;}
input,select,textarea{
  width:100%;padding:.72rem 1rem;border-radius:var(--r-sm);
  border:1.5px solid var(--mid);background:var(--off);
  font-family:'Inter',sans-serif;font-size:.88rem;color:var(--ink);
  transition:border-color .2s,background .2s,box-shadow .2s,transform .15s;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--cyan);background:var(--bg);box-shadow:0 0 0 4px rgba(0,180,216,.1);}
input:hover,select:hover,textarea:hover{border-color:var(--cyan);}
textarea{resize:vertical;min-height:100px;}
.cf-submit{
  width:100%;padding:.88rem;border-radius:980px;
  background:var(--cyan);color:#fff;font-weight:700;font-size:.95rem;
  border:none;cursor:pointer;letter-spacing:-.1px;
  transition:background .2s,transform .2s var(--bounce),box-shadow .2s;
  box-shadow:0 6px 20px rgba(0,180,216,.3);
}
.cf-submit:hover{background:var(--cyan-dk);transform:translateY(-2px) scale(1.01);box-shadow:0 12px 30px rgba(0,180,216,.4);}
.cf-error{
  background:var(--coral-lt);color:var(--coral);border:1.5px solid var(--coral);
  border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.83rem;font-weight:600;
  margin-bottom:14px;line-height:1.5;
}
.cf-ok{display:none;text-align:center;padding:3rem 1rem;}
.cf-ok .ck{font-size:3.5rem;margin-bottom:1rem;display:block;animation:popIn .5s var(--bounce);}
@keyframes popIn{from{transform:scale(0);}to{transform:scale(1);}}
.cf-ok h3{font-size:1.3rem;font-weight:800;color:var(--navy);margin-bottom:.4rem;}
.cf-ok p{font-size:.88rem;color:var(--sub);}

/* ═══════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════ */
footer{background:var(--navy);}
.ft-inner{max-width:1200px;margin:0 auto;padding:60px 24px 28px;}
.ft-top{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:3rem;margin-bottom:3rem;}
.ft-brand-row{display:flex;align-items:center;gap:10px;margin-bottom:.9rem;}
.ft-drop{width:28px;height:28px;}
.ft-bname{font-size:.98rem;font-weight:800;color:#fff;}
.ft-bname span{color:var(--cyan);}
.ft-by{font-size:.72rem;color:rgba(255,255,255,.3);margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem;}
.ft-p{font-size:.8rem;color:rgba(255,255,255,.4);line-height:1.75;max-width:210px;}
.ft-col h4{font-size:.7rem;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:1rem;}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:.65rem;}
.ft-col a{font-size:.82rem;color:rgba(255,255,255,.5);transition:color .2s,transform .15s;display:inline-block;}
.ft-col a:hover{color:#fff;transform:translateX(4px);}
.ft-bottom{border-top:1px solid rgba(255,255,255,.07);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;}
.ft-legal{font-size:.74rem;color:rgba(255,255,255,.22);line-height:1.6;}
.ft-soc{display:flex;gap:8px;}
.ft-s{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s var(--bounce);}
.ft-s:hover{background:var(--cyan);border-color:var(--cyan);transform:scale(1.15);}
.ft-s svg{width:14px;height:14px;fill:rgba(255,255,255,.45);}
.ft-s:hover svg{fill:#fff;}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:900px){
  .feat-inner{grid-template-columns:1fr;gap:3rem;}
  .feat-inner.rev{direction:ltr;}
  .feat-vis{aspect-ratio:16/9;}
  .for-grid{grid-template-columns:1fr 1fr;}
  .flavors-inner{grid-template-columns:1fr;gap:3rem;}
  .stats-inner{grid-template-columns:1fr 1fr;}
  .ct-body{grid-template-columns:1fr;gap:2.5rem;}
  .cf-card{position:static;}
  .ft-top{grid-template-columns:1fr 1fr;}
}
/* ═══════════════════════════════════════════════════
   BENEFITS TICKER STRIP (after hero)
═══════════════════════════════════════════════════ */
.ticker-strip{
  background:var(--cyan);
  padding:0;height:44px;overflow:hidden;
  position:relative;display:flex;align-items:center;
}
.ticker-inner{
  display:flex;gap:0;width:max-content;
  animation:tickerScroll 28s linear infinite;
  white-space:nowrap;
}
.ticker-inner:hover{animation-play-state:paused;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.tick-item{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:0 2rem;
  font-size:.72rem;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--navy);
}
.tick-dot{width:5px;height:5px;border-radius:50%;background:var(--navy);opacity:.4;flex-shrink:0;}

/* ═══════════════════════════════════════════════════
   30+ FLAVORS TEXT FEATURE (replaces image gallery, sits before "Built for your day")
═══════════════════════════════════════════════════ */
.flavors-feat{
  padding:clamp(80px,10vh,120px) 24px;
  background:var(--navy);
  position:relative;overflow:hidden;
}
.flavors-feat::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 50% 0%,rgba(0,200,240,.12) 0%,transparent 60%),
             radial-gradient(ellipse 40% 50% at 90% 100%,rgba(255,69,32,.1) 0%,transparent 55%),
             radial-gradient(ellipse 30% 40% at 5% 60%,rgba(34,212,90,.08) 0%,transparent 55%);
}
/* animated mesh lines */
.flavors-feat::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.04;
  background-image:linear-gradient(rgba(0,200,240,1) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(0,200,240,1) 1px,transparent 1px);
  background-size:60px 60px;
}
.ff-inner{max-width:1160px;margin:0 auto;position:relative;z-index:1;}
.ff-top{text-align:center;margin-bottom:4rem;}
.ff-top .sp-chip{background:rgba(0,200,240,.15);color:#60DFFF;margin-bottom:1rem;}
.ff-headline{font-size:clamp(2.4rem,5vw,5rem);font-weight:900;letter-spacing:-2px;line-height:1.0;color:#fff;margin-bottom:1.2rem;}
.ff-headline .grad{
  background:linear-gradient(90deg,#00C8F0,#22D45A,#FFE000,#FF4520,#FF3DA8);
  background-size:300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:shimmer 6s ease-in-out infinite;
}
.ff-subline{font-size:clamp(.95rem,1.8vw,1.15rem);color:rgba(255,255,255,.55);line-height:1.85;max-width:560px;margin:0 auto 3rem;}
/* 4-pillar grid */
.ff-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:3.5rem;}
.ff-pillar{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:2rem 1.5rem;text-align:center;
  transition:background .3s,border-color .3s,transform .4s var(--spring);
  position:relative;overflow:hidden;
}
.ff-pillar::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--pillar-color,var(--cyan));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.ff-pillar:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.22);transform:translateY(-8px);}
.ff-pillar:hover::before{transform:scaleX(1);}
.ff-pillar:nth-child(1){--pillar-color:var(--cyan);}
.ff-pillar:nth-child(2){--pillar-color:var(--lime);}
.ff-pillar:nth-child(3){--pillar-color:var(--coral);}
.ff-pillar:nth-child(4){--pillar-color:var(--energy);}
.ff-pillar-icon{font-size:2.4rem;margin-bottom:.8rem;display:block;animation:floatIcon 4s ease-in-out infinite;animation-delay:var(--fi-d,0s);}
@keyframes floatIcon{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.ff-pillar-n{font-size:2.2rem;font-weight:900;letter-spacing:-1.5px;color:#fff;margin-bottom:.2rem;}
.ff-pillar-n .suf{font-size:1.2rem;font-weight:700;opacity:.7;}
.ff-pillar-label{font-size:.75rem;color:rgba(255,255,255,.4);line-height:1.5;font-weight:500;}
/* tag cloud row */
.ff-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:2.5rem;}
.ff-tag{
  padding:.45rem 1.1rem;border-radius:980px;
  font-size:.78rem;font-weight:700;letter-spacing:.3px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.1);
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--bounce);
  cursor:default;
}
.ff-tag:hover{background:var(--tag-c,rgba(0,200,240,.2));color:#fff;border-color:var(--tag-c,var(--cyan));transform:scale(1.08);}
.ff-tag.t-classic{--tag-c:rgba(0,200,240,.25);}
.ff-tag.t-tea{--tag-c:rgba(34,212,90,.25);}
.ff-tag.t-aloe{--tag-c:rgba(34,212,90,.25);}
.ff-tag.t-energy{--tag-c:rgba(255,224,0,.25);}
.ff-cta-row{text-align:center;}
.arr-cta{text-align:center;margin-top:3rem;}
.prod-fade{height:140px;background:linear-gradient(to bottom,var(--navy) 0%,var(--navy) 6%,var(--bg) 100%);}
@media(max-width:900px){.ff-pillars{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.ff-pillars{grid-template-columns:1fr 1fr;gap:12px;}.ff-pillar{padding:1.4rem 1rem;}}

/* ═══════════════════════════════════════════════════
   ENHANCED CARD HOVER — tilt + glow
═══════════════════════════════════════════════════ */
.for-card{transform-style:preserve-3d;}
.pc{transition:transform .35s var(--spring),box-shadow .35s;cursor:pointer;}
.pc-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(6,16,30,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s var(--ease),visibility .3s;}
.pc-modal.open{opacity:1;visibility:visible;pointer-events:auto;}
.pc-modal-card{position:relative;background:var(--bg);border-radius:26px;box-shadow:0 30px 90px rgba(0,0,0,.5);width:min(94vw,560px);max-height:92vh;padding-bottom:1.8rem;overflow:hidden auto;transform:scale(.88) translateY(12px);transition:transform .4s var(--spring);}
.pc-modal.open .pc-modal-card{transform:none;}
.pc-modal-card .pc-img{height:clamp(360px,60vh,520px);transition:height .4s var(--ease);}
.pc-modal-card.ing-open .pc-img{height:clamp(200px,30vh,280px);}
.pc-modal-card .pc-img img{height:90%;max-height:460px;}
.pc-modal-card .pc-body{padding:1.3rem 1.5rem 0;text-align:center;}
.pc-modal-card .pc-name{font-size:1.8rem;}
.pc-modal-card .pc-type{font-size:1.05rem;margin:.4rem 0 .8rem;}
.pc-modal-card .arr-chips{justify-content:center;}
.pcm-close{position:absolute;top:10px;right:12px;z-index:6;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.4);color:#fff;font-size:1rem;line-height:1;border:none;cursor:pointer;}
.pcm-ing{margin:.4rem 1.5rem 0;text-align:left;border-top:1px solid var(--mid);}
.pcm-ing-btn{width:100%;background:none;border:none;cursor:pointer;font-weight:700;color:var(--navy);padding:.8rem 0;display:flex;align-items:center;justify-content:space-between;font-size:.98rem;}
.pcm-ing-ic{font-size:1.4rem;color:var(--cyan);line-height:1;transition:transform .3s var(--ease);}
.pcm-ing.open .pcm-ing-ic{transform:rotate(45deg);}
.pcm-ing-wrap{max-height:0;overflow:hidden;transition:max-height .45s var(--ease);}
.pcm-ing.open .pcm-ing-wrap{max-height:250px;}
.pcm-ing-body{font-size:.72rem;line-height:1.65;color:var(--sub);padding:.2rem 0 1rem;max-height:238px;overflow:auto;}
.pc.in:hover{transform:translateY(-10px) rotate(-1deg) scale(1.02);box-shadow:0 20px 60px rgba(0,200,240,.2);}
/* editorial card hover — image zoom + soft overlay sheen */
.pc-img,.arr-img{position:relative;}
.pc-badge{position:absolute;top:9px;left:9px;z-index:4;background:linear-gradient(135deg,#FF2D00,#FF7A00 55%,#FFB000);color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:.3rem .62rem;border-radius:999px;white-space:nowrap;box-shadow:0 4px 14px rgba(255,70,0,.45);text-shadow:0 1px 2px rgba(120,20,0,.4);transform:rotate(-5deg);animation:badgeGlow 1.8s ease-in-out infinite;pointer-events:none;}
@keyframes badgeGlow{0%,100%{filter:brightness(1);box-shadow:0 4px 14px rgba(255,70,0,.4);}50%{filter:brightness(1.12);box-shadow:0 6px 22px rgba(255,120,0,.65);}}
.pc:hover .pc-img img{transform:scale(1.09) translateY(-4px);}
.pc-img::after,.arr-img::after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(8,20,35,.30),transparent 58%);opacity:0;transition:opacity .45s var(--ease);}
.pc:hover .pc-img::after,.arr-card:hover .arr-img::after{opacity:1;}

/* floating badge pulse */
@keyframes badgePulse{0%,100%{box-shadow:0 0 0 0 rgba(0,200,240,.5);}70%{box-shadow:0 0 0 8px rgba(0,200,240,0);}}
.arr-new{animation:badgePulse 2.5s ease-in-out infinite;}
.arr-new.energy-badge{animation:none;}

/* ═══════════════════════════════════════════════════
   SECTION HEADING ACCENT LINE
═══════════════════════════════════════════════════ */
.sec-h-accent{
  position:relative;display:inline-block;
}
.sec-h-accent::after{
  content:'';position:absolute;bottom:-6px;left:0;right:0;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--lime));
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease) .2s;
}
[data-reveal].revealed .sec-h-accent::after{transform:scaleX(1);}

/* ═══════════════════════════════════════════════════
   STATS — upgraded glow & number color variety
═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   CTA BUTTON — animated gradient fill
═══════════════════════════════════════════════════ */
.btn-cta{
  background:linear-gradient(90deg,var(--cyan),#0090C8,var(--cyan));
  background-size:200%;
  animation:btnShimmer 3s ease-in-out infinite;
}
@keyframes btnShimmer{0%,100%{background-position:0%;}50%{background-position:100%;}}
.btn-cta:hover{animation:none;background:var(--cyan-dk);}

/* ═══════════════════════════════════════════════════
   SELLING POINTS — VERTICAL PARTNER COLUMNS
═══════════════════════════════════════════════════ */
.sp-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:2rem;}
.sp-col{
  background:var(--off);border:1.5px solid var(--mid);border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow .3s,transform .3s var(--spring);
}
.sp-col:hover{box-shadow:0 12px 48px rgba(0,200,240,.12);transform:translateY(-4px);}
.sp-col-head{
  padding:1.6rem 1.8rem 1.2rem;
  border-bottom:1.5px solid var(--mid);
  position:relative;overflow:hidden;
}
.sp-col-head::before{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:var(--col-accent,var(--cyan));
}
.sp-col:nth-child(1) .sp-col-head{--col-accent:var(--cyan);}
.sp-col:nth-child(2) .sp-col-head{--col-accent:var(--coral);}
.sp-col:nth-child(3) .sp-col-head{--col-accent:var(--lime);}
.sp-col-icon{
  width:44px;height:44px;border-radius:12px;margin-bottom:.9rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--col-accent,var(--cyan));
}
.sp-col:nth-child(1) .sp-col-icon{background:rgba(0,200,240,.12);}
.sp-col:nth-child(2) .sp-col-icon{background:rgba(255,69,32,.1);}
.sp-col:nth-child(3) .sp-col-icon{background:rgba(34,212,90,.1);}
.sp-col-icon svg{width:22px;height:22px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.sp-col:nth-child(1) .sp-col-icon svg{stroke:var(--cyan-dk);}
.sp-col:nth-child(2) .sp-col-icon svg{stroke:var(--coral);}
.sp-col:nth-child(3) .sp-col-icon svg{stroke:var(--lime);}
.sp-col-title{font-size:1.05rem;font-weight:800;color:var(--navy);letter-spacing:-.3px;}
.sp-col-sub{font-size:.78rem;color:var(--sub);margin-top:.25rem;line-height:1.5;}
.sp-partner-list{padding:1.2rem 1.4rem;display:flex;flex-direction:column;gap:10px;}
/* partner card slot */
.sp-partner{
  display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;
  background:var(--bg);border:1.5px solid var(--mid);border-radius:var(--r-md);
  transition:border-color .25s,box-shadow .25s,transform .25s var(--spring);
  opacity:0;transform:translateY(12px);
}
.sp-partner.shown{opacity:1;transform:none;}
.sp-partner:hover{border-color:var(--cyan);box-shadow:0 4px 16px rgba(0,200,240,.12);transform:translateX(4px);}
.sp-col:nth-child(2) .sp-partner:hover{border-color:var(--coral);box-shadow:var(--sh-coral);}
.sp-col:nth-child(3) .sp-partner:hover{border-color:var(--lime);box-shadow:var(--sh-lime);}
/* logo placeholder slot */
.sp-logo-slot{
  width:132px;height:60px;border-radius:10px;flex-shrink:0;
  background:#fff;border:1px solid var(--mid);padding:6px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;transition:border-color .2s,box-shadow .2s;
}
.sp-partner:hover .sp-logo-slot{border-color:var(--cyan);}
.sp-logo-slot img{width:100%;height:100%;object-fit:contain;}
.sp-logo-placeholder{font-size:.6rem;font-weight:700;color:var(--faint);text-align:center;line-height:1.3;padding:4px;}
.sp-p-name{font-size:.9rem;font-weight:700;color:var(--navy);letter-spacing:-.1px;}
.sp-p-type{font-size:.72rem;color:var(--sub);margin-top:.15rem;}
/* "add partner" placeholder row */
.sp-note-row{
  margin-top:2.5rem;padding:1.5rem 2rem;background:var(--cyan-lt);border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
}
.sp-note-row .sp-note{margin:0;padding:0;background:none;flex:1;min-width:240px;}
.sp-note-cta{flex-shrink:0;white-space:nowrap;font-size:.85rem;padding:.7rem 1.5rem;}
.sp-add-slot{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.9rem 1.1rem;
  background:transparent;border:1.5px dashed var(--mid);border-radius:var(--r-md);
  font-size:.78rem;font-weight:600;color:var(--faint);
  cursor:default;transition:border-color .2s,color .2s;
}
.sp-add-slot:hover{border-color:var(--cyan);color:var(--cyan);}
/* sp note at bottom */
.sp-note{margin-top:2.5rem;padding:1.5rem 2rem;background:var(--cyan-lt);border-radius:var(--r-md);font-size:.9rem;color:var(--cyan-dk);line-height:1.7;}
.sp-note strong{font-weight:700;}
@media(max-width:900px){.sp-cols{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════
   ANIMATED PAGE HEADER (selling points specific)
═══════════════════════════════════════════════════ */
.page-hero.ph-selling{
  background:linear-gradient(145deg,#02100A 0%,#041F10 50%,#061830 100%);
}
.page-hero.ph-selling::after{
  background:radial-gradient(ellipse 60% 80% at 50% 60%,rgba(34,212,90,.14),transparent 60%);
}

/* ═══════════════════════════════════════════════════
   EXTRA MICRO-ANIMATIONS
═══════════════════════════════════════════════════ */
/* wiggle on tab hover */
.cat-tab:hover{animation:wiggle .4s var(--bounce);}
@keyframes wiggle{0%{transform:translateY(-2px) rotate(0);}25%{transform:translateY(-2px) rotate(-2deg);}75%{transform:translateY(-2px) rotate(2deg);}100%{transform:translateY(-2px) rotate(0);}}

/* for-card icon spin on hover */
.for-card:hover .for-iw{animation:spinPop .5s var(--spring);}
@keyframes spinPop{0%{transform:scale(1) rotate(0);}50%{transform:scale(1.2) rotate(-15deg);}100%{transform:scale(1.12) rotate(-5deg);}}

/* stat number subtle glow */
.stat-n{text-shadow:0 0 16px rgba(0,180,216,.38);}

/* chip glow */
.sp-chip.cyan,.sec-chip.cyan{
  box-shadow:0 0 16px rgba(0,200,240,.2);
}

/* nav active indicator underline dot */
.n-btn.active::after{
  content:'';display:block;width:4px;height:4px;border-radius:50%;
  background:var(--cyan);margin:2px auto 0;
}

/* floating sachet tilt on hero */
.hs:nth-child(odd){animation-name:hsUpOdd;}
@keyframes hsUpOdd{to{transform:translateY(0) rotate(-3deg);opacity:1;}}
.hs:nth-child(even){animation-name:hsUpEven;}
@keyframes hsUpEven{to{transform:translateY(0) rotate(3deg);opacity:1;}}
.hs:hover{transform:translateY(-12px) rotate(0) scale(1.08)!important;}

/* glowing border on feat-vis cards */
.feat-vis{
  box-shadow:inset 0 0 0 1.5px rgba(0,200,240,.15);
}
.feat-vis:hover{box-shadow:0 30px 80px rgba(0,200,240,.25),inset 0 0 0 1.5px rgba(0,200,240,.3);}

/* neon chip for energy */
.sp-chip.energy{background:rgba(255,224,0,.15);color:#B8A000;box-shadow:0 0 12px rgba(255,224,0,.2);}

/* cta strip gradient border animation */
@keyframes borderShift{0%{background-position:0%}100%{background-position:400%}}
.cta-strip::after{background-size:400%;animation:borderShift 6s linear infinite;}

/* page wipe upgraded: multicolor */
#wipe{background:linear-gradient(90deg,var(--cyan),var(--lime),var(--cyan));}

/* ═══════════════════════════════════════════════════
   PRELOADER
═══════════════════════════════════════════════════ */
#preloader{
  position:fixed;inset:0;z-index:99999;
  background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
#preloader.done{opacity:0;pointer-events:none;transform:scale(1.03);}
.pl-logo{display:flex;flex-direction:column;align-items:center;gap:.65rem;animation:plPop .65s var(--bounce) .05s both;}
@keyframes plPop{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:scale(1);}}
.pl-drop{width:60px;height:60px;animation:plSpin .7s var(--bounce) .15s both;}
@keyframes plSpin{from{opacity:0;transform:rotate(-180deg) scale(.4);}to{opacity:1;transform:rotate(0) scale(1);}}
.pl-name{font-size:1.4rem;font-weight:900;color:#fff;letter-spacing:-.4px;}
.pl-name span{color:var(--cyan);}
.pl-bar{width:140px;height:3px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;animation:plFadeIn .4s ease .45s both;}
@keyframes plFadeIn{from{opacity:0;}to{opacity:1;}}
.pl-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--lime),var(--coral));border-radius:3px;animation:plLoad 1s cubic-bezier(.4,0,.2,1) .45s forwards;width:0;}
@keyframes plLoad{to{width:100%;}}
.pl-txt{font-size:.65rem;color:rgba(255,255,255,.28);letter-spacing:2px;text-transform:uppercase;animation:plFadeIn .4s ease .45s both;}
.pl-flavor{color:var(--cyan);font-weight:800;}
/* CSS-only safety net so the loader never sticks (e.g. JS-less mobile viewers) */
#preloader{animation:plAutoHide .8s ease 3s forwards;}
@keyframes plAutoHide{to{opacity:0;visibility:hidden;pointer-events:none;}}
html:not(.js) #preloader{display:none!important;}
html:not(.js) [data-reveal]{opacity:1!important;transform:none!important;filter:none!important;}
html:not(.js) .sp-partner,html:not(.js) .sp-row{opacity:1!important;transform:none!important;}
/* no-JS navigation fallback: switch pages via :target so the menu works without scripts */
html:not(.js) .page{display:none;}
html:not(.js) #page-home{display:block;}
html:not(.js) .page:target{display:block;}
html:not(.js) body:has(.page:target) #page-home:not(:target){display:none;}
html:not(.js) .h1-inner{transform:none!important;}

/* contact form always visible (not hidden by data-reveal) */
.cf-card{opacity:1!important;transform:none!important;}

/* carousel always visible */
.inf-marquee-wrap{opacity:1!important;}

/* ═══════════════════════════════════════════════════
   FINAL RESPONSIVE
═══════════════════════════════════════════════════ */
@media(max-width:900px){
  .feat-inner{grid-template-columns:1fr;gap:3rem;}
  .feat-inner.rev{direction:ltr;}
  .feat-vis{aspect-ratio:16/9;}
  .for-grid{grid-template-columns:1fr 1fr;}
  .stats-inner{grid-template-columns:1fr 1fr;}
  .ct-body{grid-template-columns:1fr;gap:2.5rem;}
  .cf-card{position:static;}
  .ft-top{grid-template-columns:1fr 1fr;}
}
@media(max-width:640px){
  .n-links{display:none;}
  .ham{display:flex;}
  .n-flag{display:none;}
  .n-inner{justify-content:space-between;}
  .n-cluster,#nav.collapsed .n-cluster{width:auto;max-width:calc(100% - 56px);justify-content:flex-start;background:transparent;border-color:transparent;box-shadow:none;padding:0;gap:0;}
  .ham{position:relative;z-index:2;flex-shrink:0;}
  #nav.collapsed .n-word{max-width:170px;opacity:1;margin-left:0;}
  .hero-sachets{height:150px;}
  .for-grid{grid-template-columns:1fr;}
  .cf-row2{grid-template-columns:1fr;}
  .ft-top{grid-template-columns:1fr;}
  .stats-inner{grid-template-columns:1fr 1fr;}
  .story-nav{display:none;}
}

/* ═══ PER-FLAVOR BACKGROUNDS ═══ */
.flavor-honey_melon{background:linear-gradient(135deg,#f5f8e0,#e8f5c0)!important;}
.flavor-coconut{background:linear-gradient(135deg,#faf4ee,#f0e0c8)!important;}
.flavor-gt_elderflower{background:linear-gradient(135deg,#f8faf0,#eef7d8)!important;}
.flavor-gt_mango{background:linear-gradient(135deg,#f8faf0,#f0f8d0)!important;}
.flavor-orange{background:linear-gradient(135deg,#fff5ee,#ffe8cc)!important;}
.flavor-strawberry{background:linear-gradient(135deg,#fff0f2,#ffd8de)!important;}
.flavor-forest_fruits{background:linear-gradient(135deg,#f5f0ff,#e8d8ff)!important;}
.flavor-banana_strawberry{background:linear-gradient(135deg,#fff0f8,#ffd0ea)!important;}
.flavor-pear{background:linear-gradient(135deg,#f8f8e8,#eef0c8)!important;}
.flavor-apple{background:linear-gradient(135deg,#f0fff4,#ccf5d8)!important;}
.flavor-icetea_lemon{background:linear-gradient(135deg,#fafaf8,#f0f0e0)!important;}
.flavor-icetea_peach{background:linear-gradient(135deg,#fff8f4,#ffeada)!important;}
.flavor-gt_original{background:linear-gradient(135deg,#f5fff8,#d8f5e0)!important;}
.flavor-passion_fruit{background:linear-gradient(135deg,#fff8f0,#ffe0c0)!important;}
.flavor-gt_lemon{background:linear-gradient(135deg,#f8fff0,#e8f8c8)!important;}
.flavor-watermelon{background:linear-gradient(135deg,#f0fff5,#c8f5d8)!important;}
.flavor-sport_orange{background:linear-gradient(135deg,#fff0ff,#e8c8ff)!important;}
.flavor-pomegranate{background:linear-gradient(135deg,#fef0f8,#f8d0ea)!important;}
.flavor-acai_berry{background:linear-gradient(135deg,#f8f0ff,#e8d0ff)!important;}
.flavor-aloe_original{background:linear-gradient(135deg,#f0fff8,#c8f8e0)!important;}
.flavor-aloe_strawberry{background:linear-gradient(135deg,#f0fff5,#cef8d8)!important;}
.flavor-aloe_mango{background:linear-gradient(135deg,#f2fff0,#ccf8cc)!important;}
.flavor-aloe_pineapple{background:linear-gradient(135deg,#f8fff0,#e0f8c0)!important;}
.flavor-energy_apple{background:linear-gradient(135deg,#0a1a0a,#0f2a12)!important;}
.flavor-energy_blue{background:linear-gradient(135deg,#020a18,#061428)!important;}
.flavor-energy_exotic{background:linear-gradient(135deg,#1a0508,#28060c)!important;}
.flavor-energy_mixed{background:linear-gradient(135deg,#06051a,#100a28)!important;}

/* ═══════════════════════════════════════════════════
   WORDPRESS ADJUSTMENTS
   Everything above this line is the prototype stylesheet, untouched.
   Only additions live below, so a prototype update can be re-pasted
   without losing the WordPress-specific work.
═══════════════════════════════════════════════════ */

/* Admin bar must not sit on top of the fixed nav. */
body.admin-bar #nav{top:32px;}
@media screen and (max-width:782px){body.admin-bar #nav{top:46px;}}

/* WPBakery rows should never fight the full-bleed sections. */
.page .vc_row{margin-left:0;margin-right:0;}
.page .vc_column_container>.vc_column-inner{padding-left:0;padding-right:0;}

/* Backend editor preview: sticky/pinned sections break the builder canvas. */
.vc_editor .story,.vc_editor .hero{min-height:auto;}

/* ── Contact Form 7 ──────────────────────────────────────
   CF7's own stylesheet is dequeued in the plugin, so these rules are the
   only styling the form gets. They map CF7's markup onto the classes the
   prototype already defined rather than restyling the fields twice. */

/* CF7 wraps every field in a <span>, which breaks the grid unless it is
   told to behave like the input it contains. */
.bolero-cf7 .wpcf7-form-control-wrap{display:block;width:100%;}
.bolero-cf7 p{margin:0;}

.cf-req{color:var(--coral);margin-left:.15rem;}
.cf-actions{margin-top:1.4rem;}

/* Field-level validation tips. */
.bolero-cf7 .wpcf7-not-valid-tip{
  display:block;margin-top:.35rem;font-size:.78rem;color:var(--coral);font-weight:500;}
.bolero-cf7 .wpcf7-not-valid{border-color:var(--coral)!important;}

/* The form-level response line, styled per CF7 status class. */
.bolero-cf7 .wpcf7-response-output{
  margin:1.2rem 0 0!important;padding:.85rem 1.1rem!important;border:0!important;
  border-radius:var(--r-sm);font-size:.85rem;line-height:1.5;}
.bolero-cf7 .wpcf7-form.invalid .wpcf7-response-output,
.bolero-cf7 .wpcf7-form.unaccepted .wpcf7-response-output,
.bolero-cf7 .wpcf7-form.payment-required .wpcf7-response-output{
  background:var(--coral-lt);color:#8C2A0F;}
.bolero-cf7 .wpcf7-form.sent .wpcf7-response-output{background:var(--lime-lt);color:#1E6B3A;}
.bolero-cf7 .wpcf7-form.failed .wpcf7-response-output,
.bolero-cf7 .wpcf7-form.aborted .wpcf7-response-output,
.bolero-cf7 .wpcf7-form.spam .wpcf7-response-output{background:var(--energy-lt);color:#7A5E00;}

/* Submit + spinner. CF7 keeps the spinner in the DOM at all times. */
.bolero-cf7 .wpcf7-spinner{
  display:inline-block;width:18px;height:18px;margin:0 0 0 .6rem;vertical-align:middle;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  background:none;opacity:0;transition:opacity .2s;}
.bolero-cf7 .submitting .wpcf7-spinner{opacity:1;animation:cf7Spin .7s linear infinite;}
.bolero-cf7 .submitting .cf-submit{opacity:.65;cursor:progress;}
@keyframes cf7Spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion: reduce){.bolero-cf7 .wpcf7-spinner{animation:none!important;}}

/* Consent row. CF7 renders acceptance as a span-wrapped checkbox. */
.cf-consent .wpcf7-list-item{margin:0;}
.cf-consent label{display:flex;gap:.6rem;align-items:flex-start;
  font-size:.82rem;color:var(--sub);line-height:1.5;}
.cf-consent input[type=checkbox]{margin-top:.25rem;flex-shrink:0;}
.cf-consent a{color:var(--cyan-dk);text-decoration:underline;}

/* Cloudflare Turnstile. CF7 injects it above the submit button; the widget
   is a fixed 300px, so it needs room and centring on narrow screens. */
.bolero-cf7 .wpcf7-turnstile,.bolero-cf7 .cf-turnstile{margin:1.2rem 0 0;min-height:65px;}
@media(max-width:400px){
  .bolero-cf7 .wpcf7-turnstile,.bolero-cf7 .cf-turnstile{display:flex;justify-content:center;}
}

/* Caffeine / age notices inside the product modal. */
.pcm-notice{margin:1rem 0 0;padding:.75rem .9rem;border-radius:var(--r-sm);
  background:var(--energy-lt);color:#7A5E00;font-size:.8rem;line-height:1.5;}

/* Partner rows are links when a website is set. */
a.sp-partner{cursor:pointer;}
a.sp-partner:hover .sp-p-name{color:var(--cyan-dk);}

/* Product cards are keyboard reachable now that they open a dialog. */
.pc:focus-visible,.cat-tab:focus-visible,.s-dot:focus-visible{
  outline:3px solid var(--cyan);outline-offset:3px;}

/* Single product template. */
.single-product-wrap{max-width:1100px;margin:0 auto;padding:140px 24px 80px;
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:start;}
.single-product-media{border-radius:var(--r-lg);overflow:hidden;padding:32px;}
.single-product-body h1{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-1px;line-height:1.1;}
.single-product-meta{margin:.6rem 0 1.4rem;color:var(--sub);font-size:.92rem;}
.single-product-body .entry-content{color:var(--sub);line-height:1.75;}
.single-product-ing{margin-top:2rem;padding:1.2rem 1.4rem;border-radius:var(--r-md);
  background:var(--off);font-size:.8rem;line-height:1.6;color:var(--sub);}
@media(max-width:860px){.single-product-wrap{grid-template-columns:1fr;gap:32px;padding-top:110px;}}

/* Skip link — required for keyboard users once the nav is fixed. */
.skip-link{position:absolute;left:-9999px;z-index:10000;padding:.8rem 1.2rem;
  background:var(--navy);color:#fff;border-radius:0 0 var(--r-sm) 0;}
.skip-link:focus{left:0;top:0;}

/* ── WPML language switcher ──────────────────────────────
   The prototype's flag was a JS toggle. It is now a real link to the
   translated page, so it gets a focus state and a hover affordance. */
.n-flag{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;
  transition:transform .2s var(--bounce),box-shadow .2s;}
.n-flag:hover{transform:scale(1.08);box-shadow:0 2px 10px rgba(0,0,0,.18);}
.n-flag:focus-visible{outline:3px solid var(--cyan);outline-offset:2px;}
.n-flag .flag-img{width:27px;height:18px;object-fit:cover;border-radius:2px;display:block;}
.mob-flag{margin-top:1.4rem;}

/* Product cards keep both names in both languages, so the divider needs to
   read as a separator rather than a stray pipe. */
.pc-name .pc-sep{color:var(--faint);font-weight:400;margin:0 .35rem;}