:root {
  --bg: #f7f6f2;
  --white: #ffffff;
  --graphite: #242424;
  --soft: #8b8b87;
  --line: #e7e6e1;
  --text-muted: #5f5f5b;
  --centella: #b8c9b5;
  --centella-light: #e7eee5;
  --hydrate: #bfdde1;
  --hydrate-light: #e8f2f3;
  --repair: #d8cfd9;
  --repair-light: #f0ebf1;
  --radius: 4px;
  --container: 1200px;
  --header-height: 76px;
  --shadow: 0 22px 60px rgba(36, 36, 36, .08);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
  --enter-duration: 3.6s;
  --fade-duration: 3.6s;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--graphite);
  background: var(--bg);
  font-family: "Manrope", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }

img,
svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button,
a { -webkit-tap-highlight-color: transparent; }

::selection { color: var(--white); background: var(--centella); }

@keyframes note-glow {
  0%, 100% { box-shadow: 0 12px 30px rgba(36,36,36,.07); }
  50% { box-shadow: 0 16px 38px rgba(36,36,36,.13); }
}
@keyframes scroll-line {
  0% { transform: scaleX(0); transform-origin: left; opacity: 0; }
  35% { transform: scaleX(1); transform-origin: left; opacity: 1; }
  70% { transform: scaleX(1); transform-origin: right; opacity: 1; }
  100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
}
@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes hero-product-in {
  0% {
    transform: translate3d(0, 28px, 0) scale(.94);
  }
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
}
@keyframes hero-image-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes hero-product-idle {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-.4deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(.7deg); }
}

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  color: var(--white);
  background: var(--graphite);
  transform: translateY(-150%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-height);
  border-bottom: 1px solid transparent;
  background: rgba(247, 246, 242, .86);
  backdrop-filter: blur(16px);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.scroll-progress {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--centella), var(--hydrate), var(--repair));
  transform: scaleX(0);
  transform-origin: left;
}
.site-header.is-scrolled {
  border-color: var(--line);
  background: var(--bg);
  box-shadow: 0 8px 30px rgba(36, 36, 36, .03);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 28px;
}
.logo {
  color: var(--graphite);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
}
.logo-dot { color: var(--centella); }
.logo--light { color: var(--white); }
.main-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
}
.main-nav a {
  position: relative;
  color: #5d5d59;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.main-nav a::after {
  position: absolute;
  right: 0;
  bottom: -7px;
  left: 0;
  height: 1px;
  background: var(--graphite);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s var(--ease);
}
.main-nav a:hover,
.main-nav a:focus-visible { color: var(--graphite); }
.main-nav a:hover::after,
.main-nav a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.main-nav__buy {
  display: none;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .main-nav__buy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 16px 0 0;
    padding: 0 25px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .1em;
    line-height: 1;
    text-transform: uppercase;
    color: var(--white) !important;
    background: var(--graphite);
    box-shadow: 0 10px 24px rgba(36, 36, 36, .12);
    transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  }
  .main-nav__buy:hover {
    background: #3a3a38;
    box-shadow: 0 14px 28px rgba(36, 36, 36, .16);
    transform: translateY(-2px);
    color: var(--white) !important;
  }
  .main-nav__buy span { font-size: 17px; font-weight: 500; letter-spacing: 0; transition: transform .25s var(--ease); }
  .main-nav__buy:hover span { transform: translate(3px, -3px); }
  .main-nav a.main-nav__buy {
    padding: 0 25px;
    border-bottom: none;
    font-size: 12px;
    color: var(--white) !important;
  }
}
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--graphite);
  background: transparent;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px 0;
  background: currentColor;
  transition: transform .25s ease;
}
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 25px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform .25s var(--ease), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Arrow on buttons: an inline SVG instead of the "↗" glyph, whose weight and
   shape are drawn by the system font and differ between phones and desktops.
   The SVG inherits the button's colour, so it stays white on dark buttons and
   graphite on outline/ghost ones. */
.button__icon {
  width: 17px;
  height: 17px;
  flex: none;
  display: block;
  transition: transform .25s var(--ease);
}
.button:hover .button__icon { transform: translate(3px, -3px); }
/* The text link animates its own gap, so its icon must not drift as well */
.button__icon--still,
.button:hover .button__icon--still { transform: none; }
.button:hover { transform: translateY(-2px); }
.button--dark { color: var(--white); background: var(--graphite); box-shadow: 0 10px 24px rgba(36, 36, 36, .12); }
.button--dark:hover { background: #3a3a38; box-shadow: 0 14px 28px rgba(36, 36, 36, .16); }
.button--outline { color: var(--graphite); border-color: rgba(36, 36, 36, .24); background: transparent; }
.button--outline:hover { border-color: var(--graphite); background: rgba(255, 255, 255, .45); }
.button--ghost { color: var(--graphite); border-color: transparent; background: transparent; }
.button--ghost:hover { background: rgba(36, 36, 36, .06); }
.button--small { min-height: 38px; padding-inline: 18px; font-size: 10px; }
.button--white { color: var(--graphite); background: var(--white); box-shadow: 0 12px 30px rgba(36, 36, 36, .12); }
.button--white:hover { background: var(--centella-light); }
.button--full { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(36, 36, 36, .3);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .25s ease, gap .25s ease;
}
.text-link:hover { border-color: var(--graphite); gap: 14px; }

.section { padding: 132px 0; }
.section-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, .7fr); align-items: end; gap: 50px; margin-bottom: 58px; }
.section-heading h2,
.hero h1,
.product h2,
.ingredients h2,
.composition h2,
.serum h2,
.about h2,
.final-cta h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .98;
}
.section-heading h2 { font-size: clamp(38px, 4.3vw, 58px); }
.section-intro { max-width: 350px; margin: 0 0 5px; color: var(--soft); font-size: 16px; line-height: 1.55; }
.section-heading--center { display: block; max-width: 620px; margin-inline: auto; text-align: center; }
.section-heading--center .section-intro { margin-inline: auto; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  color: var(--soft);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
.eyebrow::before { width: 20px; height: 1px; background: currentColor; content: ""; opacity: .7; }
.eyebrow--green { color: #71836e; }
.eyebrow--blue { color: #6f999f; }
.eyebrow--lavender { color: #9a899d; }
.eyebrow--light { color: rgba(255, 255, 255, .64); }

.hero {
  position: relative;
  display: flex;
  min-height: 760px;
  align-items: center;
  padding: calc(var(--header-height) + 66px) 0 70px;
  overflow-x: clip;
  background:
    radial-gradient(circle at 82% 20%, rgba(191, 221, 225, .38), transparent 28%),
    radial-gradient(circle at 12% 86%, rgba(231, 238, 229, .65), transparent 31%),
    var(--bg);
}
.hero::after {
  position: absolute;
  right: -120px;
  bottom: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(36, 36, 36, .07);
  border-radius: 50%;
  content: "";
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr); align-items: center; gap: clamp(44px, 7vw, 105px); }
.hero-copy { max-width: 590px; }
.hero h1 { font-size: clamp(52px, 6.2vw, 82px); }
.hero-lead { max-width: 420px; margin: 28px 0 0; color: var(--text-muted); font-size: 18px; line-height: 1.55; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.hero-proof { display: flex; gap: 28px; margin-top: 64px; color: var(--soft); font-size: 11px; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase; }
.hero-proof span { display: flex; flex-direction: column; gap: 4px; }
.hero-proof b { color: var(--graphite); font-size: 22px; font-weight: 600; letter-spacing: -.05em; }
.hero-note { position: absolute; z-index: 6; right: -10px; bottom: -27px; display: flex; align-items: center; gap: 10px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 50px; background: rgba(255, 255, 255, .78); box-shadow: var(--shadow); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(10px); animation: note-glow 5s ease-in-out infinite; pointer-events: none; }
.hero-scroll { position: absolute; bottom: 25px; left: 50%; display: flex; align-items: center; gap: 10px; color: var(--soft); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; transform: translateX(-50%); }
.hero-scroll span { display: block; width: 34px; height: 1px; background: var(--soft); animation: scroll-line 2.4s ease-in-out infinite; }

.image-placeholder {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(36, 36, 36, .1);
  background: #eef0ec;
  isolation: isolate;
}
.image-placeholder::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,0) 48%);
  background-size: 220% 220%;
  content: "";
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen {
  0%, 35%, 100% { background-position: 0% 50%; }
  65% { background-position: 100% 50%; }
}
.image-placeholder::after {
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: -25%;
  width: 60%;
  height: 75%;
  border-radius: 50%;
  background: rgba(255, 255, 255, .42);
  content: "";
  filter: blur(2px);
}
.image-placeholder__brief {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  color: var(--graphite);
  text-align: center;
}
.image-placeholder__brief-label {
  color: var(--soft);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.image-placeholder__description {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: clamp(10px, 1.05vw, 14px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.hero-visual {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  max-width: 650px;
  aspect-ratio: 3 / 2;
  justify-self: end;
  align-self: center;
  padding: 24px;
  box-sizing: border-box;
}
.hero-product {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  overflow: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  animation: hero-product-in var(--enter-duration) var(--ease-soft) backwards;
  animation-delay: var(--enter-delay, 0s);
  pointer-events: none;
  z-index: var(--layer, 1);
  will-change: transform;
}
.hero-product--centella {
  --tilt: -8deg;
  --layer: 2;
  --enter-delay: .2s;
}
.hero-product--hydrate {
  --tilt: 3deg;
  --layer: 3;
  --enter-delay: .3s;
}
.hero-product--oligo {
  --tilt: 8deg;
  --layer: 1;
  --enter-delay: .48s;
}
.hero-product__float {
  position: absolute;
  width: 48%;
  aspect-ratio: 1;
  animation: hero-product-idle var(--idle-duration, 18s) ease-in-out infinite;
  animation-delay: calc(var(--enter-delay, 0s) + var(--enter-duration, 3.6s) + var(--idle-phase, 0s));
  transform-origin: 50% 82%;
  pointer-events: none;
  will-change: transform;
}
.hero-product__hit {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
.hero-product--centella .hero-product__float { left: 0; bottom: 2%; --idle-duration: 16s; --idle-phase: 0s; }
.hero-product--hydrate .hero-product__float { left: 28%; top: 0; --idle-duration: 21s; --idle-phase: .8s; }
.hero-product--oligo .hero-product__float { right: 0; bottom: 2%; --idle-duration: 19s; --idle-phase: 1.6s; }
.hero-product--centella .hero-product__hit {
  clip-path: polygon(0 0, 58.333% 0, 58.333% 63.889%, 100% 63.889%, 100% 100%, 0 100%);
}
.hero-product--oligo .hero-product__hit {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 63.889%, 50% 63.889%, 50% 0);
}
.hero-product__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: 14px;
  opacity: 1;
  transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg));
  box-shadow: 0 18px 24px rgba(36, 36, 36, .16);
  animation: hero-image-in var(--fade-duration, 3.6s) var(--ease-soft) backwards;
  animation-delay: var(--enter-delay, 0s);
  transition: transform .65s var(--ease-soft), box-shadow .65s ease, opacity .4s ease;
}
@media (hover: hover) and (pointer: fine) {
  .hero-product.is-front,
  .hero-product:has(.hero-product__hit:hover) {
    z-index: 10;
  }
  .hero-product.is-front .hero-product__image,
  .hero-product:has(.hero-product__hit:hover) .hero-product__image {
    transform: translateY(-14px) scale(1.1) rotate(0deg);
    box-shadow: 0 28px 34px rgba(36, 36, 36, .24);
  }
  .hero-visual.is-hovering .hero-product:not(.is-front) .hero-product__image,
  .hero-visual:has(.hero-product__hit:hover) .hero-product:not(.is-front):not(:has(.hero-product__hit:hover)) .hero-product__image {
    opacity: .72;
    transform: scale(.96) rotate(var(--tilt, 0deg));
  }
}

.states { background: var(--white); }
.state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.state-card { position: relative; display: flex; min-height: 400px; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 28px; border-radius: 10px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.state-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(36,36,36,.08); }
.state-card--centella { background: var(--centella-light); }
.state-card--hydrate { background: var(--hydrate-light); }
.state-card--repair { background: var(--repair-light); }
.state-card__top { display: flex; justify-content: space-between; color: rgba(36,36,36,.58); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.state-card__body { position: relative; z-index: 1; max-width: 240px; }
.state-card h3 { margin: 0 0 16px; font-size: 27px; font-weight: 600; letter-spacing: -.045em; line-height: 1.05; }
.state-card p { margin: 0 0 25px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.state-card__mark { position: absolute; right: -13px; bottom: -48px; color: rgba(36,36,36,.07); font-size: 190px; font-weight: 800; letter-spacing: -.14em; line-height: 1; transition: transform .4s var(--ease); }
.state-card:hover .state-card__mark { transform: translateX(-9px) rotate(-3deg); }
.state-card .button { align-self: flex-start; }

.product { padding: 132px 0; }
.product--centella { background: var(--centella-light); }
.product--hydrate { background: var(--hydrate-light); }
.product--repair { background: var(--repair-light); }
.product-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); align-items: center; gap: clamp(55px, 8vw, 115px); }
.product-grid--reverse .product-copy { order: 2; }
.product-grid--reverse .product-visual { order: 1; }
.product-copy { max-width: 540px; }
.product-marker { margin: 0 0 25px; color: rgba(36,36,36,.55); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.product h2 { max-width: 570px; font-size: clamp(34px, 3.8vw, 52px); }
.product-subtitle { margin: 23px 0 34px; color: var(--text-muted); font-size: 16px; line-height: 1.5; }
.property-list { display: grid; gap: 0; margin: 0 0 34px; border-top: 1px solid rgba(36,36,36,.14); }
.property-list li { display: flex; gap: 18px; padding: 17px 0; border-bottom: 1px solid rgba(36,36,36,.14); }
.property-list li > span { width: 30px; padding-top: 2px; color: rgba(36,36,36,.45); font-size: 10px; letter-spacing: .08em; flex-shrink: 0; }
.property-list b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.property-list p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.4; }
.product-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.product-visual {
  position: relative;
}

.product-visual__composition {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 24px;
  box-sizing: border-box;
}

/* Two layers share one stage (the composition's containing block).
   Both the stage and the layers are square on every breakpoint, so a layer's
   own size and the stage width are the same ruler: translate(%) resolves to the
   same pixels on X and Y and the swap always runs along a straight diagonal.
   --layer-x / --layer-y are offsets in that single unit. */
.product-visual__image {
  position: absolute;
  top: 0;
  left: 0;
  aspect-ratio: 1 / 1;
  transform: translate(calc(var(--layer-x, 0) * 100%), calc(var(--layer-y, 0) * 100%));
  transition: transform .65s var(--ease);
  backface-visibility: hidden;
}

/* Chart: bottom-left, covers the product. Deliberately the dominant card. */
.product-visual__image--large {
  width: 69.6%;
  --layer-x: 0.06;
  --layer-y: 0.42;
  z-index: 3;
}

/* Product photo: pinned to the top-right corner of the stage, held off the edge
   by the same share of the stage on every breakpoint. --layer-x / --layer-y are
   shares of the card's own width, so resizing the card rescales where it lands:
   these values are what keeps that corner pinned at 6% of the stage now that the
   card is 64% of it instead of 40%. The swap script mirrors them exactly. */
.product-visual__image--small {
  width: 64%;
  --layer-x: 0.468;
  --layer-y: 0.025;
  z-index: 2;
}

/* Swap: the product flies down-left and comes forward,
   the chart glides right-up until it meets the right edge, then drops behind */
@media (hover: hover) and (pointer: fine) {
  .product-visual__composition:hover .product-visual__image--large {
    --layer-x: 0.35;
    --layer-y: 0.12;
    z-index: 2;
  }

  .product-visual__composition:hover .product-visual__image--small {
    --layer-x: 0.1;
    --layer-y: 0.3875;
    z-index: 3;
  }
}

.product-visual__composition.is-swapped .product-visual__image--large {
  --layer-x: 0.35;
  --layer-y: 0.12;
  z-index: 2;
}

.product-visual__composition.is-swapped .product-visual__image--small {
  --layer-x: 0.1;
  --layer-y: 0.3875;
  z-index: 3;
}

.product-visual__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 24px rgba(36, 36, 36, 0.16);
  transition: opacity 0.3s var(--ease);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.product-visual__image.is-fading img {
  opacity: 0.8;
}

/* Chart card fills the large layer, which sits on top by default */
.product-visual { display: grid; align-content: center; }
.radar-card {
  position: relative;
  display: grid;
  gap: 7px;
  overflow: hidden;
  padding: 12px 13px 9px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(36, 36, 36, .06), 0 18px 40px rgba(36, 36, 36, .17);
  transition: transform .45s var(--ease), box-shadow .45s ease;
}
.radar-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--radar-accent, var(--graphite));
}
.radar-card::after {
  content: "";
  position: absolute;
  top: -42%;
  right: -22%;
  width: 66%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--radar-soft, rgba(36, 36, 36, .06)), transparent 68%);
  pointer-events: none;
}
.radar-card--centella { --radar-accent: #6f8e6c; --radar-soft: rgba(184, 201, 181, .26); }
.radar-card--hydrate { --radar-accent: #3d686e; --radar-soft: rgba(191, 221, 225, .3); }
.radar-card--repair { --radar-accent: #725f73; --radar-soft: rgba(216, 207, 217, .32); }
.radar-card__head { position: relative; z-index: 1; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
.radar-card__eyebrow { margin: 0; color: var(--soft); font-size: 8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.radar-card__title { margin: 0; color: var(--graphite); font-size: 11px; font-weight: 800; letter-spacing: .01em; text-align: right; }
.radar-card__plot { position: relative; z-index: 1; }
.radar-card__canvas { position: relative; width: 100%; aspect-ratio: 1 / 1; }
.radar-card__canvas canvas { display: block; width: 100% !important; height: 100% !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.serum-visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 18px 24px rgba(36, 36, 36, 0.16);
}

.image-placeholder--packshot { aspect-ratio: 1 / 1; min-height: 0; border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.52), rgba(255,255,255,.16)); }
.image-placeholder--lifestyle { aspect-ratio: 3 / 2; min-height: 0; border-radius: 12px; background: linear-gradient(145deg, rgba(255,255,255,.3), rgba(255,255,255,.1)); }
.image-placeholder--centella { background: linear-gradient(145deg, rgba(255,255,255,.4), rgba(184,201,181,.22)); }
.image-placeholder--hydrate { background: linear-gradient(145deg, rgba(255,255,255,.4), rgba(191,221,225,.24)); }
.image-placeholder--repair { background: linear-gradient(145deg, rgba(255,255,255,.4), rgba(216,207,217,.25)); }

.ingredients { background: var(--white); }
.ingredient-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ingredient-card { display: flex; min-height: 520px; flex-direction: column; overflow: hidden; border-radius: 10px; background: var(--bg); transition: transform .35s var(--ease), box-shadow .35s ease; }
.ingredient-card__image { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 10px 10px 0 0; border: 1px solid var(--line); border-bottom: none; box-shadow: 0 16px 45px rgba(36,36,36,.04); }
.ingredient-card__image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.005); transition: transform .35s var(--ease); }
.ingredient-card:hover .ingredient-card__image img { transform: scale(1.035); }
.ingredient-card__content { display: flex; flex: 1; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-top: none; border-radius: 0 0 10px 10px; background: var(--bg); transition: border-color .35s ease; }
.ingredient-card__header { margin-bottom: 20px; }
.ingredient-index { color: var(--soft); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.ingredient-card h3 { margin: 8px 0 7px; font-size: 23px; font-weight: 800; letter-spacing: .04em; }
.ingredient-card__header p { margin: 0; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.ingredient-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(36,36,36,.12); }
.ingredient-list li { display: grid; grid-template-columns: minmax(110px, .8fr) 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(36,36,36,.1); }
.ingredient-list b { color: var(--graphite); font-size: 12px; font-weight: 800; line-height: 1.35; }
.ingredient-list span { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.ingredient-list li:hover { background: rgba(255,255,255,.38); }

.composition { background: var(--bg); transition: background-color 1s var(--ease); }
.composition[data-formula="centella"] { background: var(--centella-light); }
.composition[data-formula="hydrate"] { background: var(--hydrate-light); }
.composition[data-formula="repair"] { background: var(--repair-light); }
.composition-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 32px; }
.composition-tab { min-width: 154px; padding: 15px 18px; border: 1px solid var(--line); border-radius: 30px; color: var(--soft); background: transparent; font-size: 11px; font-weight: 800; letter-spacing: .12em; cursor: pointer; transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease); }
.composition-tab:hover { color: var(--graphite); border-color: rgba(36,36,36,.3); transform: translateY(-2px); }
.composition-tab.is-active { color: var(--white); border-color: var(--graphite); background: linear-gradient(110deg, var(--graphite), #4b4b47); background-size: 180% 180%; animation: gradient-shift 8s ease-in-out infinite; }
.composition-panels { max-width: 900px; margin-inline: auto; }
.composition-panel { --highlight-bg: rgba(184, 201, 181, .34); --highlight-strong: #405747; --highlight-glow: rgba(184, 201, 181, .58); padding: 34px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow: 0 16px 45px rgba(36,36,36,.04); }
.composition-panel[data-formula="hydrate"] { --highlight-bg: rgba(191, 221, 225, .42); --highlight-strong: #3d686e; --highlight-glow: rgba(191, 221, 225, .68); }
.composition-panel[data-formula="repair"] { --highlight-bg: rgba(216, 207, 217, .46); --highlight-strong: #725f73; --highlight-glow: rgba(216, 207, 217, .7); }
.composition-panel.is-active { animation: panel-in .55s var(--ease) both; }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.composition-intro { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 28px; align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.composition-chip { display: inline-flex; width: fit-content; padding: 7px 9px; border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.composition-chip--centella { color: #536952; background: var(--centella-light); }
.composition-chip--hydrate { color: #5e898e; background: var(--hydrate-light); }
.composition-chip--repair { color: #817284; background: var(--repair-light); }
.composition-intro h3 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.04em; line-height: 1.1; }
.composition-intro p { grid-column: 2; margin: 0; color: var(--text-muted); font-size: 13px; }
.composition-label { margin: 16px 0 8px; color: var(--soft); font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.composition-label--key { color: var(--highlight-strong); }
.composition-full-title { margin: 22px 0 8px; color: var(--graphite); font-size: 11px; font-weight: 800; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.composition-key-components { margin: 0; }
.key-component { display: inline; padding: 1px 4px; border-radius: 4px; color: var(--graphite); background: rgba(36,36,36,.045); box-shadow: inset 0 0 0 1px rgba(36,36,36,.08); cursor: default; transition: background .25s ease, box-shadow .25s ease, color .25s ease, transform .25s var(--ease); }
.key-component:hover,
.key-component:focus-visible,
.key-component:active,
.key-component.is-highlighted { background: linear-gradient(100deg, var(--highlight-bg), rgba(255,255,255,.78)); color: var(--highlight-strong); box-shadow: 0 0 0 2px var(--highlight-glow), 0 5px 14px rgba(36,36,36,.08); outline: none; transform: translateY(-1px); }
.full-composition__match { padding: 1px 3px; border-radius: 3px; color: var(--highlight-strong); background: var(--highlight-bg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: background .25s ease, box-shadow .25s ease, color .25s ease; }
.full-composition__match.is-highlighted { background: linear-gradient(100deg, var(--highlight-bg), rgba(255,255,255,.82)); box-shadow: 0 0 0 2px var(--highlight-glow), 0 3px 10px rgba(36,36,36,.08); }
.ingredient-details { margin-top: 16px; border-bottom: 1px solid var(--line); }
.ingredient-details[open] { padding-bottom: 8px; }
.ingredient-details summary { padding: 15px 0 10px; color: var(--graphite); font-size: 12px; font-weight: 800; letter-spacing: .1em; list-style: none; text-transform: uppercase; cursor: pointer; transition: color .25s ease; }
.ingredient-details summary::-webkit-details-marker { display: none; }
.ingredient-details summary::marker { content: ""; }
.ingredient-details summary::-moz-list-bullet { display: none; }
.ingredient-details summary:hover { color: #555550; }
.ingredient-details p { margin: 0 0 12px; color: var(--text-muted); font-size: 13px; line-height: 1.65; }
.ingredient-details strong { color: var(--graphite); }

.serum { background: var(--white); }
.serum-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(400px, 1.14fr); align-items: center; gap: clamp(48px, 8vw, 112px); }
.serum-copy { max-width: 490px; }
.serum-copy h2 { font-size: clamp(38px, 4.5vw, 58px); }
.serum-copy > p:not(.eyebrow) { max-width: 430px; margin: 25px 0 32px; color: var(--text-muted); font-size: 16px; line-height: 1.6; }
.image-placeholder--serum { aspect-ratio: 3 / 2; border-radius: 12px; background: linear-gradient(145deg, #f1f2ee, #dce7e3); }
.serum-features { display: grid; gap: 10px; margin: 28px 0 32px; padding: 0; list-style: none; }
.serum-features li { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.46); transition: transform .3s var(--ease), background .3s ease, border-color .3s ease; }
.serum-features li:hover { transform: translateX(5px); background: rgba(255,255,255,.78); border-color: rgba(36,36,36,.16); }
.serum-features li > span { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background: var(--graphite); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.serum-features b { display: block; margin: 1px 0 3px; font-size: 13px; font-weight: 800; }
.serum-features p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.45; }

.about { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(circle at 85% 12%, rgba(191, 221, 225, .12), transparent 28%), radial-gradient(circle at 8% 92%, rgba(184, 201, 181, .09), transparent 30%), var(--graphite); }
.about::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent); content: ""; pointer-events: none; }
.about .container { position: relative; z-index: 1; }
.about-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr); align-items: end; gap: clamp(45px, 7vw, 110px); margin-bottom: 72px; }
.about-heading__intro { max-width: 650px; }
.about h2 { font-size: clamp(40px, 5vw, 64px); }
.about-heading__copy p { margin: 0; color: rgba(255,255,255,.67); font-size: 16px; line-height: 1.65; }
.about-heading__copy p + p { margin-top: 16px; }
.about-stats { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 0 86px; border-top: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
.about-stat { padding: 23px 24px 22px 24px; border-left: 1px solid rgba(255,255,255,.13); }
.about-stat:first-child { padding-left: 24px; border-left: 0; }
.about-stat__number { display: block; color: var(--white); font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.about-stat p { margin: 10px 0 0; color: rgba(255,255,255,.52); font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; text-transform: uppercase; }
.timeline { position: relative; max-width: 920px; margin-inline: auto; padding: 8px 0 12px; }
.timeline__track { position: absolute; top: 34px; bottom: 34px; left: 27px; width: 1px; background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(191,221,225,.62), rgba(184,201,181,.12)); transform: scaleY(0); transform-origin: top; }
.timeline.reveal.is-visible .timeline__track { animation: timeline-draw 1.3s .2s var(--ease) forwards; }
.timeline__pulse { position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--hydrate); box-shadow: 0 0 0 5px rgba(191,221,225,.12), 0 0 18px rgba(191,221,225,.55); animation: timeline-pulse 2.8s ease-in-out infinite; }
.timeline__list { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 26px; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-marker { position: relative; z-index: 1; display: flex; width: 56px; height: 56px; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; color: var(--white); background: #2d2d2b; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: center; transition: border-color .3s ease, background .3s ease, transform .3s var(--ease); }
.timeline-item:hover .timeline-marker { border-color: var(--hydrate); background: rgba(191,221,225,.12); transform: scale(1.06); }
.timeline-marker time, .timeline-year { line-height: 1.1; }
.timeline-item--today .timeline-marker { border-color: rgba(184,201,181,.65); background: linear-gradient(135deg, rgba(184,201,181,.28), rgba(191,221,225,.18)); }
.timeline-card { padding: 24px 26px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.045); backdrop-filter: blur(8px); transition: transform .3s var(--ease), border-color .3s ease, background .3s ease; }
.timeline-card:hover { transform: translateX(5px); border-color: rgba(191,221,225,.34); background: rgba(255,255,255,.07); }
.timeline-card--highlight { border-color: rgba(184,201,181,.3); background: linear-gradient(120deg, rgba(184,201,181,.12), rgba(191,221,225,.07)); }
.timeline-kicker { margin: 0 0 9px; color: #a9c9cd; font-size: 10px; font-weight: 800; letter-spacing: .15em; line-height: 1.2; text-transform: uppercase; }
.timeline-card h3 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.035em; line-height: 1.12; }
.timeline-card p { margin: 11px 0 0; color: rgba(255,255,255,.62); font-size: 14px; line-height: 1.6; }
.values-heading { max-width: 650px; margin: 96px auto 0; text-align: center; }
.values-heading h2 { font-size: clamp(34px, 4vw, 52px); }
.values-heading > p { margin: 20px auto 0; color: rgba(255,255,255,.62); font-size: 15px; line-height: 1.6; }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 38px; }
.value-card { position: relative; min-height: 225px; padding: 23px 21px; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 9px; background: rgba(255,255,255,.04); transition: transform .3s var(--ease), border-color .3s ease, background .3s ease; }
.value-card::after { position: absolute; right: -30px; bottom: -38px; width: 100px; height: 100px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; content: ""; transition: transform .4s var(--ease); }
.value-card:hover { transform: translateY(-6px); border-color: rgba(191,221,225,.3); background: rgba(255,255,255,.065); }
.value-card:hover::after { transform: scale(1.25); }
.value-card__index { color: #8faeb2; font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.value-card h3 { position: relative; z-index: 1; margin: 39px 0 11px; font-size: 18px; font-weight: 700; letter-spacing: -.025em; }
.value-card p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.59); font-size: 13px; line-height: 1.55; }
.tech-panel { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: clamp(38px, 6vw, 82px); margin-top: 92px; padding: clamp(27px, 4vw, 44px); border: 1px solid rgba(255,255,255,.13); border-radius: 13px; background: linear-gradient(125deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 24px 60px rgba(0,0,0,.12); }
.tech-panel__copy h2 { font-size: clamp(29px, 3.3vw, 43px); }
.tech-panel__copy > p:not(.eyebrow) { max-width: 440px; margin: 22px 0 0; color: rgba(255,255,255,.64); font-size: 15px; line-height: 1.65; }
.tech-features { display: grid; gap: 10px; }
.tech-feature { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.035); transition: transform .3s var(--ease), border-color .3s ease, background .3s ease; }
.tech-feature:hover { transform: translateX(5px); border-color: rgba(191,221,225,.28); background: rgba(255,255,255,.06); }
.tech-feature > span { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; color: var(--graphite); background: var(--hydrate); font-size: 9px; font-weight: 800; letter-spacing: .05em; }
.tech-feature h3 { margin: 2px 0 5px; font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.tech-feature p { margin: 0; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.5; }
@keyframes timeline-draw { to { transform: scaleY(1); } }
@keyframes timeline-pulse { 0%, 100% { box-shadow: 0 0 0 5px rgba(191,221,225,.12), 0 0 18px rgba(191,221,225,.55); } 50% { box-shadow: 0 0 0 9px rgba(191,221,225,.05), 0 0 24px rgba(191,221,225,.72); } }

.final-cta { padding: 132px 0; background: linear-gradient(110deg, var(--hydrate-light), var(--centella-light) 48%, var(--repair-light)); background-size: 200% 200%; animation: gradient-shift 14s ease-in-out infinite; }
.final-cta .eyebrow { color: var(--graphite); }
.final-cta .eyebrow::before { background: currentColor; }
.final-cta__inner { max-width: 1040px; text-align: center; }
.final-cta h2 { font-size: clamp(42px, 5.7vw, 72px); }
.final-cta__inner > p:not(.eyebrow) { margin: 25px auto 0; color: var(--text-muted); font-size: 17px; }
.final-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 42px 0 29px; text-align: left; }
.final-product { position: relative; display: flex; min-height: 205px; flex-direction: column; justify-content: flex-start; overflow: hidden; padding: 16px 15px 14px; border: 1px solid rgba(36,36,36,.1); border-radius: 8px; background: rgba(255,255,255,.45); transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.final-product:hover { background: rgba(255,255,255,.78); box-shadow: 0 15px 30px rgba(36,36,36,.08); transform: translateY(-3px); border-color: rgba(36,36,36,.18); }
.final-product:focus-within { border-color: rgba(36,36,36,.34); box-shadow: 0 0 0 3px rgba(0,91,255,.12); }
.final-product__index {
  position: absolute;
  top: 14px;
  left: 15px;
  color: rgba(36,36,36,.4);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
}
.final-product__copy { padding-top: 28px; margin-bottom: 13px; }
.final-product__name { display: block; margin-bottom: 4px; color: var(--graphite); font-size: 15px; font-weight: 800; letter-spacing: .06em; line-height: 1.15; text-decoration: none; }
a.final-product__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.final-product small { display: block; color: var(--text-muted); font-size: 10px; line-height: 1.35; }
.market-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.market-link { appearance: none; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; margin: 0; padding: 8px 14px 8px 8px; border: 1px solid rgba(36,36,36,.16); border-radius: 999px; color: rgba(36,36,36,.72); background: rgba(255,255,255,.62); box-shadow: 0 5px 14px rgba(36,36,36,.05); font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1; text-decoration: none; transition: transform .2s var(--ease), border-color .2s ease, background .2s ease, color .2s ease, opacity .2s ease, box-shadow .2s ease; animation: market-glow 3.2s ease-in-out infinite; }
.market-link:nth-child(2) { animation-delay: .55s; }
.market-link__label { white-space: nowrap; }
.market-link:hover:not(:disabled) { transform: translateY(-2px); color: var(--graphite); background: rgba(255,255,255,.92); border-color: rgba(36,36,36,.3); box-shadow: 0 8px 18px rgba(36,36,36,.09); }
.market-link:disabled { cursor: not-allowed; opacity: .84; background: rgba(255,255,255,.42); }
.market-link:disabled:hover { transform: none; }
.market-link__icon { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); font-size: 9px; font-weight: 800; letter-spacing: 0; animation: market-icon-pulse 3.2s ease-in-out infinite; }
.market-link:nth-child(2) .market-link__icon { animation-delay: .55s; }
.market-link--ozon .market-link__icon { background: #005bff; }
.market-link--wildberries .market-link__icon { background: #cb3db6; }
@keyframes market-glow {
  0%, 100% { border-color: rgba(36,36,36,.16); box-shadow: 0 5px 14px rgba(36,36,36,.05); }
  50% { border-color: rgba(36,36,36,.3); box-shadow: 0 7px 20px rgba(36,36,36,.1); }
}
@keyframes market-icon-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}
.final-product--centella { background: rgba(231,238,229,.62); }
.final-product--hydrate { background: rgba(232,242,243,.62); }
.final-product--repair { background: rgba(240,235,241,.62); }
.final-product--set { border-color: rgba(36,36,36,.2); background: linear-gradient(135deg, rgba(231,238,229,.78), rgba(240,235,241,.7)); }

.final-product--set .final-product__visual {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 30px auto 20px;
  perspective: 1000px;
}
.final-product--set .final-product__visual img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(36, 36, 36, 0.18);
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              margin-right 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              z-index 0s;
  transform-style: preserve-3d;
}
.final-product--set .final-product__visual img:nth-child(1) {
  margin-right: -90px;
  z-index: 1;
  transform: rotateY(20deg) translateX(-10px) translateZ(15px);
}
.final-product--set .final-product__visual img:nth-child(2) {
  margin-right: -90px;
  transform: translateZ(25px);
  z-index: 2;
}
.final-product--set .final-product__visual img:nth-child(3) {
  transform: rotateY(-20deg) translateX(10px) translateZ(15px);
}
.final-product--set .final-product__visual:hover img {
  transform: rotateY(0) translateX(0) translateZ(0);
  box-shadow: 0 8px 16px rgba(36, 36, 36, 0.12);
}
.final-product--set .final-product__visual:hover img:nth-child(1),
.final-product--set .final-product__visual:hover img:nth-child(2) {
  margin-right: -65px;
}
.final-product--set .final-product__visual:hover img:nth-child(2) {
  transform: translateZ(0);
}

.final-product__visual--single {
  display: block;
  text-align: center;
  margin: 30px auto 20px;
}
.final-product__visual--single img {
  width: 120px;
  height: 120px;
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(36, 36, 36, 0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.final-product__visual--single:hover img {
  transform: scale(1.02);
  box-shadow: 0 16px 32px rgba(36, 36, 36, 0.22);
}

.ritual-set { margin: 42px 0 29px; padding: 22px; border: 1px solid rgba(36,36,36,.1); border-radius: 12px; background: rgba(255,255,255,.42); box-shadow: 0 18px 42px rgba(36,36,36,.06); text-align: left; }
.ritual-set__heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.ritual-set__label { display: inline-block; color: rgba(36,36,36,.52); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ritual-set__heading h3 { margin: 7px 0 0; font-size: clamp(22px, 3vw, 30px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.ritual-set .final-products { margin: 0; }

.site-footer { padding: 64px 0 25px; color: var(--white); background: var(--graphite); }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 45px; padding-bottom: 55px; }
.footer-label { margin: 0 0 16px; color: rgba(255,255,255,.4); font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.footer-links a,
.footer-contact a { margin: 0; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.45; transition: color .2s ease; }
.footer-links a:hover,
.footer-contact a:hover { color: var(--white); }
.footer-contact { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.footer-contact__details { margin: 0; color: rgba(255,255,255,.4); font-size: 11px; line-height: 1.45; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.38); font-size: 10px; letter-spacing: .05em; }

[data-parallax] { --parallax-x: 0px; --parallax-y: 0px; }
[data-parallax] .image-placeholder { translate: var(--parallax-x) var(--parallax-y); transition: translate .45s var(--ease); will-change: translate; }
.legal-page { padding: calc(var(--header-height) + 72px) 0 110px; background: var(--bg); }
.legal-container { max-width: 760px; }
.legal-container h1 { margin: 0 0 12px; font-size: clamp(38px, 6vw, 58px); font-weight: 600; letter-spacing: -.055em; line-height: 1; }
.legal-lead { margin: 0 0 34px; color: var(--soft); font-size: 13px; letter-spacing: .05em; text-transform: uppercase; }
.legal-container h2 { margin: 42px 0 12px; font-size: 20px; font-weight: 700; letter-spacing: -.025em; }
.legal-container p { margin: 0 0 18px; color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.legal-container p a,
.legal-container h2 + p a { color: var(--graphite); border-bottom: 1px solid rgba(36,36,36,.25); }
.legal-container .button { margin-top: 20px; }
.legal-container ul,
.legal-container ol { margin: 0 0 18px; padding-left: 20px; }
.legal-container li { color: var(--text-muted); font-size: 15px; line-height: 1.65; }
.legal-container li::marker { color: var(--soft); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s var(--ease), transform .65s var(--ease); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--image { transition-delay: calc(var(--reveal-delay, 0ms) + 120ms); }

@media (max-width: 1024px) {
  :root { --header-height: 68px; }
  .container { width: min(calc(100% - 36px), var(--container)); }
  .section { padding: 102px 0; }
  .hero { min-height: 700px; padding-top: calc(var(--header-height) + 48px); }
  .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(330px, 1.1fr); gap: 42px; }
  .hero h1 { font-size: clamp(48px, 7vw, 68px); }
  .product-grid,
  .product-grid--reverse { grid-template-columns: minmax(0, .92fr) minmax(350px, 1.08fr); gap: 45px; }
  .footer-grid { grid-template-columns: repeat(4, 1fr); gap: 25px; }
  .final-products { grid-template-columns: repeat(2, 1fr); }
  .final-product { min-height: 190px; }
}

@media (max-width: 768px) {
  :root { --header-height: 64px; }
  body { font-size: 15px; }
  .container { width: min(calc(100% - 32px), var(--container)); }
  .section { padding: 82px 0; }
  .site-header { background: rgba(247,246,242,.94); }
  .header-buy { display: none; }
  .menu-toggle { display: block; }
  .main-nav { position: fixed; top: var(--header-height); right: 0; left: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 10px 16px 18px; border-bottom: 1px solid var(--line); background: var(--bg); box-shadow: 0 18px 35px rgba(36,36,36,.07); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
  .main-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); }
  .main-nav a { padding: 15px 4px; border-bottom: 1px solid var(--line); font-size: 11px; }
  .main-nav a:last-child { border-bottom: 0; }
  .main-nav a::after { display: none; }
  .hero { min-height: 700px; padding-top: calc(var(--header-height) + 45px); }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-copy { max-width: 520px; }
  .hero h1 { font-size: clamp(43px, 12.2vw, 62px); }
  .hero-lead { max-width: 390px; font-size: 16px; }
  .hero-actions { margin-top: 30px; }
  .hero-proof { margin-top: 42px; }
  .hero-visual {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 520px);
    max-width: none;
    aspect-ratio: 3 / 2;
    justify-self: center;
    align-self: start;
    padding: 32px;
    box-sizing: border-box;
  }
  .hero-product__float { width: 48%; }
  .hero-product--centella .hero-product__float { left: 0; bottom: 2%; }
  .hero-product--hydrate .hero-product__float { left: 28%; top: 0; }
  .hero-product--oligo .hero-product__float { right: 0; bottom: 2%; }
  .hero-note {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 1;
    justify-self: end;
    margin-top: 18px;
  }
  .hero-scroll { display: none; }
  .section-heading { display: block; margin-bottom: 38px; }
  .section-heading h2 { font-size: clamp(35px, 9vw, 48px); }
  .section-intro { max-width: 400px; margin-top: 22px; }
  .state-grid,
  .ingredient-grid { grid-template-columns: 1fr; }
  .state-card { min-height: 310px; }
  .state-card__mark { font-size: 145px; bottom: -35px; }
  .product { padding: 82px 0; }
  /* Square stage here too: keeps the two rulers identical, so the swap stays a
     straight diagonal and both cards fit the full-width mobile canvas. Layer
     offsets are inherited from the base rules — one place to tune them. */
  .product-visual__composition { aspect-ratio: 1 / 1; padding: 24px; box-sizing: border-box; }
  .radar-card { gap: 6px; padding: 10px 11px 8px; border-radius: 12px; }
  .radar-card__head { padding-bottom: 6px; }
  .radar-card__title { font-size: 10px; }
  .product-grid,
  .product-grid--reverse { grid-template-columns: 1fr; gap: 42px; }
  .product-grid--reverse .product-copy,
  .product-grid--reverse .product-visual { order: initial; }
  .product-copy { max-width: none; }
  .product h2 { font-size: clamp(34px, 8.5vw, 45px); }
  .ingredient-card__content { padding: 20px; }
  .ingredient-list li { grid-template-columns: 1fr; gap: 4px; }
  .composition-tabs { flex-wrap: wrap; }
  .composition-tab { min-width: 0; flex: 1; padding-inline: 10px; }
  .composition-panel { padding: 22px; }
  .composition-intro { display: block; }
  .composition-intro p { margin-top: 12px; }
  .serum-grid { grid-template-columns: 1fr; gap: 42px; }
  .serum-copy { max-width: none; }
  .about-heading { grid-template-columns: 1fr; gap: 28px; margin-bottom: 48px; }
  .about-stats { grid-template-columns: repeat(2, 1fr); margin-bottom: 58px; }
  .about-stat { padding: 18px 16px 18px 18px; }
  .about-stat:nth-child(odd) { padding-left: 18px; border-left: 0; }
  .about-stat:nth-child(even) { padding-right: 0; }
  .timeline { max-width: none; }
  .timeline__track { left: 19px; }
  .timeline-item { grid-template-columns: 40px minmax(0, 1fr); gap: 16px; padding-bottom: 24px; }
  .timeline-marker { width: 40px; height: 40px; font-size: 8px; }
  .timeline-card { padding: 18px; }
  .timeline-card h3 { font-size: 18px; }
  .values-heading { margin-top: 70px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .tech-panel { grid-template-columns: 1fr; margin-top: 64px; }
  .tech-panel h2 { font-size: clamp(28px, 8vw, 38px); }
  .about-heading h2 { font-size: clamp(38px, 9vw, 52px); }
  .serum h2 { font-size: clamp(38px, 9vw, 52px); }
  .timeline-year { font-size: 7px; letter-spacing: .02em; }
  .final-products { grid-template-columns: 1fr; gap: 8px; }
  .final-product { min-height: 0; }
  .ritual-set { padding: 18px; }
  .ritual-set__heading { display: block; }
  .footer-grid { grid-template-columns: 1.2fr 1fr; gap: 35px 25px; }
  .footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; line-height: 1.7; }
  .footer-bottom span { display: inline; }
}

@media (max-width: 430px) {
  .container { width: calc(100% - 28px); }
  .section { padding: 72px 0; }
  .hero { min-height: 680px; padding-top: calc(var(--header-height) + 38px); }
  .hero h1 { font-size: clamp(40px, 12.8vw, 52px); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { gap: 17px; }
  .hero-proof span:last-child { display: none; }
  .state-card { min-height: 285px; padding: 22px; }
  .state-card h3 { font-size: 24px; }
  .product-grid { gap: 32px; }
  .radar-card { gap: 4px; padding: 7px 8px 6px; border-radius: 10px; }
  /* Phones only: the chart card is drawn ~20% larger than the square layer that
     carries it, which buys the radar a bigger canvas. The layer itself keeps its
     size and its --layer-x / --layer-y offsets, so the swap animation is not
     touched at all — the larger card simply rides the same transform. The two
     numbers are tied together: the card (300px) plus the distance it travels on
     a swap (74px) all but fills the screen, so the negative inline margin only
     decides how the leftover ~14px is split between the edges. -7.7% splits it
     evenly, which holds ~10px of clearance on both the left edge (resting state)
     and the right edge (swapped state, where the card moves right). Growing the
     card further or widening the swap travel eats straight into that clearance.
     Deliberately scoped to phone widths: from ~700px up the taller card would
     push past the section padding below it. */
  .radar-card { width: 118%; margin-inline: -7.7%; }
  /* The back card (the pack shot that sits behind the chart) gets the same ~10px
     clearance as the chart card, but measured from the right edge while it rests
     and from the left edge once a swap brings it forward. On phones it is 6/5 of
     the desktop share (see below), so it is the layer's width that differs here;
     `left` then has to carry the difference, because a wider card lands further
     right for the same --layer-x. That static offset shifts both states together,
     which is exactly what is needed: it is the same 8.57% that pulls the resting
     card back off the right edge and the swapped card against the left one.
     Deliberately not --layer-x / --layer-y here — the swap script writes those
     offsets inline, so overriding them per breakpoint would leave the animation
     aiming at one place and landing in another. */
  .product-visual__image--small { width: 74.7%; left: -8.57%; }
  .radar-card::before { height: 2px; }
  .radar-card__eyebrow { font-size: 7px; letter-spacing: .08em; }
  .radar-card__head { gap: 6px; padding-bottom: 4px; }
  .radar-card__title { font-size: 9px; }
  .ingredient-card__content { padding: 20px; }
  .composition-tab { flex-basis: 100%; }
  .composition-panel { padding: 18px; }
  .composition-intro h3 { font-size: 20px; }
  .ingredient-details p { font-size: 12px; }
  .final-cta { padding: 82px 0; }
  .final-cta h2 { font-size: clamp(38px, 11vw, 50px); }
  .final-products { margin-top: 32px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-contact { padding-bottom: 5px; }
  body { padding-bottom: 0; }
}

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