:root{
    /* ---- Design tokens ---- */
    --forest-950: #0d160d;
    --forest-900: #142414;
    --forest-800: #1a2e1a;
    --forest-700: #24401f;
    --moss-500: #4a7c3f;
    --moss-400: #6b9a5c;
    --paper: #eef0e2;
    --paper-warm: #F0EDE4;
    --ink: #1c2419;
    --ink-soft: #4a5443;
    --gold: #d4a24c;
    --amber: #e8935a;
    --amber-deep: #c96f3a;
    --lilac: #8e7cc3;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', -apple-system, sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --container: 1240px;
    /* --pad is the simple side padding .container (and anything centered
       the same way) uses. --edge is that same padding PLUS the centering
       offset .container gets "for free" from its own max-width — it's what
       a position:fixed element (like nav, which has no max-width of its
       own to center it) needs instead, so it still lands on the exact same
       content column as everything inside .container. */
    --pad: 32px;
    --edge: max(var(--pad), calc((100vw - var(--container)) / 2 + var(--pad)));
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body {
    font-family: var(--font-body);
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
  }
  img { max-width:100%; display:block; }
  a { color:inherit; }
  .container { max-width: var(--container); margin:0 auto; padding:0 var(--pad); }
  /* --edge steps down at the same breakpoints .container's layout already
     bends at, so the nav (and anything else reading --edge) never drifts
     out of line with the grid every section below it uses. */
  @media (max-width:960px){ :root{ --pad:30px; } }
  @media (max-width:760px){ :root{ --pad:20px; } }
  @media (max-width:380px){ :root{ --pad:16px; } }

  h1,h2,h3 { font-family: var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }
  .eyebrow {
    font-family: var(--font-mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
    color: var(--moss-500); font-weight:500; margin-bottom:14px; display:block;
  }

  ::selection { background: var(--gold); color:#1c2419; }
  :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior:auto !important; }
  }

  /* ================= NAV ================= */
  nav {
    position: fixed; top:18px; left:var(--edge); right:var(--edge); z-index:200;
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 30px; border-radius:999px;
    background: rgba(24,34,22,0.3);
    backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 10px 30px rgba(0,0,0,0.18);
    transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, top 0.35s ease;
  }
  nav.compact {
    padding: 10px 26px; background: rgba(15,24,15,0.6);
    backdrop-filter: blur(24px) saturate(190%); -webkit-backdrop-filter: blur(24px) saturate(190%);
    border-color: rgba(255,255,255,0.13);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 12px 34px rgba(0,0,0,0.26);
  }
  .logo { display:flex; align-items:center; gap:10px; color:#fff; text-decoration:none; }
  .logo-mark { height:36px; width:auto; display:block; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.35)); }
  .logo-word { font-family: var(--font-display); font-weight:600; font-size:19px; letter-spacing:0.03em; color:#fff; }
  .nav-links { display:flex; gap:32px; list-style:none; }
  .nav-links a { color:#fff; text-decoration:none; font-size:14px; font-weight:500; opacity:0.82; transition:opacity 0.2s; }
  .nav-links a:hover { opacity:1; }
  .lang-switch { display:flex; gap:4px; background:rgba(255,255,255,0.12); border-radius:20px; padding:3px; }
  .lang-switch button {
    background:none; border:none; color:#fff; font-family: var(--font-mono); font-size:12px;
    padding:6px 13px; border-radius:16px; cursor:pointer; opacity:0.65; transition: all 0.2s;
  }
  .lang-switch button.active { background:#fff; color: var(--forest-900); opacity:1; font-weight:600; }
  .nav-burger { display:none; }
  @media (max-width: 760px) {
    nav { top:12px; padding: 14px 18px; }
    nav.compact { padding: 10px 18px; }
    .nav-links { display:none; }
  }

  /* ================= HERO ================= */
  .hero-wrapper { position: relative; height: 300vh; }
  .hero-sticky { position: sticky; top:0; height:100vh; overflow:hidden; background:var(--forest-950); }
  #scene-canvas { position:absolute; top:0; left:0; width:100%; height:100%; background:var(--forest-950); }
  .hero-darken {
    position:absolute; inset:0; pointer-events:none;
    background: linear-gradient(270deg, rgba(6,12,6,0.66) 0%, rgba(6,12,6,0.3) 40%, rgba(6,12,6,0.04) 62%);
  }
  @media (max-width:760px){
    .hero-darken{ background: linear-gradient(180deg, rgba(6,12,6,0.3) 0%, rgba(6,12,6,0.1) 35%, rgba(6,12,6,0.62) 100%); }
  }

  .hero-vignette {
    position:absolute; inset:0; pointer-events:none; z-index:1;
    box-shadow: inset 0 0 220px 70px rgba(0,0,0,0.8);
  }

  .hero-text {
    position:absolute; right:var(--edge); top:50%; transform:translateY(-52%);
    color:#fff; max-width: 500px; z-index:5; text-align:left;
    opacity:0; filter: blur(6px);
    transition: opacity 1.3s cubic-bezier(.16,1,.3,1), transform 1.3s cubic-bezier(.16,1,.3,1), filter 1.3s ease;
  }
  .hero-text.visible { opacity:1; transform:translateY(-50%); filter: blur(0); }
  .hero-text .eyebrow {
    display:inline-flex; align-items:center; gap:8px;
    color: var(--gold); background: rgba(212,162,76,0.12);
    border: 1px solid rgba(212,162,76,0.4);
    padding: 7px 16px 7px 12px; border-radius:20px;
    backdrop-filter: blur(6px);
    box-shadow: 0 0 24px rgba(212,162,76,0.18);
    font-family: var(--font-mono); font-size:14px; letter-spacing:0.16em;
  }
  .hero-text .eyebrow::before {
    content:''; width:6px; height:6px; border-radius:50%; background:var(--gold);
    box-shadow: 0 0 8px 2px rgba(212,162,76,0.8);
    animation: dot-pulse 1.8s ease-in-out infinite;
  }

  .hero-text h1 {
    font-size: clamp(34px, 5vw, 66px); margin-bottom:22px; margin-top:18px;
    background: linear-gradient(100deg, #fff 15%, var(--gold) 42%, #fff 60%, var(--gold) 85%);
    background-size: 250% auto;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: text-shimmer 7s linear infinite;
    text-shadow: 0 2px 40px rgba(212,162,76,0.35);
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.4));
  }
  @keyframes text-shimmer { 0%{ background-position: 0% center; } 100%{ background-position: -250% center; } }
  .hero-divider {
    width:120px; height:1px; margin-bottom:22px;
    background: linear-gradient(90deg, var(--gold) 0%, rgba(212,162,76,0.15) 100%);
  }
  @keyframes dot-pulse { 0%,100%{ opacity:0.5; transform:scale(0.85);} 50%{ opacity:1; transform:scale(1.15);} }
  .hero-text p {
    font-size: clamp(17px, 1.45vw, 20px); line-height:1.6; color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 16px rgba(0,0,0,0.55); max-width: 420px;
    border-left: 2px solid rgba(255,255,255,0.18); padding-left:16px;
  }
  @media (max-width:760px){
    .hero-text{ right:6%; left:6%; max-width:none; top:auto; bottom:15%; transform:none; }
    .hero-text.visible{ transform:none; }
    .hero-text h1{ font-size:26px; }
    .hero-text p{ font-size:14px; }
  }

  /* ---- Phase transition: intro fades out, history content fades in ---- */
  .hero-text, .hero-bottles {
    transition: opacity 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s cubic-bezier(.4,0,.2,1), transform 1.1s cubic-bezier(.4,0,.2,1);
  }
  .hero-sticky:not([data-stage="0"]) .hero-text { opacity:0; filter:blur(10px); transform:translateY(-52%) translateY(-18px); pointer-events:none; }
  .hero-sticky:not([data-stage="0"]) .hero-bottles { opacity:0; filter:blur(10px); transform:scale(0.97); pointer-events:none; }

  /* ================= History section: staged reveal — left text, then right text, then product ================= */
  .history-wrap { position:absolute; inset:0; z-index:6; }
  .history-darken {
    position:absolute; inset:0; z-index:0; pointer-events:none;
    background: radial-gradient(ellipse at 50% 45%, rgba(2,4,2,0.55) 0%, rgba(2,4,2,0.85) 100%);
    opacity:0;
  }

  /* ---- Rising fog that thickens into a solid paper-warm handoff to the next section ---- */
  .hero-fog-final {
    position:absolute; inset:0; z-index:8; pointer-events:none; overflow:hidden;
    opacity:0;
    transition: opacity 0.2s linear;
  }
  .hero-fog-final img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom;
    display:block;
  }
  /* Guarantees a fully solid, exact-match strip right at the seam so no hard line
     appears where the pinned hero hands off to the section below. */
  .hero-fog-final::after {
    content:''; position:absolute; left:0; right:0; bottom:0; height:22%; z-index:1;
    background: linear-gradient(to top, #F0EDE4 0%, #F0EDE4 35%, rgba(240,237,228,0) 100%);
  }

  .history-container {
    position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:var(--container); padding:0 var(--pad); box-sizing:border-box;
    transition: opacity 0.2s linear;
  }

  .history-left, .product-info, .product-showcase, .product-tabs, .history-timeline {
    position:absolute; opacity:0; filter:blur(8px); transform:translateY(20px); pointer-events:none;
    transition: opacity 1s cubic-bezier(.4,0,.2,1), filter 1s cubic-bezier(.4,0,.2,1), transform 1s cubic-bezier(.4,0,.2,1);
  }
  .hero-sticky[data-stage="2"] .history-left,
  .hero-sticky[data-stage="3"] .history-left,
  .hero-sticky[data-stage="4"] .history-left,
  .hero-sticky[data-stage="2"] .history-timeline,
  .hero-sticky[data-stage="3"] .history-timeline,
  .hero-sticky[data-stage="4"] .history-timeline { opacity:1; filter:blur(0); transform:translateY(0); pointer-events:auto; }

  .hero-sticky[data-stage="3"] .product-info,
  .hero-sticky[data-stage="4"] .product-info { opacity:1; filter:blur(0); transform:translateY(0); pointer-events:auto; }

  .hero-sticky[data-stage="4"] .product-showcase,
  .hero-sticky[data-stage="4"] .product-tabs { opacity:1; filter:blur(0); transform:translateY(0); pointer-events:auto; }

  .history-left { left:0; top:18%; max-width:460px; padding:36px 40px; }
  .history-left::before, .product-info::before, .product-showcase::before, .product-tabs::before {
    content:''; position:absolute; inset:-44px; z-index:-1;
    background: radial-gradient(ellipse at center, rgba(2,3,2,0.82) 0%, rgba(3,5,3,0.55) 42%, rgba(3,5,3,0) 74%);
    filter: blur(32px);
  }
  .history-left h2 {
    position:relative; z-index:1;
    font-family: var(--font-display); font-weight:600; font-size: clamp(24px, 2.4vw, 36px);
    color:#fff8f0; line-height:1.22; margin-bottom:20px; white-space:normal;
    text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  }
  .history-number-wrap { position:relative; margin-bottom:-38px; }
  .history-number, .history-number-blur {
    font-family: var(--font-display); font-weight:700; font-size: clamp(100px, 10.5vw, 175px);
    color: rgba(212,162,76,0.34); line-height:1; letter-spacing:-0.02em;
    user-select:none;
  }
  .history-number-blur {
    position:absolute; inset:0; filter: blur(7px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 48%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, transparent 48%, black 100%);
  }
  .history-divider { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
  .history-divider .line { flex:1; height:1px; background: linear-gradient(90deg, var(--gold), rgba(212,162,76,0)); max-width:70px; }
  .history-divider .line.right { background: linear-gradient(90deg, rgba(212,162,76,0), var(--gold)); }
  .history-divider svg { width:16px; height:16px; color:var(--gold); flex-shrink:0; }
  .history-left p {
    position:relative; z-index:1;
    font-size: clamp(14px, 1.05vw, 16px); line-height:1.7; color: var(--gold);
    text-shadow: 0 1px 12px rgba(0,0,0,0.7);
  }

  /* Product showcase (center): formula label + bottle */
  .product-showcase { left:41%; top:20%; width:20%; text-align:center; padding:30px 20px; }
  .formula-label {
    position:relative; z-index:1;
    font-family: var(--font-mono); font-size:12.5px; letter-spacing:0.14em; color:rgba(255,255,255,0.7);
    margin-bottom:18px; text-shadow: 0 1px 10px rgba(0,0,0,0.6);
    transition: opacity 0.42s ease;
  }
  .product-bottle-wrap { position:relative; display:inline-block; z-index:1; }
  .product-bottle-wrap::before {
    content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:150%; height:150%; border-radius:50%; z-index:-1;
    background: radial-gradient(ellipse at center, rgba(212,162,76,0.35) 0%, rgba(212,162,76,0.12) 45%, rgba(212,162,76,0) 72%);
    filter: blur(28px);
    animation: glow-breathe 5s ease-in-out infinite;
  }
  .product-bottle-wrap img {
    position:relative; height:38vh; max-height:400px; width:auto; margin:0 auto; display:block;
    filter: brightness(0.94) saturate(1.15) sepia(0.3) hue-rotate(-8deg) contrast(1.05) drop-shadow(0 20px 26px rgba(0,0,0,0.55));
    -webkit-box-reflect: below 3px linear-gradient(transparent 60%, rgba(255,255,255,0.16));
    transition: opacity 0.42s ease, transform 0.42s ease;
  }

  /* Product info (right): eyebrow + headline + description */
  .product-info { right:0; top:34%; max-width:380px; text-align:left; padding:36px 40px; }
  .product-info .eyebrow {
    position:relative; z-index:1;
    display:block; font-family: var(--font-mono); font-size:12px; letter-spacing:0.18em;
    color: var(--gold); margin-bottom:16px; text-transform:uppercase;
    transition: opacity 0.42s ease;
  }
  .product-info h3 {
    position:relative; z-index:1;
    font-family: var(--font-display); font-weight:600; font-size: clamp(24px, 2.3vw, 34px); line-height:1.28;
    color: var(--gold); margin-bottom:16px; text-shadow: 0 2px 20px rgba(0,0,0,0.6);
    transition: opacity 0.42s ease;
  }
  .product-info p {
    position:relative; z-index:1;
    font-size: clamp(14px, 1.05vw, 16px); line-height:1.65; color:rgba(255,255,255,0.8);
    text-shadow: 0 1px 12px rgba(0,0,0,0.6);
    transition: opacity 0.42s ease;
  }

  /* Tabs / pagination row */
  .product-tabs {
    left:37%; right:0; bottom:19%; padding:16px 24px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    font-family: var(--font-mono); font-size:13px; letter-spacing:0.03em;
  }
  .product-tab {
    position:relative; z-index:1;
    background:none; border:none; cursor:pointer; padding:4px 0;
    color:rgba(255,255,255,0.55); transition: color 0.25s ease;
  }
  .product-tab .num { opacity:0.7; margin-right:6px; }
  .product-tab.active { color: var(--gold); font-weight:600; }
  .product-tab:hover { color:#fff8f0; }
  .tab-sep { position:relative; z-index:1; color:rgba(255,255,255,0.25); }
  .tab-arrow {
    position:relative; z-index:1;
    background:none; border:1px solid rgba(212,162,76,0.4); color: var(--gold);
    width:30px; height:30px; border-radius:50%; cursor:pointer; margin-left:6px;
    display:inline-flex; align-items:center; justify-content:center; transition: background 0.2s ease;
  }
  .tab-arrow:hover { background: rgba(212,162,76,0.15); }
  /* After the last preview, the arrow itself becomes the invite to the full catalog */
  .tab-arrow.tab-arrow-cta {
    width:auto; height:auto; border-radius:999px; padding:8px 16px 8px 18px; gap:6px;
    font-family: var(--font-body); font-size:12.5px; font-weight:600; white-space:nowrap;
  }
  .tab-arrow.tab-arrow-cta svg { width:13px; height:13px; transition: transform 0.2s ease; }
  .tab-arrow.tab-arrow-cta:hover { background: var(--gold); color: var(--forest-950); }
  .tab-arrow.tab-arrow-cta:hover svg { transform:translateX(2px); }

  .history-timeline {
    position:absolute; left:var(--pad); right:var(--pad); bottom:9%;
    display:flex; align-items:center; gap:16px;
    font-family: var(--font-mono); font-size:13px; letter-spacing:0.06em; color:rgba(255,255,255,0.85);
  }
  .history-timeline .dot { width:8px; height:8px; border-radius:50%; border:1px solid var(--gold); flex-shrink:0; }
  .history-timeline .track { position:relative; flex:1; height:1px; background: rgba(255,255,255,0.22); overflow:visible; }
  .history-timeline .track-fill {
    position:absolute; left:0; top:50%; transform:translateY(-50%); height:2px; width:0%;
    background: linear-gradient(90deg, rgba(212,162,76,0.3), var(--gold));
    box-shadow: 0 0 10px 1px rgba(212,162,76,0.7);
    transition: width 0.2s linear;
  }
  .history-timeline .track-fill::after {
    content:''; position:absolute; right:-3px; top:50%; transform:translateY(-50%);
    width:7px; height:7px; border-radius:50%; background:var(--gold);
    box-shadow: 0 0 8px 2px rgba(212,162,76,0.8);
  }

  @media (max-width:900px){
    .history-container { position:static; max-width:none; padding:0; transform:none; }
    .history-wrap {
      position:absolute; inset:0; overflow-y:auto;
      display:flex; flex-direction:column; justify-content:center;
      padding: 90px 6% 70px;
    }
    .history-left { position:static; max-width:none; order:2; margin-bottom:30px; padding:26px 22px; }
    .history-number, .history-number-blur { font-size:80px; }
    .history-number-wrap { margin-bottom:-20px; }
    .product-showcase { position:static; width:auto; order:3; margin-bottom:22px; }
    .product-bottle-wrap img { height:26vh; }
    .product-info { position:static; max-width:none; order:4; margin-bottom:26px; padding:26px 22px; }
    .product-tabs { position:static; order:5; margin-bottom:30px; justify-content:center; }
    .history-timeline { position:static; order:6; }
  }

  .hero-bottles { position:absolute; z-index:4; left:var(--edge); bottom:7%; perspective: 1400px; transition: transform 0.25s ease-out, opacity 1.1s cubic-bezier(.4,0,.2,1), filter 1.1s cubic-bezier(.4,0,.2,1); transform-style: preserve-3d; }

  /* ---- Ambient glow behind the glass panel ---- */
  .panel-glow {
    position:absolute; inset:-60px; z-index:-1; border-radius:50%;
    background: radial-gradient(ellipse at 50% 55%, rgba(212,162,76,0.35) 0%, rgba(107,154,92,0.22) 40%, rgba(212,162,76,0) 72%);
    filter: blur(38px);
    animation: glow-breathe 5s ease-in-out infinite;
  }
  @keyframes glow-breathe { 0%,100%{ opacity:0.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }

  .glass-panel {
    position:relative; display:flex; align-items:flex-end; gap:0;
    padding: 0;
    border-radius: 22px;
    opacity:0; transform: translateY(50px) scale(0.92); filter: blur(8px);
    transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1), filter 1.1s ease;
    overflow:visible;
  }
  .glass-panel.visible { opacity:1; transform: translateY(0) scale(1); filter: blur(0); }

  .bottles-frame {
    position:relative; overflow:hidden;
    height:80vh; max-height:800px;
    width: calc(80vh * 0.93); max-width: calc(800px * 0.93);
    border-radius: 22px;
    border: 1px solid rgba(212,162,76,0.65);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,162,76,0.15);
  }
  .bottles-frame::after {
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:22px;
    box-shadow: inset 0 0 90px 20px rgba(0,0,0,0.6);
  }
  .bottles-cluster-img {
    display:block; height:100%; width:auto; position:absolute; top:0; left:0;
  }
  @keyframes bottle-bob { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

  /* ---- Callout labels with leader lines, outside the frame ---- */
  .callout {
    position:absolute; z-index:6; display:flex; align-items:center; gap:0;
    opacity:0; transform:translateX(-8px);
    transition: opacity 1s ease 0.6s, transform 1s ease 0.6s;
    pointer-events:none;
  }
  .glass-panel.visible .callout { opacity:1; transform:translateX(0); }
  .callout-pill {
    font-family: var(--font-mono); font-size:14px; letter-spacing:0.04em; white-space:nowrap;
    color:#f4e9d8; background: rgba(8,12,8,0.78);
    border: 1px solid rgba(212,162,76,0.55);
    padding: 11px 22px; border-radius:24px;
  }
  .callout-line { height:0; border-top:1px dashed rgba(212,162,76,0.75); }
  .callout-dot { width:6px; height:6px; border-radius:50%; background:var(--gold); box-shadow:0 0 6px 1px rgba(212,162,76,0.7); flex-shrink:0; }

  /* Omega 3 — fully inside the image, short dashed line reaching left from the bottle */
  .callout-omega { left:269px; top:30%; z-index:7; }
  .callout-omega .callout-line { width:50px; }
  /* Magnesium + B6 — straddles the image's left edge exactly half in / half out */
  .callout-mag { left:-81px; top:54%; z-index:7; }
  .callout-mag .callout-line { width:140px; }
  /* Vitamin C-500 — same edge-straddling treatment */
  .callout-vitc { left:-77px; top:67%; z-index:7; }
  .callout-vitc .callout-line { width:287px; }

  @media (max-width:900px){ .callout{ display:none; } }

  /* ---- Moss growing on the glass ---- */
  .moss { position:absolute; z-index:3; pointer-events:none; }
  .moss svg { display:block; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.3)); }
  .moss-bl { left:-14px; bottom:-16px; width:92px; }
  .moss-br { right:-10px; bottom:-14px; width:70px; transform: scaleX(-1); }
  .moss-tl { left:20px; top:-12px; width:46px; transform: rotate(180deg); opacity:0.9; }

  @media (max-width:760px){
    .hero-bottles{ right:4%; left:4%; bottom:auto; top:12%; }
    .glass-panel{ padding:24px 12px 16px; border-radius:26px; gap:6px; justify-content:center; }
    .bottle-slot{ padding:0 4px; }
    .bottle-mag{ height:12vh; } .bottle-omega{ height:11vh; } .bottle-vitc{ height:18vh; }
    .bottle-slot:nth-child(1){ margin-right:-34px; }
    .bottle-slot:nth-child(3){ margin-left:-34px; }
    .glass-caption{ font-size:7.5px; margin-top:8px; padding-top:6px; letter-spacing:0.01em; }
    .moss-bl{ width:44px; left:-6px; bottom:-8px; } .moss-br{ width:36px; right:-4px; bottom:-6px; }
    .panel-glow{ inset:-30px; }
  }

  /* ---- Ambient particles ---- */


  .hero-particles { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
  .particle {
    position:absolute; bottom:-10px; border-radius:50%;
    background: radial-gradient(circle, rgba(244,217,118,0.85) 0%, rgba(244,217,118,0) 70%);
    animation: particle-rise linear infinite;
    opacity:0;
  }
  @keyframes particle-rise {
    0% { transform: translateY(0) translateX(0); opacity:0; }
    8% { opacity:0.7; }
    92% { opacity:0.4; }
    100% { transform: translateY(-92vh) translateX(var(--drift,20px)); opacity:0; }
  }


  /* ================= SECTION SHARED ================= */
  section { position:relative; scroll-margin-top: 96px; }
  .section-pad { padding: 120px 0; }
  @media (max-width:760px){ .section-pad{ padding:76px 0; } }

  /* ================= FORMULA CATALOG (preview) ================= */
  .formula-catalog {
    isolation:isolate; overflow:hidden; padding-top:6px !important;
    background:
      radial-gradient(42rem 27rem at 4% 36%, rgba(227,142,76,.13), transparent 72%),
      radial-gradient(34rem 24rem at 105% 70%, rgba(221,132,67,.075), transparent 72%),
      radial-gradient(42rem 26rem at 111% 76%, rgba(103,138,85,.045), transparent 72%),
      linear-gradient(180deg, var(--paper-warm) 0%, #F1EEE5 26%, #F6F2E9 62%, #F1EEE5 100%);
  }
  .formula-catalog::before,
  .formula-catalog::after {
    content:''; position:absolute; z-index:0; width:clamp(230px, 25vw, 380px); height:clamp(345px, 38vw, 570px);
    pointer-events:none; background:url('assets/botanical-catalog-branch.png') center / contain no-repeat;
  }
  .formula-catalog::before { left:clamp(-270px, -14vw, -150px); top:170px; opacity:.12; transform:rotate(-10deg); }
  .formula-catalog::after { right:clamp(-270px, -14vw, -150px); bottom:72px; opacity:.09; transform:scaleX(-1) rotate(-13deg); }
  .formula-catalog > .container { position:relative; z-index:1; }
  @media (max-width:760px){ .formula-catalog{ padding-top:8px !important; } }
  @media (max-width:760px){
    .formula-catalog::before { left:-205px; top:250px; opacity:.08; }
    .formula-catalog::after { right:-210px; bottom:110px; opacity:.06; }
  }

  .fc-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:36px; flex-wrap:wrap; position:relative; }
  .fc-head-left h2 { font-size: clamp(30px,3.4vw,44px); color:var(--forest-900); margin-bottom:14px; }
  .fc-head-left p { font-size:15.5px; line-height:1.6; color:var(--ink-soft); max-width:460px; }

  .fc-search {
    display:flex; align-items:center; gap:12px;
    border:1px solid rgba(26,46,26,0.25); border-radius:30px;
    padding:14px 22px; min-width:320px; color: var(--ink-soft);
    background:rgba(255,255,255,.32); box-shadow:0 6px 18px rgba(38,46,29,.025);
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .fc-search:focus-within { border-color:rgba(201,111,58,.72); background:rgba(255,253,248,.78); box-shadow:0 9px 22px rgba(201,111,58,.09); }
  .fc-search svg { width:18px; height:18px; flex-shrink:0; color: var(--ink-soft); }
  .fc-search input { border:none; outline:none; background:none; flex:1; font-size:14.5px; color:var(--ink); font-family:inherit; }
  .fc-search input::placeholder { color: rgba(74,84,67,0.55); }

  .fc-filters { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:44px; position:relative; }
  .fc-filter-btn {
    padding:11px 22px; border-radius:30px; border:1px solid rgba(26,46,26,0.2);
    background:rgba(255,255,255,.22); font-size:13.5px; cursor:pointer; color: var(--ink);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform .2s ease, box-shadow .2s ease;
    font-family: inherit;
  }
  .fc-filter-btn:hover { border-color: var(--amber-deep); transform:translateY(-1px); box-shadow:0 5px 12px rgba(201,111,58,.07); }
  .fc-filter-btn.active { background:linear-gradient(135deg, #C96F3A, #D98245); color:#fff; border-color:var(--amber-deep); box-shadow:0 7px 16px rgba(201,111,58,.19); }

  .fc-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:26px; position:relative; }
  @media (max-width:1080px){ .fc-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:760px){ .fc-grid{ grid-template-columns:repeat(2,1fr); gap:16px; } .fc-head{ flex-direction:column; align-items:flex-start; } .fc-search{ min-width:0; width:100%; } }
  @media (max-width:480px){ .fc-grid{ gap:12px; } }

  .fc-card {
    --card-accent:rgba(201,111,58,.42); --card-glow:rgba(222,141,75,.10);
    position:relative; overflow:hidden; content-visibility:auto; contain-intrinsic-size:auto 430px;
    background:linear-gradient(150deg, rgba(255,253,248,.96), rgba(248,244,235,.92)); border-radius:22px; padding:30px 22px 26px; text-align:center;
    border:1px solid rgba(26,46,26,.09); box-shadow:0 9px 22px rgba(37,43,30,.035);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .fc-card::before {
    content:''; position:absolute; inset:0 0 auto; height:3px; opacity:.78;
    background:linear-gradient(90deg, transparent 8%, var(--card-accent) 44%, transparent 92%);
  }
  .fc-card > * { position:relative; z-index:1; }
  .fc-card:hover { transform:translateY(-5px); border-color:rgba(201,111,58,.32); box-shadow:0 20px 36px rgba(44,51,33,.11); }
  .fc-card:nth-child(4n+2) { --card-accent:rgba(213,149,69,.46); --card-glow:rgba(227,173,95,.12); }
  .fc-card:nth-child(4n+3) { --card-accent:rgba(182,104,60,.44); --card-glow:rgba(205,119,71,.10); }
  .fc-card:nth-child(4n) { --card-accent:rgba(158,126,76,.40); --card-glow:rgba(184,144,84,.09); }
  .fc-card:first-child { border-color:rgba(201,111,58,.20); background:linear-gradient(145deg, rgba(255,252,246,.96), rgba(249,242,229,.92)); }
  .fc-card-media { position:relative; height:222px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .fc-card-media::after { display:none; }
  .fc-card-arc {
    position:absolute; z-index:0; top:55px; width:184px; height:104px;
    border:1.2px solid var(--card-accent); border-bottom:0;
    border-radius:184px 184px 0 0;
  }
  .fc-card-media img { position:relative; z-index:2; height:208px; width:auto; filter:drop-shadow(0 9px 11px rgba(26,46,26,.13)); transition:transform .25s ease; }
  .fc-card:hover .fc-card-media img { transform:translateY(-3px) scale(1.02); }
  .fc-leaf { position:absolute; z-index:1; width:30px; height:30px; opacity:.26; color:var(--moss-500); }
  .fc-leaf.bl { left:-4px; bottom:-6px; }
  .fc-leaf.br { right:-4px; bottom:-6px; transform:scaleX(-1); }

  .fc-card-name { font-family:var(--font-display); font-weight:600; font-size:19px; color:var(--forest-900); margin-bottom:14px; line-height:1.25; min-height:48px; display:flex; align-items:center; justify-content:center; }
  .fc-card-divider { position:relative; width:154px; height:1px; background:rgba(69,65,49,.28); margin:2px auto 18px; }
  .fc-card-divider::before { display:none; }
  .fc-card-divider::after {
    content:''; position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%;
    transform:translate(-50%,-50%); background:var(--amber-deep); box-shadow:0 0 0 3px rgba(250,248,240,.96);
  }

  .fc-bullets { text-align:left; display:inline-block; }
  .fc-bullet { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.45; color:var(--ink-soft); margin-bottom:8px; }
  .fc-bullet:last-child { margin-bottom:0; }
  .fc-bullet svg { width:14px; height:14px; flex-shrink:0; margin-top:2px; color: var(--moss-500); }

  .fc-empty { grid-column:1/-1; text-align:center; padding:40px 0; color: var(--ink-soft); font-size:15px; }

  .fc-card { cursor:pointer; }
  .fc-card-desc { font-size:13px; line-height:1.5; color:var(--ink-soft); margin-bottom:14px; }
  .fc-catalog-actions { display:flex; justify-content:center; margin-top:34px; }
  .fc-catalog-toggle {
    display:inline-flex; align-items:center; gap:10px; padding:13px 24px; min-width:214px; justify-content:center; border:1px solid rgba(201,111,58,.68);
    border-radius:999px; background:rgba(255,255,255,.36); color:var(--forest-800); font:600 14px var(--font-body); cursor:pointer;
    transition:background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .fc-catalog-toggle:hover { background:var(--amber-deep); color:#fff; transform:translateY(-2px); box-shadow:0 10px 20px rgba(201,111,58,.20); }
  .fc-catalog-toggle svg { width:17px; height:17px; transition:transform 0.2s ease; }
  .fc-catalog-toggle.is-expanded svg { transform:rotate(180deg); }
  @media (max-width:760px){
    .fc-card-media { height:190px; }
    .fc-card-media img { height:178px; }
    .fc-card-arc { top:45px; width:158px; height:88px; border-radius:158px 158px 0 0; }
  }

  /* ---- Product detail modal ---- */
  .fc-modal-overlay {
    position:fixed; inset:0; z-index:300; background:rgba(20,24,15,0.55);
    display:flex; align-items:center; justify-content:center; padding:24px;
    opacity:0; pointer-events:none; transition: opacity 0.25s ease;
    backdrop-filter: blur(3px);
  }
  .fc-modal-overlay.open { opacity:1; pointer-events:auto; }
  .fc-modal {
    position:relative; background:#FBF9F2; border-radius:26px; max-width:1100px; width:100%;
    max-height:calc(100vh - 48px); overflow:hidden; padding:0;
    transform:translateY(16px) scale(0.98); transition: transform 0.25s ease;
    box-shadow: 0 30px 70px rgba(0,0,0,0.3);
  }
  .fc-modal-overlay.open .fc-modal { transform:translateY(0) scale(1); }
  .fc-modal-close {
    position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%;
    border:1px solid rgba(26,46,26,0.15); background:#fff; font-size:20px; line-height:1;
    cursor:pointer; color:var(--ink-soft); display:flex; align-items:center; justify-content:center;
    z-index:10;
  }
  .fc-modal-close:hover { background:var(--paper-warm); }
  .fc-modal-body { display:grid; grid-template-columns:minmax(360px,0.9fr) minmax(420px,1.1fr); gap:0; align-items:stretch; }
  @media (max-width:760px){ .fc-modal-body{ grid-template-columns:1fr; } .fc-modal{ max-height:calc(100vh - 24px); overflow-y:auto; } }
  .fc-modal-media { position:relative; display:flex; align-items:center; justify-content:center; min-height:520px; background:linear-gradient(150deg, #f3f1e8, #e2eadc); }
  .fc-modal-arc {
    position:absolute; width:190px; height:190px; border-radius:50%;
    border:1.4px solid rgba(201,111,58,0.55); border-left-color:transparent; border-bottom-color:transparent;
    transform:rotate(-38deg);
  }
  .fc-modal-image-button { width:100%; min-height:520px; padding:30px; border:0; background:transparent; cursor:zoom-in; display:flex; align-items:center; justify-content:center; }
  .fc-modal-media img { position:relative; z-index:2; max-width:100%; max-height:min(72vh,700px); object-fit:contain; filter: drop-shadow(0 18px 22px rgba(26,46,26,0.18)); }
  .fc-modal-info { max-height:calc(100vh - 48px); overflow-y:auto; padding:56px 46px 44px; }
  @media (max-width:760px){ .fc-modal-media{ min-height:0; height:43vh; } .fc-modal-image-button{ min-height:0; height:43vh; padding:22px; } .fc-modal-media img{ max-height:34vh; } .fc-modal-info{ max-height:none; overflow:visible; padding:34px 24px 28px; } }
  .fc-modal-name { font-family:var(--font-display); font-weight:600; font-size:26px; color:var(--forest-900); margin-bottom:6px; line-height:1.2; }
  .fc-modal-dose { font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.06em; color: var(--amber-deep); margin-bottom:18px; text-transform:uppercase; }
  .fc-modal-detail { font-size:15px; line-height:1.7; color:var(--ink-soft); margin-bottom:20px; }
  .fc-modal-info .fc-bullets { display:block; }
  .fc-modal-info .fc-bullet { font-size:14px; }
  .fc-modal-details { display:grid; gap:14px; margin:22px 0; }
  .fc-modal-details div { border-top:1px solid rgba(26,46,26,0.1); padding-top:14px; }
  .fc-modal-details strong { display:block; margin-bottom:5px; font:600 11px var(--font-mono); letter-spacing:0.06em; text-transform:uppercase; color:var(--forest-800); }
  .fc-modal-details span { display:block; color:var(--ink-soft); font-size:14px; line-height:1.58; }

  /* ================= FORMULA JOURNEY ================= */
  .formula-journey {
    /* clip сохраняет декоративные ветви внутри секции, но, в отличие от
       overflow:hidden, не создаёт прокручиваемый контейнер и не ломает sticky-сцену */
    --journey-progress:0; position:relative; overflow:clip; isolation:isolate; color:var(--forest-900);
    background:
      radial-gradient(38rem 32rem at 104% 20%, rgba(227,142,76,.09), transparent 70%),
      radial-gradient(34rem 26rem at -8% 76%, rgba(104,139,85,.055), transparent 72%),
      linear-gradient(180deg, #F1EEE5 0%, #F6F2E9 36%, #F1EEE5 100%);
  }
  .formula-journey::before,
  .formula-journey::after {
    content:''; position:absolute; z-index:0; pointer-events:none; opacity:.07;
    width:clamp(240px,27vw,420px); height:clamp(350px,38vw,590px);
    background:url('assets/botanical-catalog-branch.png') center / contain no-repeat;
  }
  .formula-journey::before { right:clamp(-285px,-15vw,-155px); top:210px; transform:rotate(17deg); }
  .formula-journey::after { left:clamp(-285px,-15vw,-155px); bottom:120px; transform:scaleX(-1) rotate(15deg); opacity:.055; }
  .formula-journey .container { position:relative; z-index:1; }
  .journey-shell { display:grid; grid-template-columns:clamp(130px,14vw,190px) minmax(0,1fr); gap:clamp(25px,4vw,74px); align-items:start; }
  .journey-rail { position:sticky; top:96px; height:calc(100vh - 122px); min-height:590px; align-self:start; padding-top:3px; }
  .journey-rail-kicker { display:block; max-width:130px; margin-bottom:24px; color:var(--amber-deep); font:600 10px/1.4 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
  .journey-track { position:relative; width:1px; height:calc(100% - 66px); margin-left:16px; background:rgba(83,86,67,.24); }
  .journey-track::before { content:''; position:absolute; inset:0 auto auto 0; width:1px; height:calc(var(--journey-progress) * 100%); background:linear-gradient(180deg, var(--amber-deep), #efaf72); box-shadow:0 0 10px rgba(201,111,58,.33); transition:height .14s linear; }
  .journey-marker { position:absolute; left:0; display:grid; place-items:center; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(117,116,89,.42); background:#F5F1E8; color:var(--forest-800); font:600 10px var(--font-mono); transition:color .36s ease, border-color .36s ease, background .36s ease, transform .36s ease, box-shadow .36s ease; }
  .journey-marker:nth-child(1) { top:3%; }
  .journey-marker:nth-child(2) { top:34%; }
  .journey-marker:nth-child(3) { top:65%; }
  .journey-marker:nth-child(4) { top:98%; }
  .journey-marker::after { content:''; position:absolute; left:34px; width:18px; height:1px; background:currentColor; opacity:.45; }
  .journey-shell[data-active-stage="1"] .journey-marker:nth-child(1),
  .journey-shell[data-active-stage="2"] .journey-marker:nth-child(-n+2),
  .journey-shell[data-active-stage="3"] .journey-marker:nth-child(-n+3),
  .journey-shell[data-active-stage="4"] .journey-marker { color:#fff; background:var(--amber-deep); border-color:var(--amber-deep); box-shadow:0 0 0 6px rgba(220,132,67,.12), 0 7px 18px rgba(201,111,58,.2); }
  .journey-shell[data-active-stage="1"] .journey-marker:nth-child(1),
  .journey-shell[data-active-stage="2"] .journey-marker:nth-child(2),
  .journey-shell[data-active-stage="3"] .journey-marker:nth-child(3),
  .journey-shell[data-active-stage="4"] .journey-marker:nth-child(4) { transform:translate(-50%,-50%) scale(1.16); box-shadow:0 0 0 8px rgba(220,132,67,.14), 0 8px 22px rgba(201,111,58,.26); }
  .journey-intro { max-width:685px; margin-bottom:clamp(80px,12vw,150px); }
  .journey-intro h2 { max-width:570px; margin-top:13px; color:var(--forest-900); font-size:clamp(42px,5.15vw,72px); line-height:.98; }
  .journey-intro p { max-width:570px; margin-top:22px; color:var(--ink-soft); font-size:17px; line-height:1.67; }
  .journey-step { min-height:clamp(570px,71vh,720px); display:grid; grid-template-columns:minmax(230px,.75fr) minmax(430px,1.25fr); align-items:center; gap:clamp(28px,6vw,100px); padding:38px 0 98px; }
  .journey-step-copy { position:relative; z-index:2; opacity:.2; transform:translateY(22px); transition:opacity .72s ease, transform .72s cubic-bezier(.2,.76,.28,1); }
  .journey-step.is-visible .journey-step-copy { opacity:1; transform:none; }
  .journey-step-number { display:flex; align-items:center; gap:11px; margin-bottom:18px; color:var(--amber-deep); font:600 11px var(--font-mono); letter-spacing:.12em; }
  .journey-step-number::after { content:''; width:48px; height:1px; background:currentColor; opacity:.58; }
  .journey-step h3 { max-width:350px; font-size:clamp(28px,3vw,43px); line-height:1.04; color:var(--forest-900); }
  .journey-step-copy > p { max-width:366px; margin-top:18px; color:var(--ink-soft); font-size:15px; line-height:1.72; }
  .journey-facts { display:grid; gap:0; max-width:385px; margin-top:28px; border-top:1px solid rgba(75,75,55,.16); }
  .journey-fact { display:grid; grid-template-columns:98px 1fr; gap:12px; padding:12px 0; border-bottom:1px solid rgba(75,75,55,.16); }
  .journey-fact dt { color:var(--forest-800); font:600 10px/1.3 var(--font-mono); letter-spacing:.06em; text-transform:uppercase; }
  .journey-fact dd { margin:0; color:var(--ink-soft); font-size:12px; line-height:1.48; }
  .journey-visual { position:relative; min-height:470px; overflow:hidden; border:1px solid rgba(73,77,55,.13); border-radius:34px; background:#e6e4dc; box-shadow:0 22px 50px rgba(69,66,48,.08), inset 0 1px rgba(255,255,255,.7); }
  .journey-visual::before { content:''; position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(23,39,28,.37),transparent 43%,rgba(249,243,232,.08)), linear-gradient(180deg,rgba(18,35,25,.18),transparent 30%,rgba(18,35,25,.36)); mix-blend-mode:multiply; }
  .journey-visual-label { position:absolute; z-index:6; top:27px; left:30px; color:rgba(255,255,255,.94); text-shadow:0 1px 5px rgba(17,30,20,.38); font:600 10px var(--font-mono); letter-spacing:.12em; text-transform:uppercase; }
  .journey-visual-label::before { content:''; display:inline-block; width:7px; height:7px; margin-right:9px; border-radius:50%; background:#f3a96b; box-shadow:0 0 0 5px rgba(243,169,107,.16); }
  .journey-real-shot { position:absolute; inset:0; z-index:1; margin:0; clip-path:inset(0 round 33px); opacity:.48; transition:clip-path 1s cubic-bezier(.2,.76,.28,1), opacity .7s ease; }
  .journey-step.is-visible .journey-real-shot { clip-path:inset(0 round 33px); opacity:1; }
  .journey-real-image { width:100%; height:100%; display:block; object-fit:cover; transform:scale(var(--scene-scale,1.12)) translate3d(var(--scene-x,0%),var(--scene-y,0%),0); filter:saturate(.72) contrast(1.05) sepia(.08); will-change:transform; }
  .journey-real-shot--capsules .journey-real-image { object-position:58% 55%; }
  .journey-real-shot--bottles .journey-real-image { object-position:52% center; }
  .journey-real-shot--label .journey-real-image { object-position:58% 48%; }
  .journey-real-shot--final .journey-real-image { object-position:48% 51%; filter:saturate(.84) contrast(1.04) sepia(.035); }
  .journey-real-shutter { position:absolute; z-index:4; inset:-2px; pointer-events:none; border:1px solid rgba(255,235,208,.56); border-radius:34px; }
  .journey-real-shutter::before { content:''; position:absolute; inset:13px; border:1px solid rgba(255,248,235,.24); border-radius:24px; }
  .journey-real-shutter::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; opacity:var(--scan-opacity,0); transform:translateY(var(--scan-y,0px)); background:linear-gradient(90deg,transparent,rgba(255,194,131,.92),transparent); box-shadow:0 0 18px rgba(241,144,68,.82); }
  .journey-real-note { position:absolute; z-index:6; right:24px; bottom:23px; display:grid; gap:4px; max-width:210px; padding:12px 14px; border:1px solid rgba(255,255,255,.35); border-radius:4px; background:rgba(25,43,31,.45); backdrop-filter:blur(9px); color:#fff; box-shadow:0 8px 24px rgba(15,29,20,.2); }
  .journey-real-note strong { font:600 10px var(--font-mono); letter-spacing:.1em; } .journey-real-note span { font-size:11px; line-height:1.35; color:rgba(255,255,255,.76); }
  .journey-real-index { position:absolute; z-index:6; right:28px; top:25px; color:rgba(255,255,255,.87); font:500 40px/.8 var(--font-display); letter-spacing:-.04em; text-shadow:0 2px 10px rgba(16,26,18,.26); }
  .journey-real-index::after { content:''; display:block; width:34px; height:1px; margin:9px 0 0 auto; background:#eda260; }
  .journey-final-stage { background:#e7e5de; }
  .journey-final-stage::before { z-index:3; background:linear-gradient(90deg,rgba(15,30,21,.28),transparent 52%,rgba(246,239,226,.08)), linear-gradient(180deg,rgba(13,29,20,.12),transparent 32%,rgba(13,29,20,.38)); mix-blend-mode:multiply; }
  .journey-final-stage::after { display:none; }
  .journey-final-products { position:absolute; z-index:4; inset:0; pointer-events:none; }
  .journey-final-product { position:absolute; z-index:2; left:50%; bottom:18px; width:min(52%,280px); max-height:410px; object-fit:contain; filter:drop-shadow(0 27px 25px rgba(5,16,8,.5)); transform:translateX(-50%) translateY(var(--product-y,34px)) rotate(var(--product-rotate,-5deg)) scale(var(--product-scale,.94)); will-change:transform; }
  .journey-final-product--left, .journey-final-product--right { position:absolute; z-index:1; bottom:23px; width:min(39%,205px); max-height:310px; object-fit:contain; filter:drop-shadow(0 17px 19px rgba(5,16,8,.44)); opacity:.97; }
  .journey-final-product--left { left:6%; transform:translateY(var(--product-y,34px)) rotate(-11deg) scale(.94); }
  .journey-final-product--right { right:5%; transform:translateY(var(--product-y,34px)) rotate(10deg) scale(.92); }
  .journey-final-seal { position:absolute; z-index:6; right:26px; bottom:30px; display:grid; place-items:center; width:76px; height:76px; border:1px solid rgba(255,234,210,.76); border-radius:50%; color:#fff8eb; background:rgba(31,51,34,.58); box-shadow:0 7px 18px rgba(5,16,8,.28); font:600 9px/1.18 var(--font-mono); letter-spacing:.05em; text-align:center; transform:rotate(var(--seal-turn,0deg)); }
  .journey-final-seal::before { content:'✓'; display:block; margin-bottom:3px; color:var(--amber-deep); font:400 19px var(--font-display); }
  .journey-final-glow { position:absolute; z-index:3; left:50%; top:54%; width:310px; height:120px; transform:translate(-50%,-50%) scale(var(--glow-scale,.8)); border-radius:50%; background:rgba(245,157,85,.32); filter:blur(32px); opacity:var(--glow-opacity,.25); }
  .quality-stamps { display:flex; gap:10px; flex-wrap:wrap; margin:4px 0 10px; }
  .quality-stamp { display:inline-flex; align-items:center; gap:8px; padding:9px 13px; border-radius:999px; border:1px solid rgba(75,75,55,.2); background:rgba(255,255,255,.25); color:var(--forest-800); font:600 10px var(--font-mono); letter-spacing:.055em; }
  .quality-stamp::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--amber-deep); box-shadow:0 0 0 3px rgba(220,132,67,.1); }
  @media (min-width:761px){
    /* Пять экранных состояний: вступление + четыре этапа. Высоты достаточно
       для считывания, но переход к следующему этапу наступает быстро. */
    .formula-journey { height:380vh; min-height:2100px; padding:0 !important; }
    .formula-journey > .container { position:sticky; top:0; height:100vh; max-width:none; padding:0 var(--edge); display:block; }
    .journey-shell { height:100%; grid-template-columns:clamp(130px,14vw,190px) minmax(0,1fr); gap:clamp(25px,4vw,74px); padding:clamp(42px,7vh,78px) 0; }
    .journey-rail { position:relative; top:auto; height:100%; min-height:0; padding-top:3px; }
    .journey-rail-kicker { margin-bottom:20px; }
    .journey-track { height:calc(100% - 56px); }
    .journey-content { position:relative; height:100%; overflow:hidden; }
    .journey-panel { position:absolute; inset:0; margin:0; opacity:0; pointer-events:none; transform:translate3d(0,118px,0) scale(.982); filter:blur(9px); will-change:transform,opacity,filter; transition:opacity .58s cubic-bezier(.22,.78,.25,1), transform .88s cubic-bezier(.16,.88,.24,1), filter .62s ease; }
    .journey-panel[data-scene-state="active"] { z-index:2; opacity:1; pointer-events:auto; transform:translate3d(0,0,0) scale(1); filter:blur(0); }
    .journey-panel[data-scene-state="past"] { z-index:1; opacity:0; transform:translate3d(0,-92px,0) scale(.99); filter:blur(4px); transition-duration:.42s,.76s,.46s; }
    .journey-panel[data-scene-state="next"] { z-index:1; opacity:0; transform:translate3d(0,118px,0) scale(.982); filter:blur(9px); }
    .journey-intro { display:flex; flex-direction:column; justify-content:center; max-width:690px; margin:0; padding-bottom:11vh; }
    .journey-intro h2 { max-width:590px; font-size:clamp(50px,6vw,88px); }
    .journey-intro p { max-width:570px; }
    .journey-step { min-height:0; height:100%; margin:0; padding:0; display:grid; grid-template-columns:minmax(230px,.75fr) minmax(430px,1.25fr); align-items:center; gap:clamp(28px,6vw,100px); }
    .journey-step-copy { margin:0; opacity:0; transform:translateY(22px); transition:opacity .52s ease .08s, transform .7s cubic-bezier(.2,.8,.25,1) .08s; }
    .journey-visual { min-height:0; height:min(62vh,580px); opacity:0; transform:translateY(30px) scale(.985); transition:opacity .64s ease .16s, transform .92s cubic-bezier(.16,.88,.24,1) .16s; }
    .journey-step.is-visible .journey-step-copy, .journey-step.is-visible .journey-visual { opacity:1; transform:none; }
    .quality-stamps { position:absolute; z-index:4; left:0; bottom:0; margin:0; opacity:0; transform:translateY(22px); transition:opacity .48s ease, transform .58s cubic-bezier(.2,.78,.22,1); }
    .journey-shell[data-active-stage="4"] .quality-stamps { opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion:reduce){ .journey-step *, .journey-track::before{ animation:none !important; transition:none !important; } }
  @media (max-width:760px){
    .formula-journey::before { right:-220px; top:210px; opacity:.05; } .formula-journey::after{ display:none; }
    .journey-shell { grid-template-columns:60px minmax(0,1fr); gap:18px; }
    .journey-rail { top:75px; height:calc(100vh - 92px); min-height:470px; } .journey-rail-kicker { display:none; } .journey-track{ margin-left:18px; height:100%; }
    .journey-marker { width:29px; height:29px; font-size:9px; } .journey-marker::after { left:29px; width:11px; }
    .journey-intro { margin-bottom:55px; padding-top:4px; } .journey-intro h2 { font-size:42px; } .journey-intro p { font-size:15px; }
    .journey-step { min-height:0; display:block; padding:20px 0 78px; } .journey-step-copy{ margin-bottom:30px; } .journey-step h3{ font-size:31px; } .journey-step-copy > p{ font-size:14px; }
    .journey-fact { grid-template-columns:88px 1fr; } .journey-visual { min-height:330px; border-radius:25px; } .journey-real-note { right:15px; bottom:15px; max-width:180px; padding:10px 11px; } .journey-real-index { right:18px; top:21px; font-size:33px; } .journey-final-product { width:min(58%,220px); bottom:12px; } .journey-final-product--left, .journey-final-product--right { width:min(37%,138px); bottom:16px; } .journey-final-seal { right:14px; bottom:16px; width:61px; height:61px; font-size:7px; }
    .quality-stamps { margin-top:30px; } .quality-stamp { padding:8px 11px; font-size:9px; }
  }

  /* ================= CATALOG ================= */
  .catalog { background: var(--paper); }
  .catalog-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:40px; flex-wrap:wrap; }
  .catalog-head h2 { font-size: clamp(28px,3.2vw,42px); color:var(--forest-900); }
  .catalog-count { font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); }

  .tabs-scroll { overflow-x:auto; margin-bottom:36px; padding-bottom:6px; scrollbar-width:thin; }
  .tabs { display:flex; gap:8px; width:max-content; }
  .tab-btn {
    font-family:var(--font-body); font-weight:600; font-size:13.5px; padding:9px 18px;
    border-radius:20px; border:1px solid rgba(26,46,26,0.15); background:#fff; color:var(--ink-soft);
    cursor:pointer; white-space:nowrap; transition: all 0.18s;
  }
  .tab-btn:hover { border-color: var(--moss-500); }
  .tab-btn.active { background: var(--forest-800); border-color: var(--forest-800); color:#fff; }

  .product-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:1080px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
  @media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } }
  @media (max-width:460px){ .product-grid{ grid-template-columns:1fr 1fr; gap:10px; } }

  .product-card {
    background:#fff; border-radius:18px; overflow:hidden; border:1px solid rgba(26,46,26,0.07);
    display:flex; flex-direction:column; transition: transform 0.22s ease, box-shadow 0.22s ease;
  }
  .product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(26,46,26,0.12); }
  .product-media {
    aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center;
    position:relative; overflow:hidden;
  }
  .product-media img { max-height:90%; max-width:88%; object-fit:contain; }
  .product-media.has-photo { background: linear-gradient(160deg, #f7f6ee 0%, #ece8d8 100%); }
  .placeholder-media { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
  .placeholder-icon { width:34%; opacity:0.9; }

  .product-chip {
    position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:10px;
    padding:4px 9px; border-radius:12px; color:#fff; letter-spacing:0.02em;
  }
  .product-body { padding:16px 16px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
  .product-title { font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.28; color:var(--forest-900); min-height:38px; }
  .product-dosage { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-soft); }
  .product-desc { font-size:12.5px; color:var(--ink-soft); line-height:1.5; flex:1; margin-top:2px; }
  .product-foot { display:flex; justify-content:space-between; align-items:center; margin-top:10px; }
  .product-price { font-family:var(--font-mono); font-weight:600; font-size:13.5px; color:var(--forest-900); }

  .catalog-actions { display:flex; justify-content:center; margin-top:34px; }
  .catalog-toggle {
    display:inline-flex; align-items:center; gap:10px; padding:12px 21px; border:1px solid var(--forest-800);
    border-radius:999px; background:transparent; color:var(--forest-800); font:600 14px var(--font-body); cursor:pointer;
    transition:background 0.2s ease, color 0.2s ease;
  }
  .catalog-toggle:hover { background:var(--forest-800); color:#fff; }
  .catalog-toggle svg { width:17px; height:17px; transition:transform 0.2s ease; }
  .catalog-toggle.is-expanded svg { transform:rotate(180deg); }

  /* ================= PRODUCT DETAIL ================= */
  .product-modal, .image-lightbox {
    position:fixed; inset:0; z-index:300; display:none; place-items:center; padding:24px;
  }
  .product-modal.open, .image-lightbox.open { display:grid; }
  .product-modal-backdrop, .lightbox-backdrop { position:absolute; inset:0; background:rgba(9,22,14,0.72); backdrop-filter:blur(7px); }
  .product-modal-dialog {
    position:relative; z-index:1; width:min(1100px, 100%); max-height:min(820px, calc(100vh - 48px));
    display:grid; grid-template-columns:minmax(360px, 0.9fr) minmax(420px, 1.1fr); overflow:hidden;
    border-radius:26px; background:#fff; box-shadow:0 28px 90px rgba(0,0,0,0.34);
  }
  .modal-close, .lightbox-close {
    position:absolute; z-index:2; top:15px; right:15px; width:39px; height:39px; border:0; border-radius:50%;
    display:grid; place-items:center; background:rgba(20,40,27,0.9); color:#fff; cursor:pointer; font-size:25px; line-height:1;
  }
  .product-modal-visual { min-height:520px; background:linear-gradient(150deg, #f3f1e8, #e2eadc); display:flex; }
  .modal-image-button {
    width:100%; min-height:100%; padding:30px; border:0; background:transparent; cursor:zoom-in; position:relative;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  }
  .modal-image-button:disabled { cursor:default; }
  .modal-product-image { display:block; max-width:100%; max-height:min(72vh, 700px); object-fit:contain; filter:drop-shadow(0 18px 18px rgba(35,47,31,0.18)); }
  .modal-image-hint { display:flex; align-items:center; gap:7px; font:12px var(--font-mono); color:var(--forest-800); }
  .modal-image-hint svg { width:15px; height:15px; }
  .modal-placeholder { width:50%; color:var(--moss-500); }
  .product-modal-copy { overflow-y:auto; padding:56px 46px 44px; }
  .modal-category { font:600 11px var(--font-mono); letter-spacing:0.07em; text-transform:uppercase; color:var(--moss-500); }
  .product-modal-copy h3 { margin:10px 0 8px; color:var(--forest-900); font-size:clamp(25px, 3vw, 34px); line-height:1.12; }
  .modal-dosage { font:13px var(--font-mono); color:var(--ink-soft); }
  .modal-description { margin:24px 0; color:var(--ink-soft); font-size:15px; line-height:1.7; }
  .modal-detail-list { display:grid; gap:15px; margin:0; }
  .modal-detail-list > div { padding-top:15px; border-top:1px solid rgba(26,46,26,0.1); }
  .modal-detail-list dt { margin-bottom:6px; font:600 11px var(--font-mono); text-transform:uppercase; letter-spacing:0.06em; color:var(--forest-800); }
  .modal-detail-list dd { margin:0; color:var(--ink-soft); font-size:14px; line-height:1.58; }
  .modal-disclaimer { margin:24px 0 0; color:var(--ink-soft); font-size:12px; line-height:1.5; }
  .image-lightbox { z-index:310; }
  .lightbox-figure { position:relative; z-index:1; width:min(1000px, 100%); height:min(92vh, 1000px); display:grid; place-items:center; }
  .lightbox-image { max-width:100%; max-height:calc(92vh - 48px); object-fit:contain; filter:drop-shadow(0 25px 35px rgba(0,0,0,0.33)); }
  .lightbox-close { background:rgba(255,255,255,0.18); top:8px; right:8px; }
  body.modal-open { overflow:hidden; }
  @media (max-width:760px){
    .product-modal, .image-lightbox { padding:12px; }
    .product-modal-dialog { grid-template-columns:1fr; max-height:calc(100vh - 24px); overflow-y:auto; border-radius:20px; }
    .product-modal-visual { min-height:0; height:43vh; }
    .modal-image-button { padding:22px; }
    .modal-product-image { max-height:34vh; }
    .product-modal-copy { overflow:visible; padding:34px 24px 28px; }
    .modal-close { top:10px; right:10px; }
  }

  .empty-state { text-align:center; padding:80px 20px; color:var(--ink-soft); font-family:var(--font-mono); font-size:14px; }

  /* ================= FAQ ================= */
  .faq {
    position:relative; overflow:clip; isolation:isolate;
    background:
      radial-gradient(40rem 28rem at 8% 46%, rgba(107,154,92,.13), transparent 66%),
      radial-gradient(38rem 32rem at 100% 88%, rgba(227,142,76,.16), transparent 70%),
      linear-gradient(180deg, #F1EEE5 0%, #F1EEE5 14%, #F6F2E9 50%, #ECE8DC 100%);
  }
  .faq::before {
    /* big botanical branch, right side — kept clear of the top seam so the
       section still opens on a flat, matching band before any decoration */
    content:''; position:absolute; z-index:0; pointer-events:none; opacity:.15;
    width:clamp(280px,32vw,480px); height:clamp(400px,46vw,700px);
    right:clamp(-190px,-9vw,-90px); top:130px; transform:rotate(9deg);
    background:url('assets/botanical-catalog-branch.png') center / contain no-repeat;
  }
  .faq::after {
    content:''; position:absolute; z-index:0; pointer-events:none; opacity:.07;
    width:clamp(180px,17vw,240px); height:clamp(260px,25vw,350px);
    left:clamp(-150px,-8vw,-80px); bottom:-10px; transform:scaleX(-1) rotate(-8deg);
    background:url('assets/botanical-catalog-branch.png') center / contain no-repeat;
  }
  .faq > .container { position:relative; z-index:1; }
  .faq-grid { display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr); gap:clamp(36px,5vw,72px); align-items:start; }
  .faq-intro { position:sticky; top:112px; }
  .faq-intro-glow {
    position:absolute; z-index:-1; top:-46px; left:-40px; width:230px; height:230px; border-radius:50%;
    background: radial-gradient(circle, rgba(212,162,76,.28) 0%, rgba(107,154,92,.14) 46%, transparent 74%);
    filter: blur(30px); pointer-events:none;
  }
  .faq-intro h2 { font-size:clamp(28px,2.6vw,38px); color:var(--forest-900); margin-top:12px; line-height:1.12; }
  .faq-intro p { margin-top:16px; font-size:15px; line-height:1.62; color:var(--ink-soft); }
  .faq-list { display:flex; flex-direction:column; gap:14px; }
  .faq-item {
    --item-accent: rgba(201,111,58,.5);
    position:relative; border:1px solid rgba(26,46,26,.12); border-radius:18px;
    background:rgba(255,253,248,.66); overflow:hidden;
    transition:border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
  }
  .faq-item::before {
    content:''; position:absolute; inset:0 0 auto; height:3px; z-index:1; opacity:.75;
    background:linear-gradient(90deg, transparent 6%, var(--item-accent) 48%, transparent 94%);
  }
  .faq-item:nth-child(3n+2) { --item-accent: rgba(213,149,69,.55); }
  .faq-item:nth-child(3n) { --item-accent: rgba(107,154,92,.5); }
  .faq-item:hover { transform:translateY(-2px); }
  .faq-item.is-open { border-color:rgba(201,111,58,.4); background:rgba(255,253,248,.94); box-shadow:0 14px 30px rgba(44,51,33,.08); }
  .faq-question {
    position:relative; z-index:1; width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px;
    padding:20px 24px; background:none; border:none; cursor:pointer; text-align:left;
    font:600 15.5px var(--font-body); color:var(--forest-900); font-family:inherit;
    transition:color .2s ease;
  }
  .faq-num { font:600 13px var(--font-mono); color:var(--item-accent); opacity:.85; letter-spacing:.02em; }
  .faq-question:hover { color:var(--amber-deep); }
  .faq-chevron { width:18px; height:18px; flex-shrink:0; color:var(--amber-deep); transition:transform .3s ease; }
  .faq-item.is-open .faq-chevron { transform:rotate(180deg); }
  .faq-answer { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.4,0,.2,1); }
  .faq-answer p { padding:0 24px 20px 58px; font-size:14.5px; line-height:1.65; color:var(--ink-soft); }
  @media (max-width:960px){
    .faq-grid { grid-template-columns:1fr; gap:32px; }
    .faq-intro { position:static; }
  }
  @media (max-width:760px){
    .faq-grid { gap:24px; }
    .faq-intro p { font-size:14px; }
    .faq-question { padding:16px 18px; font-size:14.5px; gap:12px; }
    .faq-num { font-size:11px; }
    .faq-answer p { padding:0 18px 18px 18px; font-size:13.5px; }
  }

  /* ================= FOOTER ================= */
  footer { background: var(--forest-950); color:rgba(255,255,255,0.6); padding:44px 0; }
  .footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
  .footer-logo { font-family:var(--font-display); font-weight:600; font-size:17px; color:#fff; }
  .footer-social { display:flex; gap:16px; }
  .footer-social a { color:rgba(255,255,255,0.6); text-decoration:none; font-size:13px; transition:color 0.2s; }
  .footer-social a:hover { color:#fff; }
  .footer-copy { font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,0.35); margin-top:22px; }

  /* ================= RESPONSIVE REFINEMENTS =================
     The page is also opened straight from index.html, so these rules keep every
     layout self-contained without relying on a framework or a device script. */
  html, body { overflow-x:clip; }
  button, input { font:inherit; }

  /* Compact desktops and horizontal tablets */
  @media (min-width:1121px){
    /* Keep the hero in two clear columns. Both sides are based on the viewport,
       so text never crosses the product image while a desktop window narrows. */
    .hero-text { right:var(--edge); width:min(31vw,500px); max-width:none; }
    .hero-bottles { left:var(--edge); bottom:8%; }
    .bottles-frame { width:min(46vw,72svh,720px); height:auto; max-width:none; aspect-ratio:1; }
  }
  @media (min-width:961px) and (max-width:1120px){
    nav { padding-left:28px; padding-right:28px; }
    nav.compact { padding-left:28px; padding-right:28px; }
    .nav-links { gap:22px; }
    .hero-text { right:var(--edge); width:min(38vw,410px); max-width:none; }
    .hero-bottles { left:var(--edge); }
    .bottles-frame { width:min(43vw,66svh,620px); height:auto; max-width:none; aspect-ratio:1; }
    .history-container { padding-left:5vw; padding-right:5vw; }
    .history-left { max-width:400px; padding:28px 30px; }
    .product-showcase { left:40%; width:23%; }
    .product-info { max-width:330px; padding:28px 30px; }
    .product-tabs { left:35%; gap:10px; }
    .fc-grid { gap:20px; }
    .fc-card { padding:26px 18px 23px; }
    .journey-shell { grid-template-columns:130px minmax(0,1fr); gap:32px; }
    .journey-step { grid-template-columns:minmax(210px,.8fr) minmax(380px,1.2fr); gap:42px; }
  }

  /* Tablets use the readable, flowing version of the production journey.
     The scroll-scrub scene is reserved for screens that can comfortably hold
     its rail, text and production frame side by side. */
  @media (min-width:761px) and (max-width:960px){
    nav { padding:16px 28px; }
    nav.compact { padding:11px 28px; }
    .nav-links { gap:18px; }
    .nav-links a { font-size:13px; }
    /* At this width the hero becomes a vertical composition. This prevents
       the headline and products from competing for the same horizontal space. */
    .hero-text { right:var(--edge); left:var(--edge); top:auto; bottom:8%; width:auto; max-width:560px; transform:none; }
    .hero-text.visible { transform:none; }
    .hero-bottles { top:max(74px,9svh); right:0; left:0; bottom:auto; display:flex; justify-content:center; }
    .glass-panel { width:100%; padding:0; justify-content:center; }
    .bottles-frame { width:min(42vw,32svh,340px); height:auto; max-width:none; aspect-ratio:1; }
    .hero-text h1 { font-size:clamp(32px,5vw,44px); margin-bottom:16px; }
    .hero-text p { font-size:14.5px; line-height:1.55; }
    .history-wrap { padding-left:7%; padding-right:7%; }

    .formula-catalog { padding-top:34px !important; }
    .fc-head { gap:24px; }
    .fc-search { min-width:280px; }
    .fc-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }

    .formula-journey { height:auto !important; min-height:0 !important; padding:92px 0 !important; }
    .formula-journey > .container { position:relative; top:auto; height:auto; max-width:var(--container); padding:0 var(--pad); display:block; }
    .journey-shell { height:auto; grid-template-columns:74px minmax(0,1fr); gap:28px; padding:0; }
    .journey-rail { position:sticky; top:88px; height:calc(100vh - 112px); min-height:510px; padding-top:0; }
    .journey-rail-kicker { display:none; }
    .journey-track { height:100%; margin-left:22px; }
    .journey-content { height:auto; overflow:visible; }
    .formula-journey .journey-panel[data-scene-state] { position:relative; inset:auto; z-index:auto; margin:0 0 76px; opacity:1; pointer-events:auto; transform:none; filter:none; }
    .journey-intro { max-width:650px; padding:0 0 28px; }
    .journey-intro h2 { font-size:clamp(48px,7vw,68px); }
    .journey-step { height:auto; min-height:0; display:grid; grid-template-columns:1fr; gap:28px; padding:0; align-items:start; }
    .journey-step-copy, .journey-visual { opacity:1; transform:none; }
    .journey-visual { width:100%; height:min(68vw,480px); min-height:380px; }
    .formula-journey .journey-shell .quality-stamps { position:static; margin:0; opacity:1; transform:none; }
  }

  /* Phones */
  @media (max-width:760px){
    :root { --container:100%; }
    section { scroll-margin-top:82px; }
    .section-pad { padding:68px 0; }

    nav { min-height:62px; top:12px; padding:10px 18px; background:rgba(24,34,22,.34); }
    nav.compact { padding:8px 18px; }
    .logo { gap:8px; }
    .logo-mark { height:31px; }
    .logo-word { font-size:18px; }
    .nav-burger { width:42px; height:42px; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.08); cursor:pointer; }
    .nav-burger span { display:block; width:17px; height:1.5px; border-radius:2px; background:#fff; transition:transform .24s ease, opacity .2s ease; }
    .nav-links { position:absolute; top:calc(100% + 8px); left:0; right:0; display:none; flex-direction:column; gap:2px; padding:9px; border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(13,22,13,.97); box-shadow:0 14px 30px rgba(0,0,0,.22); }
    .nav-links a { display:block; padding:12px 13px; border-radius:11px; font-size:14px; opacity:.9; }
    .nav-links a:active { background:rgba(255,255,255,.1); }
    nav.menu-open { background:rgba(13,22,13,.94); }
    nav.menu-open .nav-links { display:flex; }
    nav.menu-open .nav-burger span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
    nav.menu-open .nav-burger span:nth-child(2) { opacity:0; }
    nav.menu-open .nav-burger span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
    .lang-switch button { padding:5px 10px; font-size:11px; }

    /* Mobile hero: no scroll-jacking. The intro is one normal screen-height
       block, the brand story / products below it flow in the normal page
       scroll instead of being pinned + revealed by scroll progress. */
    .hero-wrapper { height:auto; min-height:0; }
    .hero-sticky { position:relative; top:auto; height:auto; overflow:visible; }
    .hero-sticky::after {
      content:''; position:absolute; left:0; right:0; bottom:0; height:110px; z-index:9; pointer-events:none;
      background: linear-gradient(to top, #F0EDE4 0%, rgba(240,237,228,0) 100%);
    }
    /* One clean photo strip, then the headline on a plain solid panel below
       it — no live canvas scrub, no floating product card stacked on top
       of a second background, no text sitting over the bottles. */
    .hero-intro-screen {
      position:relative; height:auto; overflow:visible;
      display:flex; flex-direction:column; background: var(--forest-950);
    }
    .hero-intro-screen::before {
      content:''; display:block; flex:0 0 auto; position:relative;
      height:56svh; min-height:300px; max-height:480px;
      background:
        linear-gradient(to top, var(--forest-950) 0%, rgba(13,22,13,.85) 7%, rgba(13,22,13,0) 30%),
        url('assets/products/hero-bottles-framed4.webp') 38% center/cover no-repeat;
    }
    #scene-canvas, .hero-darken, .hero-vignette, .hero-particles, .hero-bottles { display:none; }
    .hero-text {
      position:static; margin:0; max-width:none; padding:28px var(--pad) 40px; transform:none;
      opacity:1; filter:none; animation: hero-text-in .8s cubic-bezier(.16,1,.3,1) both;
    }
    .hero-text.visible { transform:none; }
    @keyframes hero-text-in { from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
    .hero-text .eyebrow { padding:6px 12px 6px 10px; font-size:10px; letter-spacing:.1em; }
    .hero-text h1 { margin-top:13px; margin-bottom:14px; font-size:clamp(28px,8.2vw,38px); line-height:1.03; }
    .hero-divider { width:78px; margin-bottom:14px; }
    .hero-text p { max-width:360px; padding-left:12px; font-size:13px; line-height:1.52; }
    .hero-sticky:not([data-stage="0"]) .hero-text { transform:translateY(-16px); }
    /* A textured photo backdrop (instead of flat solid green) plus two
       "spotlight" cards give the story and the product some rhythm, rather
       than one long wall of same-weight text. */
    .history-wrap {
      position:static; overflow-y:visible; padding:0;
      background:
        linear-gradient(180deg, var(--forest-950) 0%, rgba(13,22,13,0) 14%, rgba(6,11,6,.68) 55%, rgba(6,11,6,.88) 76%, var(--forest-950) 100%),
        url('assets/history-bg.jpg') center/cover no-repeat;
    }
    .history-container { padding:64px var(--pad) 48px; }
    .history-left, .product-info, .product-showcase, .product-tabs, .history-timeline {
      opacity:1; filter:none; transform:none; pointer-events:auto;
    }
    .history-left::before, .product-info::before, .product-showcase::before, .product-tabs::before { content:none; }

    .history-left {
      padding:26px 22px; margin-bottom:34px;
      background:rgba(9,15,9,.58); border:1px solid rgba(212,162,76,.18); border-radius:20px;
      backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    }
    .history-left h2 { font-size:27px; }
    .history-left p, .product-info p { font-size:13px; }
    .history-number, .history-number-blur { font-size:64px; }

    .product-showcase {
      margin-bottom:0; padding:28px 20px 4px;
      background:rgba(9,15,9,.58); border:1px solid rgba(212,162,76,.18); border-bottom:0; border-radius:20px 20px 0 0;
    }
    .product-info {
      margin-bottom:0; padding:4px 22px 12px;
      background:rgba(9,15,9,.58); border-left:1px solid rgba(212,162,76,.18); border-right:1px solid rgba(212,162,76,.18);
    }
    .product-tabs {
      margin-bottom:34px; padding:14px 20px 22px; justify-content:center;
      background:rgba(9,15,9,.58); border:1px solid rgba(212,162,76,.18); border-top:0; border-radius:0 0 20px 20px;
    }
    .product-bottle-wrap img { height:24svh; }
    .product-bottle-wrap::before { width:190%; height:190%; }
    .history-timeline { gap:9px; font-size:10px; }

    .formula-catalog { padding-top:22px !important; }
    .formula-catalog::before { left:-240px; top:280px; opacity:.055; }
    .formula-catalog::after { right:-245px; opacity:.045; }
    .fc-head { gap:20px; margin-bottom:26px; }
    .fc-head-left h2 { font-size:clamp(32px,10vw,42px); margin-bottom:10px; }
    .fc-head-left p { font-size:14px; }
    .fc-search { min-height:48px; padding:12px 16px; }
    .fc-filters { flex-wrap:nowrap; overflow-x:auto; margin-right:-20px; margin-bottom:28px; padding:0 20px 8px 0; scrollbar-width:none; }
    .fc-filters::-webkit-scrollbar { display:none; }
    .fc-filter-btn { flex:0 0 auto; min-height:44px; padding:10px 17px; }
    .fc-grid { gap:14px; }
    .fc-card { border-radius:19px; padding:20px 14px 19px; contain-intrinsic-size:auto 390px; }
    .fc-card-media { height:176px; margin-bottom:12px; }
    .fc-card-media img { height:166px; }
    .fc-card-arc { top:38px; width:146px; height:82px; border-radius:146px 146px 0 0; }
    .fc-leaf { width:24px; height:24px; }
    .fc-card-name { min-height:0; margin-bottom:10px; font-size:17px; }
    .fc-card-divider { width:min(132px,80%); margin-bottom:12px; }
    .fc-card-desc { margin-bottom:12px; font-size:12.5px; }
    .fc-bullet { font-size:12px; }
    .fc-catalog-actions { margin-top:26px; }
    .fc-catalog-toggle { min-height:46px; min-width:min(100%,260px); }

    .formula-journey { padding:72px 0 60px !important; }
    .journey-shell { grid-template-columns:49px minmax(0,1fr); gap:15px; }
    .journey-rail { top:72px; height:calc(100svh - 88px); min-height:440px; }
    .journey-track { margin-left:15px; }
    .journey-marker { width:27px; height:27px; font-size:8px; }
    .journey-marker::after { left:27px; width:9px; }
    .journey-intro { margin-bottom:44px; padding-top:0; }
    .journey-intro h2 { font-size:clamp(38px,12vw,52px); }
    .journey-intro p { margin-top:16px; font-size:14px; line-height:1.6; }
    .journey-step { padding:14px 0 58px; }
    .journey-step-copy { margin-bottom:23px; }
    .journey-step-number { margin-bottom:12px; font-size:10px; }
    .journey-step-number::after { width:32px; }
    .journey-step h3 { font-size:clamp(27px,8vw,34px); }
    .journey-step-copy > p { margin-top:13px; font-size:13.5px; line-height:1.62; }
    .journey-facts { margin-top:20px; }
    .journey-fact { grid-template-columns:76px minmax(0,1fr); gap:8px; padding:10px 0; }
    .journey-fact dt { font-size:8.5px; }
    .journey-fact dd { font-size:11px; }
    .journey-visual { min-height:270px; border-radius:21px; }
    .journey-real-shot { clip-path:inset(0 round 20px); }
    .journey-real-shutter { border-radius:21px; }
    .journey-real-shutter::before { inset:9px; border-radius:14px; }
    .journey-visual-label { top:17px; left:17px; font-size:8px; letter-spacing:.09em; }
    .journey-visual-label::before { width:5px; height:5px; margin-right:6px; }
    .journey-real-index { top:18px; right:18px; font-size:29px; }
    .journey-real-index::after { width:26px; margin-top:7px; }
    .journey-real-note { right:11px; bottom:11px; max-width:154px; padding:8px 9px; }
    .journey-real-note strong { font-size:8px; }
    .journey-real-note span { font-size:9px; }
    .quality-stamps { gap:7px; margin-top:16px; }
    .quality-stamp { padding:8px 10px; font-size:8px; }

    footer { padding:34px 0; }
    .footer-row { justify-content:center; text-align:center; }
    .footer-copy { text-align:center; margin-top:18px; }

    .fc-modal-overlay { padding:10px; }
    .fc-modal { border-radius:20px; max-height:calc(100svh - 20px); }
    .fc-modal-close { top:11px; right:11px; width:34px; height:34px; }
    .fc-modal-media, .fc-modal-image-button { height:36svh; min-height:0; }
    .fc-modal-info { padding:28px 20px 24px; }
  }

  @media (max-width:540px){
    .fc-card { padding:18px 13px 16px; }
    .fc-card-media { height:150px; margin-bottom:10px; }
    .fc-card-media img { height:140px; }
    .fc-card-arc { top:32px; width:124px; height:70px; border-radius:124px 124px 0 0; }
    .fc-card-name { font-size:15px; margin-bottom:8px; line-height:1.22; }
    .fc-card-divider { width:min(110px,72%); margin:0 auto 10px; }
    .fc-card-desc { font-size:11.5px; margin-bottom:10px; }
    .fc-bullet { font-size:11px; gap:6px; margin-bottom:6px; }
    .fc-bullet svg { width:12px; height:12px; }
    .journey-visual { min-height:300px; }
  }

  @media (max-width:380px){
    nav, nav.compact { padding-left:12px; padding-right:12px; }
    .logo-word { font-size:16px; }
    .logo-mark { height:29px; }
    .lang-switch button { padding:5px 8px; }
    .journey-shell { display:block; }
    .journey-rail { display:none; }
    .journey-step h3 { font-size:29px; }
    .journey-visual { min-height:282px; }

    .fc-grid { gap:9px; }
    .fc-card { padding:14px 10px 14px; }
    .fc-card-media { height:128px; margin-bottom:8px; }
    .fc-card-media img { height:120px; }
    .fc-card-arc { top:26px; width:104px; height:58px; border-radius:104px 104px 0 0; }
    .fc-card-name { font-size:13.5px; margin-bottom:6px; }
    .fc-card-desc { display:none; }
  }

  /* Short phones in landscape keep the hero legible instead of stacking text
     beneath an oversized image. */
  @media (max-width:900px) and (max-height:600px) and (orientation:landscape){
    nav { min-height:52px; padding-top:6px; padding-bottom:6px; }
    .hero-wrapper { height:310vh; min-height:0; }
    .hero-bottles { top:auto; right:auto; left:6%; bottom:8%; display:block; }
    .glass-panel { width:auto; display:block; }
    .bottles-frame { width:min(40vw,52svh,310px); height:auto; aspect-ratio:1; }
    .hero-text { right:var(--edge); left:auto; bottom:8%; width:36vw; max-width:340px; }
    .hero-text h1 { font-size:26px; }
    .hero-text p { font-size:12px; }
  }