/* ════════════════════════════════════════════════════════════
   FEEL GREAT — Insulinorésistance
   Editorial Luxury · Double-Bezel · Asymmetric Bento · GSAP
   ════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  /* Surfaces · Editorial Luxury cream */
  --cream:        #FAF7F0;
  --cream-deep:   #F2EBDF;
  --paper:        #FBF9F4;
  --espresso:     #1A1410;
  --espresso-soft:#3A2E26;

  /* Ink — strengthened contrast for readability on cream */
  --ink:          #1A1410;
  --ink-soft:     #3D2F22;   /* was #5C4F44 — darker for body */
  --ink-mute:     #6B5847;   /* was #8B7E72 — darker for meta */
  --ink-faint:    #95857A;   /* was #B5A696 */

  /* Accents — Match Unicity packs */
  --orange:       #D97706;   /* Balance burnt orange */
  --orange-deep:  #9A3412;
  --orange-soft:  #FED7AA;
  --orange-tint:  rgba(217, 119, 6, 0.08);

  --gold:         #F59E0B;   /* Unimate yellow */
  --gold-deep:    #B45309;
  --gold-soft:    #FEF3C7;
  --gold-tint:    rgba(245, 158, 11, 0.08);

  --sage:         #6B7F65;   /* Trust / wellness */
  --sage-soft:    #D4E0D0;

  --rose:         #B91C1C;   /* Alarm */
  --rose-soft:    #FEE2E2;

  /* Lines */
  --line:         rgba(26, 20, 16, 0.08);
  --line-strong:  rgba(26, 20, 16, 0.18);
  --line-paper:   rgba(255, 247, 235, 0.1);

  /* Type */
  --serif: 'Fraunces', 'Playfair Display', Georgia, serif;
  --sans:  'Cabin', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Spacing scale */
  --pad-x:   clamp(20px, 4vw, 56px);
  --max:     1320px;
  --max-text:1180px;

  /* Section spacing — cinematic but not excessive */
  --sec-y:   clamp(72px, 9vw, 140px);

  /* Radii */
  --r-sm:  8px;
  --r-md:  18px;
  --r-lg:  28px;
  --r-xl:  40px;

  /* Easing — premium custom curves */
  --e:        cubic-bezier(0.32, 0.72, 0, 1);
  --e-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --e-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
  text-wrap: pretty;
  font-feature-settings: 'ss01', 'cv01';
}
main, section, article, aside, header, footer { display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: 0; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; user-select: none; }
ul, ol { list-style: none; }
em, .serif-italic { font-style: italic; }
sup { font-size: 0.55em; vertical-align: super; line-height: 0; font-weight: 500; }
small { font-size: 0.85em; }

::selection { background: var(--orange); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── FILM GRAIN ────────────────────────────────────────── */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1, 0 0 0 0 0.08, 0 0 0 0 0.06, 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ─── PROGRESS BAR ──────────────────────────────────────── */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  z-index: 1000;
  transition: width 100ms linear;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════════ */
.title-display {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 52px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
  font-variation-settings: "opsz" 144;
  max-width: 22ch;
}
.title-display--small {
  font-size: clamp(24px, 2.6vw, 38px);
  max-width: 24ch;
}
.title-display--mech {
  font-size: clamp(28px, 3.2vw, 46px);
  max-width: 20ch;
}
.serif-italic {
  font-style: italic;
  font-variation-settings: "opsz" 144;
}
.lede {
  font-family: var(--sans);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
  margin-top: 24px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 28px;
}
.kicker span {
  width: 28px;
  height: 1px;
  background: var(--orange);
  display: block;
}
.kicker--center {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.kicker--unimate span { background: var(--gold); }

/* ═══════════════════════════════════════════════════════════
   BUTTONS — Nested CTA architecture
═══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 28px;
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 250ms var(--e), background 250ms var(--e);
  white-space: nowrap;
  position: relative;
}
.btn--primary {
  background: var(--ink);
  color: var(--cream);
}
.btn--primary:hover {
  background: var(--espresso-soft);
  transform: translateY(-1px);
}
.btn--primary:active {
  transform: translateY(0) scale(0.98);
}
.btn--ghost {
  padding: 14px 24px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  transition: border-color 200ms var(--e);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  background: rgba(255, 247, 235, 0.14);
  border-radius: 50%;
  transition: transform 350ms var(--e), background 250ms var(--e);
}
.btn--primary:hover .btn__icon {
  background: rgba(255, 247, 235, 0.22);
  transform: translate(2px, -1px);
}

/* ═══════════════════════════════════════════════════════════
   NAV — Floating glass pill
═══════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  max-width: 1240px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 10px 12px 10px 22px;
  background: rgba(250, 247, 240, 0.7);
  border: 1px solid rgba(26, 20, 16, 0.07);
  border-radius: 100px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 8px 32px -10px rgba(26, 20, 16, 0.1),
    0 2px 8px -2px rgba(26, 20, 16, 0.04);
  transition: all 400ms var(--e);
}
.nav.scrolled {
  top: 10px;
  padding: 8px 10px 8px 22px;
  background: rgba(250, 247, 240, 0.92);
  border-color: rgba(26, 20, 16, 0.1);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 0 0 1px rgba(255, 255, 255, 0.4) inset,
    0 14px 40px -10px rgba(26, 20, 16, 0.18),
    0 4px 12px -2px rgba(26, 20, 16, 0.08);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.nav__mark { color: var(--orange); }
.nav__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.nav__name em {
  font-style: italic;
  color: var(--orange);
  font-variation-settings: "opsz" 144;
}
.nav__links {
  display: flex;
  gap: 28px;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 200ms var(--e);
  position: relative;
  padding: 6px 2px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0;
  height: 1.5px;
  background: var(--orange);
  border-radius: 2px;
  transition: width 350ms var(--e);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-active {
  color: var(--ink);
}
.nav__links a.is-active::after {
  width: 100%;
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 10px 22px;
  background: var(--orange);
  color: #fff;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  transition: background 250ms var(--e), transform 250ms var(--e), box-shadow 250ms var(--e);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 4px 14px -2px rgba(217, 119, 6, 0.4);
}
.nav__cta:hover {
  background: var(--orange-deep);
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    0 8px 22px -4px rgba(217, 119, 6, 0.55);
}
.nav__cta-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 300ms var(--e), background 250ms var(--e);
}
.nav__cta:hover .nav__cta-arrow {
  background: rgba(255, 255, 255, 0.3);
  transform: translate(2px, -1px) scale(1.05);
}

/* ═══════════════════════════════════════════════════════════
   HERO — Editorial Split
═══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100dvh;
  padding: 120px var(--pad-x) 80px;
  display: flex;
  align-items: center;
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 100% 0%, var(--orange-tint), transparent 60%),
    radial-gradient(ellipse 60% 40% at 0% 100%, var(--gold-tint), transparent 60%),
    var(--cream);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  align-items: center;
}
.hero__col--text {
  position: relative;
  z-index: 2;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 32px;
  backdrop-filter: blur(8px);
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulseDot 2.4s ease-in-out infinite;
}
@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.hero__title {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 64px);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 640px;
  margin-bottom: 32px;
}
.hero__lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin-bottom: 40px;
  text-wrap: pretty;
}
.hero__lead em {
  color: var(--orange);
  font-variation-settings: "opsz" 144;
  font-weight: 500;
}
.hero__actions {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}
.hero__trust {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.hero__trust svg { color: var(--orange); }

/* Hero media — Double-Bezel */
.hero__col--media {
  position: relative;
}
.hero__figure {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(26, 20, 16, 0.18);
}
.hero__figure img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: calc(var(--r-xl) - 8px);
}
.hero__caption {
  position: absolute;
  left: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  padding: 12px 18px;
  background: rgba(250, 247, 240, 0.92);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px -8px rgba(26, 20, 16, 0.18);
}
.caption__label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 2px;
}
.caption__text {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  font-style: italic;
}

.hero__chip {
  position: absolute;
  top: 32px;
  right: -28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 16px 22px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 18px;
  box-shadow: 0 16px 40px -12px rgba(26, 20, 16, 0.4);
  transform: rotate(3deg);
  z-index: 3;
}
.chip__num {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold);
  font-variation-settings: "opsz" 144;
}
.chip__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.7);
  line-height: 1.3;
}

.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hero__scroll-line {
  width: 1px;
  height: 36px;
  background: var(--ink-mute);
  animation: scrollLine 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.4); }
}

/* ═══════════════════════════════════════════════════════════
   STATS — Asymmetric Bento gapless
═══════════════════════════════════════════════════════════ */
.stats {
  padding: var(--sec-y) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.stats__head {
  margin-bottom: 64px;
  max-width: 1100px;
}

.bento--stats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 14px;
}

.cell {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  overflow: hidden;
  transition: transform 400ms var(--e), border-color 300ms var(--e), box-shadow 300ms var(--e);
}
.cell:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 50px -20px rgba(26, 20, 16, 0.14);
}
.cell--big        { grid-column: span 5; grid-row: span 2; padding: 48px 44px; }
.cell--photo      { grid-column: span 4; grid-row: span 2; padding: 0; }
.cell--alarm      { grid-column: span 3; grid-row: span 1; background: var(--cream-deep); border-color: rgba(217, 119, 6, 0.18); }
.cell:not(.cell--big):not(.cell--photo):not(.cell--alarm):not(.cell--quote):not(.cell--cta) {
  grid-column: span 4;
}
.cell--quote      { grid-column: span 5; background: var(--ink); color: var(--cream); border-color: transparent; }
.cell--cta        { grid-column: span 3; background: var(--orange); color: var(--cream); border-color: transparent; }

.cell__inner { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.cell__num {
  font-family: var(--serif);
  font-size: clamp(48px, 5.5vw, 80px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  font-feature-settings: 'tnum';
}
.cell__num.small { font-size: clamp(36px, 4vw, 56px); }
.cell__num.accent { color: var(--cream); }
.cell--quote .cell__num { color: var(--cream); }
.cell--cta .cell__num { color: var(--cream); }
.cell__num sup {
  font-size: 0.4em;
  margin-left: 2px;
  color: var(--orange);
  font-weight: 500;
  vertical-align: super;
  font-style: italic;
  font-variation-settings: "opsz" 144;
}
.cell--cta .cell__num sup { color: var(--gold-soft); }
.cell--quote .cell__num sup { color: var(--gold); }
.cell--alarm .cell__num sup { color: var(--rose); }

.cell__caption {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 32ch;
  margin-top: auto;
}
.cell--cta .cell__caption,
.cell--quote .cell__caption {
  color: rgba(250, 247, 240, 0.94);
}

.cell__source {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.cell--cta .cell__source,
.cell--quote .cell__source { color: rgba(250, 247, 240, 0.78); }

.cell--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cell__photo-tag {
  position: absolute;
  bottom: 20px;
  left: 20px;
  padding: 8px 14px;
  background: rgba(250, 247, 240, 0.92);
  backdrop-filter: blur(8px);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line);
}

.quote-mark {
  color: var(--gold);
  margin-bottom: 8px;
  opacity: 0.8;
}
.cell__quote {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-bottom: auto;
}

.cell__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-top: auto;
  padding-top: 14px;
  color: var(--cream);
  border-top: 1px solid rgba(250, 247, 240, 0.2);
  transition: gap 300ms var(--e);
}
.cell__link:hover { gap: 10px; }

/* ═══════════════════════════════════════════════════════════
   MECH — Sticky-driven scrollytelling (no pin, native sticky)
═══════════════════════════════════════════════════════════ */
.mech {
  background: var(--ink);
  color: var(--cream);
  position: relative;
  padding: var(--sec-y) var(--pad-x);
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(217, 119, 6, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 40% at 70% 70%, rgba(245, 158, 11, 0.06), transparent 60%),
    var(--ink);
}
.mech__progress {
  position: sticky;
  top: 0;
  z-index: 5;
  margin: 0 calc(var(--pad-x) * -1) 64px;
  height: 2px;
  background: rgba(250, 247, 240, 0.06);
}
.mech__progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--orange), var(--gold));
  transition: width 350ms var(--e);
}
.mech__intro {
  max-width: var(--max);
  margin: 0 auto 80px;
}
.mech__intro .kicker { color: var(--gold); }
.mech__intro .kicker span { background: var(--gold); }
.title-display--mech {
  color: var(--cream);
  max-width: 18ch;
}
.title-display--mech .serif-italic { color: var(--gold); }

.mech__layout {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.mech__sticky {
  position: sticky;
  top: 14vh;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72vh;
}
/* === CELL STAGE === */
.cell-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
}

/* Floating background particles */
.particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(0.4px);
  pointer-events: none;
  animation: particleFloat 12s ease-in-out infinite;
  z-index: 1;
}
.particle.p1 { top: 8%;  left: 12%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation-delay: -1s; animation-duration: 14s; }
.particle.p2 { top: 22%; right: 8%; background: var(--gold);   box-shadow: 0 0 8px var(--gold);   animation-delay: -3s; animation-duration: 11s; }
.particle.p3 { bottom: 14%; left: 6%;  background: var(--gold);   box-shadow: 0 0 8px var(--gold);   animation-delay: -5s; animation-duration: 13s; }
.particle.p4 { bottom: 8%;  right: 14%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation-delay: -2s; animation-duration: 15s; }
.particle.p5 { top: 50%; left: 2%; background: var(--gold);   box-shadow: 0 0 8px var(--gold);   animation-delay: -7s; }
.particle.p6 { top: 4%;  right: 30%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation-delay: -9s; animation-duration: 16s; }
.particle.p7 { bottom: 30%; right: 4%; background: var(--gold);   box-shadow: 0 0 8px var(--gold);   animation-delay: -4s; animation-duration: 12s; }
.particle.p8 { top: 70%; left: 18%; background: var(--orange); box-shadow: 0 0 8px var(--orange); animation-delay: -6s; animation-duration: 13s; }
@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  25% { transform: translate(8px, -10px); opacity: 0.7; }
  50% { transform: translate(-6px, -16px); opacity: 0.4; }
  75% { transform: translate(-10px, 6px); opacity: 0.6; }
}

/* Orbits */
.orbit {
  position: absolute;
  border: 1px dashed rgba(245, 158, 11, 0.12);
  border-radius: 50%;
  animation: spin 60s linear infinite;
}
.orbit--1 { inset: 12%; }
.orbit--2 { inset: 4%;  animation-direction: reverse; animation-duration: 90s; border-color: rgba(217, 119, 6, 0.08); }
.orbit--3 { inset: 22%; animation-duration: 45s; border-style: dotted; border-color: rgba(245, 158, 11, 0.18); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Pulse rings (energy waves) */
.pulse-ring {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0;
  animation: pulseRing 3.5s ease-out infinite;
}
.pulse-ring.r2 { animation-delay: -1.75s; }
@keyframes pulseRing {
  0%   { transform: scale(0.5); opacity: 0; }
  20%  { opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}
.cell-stage.state-locked .pulse-ring { border-color: var(--rose); animation-duration: 5s; }

/* SVG connection lines */
.cell-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.conn {
  stroke: var(--gold);
  stroke-dasharray: 2 3;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity 700ms var(--e), stroke 500ms var(--e);
}
.cell-stage.state-firing .conn { opacity: 0.6; animation: dashFlow 1.6s linear infinite; }
.cell-stage.state-locked .conn  { opacity: 0.3; stroke: var(--rose); animation: none; }
@keyframes dashFlow { to { stroke-dashoffset: -10; } }

/* Cell core */
.cell-core {
  position: relative;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(245, 158, 11, 0.22), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(217, 119, 6, 0.12), transparent 55%),
    rgba(217, 119, 6, 0.05);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  box-shadow:
    inset 0 0 60px rgba(245, 158, 11, 0.12),
    0 0 100px rgba(245, 158, 11, 0.18);
  animation: cellBreath 5s ease-in-out infinite;
  z-index: 3;
  transition: border-color 600ms var(--e), box-shadow 600ms var(--e);
}
.cell-stage.state-locked .cell-core {
  border-color: rgba(185, 28, 28, 0.4);
  box-shadow:
    inset 0 0 60px rgba(185, 28, 28, 0.15),
    0 0 100px rgba(185, 28, 28, 0.18);
}
@keyframes cellBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}

/* Nucleus */
.cell-nucleus {
  position: absolute;
  inset: 36%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.5), rgba(245, 158, 11, 0.08));
  border: 1px solid rgba(245, 158, 11, 0.4);
  animation: corePulse 3s ease-in-out infinite;
  display: grid;
  place-items: center;
}
.nucleus-glow {
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.3), transparent 70%);
  filter: blur(8px);
  opacity: 0.7;
}
@keyframes corePulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.2); opacity: 1; }
}

/* Receptors — bigger, more detailed */
.receptor {
  position: absolute;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(245, 158, 11, 0.1);
  border: 2px solid rgba(245, 158, 11, 0.5);
  transition: all 600ms var(--e);
  z-index: 5;
}
.receptor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.5;
  transition: all 500ms var(--e);
}
.receptor[data-r="1"] { top: -1%; left: 50%; transform: translateX(-50%); }
.receptor[data-r="2"] { top: 50%; right: -1%; transform: translateY(-50%); }
.receptor[data-r="3"] { bottom: -1%; left: 50%; transform: translateX(-50%); }
.receptor[data-r="4"] { top: 50%; left: -1%; transform: translateY(-50%); }
.receptor.active {
  background: rgba(245, 158, 11, 0.22);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.55);
}
.receptor.active .receptor-dot {
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 8px var(--gold);
}
.receptor.locked {
  background: rgba(185, 28, 28, 0.18);
  border-color: var(--rose);
  box-shadow: 0 0 18px rgba(185, 28, 28, 0.45);
}
.receptor.locked .receptor-dot {
  background: var(--rose);
  opacity: 0.85;
}

/* Orbs (glucose / insulin) */
.orb {
  position: absolute;
  border-radius: 50%;
  z-index: 4;
  transition: all 1000ms var(--e-out);
  opacity: 0;
}
.orb::after {
  content: '';
  position: absolute;
  inset: -50%;
  border-radius: 50%;
  background: radial-gradient(circle, currentColor, transparent 70%);
  opacity: 0.4;
  filter: blur(2px);
}
.orb.show { opacity: 1; }
.orb.attached { transform: scale(0.55); opacity: 0.55; animation: none; }

.orb--g {
  width: 9px; height: 9px;
  background: var(--gold);
  color: var(--gold);
  box-shadow: 0 0 10px var(--gold);
  animation: orbDrift 6s ease-in-out infinite;
}
.orb--i {
  width: 12px; height: 12px;
  background: var(--orange);
  color: var(--orange);
  box-shadow: 0 0 14px var(--orange);
  animation: orbDrift 7s ease-in-out infinite;
}
.orb[data-o="g1"] { top: 18%; left: 6%; }
.orb[data-o="g2"] { top: 70%; left: 8%; }
.orb[data-o="g3"] { top: 38%; left: 0%; }
.orb[data-o="g4"] { top: 86%; left: 30%; animation-delay: -2s; }
.orb[data-o="i1"] { top: 14%; right: 12%; animation-delay: -1s; }
.orb[data-o="i2"] { top: 65%; right: 8%; animation-delay: -3s; }
.orb[data-o="i3"] { top: 8%; right: 38%; animation-delay: -4s; }
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(5px, -7px); }
}

/* State pill */
.cell-state {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(7, 5, 3, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 9px 18px;
  border-radius: 100px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  white-space: nowrap;
  z-index: 6;
  transition: all 500ms var(--e);
}
.state-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px currentColor;
  animation: stateDot 1.4s ease-in-out infinite;
}
@keyframes stateDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
.cell-stage.state-locked .cell-state {
  color: var(--rose);
  border-color: rgba(185, 28, 28, 0.4);
}
.cell-stage.state-locked .state-dot { background: var(--rose); }

/* Each step is a normal scrolling block, fades when it leaves viewport */
.mech__steps {
  display: flex;
  flex-direction: column;
  gap: 18vh;
  padding: 24vh 0;
}
.mstep {
  opacity: 0.55;
  transform: translateY(0);
  transition: opacity 600ms var(--e-out), transform 600ms var(--e-out);
}
.mstep.is-active {
  opacity: 1;
}
.mstep__index {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}
.mstep__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
  text-transform: lowercase;
  letter-spacing: 0;
  font-variation-settings: "opsz" 144;
  margin-right: 4px;
}
.mstep__title {
  font-family: var(--serif);
  font-size: clamp(26px, 2.8vw, 38px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 22px;
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 18ch;
}
.mstep__title span.serif-italic { color: var(--gold); }
.mstep__body {
  font-size: 17px;
  line-height: 1.7;
  color: #FFFFFF;
  font-weight: 400;
  max-width: 46ch;
  text-wrap: pretty;
}

/* ═══════════════════════════════════════════════════════════
   SYMPTOMS — 2-col Editorial layout
═══════════════════════════════════════════════════════════ */
.symptoms {
  padding: var(--sec-y) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.symptoms__head {
  grid-column: 1 / -1;
  margin-bottom: 24px;
  max-width: 900px;
}
.symptoms__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.symp {
  border-bottom: 1px solid var(--line);
  padding: 28px 0;
  transition: padding 350ms var(--e);
  cursor: default;
}
.symp:hover { padding-left: 12px; }
.symp__row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 16px;
  align-items: start;
}
.symp__num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
  padding-top: 4px;
}
.symp__body h4 {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
  font-variation-settings: "opsz" 144;
}
.symp__body p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}
.symp__body p em {
  color: var(--orange);
  font-variation-settings: "opsz" 144;
}

.symptoms__photo {
  position: sticky;
  top: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 8px;
  box-shadow: 0 24px 60px -20px rgba(26, 20, 16, 0.16);
}
.symptoms__photo img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: calc(var(--r-lg) - 8px);
}
.symptoms__photo-tag {
  padding: 16px 20px;
  text-align: center;
}
.photo-tag__caption {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 4px;
  font-variation-settings: "opsz" 144;
}
.photo-tag__sub {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ═══════════════════════════════════════════════════════════
   TRANSITION BREAK
═══════════════════════════════════════════════════════════ */
.transition-break {
  padding: var(--sec-y) var(--pad-x);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, var(--orange-tint), transparent 60%),
    var(--cream);
}
.transition-break__inner { max-width: 800px; margin: 0 auto; }
.transition-break__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 24px;
  text-wrap: balance;
}
.transition-break__title .serif-italic {
  color: var(--orange);
  font-weight: 500;
}
.transition-break__lede {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCTS — Z-Axis Cascade with Double-Bezel
═══════════════════════════════════════════════════════════ */
.product {
  padding: var(--sec-y) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.product__head {
  margin-bottom: 80px;
  max-width: 800px;
}

/* Card-product : Double-Bezel (shell + core) */
.card-product {
  margin-bottom: 80px;
  position: relative;
}
.card-product__shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 30px 80px -30px rgba(26, 20, 16, 0.18);
}
.card-product__core {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(24px, 4vw, 64px);
  background: var(--cream);
  border-radius: calc(var(--r-xl) - 12px);
  padding: clamp(36px, 5vw, 72px);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.card-product--reverse .card-product__core { grid-template-columns: 1.05fr 1fr; }

.card-product__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 80% at center, var(--orange-tint), transparent 70%);
  border-radius: var(--r-lg);
  aspect-ratio: 1.05;
  overflow: hidden;
  isolation: isolate;
}
.card-product__media--unimate {
  background: radial-gradient(ellipse 80% 80% at center, var(--gold-tint), transparent 70%);
}
.card-product__media img {
  width: 90%;
  max-width: 460px;
  object-fit: contain;
  filter: drop-shadow(0 24px 40px rgba(26, 20, 16, 0.18));
  transition: transform 800ms var(--e-out);
}
.card-product:hover .card-product__media img {
  transform: scale(1.04) rotate(-1deg);
}
.card-product__badge {
  position: absolute;
  top: 24px;
  right: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 100px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}
.card-product__badge svg { color: var(--orange); }
.card-product__badge--unimate svg { color: var(--gold); }

.card-product__info { display: flex; flex-direction: column; gap: 22px; }
.card-product__title {
  font-family: var(--serif);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}
.card-product__title .serif-italic { color: var(--orange); font-weight: 500; }
.card-product__title .serif-italic.unimate { color: var(--gold-deep); }
.card-product__tagline {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 144;
  max-width: 36ch;
}
.card-product__desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}
.card-product__desc strong { color: var(--ink); font-weight: 600; }

.kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 6px 0;
}
.kpi-row li {
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi-row li:last-child { border-right: 0; }
.kpi-row__num {
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 600;
  color: var(--orange);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variation-settings: "opsz" 144;
  font-feature-settings: 'tnum';
  display: inline-flex;
  align-items: baseline;
}
.kpi-row__num::before {
  content: '–';
  font-weight: 700;
  margin-right: 4px;
  color: inherit;
  font-size: 1.15em;
  letter-spacing: -0.02em;
}
.kpi-row__num.no-prefix::before { content: ''; margin: 0; }
.kpi-row--unimate .kpi-row__num { color: var(--gold-deep); }
.kpi-row__num small { font-size: 0.55em; font-style: italic; font-weight: 500; }
.kpi-row__lbl { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.kpi-row__src { font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

.ingred__title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 14px;
}
.ingred__list { display: flex; flex-direction: column; gap: 10px; }
.ingred__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.ingred__dot {
  flex-shrink: 0;
  margin-top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.ingred__dot--unimate { background: var(--gold); }

.badge-fasting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(107, 127, 101, 0.12);
  border: 1px solid rgba(107, 127, 101, 0.3);
  color: var(--sage);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 6px;
  align-self: flex-start;
}
.badge-fasting strong { color: var(--ink); font-weight: 700; }

/* ── PROTOCOL ─────────────────────────────────── */
.protocol {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
}
.protocol__head { margin-bottom: 56px; max-width: 800px; }

.protocol__track {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 880px;
  position: relative;
}
.proto {
  display: grid;
  grid-template-columns: 90px 64px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.proto:last-child { border-bottom: 0; }
.proto__time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  padding-top: 4px;
}
.proto__time span {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  line-height: 1;
}
.proto__time small {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.proto__line {
  position: relative;
  width: 1px;
  background: var(--line);
  justify-self: center;
}
.proto__line::before {
  content: '';
  position: absolute;
  left: -3px; top: 4px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.proto__product {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 4px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 12px;
}
.proto__product--unimate { color: var(--gold-deep); border-color: rgba(245, 158, 11, 0.3); background: var(--gold-tint); }
.proto__product--balance { color: var(--orange-deep); border-color: rgba(217, 119, 6, 0.3); background: var(--orange-tint); }

.proto__body h4 {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
  margin-bottom: 8px;
  line-height: 1.2;
}
.proto__body p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ═══════════════════════════════════════════════════════════
   PROOF — Studies + Transformations
═══════════════════════════════════════════════════════════ */
.proof {
  padding: var(--sec-y) var(--pad-x);
  max-width: var(--max);
  margin: 0 auto;
}
.proof__head {
  margin-bottom: 56px;
  max-width: 800px;
}

.studies {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 20px;
  margin-bottom: 48px;
}
.study {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  transition: transform 400ms var(--e), box-shadow 400ms var(--e);
}
.study:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(26, 20, 16, 0.14);
}
.study--featured {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}
.study__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.study--featured .study__head {
  border-bottom-color: rgba(250, 247, 240, 0.12);
}
.study__logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--orange-tint);
  border: 1px solid rgba(217, 119, 6, 0.2);
  color: var(--orange);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.study--featured .study__logo {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--gold);
}
.study__logo svg { width: 22px; height: 22px; }
.study__head h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variation-settings: "opsz" 144;
}
.study__head p {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 4px;
  text-transform: uppercase;
}
.study--featured .study__head p { color: rgba(250, 247, 240, 0.85); }
.study__type {
  color: var(--orange-deep);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.study--featured .study__type { color: var(--gold); }

.study__data {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.study__data > div { display: flex; flex-direction: column; gap: 4px; }
.study__num {
  font-family: var(--serif);
  font-size: clamp(36px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--orange);
  line-height: 1;
  font-variation-settings: "opsz" 144;
  font-feature-settings: 'tnum';
  display: inline-flex;
  align-items: baseline;
}
.study__num::before {
  content: '–';
  font-weight: 700;
  margin-right: 5px;
  color: inherit;
  font-size: 1.15em;
  letter-spacing: -0.02em;
}
.study__num.no-prefix::before { content: ''; margin: 0; }
.study--featured .study__num { color: var(--gold); }
.study__num small { font-size: 0.6em; font-style: italic; font-weight: 500; }
.study__lbl {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.3;
}
.study--featured .study__lbl { color: rgba(250, 247, 240, 0.92); }
.study__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-mute);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.study--featured .study__desc {
  color: rgba(250, 247, 240, 0.85);
  border-top-color: rgba(250, 247, 240, 0.12);
}

.institutions {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 96px;
}
.institutions__lead {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.institutions__list {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.institutions__list li {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  font-variation-settings: "opsz" 144;
}

/* ── TRANSFORMATIONS GRID ─────────────────────── */
.transforms__head {
  margin-bottom: 56px;
  max-width: 760px;
}
.transforms__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: dense;
  gap: 16px;
}
.trans {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 400ms var(--e), box-shadow 400ms var(--e);
  grid-column: span 6;
}
.trans:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(26, 20, 16, 0.18);
}
.trans--big   { grid-column: span 7; grid-row: span 2; }
.trans:not(.trans--big):not(.trans--wide) { grid-column: span 5; }
.trans--wide  { grid-column: span 12; }
.trans__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cream-deep);
}
.trans--big .trans__media { aspect-ratio: 4 / 5; }
.trans--wide .trans__media { aspect-ratio: 21 / 9; }
.trans__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 800ms var(--e-out);
}
.trans:hover .trans__media img { transform: scale(1.04); }

.trans__caption { padding: 24px 26px 28px; }
.trans__period {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-deep);
  background: var(--orange-tint);
  border: 1px solid rgba(217, 119, 6, 0.2);
  padding: 4px 12px;
  border-radius: 100px;
  margin-bottom: 12px;
}
.trans__period.gold {
  color: var(--gold-deep);
  background: var(--gold-tint);
  border-color: rgba(245, 158, 11, 0.25);
}
.trans__num {
  font-family: var(--serif);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
  font-variation-settings: "opsz" 144;
}
.trans__num strong { font-weight: 600; }
.trans__quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  font-variation-settings: "opsz" 144;
}

/* ═══════════════════════════════════════════════════════════
   FINAL CTA
═══════════════════════════════════════════════════════════ */
.final-cta {
  padding: var(--sec-y) var(--pad-x);
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(217, 119, 6, 0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 80%, rgba(245, 158, 11, 0.12), transparent 60%);
  pointer-events: none;
}
.final-cta__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.final-cta__media img {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.4));
  transition: transform 800ms var(--e-out);
}
.final-cta__media:hover img { transform: scale(1.02); }

.final-cta__text { display: flex; flex-direction: column; gap: 22px; }
.final-cta__text .kicker { color: var(--gold); }
.final-cta__text .kicker span { background: var(--gold); }

.final-cta__title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--cream);
  font-variation-settings: "opsz" 144;
  text-wrap: balance;
  max-width: 20ch;
}
.final-cta__title .serif-italic {
  color: var(--gold);
  font-weight: 500;
}
.final-cta__lede {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(250, 247, 240, 0.92);
  max-width: 50ch;
}

.final-cta__pillars {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.final-cta__pillars li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cream);
}
.final-cta__pillars svg { color: var(--gold); flex-shrink: 0; }

.btn-mega {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px 20px 36px;
  margin-top: 12px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 100px;
  align-self: flex-start;
  transition: transform 350ms var(--e), box-shadow 350ms var(--e), background 250ms var(--e);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 16px 40px -10px rgba(245, 158, 11, 0.4);
}
.btn-mega:hover {
  transform: translateY(-2px);
  background: var(--gold-deep);
  color: var(--cream);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 24px 60px -10px rgba(245, 158, 11, 0.5);
}
.btn-mega:active { transform: translateY(0) scale(0.98); }
.btn-mega__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  transition: transform 350ms var(--e);
}
.btn-mega:hover .btn-mega__icon {
  transform: translate(2px, -2px) scale(1.05);
}

.final-cta__link {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: rgba(250, 247, 240, 0.55);
  margin-top: 8px;
}
.final-cta__link a {
  color: var(--gold);
  border-bottom: 1px solid rgba(245, 158, 11, 0.4);
  padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
.footer {
  background: var(--cream-deep);
  padding: 80px var(--pad-x) 32px;
  border-top: 1px solid var(--line);
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.footer__brand p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 380px;
}
.footer__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
}
.footer__h {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
}
.footer__cols a {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
  padding: 4px 0;
  transition: color 200ms var(--e);
}
.footer__cols a:hover { color: var(--ink); }
.footer__bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.disclaimer {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  max-width: 760px;
}
.copyright {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.copyright a {
  color: var(--orange);
  border-bottom: 1px solid rgba(217, 119, 6, 0.3);
  padding-bottom: 1px;
}

/* ═══════════════════════════════════════════════════════════
   REVEAL ON SCROLL — JS-driven only (GSAP)
   Elements stay visible by default; JS animates them in.
   This prevents "blank-section" bugs caused by ScrollTrigger pinning.
═══════════════════════════════════════════════════════════ */
[data-reveal] {
  /* Visible by default — GSAP will animate in if it picks them up */
  opacity: 1;
  transform: none;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__chip { right: 16px; top: 16px; }
  .symptoms { grid-template-columns: 1fr; }
  .symptoms__photo { position: static; max-width: 480px; margin: 0 auto; order: -1; }
  .mech__layout { grid-template-columns: 1fr; gap: 30px; }
  .mech__sticky { position: relative; top: auto; height: auto; }
  .cell-stage { max-width: 280px; margin: 0 auto; }
  .mstep__title { max-width: none; }
  .card-product__core { grid-template-columns: 1fr !important; }
  .card-product--reverse .card-product__media { order: -1; }
  .studies { grid-template-columns: 1fr; }
  .final-cta__inner { grid-template-columns: 1fr; }
  .final-cta__media { max-width: 540px; margin: 0 auto; }

  .cell--big        { grid-column: span 12; grid-row: span 1; }
  .cell--photo      { grid-column: span 12; grid-row: span 1; aspect-ratio: 16/9; }
  .cell--alarm      { grid-column: span 6; }
  .cell:not(.cell--big):not(.cell--photo):not(.cell--alarm):not(.cell--quote):not(.cell--cta) { grid-column: span 6; }
  .cell--quote      { grid-column: span 12; }
  .cell--cta        { grid-column: span 12; }

  .trans--big   { grid-column: span 12; grid-row: span 1; }
  .trans:not(.trans--big):not(.trans--wide) { grid-column: span 6; }
  .trans--wide  { grid-column: span 12; }
}

@media (max-width: 768px) {
  .nav { padding: 10px 12px 10px 18px; }
  .nav__links { display: none; }

  .hero { padding-top: 90px; }
  .hero__title { font-size: clamp(40px, 11vw, 60px); }
  .hero__chip { display: none; }
  .hero__trust { gap: 16px 24px; }
  .hero__actions { gap: 14px; }

  .cell--big, .cell--photo, .cell--alarm, .cell--quote, .cell--cta,
  .cell:not(.cell--big):not(.cell--photo):not(.cell--alarm):not(.cell--quote):not(.cell--cta) {
    grid-column: span 12;
  }
  .cell { padding: 28px 24px; }

  .mech__layout { grid-template-columns: 1fr; gap: 32px; }
  .mech__sticky { position: relative; top: auto; height: auto; padding: 24px 0; }
  .mech__steps { gap: 8vh; padding: 8vh 0; }
  .mstep { opacity: 1 !important; }

  .symp__row { grid-template-columns: 40px 1fr; gap: 12px; }

  .kpi-row { grid-template-columns: 1fr; }
  .kpi-row li { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi-row li:last-child { border-bottom: 0; }

  .protocol__track { gap: 0; }
  .proto { grid-template-columns: 64px 32px 1fr; }
  .proto__time span { font-size: 22px; }
  .protocol__track::before { display: none; }

  .trans, .trans--big, .trans--wide,
  .trans:not(.trans--big):not(.trans--wide) { grid-column: span 12; }

  .footer__inner { grid-template-columns: 1fr; }
  .institutions { gap: 16px; padding: 16px 20px; }
  .institutions__list { gap: 16px; }

  .final-cta__pillars { gap: 12px; }
  .btn-mega { padding: 16px 20px 16px 28px; font-size: 15px; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .btn--ghost { padding: 14px 0; text-align: center; }
}