@font-face { font-family:'Discovery FS'; src:url('assets/fonts/discovery-regular.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'Discovery FS'; src:url('assets/fonts/discovery-medium.woff') format('woff'); font-weight:500 900; font-display:swap; }

:root {
  --goom-purple:#2e2170;
  --goom-lilac:#ceb9e3;
  --goom-orange:#f45f2b;
  --goom-cream:#fff8ea;
  --goom-ease:cubic-bezier(.23,1,.32,1);
  --goom-move:cubic-bezier(.77,0,.175,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#ceb9e3; color:#2e2170; font-family:'Discovery FS',Arial,sans-serif; -webkit-font-smoothing:antialiased; }
body,button,a { font-family:'Discovery FS',Arial,sans-serif; }
img,video { max-width:100%; }
a { color:#2e2170; text-decoration:none; }
a:hover { color:#5b3fa8; }
button { color:inherit; }
:focus-visible { outline:3px solid #f45f2b; outline-offset:4px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

@keyframes goomMarqueeA { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@keyframes goomMarqueeB { from { transform:translateX(-50%); } to { transform:translateX(0); } }
@keyframes goomFloat { 0%,100% { transform:translate(-50%,-50%) translateY(0) rotate(var(--rot,0deg)); } 50% { transform:translate(-50%,-50%) translateY(-14px) rotate(var(--rot,0deg)); } }
@keyframes goomHint { 0%,100% { transform:translateY(0); opacity:.45; } 50% { transform:translateY(9px); opacity:1; } }

.goom-page { color:#2e2170; background:#fff; overflow-x:clip; line-height:1.6; }

/* ---------- Liquid-glass toolbar ---------- */
.goom-header {
  position:fixed;
  inset:14px 0 auto 0;
  z-index:60;
  display:flex;
  justify-content:center;
  padding:0 clamp(12px,3vw,28px);
  pointer-events:none;
}
.goom-bar {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(14px,3vw,40px);
  width:min(100%,1180px);
  padding-block:9px;
  padding-inline:24px 10px;
  border-radius:999px;
  overflow:hidden;
  pointer-events:auto;
  isolation:isolate;
  background:linear-gradient(155deg,rgba(255,255,255,.62),rgba(255,255,255,.26) 46%,rgba(255,255,255,.44));
  backdrop-filter:blur(20px) saturate(190%);
  -webkit-backdrop-filter:blur(20px) saturate(190%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(255,255,255,.35) inset,
    0 10px 34px rgba(46,33,112,.16),
    0 2px 8px rgba(46,33,112,.08);
  transition:box-shadow 320ms var(--goom-ease),background 320ms ease;
}
.goom-bar::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.15) 42%,rgba(255,255,255,.7));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
/* the specular streak that sells the glass */
.goom-bar::after {
  content:'';
  position:absolute;
  inset:0 auto 0 -30%;
  width:38%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.72),transparent);
  transform:skewX(-16deg);
  opacity:.5;
  pointer-events:none;
  transition:transform 900ms var(--goom-ease);
}
.goom-bar:hover::after { transform:skewX(-16deg) translateX(340%); }
.goom-header.is-scrolled .goom-bar {
  background:linear-gradient(155deg,rgba(255,255,255,.76),rgba(255,255,255,.42) 46%,rgba(255,255,255,.58));
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 14px 40px rgba(46,33,112,.2),
    0 3px 10px rgba(46,33,112,.1);
}
.goom-brand { display:flex; align-items:center; flex:none; }
.goom-brand img { height:26px; width:auto; display:block; }
.goom-nav { display:flex; align-items:center; gap:2px; font-size:14.5px; font-weight:500; white-space:nowrap; }
.goom-nav a {
  position:relative;
  padding:9px 16px;
  border-radius:999px;
  color:#2b1767;
  transition:background 220ms ease,color 220ms ease;
}
.goom-nav a:hover { background:rgba(255,255,255,.6); color:#2b1767; }
.goom-bar-cta {
  display:inline-flex;
  align-items:center;
  flex:none;
  padding:11px 22px;
  border-radius:999px;
  background:#2b1767;
  color:#fff;
  font-size:14px;
  font-weight:500;
  transition:background 220ms ease,transform 220ms var(--goom-ease);
}
.goom-bar-cta:hover { background:var(--goom-orange); color:#fff; transform:translateY(-1px); }
.goom-menu { display:none; width:44px; height:44px; place-content:center; gap:5px; border:0; background:transparent; cursor:pointer; padding:0; border-radius:999px; }
.goom-menu i { display:block; width:22px; height:2px; border-radius:2px; background:#2b1767; }
.goom-menu i:last-child { width:15px; margin-inline-start:auto; }

/* ---------- Hero foundations; cinematic.css owns the scroll journey ---------- */
.hero {
  --p:0;
  position:relative;
  height:225dvh;
  background:#cbbbe6;
}
.hero-pin {
  position:sticky;
  top:0;
  height:100dvh;
  overflow:hidden;
  background:radial-gradient(120% 110% at 22% 46%,#d6c9ee 0%,#cbbbe6 52%,#bcaadd 100%);
}
.hero-copy {
  position:absolute;
  z-index:4;
  opacity:0;
  visibility:hidden;
  transition:opacity 460ms var(--goom-ease),transform 620ms var(--goom-ease),visibility 460ms;
}
.hero-copy.is-on { opacity:1; visibility:visible; }
.hero-copy[data-scene="1"] {
  left:clamp(20px,4.5vw,74px);
  top:50%;
  width:min(31vw,430px);
  text-align:right;
  transform:translateY(-50%) translateY(18px);
}
.hero-copy[data-scene="1"].is-on { transform:translateY(-50%); }
.hero-copy .f-eyebrow { display:block; margin-bottom:14px; color:rgba(43,23,103,.5); font-size:11px; font-weight:500; letter-spacing:.26em; }
.hero-copy h1,.hero-copy h2 { margin:0; color:#2b1767; font-size:clamp(24px,2.7vw,40px); font-weight:500; line-height:1.08; letter-spacing:-.04em; }
.hero-copy .hero-sub { margin:12px 0 0; margin-inline-start:auto; color:#a33512; font-size:clamp(12px,1vw,14px); font-weight:900; letter-spacing:.16em; text-align:right; }
.hero-copy p { margin:14px 0 0; margin-inline-start:auto; max-width:30ch; color:rgba(43,23,103,.72); font-size:clamp(15px,1.2vw,18px); line-height:1.6; }
.hero-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:12px; margin-top:clamp(20px,2.4vw,32px); }
.hero-btn {
  display:inline-flex;
  align-items:center;
  min-height:52px;
  padding:14px 30px;
  border-radius:999px;
  background:#2b1767;
  color:#fff;
  font-size:15px;
  font-weight:500;
  transition:background 220ms ease,transform 220ms var(--goom-ease);
}
.hero-btn:hover { background:var(--goom-orange); color:#fff; transform:translateY(-2px); }
.hero-btn.ghost {
  background:rgba(255,255,255,.66);
  color:#2b1767;
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 0 0 1px rgba(43,23,103,.14),0 8px 24px rgba(46,33,112,.14);
}
.hero-btn.ghost:hover { background:#fff; color:#2b1767; }

.hero-cue { position:absolute; z-index:5; left:50%; bottom:24px; display:grid; justify-items:center; gap:9px; color:#2b1767; font-size:10px; font-weight:500; letter-spacing:.34em; transform:translateX(-50%); opacity:calc(1 - var(--p) * 5); }
.hero-cue i { display:block; width:1px; height:40px; background:linear-gradient(#2b1767,rgba(43,23,103,0)); animation:goomHint 2.1s var(--goom-ease) infinite; }

/* ---------- How it works: three glass steps on a 3D reveal ---------- */
.how { position:relative; overflow:clip; padding:clamp(84px,9vw,140px) clamp(18px,5vw,84px); background:linear-gradient(180deg,#e3d5f7,#cbb8ec); }
.how::before { content:''; position:absolute; left:-10%; top:-30%; width:60%; height:120%; background:radial-gradient(closest-side,rgba(255,255,255,.6),transparent 70%); pointer-events:none; }
.how-inner { position:relative; max-width:1320px; margin-inline:auto; }
.how-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 56px; margin-bottom:clamp(40px,5vw,68px); }
.how-head .f-eyebrow { display:block; margin-bottom:14px; color:rgba(43,23,103,.5); font-size:11px; font-weight:500; letter-spacing:.26em; }
.how-head h2 { max-width:15ch; margin:0; color:#2b1767; font-size:clamp(30px,3.4vw,50px); font-weight:500; line-height:1.05; letter-spacing:-.04em; }
.how-head p { margin:0 0 6px; max-width:36ch; color:rgba(43,23,103,.68); font-size:clamp(15px,1.15vw,17px); line-height:1.62; text-align:left; }
.how-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px); perspective:1200px; }
.how-card {
  position:relative;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:clamp(28px,2.8vw,40px);
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.52) 52%,rgba(255,255,255,.74));
  backdrop-filter:blur(20px) saturate(190%);
  -webkit-backdrop-filter:blur(20px) saturate(190%);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 0 0 1px rgba(43,23,103,.07),0 20px 50px rgba(56,30,116,.18);
  transform-style:preserve-3d;
  transform:translateY(30px) rotateX(9deg);
  opacity:0;
  transition:transform 780ms var(--goom-ease),opacity 620ms var(--goom-ease),box-shadow 300ms ease;
}
.how-card.is-visible { transform:none; opacity:1; }
.how-card:nth-child(2) { transition-delay:110ms; }
.how-card:nth-child(3) { transition-delay:220ms; }
.how-card:hover { box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 56px rgba(56,30,116,.2); }
.how-card::after { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(255,255,255,.1) 46%,rgba(255,255,255,.7)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.how-step { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:#2b1767; color:#fff; font-size:15px; font-weight:500; }
.how-card h3 { margin:0; color:#2b1767; font-size:clamp(21px,2vw,27px); font-weight:500; line-height:1.14; letter-spacing:-.03em; }
.how-card p { margin:0; color:rgba(43,23,103,.7); font-size:15.5px; line-height:1.66; }

/* ---------- FAQ ---------- */
.faq { position:relative; padding:clamp(84px,9vw,140px) clamp(18px,5vw,84px); background:#fff8ea; }
.faq-inner { max-width:1080px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:start; }
.faq-head .f-eyebrow { display:block; margin-bottom:16px; color:rgba(43,23,103,.5); font-size:11px; font-weight:500; letter-spacing:.26em; }
.faq-head h2 { margin:0; color:#2b1767; font-size:clamp(30px,3.8vw,54px); font-weight:500; line-height:1.04; letter-spacing:-.045em; }
.faq-head p { margin:18px 0 0; color:rgba(43,23,103,.66); font-size:16px; line-height:1.62; }
.faq-head a { display:inline-flex; margin-top:22px; padding-block:7px; border-bottom:1px solid currentColor; color:#a33512; font-size:14px; font-weight:500; }
.faq-list { display:grid; }
.faq-item { border-bottom:1px solid rgba(43,23,103,.16); }
.faq-item:first-child { border-top:1px solid rgba(43,23,103,.16); }
.faq-q {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:22px 0;
  border:0;
  background:transparent;
  color:#2b1767;
  font-size:clamp(16px,1.4vw,19px);
  font-weight:500;
  line-height:1.4;
  text-align:start;
  cursor:pointer;
}
.faq-q span:last-child { position:relative; flex:none; width:20px; height:20px; }
.faq-q span:last-child::before,
.faq-q span:last-child::after { content:''; position:absolute; left:50%; top:50%; background:#2b1767; transform:translate(-50%,-50%); transition:transform 340ms var(--goom-move),opacity 240ms ease; }
.faq-q span:last-child::before { width:16px; height:1.5px; }
.faq-q span:last-child::after { width:1.5px; height:16px; }
.faq-item.is-open .faq-q span:last-child::after { transform:translate(-50%,-50%) rotate(90deg); opacity:0; }
.faq-a { display:grid; grid-template-rows:0fr; transition:grid-template-rows 420ms var(--goom-move); }
.faq-item.is-open .faq-a { grid-template-rows:1fr; }
.faq-a > div { overflow:hidden; }
.faq-a p { margin:0; padding:0 0 24px; max-width:62ch; color:rgba(43,23,103,.7); font-size:15.5px; line-height:1.68; }

/* ---------- Formula stage: the 3D depth carousel of the five bottles ---------- */
.formula {
  --f-ink:#2b1767;
  position:relative;
  height:290dvh;
  background:#cbbbe6;
}
.formula-pin { position:sticky; top:0; height:100dvh; overflow:hidden; background:#cbbbe6; }
.formula-blob { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.formula-plate {
  position:absolute;
  inset:0;
  max-width:none;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:68% 50%;
  transform:scale(var(--blob-scale,1));
  transition:transform 900ms var(--goom-ease);
}

.formula-head {
  position:absolute;
  z-index:4;
  right:clamp(20px,4.4vw,74px);
  top:50%;
  width:min(28vw,312px);
  text-align:right;
  transform:translateY(-50%);
}
.formula-head .f-eyebrow { display:block; margin-bottom:16px; color:rgba(43,23,103,.5); font-size:11px; font-weight:500; letter-spacing:.26em; }
.formula-head h2 { margin:0; color:var(--f-ink); font-size:clamp(26px,2.7vw,40px); font-weight:500; line-height:1.1; letter-spacing:-.04em; }
.formula-head .f-rule { width:52px; height:1px; margin:26px 0 26px auto; background:rgba(43,23,103,.28); }

.formula-stage { position:absolute; inset:0 min(28vw,312px) 0 0; z-index:3; display:grid; place-items:center; perspective:1500px; perspective-origin:50% 46%; }
.formula-rail { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.formula-item {
  position:absolute;
  left:50%;
  top:46%;
  width:clamp(190px,17vw,268px);
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translate3d(var(--x,0),var(--y,0),var(--z,0)) rotateY(var(--ry,0deg));
  transition:transform 780ms var(--goom-move),opacity 520ms var(--goom-ease),filter 520ms var(--goom-ease);
  will-change:transform;
}
.formula-item img { display:block; width:100%; height:auto; filter:drop-shadow(0 34px 44px rgba(52,26,110,.34)); }
.formula-item::after {
  content:'';
  position:absolute;
  left:50%;
  bottom:-6%;
  width:78%;
  height:26px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(60,32,120,.34),transparent 72%);
  transform:translateX(-50%) translateZ(-1px);
}
.formula-item.is-dim img { filter:drop-shadow(0 22px 34px rgba(52,26,110,.28)) brightness(.97); }

.formula-arrows { position:absolute; z-index:6; left:clamp(20px,4.4vw,74px); bottom:clamp(84px,12vh,132px); display:flex; gap:10px; }
.formula-arrow {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border:1px solid rgba(43,23,103,.22);
  border-radius:50%;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(14px) saturate(170%);
  -webkit-backdrop-filter:blur(14px) saturate(170%);
  color:var(--f-ink);
  font-size:20px;
  cursor:pointer;
  transition:background 180ms ease,transform 140ms var(--goom-ease);
}
.formula-arrow:hover { background:#fff; }
.formula-arrow:active { transform:scale(.94); }
.formula-item { cursor:pointer; }

.formula-caption { min-height:246px; }
.formula-caption .f-kicker { display:block; direction:ltr; unicode-bidi:isolate; text-align:right; margin-bottom:12px; color:var(--f-accent-ink,#a33512); font-size:11px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; }
.formula-caption h3 { margin:0; color:var(--f-ink); font-size:clamp(23px,2.3vw,34px); font-weight:500; line-height:1.02; letter-spacing:-.04em; }
.formula-caption p { margin:14px 0 0; color:rgba(43,23,103,.7); font-size:clamp(14px,1.15vw,17px); line-height:1.6; }
.formula-caption ul { margin:18px 0 0; padding:0; list-style:none; display:grid; gap:7px; }
.formula-caption li { position:relative; padding-inline-start:15px; color:rgba(43,23,103,.6); font-size:13px; }
.formula-caption li::before { content:''; position:absolute; inset-inline-start:0; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--f-accent,#f45f2b); }
.formula-caption .f-cta { display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:13px 26px; border-radius:99px; background:var(--f-ink); color:#fff; font-size:14px; font-weight:500; transition:background 220ms ease,transform 220ms var(--goom-ease); }
.formula-caption .f-cta:hover { background:var(--f-accent-ink,#a33512); color:#fff; transform:translateY(-2px); }
.formula-caption-inner { transition:opacity 340ms var(--goom-ease),transform 340ms var(--goom-ease); }
.formula-caption.is-swapping .formula-caption-inner { opacity:0; transform:translateY(12px); }

.formula-track {
  position:absolute;
  z-index:5;
  right:clamp(20px,4.4vw,74px);
  left:clamp(20px,4.4vw,74px);
  bottom:clamp(30px,4.6vh,54px);
  max-width:none;
}
.formula-track-line { position:relative; height:1px; background:rgba(43,23,103,.34); }
.formula-track-fill { position:absolute; inset:0; transform-origin:left center; transform:scaleX(0); background:var(--f-accent,#f45f2b); transition:transform 620ms var(--goom-move); }
.formula-nodes { position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; }
.formula-node { position:relative; width:34px; height:34px; padding:0; border:0; background:transparent; cursor:pointer; }
.formula-node i { position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 1px rgba(43,23,103,.5); transform:translate(-50%,-50%); transition:transform 320ms var(--goom-move),background 320ms ease,box-shadow 320ms ease; }
.formula-node[aria-selected="true"] i { background:var(--f-accent,#f45f2b); box-shadow:0 0 0 5px rgba(244,95,43,.2); transform:translate(-50%,-50%) scale(1.34); }
.formula-node span { position:absolute; left:50%; top:30px; color:rgba(43,23,103,.62); font-size:clamp(9px,.82vw,12px); font-weight:500; letter-spacing:.16em; white-space:nowrap; text-transform:uppercase; transform:translateX(-50%); transition:color 320ms ease; }
.formula-node[aria-selected="true"] span { color:var(--f-accent-ink,#a33512); }
.formula-track { padding-bottom:26px; }

/* Restored original brand section. */
.gh-brand {
  --gh-ink:#2b1767;
  --gh-muted:#776c85;
  --gh-paper:#fff8ea;
  --gh-line:#dccfbe;
  --gh-orange:#ed6b3f;
  --gh-page:clamp(22px,5.5vw,88px);
  position:relative;
  overflow:clip;
  padding-block:clamp(100px,10vw,160px);
  color:var(--gh-ink);
  background:var(--gh-paper);
}
.gh-container { width:min(100%,1440px); margin-inline:auto; padding-inline:var(--gh-page); }
.gh-brand h2,.gh-brand p,.gh-brand figure { margin:0; }
.gh-eyebrow { display:block; margin-bottom:18px; font-size:12px; font-weight:500; letter-spacing:.11em; text-transform:uppercase; }
.gh-brand-statement { position:relative; padding-bottom:76px; }
.gh-brand-statement h2 { max-width:1120px; font-size:clamp(52px,7.4vw,112px); font-weight:500; line-height:.92; letter-spacing:-.055em; }
.gh-brand-statement h2 span { color:var(--gh-orange); }
.gh-brand-signature { position:absolute; left:0; bottom:75px; color:var(--gh-ink); font-size:19px; font-weight:900; line-height:1.05; transform:rotate(-8deg); }
.gh-brand-grid { display:grid; grid-template-columns:1.08fr .82fr; align-items:start; gap:9%; }
.gh-brand-photo { position:sticky; top:100px; min-height:690px; }
.gh-brand-photo video { display:block; width:100%; height:650px; object-fit:cover; border-radius:120px 28px 120px 28px; background:#d9c8ef; }
.gh-brand-photo>img { position:absolute; left:-34px; bottom:34px; width:190px; height:235px; object-fit:cover; border:10px solid var(--gh-paper); border-radius:90px 20px 90px 20px; transform:rotate(-7deg); }
.gh-brand-photo figcaption { margin-top:16px; color:var(--gh-muted); font-size:12px; }
.gh-brand-copy { padding-top:20px; }
.gh-brand-copy p { max-width:520px; margin-bottom:34px; font-size:clamp(18px,1.55vw,23px); line-height:1.7; }
.gh-brand-copy .gh-lead { margin-bottom:42px; color:var(--gh-orange); font-size:clamp(29px,3vw,46px); line-height:1.25; }
.gh-brand-finale { padding-top:34px; border-top:1px solid var(--gh-line); }
.gh-brand-finale strong { font-size:1.45em; font-weight:500; }
.gh-text-link { display:inline-flex; align-items:center; gap:18px; padding-block:8px; border-bottom:1px solid currentColor; color:inherit; font-size:15px; font-weight:500; }
.gh-icon { width:19px; height:19px; flex-shrink:0; transition:transform 200ms ease; }

/* Testimonial ring — the rotating 3D carousel, built on the reference technique. */
#stories { position:relative; overflow:hidden; padding:clamp(62px,7vw,100px) 0 clamp(58px,6vw,90px); color:#fff; background:radial-gradient(96% 72% at 50% 56%,#46237e 0%,#24124f 48%,#0f0729 100%); }
#stories>div { position:relative; z-index:2; }
.stories-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px 40px; max-width:1320px; margin:0 auto; padding:0 clamp(20px,5vw,80px); }
#stories h2 { max-width:11em; margin:0; color:#fff; font-size:clamp(34px,4.2vw,60px); font-weight:500; line-height:1.02; letter-spacing:-.045em; }
#stories .stories-sub { max-width:34ch; margin:0 0 6px; color:rgba(255,255,255,.6); font-size:clamp(14px,1.05vw,16px); line-height:1.6; text-align:left; }

/* Reference technique: perspective scene + preserve-3d ring + per-card rotateY/translateZ. */
.stories-scene {
  display:grid;
  overflow:hidden;
  height:clamp(400px,52vh,560px);
  margin-top:clamp(24px,3vw,44px);
  font-size:clamp(11px,1.05vw,16px);
  perspective:35em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);
}
.stories-ring {
  display:grid;
  place-self:center;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 520ms var(--goom-move);
}
.stories-ring.is-free { transition:none; }
.stories-card {
  --w:17.5em;
  --ba:calc(1turn / var(--n));
  grid-area:1/1;
  width:var(--w);
  aspect-ratio:7/10;
  padding:0;
  border:0;
  border-radius:1.5em;
  overflow:hidden;
  background:#1b0f45;
  box-shadow:0 26px 60px rgba(6,2,24,.5);
  backface-visibility:hidden;
  cursor:pointer;
  transform:
    rotateY(calc(var(--i) * var(--ba)))
    translateZ(calc(-1 * (.5 * var(--w) + .55em) / tan(.5 * var(--ba))));
}
.stories-card video,.stories-card img { display:block; width:100%; height:100%; object-fit:cover; }
.stories-card .story-play {
  position:absolute;
  inset:auto 0 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 16px;
  background:linear-gradient(transparent,rgba(9,4,30,.78));
  color:#fff;
  font-size:.82em;
  font-weight:500;
  text-align:start;
  opacity:0;
  transition:opacity 260ms var(--goom-ease);
}
.stories-card { position:relative; }
.stories-card:hover .story-play,.stories-card:focus-visible .story-play { opacity:1; }
.stories-controls { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:clamp(22px,2.6vw,34px); }
.stories-arrow { display:grid; place-items:center; width:52px; height:52px; border:1px solid rgba(255,255,255,.34); border-radius:50%; background:rgba(255,255,255,.07); color:#fff; font-size:20px; cursor:pointer; backdrop-filter:blur(10px); transition:background 180ms ease,transform 140ms var(--goom-ease); }
.stories-arrow:active { transform:scale(.94); }
.stories-pause { padding:13px 22px; border:1px solid rgba(255,255,255,.34); border-radius:99px; background:transparent; color:#fff; font-size:13px; font-weight:500; cursor:pointer; transition:background 180ms ease; }
#stories [data-stage3d] { opacity:0; transform:translateY(34px); transition:opacity 800ms var(--goom-ease),transform 800ms var(--goom-ease); }
#stories.is-in-view [data-stage3d] { opacity:1; transform:translateY(0); }

.press-section { background:#fff; padding:clamp(56px,7vw,96px) 0; overflow:hidden; }
.press-section>p { margin:0 0 clamp(28px,4vw,52px); text-align:center; font-size:clamp(22px,2.4vw,34px); font-weight:900; letter-spacing:-.02em; }
.press-mask { position:relative; direction:ltr; mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
.press-track { display:flex; direction:ltr; width:max-content; animation:goomMarqueeA 42s linear infinite; }
.press-mask:hover .press-track,
.press-mask:focus-within .press-track,
.community-rows:hover .community-track,
.community-rows:focus-within .community-track { animation-play-state:paused; }
.press-logo { display:grid; place-items:center; width:clamp(130px,13vw,190px); height:74px; padding:0 10px; flex:none; }
.press-logo img { max-width:100%; max-height:52px; width:auto; height:auto; object-fit:contain; }

.community-section { background:#f7f1e8; padding:clamp(64px,8vw,110px) 0; overflow:hidden; }
.community-head { padding:0 clamp(18px,5vw,84px); max-width:1320px; margin:0 auto clamp(32px,4vw,56px); }
.community-head h2 { margin:0; font-size:clamp(32px,4.2vw,62px); font-weight:900; letter-spacing:-.03em; line-height:1.06; }
.community-head p { margin:18px 0 0; font-size:clamp(15px,1.25vw,18px); color:#6b6046; max-width:38em; }
.community-rows { display:grid; direction:ltr; justify-items:start; gap:clamp(12px,1.6vw,22px); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.community-track { display:flex; direction:ltr; gap:clamp(12px,1.6vw,22px); width:max-content; }
.community-track:first-child { animation:goomMarqueeA 58s linear infinite; }
.community-track:last-child { animation:goomMarqueeB 64s linear infinite; }
.community-track img { width:clamp(190px,20vw,290px); aspect-ratio:4/5; object-fit:cover; border-radius:20px; flex:none; display:block; }

.final-cta { position:relative; background:linear-gradient(150deg,#d6c6ea,#c4b0de); padding:clamp(72px,9vw,130px) clamp(18px,5vw,84px); overflow:hidden; }
.final-cta-inner { max-width:1320px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,4vw,64px); align-items:center; }
.final-cta h2 { margin:0; font-size:clamp(34px,4.8vw,74px); font-weight:900; letter-spacing:-.035em; line-height:1.05; }
.final-cta p { margin:20px 0 0; font-size:clamp(16px,1.3vw,19px); color:#3f3170; max-width:30em; }
.final-cta-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.final-button { display:inline-flex; align-items:center; min-height:54px; padding:14px 30px; border-radius:999px; background:#2e2170; color:#fff; font-size:16px; font-weight:500; }
.final-button.alt { background:transparent; color:#2e2170; border:1px solid rgba(46,33,112,.4); }
.final-art { position:relative; min-height:clamp(280px,34vw,440px); }
.final-art img { position:absolute; left:50%; top:50%; width:min(100%,520px); transform:translate(-50%,-50%); --rot:0deg; animation:goomFloat 8s ease-in-out infinite; }

.goom-footer { background:#2e2170; color:#ede7fa; padding:clamp(52px,6vw,84px) clamp(18px,5vw,84px) 40px; }
.footer-grid { max-width:1320px; margin-inline:auto; display:grid; grid-template-columns:1.2fr repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,48px); }
.footer-grid img { width:132px; height:auto; }
.footer-grid p { margin:18px 0 0; font-size:14px; opacity:.75; max-width:24em; }
.footer-col>p { margin:0 0 14px; font-size:13px; letter-spacing:.1em; opacity:.6; }
.footer-col div { display:grid; gap:9px; font-size:14px; }
.footer-col a { color:#ede7fa; }
.goom-footer>p { max-width:1320px; margin:clamp(34px,4vw,56px) auto 0; font-size:12px; opacity:.55; }

[data-reveal]:not(.how-card) { opacity:0; transform:translate3d(0,34px,0); transition:opacity 700ms var(--goom-ease),transform 700ms var(--goom-ease); }
[data-reveal]:not(.how-card).is-visible { opacity:1; transform:translate3d(0,0,0); }

@media (hover:hover) and (pointer:fine) {
  .gh-text-link:hover .gh-icon { transform:translateX(-5px); }
  .stories-arrow:hover { background:rgba(255,255,255,.2); }
  .final-button:hover { color:#fff; transform:translateY(-2px); }
}

@media (max-width:900px) {
  .goom-nav { display:none; }
  .goom-menu { display:grid; }
  .goom-bar { padding-inline:18px 8px; }
  /* portrait: the film goes full-bleed too, copy sits over a scrim at the foot */
  .hero-pin { display:block; padding:0; }
  .hero-film { position:absolute; inset:0; width:auto; aspect-ratio:auto; transform:scale(calc(1 + var(--p) * .04)); }
  .hero-film::before { display:none; }
  .hero-canvas,.hero-poster { object-position:56% 26%; }
  /* the copy carries its own ground so it can never land on a product */
  .hero-copy[data-scene="1"] {
    position:absolute;
    inset:auto 0 0 0;
    z-index:4;
    width:auto;
    padding:clamp(56px,9vh,96px) clamp(20px,5vw,40px) clamp(34px,5vh,58px);
    text-align:right;
    background:linear-gradient(0deg,#cbbbe6 0,#cbbbe6 64%,rgba(203,187,230,0));
    transform:translateY(16px);
  }
  /* must match the desktop .is-on specificity to beat translateY(-50%) */
  .hero-copy[data-scene="1"].is-on { transform:none; }
  .hero-wordmark { display:none; }
  .hero-copy h1,.hero-copy h2 { font-size:clamp(28px,4.4vw,40px); }
  .gh-brand-grid { grid-template-columns:1fr; gap:60px; }
  .gh-brand-photo { position:relative; top:auto; min-height:620px; }
  .gh-brand-photo video { height:580px; }
  /* portrait stacks the copy over the busiest part of the plate — ground it */
  .how-grid { grid-template-columns:1fr; }
  .faq-inner { grid-template-columns:1fr; gap:36px; }
  .final-cta-inner { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .formula-head {
    inset:0;
    width:auto;
    display:flex;
    flex-direction:column;
    padding:clamp(78px,11vh,110px) clamp(18px,5vw,30px) clamp(92px,13vh,120px);
    transform:none;
    pointer-events:none;
  }
  .formula-head h2 { font-size:clamp(23px,6.2vw,33px); }
  .formula-head .f-rule { display:none; }
  .formula-head .f-eyebrow { margin-bottom:10px; }
  .formula-caption { min-height:0; margin-top:auto; }
  .formula-caption ul { display:none; }
  .formula-caption h3 { font-size:clamp(22px,6vw,30px); }
  .formula-caption p { margin-top:8px; font-size:14px; }
  .formula-caption .f-cta { margin-top:16px; pointer-events:auto; }
  .formula-stage { inset:0; perspective:900px; perspective-origin:50% 50%; }
  .formula-item { top:47%; width:clamp(126px,33vw,172px); }
  .formula-node span { display:none; }
  .formula-track { padding-bottom:0; }
  .formula-blob svg { width:190vw; }
}

@media (max-width:639px) {
  .goom-header { inset:10px 0 auto 0; }
  .goom-brand img { height:23px; }
  .goom-bar-cta { display:none; }
  .hero { height:200dvh; }
  .hero-copy h1,.hero-copy h2 { font-size:clamp(28px,7.6vw,38px); }
  .hero-copy p { font-size:15px; }
  .hero-actions { gap:10px; }
  .hero-btn { min-height:48px; padding:12px 22px; font-size:14px; }
  .hero-cue { display:none; }
  #stories { padding-block:60px 70px; }
  .stories-head { padding-inline:22px; }
  #stories h2 { max-width:9em; font-size:clamp(30px,8.6vw,44px); }
  #stories .stories-sub { text-align:right; }
  .stories-scene { height:clamp(230px,30vh,290px); font-size:12px; }
  .stories-card .story-play { font-size:1.05em; padding:10px 12px; }
  .stories-controls { gap:10px; margin-top:20px; }
  .stories-arrow { width:46px; height:46px; }
  .gh-brand { padding-block:90px; }
  .gh-brand-statement { padding-bottom:50px; }
  .gh-brand-statement h2 { font-size:49px; }
  .gh-brand-signature { display:none; }
  .gh-brand-photo { min-height:505px; }
  .gh-brand-photo video { height:480px; border-radius:70px 20px 70px 20px; }
  .gh-brand-photo>img { left:-8px; bottom:14px; width:125px; height:160px; border-width:7px; }
  .gh-brand-copy p { font-size:18px; }
  .community-rows { gap:12px; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid>div:first-child { grid-column:1/-1; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; }
  [data-reveal],.how-card { opacity:1; transform:none; transition:none; }
  .hero { height:100dvh; }
  .hero-cue { display:none; }
  .goom-bar::after { display:none; }
  .formula-item,.formula-caption-inner,.formula-track-fill,.formula-blob svg,.stories-ring,.gh-icon { transition:none; }
}


.goom-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 20px; /* מרחיק את האייקון מהקצה השמאלי */
  padding: 8px; /* נותן לאייקון קצת מרווח נשימה */
  color: #1a1a24; /* צבע האייקון - תוכל לשנות לצבע המדויק של הטקסט באתר */
  border-radius: 50%; /* מכין רקע עגול למקרה שתרצה אפקט מעבר עכבר */
  transition: all 0.3s ease;
  text-decoration: none;
}

/* אפקט יפה כשעוברים עם העכבר על האייקון */
.goom-login-btn:hover {
  background-color: rgba(0, 0, 0, 0.05); /* רקע עדין בהעברת עכבר */
  color: #5b42f3; /* צבע סגול בהעברת עכבר - מומלץ לשנות לצבע המותג שלך */
}

.goom-login-btn svg {
  width: 26px;
  height: 26px;
}

.hero-subtitle {
  font-size: 1.5rem; 
  font-weight: 800; 
  letter-spacing: 0.15em; 
  line-height: 1.3;
  margin-top: 5px; 
  margin-bottom: 30px; 
  
  /* יישור הטקסט - מבטיח שיישב בדיוק מתחת לעברית */
  text-align: center; 
  
  /* אם הכותרת בעברית מיושרת לימין, שנה את השורה למעלה ל: text-align: right; */

}

/* ---------- עיצוב הלוגו הענק ברקע ---------- */
.hero-bg-logo {
  position: absolute;
  left: 3%;
  top: 50%;
  transform: translateY(-50%);
  width: min(46vw, 580px);
  height: auto;
  z-index: 1;
  opacity: 0.35;
  pointer-events: none;
  animation: logoFloat 10s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(-50%) translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-50%) translateY(-10px) scale(1.02);
  }
}

/* מיקום בלוק הטקסט והלוגו */
.hero-copy[data-scene="1"] {
  position: absolute;
  z-index: 4;
  right: clamp(40px, 6vw, 120px);
  left: auto;
  top: 52%;
  width: min(34vw, 420px);
  text-align: right;
  transform: translateY(-50%);
}

.hero-subtitle {
  font-size: clamp(16px, 1.8vw, 24px); 
  font-weight: 800; 
  letter-spacing: 0.15em; 
  line-height: 1.3;
  margin-top: 5px; 
  margin-bottom: 24px; 
  text-align: center; 
  color: #6a7c92;
}