/* ==========================================================================
   Health & Wellness — custom layer di atas Tailwind
   Palet & tipografi mengikuti multigrain.hotto.co.id
   ========================================================================== */

:root{
  --brand-50:#F6F1F8;  --brand-100:#E9E4F2; --brand-200:#D7C7DF; --brand-300:#B9A3CC;
  --brand-400:#8E6FB3; --brand-500:#624593; --brand-600:#5B539C; --brand-700:#4A3673;
  --brand-800:#2E2155; --brand-900:#140C56;
  --cream:#FAF3EA; --sand:#D2B695; --olive:#9DA974; --olive-dark:#728049;
  --mist:#8CA6C4;  --clay:#85431E; --ink:#454545;
  --shell:#FFFFFF;
}

*{ -webkit-tap-highlight-color: transparent; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  font-family:'Figtree',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--shell);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --- Display type: pengganti Recoleta-Bold --------------------------------- */
.font-display{
  font-family:'Fraunces',Georgia,'Times New Roman',serif;
  font-variation-settings:'SOFT' 60,'WONK' 0,'opsz' 48;
  font-weight:600;
  letter-spacing:-0.015em;
  line-height:1.08;
  color:var(--brand-500);
}

::selection{ background:var(--brand-200); color:var(--brand-900); }

/* --- Scrollbar ------------------------------------------------------------ */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--brand-50); }
::-webkit-scrollbar-thumb{ background:var(--brand-300); border-radius:99px; border:2px solid var(--brand-50); }
::-webkit-scrollbar-thumb:hover{ background:var(--brand-500); }

/* --- Tekstur & background ------------------------------------------------- */
.bg-grain{
  position:relative;
}
.bg-grain::after{
  content:'';
  position:absolute; inset:0; pointer-events:none; opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mesh-hero{
  background:
    radial-gradient(900px 520px at 12% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(760px 480px at 88% 0%, #E9E4F2 0%, rgba(233,228,242,0) 65%),
    radial-gradient(700px 600px at 70% 110%, #FAF3EA 0%, rgba(250,243,234,0) 60%),
    linear-gradient(180deg,#F6F1F8 0%,#FFFFFF 100%);
}

.mesh-deep{
  background:
    radial-gradient(800px 420px at 85% 10%, rgba(141,111,179,.45) 0%, rgba(98,69,147,0) 60%),
    radial-gradient(620px 420px at 5% 95%, rgba(141,166,196,.28) 0%, rgba(141,166,196,0) 62%),
    linear-gradient(140deg,#2E2155 0%,#140C56 55%,#624593 130%);
}

/* --- Header --------------------------------------------------------------- */
.site-header{
  transition:background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:var(--brand-100);
  box-shadow:0 10px 30px -22px rgba(20,12,86,.55);
}

.nav-link{ position:relative; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-5px; height:2px; width:100%;
  background:var(--brand-500); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.nav-link:hover::after,.nav-link.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* --- Tombol --------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:999px; line-height:1;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease, background-color .25s ease, color .25s ease;
  will-change:transform;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{
  background:var(--brand-500); color:#fff;
  box-shadow:0 14px 28px -14px rgba(98,69,147,.85), inset 0 -2px 0 rgba(20,12,86,.25);
}
.btn-primary:hover{ background:var(--brand-700); transform:translateY(-2px); box-shadow:0 20px 34px -14px rgba(98,69,147,.9); }

.btn-ghost{ background:#fff; color:var(--brand-500); border:1.5px solid var(--brand-200); }
.btn-ghost:hover{ border-color:var(--brand-500); transform:translateY(-2px); box-shadow:0 16px 30px -18px rgba(98,69,147,.6); }

.btn-light{ background:#fff; color:var(--brand-900); }
.btn-light:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -16px rgba(0,0,0,.45); }

/* --- Kartu ---------------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--brand-100); border-radius:1.5rem;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--brand-200);
  box-shadow:0 30px 50px -32px rgba(20,12,86,.45);
}

/* Tile bahan aktif (meniru grid 15 multigrain Hotto) */
.tile{
  background:var(--brand-500); color:#fff; border-radius:1rem;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), background-color .35s ease, box-shadow .35s ease;
}
.tile:hover{ background:var(--brand-700); transform:translateY(-5px); box-shadow:0 22px 38px -22px rgba(20,12,86,.8); }
.tile:nth-child(3n+2){ background:var(--brand-600); }
.tile:nth-child(3n+2):hover{ background:var(--brand-700); }

/* Kartu produk — aksen warna per varian */
.product-card{ position:relative; overflow:hidden; border-radius:1.75rem; }
.product-card::before{
  content:''; position:absolute; inset-inline:0; top:0; height:5px;
  background:var(--accent,var(--brand-500));
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.product-card:hover::before{ transform:scaleX(1); }
.product-card .product-orb{
  position:absolute; right:-96px; top:-96px; width:230px; height:230px; border-radius:999px;
  background:var(--accent,var(--brand-500)); opacity:.1; filter:blur(10px);
  transition:transform .6s cubic-bezier(.2,.7,.3,1), opacity .6s ease;
}
.product-card:hover .product-orb{ transform:scale(1.2) translate(-14px,14px); opacity:.16; }

.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.75rem; font-weight:600; letter-spacing:.01em;
  padding:.3rem .65rem; border-radius:999px;
  background:rgba(98,69,147,.08); color:var(--brand-700);
}

/* --- Ranking (Faktor pola makan) ------------------------------------------ */
.rank-row{ transition:background-color .3s ease, transform .3s ease; }
.rank-row:hover{ background:var(--brand-50); transform:translateX(4px); }
.rank-badge{
  font-family:'Fraunces',serif; font-variation-settings:'SOFT' 60;
  background:var(--brand-500); color:#fff; border-radius:.75rem;
}

/* --- Marquee -------------------------------------------------------------- */
.marquee{ display:flex; overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee__track{ display:flex; gap:3rem; padding-inline:1.5rem; flex:0 0 auto; animation:marquee 38s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

/* --- FAQ ------------------------------------------------------------------ */
.faq-item{ border:1px solid var(--brand-100); border-radius:1.25rem; background:#fff; transition:border-color .3s ease, box-shadow .3s ease; }
.faq-item[open]{ border-color:var(--brand-200); box-shadow:0 24px 44px -34px rgba(20,12,86,.6); }
.faq-item summary{ list-style:none; cursor:pointer; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .faq-ico{ transition:transform .35s cubic-bezier(.2,.7,.3,1), background-color .3s ease, color .3s ease; }
.faq-item[open] summary .faq-ico{ transform:rotate(45deg); background:var(--brand-500); color:#fff; }
.faq-body{ animation:faqIn .35s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* --- Reveal on scroll ----------------------------------------------------- */
[data-reveal]{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* --- Counter -------------------------------------------------------------- */
.counter{ font-variant-numeric:tabular-nums; }

/* --- Floating WhatsApp ---------------------------------------------------- */
.fab{
  box-shadow:0 18px 34px -16px rgba(20,12,86,.65);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
}
.fab:hover{ transform:translateY(-3px) scale(1.04); }

/* --- Hero art ------------------------------------------------------------- */
.orb{ position:absolute; border-radius:999px; filter:blur(0.5px); }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.floaty{ animation:floaty 6s ease-in-out infinite; }
.floaty-slow{ animation:floaty 9s ease-in-out infinite; }

/* --- Longevity: Blender-rendered rotating product ------------------------ */
.longevity-showcase{
  position:relative; max-width:520px; overflow:hidden;
  padding:22px 25px 18px; border-radius:2.25rem;
  border:1px solid rgba(255,255,255,.95);
  background:
    radial-gradient(circle at 50% 37%,#fff 0%,#faf8ef 42%,#eee9d9 77%,#e2decd 100%);
  box-shadow:0 40px 80px -48px rgba(20,12,86,.5),inset 0 1px 0 #fff;
}
.longevity-showcase__top,.longevity-showcase__bottom{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.longevity-showcase__eyebrow{
  color:var(--brand-500); font-size:11px; font-weight:800; letter-spacing:.17em; text-transform:uppercase;
}
.longevity-stage{
  position:relative; height:clamp(400px,44vw,550px); margin:0 -10px;
  cursor:grab; touch-action:pan-y; user-select:none;
}
.longevity-stage.is-dragging{ cursor:grabbing; }
.longevity-stage__halo{
  position:absolute; width:74%; aspect-ratio:1; left:13%; top:13%;
  border-radius:50%; background:radial-gradient(circle,#fff 15%,#ebe7d5 55%,transparent 72%);
  filter:blur(6px);
}
.longevity-stage__shadow{
  position:absolute; z-index:0; left:28%; right:28%; bottom:5%;
  height:22px; border-radius:50%; background:rgba(32,25,42,.25); filter:blur(17px);
}
.longevity-water{
  position:absolute; z-index:1; inset:0; overflow:hidden;
  pointer-events:none; contain:layout paint;
}
.longevity-water__poster,.longevity-water__canvas{
  position:absolute; left:50%; top:50%; height:100%; width:auto; max-width:100%;
  display:block; object-fit:contain; transform:translate(-50%,-50%);
}
.longevity-water [hidden]{ display:none; }
.longevity-stage__bottle{
  position:absolute; z-index:2; left:50%; top:50%;
  display:block; width:auto; height:100%; max-width:100%;
  transform:translate(-50%,-50%);
  filter:drop-shadow(16px 20px 18px rgba(32,25,42,.17));
  pointer-events:none;
}
.longevity-stage__bottle[hidden]{ display:none; }
.longevity-showcase__bottom{
  padding:3px 6px 0; border-top:1px solid rgba(98,69,147,.12);
}
.longevity-showcase__category{
  margin-top:16px; color:var(--olive-dark); font-size:11px;
  font-weight:800; letter-spacing:.14em; text-transform:uppercase;
}
.longevity-showcase__name{
  margin-top:2px; color:var(--brand-900);
  font-family:'Fraunces',Georgia,serif; font-size:30px; font-weight:600; line-height:1.08;
}
.longevity-showcase__description{ margin-top:4px; color:rgba(69,69,69,.62); font-size:12.5px; }
.longevity-showcase__link{
  display:grid; place-items:center; flex:none; width:43px; height:43px; border-radius:50%;
  color:#fff; background:var(--brand-500); transition:transform .25s ease,background-color .25s ease;
}
.longevity-showcase__link:hover{ transform:translateX(3px); background:var(--brand-700); }
.longevity-showcase__hint{
  margin-top:12px; text-align:center; color:rgba(74,54,115,.55);
  font-size:11px; font-weight:600; letter-spacing:.02em;
}

/* --- Mobile nav ----------------------------------------------------------- */
#mobileNav{ transition:opacity .3s ease, visibility .3s ease; }
#mobileNav[hidden]{ display:block; opacity:0; visibility:hidden; pointer-events:none; }

@media(max-width:640px){
  .longevity-showcase{ padding:17px 17px 16px; }
  .longevity-stage{ height:415px; margin:0 -12px; }
}

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