/* ============================================
   JAIN LABORATORY — Apple-style premium design
   ============================================ */

:root {
  --bg: #fbfaf7;
  --bg-soft: #f4f1ec;
  --bg-dark: #0a0a0a;
  --ink: #111;
  --ink-soft: #6e6e73;
  --line: rgba(0, 0, 0, 0.08);
  --accent: #2a4a3a;
  --accent-2: #c9a26b;
  --gradient: linear-gradient(135deg, #2a4a3a 0%, #c9a26b 60%, #d8a89c 100%);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.08);
  --radius: 0;
  --radius-sm: 0;
  --maxw: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --navh: 102px;      /* фактическая высота закреплённой шапки с лентой */

  /* Вертикальный ритм — три ступени, больше не заводить.
     Разнобой из девяти значений читался как «разбросано»: глазу
     не за что держаться, когда каждая секция дышит по-своему. */
  --sec: 118px;       /* обычная секция */
  --sec-lg: 158px;    /* акцентная, с воздухом вокруг */
  --sec-sm: 86px;     /* компактная, примыкает к соседней */
}

/* На узком экране та же шкала, сжатая пропорционально —
   правится в одном месте, а не в двадцати медиазапросах. */
@media (max-width: 900px) {
  :root { --sec: 86px; --sec-lg: 108px; --sec-sm: 64px; }
}

/* ============ INTRO / PRELOADER ============ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.intro-bg {
  position: absolute;
  inset: 0;
  /* чистый белый: на первом экране только логотип, ничего больше */
  background: #ffffff;
  transition: opacity 0.4s var(--ease);
}
.intro-logo {
  position: relative;
  height: clamp(72px, 15vw, 132px);
  width: auto;
  transform-origin: center center;
  opacity: 0;
  transform: translateY(14px) scale(0.94);
  will-change: transform, opacity;
  /* transform transition is applied only during the "fly" phase via .flying */
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.intro-logo.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* The fly-to-nav phase: JS sets a precise transform inline; ease it slowly */
.intro-logo.flying {
  transition: transform 0.65s cubic-bezier(0.7, 0, 0.2, 1), opacity 0.3s var(--ease);
}
/* Fade the whole overlay out */
.intro.done { pointer-events: none; }
.intro.done .intro-bg { opacity: 0; }

/* Keep the real nav logo hidden until the intro logo lands on it */
.intro-lock .logo-img { opacity: 0; }
.logo-img { transition: opacity 0.4s var(--ease); }

/* Hold hero copy hidden while the intro plays (revealed by JS afterwards) */
.intro-lock body { }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .intro-lock .logo-img { opacity: 1; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }  /* no global smooth-scroll — it fights the scroll-scrub; anchor clicks smooth-scroll via JS */
body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.011em;
  overflow-x: clip;   /* clip (not hidden) — hidden makes body a scroll container and breaks position:sticky */
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* ============ TYPOGRAPHY ============ */
h1, h2, h3, h4 {
  font-family: 'Cormorant Garamond', 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
}

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}

/* ============ NAV ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: all 0.4s var(--ease);
  /* Always keep the bar: on the home page the hero photo sits directly behind the nav,
     and dark --ink links over the face were unreadable while the bar was transparent. */
  background: rgba(251, 250, 247, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}
.nav.scrolled {
  background: rgba(251, 250, 247, 0.86);
  padding: 12px 0;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.nav-left {
  display: flex; align-items: center; gap: 12px;
}
.logo {
  display: inline-flex; align-items: center;
}
.logo-img {
  height: 40px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex; gap: 36px;
  list-style: none;
  font-size: 14px; font-weight: 500;
}
.nav-links a {
  color: var(--ink);
  opacity: 0.78;
  transition: opacity 0.2s;
}
.nav-links a:hover { opacity: 1; }
.nav-cta {
  padding: 10px 20px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  font-size: 13px; font-weight: 500;
  transition: transform 0.2s var(--ease), background 0.2s;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--accent); }

/* ---- burger + left drawer (only where .nav-links can't fit) ---- */
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  margin-left: -9px;            /* оптически выравнивает полоски по краю контента */
  padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span {
  display: block; width: 22px; height: 2px; border-radius: 0;
  background: var(--ink);
  transition: transform 0.35s var(--ease), opacity 0.2s;
}
.nav-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  z-index: 120;
  width: min(320px, 82vw);
  display: flex; flex-direction: column;
  padding: 20px 24px calc(28px + env(safe-area-inset-bottom));
  background: rgba(251, 250, 247, 0.97);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-right: 1px solid var(--line);
  transform: translateX(-101%);
  visibility: hidden;
  overflow-y: auto;
  transition: transform 0.42s var(--ease), visibility 0.42s;
}
.nav-scrim {
  position: fixed; inset: 0;
  z-index: 110;
  background: rgba(28, 26, 23, 0.42);
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s var(--ease), visibility 0.42s;
}
.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.nav-drawer-close {
  position: relative;
  width: 40px; height: 40px; margin-right: -9px;
  padding: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.nav-drawer-close span {
  position: absolute; top: 50%; left: 50%;
  width: 20px; height: 2px; margin: -1px 0 0 -10px;
  border-radius: 0; background: var(--ink);
}
.nav-drawer-close span:first-child { transform: rotate(45deg); }
.nav-drawer-close span:last-child { transform: rotate(-45deg); }
.nav-drawer-links {
  list-style: none;
  display: flex; flex-direction: column;
}
.nav-drawer-links a {
  display: block;
  padding: 15px 2px;
  font-size: 18px; font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-drawer-links a.active { color: var(--accent); }
.nav-drawer-cta {
  margin-top: auto;
  padding-top: 14px; padding-bottom: 14px;
  text-align: center; font-size: 15px;
}

html.nav-open .nav-drawer { transform: none; visibility: visible; }
html.nav-open .nav-scrim { opacity: 1; visibility: visible; }
html.nav-open, html.nav-open body { overflow: hidden; }
/* кружок чата живёт на z-index 200 — иначе он светится поверх затемнения */
html.nav-open .ai-fab, html.nav-open .ai-panel { opacity: 0; pointer-events: none; }
html.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
html.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
html.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-flex; }
}
@media (max-width: 420px) {
  /* «Записаться» остаётся в выдвижной панели — в узкой шапке она жмёт логотип */
  .nav-inner > .nav-cta { display: none; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 16px 32px;
  border-radius: 0;
  font-size: 15px; font-weight: 500;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.btn-ghost {
  color: var(--accent);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--accent);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { background: var(--accent); color: #fff; }

/* ============ SCROLL STAGE (scroll-scrub video) ============ */
.scrollstage {
  position: relative;
  height: 320vh;               /* length of the scrub scroll */
}
/* A phone needs less travel to read the same animation — 320vh of thumb-scrolling
   before the page even starts is too much. */
@media (max-width: 860px) {
  .scrollstage { height: 260vh; }
}
.stage-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  /* svh keeps the pinned frame steady while a mobile browser collapses its address
     bar — plain vh changes underneath the sticky element and makes the scrub jump. */
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #e9ddcb;
}
/* idle hero fills the pinned screen */
.stage-pin .hero {
  position: absolute;
  inset: 0;
  min-height: 0;
  height: 100%;
  z-index: 1;
}
/* scrub video sits above idle hero, revealed by JS via opacity */
.stage-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;   /* JS drifts this to centre; matches the hero photo at the start */
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
/* The canvas backing store is sized to its own CSS box, so the cover fit is done in
   JS when painting. Letting object-fit: cover apply here too would scale it twice. */
canvas.stage-video { object-fit: fill; object-position: 50% 50%; }

/* Copy layers sit above the frame sequence. They have to be siblings of the canvas:
   .stage-pin .hero declares z-index 1, which opens a stacking context, so anything
   nested inside it stays below the canvas at z-index 2 no matter its own z-index. */
.stage-pin > .hero-scrim { z-index: 3; }
.hero-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  padding: 140px 32px 80px;
  pointer-events: none;        /* the picture below still needs the hover lupe */
}
.hero-copy .hero-content { pointer-events: auto; }
.stage-pin > .hero-scroll-hint { z-index: 4; }
.stage-pin > .stage-copy { z-index: 5; }
/* edge text columns — product finishes centred, text hugs both edges */
.stage-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(28px, 6vw, 96px);
}
.stage-side {
  width: min(30%, 340px);
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.stage-side.right { align-items: flex-end; text-align: right; }
.stage-copy .s-item {
  opacity: 0;
  pointer-events: none;   /* JS enables per-item once revealed (so it can't block the hero lupe) */
  will-change: opacity, transform;
}
.stage-side .eyebrow { margin-bottom: 10px; }
.stage-side h2 {
  font-size: clamp(40px, 5vw, 76px);
  line-height: 0.98;
  color: var(--ink);
}
.stage-side p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.mini-feats {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
}
.mini-feats li {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

/* Fallback: no usable video → collapse stage back to today's hero */
.scrollstage.no-video { height: auto; }
.scrollstage.no-video .stage-pin { position: relative; height: auto; }
.scrollstage.no-video .stage-pin .hero { position: relative; height: auto; min-height: 100vh; }
.scrollstage.no-video .stage-video,
.scrollstage.no-video .stage-copy { display: none; }

/* Fallback: touch / reduced-motion → no scrub, video plays once, no long scroll */
.scrollstage.no-scrub { height: auto; }
.scrollstage.no-scrub .stage-pin { position: relative; height: 100vh; }

@media (max-width: 860px) {
  /* The bottle finishes dead centre of the frame, so the two copy columns are pushed
     to the top and bottom edges. Centring them (as this did before) dropped both
     straight onto the product. */
  .stage-copy {
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    padding: 96px 24px 108px;
    text-align: center;
  }
  .stage-side { width: 100%; align-items: center; }
  .stage-side.right { align-items: center; text-align: center; }
  .stage-side h2 { font-size: clamp(30px, 9vw, 46px); }
  .stage-side p { font-size: 14px; }
  .mini-feats { font-size: 13px; gap: 6px; }
  .mini-feats li { border-bottom: none; padding-bottom: 0; }
  /* A portrait screen crops the 16:9 frame hard, so the bottle can end up under any
     part of the copy and there is no reliably empty corner to aim for. Each block gets
     its own frosted panel instead — legible whatever the frame is doing behind it. */
  .stage-copy .s-item {
    background: rgba(251, 250, 247, 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 14px 18px;
  }
  /* the CTA is already a solid pill — a panel behind it would just look like a box */
  .stage-copy .s-item:has(> .btn) {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
  }

  /* Hero copy hugs the top, where the scrim is at full strength — centred, it sat over
     the face with the gradient already faded out and the small print went unreadable. */
  .hero-copy {
    align-items: flex-start;
    padding: 104px 24px 72px;
  }
}

@media (max-width: 640px) {
  /* One phone screen cannot hold badge + headline + paragraph + two buttons + three
     feature rows: the tail spilled over the scroll cue and the chat button. The feature
     row goes — it only restates what .hero-sub already says one line above. */
  /* Scoped under .hero-copy on purpose: this block sits above the base .hero-* rules in
     the file, and at equal specificity the later declaration would win. */
  .hero-copy { padding: 96px 22px 56px; }
  .hero-copy .hero-title { font-size: clamp(38px, 12vw, 56px); margin-bottom: 20px; }
  .hero-copy .hero-sub { font-size: 15px; margin-bottom: 28px; }
  .hero-copy .hero-actions { gap: 12px; margin-bottom: 0; }
  .hero-copy .hero-features { display: none; }
  .hero-copy }

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 140px 32px 80px;
  overflow: hidden;
  background: #e9ddcb;
  isolation: isolate;
}

/* ---- Full-bleed hero photo background + lupe ---- */
.hero-media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
}
.hero-photo-clean { z-index: 1; }
.hero-photo-problem {
  z-index: 2;
  --mx: 50%;
  --my: 50%;
  --r: 0px;
  /* Soft-edged reveal: opaque in the centre, feathering out to transparent at the rim */
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(circle var(--r) at var(--mx) var(--my), #000 55%, rgba(0,0,0,0) 100%);
}
/* Grow the circle only while the cursor is over the hero */
.hero.lupe-on .hero-photo-problem { --r: 150px; }
/* Magnifier ring removed — reveal happens with no visible ring around the cursor */
.hero-ring { display: none; }

/* Scrim for text legibility on the left */
.hero-scrim {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(233,221,203,0.96) 0%,
    rgba(233,221,203,0.85) 30%,
    rgba(233,221,203,0.35) 50%,
    rgba(233,221,203,0) 68%);
}
.no-photo .hero-photo { display: none; }
.no-photo .hero { background: linear-gradient(160deg, #e9ddcb 0%, #d9c6ac 55%, #c9b190 100%); }

.hero-grid {
  position: relative;
  z-index: 5;
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
}
.hero-content {
  position: relative;
  z-index: 5;
  max-width: 560px;
}
.hero-title {
  font-size: clamp(48px, 6.5vw, 104px);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
}
.hero-title .reveal-word {
  display: inline-block;
  margin: 0 0.05em;
}
.hero-title .gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
}
.hero-sub {
  max-width: 460px;
  margin: 0 0 40px;
  font-size: 18px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.hero-actions {
  display: flex; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

/* ---- Hero feature row (Safe / Fast / Cruelty-free style) ---- */
.hero-features {
  display: flex;
  gap: 36px;
  list-style: none;
  flex-wrap: wrap;
}
.hero-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-soft);
  max-width: 140px;
}
.hero-feature-ico {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px;
  color: var(--accent);
}

@media (max-width: 980px) {
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(233,221,203,0.95) 0%,
      rgba(233,221,203,0.75) 40%,
      rgba(233,221,203,0.15) 100%);
  }
  .hero-photo { object-position: 70% center; }
  .hero-features { gap: 24px; }
}

.hero-scroll-hint {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 38px;
  border: 1.5px solid var(--ink-soft);
  border-radius: 0;
  display: flex; justify-content: center;
  z-index: 2;
}
.hero-scroll-hint span {
  width: 3px; height: 8px;
  background: var(--ink-soft);
  border-radius: 0;
  margin-top: 8px;
  animation: scrollDot 1.8s infinite var(--ease);
}
@keyframes scrollDot {
  0% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ============ STATS ============ */
.stats {
  padding: var(--sec) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.stat { text-align: center; }
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.stat-label {
  font-size: 14px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 48px; }
}

/* ============ STATEMENT ============ */
.statement {
  padding: var(--sec-lg) 0;
  text-align: center;
}
.statement-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
  max-width: 1100px;
  margin: 0 auto;
  color: var(--ink);
}
.statement-text .hl {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-style: italic;
}

/* ============ HERO PRODUCT ============ */
/* Раньше блок был чёрный с нарисованным на CSS флаконом. Теперь — светлая
   тёплая сцена с настоящей съёмкой RE:FORM и парой бейджей поверх неё. */
.hero-product {
  background:
    radial-gradient(120% 90% at 88% 18%, rgba(42,74,58,.10) 0%, transparent 58%),
    radial-gradient(90% 80% at 6% 92%, rgba(201,162,107,.16) 0%, transparent 60%),
    linear-gradient(155deg, #f7f4ee 0%, var(--bg-soft) 55%, #efeae1 100%);
  color: var(--ink);
  padding: 120px 32px;
  border-radius: 0;
  margin: 0 24px;
  overflow: hidden;
  position: relative;
}
.hero-product-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.hero-product-text .eyebrow { color: var(--accent-2); }
.hero-product-text h2 {
  color: var(--accent);
  font-size: clamp(44px, 6.4vw, 88px);
  margin-bottom: 24px;
}
.hero-product-text p {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 30px;
  line-height: 1.65;
}
/* список фактов — чипы, а не строки с линейками */
.feature-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 36px;
  font-size: 15px;
}
.feature-list li {
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,.72);
  color: var(--accent);
  backdrop-filter: blur(6px);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature-list li:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(42,74,58,.10);
}
.hero-product .btn-primary {
  background: var(--accent);
  color: #fff;
}
.hero-product .btn-primary:hover {
  background: var(--accent-2);
  color: #fff;
}

.hero-product-visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}
.shot {
  position: relative;
  width: min(100%, 430px);
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(42,74,58,.18), 0 4px 14px rgba(0,0,0,.06);
}
.shot img {
  display: block;
  width: 100%; height: auto;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.shot:hover img { transform: scale(1.04); }
.shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 42px 24px 20px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, transparent, rgba(20,28,24,.55));
}
/* бейджи-виджеты, «выпадающие» за край фотографии */
.shot-badge {
  position: absolute;
  z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px;
  border-radius: 0;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(42,74,58,.14);
  backdrop-filter: blur(10px);
  animation: shotFloat 6s ease-in-out infinite;
}
.shot-badge b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; line-height: 1;
  color: var(--accent);
}
.shot-badge span {
  font-size: 11px; line-height: 1.35;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
.shot-badge-a { top: 8%;  left: 0; }
.shot-badge-b { bottom: 12%; right: 0; animation-delay: -3s; }
@keyframes shotFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .shot-badge { animation: none; }
}

@media (max-width: 1024px) {
  .hero-product { padding: 96px 32px; }
  .hero-product-inner { gap: 52px; }
  .shot { width: min(100%, 360px); }
  .shot-badge { padding: 13px 16px; }
  .shot-badge b { font-size: 25px; }
}
@media (max-width: 880px) {
  .hero-product { padding: 80px 24px; border-radius: 0; margin: 0 12px; }
  .hero-product-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-product-visual { order: -1; }
  .shot { width: min(100%, 320px); }
  .shot-badge-a { left: -8px; }
  .shot-badge-b { right: -8px; }
}

/* ============ PRODUCTS GRID ============ */
.products { padding: var(--sec-lg) 0; }
.section-head { margin-bottom: 80px; max-width: 720px; }
.section-head.center { margin: 0 auto 80px; text-align: center; }
.section-head h2 {
  font-size: clamp(40px, 6vw, 80px);
  line-height: 1.05;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.product-card {
  background: var(--bg-soft);
  border-radius: 0;
  padding: 56px 48px;
  position: relative;
  overflow: hidden;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  isolation: isolate;
}
.product-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.product-card.wide { grid-column: span 2; min-height: 420px; }

.card-tone-1 { background: linear-gradient(160deg, #fce8e0, #f5d4c8); }
.card-tone-2 { background: linear-gradient(160deg, #e8e4dc, #d8d0c0); }
.card-tone-3 { background: linear-gradient(160deg, #dde8e0, #c8d8cc); }
.card-tone-4 { background: linear-gradient(160deg, #f0e4d8, #e0d0b8); }
.card-tone-5 { background: linear-gradient(160deg, #f8d8c8, #ecc4b0); }

.product-card-img {
  position: absolute;
  top: -60px; right: -60px;
  width: 320px; height: 320px;
  z-index: 0;
  pointer-events: none;
}
.product-card-img .circle {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.5);
  transition: transform 0.6s var(--ease);
}
.product-card:hover .circle { transform: scale(1.1) rotate(15deg); }

.product-card-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
}
.product-cat {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); opacity: 0.65;
}
.product-card h3 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  margin-top: 8px;
}
.product-card p {
  color: var(--ink); opacity: 0.75;
  font-size: 15px;
  max-width: 380px;
}
.card-arrow {
  margin-top: auto;
  font-size: 24px;
  color: var(--ink);
  transition: transform 0.3s var(--ease);
}
.product-card:hover .card-arrow { transform: translateX(8px); }

@media (max-width: 880px) {
  .products-grid { grid-template-columns: 1fr; }
  .product-card.wide { grid-column: span 1; }
  .product-card { padding: 40px 28px; min-height: 420px; }
}

/* ============ STORY ============ */
.story { padding: var(--sec-lg) 0; background: var(--bg-soft); }
.story-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 100px;
  align-items: center;
}
.story-text h2 {
  font-size: clamp(40px, 5vw, 72px);
  margin-bottom: 32px;
}
.story-text p {
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 480px;
}

/* MAP — abstract dot map */
.map {
  position: relative;
  aspect-ratio: 1.4;
  /* пропорция картинки 1484×1060 совпадает с блоком, поэтому contain ничего
     не режет и проценты точек ложатся один в один на реальную географию */
  background: #f6efe2 url(images/world-map.webp?v=2) center / contain no-repeat;
  border-radius: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}
.dot {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(42,74,58,0.15);
  transform: translate(-50%, -50%);
}
.dot::after {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: pulseDot 2.5s infinite var(--ease);
}
.dot:nth-child(2)::after { animation-delay: 0.3s; }
.dot:nth-child(3)::after { animation-delay: 0.6s; }
.dot:nth-child(4)::after { animation-delay: 0.9s; }
.dot:nth-child(5)::after { animation-delay: 1.2s; }
.dot:nth-child(6)::after { animation-delay: 1.5s; }
.dot:nth-child(7)::after { animation-delay: 1.8s; }
.dot:nth-child(8)::after { animation-delay: 2.1s; }
.dot.lab-left span { left: auto; right: 16px; }
.dot.lab-up span { top: -27px; }
.dot.lab-down span { top: 11px; }
.dot span {
  position: absolute;
  left: 16px; top: -10px;
  font-size: 11px;
  white-space: nowrap;
  color: var(--ink-soft);
  font-weight: 500;
}
@keyframes pulseDot {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}
.map-center {
  position: absolute;
  left: var(--x, 65%); top: var(--y, 44.3%);
  transform: translate(-50%, -50%);
}
.map-pulse {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 6px rgba(201,162,107,0.25),
              0 0 30px rgba(201,162,107,0.6);
}
.map-label {
  position: absolute;
  /* подпись крупная (Playfair 18) и справа налезала на Китай, Корею и Японию —
     уводим её строго над точкой, там пустое место */
  left: 50%; top: -32px;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; gap: 60px; }
}

/* ============ SCIENCE ============ */
.science { padding: var(--sec-lg) 0; }
.science-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.science-card {
  padding: 48px 36px;
  border: 1px solid var(--line);
  border-radius: 0;
  transition: all 0.4s var(--ease);
  background: #fff;
}
.science-card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}
.science-ico {
  font-size: 32px;
  color: var(--accent);
  margin-bottom: 24px;
  font-family: 'Cormorant Garamond', serif;
}
.science-card h3 { font-size: 22px; margin-bottom: 12px; }
.science-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

@media (max-width: 880px) {
  .science-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .science-grid { grid-template-columns: 1fr; }
}

/* ============ DIAGNOSTICS ============ */
.diagnostics { padding: 0; }
/* Блок идёт от края до края экрана: слева текст на зелёном, справа фотография
   вплотную к правому краю. Контейнера вокруг нет — ширину держит сама секция. */
.diag-card {
  /* --gradient (зелёный → золото → розовый) хорош на тексте, но на большой
     заливке распадается в грязь. Здесь — глубокая зелёная база с мягкими
     бликами по углам: тон один, объём даёт свет, а не смена цвета. */
  background:
    radial-gradient(80% 60% at 88% 8%,  rgba(201,162,107,.34) 0%, transparent 62%),
    radial-gradient(70% 70% at 4% 96%,  rgba(126,170,142,.28) 0%, transparent 60%),
    linear-gradient(158deg, #33553f 0%, #2a4a3a 46%, #1e3a2c 100%);
  border-radius: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 0;
  color: #fff;
  position: relative;
  overflow: hidden;
}
/* тонкая световая кромка сверху — карточка перестаёт выглядеть плоской */
.diag-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
/* внутренние поля теперь у колонки с текстом, а не у всей карточки */
.diag-text {
  padding: 110px clamp(32px, 5vw, 90px);
  display: flex; flex-direction: column; justify-content: center;
}
.diag-text .eyebrow { color: rgba(255,255,255,0.85); }
.diag-text h2 {
  color: #fff;
  font-size: clamp(36px, 5vw, 64px);
  margin-bottom: 24px;
}
.diag-text p {
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  max-width: 440px;
  margin-bottom: 32px;
}
.diag-card .btn-primary {
  background: #fff;
  color: var(--accent);
}
.diag-card .btn-primary:hover { background: var(--ink); color: #fff; }

/* фотография заполняет правую половину целиком, до самого края экрана */
.diag-visual {
  position: relative;
  min-height: 560px;
}
/* две кнопки рядом: запись и быстрый тест */
.diag-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.diag-card .btn-outline {
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.diag-card .btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}

@media (max-width: 1024px) {
  .diag-text { padding: 80px clamp(24px, 5vw, 48px); }
  .diag-visual { min-height: 460px; }
}
/* На телефоне две колонки не читаются: фото уходит наверх широкой полосой,
   текст встаёт под ним. */
@media (max-width: 760px) {
  .diag-card { grid-template-columns: 1fr; }
  .diag-text { padding: 56px 24px 64px; }
  .diag-visual { min-height: 0; aspect-ratio: 16 / 11; order: -1; }
}

/* ============ REVIEWS ============ */
.reviews { padding: var(--sec-lg) 0; background: var(--bg-soft); }
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review {
  background: #fff;
  padding: 48px 36px;
  border-radius: 0;
  display: flex; flex-direction: column;
  gap: 20px;
}
.review p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
}
.review footer {
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 500;
  margin-top: auto;
}
@media (max-width: 880px) {
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ============ CTA ============ */
.cta { padding: var(--sec-lg) 0; text-align: center; }
.cta h2 {
  font-size: clamp(48px, 8vw, 120px);
  margin-bottom: 28px;
}
.cta > .container > p {
  font-size: 19px;
  color: var(--ink-soft);
  margin-bottom: 60px;
}
.cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}
.cta-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 36px 32px;
  text-align: left;
  transition: all 0.3s var(--ease);
}
a.cta-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.cta-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.cta-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  color: var(--ink);
  line-height: 1.3;
}
.cta-meta {
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}
@media (max-width: 880px) {
  .cta-grid { grid-template-columns: 1fr; }
}

/* ============ FOOTER ============ */
.footer {
  background: var(--bg-dark);
  color: rgba(255,255,255,0.7);
  padding: 62px 0 26px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 44px;
}
.footer-logo {
  height: 44px;
  width: auto;
  display: block;
}
.footer-brand p {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
}
.footer-brand em {
  font-style: italic;
  color: rgba(255,255,255,0.5);
}
.footer h4 {
  color: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer a {
  display: block;
  font-size: 14px;
  padding: 4px 0;
  color: rgba(255,255,255,0.6);
  transition: color 0.2s;
}
.footer a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */
.reveal,
.reveal-up,
.reveal-word,
.reveal-text {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.in,
.reveal-up.in,
.reveal-word.in,
.reveal-text.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-word {
  transform: translateY(80px);
  transition-duration: 1.2s;
}
.reveal-word:nth-child(1) { transition-delay: 0.05s; }
.reveal-word:nth-child(2) { transition-delay: 0.18s; }
.reveal-word:nth-child(3) { transition-delay: 0.32s; }

.reveal-text {
  transform: translateY(60px);
  transition-duration: 1.4s;
}

.reveal-up {
  transform: translateY(60px);
}

/* Stagger children */
.products-grid .product-card:nth-child(1) { transition-delay: 0.05s; }
.products-grid .product-card:nth-child(2) { transition-delay: 0.15s; }
.products-grid .product-card:nth-child(3) { transition-delay: 0.05s; }
.products-grid .product-card:nth-child(4) { transition-delay: 0.15s; }
.products-grid .product-card:nth-child(5) { transition-delay: 0.1s; }

.science-grid .science-card:nth-child(1) { transition-delay: 0.05s; }
.science-grid .science-card:nth-child(2) { transition-delay: 0.15s; }
.science-grid .science-card:nth-child(3) { transition-delay: 0.25s; }
.science-grid .science-card:nth-child(4) { transition-delay: 0.35s; }

.stats-grid .stat:nth-child(1) { transition-delay: 0.05s; }
.stats-grid .stat:nth-child(2) { transition-delay: 0.18s; }
.stats-grid .stat:nth-child(3) { transition-delay: 0.32s; }
.stats-grid .stat:nth-child(4) { transition-delay: 0.46s; }

.reviews-grid .review:nth-child(1) { transition-delay: 0.05s; }
.reviews-grid .review:nth-child(2) { transition-delay: 0.18s; }
.reviews-grid .review:nth-child(3) { transition-delay: 0.32s; }

.cta-grid .cta-card:nth-child(1) { transition-delay: 0.05s; }
.cta-grid .cta-card:nth-child(2) { transition-delay: 0.18s; }
.cta-grid .cta-card:nth-child(3) { transition-delay: 0.32s; }

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

/* ============================================
   SUBPAGES (multi-page) — shared chrome
   ============================================ */
/* Solid nav on every non-landing page */
.subpage .nav {
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
}
.subpage .logo { color: var(--ink); }
.nav-links a.active { opacity: 1; color: var(--accent); font-weight: 600; }

/* Page hero header (title block under the fixed nav) */
.page-hero {
  padding: 170px 0 60px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.page-hero .container { max-width: 900px; }
.page-hero .eyebrow { margin-bottom: 18px; }
.page-hero h1 {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.page-hero p {
  font-size: 19px;
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 640px;
}
.cta-page { padding: var(--sec-sm) 0 var(--sec); text-align: left; }
.cta-page .cta-grid { margin: 0; }

/* Outline button (transparent, bordered) */
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
  transform: translateY(-2px);
}

/* ============================================
   PRODUCT CAROUSEL (products.html)
   ============================================ */
.pcar {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #ece7df;
  isolation: isolate;
}
.pcar-video {
  position: absolute;
  /* Секция остаётся во весь экран — её фон продолжается под полупрозрачной
     шапкой. Ниже панели опускается только само видео, иначе она срезала
     флакону крышку. */
  top: var(--navh); left: 0; right: 0; bottom: 0;
  width: 100%; height: calc(100% - var(--navh));
  object-fit: cover;
  /* при нехватке высоты кадр режется снизу, а не сверху: терять пол кадра
     менее заметно, чем крышку флакона */
  object-position: 50% 22%;
  z-index: 1;
}
.pcar-arrow {
  position: absolute;
  top: calc(var(--navh) + (100% - var(--navh)) / 2);
  transform: translateY(-50%);
  z-index: 5;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  font-size: 26px; line-height: 1; color: #1a1a1a;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.pcar-arrow:hover { background: #fff; }
.pcar-arrow:active { transform: translateY(-50%) scale(0.92); }
.pcar-arrow[disabled] { opacity: 0.4; pointer-events: none; }
.pcar-arrow.prev { left: clamp(16px, 4vw, 60px); }
.pcar-arrow.next { right: clamp(16px, 4vw, 60px); }

.pcar-actions {
  position: absolute;
  left: clamp(24px, 6vw, 80px); right: auto;
  bottom: clamp(72px, 15vh, 128px);
  z-index: 6;
  display: flex; gap: 14px; justify-content: flex-start;
  flex-wrap: wrap;
}
.pcar-dots {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(24px, 5vh, 52px);
  z-index: 6;
  display: flex; gap: 10px; justify-content: center;
}
.pcar-dots .dot-i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,0.22);
  transition: all 0.3s var(--ease);
}
.pcar-dots .dot-i.active { background: var(--ink); width: 26px; border-radius: 0; }

/* Animated per-product caption (full name + short description) */
.pcar-cap {
  position: absolute;
  left: clamp(24px, 6vw, 80px);
  bottom: clamp(150px, 25vh, 210px);
  z-index: 6;
  max-width: 380px;
  text-align: left;
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
}
.pcar-cap h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: clamp(22px, 2.9vw, 36px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.pcar-cap p { font-size: 15px; line-height: 1.5; color: var(--ink); opacity: 0.72; }
.pcar-cap.active { animation: capIn 0.6s var(--ease) both; }
.pcar-cap.leaving { animation: capOut 0.42s var(--ease) both; }
@keyframes capIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes capOut {
  from { opacity: 1; transform: none; filter: blur(0); }
  to   { opacity: 0; transform: translateY(-22px); filter: blur(5px); }
}

@media (max-width: 640px) {
  .pcar-arrow { width: 46px; height: 46px; font-size: 22px; }
  .pcar-cap { left: 0; right: 0; padding: 0 22px; max-width: none; text-align: center; bottom: 176px; }
  .pcar-actions { left: 0; right: 0; bottom: 96px; justify-content: center; padding: 0 22px; }
}

/* Product info (synced text block below the carousel) */
.pinfo {
  padding: var(--sec) 0;
  border-top: 1px solid var(--line);
}
.pinfo .container { max-width: 760px; text-align: center; }
.pinfo-card { display: none; }
.pinfo-card.active { display: block; animation: pinfoIn 0.5s var(--ease); }
@keyframes pinfoIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.pinfo-card .eyebrow { margin-bottom: 16px; }
.pinfo-card h2 { font-size: clamp(32px, 5vw, 60px); line-height: 1.05; margin-bottom: 20px; }
.pinfo-card p { font-size: 18px; color: var(--ink-soft); line-height: 1.65; max-width: 620px; margin: 0 auto 28px; }
.pinfo-card .feature-list {
  list-style: none; display: inline-flex; flex-direction: column; gap: 10px;
  margin: 0 auto 34px; text-align: left; color: var(--ink); font-size: 15px;
}
.pinfo-card .feature-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }

/* ============================================
   AI CHAT WIDGET (all pages)
   ============================================ */
.ai-fab {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 200;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff;
  padding: 0; border: none;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 34px rgba(42,74,58,0.35);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ai-fab img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Волна из двух слоёв: плотное кольцо фирменным градиентом (маска вырезает
   середину, поэтому градиент виден именно в ободке) и мягкое свечение следом. */
.ai-fab::after, .ai-fab::before {
  content: '';
  position: absolute; inset: -5px;
  border-radius: 50%;
  pointer-events: none;
}
.ai-fab::after {
  background: conic-gradient(from 210deg, #2a4a3a, #c9a26b 35%, #d8a89c 55%, #2a4a3a 90%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  animation: aiWave 2.8s ease-out infinite;
}
.ai-fab::before {
  background: radial-gradient(circle, rgba(201,162,107,0.34) 0%, rgba(42,74,58,0.18) 52%, rgba(42,74,58,0) 72%);
  animation: aiWave 2.8s ease-out infinite 1.15s;
}
@keyframes aiWave {
  0%   { transform: scale(0.92); opacity: 0.75; }
  75%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-fab::after, .ai-fab::before { animation: none; opacity: 0.4; transform: none; }
}

/* ---- всплывающее приглашение от консультанта ---- */
.ai-bubble {
  position: fixed;
  right: 96px; bottom: 88px;
  z-index: 199;
  width: min(268px, calc(100vw - 130px));
  padding: 15px 17px 14px;
  border-radius: 0;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(42,74,58,0.22);
  opacity: 0; visibility: hidden;
  transform-origin: bottom right;
  /* только проявление: собственное движение облачка тянуло робота за собой и
     ломало его траекторию — теперь всё движение несёт он один */
  transition: opacity 0.32s var(--ease), visibility 0.32s;
}
.ai-bubble.show { opacity: 1; visibility: visible; }
.ai-bubble i {
  display: block;
  font-style: normal;
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 7px;
}
.ai-bubble b {
  display: block;
  font-size: 14.5px; font-weight: 600; line-height: 1.25; color: var(--ink);
  margin-bottom: 4px;
}
.ai-bubble span {
  display: block;
  font-size: 13px; line-height: 1.4; color: var(--ink-soft);
}
.ai-bubble-x {
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px;
  border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink-soft);
}
.ai-bubble-x:hover { color: var(--ink); }
/* хвостик к кружку */
.ai-bubble::after {
  content: '';
  position: absolute; right: -6px; bottom: 12px;
  width: 12px; height: 12px;
  background: #fff;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transform: rotate(-45deg);
}
html.nav-open .ai-bubble, html.shop-open .ai-bubble { opacity: 0; visibility: hidden; }
@media (max-width: 640px) {
  .ai-bubble { right: 82px; bottom: 76px; padding: 13px 15px 12px; }
  .ai-bubble b { font-size: 13.5px; }
  .ai-bubble span { font-size: 12.5px; }
}
.ai-fab:hover { transform: translateY(-3px) scale(1.06); }
.ai-fab.active { transform: scale(0.9); }
.ai-fab.active::after { display: none; }

.ai-panel {
  position: fixed;
  right: 24px; bottom: 100px;
  z-index: 200;
  width: min(350px, calc(100vw - 40px));
  height: 480px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 30px 80px rgba(0,0,0,0.28);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform-origin: bottom right;
  opacity: 0; transform: translateY(14px) scale(0.94);
  pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.ai-panel.open { opacity: 1; transform: none; pointer-events: auto; }

.ai-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(126deg, #24422f 0%, #2f5540 46%, #3d6449 72%, #6e6f47 128%);
  color: #fff;
}
.ai-head .ai-ava {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff;
  overflow: hidden;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.ai-head .ai-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ai-head-t h4 { font-family: 'Jost', sans-serif; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.1; }
.ai-head-t small { font-size: 12px; color: rgba(255,255,255,0.55); }
.ai-close {
  margin-left: auto;
  width: 30px; height: 30px; border-radius: 50%;
  color: rgba(255,255,255,0.7); font-size: 20px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s;
}
.ai-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.ai-body {
  flex: 1; overflow-y: auto;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--bg-soft);
}
.ai-msg {
  max-width: 82%;
  padding: 11px 15px;
  border-radius: 0;
  font-size: 14px; line-height: 1.45;
}
.ai-msg.bot { background: #fff; border: 1px solid var(--line); color: var(--ink); align-self: flex-start; border-bottom-left-radius: 0; }
.ai-msg.user { background: var(--accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 0; }
.ai-msg a { color: var(--accent); text-decoration: underline; }
.ai-msg.user a { color: #fff; }

.ai-input {
  display: flex; gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.ai-input input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 11px 16px;
  font: inherit; font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}
.ai-input input:focus { border-color: var(--accent); }
.ai-input button {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  font-size: 18px; cursor: pointer;
  display: grid; place-items: center;
  transition: background 0.2s, transform 0.15s;
}
.ai-input button:hover { background: var(--accent-2); }
.ai-input button:active { transform: scale(0.92); }

@media (max-width: 640px) {
  .ai-fab { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .ai-panel { right: 12px; left: 12px; bottom: 84px; width: auto; }
}

/* ============================================
   CATALOG / CART / FAVOURITES
   ============================================ */

/* ---- logo: beige on hover ----
   Перекраска картинки фильтром неуправляема, поэтому лежит второй файл,
   залитый --accent-2 с сохранённой альфой. Первым в DOM остаётся оригинал —
   на него по-прежнему наводится интро-анимация (querySelector('.logo-img')). */
.logo { position: relative; }
.logo-img-hover {
  position: absolute; inset: 0;
  height: 100%; width: auto;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  pointer-events: none;
}
.logo:hover .logo-img { opacity: 0; }
.logo:hover .logo-img-hover { opacity: 1; }

/* ---- nav actions ---- */
.nav-links { gap: 28px; }
.nav-actions { display: flex; align-items: center; gap: 6px; }
.nav-icon {
  position: relative;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0;
  color: var(--ink); cursor: pointer;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s;
}
.nav-icon:hover { background: rgba(0,0,0,0.05); color: var(--accent); }
.nav-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-icon.on svg { fill: var(--accent-2); stroke: var(--accent-2); }
.nav-badge {
  position: absolute; top: 2px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 0;
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
}
.nav-actions .nav-cta { margin-left: 8px; }

/* ---- catalog page ---- */
/* Поиск как на маркетплейсах: широкая строка во всю колонку, сразу под
   шапкой, с кнопкой «Найти» справа. Заголовок каталога ушёл под неё —
   первым делом человек ищет, а не читает. */
.cat-hero { padding: 128px 0 34px; }
/* Шапка каталога устроена как на маркетплейсах: заголовок и счётчик товаров в
   одной строке, под ним одна пояснительная фраза. Отдельных заголовков «Виды
   косметики» и «Весь каталог» больше нет — они дробили экран на три уровня
   и съедали место до первого товара. */
.cat-top { margin-top: 24px; }
.cat-top h1 {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.03em;
}
.cat-count {
  font-family: 'Jost', -apple-system, sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: 0;
  color: var(--ink-soft);
  white-space: nowrap;
}
.cat-top p { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; }

/* Фильтры — одна горизонтальная лента, как ряд категорий на маркетплейсе.
   Раньше чипы переносились в три ряда и занимали пол-экрана на телефоне. */
.cat-filters { padding-top: 26px; }
.type-row {
  display: flex; align-items: flex-start; gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}
.type-row-label {
  display: inline-flex; align-items: center; gap: 7px;
  flex: none;
  padding-top: 11px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.type-row-label svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--accent-2); stroke-width: 1.9;
}

.cat-search { position: relative; width: 100%; z-index: 20; }
.cat-search-field {
  display: flex; align-items: center; gap: 12px;
  padding: 0 0 0 18px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cat-search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 10px 30px rgba(42,74,58,0.12);
}
.cat-search-field svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; }
.cat-search input {
  flex: 1; min-width: 0;
  height: 58px;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; color: var(--ink);
}
.cat-search input::placeholder { color: #9a9aa1; font-size: 15px; letter-spacing: 0; }
.cat-search-clear {
  border: 0; background: none; padding: 6px 4px; cursor: pointer;
  color: var(--ink-soft); font-size: 20px; line-height: 1;
}
.cat-search-go {
  flex: none;
  height: 58px;
  padding: 0 34px;
  margin-left: 6px;
  border: 0;
  background: var(--accent);
  color: #fff;
  font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.cat-search-go:hover { background: var(--ink); }

.cat-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  /* строка теперь во всю колонку, а пять подсказок в ней терялись —
     выпадашку держим по ширине поля ввода, как на маркетплейсах */
  max-width: 620px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: none;
}
.cat-suggest.open { display: block; }
.cat-suggest-hint {
  padding: 12px 18px 8px;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.cat-suggest button {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 10px 16px;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit;
  transition: background 0.15s;
}
.cat-suggest button:hover, .cat-suggest button.active { background: var(--bg-soft); }
.cat-suggest img {
  width: 44px; height: 44px; flex: none;
  object-fit: cover; border-radius: 0; background: var(--bg-soft);
}
.cat-suggest .s-name { flex: 1; font-size: 14px; font-weight: 500; }
.cat-suggest .s-name span { display: block; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.cat-suggest .s-price { font-size: 14px; font-weight: 600; white-space: nowrap; }
.cat-suggest .s-empty { padding: 18px; color: var(--ink-soft); font-size: 14px; }

/* ---- types ---- */
/* Виды — овальные чипы в одну ленту с горизонтальной прокруткой */
.type-grid {
  display: flex; flex-wrap: nowrap; gap: 9px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 2px 0;
}
.type-grid::-webkit-scrollbar { display: none; }
.type-card {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer; font: inherit; white-space: nowrap;
  transition: transform 0.28s var(--ease), background 0.28s, border-color 0.28s,
              color 0.28s, box-shadow 0.28s var(--ease);
}
.type-card:hover {
  transform: translateY(-2px);
  background: #fff;
  border-color: rgba(42,74,58,0.28);
  box-shadow: 0 8px 22px rgba(42,74,58,0.09);
}
.type-card.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 10px 26px rgba(42,74,58,0.22);
}
.type-card b { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.type-card i {
  font-style: normal; font-size: 12px; font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.type-card.active i { color: rgba(255,255,255,0.68); }

/* ---- product grid ---- */
.cat-bar {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.cat-bar h2 { font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.02em; }
.cat-bar .count { color: var(--ink-soft); font-size: 14px; }

.prod-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  padding-bottom: 90px;
}
.prod-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.prod-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Съёмка товара — вертикальная (720×1280 и подобные). Квадрат с object-fit:cover
   срезал флакону крышку и низ, отсюда «криво стоит». Держим кадр 3:4 и вписываем
   фото целиком (contain) на мягкой подложке — так все карточки выглядят ровно,
   независимо от того, портрет там или единственный альбомный снимок. */
.prod-photo {
  position: relative;
  aspect-ratio: 3 / 4;
  background: linear-gradient(168deg, #f7f4ee 0%, #f0ebe1 100%);
  display: grid; place-items: center;
  overflow: hidden;
  padding: 14px;
}
.prod-photo img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  display: block;
  transition: transform 0.45s var(--ease);
}
.prod-card:hover .prod-photo img { transform: scale(1.045); }
.prod-photo .noimg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; color: rgba(42,74,58,0.28);
}
.prod-fav {
  position: absolute; top: 10px; right: 10px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  cursor: pointer; color: var(--ink);
  transition: transform 0.2s var(--ease);
}
.prod-fav:hover { transform: scale(1.08); }
.prod-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.prod-fav.on svg { fill: #c0453c; stroke: #c0453c; }
.prod-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.prod-type { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.prod-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.prod-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.4; flex: 1; }
.prod-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.prod-price { font-size: 16px; font-weight: 600; }
.prod-add {
  border: 0; border-radius: 0;
  padding: 9px 16px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.prod-add:hover { background: var(--accent); transform: translateY(-1px); }
.prod-add.added { background: var(--accent); }
.prod-card.out .prod-add { background: var(--bg-soft); color: var(--ink-soft); cursor: default; }
.prod-card.out .prod-photo img { opacity: 0.55; }
.cat-empty { padding: 60px 0 100px; color: var(--ink-soft); }

/* ---- cart / favourites panel ---- */
.shop-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: min(400px, 88vw);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-left: 1px solid var(--line);
  transform: translateX(101%);
  visibility: hidden;
  transition: transform 0.42s var(--ease), visibility 0.42s;
}
html.shop-open .shop-panel { transform: none; visibility: visible; }
html.shop-open .nav-scrim { opacity: 1; visibility: visible; }
html.shop-open, html.shop-open body { overflow: hidden; }
html.shop-open .ai-fab, html.shop-open .ai-panel { opacity: 0; pointer-events: none; }

.shop-head { display: flex; align-items: center; gap: 8px; padding: 18px 18px 0; }
.shop-tab {
  flex: 1; padding: 12px 8px;
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.shop-tab.active { color: var(--ink); border-color: var(--accent); }
.shop-close {
  width: 38px; height: 38px; flex: none;
  border: 0; background: none; cursor: pointer;
  font-size: 24px; line-height: 1; color: var(--ink);
}
.shop-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.shop-empty { padding: 60px 10px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.shop-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.shop-item img, .shop-item .noimg {
  width: 62px; height: 62px; flex: none;
  object-fit: cover; border-radius: 0; background: var(--bg-soft);
}
.shop-item .noimg { display: grid; place-items: center; font-family: 'Cormorant Garamond', serif; color: rgba(42,74,58,0.3); }
.shop-item-main { flex: 1; min-width: 0; }
.shop-item-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.shop-item-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.shop-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 10px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 0; }
.qty button {
  width: 28px; height: 28px; border: 0; background: none; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--ink);
}
.qty span { min-width: 22px; text-align: center; font-size: 13px; font-weight: 600; }
.shop-item-price { font-size: 14px; font-weight: 600; }
.shop-item-drop {
  border: 0; background: none; cursor: pointer;
  color: var(--ink-soft); font-size: 12px; text-decoration: underline;
}
.shop-foot { padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.shop-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.shop-total b { font-size: 20px; }
.shop-foot .btn { width: 100%; justify-content: center; }
.shop-note { margin-top: 10px; font-size: 12px; color: var(--ink-soft); text-align: center; }

@media (max-width: 880px) {
  .nav-actions .nav-cta { display: none; }
  .cat-hero { padding: 116px 0 30px; }
  .type-grid { gap: 8px; }
  .type-card { padding: 10px 15px; gap: 6px; }
  .type-card b { font-size: 14px; }
}
@media (max-width: 640px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding-bottom: 40px; }
  .prod-body { padding: 12px 12px 14px; }
  .prod-title { font-size: 13px; }
  .prod-sub { display: none; }
  .prod-foot { flex-direction: column; align-items: stretch; gap: 8px; }
  .prod-add { width: 100%; }
  .cat-search input { height: 50px; font-size: 15px; }
  .cat-search input::placeholder { font-size: 13.5px; }
  /* кнопка съедала половину строки и подсказка обрезалась; на телефоне
     поиск запускает клавиша на клавиатуре (enterkeyhint="search") */
  .cat-search-go { display: none; }
  .cat-search-field { padding-right: 6px; }
  .cat-head { gap: 14px; margin-top: 20px; }
  .cat-head p { font-size: 14px; }
}

/* ============================================
   БЕГУЩАЯ СТРОКА · ФОН · АНИМАЦИЯ ПОИСКА · СТРАНИЦЫ
   ============================================ */

/* ---- бегущая строка ----
   Живёт ВНУТРИ .nav, а не отдельным fixed-элементом: панель и так закреплена
   сверху, поэтому строка видна при любой прокрутке, и ни одному блоку на сайте
   не приходится пересчитывать отступ под шапку. */
/* .subpage .nav задаёт padding сокращённой записью и специфичнее одиночного
   .nav — перебиваем обе ветки, иначе лента отъезжает от края экрана */
.nav, .subpage .nav, .nav.scrolled { padding: 0; }
.topbar {
  overflow: hidden;
  background: var(--accent);
  color: #f3ece1;
}
.topbar-track {
  display: flex;
  width: max-content;
  animation: marquee 46s linear infinite;
}
.topbar:hover .topbar-track { animation-play-state: paused; }
.topbar-seq {
  display: flex; align-items: center;
  padding: 9px 0;
  font-size: 12.5px; letter-spacing: 0.02em; white-space: nowrap;
}
.topbar-seq b { font-weight: 600; color: #fff; }
.topbar-seq span { padding: 0 22px; }
.topbar-seq em {
  font-style: normal; color: var(--accent-2); font-weight: 600;
}
.topbar-seq i {
  font-style: normal; opacity: 0.45; font-size: 10px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* лента продублирована ровно дважды */
}
@media (prefers-reduced-motion: reduce) {
  .topbar-track { animation: none; }
  .topbar-seq:nth-child(2) { display: none; }
}
/* Высота шапки не меняется при прокрутке. Раньше .scrolled ужимал отступы с
   14 до 9 px, панель прыгала на 10 px и вверху выглядела толще остальных
   состояний. При прокрутке меняется только плотность стекла — это не двигает
   ни саму панель, ни контент под ней. */
.nav-inner { padding-top: 12px; padding-bottom: 12px; }

/* ---- нежный цветочный фон на внутренних страницах ---- */
body.subpage {
  background-image: url(images/floral.svg);
  background-repeat: repeat;
  background-size: 460px auto;
  background-attachment: fixed;
}

/* ---- курсор на логотипе ----
   Внутри ссылки лежит <img>, и перетаскивание картинки подменяло курсор. */
.logo, .logo img { cursor: pointer; user-select: none; -webkit-user-drag: none; }

/* ---- анимация поиска ---- */
.cat-search-field {
  position: relative;
  transition: border-color 0.3s var(--ease), box-shadow 0.4s var(--ease),
              transform 0.4s var(--ease);
}
.cat-search.focused .cat-search-field {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(42,74,58,0.16);
  border-color: rgba(42,74,58,0.35);
}
/* мягкое кольцо, расходящееся при фокусе */
.cat-search-field::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1px solid var(--accent-2);
  opacity: 0; transform: scale(1);
  pointer-events: none;
}
.cat-search.focused .cat-search-field::after { animation: searchRing 0.75s var(--ease); }
@keyframes searchRing {
  0%   { opacity: 0.55; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.06); }
}
.cat-search-field svg { transition: transform 0.45s var(--ease), stroke 0.3s; }
.cat-search.focused .cat-search-field svg { transform: scale(1.12) rotate(-12deg); stroke: var(--accent); }
.cat-search input { transition: letter-spacing 0.3s var(--ease); }

.cat-suggest {
  transform-origin: top center;
  transition: opacity 0.24s var(--ease), transform 0.28s var(--ease);
}
.cat-suggest:not(.open) { opacity: 0; transform: translateY(-8px) scale(0.985); }
.cat-suggest.open { opacity: 1; transform: none; }
.cat-suggest button {
  opacity: 0; transform: translateY(6px);
  animation: suggestIn 0.32s var(--ease) forwards;
}
.cat-suggest button:nth-child(2) { animation-delay: 0.02s; }
.cat-suggest button:nth-child(3) { animation-delay: 0.05s; }
.cat-suggest button:nth-child(4) { animation-delay: 0.08s; }
.cat-suggest button:nth-child(5) { animation-delay: 0.11s; }
.cat-suggest button:nth-child(6) { animation-delay: 0.14s; }
@keyframes suggestIn { to { opacity: 1; transform: none; } }

/* ---- карточки появляются при смене страницы/фильтра ---- */
.prod-card {
  animation: cardIn 0.4s var(--ease) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---- постраничная навигация ---- */
.pager {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px;
  padding: 6px 0 90px;
}
.pager button {
  min-width: 42px; height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(255,255,255,0.72);
  font: inherit; font-size: 14px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.pager button:hover:not(:disabled) { transform: translateY(-2px); background: #fff; border-color: rgba(42,74,58,0.28); }
.pager button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pager button:disabled { opacity: 0.35; cursor: default; }
.pager .gap { color: var(--ink-soft); padding: 0 2px; }
.pager-info {
  width: 100%; text-align: center;
  margin-top: 4px; font-size: 13px; color: var(--ink-soft);
}

@media (max-width: 640px) {
  .topbar-seq { font-size: 11.5px; }
  .topbar-seq span { padding: 0 15px; }
  .pager { padding-bottom: 64px; }
  .pager button { min-width: 38px; height: 38px; padding: 0 11px; font-size: 13px; }
}

/* ---- поиск в шапке ---- */
.navsearch {
  position: absolute;
  top: 100%; left: 0; right: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 8px 32px 0;
  display: flex; justify-content: flex-end;
  pointer-events: none;
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.26s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.navsearch.open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.navsearch-box { position: relative; width: min(420px, 100%); }
.navsearch-field {
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: var(--shadow-md);
}
.navsearch-field svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; }
.navsearch-field input {
  flex: 1; height: 46px;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 15px; color: var(--ink);
}
.navsearch-field input::placeholder { color: #a5a5aa; letter-spacing: 0.08em; font-size: 13px; }
.navsearch-close {
  width: 32px; height: 32px; flex: none;
  border: 0; border-radius: 50%; background: none;
  font-size: 19px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.navsearch-close:hover { background: var(--bg-soft); color: var(--ink); }
/* выпадашка переиспользует стиль подсказок каталога, только уже */
.navsearch .cat-suggest { border-radius: 0; }

@media (max-width: 640px) {
  .navsearch { padding: 8px 16px 0; }
  .navsearch-box { width: 100%; }
}

/* ============================================
   ТЕЛЕФОН: медиа сверху, текст снизу
   ============================================
   На узком экране 16:9-кадр вписывается по высоте ровно в экран (390×844 →
   масштаб 1.17, по бокам срезается 1110 px), поэтому флакон занимает всю
   высоту и любой текст поверх него — поверх товара. Разводим их по уровням:
   картинка живёт в верхней части, подписи и кнопки — в нижней, на чистом фоне. */
@media (max-width: 860px) {
  :root { --media-h: 58svh; }

  .stage-pin .hero,
  .stage-pin .stage-video,
  .stage-pin > .hero-scrim {
    height: var(--media-h);
    bottom: auto;
  }
  /* канвас сам пересчитает размер: resize() читает clientHeight */

  .stage-pin > .hero-copy,
  .stage-pin > .stage-copy {
    top: var(--media-h);
    bottom: 0;
    height: auto;
    background: var(--bg);
    padding: 22px 22px calc(20px + env(safe-area-inset-bottom));
  }
  /* мягкий переход от фотографии к панели, чтобы стык не читался линией */
  .stage-pin > .hero-copy::before,
  .stage-pin > .stage-copy::before {
    content: '';
    position: absolute; left: 0; right: 0; top: -46px;
    height: 46px;
    background: linear-gradient(to bottom, rgba(251,250,247,0), var(--bg));
    pointer-events: none;
  }

  .stage-pin > .hero-copy { align-items: center; }
  .hero-copy .hero-grid { width: 100%; }
  .hero-copy   .hero-copy .hero-title { font-size: clamp(32px, 9.5vw, 44px); margin-bottom: 12px; }
  .hero-copy .hero-sub { font-size: 14px; line-height: 1.5; margin-bottom: 18px; }

  .stage-pin > .stage-copy {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: left;
  }
  .stage-copy .stage-side { width: 100%; align-items: flex-start; }
  /* панели-стёкла больше не нужны — текст и так не лежит на фото */
  .stage-copy .s-item {
    background: none; border: 0; padding: 0;
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .stage-side h2 { font-size: clamp(26px, 8vw, 38px); }
  .stage-copy .s-item .btn { width: 100%; justify-content: center; }

  .stage-pin > .hero-scroll-hint { bottom: calc(42svh + 14px); }
}

/* ---- телефон: карусель продуктов тоже расходится на два уровня ----
   Видео 16:9 в экране 100vh обрезалось так, что флакон занимал центр, а
   название, кнопки и точки лежали прямо на нём. Видео забирает верх, подписи
   и кнопки уходят под него. */
@media (max-width: 860px) {
  .pcar {
    margin-top: var(--navh);
    height: auto; min-height: 0;
    padding-bottom: 262px;               /* место под подпись, кнопки и точки */
    background: var(--bg);
  }
  .pcar-video {
    position: relative; inset: auto; top: auto;
    width: 100%; height: 54svh;
    object-position: 50% 50%;
    background: #ece7df;
  }
  .pcar-arrow { top: 27svh; width: 46px; height: 46px; font-size: 22px; }

  /* Каждый блок получает СВОЙ уровень по top, а не «снизу вверх»: подписи у
     товаров разной длины, и при отсчёте от низа двухстрочный заголовок
     наезжал на кнопки. Высота зоны фиксирована по самой длинной подписи. */
  .pcar-cap {
    left: 22px; right: 22px; max-width: none;
    top: calc(54svh + 20px); bottom: auto;
    height: 132px;
  }
  .pcar-cap h2 { font-size: clamp(24px, 7.4vw, 32px); margin-bottom: 8px; }
  .pcar-cap p { font-size: 14px; line-height: 1.45; }

  .pcar-actions {
    left: 22px; right: 22px;
    top: calc(54svh + 162px); bottom: auto;
    gap: 10px;
    flex-wrap: nowrap;              /* иначе две кнопки переносятся и налезают на точки */
  }
  .pcar-actions .btn {
    flex: 1 1 0; min-width: 0;
    padding-left: 12px; padding-right: 12px;
    justify-content: center; text-align: center; white-space: nowrap;
  }
  .pcar-dots { top: calc(54svh + 228px); bottom: auto; }
}

/* Стартовый кроп фотографии должен совпадать с тем, что рисует канвас
   (panAt(0) = 50% на широких экранах) — иначе на первом кадре видно рывок,
   пока JS не выставит inline-стиль. */
@media (min-width: 861px) {
  .stage-pin .hero-photo { object-position: 50% center; }
}

/* ============================================
   ДО / ПОСЛЕ — сравнение перетаскиванием
   ============================================ */
.ba {
  padding: var(--sec-lg) 0;
  background: var(--bg-soft);
  position: relative;
}
.ba .section-head { margin-bottom: 46px; }
.ba-lead {
  max-width: 700px;
  margin: 20px auto 0;
  font-size: 18.5px; line-height: 1.62;
  color: var(--ink-soft);
}

.ba-stage { max-width: 1180px; margin: 0 auto; }
.ba-frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 1532 / 1026;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-height: 82svh;
  cursor: ew-resize;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;             /* вертикальный скролл страницы не отбираем */
  background: #efeae2;
}
.ba-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
}
/* Снизу лежит «после», сверху — «до», и подрезается СПРАВА по линии: слева от
   ползунка остаётся проблемная кожа, справа открывается результат — ровно так,
   как подписаны углы. Обе картинки всегда в полный размер кадра, поэтому лица
   не съезжают друг относительно друга при перетаскивании. */
.ba-front {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

.ba-line {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos);
  width: 2px; margin-left: -1px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 12px rgba(0,0,0,0.18);
  pointer-events: none;
}
.ba-handle {
  position: absolute; top: 50%; left: var(--pos);
  transform: translate(-50%, -50%);
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  cursor: grab;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ba-handle:active { cursor: grabbing; }
.ba-frame:hover .ba-handle { transform: translate(-50%, -50%) scale(1.06); }
.ba-handle svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.9; }
/* пульсация зовёт взяться за ползунок и гаснет после первого касания */
.ba-handle::after {
  content: '';
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(42,74,58,0.35);
  animation: baPulse 2.4s var(--ease) infinite;
}
.ba-frame.touched .ba-handle::after { animation: none; opacity: 0; }
@keyframes baPulse {
  0%   { transform: scale(0.92); opacity: 0.75; }
  70%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}

.ba-tag {
  position: absolute; top: 20px;
  padding: 8px 16px;
  border-radius: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(17,17,17,0.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.ba-tag.left { left: 20px; }
.ba-tag.right { right: 20px; background: rgba(42,74,58,0.72); }

.ba-hint {
  position: absolute; left: 50%; bottom: 22px;
  transform: translateX(-50%);
  padding: 9px 18px;
  border-radius: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.ba-frame.touched .ba-hint { opacity: 0; transform: translate(-50%, 10px); }

/* Три цифры под сравнением — не карточки, а строка спецификации, как в
   лабораторном паспорте: тонкие вертикальные линейки вместо рамок, крупная
   цифра антиквой, всё по центру колонки. */
.ba-specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1120px;
  margin: 72px auto 0;
}
.ba-spec {
  position: relative;
  padding: 6px 38px 4px;
  text-align: center;
}
.ba-spec + .ba-spec::before {
  content: '';
  position: absolute; left: 0; top: 12%; bottom: 12%;
  width: 1px;
  background: var(--line);
}
.ba-spec-idx {
  display: block;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--accent-2);
  margin-bottom: 18px;
}
/* золотой штрих над цифрой — раскрывается, когда блок появляется в кадре */
.ba-spec-num::before {
  content: '';
  position: absolute; left: 50%; top: -14px;
  width: 40px; height: 1px;
  background: var(--accent-2);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 0.7s var(--ease) 0.12s, width 0.4s var(--ease);
}
.ba-spec.in .ba-spec-num::before { transform: translateX(-50%) scaleX(1); }
.ba-spec-num {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(44px, 5.2vw, 66px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 24px 0 14px;
  position: relative;              /* якорь для золотого штриха над цифрой */
  transition: transform 0.35s var(--ease);
}
.ba-spec-num i {
  font-style: normal;
  font-family: 'Jost', sans-serif;
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: 2px;
  vertical-align: 0.62em;
}
.ba-spec:hover .ba-spec-num { transform: translateY(-3px); }
.ba-spec:hover .ba-spec-num::before { width: 62px; }
.ba-spec h3 {
  /* глобальное правило для h3 — антиква; здесь она конфликтует с крупной
     цифрой той же гарнитурой, поэтому подпись возвращаем в гротеск */
  font-family: 'Jost', -apple-system, sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 12px;
}
.ba-spec p {
  font-size: 15.5px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 30ch;
  min-height: 2.2em;              /* три колонки заканчиваются на одной линии */
  margin: 0 auto;
  text-wrap: balance;             /* строки делятся поровну, без слова-сироты */
}
/* лесенка появления: колонки выезжают одна за другой */
.ba-spec:nth-child(2) { transition-delay: 0.1s; }
.ba-spec:nth-child(3) { transition-delay: 0.2s; }

.ba-cta {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin-top: 44px;
}
.ba-note {
  max-width: 700px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-soft); opacity: 0.75;
  text-wrap: balance;
}

@media (max-width: 860px) {
  .ba { padding: var(--sec-sm) 0; }
  .ba-lead { font-size: 16.5px; }
  .ba-specs { grid-template-columns: 1fr; max-width: 380px; margin-top: 40px; }
  .ba-spec { padding: 22px 10px; }
  .ba-spec + .ba-spec::before {
    left: 18%; right: 18%; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .ba-spec-idx { margin-bottom: 10px; }
  .ba-spec-num { margin: 20px 0 12px; font-size: clamp(40px, 13vw, 52px); }
  .ba-handle { width: 50px; height: 50px; }
  .ba-handle svg { width: 22px; height: 22px; }
  .ba-tag { top: 14px; padding: 6px 12px; font-size: 11px; }
  .ba-tag.left { left: 14px; } .ba-tag.right { right: 14px; }
  .ba-hint { bottom: 14px; font-size: 11px; }
  .ba-cta .btn { width: 100%; justify-content: center; }
}

/* ============================================
   КЛУБ JAIN — уровни, карты, золотая панель
   ============================================ */

/* ---- золотая панель внизу экрана ---- */
.goldbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 95;                       /* под шторкой меню (110) и панелью корзины (120) */
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 8px 20px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(100deg, #a97c34 0%, #d9b874 26%, #f0dcae 46%, #c9a26b 68%, #a97c34 100%);
  background-size: 220% 100%;
  color: #1e1608;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 -8px 26px rgba(0,0,0,0.12);
  animation: goldShine 9s linear infinite;
}
@keyframes goldShine {
  from { background-position: 0% 50%; }
  to   { background-position: 220% 50%; }
}
.goldbar u {
  text-decoration: none;
  border-bottom: 1.5px solid rgba(30,22,8,0.5);
  padding-bottom: 2px;
  transition: border-color 0.25s;
}
.goldbar:hover u { border-bottom-color: rgba(30,22,8,0.95); }
.goldbar-arrow { transition: transform 0.3s var(--ease); }
.goldbar:hover .goldbar-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .goldbar { animation: none; } }
/* панель не должна перекрывать подвал и кружок чата */
/* Отступ нужен только там, где снизу висит золотая панель. Без условия под
   подвалом страницы «Клуб Jain» оставалась белая полоса — панели там нет. */
body:has(.goldbar) { padding-bottom: 37px; }
.ai-fab { bottom: 62px; }
.ai-panel { bottom: 138px; }
@media (max-width: 640px) {
  /* на узком экране длинная часть переносилась на вторую строку и панель
     раздувалась вдвое — оставляем только саму ссылку */
  .goldbar { font-size: 12.5px; padding: 8px 14px calc(8px + env(safe-area-inset-bottom)); }
  .goldbar > span:first-child { display: none; }
  body:has(.goldbar) { padding-bottom: 34px; }
}

/* ---- шапка страницы клуба ---- */
.vip-hero {
  padding: 190px 0 90px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(201,162,107,0.20) 0%, rgba(201,162,107,0) 58%),
    var(--bg);
}
.vip-hero h1 {
  font-size: clamp(42px, 6.2vw, 78px);
  line-height: 1.02; letter-spacing: -0.035em;
  margin: 14px 0 22px;
}
.vip-hero h1 em {
  font-style: italic;
  color: var(--accent-2);
}
.vip-lead {
  max-width: 640px; margin: 0 auto;
  font-size: 18px; line-height: 1.62;
  color: var(--ink-soft);
  text-wrap: balance;
}
.vip-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 900px; margin: 54px auto 0;
}
.vip-kpi { padding: 4px 20px; }
.vip-kpi + .vip-kpi { border-left: 1px solid var(--line); }
.vip-kpi b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 6px;
}
.vip-kpi span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ---- карусель уровней ---- */
.vip-levels { padding: var(--sec) 0; background: var(--bg-soft); }
.vipcar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 4vw, 48px);
  margin-top: 10px;
}
.vipcar-deck {
  position: relative;
  width: min(460px, 74vw);
  aspect-ratio: 1.586;               /* пропорция банковской карты ID-1 */
  perspective: 1700px;
}
.vipcard {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(var(--from, 60px)) scale(0.88);
  transition: opacity 0.55s var(--ease), transform 0.65s var(--ease);
}
.vipcard.active { opacity: 1; pointer-events: auto; transform: none; }
.vipcard.leaving { --from: -60px; }

.vipcard-inner {
  position: absolute; inset: 0;
  border-radius: 0;
  overflow: hidden;
  transform: rotateX(9deg) rotateY(-16deg) rotateZ(-4deg);
  transform-style: preserve-3d;
  animation: vipFloat 7.5s ease-in-out infinite;
  box-shadow:
    0 2px 0 rgba(255,255,255,0.5) inset,
    -18px 26px 44px rgba(24,20,12,0.28),
    -40px 60px 90px rgba(24,20,12,0.18);
}
@keyframes vipFloat {
  0%, 100% { transform: rotateX(9deg) rotateY(-16deg) rotateZ(-4deg) translateY(0); }
  50%      { transform: rotateX(7deg) rotateY(-13deg) rotateZ(-3deg) translateY(-12px); }
}
@media (prefers-reduced-motion: reduce) { .vipcard-inner { animation: none; } }
/* блик по пластику */
.vipcard-inner::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,0) 34%, rgba(255,255,255,0.42) 47%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

.vipcard[data-level="silver"] .vipcard-inner {
  background: linear-gradient(140deg, #cfd2d8 0%, #f4f5f7 28%, #d6d9df 52%, #aeb2ba 78%, #e7e9ec 100%);
}
.vipcard[data-level="gold"] .vipcard-inner {
  background: linear-gradient(140deg, #b8873a 0%, #f0dcae 26%, #d4a95f 52%, #a97c34 78%, #e8cf99 100%);
}
.vipcard[data-level="platinum"] .vipcard-inner {
  background: linear-gradient(140deg, #9fb0c0 0%, #eef2f6 26%, #c3cedb 52%, #8b9aa9 78%, #dde4ec 100%);
}
.vipcard[data-level="black"] .vipcard-inner {
  background: linear-gradient(140deg, #17181a 0%, #3c3f45 30%, #1d1e21 55%, #0b0b0c 80%, #2a2c31 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    -18px 26px 44px rgba(0,0,0,0.4),
    -40px 60px 90px rgba(0,0,0,0.26);
}

.vipcard-chip {
  position: absolute; top: 15%; left: 9%;
  width: 13%; aspect-ratio: 4 / 3;
  border-radius: 0;
  background: linear-gradient(135deg, #e3c179 0%, #b6893c 45%, #f2dda9 70%, #a97c34 100%);
  box-shadow: 0 1px 2px rgba(0,0,0,0.28);
}
.vipcard-chip::before, .vipcard-chip::after {
  content: '';
  position: absolute; left: 12%; right: 12%;
  height: 1px; background: rgba(0,0,0,0.22);
}
.vipcard-chip::before { top: 36%; }
.vipcard-chip::after { top: 64%; }

.vipcard-logo {
  position: absolute; top: 13%; right: 8%;
  height: 15%; width: auto;
  opacity: 0.92;
}
/* VIP, уровень и подпись — одним блоком у нижнего края, чтобы строки
   не разъезжались при смене размера карты */
.vipcard-foot {
  position: absolute; left: 9%; right: 9%; bottom: 11%;
}
.vipcard-vip {
  display: block;
  font-size: clamp(12px, 2.4vw, 17px);
  font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  /* золото на всех картах, кроме золотой — там оно бы слилось с фоном */
  color: #a97c34;
  margin-bottom: 4px;
}
.vipcard-tier {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 6.4vw, 42px);
  line-height: 1.05;
  font-weight: 600; letter-spacing: -0.01em;
  color: #14161a;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.vipcard-brand {
  display: block;
  margin-top: 5px;
  font-size: clamp(8px, 1.5vw, 10px);
  font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(20,22,26,0.62);
}
.vipcard[data-level="black"] .vipcard-tier { color: #f2ede4; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }
.vipcard[data-level="black"] .vipcard-vip { color: #d8b273; }
.vipcard[data-level="black"] .vipcard-brand { color: rgba(242,237,228,0.55); }
.vipcard[data-level="gold"] .vipcard-vip { color: rgba(48,32,6,0.72); }

.vipcar-arrow {
  flex: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 26px; line-height: 1; color: var(--ink);
  cursor: pointer;
  transition: background 0.25s, transform 0.25s var(--ease), border-color 0.25s;
}
.vipcar-arrow:hover { background: #fff; transform: translateY(-2px); border-color: rgba(42,74,58,0.3); }
.vipcar-arrow:active { transform: scale(0.94); }

.vipcar-dots { display: flex; gap: 9px; justify-content: center; margin-top: 34px; }
.vip-dot {
  width: 8px; height: 8px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0,0,0,0.18);
  cursor: pointer;
  transition: all 0.3s var(--ease);
}
.vip-dot.active { background: var(--accent-2); width: 26px; border-radius: 0; }

/* ---- описание уровня ---- */
/* Все четыре описания лежат в одной ячейке грида, а не показываются по
   очереди через display. Иначе высота секции скакала вслед за длиной текста,
   а вместе с ней пересчитывался cover у фонового мрамора — фон дёргался при
   каждом нажатии стрелки. Теперь блок всегда высотой с самое длинное описание. */
.vipinfo { position: relative; max-width: 880px; margin: 52px auto 0; display: grid; }
.vipinfo-pane {
  grid-area: 1 / 1;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
  pointer-events: none;
}
.vipinfo-pane.active {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.vipinfo-pane h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 500; letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.vipinfo-lead {
  max-width: 560px; margin: 0 auto 34px;
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  text-wrap: balance;
}
.vipinfo-specs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.vipinfo-specs > div { padding: 0 14px; }
.vipinfo-specs > div + div { border-left: 1px solid var(--line); }
.vipinfo-specs span {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 8px;
}
.vipinfo-specs b {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -0.01em; color: var(--ink);
}
.vipinfo-perks {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px 34px;
  margin: 28px auto 0;
  max-width: 720px;
  text-align: left;
}
.vipinfo-perks li {
  position: relative;
  padding-left: 26px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.vipinfo-perks li::before {
  content: '✦';
  position: absolute; left: 0; top: 0;
  color: var(--accent-2); font-size: 12px;
}

/* ---- как это работает ---- */
.vip-how { padding: var(--sec) 0; }
.vip-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 1120px; margin: 0 auto;
}
.vip-step { padding: 6px 30px; }
.vip-step + .vip-step { border-left: 1px solid var(--line); }
.vip-step-n {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--accent-2); margin-bottom: 16px;
}
.vip-step h3 {
  font-family: 'Jost', -apple-system, sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.vip-step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

.vip-bday {
  display: flex; align-items: center; justify-content: space-between;
  gap: 34px; flex-wrap: wrap;
  max-width: 1120px; margin: 76px auto 0;
  padding: 40px 46px;
  border-radius: 0;
  background: linear-gradient(120deg, rgba(201,162,107,0.16), rgba(201,162,107,0.05));
  border: 1px solid rgba(201,162,107,0.3);
}
.vip-bday h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 500;
  letter-spacing: -0.02em; margin: 8px 0 10px;
}
.vip-bday p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); max-width: 560px; }
.vip-bday .btn { flex: none; }

/* ---- финальный призыв ---- */
.vip-cta { padding: var(--sec) 0; text-align: center; background: var(--bg-soft); }
.vip-cta h2 {
  font-size: clamp(32px, 4.6vw, 56px); letter-spacing: -0.03em; margin-bottom: 14px;
}
.vip-cta p { font-size: 17px; color: var(--ink-soft); margin-bottom: 30px; }
.vip-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .vip-hero { padding: 132px 0 62px; }
  .vip-lead { font-size: 16px; }
  .vip-kpis { grid-template-columns: repeat(2, 1fr); gap: 24px 0; max-width: 420px; margin-top: 40px; }
  .vip-kpi:nth-child(odd) { border-left: 0; }
  .vip-kpi:nth-child(3), .vip-kpi:nth-child(4) { padding-top: 22px; border-top: 1px solid var(--line); }
  .vip-levels { padding: var(--sec-sm) 0; }
  .vipcar { gap: 8px; }
  .vipcar-arrow { width: 44px; height: 44px; font-size: 22px; }
  .vipinfo-specs { grid-template-columns: repeat(2, 1fr); gap: 20px 0; padding: 20px 0; }
  .vipinfo-specs > div:nth-child(odd) { border-left: 0; }
  .vipinfo-perks { grid-template-columns: 1fr; gap: 10px; }
  .vip-how { padding: 78px 0; }
  .vip-steps { grid-template-columns: 1fr; max-width: 420px; }
  .vip-step { padding: 22px 0; }
  .vip-step + .vip-step { border-left: 0; border-top: 1px solid var(--line); }
  .vip-bday { padding: 28px 24px; margin-top: 46px; }
  .vip-bday .btn { width: 100%; justify-content: center; }
  .vip-cta { padding: var(--sec-sm) 0; }
  .vip-cta-btns .btn { width: 100%; justify-content: center; }
}

/* ============================================
   СЕКЦИЯ УРОВНЕЙ НА ТЁМНОМ МРАМОРЕ
   ============================================ */
.vip-levels {
  position: relative;
  isolation: isolate;
  background: #16241c url(images/vip-marble.webp?v=2) center / cover no-repeat;
  overflow: hidden;
}
/* лёгкое затемнение сверху и снизу: середина мрамора остаётся чистой под
   картой, а заголовок и характеристики получают ровный контраст */
.vip-levels::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(10,18,13,0.58) 0%, rgba(10,18,13,0.18) 34%,
                            rgba(10,18,13,0.24) 62%, rgba(10,18,13,0.72) 100%),
    radial-gradient(120% 80% at 50% 42%, rgba(255,255,255,0.05), rgba(0,0,0,0) 60%);
}
@media (max-width: 900px) {
  .vip-levels { background-image: url(images/vip-marble-m.webp?v=2); }
}

/* текст секции переводим в светлый */
.vip-levels .section-head h2 { color: #f4f1ea; }
.vip-levels .eyebrow { color: var(--accent-2); }
.vipinfo-pane h3 { color: #f6f3ec; }
.vipinfo-lead { color: rgba(238,234,225,0.72); }
.vipinfo-specs { border-top-color: rgba(255,255,255,0.16); border-bottom-color: rgba(255,255,255,0.16); }
.vipinfo-specs > div + div { border-left-color: rgba(255,255,255,0.16); }
.vipinfo-specs b { color: #f6f3ec; }
.vipinfo-perks li { color: rgba(238,234,225,0.76); }

/* стрелки и точки — стеклянные на тёмном */
.vipcar-arrow {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.24);
  color: #f4f1ea;
}
.vipcar-arrow:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(201,162,107,0.6);
  color: #fff;
}
.vip-dot { background: rgba(255,255,255,0.26); }
.vip-dot.active { background: var(--accent-2); }

/* карты на тёмном требуют более глубокой тени, иначе висят в воздухе */
.vipcard-inner {
  box-shadow:
    0 2px 0 rgba(255,255,255,0.45) inset,
    -20px 30px 54px rgba(0,0,0,0.5),
    -46px 70px 110px rgba(0,0,0,0.34);
}
.vipcard[data-level="black"] .vipcard-inner {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.16) inset,
    -20px 30px 54px rgba(0,0,0,0.6),
    -46px 70px 110px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.07);
}

/* ============================================
   БРЕНД — ЧЕМ ПОДТВЕРЖДЕНО
   ============================================ */
.bfacts { padding: var(--sec) 0; background: var(--bg-soft); }
.bfacts .section-head { margin-bottom: 56px; }
.bfacts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1120px;
  margin: 0 auto;
}
.bfact { position: relative; padding: 4px 30px; }
.bfact + .bfact::before {
  content: '';
  position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: var(--line);
}
.bfact-idx {
  display: block;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
  color: var(--accent-2);
  margin-bottom: 16px;
}
.bfact-key {
  display: block;
  position: relative;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: clamp(24px, 2.5vw, 32px);
  line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
  margin: 22px 0 14px;
  transition: transform 0.35s var(--ease);
}
.bfact-key::before {
  content: '';
  position: absolute; left: 0; top: -13px;
  width: 38px; height: 1px;
  background: var(--accent-2);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease) 0.1s, width 0.4s var(--ease);
}
.bfact.in .bfact-key::before { transform: scaleX(1); }
.bfact:hover .bfact-key { transform: translateY(-3px); }
.bfact:hover .bfact-key::before { width: 58px; }
.bfact h3 {
  font-family: 'Jost', -apple-system, sans-serif;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.bfact p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); text-wrap: balance; }
.bfact:nth-child(2) { transition-delay: 0.08s; }
.bfact:nth-child(3) { transition-delay: 0.16s; }
.bfact:nth-child(4) { transition-delay: 0.24s; }

.bfacts-line {
  max-width: 720px;
  margin: 58px auto 0;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  text-wrap: balance;
}

@media (max-width: 900px) {
  .bfacts { padding: 78px 0; }
  .bfacts .section-head { margin-bottom: 38px; }
  .bfacts-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; max-width: 560px; }
  .bfact { padding: 4px 20px; }
  .bfact:nth-child(odd)::before { display: none; }
  .bfact:nth-child(3), .bfact:nth-child(4) { padding-top: 30px; }
  .bfact:nth-child(3)::after, .bfact:nth-child(4)::after {
    content: ''; position: absolute; left: 20px; right: 20px; top: 0;
    height: 1px; background: var(--line);
  }
  .bfacts-line { margin-top: 40px; font-size: 14px; }
}
@media (max-width: 520px) {
  .bfacts-grid { grid-template-columns: 1fr; gap: 0; max-width: 360px; }
  .bfact { padding: 24px 0; }
  .bfact + .bfact::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .bfact:nth-child(3), .bfact:nth-child(4) { padding-top: 24px; }
  .bfact:nth-child(3)::after, .bfact:nth-child(4)::after { display: none; }
}

/* ============================================
   ЛИНЕЙКА — фактуры на плитках
   ============================================
   Углы прямые, вуаль вертикальная: плотная чёрная сверху, где лежит текст, и
   плавно сходящая на нет к низу, где фактура остаётся открытой. Плотность у
   каждой плитки своя — она посчитана по яркости конкретного кадра в зоне
   заголовка под контраст 4.5:1 со светлым текстом. */
.products-grid .product-card {
  border-radius: 0;
  --scrim: 0.85;          /* одинаковый чёрный верх на всех плитках */
  background-color: #0d1512;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease),
              background-size 0.9s var(--ease);
}
.products-grid .product-card::before {
  content: '';
  position: absolute; inset: 0;
  z-index: 0;
  /* Чернота держится ровно до конца текста (замер: он кончается на 44%
     высоты, у широкой плитки на 56%) и к 80% полностью сходит на нет.
     Нижняя треть кадра остаётся открытой. */
  background: linear-gradient(180deg,
    rgba(6,10,8, var(--scrim)) 0%,
    rgba(6,10,8, var(--scrim)) 36%,
    rgba(6,10,8, calc(var(--scrim) * 0.86)) 44%,
    rgba(6,10,8, calc(var(--scrim) * 0.62)) 52%,
    rgba(6,10,8, calc(var(--scrim) * 0.38)) 60%,
    rgba(6,10,8, calc(var(--scrim) * 0.18)) 68%,
    rgba(6,10,8, calc(var(--scrim) * 0.06)) 76%,
    rgba(6,10,8, 0) 84%);
}
.card-tone-5::before {
  background: linear-gradient(180deg,
    rgba(6,10,8, var(--scrim)) 0%,
    rgba(6,10,8, var(--scrim)) 46%,
    rgba(6,10,8, calc(var(--scrim) * 0.86)) 55%,
    rgba(6,10,8, calc(var(--scrim) * 0.62)) 64%,
    rgba(6,10,8, calc(var(--scrim) * 0.38)) 72%,
    rgba(6,10,8, calc(var(--scrim) * 0.18)) 80%,
    rgba(6,10,8, calc(var(--scrim) * 0.06)) 88%,
    rgba(6,10,8, 0) 96%);
}
.card-tone-1 { background-image: url(images/tile-acne.webp?v=2); }
.card-tone-2 { background-image: url(images/tile-aging.webp?v=2); }
.card-tone-3 { background-image: url(images/tile-sensitive.webp?v=2); }
.card-tone-4 { background-image: url(images/tile-pigment.webp?v=2); }
.card-tone-5 { background-image: url(images/tile-spf.webp?v=2); }

/* текст на всех пяти светлый — верх у всех тёмный */
.products-grid .product-cat { color: var(--accent-2); opacity: 1; }
.products-grid .product-card h3 { color: #f6f2ea; }
.products-grid .product-card p { color: rgba(240,236,228,0.85); opacity: 1; }
.products-grid .card-arrow {
  color: #f6f2ea;
  border-color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.07);
}
.products-grid .product-card:hover .card-arrow {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.75);
}
/* декоративный круг спорил с фотографией */
.products-grid .product-card-img { display: none; }

.products-grid .product-card:hover { background-size: 108%; }
@media (prefers-reduced-motion: reduce) {
  .products-grid .product-card:hover { background-size: cover; }
}

/* ---- робот-маскот рядом с подсказкой ----
   Лежит ВНУТРИ .ai-bubble, поэтому наследует её transform: когда облачко
   выезжает и увеличивается с 0.94 до 1, робот растёт вместе с ним. Свой
   scale добавлен сверху с небольшой задержкой — он подрастает чуть заметнее
   и на долю секунды позже текста. */
.ai-bubble-bot {
  position: absolute;
  left: -82px; bottom: -12px;
  width: 78px; height: auto;
  pointer-events: none;
  transform-origin: center center;   /* иначе scale уводит центр вниз */
  filter: drop-shadow(0 10px 20px rgba(42,74,58,0.26));
}

/* круглая ава: у картинки своя зелёная подложка, лишний белый фон убираем */
.ai-fab {
  background: #fff;
  box-shadow: 0 14px 34px rgba(42,74,58,0.32);
  overflow: hidden;              /* страховка: за круг ничего не вылезает */
}
/* height:100% здесь не срабатывал — картинка тянулась по своей пропорции
   (56×69 при кнопке 56×56) и робот свешивал ноги наружу. Квадрат задаём
   через aspect-ratio, он от пропорций картинки не зависит. */
.ai-fab img {
  box-sizing: border-box;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 6px 6px 4px;
  border-radius: 50%;
}
.ai-head .ai-ava { overflow: hidden; }
.ai-head .ai-ava img {
  box-sizing: border-box;
  width: 100%; height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 3px 3px 2px;
}

@media (max-width: 640px) {
  /* Слева от облачка места нет, а над ним робот закрывал контент страницы.
     Ставим его ВНУТРЬ, в пустое поле справа от текста, и освобождаем место
     отступом. Само облачко при этом расширяем до левого края экрана. */
  .ai-bubble {
    left: 12px; right: 82px; width: auto;
    padding-right: 106px;
  }
  .ai-bubble-bot {
    left: auto; top: auto;
    right: 34px; bottom: 8px;   /* правее нельзя — перекроет крестик */
    width: 68px;
    transform-origin: center center;
    filter: drop-shadow(0 6px 12px rgba(42,74,58,0.22));
  }
}

/* Кружок остаётся на месте всегда — уходит только сам робот: он «выходит»
   из аватара в подсказку и потом садится обратно. Пока он снаружи, кнопка
   стоит пустой. */
html.ai-hint .ai-fab img { opacity: 0; }
.ai-fab img { transition: opacity 0.25s var(--ease); }

/* Возврат: облачко растворяется первым, робот на его фоне летит в кружок. */
html.ai-return .ai-bubble {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
html.ai-return .ai-bubble::after { opacity: 0; transition: opacity 0.2s; }
html.ai-return .ai-bubble > :not(.ai-bubble-bot) {
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

/* Подсказка, вызванная наведением, закрывается сама при отводе курсора —
   крестик там лишний. Он остаётся только для первого, автоматического показа. */
html.ai-hover .ai-bubble-x { display: none; }

/* На широком экране лента фильтров переносится: горизонтальная прокрутка
   мышью неудобна. На узком остаётся одной строкой со свайпом — там привычно.
   Правило в конце файла: базовое .type-grid идёт ниже блока .type-row и
   иначе перебивало бы его своим nowrap. */
@media (min-width: 900px) {
  .type-row .type-grid { flex-wrap: wrap; overflow-x: visible; }
}

/* ============================================
   ФОТОБЛОКИ: ДИАГНОСТИКА · НАУКА · КОНТАКТЫ
   ============================================ */

/* ---- фон в шапке страницы ---- */
.page-hero-img {
  position: relative;
  border-bottom: 0;
  background: var(--hero-img) center / cover no-repeat, var(--bg-soft);
  padding: 190px 0 90px;
  isolation: isolate;
}
/* вуаль держит плотность там, где лежит текст, и сходит на нет к правому краю */
.page-hero-img::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(251,250,247,0.96) 0%,
    rgba(251,250,247,0.92) 38%,
    rgba(251,250,247,0.62) 62%,
    rgba(251,250,247,0.28) 100%);
}
/* низ фотографии растворяется в фоне — иначе она обрывается ровным швом */
.page-hero-img::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; z-index: -1;
  height: 150px;
  background: linear-gradient(180deg, transparent 0%, var(--bg) 92%);
}

/* ---- полоса-переход под шапкой ---- */
.herobar {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.herobar .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.herobar span {
  display: flex; flex-direction: column; gap: 5px;
  padding: 30px 34px 32px;
  font-size: 13px; color: var(--ink-soft); line-height: 1.45;
}
.herobar span + span { border-left: 1px solid var(--line); }
.herobar b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; font-weight: 500; color: var(--accent);
}
@media (max-width: 760px) {
  .herobar .container { grid-template-columns: 1fr; }
  .herobar span { padding: 20px 24px; }
  .herobar span + span { border-left: 0; border-top: 1px solid var(--line); }
  .herobar b { font-size: 18px; }
}

/* ---- диагностика: фото вместо нарисованных колец ----
   Тень убрана: фотография больше не «карточка на фоне», а половина блока,
   упирающаяся в край экрана — тень тут читалась бы как грязь на стыке. */
.diag-visual img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* ---- три шага ---- */
.steps { padding: var(--sec) 0; }
.steps-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
}
.step { display: flex; flex-direction: column; }
.step-pic {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-soft);
  margin-bottom: 20px;
}
.step-pic img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.step:hover .step-pic img { transform: scale(1.05); }
.step-n {
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 10px;
}
.step h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 500;
  letter-spacing: -0.02em; margin-bottom: 10px;
}
.step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* ---- рутина утро / вечер / сроки ---- */
.routine { padding: 0 0 130px; }
.routine-lead {
  max-width: 560px; margin: 16px auto 0;
  font-size: 16px; line-height: 1.6; color: var(--ink-soft);
  text-wrap: balance;
}
.routine-grid {
  display: grid; gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1080px; margin: 44px auto 0;
}
.routine-col {
  padding: 32px 30px 34px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.routine-time { background: var(--accent); border-color: var(--accent); }
.routine-when {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 22px;
}
.routine-steps, .routine-terms { list-style: none; counter-reset: rt; }
.routine-steps li, .routine-terms li {
  position: relative;
  padding: 0 0 16px 34px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.routine-steps li:last-child, .routine-terms li:last-child {
  border-bottom: 0; margin-bottom: 0; padding-bottom: 0;
}
.routine-steps li::before {
  counter-increment: rt; content: counter(rt);
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
}
.routine-terms li { padding-left: 0; }
.routine-col b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); }
.routine-col span { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.routine-time .routine-col b { color: #fff; }
.routine-time b { color: #f6f3ec; font-family: 'Cormorant Garamond', serif; font-size: 22px; font-weight: 500; }
.routine-time span { color: rgba(240,236,228,0.7); }
.routine-time li { border-bottom-color: rgba(255,255,255,0.14); }
.routine-note {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 12.5px; line-height: 1.55; color: rgba(240,236,228,0.62);
}

/* ---- наука: фото в карточках ---- */
.science-pic {
  aspect-ratio: 1;
  margin: -48px -36px 24px;
  overflow: hidden;
  background: var(--bg-soft);
}
.science-pic img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.7s var(--ease);
}
.science-card { overflow: hidden; }
.science-card:hover .science-pic img { transform: scale(1.06); }

/* ---- горная вода: фото на пол-экрана ---- */
.water {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: var(--accent);
  color: #f4f1ea;
}
.water-media { position: relative; min-height: 460px; }
.water-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.water-body { display: grid; place-items: center; padding: 90px 60px; }
.water-inner { max-width: 460px; }
.water-body .eyebrow { color: var(--accent-2); }
.water-body h2 {
  font-size: clamp(28px, 3.4vw, 42px);
  letter-spacing: -0.03em; color: #f6f3ec;
  margin: 12px 0 18px;
}
.water-body p { font-size: 16px; line-height: 1.65; color: rgba(240,236,228,0.78); }
.water-facts {
  display: grid; gap: 20px;
  margin-top: 32px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.water-facts b { display: block; font-size: 14px; font-weight: 600; color: #f6f3ec; }
.water-facts span { display: block; margin-top: 3px; font-size: 13px; color: rgba(240,236,228,0.6); }

/* ---- сертификаты ---- */
.certs { padding: var(--sec) 0; background: var(--bg-soft); }
.certs-grid {
  display: grid; gap: 0;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1080px; margin: 0 auto;
}
.cert { position: relative; padding: 6px 28px; text-align: center; }
.cert + .cert::before {
  content: '';
  position: absolute; left: 0; top: 6%; bottom: 6%;
  width: 1px; background: var(--line);
}
.cert b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(22px, 2.4vw, 30px); font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 10px;
}
.cert span { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: balance; }

/* ---- контакты: шоурум и гарантия ---- */
/* Оба блока идут от края до края экрана — контейнера вокруг них нет,
   поэтому фотография упирается в границу окна, как в блоке диагностики. */
.showroom { padding: 0; }
.promise { padding: 0; }
.showroom-card, .promise-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
}
.showroom-media, .promise-media { position: relative; min-height: 560px; }
.showroom-media img, .promise-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.showroom-body, .promise-body { padding: 90px clamp(32px, 5vw, 90px); align-self: center; }
.showroom-body h2, .promise-body h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  letter-spacing: -0.03em; margin: 10px 0 16px;
}
.showroom-body p, .promise-body p {
  font-size: 15.5px; line-height: 1.65; color: var(--ink-soft);
  max-width: 420px;
}
.showroom-info { margin: 28px 0 30px; }
.showroom-info > div {
  display: flex; gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.showroom-info > div:last-child { border-bottom: 0; }
.showroom-info dt {
  flex: none; width: 88px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 2px;
}
.showroom-info dd { font-size: 15px; font-weight: 500; color: var(--ink); }
.showroom-info a { color: var(--ink); }
.showroom-info a:hover { color: var(--accent); }
.promise-body .btn { margin-top: 26px; }

/* ---- ПЛАНШЕТ ---- */
@media (max-width: 1024px) {
  .page-hero-img { padding: 168px 0 70px; }
  .steps { padding: var(--sec-sm) 0; }
  .steps-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .step h3 { font-size: 20px; }
  .step p { font-size: 13.5px; }
  .routine-grid { grid-template-columns: repeat(2, 1fr); max-width: 700px; }
  .routine-time { grid-column: span 2; }
  .routine-time .routine-terms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .routine-time li { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .water { grid-template-columns: 1fr; }
  .water-media { min-height: 340px; }
  .water-body { padding: 62px 40px; }
  .water-inner { max-width: 620px; }
  .certs { padding: var(--sec-sm) 0; }
  .certs-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .cert:nth-child(odd)::before { display: none; }
  .showroom-media, .promise-media { min-height: 460px; }
  .showroom-body, .promise-body { padding: 70px clamp(24px, 5vw, 48px); }
  .showroom-body p, .promise-body p { max-width: none; }
}

/* ---- ТЕЛЕФОН ---- */
@media (max-width: 720px) {
  .page-hero-img { padding: 132px 0 54px; }
  .page-hero-img::before {
    background: linear-gradient(160deg,
      rgba(251,250,247,0.97) 0%,
      rgba(251,250,247,0.9) 52%,
      rgba(251,250,247,0.55) 100%);
  }
  .steps { padding: 68px 0; }
  .steps-grid { grid-template-columns: 1fr; gap: 34px; }
  .step-pic { aspect-ratio: 16 / 10; }
  .routine { padding-bottom: 78px; }
  .routine-grid { grid-template-columns: 1fr; gap: 14px; max-width: 420px; }
  .routine-time { grid-column: auto; }
  .routine-time .routine-terms { grid-template-columns: 1fr; gap: 0; }
  .routine-time li { border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 14px; margin-bottom: 14px; }
  .routine-time li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
  .routine-col { padding: 26px 22px 28px; }
  .science-pic { margin: -48px -36px 20px; }
  .water-media { min-height: 250px; }
  .water-body { padding: 48px 24px; }
  .certs { padding: 68px 0; }
  .certs-grid { grid-template-columns: 1fr; gap: 26px; max-width: 380px; }
  .cert { padding: 22px 0 0; }
  .cert::before { display: none; }
  .cert + .cert { border-top: 1px solid var(--line); }
  .showroom-card, .promise-card { grid-template-columns: 1fr; }
  .showroom-media, .promise-media { min-height: 0; aspect-ratio: 16 / 11; grid-row: 1; }
  .showroom-body, .promise-body { padding: 52px 24px 60px; }
  .showroom-info dt { width: 70px; font-size: 10px; }
  .showroom-info dd { font-size: 14px; }
}

/* ============================================================
   ТЕСТ ПО КОЖЕ (diagnostics.html)
   ============================================================ */
.quiz { padding: var(--sec) 0 var(--sec-sm); background: var(--bg); }
.quiz-lead {
  max-width: 620px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.quiz-card {
  max-width: 880px; margin: 56px auto 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 32px;
  box-shadow: 0 30px 80px rgba(42,74,58,.08);
  overflow: hidden;
}
.quiz-bar { height: 3px; background: var(--bg-soft); }
.quiz-bar i {
  display: block; height: 100%; width: 33.33%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .45s cubic-bezier(.16,1,.3,1);
}

/* шаги */
.quiz-step { display: none; border: 0; margin: 0; padding: 48px 48px 8px; }
.quiz-step.is-on { display: block; animation: quizIn .45s cubic-bezier(.16,1,.3,1); }
@keyframes quizIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.quiz-step legend {
  display: flex; align-items: baseline; gap: 16px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 34px);
  color: var(--accent);
  padding: 0; margin-bottom: 8px;
}
.quiz-num {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: .2em;
  color: var(--accent-2);
}
.quiz-hint { color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; }
.quiz-step legend + .quiz-opts { margin-top: 26px; }

.quiz-opts { display: flex; flex-wrap: wrap; gap: 12px; }
.quiz-opt {
  font: inherit; font-size: 15px;
  padding: 16px 26px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.quiz-opt:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(42,74,58,.10);
}
.quiz-opt.is-picked {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.quiz-go { margin-top: 32px; }

/* навигация */
.quiz-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px 0;
  border-top: 1px solid var(--line);
  margin: 24px 48px 0;
}
.quiz-back {
  font: inherit; font-size: 14px; background: none; border: 0;
  color: var(--ink-soft); cursor: pointer; padding: 6px 0;
}
.quiz-back:hover { color: var(--accent); }
.quiz-count { font-size: 13px; color: var(--ink-soft); letter-spacing: .08em; }
.quiz-count b { color: var(--accent); }

/* ---------- результат ---------- */
.quiz-result { padding: 48px; animation: quizIn .5s cubic-bezier(.16,1,.3,1); }
.qr-head {
  display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center;
  padding: 32px; border-radius: 0; background: var(--bg-soft);
}
.qr-gauge {
  width: 132px; height: 132px; flex: none;
  border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  /* --p приходит из JS: доля закрашенной дуги */
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), rgba(0,0,0,.07) 0);
  position: relative;
}
.qr-gauge::after {
  content: ''; position: absolute; inset: 10px;
  background: var(--bg-soft); border-radius: 50%;
}
.qr-gauge b, .qr-gauge span { position: relative; z-index: 1; }
.qr-gauge b {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: 42px; line-height: 1; color: var(--accent);
}
.qr-gauge span {
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.qr-mid .qr-gauge  { background: conic-gradient(#b8862f calc(var(--p) * 1%), rgba(0,0,0,.07) 0); }
.qr-high .qr-gauge { background: conic-gradient(#a4552f calc(var(--p) * 1%), rgba(0,0,0,.07) 0); }
.qr-badge {
  display: inline-block; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 10px;
}
.qr-headtext h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.4vw, 38px); color: var(--accent); margin-bottom: 10px;
}
.qr-headtext p { color: var(--ink-soft); line-height: 1.6; font-size: 15px; }

.qr-plan { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
.qr-col { border: 1px solid var(--line); border-radius: 0; padding: 28px; }
.qr-when {
  display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 20px;
}
.qr-chain { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.qr-chain li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; }
.qr-chain li + li { border-top: 1px solid var(--line); }
.qp-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-soft); color: var(--accent);
  display: grid; place-content: center; font-size: 11px; margin-top: 2px;
}
.qr-chain a { text-decoration: none; }
.qr-chain b { display: block; color: var(--ink); font-weight: 500; font-size: 15px; }
.qr-chain a:hover b { color: var(--accent-2); }
.qr-chain span { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.qr-term {
  margin-top: 24px; padding: 20px 24px;
  background: var(--bg-soft); border-radius: 0;
  font-size: 15px; line-height: 1.6; color: var(--ink-soft);
}
.qr-term b { color: var(--accent); }

.qr-risks { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.qr-risk {
  padding: 16px 22px; border-left: 2px solid var(--accent-2);
  background: rgba(201,162,107,.07);
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
  border-radius: 0;
}

.qr-warn { margin-top: 24px; display: grid; gap: 12px; }
.qr-w {
  padding: 20px 24px; border: 1px solid var(--line); border-radius: 0;
}
.qr-w b { display: block; color: var(--accent); margin-bottom: 6px; font-weight: 500; }
.qr-w span { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.qr-cta {
  margin-top: 32px; padding: 32px; text-align: center;
  background: var(--accent); color: #f4f1ea; border-radius: 0;
}
.qr-cta p { max-width: 480px; margin: 0 auto 24px; line-height: 1.6; opacity: .82; font-size: 15px; }
.qr-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.qr-cta .btn-primary { background: #fff; color: var(--accent); }
.qr-cta .btn-primary:hover { background: var(--accent-2); color: #fff; }
.qr-cta .btn-ghost {
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: #f4f1ea;
  cursor: pointer; font: inherit;
}
.qr-cta .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

@media (max-width: 1024px) {
  .quiz { padding: 100px 0 30px; }
  .quiz-step { padding: 40px 34px 8px; }
  .quiz-nav { margin: 20px 34px 0; padding: 18px 0 0; }
  .quiz-result { padding: 36px 34px; }
  .qr-gauge { width: 112px; height: 112px; }
  .qr-gauge b { font-size: 34px; }
}
@media (max-width: 720px) {
  .quiz-card { border-radius: 0; margin-top: 40px; }
  .quiz-step { padding: 32px 22px 8px; }
  .quiz-step legend { flex-direction: column; gap: 6px; }
  .quiz-opts { flex-direction: column; }
  .quiz-opt { width: 100%; text-align: left; }
  .quiz-nav { margin: 18px 22px 0; }
  .quiz-result { padding: 28px 22px; }
  .qr-head { grid-template-columns: 1fr; gap: 22px; text-align: center; padding: 26px 22px; }
  .qr-gauge { margin: 0 auto; }
  .qr-plan { grid-template-columns: 1fr; }
  .qr-cta { padding: 28px 22px; }
  .qr-cta-btns .btn { width: 100%; }
}

/* ============================================================
   ВИДЖЕТЫ: статус шоурума · калькулятор VIP
   ============================================================ */

/* --- «Сейчас открыто» на contact.html --- */
.openbox {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px; padding: 11px 18px;
  border-radius: 0;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 14px; color: var(--ink-soft);
}
.openbox b { color: var(--accent); font-weight: 500; }
.openbox-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--ink-soft);
}
.openbox.is-open .openbox-dot {
  background: #3f8f5f;
  box-shadow: 0 0 0 0 rgba(63,143,95,.55);
  animation: pulseDot 2.2s ease-out infinite;
}
.openbox.is-shut .openbox-dot { background: #b8862f; }
@keyframes pulseDot {
  70%  { box-shadow: 0 0 0 9px rgba(63,143,95,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,143,95,0); }
}
@media (prefers-reduced-motion: reduce) {
  .openbox.is-open .openbox-dot { animation: none; }
}

/* --- Калькулятор VIP --- */
.vipcalc { padding: var(--sec) 0; background: var(--bg-soft); }
.vipcalc-lead {
  max-width: 560px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.vipcalc-card {
  max-width: 820px; margin: 56px auto 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 46px;
  box-shadow: 0 30px 80px rgba(42,74,58,.08);
}
.vipcalc-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.vipcalc-label {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft);
}
.vipcalc-sum {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4.4vw, 46px); color: var(--accent);
}

/* ползунок */
.vipcalc-range {
  --fill: 20%;
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 0; margin: 0;
  background: linear-gradient(90deg, var(--accent) var(--fill), rgba(0,0,0,.09) var(--fill));
  cursor: pointer;
}
.vipcalc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 6px 18px rgba(42,74,58,.28);
  transition: transform .18s ease;
}
.vipcalc-range::-webkit-slider-thumb:hover { transform: scale(1.14); }
.vipcalc-range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent);
  box-shadow: 0 6px 18px rgba(42,74,58,.28);
}

/* подписи порогов под шкалой */
.vipcalc-ticks { position: relative; height: 26px; margin-top: 10px; }
.vipcalc-ticks span {
  position: absolute; left: var(--at); transform: translateX(-50%);
  font-size: 11px; color: var(--ink-soft); letter-spacing: .06em;
  white-space: nowrap;
}
.vipcalc-ticks span::before {
  content: ''; position: absolute; top: -8px; left: 50%;
  width: 1px; height: 5px; background: var(--line);
}

.vipcalc-out {
  margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line);
}
.vc-tier { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; }
.vc-tier-badge {
  padding: 9px 20px; border-radius: 0;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: #fff;
}
.vc-tier-badge.is-silver   { background: #8e9391; }
.vc-tier-badge.is-gold     { background: var(--accent-2); }
.vc-tier-badge.is-platinum { background: #5a6b63; }
.vc-tier-badge.is-black    { background: #1b1b1b; }
.vc-tier-badge.is-безкарты { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); }
.vc-tier-note { font-size: 14px; color: var(--ink-soft); }

.vipcalc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.vipcalc-nums > div {
  padding: 24px; border-radius: 0; background: var(--bg-soft); text-align: center;
}
.vipcalc-nums b {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3.2vw, 36px); color: var(--accent); line-height: 1.1;
  margin-bottom: 8px;
}
.vipcalc-nums span { font-size: 12px; color: var(--ink-soft); line-height: 1.45; }

.vipcalc-fine {
  margin-top: 22px; font-size: 13px; line-height: 1.6; color: var(--ink-soft);
}
.vipcalc-go { margin-top: 26px; }

@media (max-width: 1024px) {
  .vipcalc { padding: var(--sec) 0; }
  .vipcalc-card { padding: 38px 32px; }
}
@media (max-width: 720px) {
  .vipcalc-card { border-radius: 0; padding: 30px 22px; margin-top: 40px; }
  .vipcalc-nums { grid-template-columns: 1fr; gap: 12px; }
  .vipcalc-nums > div { padding: 20px; }
  .vipcalc-ticks span { font-size: 10px; }
  .vipcalc-go { width: 100%; }
}

/* ============================================================
   ВИДЖЕТЫ: задача в каталоге · порядок нанесения · география
   ============================================================ */

/* --- каталог: срез по задаче кожи --- */
.goal-row { margin-bottom: 18px; }
.goal-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.goal-card {
  position: relative;
  font: inherit; text-align: left; cursor: pointer;
  padding: 14px 44px 14px 20px;
  border: 1px solid var(--line); border-radius: 0;
  background: #fff;
  transition: all .25s cubic-bezier(.16,1,.3,1);
}
.goal-card b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.goal-card span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.goal-card i {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 11px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 0; background: var(--bg-soft); color: var(--ink-soft);
  display: grid; place-content: center;
}
.goal-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(42,74,58,.08);
}
.goal-card.active { background: var(--accent); border-color: var(--accent); }
.goal-card.active b { color: #fff; }
.goal-card.active span { color: rgba(255,255,255,.72); }
.goal-card.active i { background: rgba(255,255,255,.18); color: #fff; }

/* --- products: конструктор порядка нанесения --- */
.layers { padding: var(--sec) 0; background: var(--bg-soft); }
.layers-lead {
  max-width: 600px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.layers-card {
  max-width: 900px; margin: 52px auto 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; padding: 40px;
  box-shadow: 0 30px 80px rgba(42,74,58,.08);
}
.layers-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--bg-soft); border-radius: 0; margin-bottom: 28px;
}
.lay-tab {
  font: inherit; font-size: 14px; cursor: pointer;
  padding: 10px 26px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink-soft);
  transition: all .25s ease;
}
.lay-tab.is-on { background: var(--accent); color: #fff; }

.layers-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.lay-item {
  font: inherit; text-align: left; cursor: pointer;
  padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 0;
  background: var(--bg);
  transition: all .22s cubic-bezier(.16,1,.3,1);
}
.lay-item b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); }
.lay-item span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.lay-item:hover { border-color: var(--accent); transform: translateY(-2px); }
.lay-item.is-on { background: var(--accent); border-color: var(--accent); }
.lay-item.is-on b { color: #fff; }
.lay-item.is-on span { color: rgba(255,255,255,.7); }

.layers-out {
  margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--line);
}
.layers-out-label {
  display: block; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 18px;
}
.layers-chain { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.layers-chain li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 0; flex-wrap: wrap;
}
.layers-chain li + li { border-top: 1px solid var(--line); }
.lay-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-soft); color: var(--accent);
  display: grid; place-content: center; font-size: 11px;
}
.layers-chain b { font-weight: 500; color: var(--ink); }
.lay-sub { font-size: 13px; color: var(--ink-soft); }
.lay-empty { color: var(--ink-soft); font-size: 15px; padding: 6px 0; }
.layers-note {
  margin-top: 18px; padding: 16px 20px;
  border-left: 2px solid var(--accent-2);
  background: rgba(201,162,107,.07);
  border-radius: 0;
  font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.layers-note:empty { display: none; }

/* --- brand: география --- */
.geo { padding: var(--sec) 0; }
.geo-grid {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: 70px; align-items: center;
}
.geo-text h2 {
  font-size: clamp(34px, 4.4vw, 56px);
  color: var(--accent); margin-bottom: 22px;
}
.geo-text p {
  color: var(--ink-soft); font-size: 17px; line-height: 1.7;
  max-width: 460px; margin-bottom: 30px;
}
.geo-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.geo-list li { padding: 20px 0; border-top: 1px solid var(--line); }
.geo-list li:last-child { border-bottom: 1px solid var(--line); }
.geo-list b { display: block; color: var(--accent); font-weight: 500; margin-bottom: 4px; }
.geo-list span { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 1024px) {
  .layers { padding: var(--sec) 0; }
  .layers-card { padding: 32px 28px; }
  .layers-pick { grid-template-columns: repeat(2, 1fr); }
  .geo { padding: var(--sec) 0; }
  .geo-grid { grid-template-columns: 1fr; gap: 44px; }
  .geo-text p { max-width: none; }
}
@media (max-width: 720px) {
  .layers-card { border-radius: 0; padding: 26px 20px; margin-top: 38px; }
  .layers-pick { grid-template-columns: 1fr; }
  .layers-switch { width: 100%; }
  .lay-tab { flex: 1; padding: 10px 12px; }
  .goal-card { padding: 12px 40px 12px 16px; }
  .map .dot span { font-size: 9px; }
  .map-label { font-size: 14px; top: -26px; }
}

/* --- brand: светофор реакций кожи --- */
.zones { padding: var(--sec) 0; background: var(--bg-soft); }
.zones-lead {
  max-width: 600px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.zones-grid {
  max-width: 860px; margin: 52px auto 0;
  display: flex; flex-direction: column; gap: 14px;
}
.zone {
  background: #fff; border: 1px solid var(--line);
  border-radius: 0; overflow: hidden;
  transition: box-shadow .3s ease;
}
.zone[open] { box-shadow: 0 20px 50px rgba(42,74,58,.08); }
.zone summary {
  display: flex; align-items: center; gap: 16px;
  padding: 24px 28px; cursor: pointer; list-style: none;
  flex-wrap: wrap;
}
.zone summary::-webkit-details-marker { display: none; }
.zone-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
}
.zone-green .zone-dot { background: #3f8f5f; box-shadow: 0 0 0 4px rgba(63,143,95,.16); }
.zone-amber .zone-dot { background: #c9992f; box-shadow: 0 0 0 4px rgba(201,153,47,.16); }
.zone-red   .zone-dot { background: #b4472e; box-shadow: 0 0 0 4px rgba(180,71,46,.16); }
.zone summary b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 500; color: var(--accent);
}
.zone-what { font-size: 14px; color: var(--ink-soft); }
.zone-arr {
  margin-left: auto; width: 10px; height: 10px; flex: none;
  border-right: 1.5px solid var(--ink-soft);
  border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.zone[open] .zone-arr { transform: rotate(-135deg); }
.zone-body { padding: 0 28px 28px; }
.zone-body ul {
  list-style: none; display: grid; gap: 8px;
  margin-bottom: 20px; padding-top: 6px;
  border-top: 1px solid var(--line);
}
.zone-body li {
  position: relative; padding-left: 20px; padding-top: 8px;
  font-size: 15px; color: var(--ink-soft); line-height: 1.5;
}
.zone-body li::before {
  content: ''; position: absolute;
  left: 4px; top: 16px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-2);
}
.zone-body p { font-size: 15px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 14px; }
.zone-body p b { color: var(--accent); font-weight: 500; }
.zone-do {
  padding: 14px 18px; border-radius: 0;
  background: var(--bg-soft); color: var(--accent) !important;
  margin-bottom: 0 !important; font-size: 14px !important;
}
.zone-do-alert { background: rgba(180,71,46,.08); color: #8f351f !important; }

@media (max-width: 1024px) { .zones { padding: var(--sec) 0; } }
@media (max-width: 720px) {
  .zones-grid { margin-top: 38px; }
  .zone summary { padding: 20px; gap: 12px; }
  .zone summary b { font-size: 19px; }
  .zone-what { width: 100%; order: 3; }
  .zone-body { padding: 0 20px 22px; }
}

/* --- разбор индекса в результате теста --- */
.qr-parts { margin-top: 26px; }
.qr-parts-label {
  display: block; font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px;
}
.qr-part {
  position: relative;
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--line);
}
.qr-part span { font-size: 15px; color: var(--ink); }
.qr-part i {
  margin-left: auto; font-style: normal;
  font-size: 13px; color: var(--accent); font-variant-numeric: tabular-nums;
}
/* полоска веса под строкой — сразу видно, что тянет сильнее */
.qr-part u {
  position: absolute; left: 0; bottom: -1px;
  height: 2px; width: var(--w);
  background: var(--accent);
  text-decoration: none;
}
.qr-part.is-limit i { color: var(--ink-soft); }
.qr-part.is-limit u { background: var(--accent-2); width: 100%; opacity: .35; }

/* ============================================================
   ЛИНЕЙКА — карусель во всю ширину
   ============================================================ */
.line { padding: var(--sec) 0 0; overflow: hidden; }
.line-head { margin-bottom: 44px; }

.line-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 520px;
  overflow: hidden;
  background: var(--bg-soft);
}

.line-slide {
  position: absolute; inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition: transform .76s cubic-bezier(.22,1,.36,1),
              opacity .5s ease,
              visibility 0s linear .76s;
}
.line-slide.is-on {
  opacity: 1; visibility: visible; transform: translateX(0);
  transition: transform .76s cubic-bezier(.22,1,.36,1),
              opacity .5s ease,
              visibility 0s;
  z-index: 1;
}
/* стартовые позиции: откуда слайд приезжает */
.line-slide.from-right { transform: translateX(100%); transition: none; }
.line-slide.from-left  { transform: translateX(-100%); transition: none; }
/* куда уходит старый слайд */
.line-slide.to-left  { transform: translateX(-32%); opacity: 0; visibility: visible; }
.line-slide.to-right { transform: translateX(32%);  opacity: 0; visibility: visible; }

.line-slide img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

/* Текст лежит на светлой части кадра слева, поэтому затемнение сверху не нужно —
   хватает мягкой боковой вуали под самой колонкой текста. */
.line-slide::before {
  content: '';
  position: absolute; inset: 0;
  /* z-index обязателен: ::before рисуется до содержимого, а <img> внутри
     слайда позиционирован — без слоя картинка ложилась ПОВЕРХ вуали и текст
     всё равно читался по фотографии.
     Левая часть залита фоном наглухо — там лежит текст. Дальше заливка сходит
     на нет длинной растяжкой, чтобы стыка с фотографией не было видно. */
  z-index: 1;
  background: linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 38%,
    rgba(251,250,247,.96) 45%,
    rgba(251,250,247,.84) 51%,
    rgba(251,250,247,.62) 57%,
    rgba(251,250,247,.38) 63%,
    rgba(251,250,247,.18) 69%,
    rgba(251,250,247,.06) 75%,
    transparent 82%);
}

.line-copy {
  position: absolute;
  left: max(6vw, calc((100vw - var(--maxw)) / 2));
  top: 50%; transform: translateY(-50%);
  max-width: 460px;
  z-index: 2;
}
/* текст приезжает следом за кадром, с небольшой задержкой */
.line-slide.is-on .line-copy > * {
  animation: lineIn .72s cubic-bezier(.22,1,.36,1) backwards;
}
.line-slide.is-on .line-copy > *:nth-child(1) { animation-delay: .10s; }
.line-slide.is-on .line-copy > *:nth-child(2) { animation-delay: .17s; }
.line-slide.is-on .line-copy > *:nth-child(3) { animation-delay: .24s; }
.line-slide.is-on .line-copy > *:nth-child(4) { animation-delay: .31s; }
/* текст выезжает в ту же сторону, что и кадр: dir-r — слева направо,
   dir-l — справа налево */
.line-slide.dir-r .line-copy > * { animation-name: lineInR; }
.line-slide.dir-l .line-copy > * { animation-name: lineInL; }
@keyframes lineInR {
  from { opacity: 0; transform: translateX(-38px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lineInL {
  from { opacity: 0; transform: translateX(38px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lineIn {
  from { opacity: 0; transform: translateX(-38px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .line-slide, .line-slide.is-on .line-copy > * { transition: none; animation: none; }
}

.line-cat {
  display: block; font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 16px;
}
.line-copy h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 4.2vw, 60px);
  font-weight: 500; line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--accent);
  margin-bottom: 18px;
}
.line-copy p {
  font-size: 17px; line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.line-go {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; letter-spacing: .06em;
  color: var(--accent); text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(42,74,58,.3);
  position: relative; z-index: 3;
}
.line-go i { font-style: normal; transition: transform .3s ease; }
.line-go:hover { border-color: var(--accent); }
.line-go:hover i { transform: translateX(5px); }

/* ---- зоны клика с курсорами-стрелками ----
   Курсор рисуется прямо в CSS через data-URI, поэтому стрелка появляется
   мгновенно и не зависит от JS. */
.line-zone {
  position: absolute; top: 0; bottom: 0;
  width: 50%;
  border: 0; padding: 0; background: transparent;
  z-index: 4;
}
.line-zone.prev {
  left: 0;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><circle cx='28' cy='28' r='26' fill='rgba(255,255,255,.9)' stroke='rgba(42,74,58,.25)'/><path d='M33 18 L22 28 L33 38' fill='none' stroke='%232a4a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 28 28, w-resize;
}
.line-zone.next {
  right: 0;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56'><circle cx='28' cy='28' r='26' fill='rgba(255,255,255,.9)' stroke='rgba(42,74,58,.25)'/><path d='M23 18 L34 28 L23 38' fill='none' stroke='%232a4a3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") 28 28, e-resize;
}
/* левая зона не должна перекрывать текст и ссылку */
.line-zone.prev { width: 34%; }
.line-zone.next { width: 66%; }

.line-dots {
  position: absolute; left: 0; right: 0; bottom: 26px;
  display: flex; justify-content: center; gap: 8px;
  z-index: 5;
}
.line-dot {
  width: 34px; height: 3px; padding: 0;
  border: 0; cursor: pointer;
  background: rgba(255,255,255,.55);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: background .3s ease;
}
.line-dot.is-on { background: var(--accent); }

@media (max-width: 1024px) {
  .line { padding: var(--sec) 0 0; }
  .line-stage { aspect-ratio: 4 / 3; min-height: 0; }
  .line-copy { left: 5vw; right: 5vw; max-width: none; }
  .line-slide::before {
    background: linear-gradient(90deg,
      var(--bg) 0%, var(--bg) 34%,
      rgba(251,250,247,.94) 46%, rgba(251,250,247,.7) 58%,
      rgba(251,250,247,.38) 72%, rgba(251,250,247,.12) 86%, transparent 100%);
  }
}
@media (max-width: 720px) {
  .line-stage { aspect-ratio: 3 / 4; }
  .line-copy { top: auto; bottom: 66px; transform: none; }
  .line-copy p { font-size: 15px; }
  /* на телефоне листаем свайпом — курсорных зон нет */
  .line-slide::before {
    background: linear-gradient(180deg,
      transparent 0%, rgba(251,250,247,.5) 38%, rgba(251,250,247,.93) 62%);
  }
}

/* ============================================================
   ТИПОГРАФИКА ПОД CORMORANT GARAMOND + JOST
   У Cormorant меньше x-height и легче штрих, чем у Playfair,
   поэтому при тех же значениях он выглядел мелким и бледным:
   поднимаем кегль и насыщенность, гротеск наоборот облегчаем.
   ============================================================ */
h1, h2, h3, .line-copy h3, .qr-headtext h3, .zone summary b {
  font-weight: 500;
  letter-spacing: -0.015em;
}
h1 { font-size: clamp(44px, 6.4vw, 92px); line-height: 1.02; }
h2 { font-size: clamp(36px, 5.2vw, 68px); line-height: 1.06; }

.hero-title { font-size: clamp(48px, 8vw, 118px); }
.line-copy h3 { font-size: clamp(36px, 4.8vw, 68px); }
.diag-text h2 { font-size: clamp(38px, 5.4vw, 70px); }
.hero-product-text h2 { font-size: clamp(46px, 6.8vw, 94px); }
.stat-num { font-size: clamp(52px, 6.6vw, 88px); font-weight: 500; }
.statement-text { font-weight: 400; }
.quiz-step legend { font-size: clamp(27px, 3.3vw, 38px); font-weight: 500; }
.vipcalc-sum, .qr-gauge b, .vipcalc-nums b, .shot-badge b, .herobar b {
  font-weight: 500;
}
.vipcalc-sum { font-size: clamp(34px, 4.8vw, 52px); }
.herobar b { font-size: 23px; }

/* Jost геометричный и широкий — мелкому тексту нужен чуть меньший трекинг */
body, p, li, .btn, input, button, select, textarea { letter-spacing: 0.005em; }
.eyebrow, .line-cat, .zone-what, .qr-badge, .vipcalc-label {
  font-weight: 400;
}
.btn { font-weight: 400; letter-spacing: 0.06em; }

/* ============================================================
   СЕРВИСЫ — горизонтальная лента плиток
   ============================================================ */
.serv { padding: var(--sec) 0; background: var(--bg); overflow: hidden; }
.serv-inner {
  display: grid;
  grid-template-columns: minmax(280px, 26%) 1fr;
  gap: 60px;
  align-items: center;
  padding-left: max(6vw, calc((100vw - var(--maxw)) / 2));
}
.serv-head h2 {
  font-size: clamp(32px, 3.6vw, 48px);
  color: var(--ink);
  margin-bottom: 18px;
}
.serv-head p {
  font-size: 16px; line-height: 1.7;
  color: var(--ink-soft);
  max-width: 320px;
  margin-bottom: 30px;
}
.serv-nav { display: flex; gap: 10px; }
.serv-arr {
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-size: 16px; cursor: pointer;
  transition: all .25s ease;
}
.serv-arr:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.serv-arr:disabled { opacity: .3; cursor: default; }

/* лента уходит за правый край экрана — как у витрины */
.serv-track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-right: 6vw;
}
.serv-track::-webkit-scrollbar { display: none; }

.serv-tile {
  position: relative;
  flex: 0 0 clamp(260px, 24vw, 340px);
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  overflow: hidden;
  text-decoration: none;
  background: var(--bg-soft);
}
.serv-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.serv-tile:hover img { transform: scale(1.05); }
/* подпись читается на светлом кадре — притеняем только низ */
.serv-tile::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(180deg,
    transparent 0%, rgba(28,32,30,.28) 42%, rgba(28,32,30,.72) 100%);
  pointer-events: none;
}
.serv-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  padding: 26px 24px;
  text-align: center;
  color: #fff;
}
.serv-cap b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; font-weight: 500;
  margin-bottom: 8px;
}
.serv-cap span {
  font-size: 12px; letter-spacing: .08em;
  border-bottom: 1px solid rgba(255,255,255,.6);
  padding-bottom: 3px;
  transition: border-color .25s ease;
}
.serv-tile:hover .serv-cap span { border-color: #fff; }

@media (max-width: 1024px) {
  .serv { padding: var(--sec) 0; }
  .serv-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-left: 5vw; padding-right: 0;
  }
  .serv-head p { max-width: 480px; }
  .serv-track { padding-right: 5vw; }
}
@media (max-width: 720px) {
  .serv-tile { flex-basis: 74vw; }
  .serv-nav { display: none; }
}

/* Бургер теперь нужен и на десктопе: строка меню свёрнута, и это второй —
   явный — способ добраться до разделов, не полагаясь на наведение. */
.nav-burger { display: inline-flex; }

/* Центрированный логотип — приём для десктопа. На узких экранах он
   возвращается в поток рядом с бургером, как было: по центру он съедал бы
   место у иконок и жался к ним. */
@media (max-width: 880px) {
  .nav-inner > .logo {
    position: static;
    transform: none;
  }
  .nav-left { flex: 0 0 auto; }
  .nav-actions { flex: 1 1 auto; }
  .nav-inner { gap: 12px; }
}

/* На узком экране ряд фильтров шёл лесенкой: подпись «Задача» стоит слева,
   а кнопки разной ширины переносились каждая со своим отступом. */
@media (max-width: 720px) {
  .type-row, .goal-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .goal-grid, .type-grid { width: 100%; }
  .goal-card { width: 100%; }
}

/* ============================================================
   БЛОК «10 лет науки» — во всю ширину: текст слева, карта справа
   Раньше карта жила в узкой колонке внутри контейнера и была мелкой:
   подписи стран налезали друг на друга и не читались.
   ============================================================ */
.story { padding: 0; background: var(--bg-soft); }
.story-grid {
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.story-text {
  padding: 120px clamp(32px, 5vw, 90px);
  display: flex; flex-direction: column; justify-content: center;
}
.story-text p { max-width: 520px; }
.story-visual {
  display: grid; place-items: center;
  padding: 60px clamp(24px, 4vw, 70px);
  background: #f2ede2;
}
/* карта занимает всю свою половину — подписи наконец помещаются */
.story-visual .map {
  width: 100%;
  max-width: none;
  border: 0;
  background-color: transparent;
}
.story-visual .map .dot span { font-size: 13px; }
.story-visual .map-label { font-size: 22px; top: -38px; }
.story-visual .map-pulse { width: 20px; height: 20px; }

@media (max-width: 1024px) {
  .story-text { padding: 90px clamp(24px, 5vw, 48px); }
  .story-visual { padding: 40px 32px; }
}
@media (max-width: 880px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-text { padding: 64px 24px 56px; }
  .story-visual { padding: 32px 20px 48px; }
  .story-visual .map .dot span { font-size: 11px; }
  .story-visual .map-label { font-size: 17px; top: -30px; }
}

/* ---- калькулятор VIP: карточка получает опору ----
   Белый прямоугольник на бежевом фоне висел в воздухе. Даём секции глубину
   фотографией мрамора, а карточке — заметную рамку и плотную тень, чтобы она
   читалась как отдельный физический слой. */
.vipcalc {
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(180deg, var(--bg-soft) 0%, rgba(244,241,236,.72) 40%, var(--bg-soft) 100%),
    url(images/vip-marble.webp?v=2) center / cover no-repeat;
}
.vipcalc-card {
  border: 1px solid rgba(42,74,58,.16);
  box-shadow:
    0 2px 4px rgba(42,74,58,.05),
    0 18px 40px rgba(42,74,58,.10),
    0 46px 90px rgba(42,74,58,.10);
}
/* сама дорожка ползунка тоже была плоской линией — утапливаем её */
.vipcalc-range {
  height: 8px;
  box-shadow: inset 0 1px 3px rgba(42,74,58,.18);
}
.vipcalc-range::-webkit-slider-thumb {
  box-shadow: 0 2px 4px rgba(42,74,58,.2), 0 8px 20px rgba(42,74,58,.3);
}

/* Франция, Швейцария и Германия стоят в паре пикселей друг от друга —
   подписи разводим веером с выносными линиями, иначе они слипаются. */
.story-visual .dot.lab-fr span { top: 26px;  right: 20px; }
.story-visual .dot.lab-ch span { top: -34px; right: 22px; }
.story-visual .dot.lab-de span { top: -62px; left: 2px; }
.story-visual .dot.lab-fr::after,
.story-visual .dot.lab-ch::after,
.story-visual .dot.lab-de::after { display: none; }

/* ============================================================
   ШАПКА: логотип стоит на своём месте
   Проезд из центра к бургеру убран: JS успевал поставить сдвиг только после
   первой отрисовки, поэтому логотип сначала прыгал в центр и лишь потом
   ехал назад. Теперь он появляется сразу слева, а «начало» отмечает мягкое
   проявление на месте — без перемещения.
   ============================================================ */
.nav-inner { position: relative; }
.nav-left { flex: 0 0 auto; }
.nav-actions { flex: 1 1 auto; justify-content: flex-end; }
.nav-inner .nav-links {
  flex: 0 1 auto;
  justify-content: center;
  margin: 0 auto;
}

.nav-left .logo { animation: logoIn .7s cubic-bezier(.22,1,.36,1) both; }
@keyframes logoIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-left .logo { animation: none; }
}
@media (max-width: 880px) {
  .nav-inner .nav-links { display: none; }
}

/* ---- «До и после»: кадр получает опору ----
   Снимок лежал на бежевом фоне почти без границы и сливался с секцией.
   Даём секции глубину и мягкий виньет, а самому кадру — рамку и плотную
   многослойную тень, чтобы он читался как отдельный физический объект. */
.ba {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.7) 0%, transparent 60%),
    radial-gradient(90% 70% at 12% 100%, rgba(201,162,107,.13) 0%, transparent 62%),
    radial-gradient(90% 70% at 88% 96%, rgba(42,74,58,.09) 0%, transparent 62%),
    var(--bg-soft);
}
.ba-stage { position: relative; }
/* подложка чуть больше кадра — работает как паспарту */
.ba-stage::before {
  content: '';
  position: absolute;
  inset: -18px -18px -26px;
  background: rgba(255,255,255,.55);
  /* рамка тем же зелёным, что и логотип — паспарту читается как часть бренда */
  border: 1px solid var(--accent);
  pointer-events: none;
}
.ba-frame {
  border: 1px solid var(--accent);
  box-shadow:
    0 2px 6px rgba(42,74,58,.07),
    0 20px 44px rgba(42,74,58,.13),
    0 52px 100px rgba(42,74,58,.14);
}
@media (max-width: 720px) {
  .ba-stage::before { inset: -10px -10px -14px; }
}

/* ---- карта занимает правую половину целиком ----
   Пропорция блока обязана совпадать с пропорцией картинки (1484×1060):
   точки стран позиционируются в процентах от блока, и стоит их разойтись —
   Алматы уезжает в Каспий. Поэтому тянем по ширине, а высоту держим кратной.
*/
.story-visual { padding: 0; display: grid; place-items: center; }
.story-visual .map {
  width: 100%;
  aspect-ratio: 1484 / 1060;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 44px rgba(42,74,58,.10);
}


/* ---- VIP-карта: скругление и казахский ою ----
   Карта — предмет, у пластика не бывает прямых углов, поэтому радиус здесь
   уместен даже при общем «прямоугольном» языке сайта. Ою стоит в правом
   нижнем углу и по высоте равен логотипу в правом верхнем. */
.vipcard-inner { border-radius: 16px; }
.vipcard-oyu {
  position: absolute;
  right: 8%; bottom: 9%;
  height: 15%;                 /* та же высота, что у .vipcard-logo */
  width: auto;
  opacity: .82;
  pointer-events: none;
}
/* на тёмной карте золото звучит ярче, на светлых — приглушаем */
.vipcard[data-level="black"] .vipcard-oyu { opacity: .95; }
.vipcard[data-level="gold"] .vipcard-oyu {
  opacity: .6;
  filter: brightness(.72) saturate(1.15);
}
@media (max-width: 720px) {
  .vipcard-inner { border-radius: 12px; }
}

/* ============================================================
   ОТКРЫТЫЕ КОНЦЕНТРАЦИИ
   Цифры — главный аргумент бренда, поэтому набраны крупно и сухо,
   как строка в протоколе анализа, а не как рекламный блок.
   ============================================================ */
.spec { padding: var(--sec-sm) 0; background: var(--bg); }
.spec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap; padding-bottom: 14px;
}
.spec-slot { color: var(--ink-soft); }
.spec-rule {
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.5,0,.1,1) .2s;
}
.spec-rule.in { transform: scaleX(1); }
.spec-row {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-bottom: 1px solid var(--line);
}
.spec-cell { padding: 26px 18px 30px 0; border-right: 1px solid var(--line); }
.spec-cell:last-child { border-right: 0; }
.spec-cell b {
  display: block;
  font-family: 'Jost', sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  line-height: 1; letter-spacing: -0.03em;
  color: var(--accent);
}
.spec-cell span {
  display: block; margin-top: 12px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.55;
}
.spec-foot {
  padding-top: 16px;
  font-size: 13px; letter-spacing: .04em; color: var(--ink-soft);
}
@media (max-width: 860px) {
  .spec { padding: var(--sec-sm) 0; }
  .spec-row { grid-template-columns: repeat(2, 1fr); }
  .spec-cell { border-bottom: 1px solid var(--line); padding: 20px 14px 24px 0; }
  .spec-cell:nth-child(2n) { border-right: 0; }
  .spec-cell:last-child { grid-column: 1 / -1; border-bottom: 0; }
}

/* ============================================================
   СХЕМЫ УХОДА
   Товар бренда — не флакон, а последовательность. Карточка построена
   как рецепт: шаги нумерованы, цена и рассрочка внизу одним блоком.
   ============================================================ */
.schemes { padding: var(--sec) 0; background: var(--bg-soft); }
.schemes-lead {
  max-width: 620px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.schemes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 52px;
}
.scheme {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  padding: 34px;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.scheme:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(42,74,58,.09);
}
.scheme-tag {
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.scheme h3 {
  font-size: clamp(21px, 2.3vw, 26px);
  color: var(--accent); margin: 20px 0 10px;
}
.scheme-who { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.scheme-steps { list-style: none; margin: 22px 0 0; padding: 0; }
.scheme-steps li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px dotted var(--line);
  font-size: 14px;
}
.scheme-steps b { font-weight: 400; color: var(--ink); }
.scheme-steps em {
  font-style: normal; flex: none;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}

.scheme-price {
  margin-top: auto; padding-top: 22px;
  border-top: 1px solid var(--accent);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
}
.scheme-price b {
  font-family: 'Cormorant Garamond', serif;
  font-size: 27px; font-weight: 500; color: var(--accent);
}
.scheme-price s {
  font-size: 13px; color: var(--ink-soft);
  text-decoration-thickness: 1px;
}
.scheme-kaspi {
  flex-basis: 100%;
  font-size: 12px; letter-spacing: .03em; color: var(--accent-2);
}
.scheme-go { margin-top: 20px; width: 100%; justify-content: center; text-align: center; }

@media (max-width: 1024px) {
  .schemes { padding: var(--sec) 0; }
  .schemes-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .scheme { padding: 28px 24px; }
}

/* ---- история основателя: цитата ведёт, а не описание компании ---- */
.story-quote {
  margin: 20px 0 24px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 400; line-height: 1.3;
  color: var(--accent);
}
.story-quote em { font-style: italic; color: var(--accent-2); }
.story-sign {
  margin-top: 22px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft);
}
.story-btn { margin-top: 26px; }

/* ---- «Почему»: номера вместо декоративных глифов ---- */
.science-ico {
  font-family: 'Jost', sans-serif;
  font-size: 12px; letter-spacing: .2em;
  color: var(--accent-2);
}

/* ---- результаты: схема и срок стоят перед текстом ---- */
.reviews-lead {
  max-width: 620px; margin-top: 18px;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.review-meta {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}
.review-meta span { position: relative; }
.review-meta span + span { padding-left: 15px; }
.review-meta span + span::before {
  content: '·'; position: absolute; left: 3px; color: var(--ink-soft);
}

/* подвал: почта отдельной строкой под описанием бренда */
.footer-mail {
  display: inline-block; margin-top: 16px;
  font-size: 14px; color: rgba(255,255,255,.8);
  border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px;
}
.footer-mail:hover { color: #fff; border-color: #fff; }
/* колонок стало пять — сужаем шаг, чтобы не разъезжались */
@media (min-width: 1025px) {
  .footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); gap: 34px; }
}

.certs-lead { max-width: 520px; margin: 14px auto 0; color: var(--ink-soft); font-size: 15px; }

/* ============================================================
   ПРОБЛЕМА КОЖИ — вход в каталог по задаче, а не по форме выпуска
   ============================================================ */
.concerns { padding: var(--sec) 0 0; }
.concerns-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); margin-top: 46px;
}
.concern {
  background: var(--bg); padding: 38px;
  display: flex; flex-direction: column; gap: 12px; min-height: 210px;
  text-decoration: none; transition: background .3s ease;
}
.concern:hover { background: #fff; }
.concern h3 {
  font-size: clamp(19px, 2vw, 24px); color: var(--accent);
  transition: color .3s ease;
}
.concern:hover h3 { color: var(--accent-2); }
.concern p {
  font-size: 13px; letter-spacing: .03em; line-height: 1.75; color: var(--ink-soft);
}
.concern-go {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink);
  transition: color .3s ease;
}
.concern-go i { display: block; width: 0; height: 1px; background: var(--accent-2); transition: width .35s ease; }
.concern:hover .concern-go { color: var(--accent-2); }
.concern:hover .concern-go i { width: 36px; }
/* последняя карточка в нечётной сетке занимает всю строку */
.concerns-grid .concern:last-child:nth-child(odd) { grid-column: 1 / -1; min-height: 0; }

.concern-unsure {
  margin-top: 1px; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  background: var(--accent); color: #f4f1ea;
  padding: 30px 38px; text-decoration: none;
  transition: background .3s ease;
}
.concern-unsure:hover { background: var(--accent-2); }
.concern-unsure strong {
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(19px, 2.2vw, 24px);
}
.concern-unsure span { font-size: 11px; letter-spacing: .15em; text-transform: uppercase; opacity: .85; }

@media (max-width: 720px) {
  .concerns { padding: var(--sec) 0 0; }
  .concerns-grid { grid-template-columns: 1fr; margin-top: 34px; }
  .concern { padding: 28px 22px; min-height: 0; }
  .concern-unsure { padding: 24px 22px; }
}

/* ============================================================
   ШЕСТЬ СЕРИЙ
   ============================================================ */
.series { padding: var(--sec) 0; background: var(--bg-soft); }
.series-lead {
  max-width: 560px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
.series-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; margin-top: 52px;
}
.serie {
  background: #fff; border: 1px solid var(--line);
  padding: 32px; text-decoration: none;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .3s ease, transform .3s ease;
}
.serie:hover { border-color: var(--accent); transform: translateY(-3px); }
.serie-key {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-2);
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.serie h3 { font-size: 22px; color: var(--accent); margin-top: 8px; }
.serie p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 1024px) { .series-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .series { padding: var(--sec-sm) 0; } .series-grid { grid-template-columns: 1fr; } .serie { padding: 26px 22px; } }

/* ---- доставка и оплата ---- */
.delivery { padding: var(--sec) 0; background: var(--bg-soft); }
.delivery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.deliv { background: #fff; border: 1px solid var(--line); padding: 34px; }
.deliv b {
  display: block; font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3.4vw, 40px); font-weight: 500; color: var(--accent);
  margin-bottom: 14px;
}
.deliv h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.deliv p { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

/* ---- партнёрам ---- */
.b2b { background: var(--accent); color: #f4f1ea; padding: var(--sec-sm) 0; }
.b2b-inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
}
.b2b .eyebrow { color: var(--accent-2); }
.b2b h2 { color: #fff; margin: 12px 0 14px; font-size: clamp(28px, 3.6vw, 46px); }
.b2b p { color: rgba(244,241,234,.78); font-size: 16px; line-height: 1.65; max-width: 48ch; }
.b2b-btn { border-color: rgba(255,255,255,.45); color: #fff; background: transparent; }
.b2b-btn:hover { background: #fff; color: var(--accent); border-color: #fff; }

@media (max-width: 1024px) { .delivery-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }
@media (max-width: 720px)  { .delivery { padding: var(--sec-sm) 0; } .b2b { padding: var(--sec-sm) 0; } .b2b-btn { width: 100%; text-align: center; } }

/* сертификаты строкой — как плашки в источнике */
.certline { padding: 0 0 var(--sec); background: var(--bg); }
.certline-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 34px; border-top: 1px solid var(--line);
}
.certline-chip {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  border: 1px solid var(--ink-soft); color: var(--ink-soft);
  padding: 9px 18px;
}
.certline-note { font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); margin-left: 6px; }
.concerns-lead {
  max-width: 620px; margin: 18px auto 0;
  color: var(--ink-soft); font-size: 17px; line-height: 1.65;
}
@media (max-width: 720px) { .certline { padding-bottom: var(--sec-sm); } }

/* ============================================================
   МОБИЛЬНАЯ НИЖНЯЯ ПАНЕЛЬ
   На телефоне до разделов приходилось лезть в бургер. Четыре главных
   действия вынесены под большой палец — приём из источника.
   ============================================================ */
.tabbar { display: none; }
@media (max-width: 720px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 190;
    background: var(--bg); border-top: 1px solid var(--line);
  }
  .tabbar a {
    padding: 13px 4px calc(13px + env(safe-area-inset-bottom));
    text-align: center; text-decoration: none;
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-soft);
    border-right: 1px solid var(--line);
    transition: color .25s ease, background .25s ease;
  }
  .tabbar a:last-child { border-right: 0; }
  .tabbar a:active { background: var(--bg-soft); color: var(--accent); }
  /* золотая плашка VIP и кнопка чата уступают панели место */
  body { padding-bottom: 52px; }
  .goldbar { bottom: 52px; }
  .ai-fab { bottom: 68px; }
}

/* ============================================================
   ВЫПАДАЮЩИЕ СПИСКИ В ШАПКЕ
   Пять задач кожи и шесть серий — на них держится вся навигация источника.
   Разворачиваются по наведению и по фокусу с клавиатуры.
   ============================================================ */
.nav-links .has-drop { position: relative; }
.nav-links .has-drop > a::after {
  content: '';
  display: inline-block; margin-left: 7px; vertical-align: middle;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s ease;
}
.nav-links .has-drop:hover > a::after { transform: translateY(0) rotate(-135deg); }

.drop {
  position: absolute; top: 100%; left: -20px;
  min-width: 288px; padding: 10px 0;
  background: var(--bg); border: 1px solid var(--line);
  box-shadow: 0 20px 46px rgba(42,74,58,.12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  z-index: 20;
}
.nav-links .has-drop:hover .drop,
.nav-links .has-drop:focus-within .drop {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
/* мостик до списка: без него меню схлопывалось на полпути к первому пункту */
.nav-links .has-drop::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
}
.drop a {
  display: block; padding: 9px 20px;
  font-size: 14px; color: var(--ink-soft); opacity: 1;
  transition: background .2s ease, color .2s ease;
}
.drop a:hover { background: var(--bg-soft); color: var(--accent); }
.drop-label {
  display: block; padding: 11px 20px 5px;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-2);
}

/* ---- второй слой протокола: паспорт производства ----
   Значения здесь текстовые, а не числовые, поэтому кегль меньше, чем
   у концентраций, — иначе строка «FDA · Halal · EAC» ломалась бы пополам. */
.spec-head-2 { margin-top: 54px; }
.spec-row-2 { border-bottom: 0; }
.spec-row-2 .spec-cell b {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 1.9vw, 1.55rem);
  letter-spacing: -0.01em;
}
@media (max-width: 860px) {
  .spec-head-2 { margin-top: 34px; }
  .spec-row-2 .spec-cell:last-child { border-bottom: 0; }
}

/* ============================================================
   СТРАНИЦА СХЕМ
   Схема подана как график приёма: утро и вечер — две колонки,
   третья отвечает на «когда ждать» и «сколько стоит».
   ============================================================ */
.rt-picker { padding: 0 0 10px; }
.rt-picker-row {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--accent);
}
.rt-pick {
  padding: 20px 16px 24px 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none; transition: background .25s ease;
}
.rt-pick:last-child { border-right: 0; }
.rt-pick:hover { background: var(--bg-soft); }
.rt-pick b {
  display: block; font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-2); font-weight: 400;
}
.rt-pick span {
  display: block; margin-top: 9px;
  font-family: 'Cormorant Garamond', serif; font-size: 17px; line-height: 1.25;
  color: var(--accent);
}
.rt-pick em { display: block; margin-top: 8px; font-style: normal; font-size: 11px; color: var(--ink-soft); }

.rt-list { padding: var(--sec-sm) 0 var(--sec); }
.rt {
  border: 1px solid var(--accent);
  background: var(--bg);
  margin-bottom: 26px;
}
.rt-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 26px; flex-wrap: wrap;
  padding: 34px; border-bottom: 1px solid var(--line);
}
.rt-tag {
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2);
}
.rt-top h2 { margin-top: 12px; font-size: clamp(24px, 3vw, 34px); color: var(--accent); }
.rt-who { margin-top: 12px; font-size: 15px; color: var(--ink-soft); max-width: 52ch; line-height: 1.6; }
.rt-price { text-align: right; flex: none; }
.rt-price b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(24px, 3vw, 32px); font-weight: 500; color: var(--accent);
}
.rt-price s { display: block; margin-top: 4px; font-size: 12px; color: var(--ink-soft); }
.rt-kaspi { display: block; margin-top: 7px; font-size: 12px; color: var(--accent-2); }

.rt-body { display: grid; grid-template-columns: 1fr 1fr minmax(0, .86fr); }
.rt-slot { padding: 30px; border-right: 1px solid var(--line); }
/* вечерняя колонка холоднее — сразу видно, где что наносить */
.rt-slot.is-night { background: linear-gradient(180deg, rgba(42,74,58,.045), rgba(42,74,58,.012)); }
.rt-slot h3 {
  font-family: 'Jost', sans-serif;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 400;
}
.rt-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.rt-steps li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.rt-steps li:last-child { border-bottom: 0; }
.rt-steps b { font-size: 10px; color: var(--accent-2); width: 20px; flex: none; font-weight: 400; }
.rt-steps span { font-size: 14px; line-height: 1.45; color: var(--ink); }
.rt-steps em {
  font-style: normal; margin-left: auto; padding-left: 8px; flex: none; text-align: right;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.slot-note {
  margin-top: 16px; padding-top: 14px; border-top: 1px dotted var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--accent);
}
.slot-note.is-warn { color: #8f4433; }

.rt-slot.is-buy { border-right: 0; background: var(--bg-soft); display: flex; flex-direction: column; }
.rt-time { list-style: none; margin: 16px 0 0; padding: 0; }
.rt-time li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-soft);
}
.rt-time b { color: var(--accent); font-weight: 400; text-align: right; flex: none; }
.rt-go { margin-top: auto; width: 100%; text-align: center; justify-content: center; }
.rt-sub { margin-top: 12px; text-align: center; font-size: 11px; letter-spacing: .06em; }
.rt-sub a { color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.rt-sub a:hover { color: var(--accent); }

/* --- если проблем несколько --- */
.combo { padding: var(--sec) 0; background: var(--bg-soft); }
.combo-lead { max-width: 640px; margin: 18px auto 0; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.combo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 48px; }
.combo-card { background: var(--bg); padding: 34px; }
.combo-n { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-2); }
.combo-card h3 { margin: 14px 0 12px; font-size: 21px; color: var(--accent); }
.combo-card p { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); }

/* --- вопросы --- */
.rfaq { padding: var(--sec) 0; }
.rfaq-list { border-top: 1px solid var(--accent); margin-top: 44px; }
.rfaq details { border-bottom: 1px solid var(--line); }
.rfaq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 44px 24px 0;
  font-family: 'Cormorant Garamond', serif; font-size: clamp(18px, 2vw, 22px); color: var(--accent);
}
.rfaq summary::-webkit-details-marker { display: none; }
.rfaq summary::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: 'Jost', sans-serif; font-size: 20px; color: var(--accent-2);
}
.rfaq details[open] summary::after { content: '–'; }
.rfaq-ans { padding: 0 0 26px; max-width: 74ch; color: var(--ink-soft); font-size: 15.5px; line-height: 1.72; }
.rfaq-ans p + p { margin-top: 14px; }

@media (max-width: 1024px) {
  .rt-picker-row { grid-template-columns: repeat(3, 1fr); }
  .rt-pick:nth-child(3n) { border-right: 0; }
  .rt-body { grid-template-columns: 1fr 1fr; }
  .rt-slot.is-buy { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .rt-slot:nth-child(2) { border-right: 0; }
  .combo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rt-picker-row { grid-template-columns: repeat(2, 1fr); }
  .rt-pick:nth-child(3n) { border-right: 1px solid var(--line); }
  .rt-pick:nth-child(2n) { border-right: 0; }
  .rt-body { grid-template-columns: 1fr; }
  .rt-slot { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 20px; }
  .rt-top { padding: 24px 20px; }
  .rt-price { text-align: left; }
  .combo, .rfaq { padding: var(--sec-sm) 0; }
  .combo-card { padding: 26px 22px; }
}

/* ============================================================
   ТЕКСТУРЫ — мостик между «до/после» и манифестом
   Раньше манифест висел в 360 px пустоты и стык читался как обрыв.
   ============================================================ */
.tex { padding: var(--sec) 0; background: var(--bg); }
.tex-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin-top: 48px;
}
.tex-card { margin: 0; }
.tex-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.tex-card { overflow: hidden; }
.tex-card:hover img { transform: scale(1.05); }
.tex-card figcaption { padding: 22px 2px 0; }
.tex-card b {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px; font-weight: 500; color: var(--accent);
  margin-bottom: 8px;
}
.tex-card span { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---- манифест на фотографии воды ----
   Строка одна, поэтому фон несёт всю работу: тёмный кадр,
   светлый текст, отступы вдвое меньше прежних. */
.statement {
  position: relative;
  padding: var(--sec) 0;
  background: var(--accent) url(images/statement-bg.webp?v=2) center / cover no-repeat;
  isolation: isolate;
}
.statement::before {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(20,32,26,.62), rgba(20,32,26,.5));
}
.statement .statement-text { color: #f4f1ea; }
.statement .statement-text .hl {
  background: none; -webkit-text-fill-color: currentColor;
  color: var(--accent-2); font-style: italic;
}

@media (max-width: 1024px) {
  .tex { padding: var(--sec) 0; }
  .tex-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .tex-card figcaption { padding-top: 16px; }
  .tex-card b { font-size: 20px; }
  .tex-card span { font-size: 13px; }
  .statement { padding: var(--sec) 0; }
}
@media (max-width: 720px) {
  .tex-grid { grid-template-columns: 1fr; gap: 26px; max-width: 420px; margin-inline: auto; }
  .statement { padding: var(--sec-sm) 0; }
}

/* ---- серия получает кадр: карточка была голым текстом ---- */
.serie { padding: 0 0 30px; overflow: hidden; }
.serie-pic { margin: 0 0 24px; aspect-ratio: 4 / 5; overflow: hidden; }
.serie-pic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.serie:hover .serie-pic img { transform: scale(1.05); }
.serie-key, .serie h3, .serie p { padding-inline: 30px; }
.serie-key { padding-bottom: 14px; }
@media (max-width: 640px) { .serie-key, .serie h3, .serie p { padding-inline: 22px; } }

/* ============================================================
   О БРЕНДЕ — история как хроника, а не как рекламный текст
   ============================================================ */

/* цифра неудачи: 60 → 15 → 100+ */
.ratio { padding: 0 0 20px; }
.ratio-rule {
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.5,0,.1,1) .2s;
}
.ratio-rule.in { transform: scaleX(1); }
.ratio-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.ratio-cell {
  padding: 28px 18px 32px 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.ratio-cell:last-child { border-right: 0; }
.ratio-cell b {
  display: block;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1;
  letter-spacing: -.03em; color: var(--accent);
}
.ratio-cell span {
  display: block; margin-top: 12px;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.6;
}
.ratio-foot { padding-top: 16px; font-size: 13px; color: var(--ink-soft); }

/* главы */
.chapters { padding: var(--sec) 0; }
.chapter {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(18px, 4vw, 56px); align-items: start;
}
.chapter + .chapter {
  margin-top: clamp(48px, 6vw, 86px);
  padding-top: clamp(44px, 5.5vw, 72px);
  border-top: 1px solid var(--line);
}
.chapter-mark {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-2); padding-top: 10px; line-height: 1.8;
}
.chapter-body h2 { margin-bottom: 24px; color: var(--accent); }
.chapter-body p {
  font-size: clamp(16px, 1.55vw, 18px); line-height: 1.82;
  max-width: 64ch; color: var(--ink-soft);
}
.chapter-body p + p { margin-top: 22px; }
.chapter-btn { margin-top: 10px; }

/* врезка-цитата внутри главы */
.pull {
  margin: 32px 0; padding: 6px 0 6px 24px;
  border-left: 2px solid var(--accent-2);
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(20px, 2.3vw, 28px); line-height: 1.42;
  font-weight: 400; color: var(--accent);
}

.frame, .portrait {
  margin: 32px 0 0; border: 1px solid var(--line);
  background:
    radial-gradient(70% 55% at 30% 18%, rgba(126,170,142,.18) 0%, transparent 70%),
    linear-gradient(160deg, var(--bg-soft), #e3e6e0);
  overflow: hidden;
}
.frame { aspect-ratio: 16 / 10; }
.frame img, .portrait img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* лицо сидит в верхней трети кадра, поэтому cover обрезает низ, а не голову */
.portrait img { object-position: 50% 12%; }

/* сегодня */
.today { padding: var(--sec) 0; background: var(--bg-soft); }
.today-head { max-width: 64ch; margin-bottom: clamp(30px, 4vw, 46px); }
.today-head h2 { margin-top: 14px; color: var(--accent); }
.today-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.today-grid > div { background: var(--bg); padding: 30px; }
.today-grid b {
  display: block;
  font-family: 'Jost', sans-serif; font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem); line-height: 1; color: var(--accent);
}
.today-grid span {
  display: block; margin-top: 12px;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink-soft); line-height: 1.6;
}

/* портрет и подпись */
.sign-grid {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(28px, 5vw, 70px); align-items: center;
  margin-top: clamp(44px, 5.5vw, 72px);
}
.sign-grid .portrait { margin: 0; aspect-ratio: 4 / 5; }
.sign-text p { font-size: 17px; line-height: 1.8; color: var(--ink-soft); }
.sign-text p + p { margin-top: 20px; }
.sign-text .sign {
  margin-top: 26px;
  font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--accent); line-height: 1.9;
}

/* личный блог */
.personal {
  display: flex; justify-content: space-between; align-items: center;
  gap: 26px; flex-wrap: wrap;
  border: 1px solid var(--accent); padding: 34px;
  margin-top: clamp(40px, 5vw, 64px);
  text-decoration: none; transition: background .3s ease;
}
.personal:hover { background: var(--bg); }
.personal h3 { font-size: 22px; color: var(--accent); }
.personal p { margin-top: 10px; font-size: 15px; color: var(--ink-soft); max-width: 52ch; line-height: 1.65; }
.personal-btn { flex: none; }

@media (max-width: 1024px) {
  .today-grid { grid-template-columns: repeat(2, 1fr); }
  .sign-grid { grid-template-columns: 1fr; }
  .sign-grid .portrait { max-width: 340px; }
}
@media (max-width: 860px) {
  .chapters { padding: var(--sec-sm) 0; }
  .chapter { grid-template-columns: 1fr; gap: 14px; }
  .chapter-mark { padding-top: 0; }
}
@media (max-width: 560px) {
  .ratio-row { grid-template-columns: 1fr; }
  .ratio-cell { border-right: 0; }
  .today { padding: var(--sec-sm) 0; }
  .today-grid { grid-template-columns: 1fr; }
  .personal { padding: 26px 22px; }
  .personal-btn { width: 100%; text-align: center; }
}

/* ============ ЗАМЫКАНИЕ СЕКЦИИ ============
   Раньше действие встречалось в семи секциях из семнадцати и стояло
   каждый раз в новом месте — отсюда ощущение разбросанных кнопок.
   Теперь крупная секция заканчивается одной строкой: слева куда ведёт,
   справа сама кнопка. Одно действие, одно место, один вид. */
.sec-act {
  margin-top: 52px; padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px 32px; flex-wrap: wrap;
}
.sec-act > p {
  margin: 0; max-width: 52ch;
  color: var(--ink-soft); font-size: 15px; line-height: 1.65;
}
.sec-act .btn { flex-shrink: 0; }
@media (max-width: 720px) {
  .sec-act { margin-top: 38px; padding-top: 26px; gap: 18px; }
  .sec-act > p { font-size: 14.5px; }
  .sec-act .btn { width: 100%; justify-content: center; }
}

/* Финальная секция вела только в контакты и не предлагала действия —
   заголовок звал «начните», а начинать было нечем. */
.cta-main {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: 14px; margin-top: 40px;
}
.cta-or {
  margin: 40px 0 0; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-soft);
}
.cta .cta-grid { margin-top: 22px; }
@media (max-width: 720px) {
  .cta-main { flex-direction: column; gap: 12px; margin-top: 32px; }
  .cta-main .btn { width: 100%; justify-content: center; }
  .cta-or { margin-top: 32px; }
}