/* ============================================================
   BEAUTYHOLIC — посадочная v3 «EDITORIAL»
   Чёрный люкс + кремовые секции, морфинг фона при скролле.
   Редакционная вёрстка: наложения, доминанты, разрывы сетки.
   Акцент #8A0025 · Prata / Manrope / Tenor Sans / Cormorant It.
   ============================================================ */

@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/prata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Prata'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/prata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/manrope-regular-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/manrope-regular-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/manrope-medium-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/manrope-medium-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/manrope-bold-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/manrope-bold-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/cormorant-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tenor-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/tenor-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  --black: #121013;
  --black-2: #1b181b;
  --cream: #f8f3ec;
  --ivory: #f1e8dc;
  --crimson: #8a0025;
  --crimson-h: #a5103a;
  --rose: #c25668;
  --gold: #cba35f;
  --gold-dim: #9d8355;
  --ink-text: #2e1a1e;

  --bg: var(--black);
  --fg: #f4efe8;
  --kicker-c: var(--gold);
  --hairline: rgba(203,163,95,.28);
  --stroke: rgba(244,239,232,.35);

  --serif: 'Prata', 'Georgia', serif;
  --sans: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --caps: 'Tenor Sans', 'Manrope', sans-serif;
  --pad: clamp(20px, 5vw, 72px);
  --ease-exp: cubic-bezier(.16, 1, .3, 1);
  --ease-luxe: cubic-bezier(.65, 0, .35, 1);
  --morph: .5s ease;
}
body[data-theme="cream"] {
  --bg: var(--cream);
  --fg: var(--ink-text);
  --kicker-c: var(--crimson);
  --hairline: rgba(138,0,37,.25);
  --stroke: rgba(46,26,30,.3);
}
/* соседний оттенок крема — зонирование секций сменой тона (приём Aesop) */
body[data-theme="cream2"] {
  --bg: #f1eadd;
  --fg: var(--ink-text);
  --kicker-c: var(--crimson);
  --hairline: rgba(138,0,37,.25);
  --stroke: rgba(46,26,30,.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
  background: var(--bg);
  transition: background-color var(--morph), color var(--morph);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--crimson); color: #fff; }

#progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120;
  background: linear-gradient(90deg, var(--crimson), var(--gold));
  transform-origin: left; transform: scaleX(0);
}
@supports (animation-timeline: scroll(root)) {
  #progress { animation: progressGrow linear both; animation-timeline: scroll(root); }
  @keyframes progressGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---------- типографика ---------- */
.kicker {
  font-family: var(--caps); font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--kicker-c); transition: color var(--morph);
  display: flex; align-items: center; gap: 16px;
}
.kicker::before { content: ''; width: 40px; height: 1px; background: currentColor; flex: none; }
.h-section {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.1; text-wrap: balance;
}
.lead { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7; max-width: 54ch; opacity: .82; }
.accent {
  font-family: 'Cormorant Garamond', var(--serif);
  font-style: italic; font-weight: 500;
  font-size: 1.1em; letter-spacing: 0;
}
.h-section .accent { color: var(--crimson); transition: color var(--morph); }

.lines .line { display: block; overflow: hidden; }
.lines .line > span { display: inline-block; transform: translateY(115%); transition: transform 1.1s var(--ease-exp); }
.lines.is-in .line > span { transform: translateY(0); }
.lines .line:nth-child(2) > span { transition-delay: .1s; }
.lines .line:nth-child(3) > span { transition-delay: .2s; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform 1s var(--ease-exp); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }

.shutter { clip-path: inset(100% 0 0 0); transition: clip-path 1.15s var(--ease-luxe); }
.shutter img { transform: scale(1.15); transition: transform 1.5s var(--ease-luxe); }
.shutter.is-in { clip-path: inset(0 0 0 0); }
.shutter.is-in img { transform: scale(1); }

/* ---------- прелоадер ---------- */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
  transition: transform 1s var(--ease-luxe), visibility 1s;
  color: var(--ivory);
}
body.loaded #loader { transform: translateY(-101%); visibility: hidden; }
.loader-mark {
  width: 92px; height: 92px; border-radius: 50%;
  border: 1px solid rgba(241,232,220,.4);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 30px; color: var(--ivory);
}
.loader-count { font-family: var(--caps); font-size: 12px; letter-spacing: .4em; color: var(--gold); font-variant-numeric: tabular-nums; }

/* ---------- шапка ---------- */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px var(--pad);
  color: var(--fg);
  transition: color var(--morph), background-color .4s ease, padding .4s ease, box-shadow .4s ease;
}
#header.scrolled {
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 12px var(--pad);
  box-shadow: 0 1px 0 var(--hairline);
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--crimson);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 15px; color: #fff;
}
.logo-name { font-family: var(--caps); letter-spacing: .28em; font-size: 13px; text-transform: uppercase; }
.nav { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav a {
  font-family: var(--caps); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  opacity: .78; position: relative; padding: 4px 0; transition: opacity .3s;
}
.nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-exp);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.header-phone {
  font-weight: 500; font-size: 14px;
  border: 1px solid var(--hairline);
  padding: 9px 18px; border-radius: 3px;
  transition: background .3s, color .3s, border-color var(--morph);
  font-variant-numeric: tabular-nums;
}
.header-phone:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
@media (max-width: 900px) { .nav { display: none; } }
@media (max-width: 480px) { .logo-name { display: none; } }

/* ---------- секции ---------- */
.section { padding: clamp(80px, 11vw, 150px) var(--pad); position: relative; }
.section--flush { padding-left: 0; padding-right: 0; }
.pad { padding: 0 var(--pad); }
.section-inner { max-width: 1360px; margin: 0 auto; position: relative; z-index: 2; }

/* ---------- HERO: атмосферная текстура + oversized-типографика внизу ---------- */
#hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: 120px var(--pad) 48px;
  overflow: hidden;
  contain: layout paint style;
}
/* статичный фон: фото не «съедается» — облегчённый оверлей */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 26%;
  animation: kenburns 30s ease-in-out infinite alternate;
}
.hero-bg video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transition: opacity 1.2s ease;
}
.hero-bg video.playing { opacity: 1; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(900px 600px at 78% 30%, rgba(138,0,37,.16), transparent 60%),
    linear-gradient(180deg, rgba(18,16,19,.9) 0%, rgba(18,16,19,.62) 24%, rgba(18,16,19,.26) 48%, rgba(18,16,19,.42) 68%, rgba(18,16,19,.9) 100%);
}

/* стеклянная карточка-навигатор: витрина внизу справа */
.hero-card {
  position: absolute; z-index: 3;
  right: var(--pad); bottom: clamp(36px, 5.5vh, 60px);
  width: min(760px, calc(100vw - 2 * var(--pad)));
  background: linear-gradient(140deg, rgba(244,239,232,.12), rgba(244,239,232,.06));
  border: 1px solid rgba(244,239,232,.2);
  border-radius: 20px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 16px 22px 16px;
  box-shadow: 0 34px 90px rgba(0,0,0,.4);
  overflow: hidden;
  transition: border-color .35s;
}
.hero-card:hover { border-color: rgba(203,163,95,.55); }
.hero-card::before {
  content: ''; position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.09), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.hero-card:hover::before { animation: hcSheen 1.1s ease forwards; }
@keyframes hcSheen { to { left: 120%; } }
.hc-foot {
  position: absolute; right: 24px; bottom: 18px;
  display: flex; align-items: center; gap: 12px;
}
.hc-count { font-family: var(--serif); font-size: 12px; color: rgba(244,239,232,.7); font-variant-numeric: tabular-nums; }
.hc-count b { font-weight: 400; font-size: 16px; color: var(--ivory); }
.hc-count i { font-style: normal; opacity: .55; margin-left: 3px; }
.hc-track { position: relative; min-height: 252px; }
.hc-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; gap: 30px;
  padding: 2px 0;
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility 0s .3s; /* уходящий гаснет быстро */
}
.hc-slide.is-on { opacity: 1; visibility: visible; transition: opacity .5s ease .18s; }
.hc-photo { flex: none; border-radius: 14px; overflow: hidden; }
.hc-photo img { width: 248px; height: 248px; object-fit: cover; display: block; transition: transform .6s var(--ease-exp); }
.hc-slide:hover .hc-photo img { transform: scale(1.07); }
.hc-txt { display: grid; gap: 10px; min-width: 0; justify-items: start; }
.hc-txt b { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.3vw, 34px); line-height: 1.15; color: #fdfbf8; }
.hc-txt > span:last-child { font-size: 15px; line-height: 1.55; color: rgba(244,239,232,.7); max-width: 34ch; }
.hc-arrow {
  margin-left: auto; flex: none;
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  transition: color .3s, transform .3s;
  padding-right: 8px;
}
.hc-arrow svg { width: 34px; height: auto; }
.hc-slide:hover .hc-arrow { color: var(--gold); transform: translateX(6px); }
@keyframes hcFill { to { transform: scaleX(1); } }
.hc-dots { display: flex; gap: 6px; }
.hc-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(244,239,232,.28);
  transition: background .3s, width .3s;
  cursor: pointer;
}
.hc-dots span.on { background: var(--gold); width: 16px; border-radius: 3px; }
@media (max-width: 1080px) {
  .hero-card { position: static; width: 100%; margin-top: 26px; order: 2; }
  .hero-frame { order: 1; }
  .hc-photo img { width: 140px; height: 140px; }
  .hc-track { min-height: 168px; }
}
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.1); } }
/* аппарат — «экспонат»: карточка на тёмном */
@keyframes kenburnsY { from { transform: translateY(-50%) scale(1.02); } to { transform: translateY(-52%) scale(1.07); } }
/* статус галереи: подпись + полоски-прогресс */
@keyframes barfill { to { transform: scaleX(1); } }
#dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.hero-frame {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  max-width: 1360px; margin: 0 auto; width: 100%;
  gap: 40px;
}
/* v6: заголовок наверху, карточка внизу */
.hero-head { display: grid; gap: clamp(22px, 3vw, 36px); }
.hero-frame--top .hero-meta {
  border-top: 0; padding-top: 0; margin-top: 0;
  flex-direction: column; align-items: flex-start; gap: 20px;
  max-width: min(560px, calc(100% - 800px));
}
.hero-frame--top .hero-lead { font-size: 15px; max-width: 44ch; opacity: .78; }
.hero-frame--top .hero-actions { margin-top: 6px; flex-wrap: nowrap; gap: 26px; }
.hero-frame--top .btn-fill { padding: 15px 26px; font-size: 11px; letter-spacing: .2em; white-space: nowrap; }
.hero-frame--top .link-arrow { white-space: nowrap; }
@media (max-width: 1080px) {
  .hero-frame--top .hero-meta { max-width: none; }
}
.kicker-2l { align-items: baseline; }
.kicker-2l .kcol { display: grid; gap: 9px; }
.kicker-2l .k2 { opacity: .6; letter-spacing: .38em; }
.hero-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 7.4vw, 112px);
  line-height: 1.0; letter-spacing: -.01em;
  color: #fdfbf8;
}
@media (min-width: 861px) { .hero-title .line > span { white-space: nowrap; } }
.hero-title .l2 { display: block; margin-left: clamp(30px, 8vw, 150px); }
.hero-title .accent { color: var(--rose); }
.hero-meta {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  margin-top: clamp(26px, 3.4vw, 48px);
  padding-top: clamp(18px, 2.4vw, 28px);
  border-top: 1px solid rgba(244,239,232,.18);
}
.hero-lead { max-width: 38ch; font-size: 15px; line-height: 1.7; color: rgba(244,239,232,.8); }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
@media (max-width: 860px) {
  #hero { padding-top: 104px; }
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-title .l2 { margin-left: 6vw; }
}
.btn-fill {
  font-family: var(--caps); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: #fff; background: var(--crimson);
  padding: 17px 34px; border-radius: 3px;
  position: relative; overflow: hidden; display: inline-block;
  transition: background .35s;
}
.btn-fill:hover { background: var(--crimson-h); }
.btn-outline {
  font-family: var(--caps); font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--fg); border: 1px solid var(--stroke);
  padding: 17px 34px; border-radius: 3px;
  position: relative; overflow: hidden; display: inline-block;
  transition: color .35s, border-color .35s;
  z-index: 1;
}
.btn-outline::before {
  content: ''; position: absolute; inset: 0; background: var(--crimson);
  transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--ease-exp);
  z-index: -1;
}
.btn-outline:hover { color: #fff; border-color: var(--crimson); }
.btn-outline:hover::before { transform: scaleY(1); }
.link-arrow {
  font-family: var(--caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  opacity: .85; display: inline-flex; align-items: center; gap: 10px;
  transition: opacity .3s, color .3s;
}
.link-arrow svg { transition: transform .35s var(--ease-exp); }
.link-arrow:hover { opacity: 1; color: var(--rose); }
.link-arrow:hover svg { transform: translateX(6px); }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@media (max-width: 900px) {
  #hero { padding-top: 110px; }
  .hero-title .l2 > span { background: none; padding: 0; }
  .hero-title .l2 { margin-left: 8vw; }
}

/* ---------- бегущая строка ---------- */
.marquee {
  overflow: hidden; padding: 26px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--morph);
  white-space: nowrap;
}
.marquee-track { display: inline-flex; animation: marquee 36s linear infinite; }
.marquee span {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 28px);
  padding: 0 28px; display: inline-flex; align-items: center; gap: 56px;
}
.marquee span i { font-style: normal; color: transparent; -webkit-text-stroke: 1px var(--rose); }
.marquee span::after { content: '◆'; font-size: 9px; color: var(--crimson-h); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- ФИЛОСОФИЯ: липкий манифест + плотная колонка ---------- */
.manifesto {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 52px); line-height: 1.16;
  max-width: 18ch;
  margin: 24px 0 28px;
  text-wrap: balance;
}
.manifesto .accent { color: var(--crimson); transition: color var(--morph); }
#philosophy .lead { margin: 0; font-size: 16px; }

/* полоса цифр под принципами */

/* ---------- УСЛУГИ: прейскурант-издание ---------- */
.service-rows { border-top: 1px solid var(--hairline); transition: border-color var(--morph); }
.service-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 44px); align-items: center;
  padding: clamp(28px, 4vw, 48px) clamp(10px, 2vw, 28px);
  border-bottom: 1px solid var(--hairline);
  position: relative; overflow: hidden;
  transition: border-color var(--morph);
  cursor: pointer;
}
.service-row::before {
  content: ''; position: absolute; inset: 0; background: var(--crimson);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform .45s var(--ease-exp);
  z-index: 0;
}
.service-row:hover::before { transform: scaleY(1); }
.service-row > * { position: relative; z-index: 1; transition: color .35s; }
.service-row .sn { font-family: var(--serif); font-size: clamp(16px, 1.6vw, 22px); color: var(--crimson); transition: color .35s; }
.service-row h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 3.2vw, 46px); line-height: 1.1; }
.service-row p { font-size: 14px; line-height: 1.65; opacity: .74; max-width: 34ch; }
.service-row .fmt {
  font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  border: 1px solid var(--hairline); border-radius: 100px;
  padding: 8px 16px; white-space: nowrap;
  transition: border-color .35s, color .35s;
}
.service-row:hover .sn, .service-row:hover h3, .service-row:hover p { color: #fff; }
.service-row:hover p { opacity: .85; }
.service-row:hover .fmt { color: #fff; border-color: rgba(255,255,255,.5); }
.service-row .rcol { display: grid; gap: 12px; justify-items: end; }
@media (max-width: 860px) { .service-row .rcol { grid-column: 2; justify-items: start; } }
.service-cta { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--crimson); transition: color .35s; }
.service-row:hover .service-cta { color: var(--gold); }
@media (max-width: 860px) {
  .service-row { grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto; }
  .service-row h3 { grid-column: 2; }
  .service-row p { grid-column: 2; }
  .service-row .fmt { grid-column: 2; justify-self: start; }
}

/* шаги: синусоида */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(70px, 9vw, 110px);
}
.step { position: relative; padding-top: 20px; border-top: 1px solid var(--hairline); transition: border-color var(--morph); }
.step:nth-child(even) { transform: translateY(clamp(20px, 3vw, 48px)); }
.step .n {
  font-family: var(--serif); font-size: clamp(34px, 3.6vw, 54px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--crimson);
  display: block; margin-bottom: 14px;
  transition: -webkit-text-stroke-color var(--morph);
}
.supp-quote {
  margin-top: clamp(46px, 6vw, 72px);
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px); line-height: 1.3;
  opacity: .85;
}
.step h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; margin-bottom: 8px; }
.step p { font-size: 14px; line-height: 1.6; opacity: .7; max-width: 30ch; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr 1fr; }
  .step:nth-child(even) { transform: translateY(24px); }
}
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } .step:nth-child(even) { transform: none; } }

/* ---------- КОЛЛЕКЦИЯ: музейная витрина ---------- */
#collection::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 600px at 85% 12%, rgba(138,0,37,.16), transparent 60%);
}
.section-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.section-head .h-section { margin-top: 24px; }
@media (max-width: 860px) { .section-head { grid-template-columns: 1fr; align-items: start; } }

.featured {
  position: relative;
  min-height: clamp(400px, 46vw, 600px);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: clamp(70px, 9vw, 120px);
}
.featured-name {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(64px, 13vw, 200px); line-height: .92;
  color: transparent; -webkit-text-stroke: 1px rgba(244,239,232,.28);
  user-select: none; pointer-events: none;
  z-index: 1;
}
.featured-name .fn2 { align-self: flex-end; color: rgba(244,239,232,.1); -webkit-text-stroke: 0; }
.featured-photo { position: relative; z-index: 2; width: min(29vw, 350px); }
.featured-photo .device-frame { box-shadow: 0 60px 110px rgba(0,0,0,.6); }
.featured-side {
  position: absolute; left: 0; top: 8px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--caps); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--rose);
  z-index: 3;
}
.featured-spec {
  position: absolute; z-index: 3;
  font-size: 13px; line-height: 1.6; max-width: 24ch;
  color: rgba(244,239,232,.75);
}
.featured-spec b { display: block; font-family: var(--caps); font-weight: 400; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.fs-1 { left: 0; bottom: 10%; }
.fs-2 { right: 0; top: 6%; text-align: right; }
.fs-3 { right: 0; bottom: 10%; text-align: right; }
.featured-cta { position: absolute; left: 0; top: 40%; z-index: 3; display: grid; gap: 14px; }
.featured-cta .price { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 34px); color: var(--gold); font-variant-numeric: tabular-nums; }
.device-frame {
  background: linear-gradient(160deg, #fdfcfa, #efe9df);
  border-radius: 4px; overflow: hidden; position: relative;
}
.device-frame::after {
  content: ''; position: absolute; inset: 12px;
  border: 1px solid rgba(138,0,37,.22); border-radius: 2px; pointer-events: none;
}
@media (max-width: 860px) {
  .featured { min-height: 0; flex-direction: column; gap: 30px; padding-top: 40px; }
  .featured-name { position: static; font-size: clamp(44px, 12vw, 80px); }
  .featured-photo { width: min(70vw, 340px); }
  .featured-spec, .featured-side { position: static; text-align: left; max-width: none; }
  .featured-cta { position: static; }
  .featured { display: grid; }
}

/* --- сетка аппаратов «впритык» (паттерн Typology/Aesop) --- */
.type-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hairline); border: 1px solid var(--hairline);
  transition: background-color var(--morph), border-color var(--morph);
}
/* сетка не прячется целиком — карточки всплывают каскадом, без общего рывка */
.type-grid.reveal { opacity: 1; transform: none; }
.type-grid.reveal .type-cell { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s var(--ease-exp); }
.type-grid.reveal.is-in .type-cell { opacity: 1; transform: none; }
.type-grid.reveal .type-cell:nth-child(2) { transition-delay: .08s; }
.type-grid.reveal .type-cell:nth-child(3) { transition-delay: .16s; }
.type-grid.reveal .type-cell:nth-child(4) { transition-delay: .24s; }
.type-grid.reveal .type-cell:nth-child(5) { transition-delay: .32s; }
.type-grid.reveal .type-cell:nth-child(6) { transition-delay: .4s; }
.type-cell {
  background: #f7f2ea;
  color: var(--ink-text);
  padding: clamp(22px, 2.6vw, 38px) clamp(18px, 2.2vw, 32px) 24px;
  display: flex; flex-direction: column;
  position: relative;
  transition: background-color .45s ease;
}
.type-cell:hover { background: #efe7d8; }
.cell-zone {
  font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--crimson); margin-bottom: 14px;
}
.cell-photo { position: relative; aspect-ratio: 1 / 1; }
.cell-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .5s ease;
}
.cell-photo .alt { opacity: 0; }
.type-cell:hover .cell-photo .alt { opacity: 1; }
.type-cell:hover .cell-photo .main { opacity: 0; }
.cell-cap {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 20px; font-size: 15px;
}
.cell-cap b { font-weight: 700; }
.cell-cap span { font-variant-numeric: tabular-nums; white-space: nowrap; opacity: .8; }
.cell-tech { font-family: var(--caps); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: #8f8781; margin-top: 8px; }
.cell-more {
  margin-top: 14px;
  font-size: 13px; color: var(--crimson);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s var(--ease-exp);
}
.type-cell:hover .cell-more { opacity: 1; transform: none; }
@media (max-width: 1020px) { .type-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .type-grid { grid-template-columns: 1fr; }
  .cell-more { opacity: 1; transform: none; }
}

/* --- sticky-галерея --- */
.gallery-progress { font-family: var(--caps); font-size: 12px; letter-spacing: .3em; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gallery-track { display: flex; align-items: flex-start; gap: clamp(18px, 2.5vw, 36px); padding: 30px var(--pad) 0; will-change: transform; }
.device-card {
  background: linear-gradient(165deg, #fdfcfa, #f0eae0);
  color: #221c1e;
  border-radius: 4px;
  position: relative;
  flex: 0 0 clamp(300px, 25vw, 370px);
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow .4s ease;
  display: flex; flex-direction: column;
}
.device-card:nth-child(even) { margin-top: clamp(24px, 3vw, 56px); flex-basis: clamp(320px, 28vw, 420px); }
.device-card:hover { box-shadow: 0 34px 70px rgba(0,0,0,.6); }
@keyframes sheen { to { transform: translateX(120%); } }
@media (max-width: 899px) {
  .gallery-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gallery-track::-webkit-scrollbar { display: none; }
  .device-card, .device-card:nth-child(even) { scroll-snap-align: center; flex: 0 0 82vw; margin-top: 20px; }
  .gallery-progress { display: none; }
}
.collection-note {
  margin: clamp(40px, 5vw, 64px) auto 0;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  opacity: .65; font-size: 14px;
  padding: 0 var(--pad); max-width: 1360px;
}
.collection-note .hr { flex: 1; height: 1px; background: var(--hairline); min-width: 60px; }

/* ---------- СЛОВАРЬ: словарная полоса ---------- */
.dict { border-top: 1px solid var(--hairline); transition: border-color var(--morph); }
.dict-row {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(20px, 4vw, 70px); align-items: start;
  padding: clamp(26px, 3.6vw, 46px) 0;
  border-bottom: 1px solid var(--hairline);
  transition: border-color var(--morph);
}
.dict-row b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 6.5vw, 100px); line-height: .95;
  color: var(--gold);
}
.dict-row:nth-child(even) b { color: transparent; -webkit-text-stroke: 1px var(--gold); }
.dict-row i { font-style: normal; display: block; font-family: var(--caps); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin-top: 10px; }
.dict-row .dict-def { font-size: 15px; line-height: 1.7; opacity: .78; max-width: 52ch; padding-top: clamp(6px, 1.5vw, 26px); }
@media (max-width: 720px) { .dict-row { grid-template-columns: 1fr; gap: 12px; } .dict-row .dict-def { padding-top: 0; } }

/* ---------- КОСМЕТИКА: манифест + марквиза брендов ---------- */
.cosm-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 5vw, 100px); align-items: center;
  margin-bottom: clamp(50px, 7vw, 90px);
}
.cosm-copy { position: relative; }
.ghost-word {
  position: absolute; top: clamp(-70px, -6vw, -120px); left: -10px; z-index: 0;
  font-family: var(--serif); font-size: clamp(110px, 15vw, 240px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--hairline);
  pointer-events: none; user-select: none;
  transition: -webkit-text-stroke-color var(--morph);
}
.cosm-copy > * { position: relative; z-index: 1; }
.cosm-manifesto {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px); line-height: 1.18;
  text-wrap: balance;
}
.cosm-manifesto .accent { color: var(--crimson); transition: color var(--morph); }
.cosm-notes { display: grid; gap: 0; margin-top: clamp(34px, 4.4vw, 54px); counter-reset: cnote; }
.cosm-note {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 6px 18px;
  border-top: 1px solid var(--hairline);
  padding: clamp(16px, 2vw, 22px) 0;
  transition: border-color var(--morph);
}
.cosm-note::before {
  counter-increment: cnote;
  content: counter(cnote, decimal-leading-zero);
  grid-row: 1 / span 2;
  font-family: var(--serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--crimson);
  transition: -webkit-text-stroke-color var(--morph);
}
.cosm-note h4, .cosm-note .h4 { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.cosm-note p { grid-column: 2; font-size: 14px; line-height: 1.65; opacity: .72; max-width: 44ch; }

/* фото-композиция: текстура + капля внахлёст + бордовая подложка */
.cosm-visual { position: relative; padding: 26px 28px 40px 0; }
.cosm-visual::before {
  content: ''; position: absolute; right: 0; top: 0;
  width: 58%; height: 58%;
  background: var(--crimson); opacity: .14;
  border-radius: 2px;
}
.cosm-photo {
  position: relative; z-index: 1;
  aspect-ratio: 3 / 4; max-width: 370px; margin-left: auto;
  border-radius: 4px; overflow: hidden;
}
.cosm-photo img { width: 100%; height: 100%; object-fit: cover; }
.cosm-photo::after { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(138,0,37,.2); border-radius: 2px; pointer-events: none; z-index: 2; }
.cosm-photo-2 {
  position: absolute; z-index: 2;
  width: 17%; left: 27%; bottom: -2%;
  margin: 0;
}
.cosm-photo-2 img {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 22px 34px rgba(46, 26, 30, .28));
}
.cosm-visual .vertical {
  position: absolute; right: 6px; bottom: 10%;
  writing-mode: vertical-rl;
  font-family: var(--caps); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  opacity: .55; z-index: 2;
}
@media (max-width: 860px) {
  .cosm-grid { grid-template-columns: 1fr; }
  .cosm-visual { margin: 20px auto 0; max-width: 420px; padding: 22px 22px 34px 0; }
  .cosm-photo { margin-left: auto; max-width: none; }
  .cosm-photo-2 { width: 23%; left: 8%; }
  .cosm-visual .vertical { display: none; }
  .ghost-word { font-size: clamp(80px, 20vw, 140px); }
}

/* индекс брендов: архивная таблица с бордовым hover-инвертом */
@keyframes marqueeRev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cosmetics-cta { display: flex; align-items: center; gap: 28px; margin-top: clamp(36px, 5vw, 56px); flex-wrap: wrap; }

/* ---------- ОБО МНЕ: обложка журнала ---------- */
.cover { position: relative; }
.cover-quote {
  position: relative;
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-weight: 500;
  font-size: clamp(24px, 3vw, 42px); line-height: 1.35;
  max-width: 24ch;
  margin: 0 0 clamp(40px, 6vw, 80px) clamp(0px, 6vw, 120px);
}
.cover-quote::before {
  content: '«'; position: absolute; left: -.7em; top: -.35em;
  font-family: var(--serif); font-style: normal;
  font-size: 3.2em; line-height: 1; color: var(--crimson);
  opacity: .9;
  transition: color var(--morph);
}
.cover-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 90px); align-items: end;
  position: relative;
}
.cover-facts { display: grid; gap: 0; align-self: start; padding-top: clamp(0px, 4vw, 60px); }
.cover-facts li {
  display: flex; gap: 16px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--hairline);
  font-size: 15px; opacity: .9;
  transition: border-color var(--morph);
}
.cover-facts li:first-child { border-top: 1px solid var(--hairline); }
.cover-facts b { font-family: var(--serif); font-weight: 400; font-size: 13px; color: var(--crimson); flex: none; transition: color var(--morph); }
.cover-photo { position: relative; }
.cover-photo::before {
  content: ''; position: absolute; left: -7%; bottom: -7%;
  width: 62%; height: 62%;
  background: var(--crimson); opacity: .16;
  border-radius: 2px;
  z-index: 0;
}
.portrait {
  position: relative; z-index: 1;
  aspect-ratio: 3 / 4; max-width: 460px; margin-left: auto;
  border-radius: 4px;
  background:
    radial-gradient(420px 300px at 70% 20%, rgba(138,0,37,.5), transparent 60%),
    linear-gradient(165deg, #2a2226, var(--black) 80%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.portrait::before { content: ''; position: absolute; inset: 14px; border: 1px solid rgba(241,232,220,.35); border-radius: 2px; z-index: 2; pointer-events: none; }
.portrait .photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.cover-photo .vertical {
  position: absolute; right: -30px; top: 12%;
  writing-mode: vertical-rl;
  font-family: var(--caps); font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  opacity: .5;
}
.cover-name {
  position: relative; z-index: 2;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 9.5vw, 150px); line-height: .95;
  margin-top: clamp(-40px, -4vw, -80px);
  pointer-events: none;
}
/* line-height .95 меньше глифов Prata — без запаса overflow:hidden строк-масок срезает верх/низ букв */
.cover-name .line { padding: .14em 0; margin: -.14em 0; }
.cover-name .cn2 {
  display: block; margin-left: clamp(40px, 22vw, 420px);
  color: transparent; -webkit-text-stroke: 1px var(--stroke);
}
.cover-social { display: flex; gap: 24px; margin-top: clamp(24px, 3vw, 40px); flex-wrap: wrap; }
.cover-social .link-arrow { color: var(--crimson); opacity: 1; transition: color var(--morph); }
.cover-social .link-arrow:hover { color: var(--crimson-h); }
@media (max-width: 860px) {
  .cover-grid { grid-template-columns: 1fr; }
  .cover-photo { order: -1; }
  .portrait { margin: 0 auto; }
  .cover-photo .vertical { display: none; }
  .cover-name { margin-top: -30px; font-size: clamp(40px, 11vw, 80px); }
  .cover-name .cn2 { margin-left: 14vw; }
  .cover-quote { margin-left: 2em; }
}

/* ---------- ОТЗЫВЫ: редакционная выноска ---------- */
/* ---------- результаты: ползунок до/после ---------- */
.ba {
  position: relative;
  aspect-ratio: 3 / 4; /* реальные пары — вертикальные кадры */
  width: 100%; max-width: min(520px, 100%);
  margin: 0 auto;
  border-radius: 6px; overflow: hidden;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
}
.ba-cap {
  text-align: center;
  max-width: 56ch; margin: 18px auto 0;
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic;
  font-size: clamp(17px, 1.7vw, 22px); line-height: 1.45;
  opacity: .8;
}
.ba-pane { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ba-pane img {
  width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: opacity .25s;
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.ba ::selection { background: transparent; } /* драг ползунка не должен «выделять» фото */
.ba-before { background: linear-gradient(150deg, #262023, #161216 70%); }
.ba-after {
  background: linear-gradient(150deg, #3a1420, #1c0f16 70%);
  /* «после» — справа от ползунка, «до» остаётся слева */
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.ba-tag {
  position: absolute; top: 18px;
  font-family: var(--caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(18,16,19,.65); color: var(--ivory);
}
.ba-before .ba-tag { left: 18px; }
.ba-after .ba-tag { right: 18px; }
.ba-handle {
  position: absolute; top: 0; bottom: 0;
  left: var(--pos, 50%); transform: translateX(-50%);
  width: 2px; background: var(--gold);
  pointer-events: none;
}
.ba-handle span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold);
  display: flex; align-items: center; justify-content: center;
}
.ba-handle span::before {
  content: '';
  width: 20px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M6 1 1 6l5 5M14 1l5 5-5 5' stroke='%23121013' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* миниатюры пар до/после */
.ba-thumbs {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(14px, 2vw, 22px);
}
.ba-thumb {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hairline); border-radius: 5px;
  background: linear-gradient(150deg, #2a2126, #17121a 75%);
  color: var(--ivory);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; font: inherit;
  transition: border-color .3s, transform .3s var(--ease-exp), opacity .3s;
  opacity: .7;
}
.ba-thumb:hover { transform: translateY(-3px); opacity: 1; }
.ba-thumb.on { border-color: var(--gold); opacity: 1; }
.ba-thumb b { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.6vw, 24px); color: var(--gold); }
.ba-thumb span { font-family: var(--caps); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .65; }
@media (max-width: 700px) { .ba-thumbs { grid-template-columns: repeat(3, 1fr); } .ba-thumb:nth-child(n+4) { display: none; } }

/* ---------- отзывы: лента скриншотов-«телефонов» ---------- */
/* края ленты уходят в «облако» (маска), низ и верх — с запасом, без обрезов */
.shot-rail-wrap { margin-top: clamp(28px, 4vw, 48px); }
.shot-rail {
  --fade: clamp(36px, 6vw, 90px);
  display: flex; gap: clamp(18px, 2.4vw, 32px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 10px;
  padding: 34px 10px 84px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}
.shot-rail::-webkit-scrollbar { display: none; }
.shot-item {
  flex: none; width: clamp(216px, 23vw, 272px);
  border: 1px solid var(--hairline); border-radius: 26px;
  padding: 10px; background: #fffdf9;
  box-shadow: 0 18px 44px rgba(18, 16, 19, .12);
  cursor: zoom-in;
  scroll-snap-align: start; /* десктоп: шаг ровно на карточку от левого края */
  scroll-snap-stop: always; /* один жест — одна карточка, без микрошагов */
  transition: transform .45s var(--ease-exp), box-shadow .45s;
}
@media (max-width: 640px) {
  .shot-item { scroll-snap-align: center; } /* телефон: карточка по центру, соседи выглядывают */
}
.rev-btn.is-off { opacity: .3; pointer-events: none; }
.shot-item:nth-child(odd) { transform: rotate(-1.6deg); }
.shot-item:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.shot-item:hover { transform: rotate(0) translateY(-8px); box-shadow: 0 26px 60px rgba(18, 16, 19, .18); }
.shot-item img {
  display: block; width: 100%; height: auto;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.shot-nav { display: flex; justify-content: center; gap: 12px; margin-top: -34px; }
.rev-btn {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--hairline); background: none; color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none;
  transition: background .35s, border-color .35s, color .35s, transform .35s var(--ease-exp);
}
.rev-btn:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
@media (max-width: 640px) {
  .shot-item { width: 74vw; }
  .shot-nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .shot-item, .shot-item:nth-child(even), .shot-item:nth-child(odd) { transform: none; }
}

#reviews .section-inner { position: relative; }
.rev-mark {
  position: absolute; left: -10px; top: clamp(-90px, -8vw, -140px);
  font-family: var(--serif); font-size: clamp(140px, 18vw, 280px); line-height: 1;
  color: var(--crimson); opacity: .18;
  user-select: none; pointer-events: none;
  transition: color var(--morph);
}
#reviews .h-section { max-width: 16ch; margin: 20px 0; position: relative; }
#reviews .lead { margin: 0 0 34px clamp(0px, 10vw, 200px); }
#reviews .cta-line { margin-left: clamp(0px, 10vw, 200px); }

/* ---------- FAQ: липкий заголовок + нумерация ---------- */
.faq-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 100px); align-items: start;
}
.faq-left { position: sticky; top: 110px; }
.faq-left .h-section { margin-top: 24px; }
.faq-left p { margin-top: 20px; font-size: 15px; opacity: .7; max-width: 30ch; }
.faq-left .link-arrow { margin-top: 18px; color: var(--rose); opacity: 1; }
.faq { border-top: 1px solid var(--hairline); transition: border-color var(--morph); }
.faq details { border-bottom: 1px solid var(--hairline); transition: border-color var(--morph); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; gap: 20px;
  padding: 26px 0;
  font-family: var(--serif); font-size: clamp(17px, 1.7vw, 24px); line-height: 1.35;
}
.faq summary .qn { font-family: var(--serif); font-size: 13px; color: var(--crimson); flex: none; transition: color var(--morph); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '—'; flex: none; margin-left: auto;
  font-family: var(--serif); font-size: 22px; color: var(--gold);
  transition: transform .5s var(--ease-exp);
}
.faq details.is-open summary::after { transform: rotate(90deg); }
.faq details p { padding: 0 0 26px 33px; font-size: 15px; line-height: 1.7; opacity: .75; max-width: 58ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-left { position: static; } }

/* ---------- КОНТАКТЫ: типографический финал ---------- */
#contacts { text-align: center; padding-bottom: 0; }
/* свечение без обрезки: выходит за верх секции и мягко заезжает на блок вопросов */
#contacts::before {
  content: ''; position: absolute; left: 0; right: 0; top: -320px; height: 1040px;
  pointer-events: none;
  background: radial-gradient(900px 500px at 50% 60%, rgba(138,0,37,.24), transparent 60%);
}
#contacts .kicker { justify-content: center; }
#contacts .kicker::after { content: ''; width: 40px; height: 1px; background: currentColor; }
.invite { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 30px); margin: 30px 0 8px; opacity: .85; }
.phone-big {
  display: inline-block; margin: 8px 0 4px;
  font-family: var(--serif);
  font-size: clamp(32px, 5.5vw, 80px); line-height: 1.1;
  color: var(--ivory); font-variant-numeric: tabular-nums;
  transition: color .3s, text-shadow .3s;
}
.phone-big:hover { color: #fff; text-shadow: 0 0 50px rgba(138,0,37,.8); }

/* ---------- футер ---------- */
footer {
  padding: 26px var(--pad) 40px;
  opacity: .92;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 13px;
  transition: border-color var(--morph);
  position: relative; z-index: 2;
}
footer p { opacity: .6; }
footer .logo-mark { width: 34px; height: 34px; font-size: 12px; }
footer nav { display: flex; gap: 22px; }
footer nav a { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .6; transition: opacity .3s, color .3s; }
footer nav a:hover { opacity: 1; color: var(--rose); }

/* ---------- страницы аппаратов ---------- */
@view-transition { navigation: auto; }
.dev-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 90px); align-items: center;
  padding: 150px var(--pad) clamp(60px, 8vw, 110px);
  max-width: 1360px; margin: 0 auto;
  min-height: 88svh;
}
.dev-hero .kicker { margin-bottom: 24px; }
.dev-name { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.6vw, 78px); line-height: 1.05; margin-bottom: 14px; text-wrap: balance; }
.dev-tagline { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(19px, 1.9vw, 26px); color: var(--rose); margin-bottom: 22px; }
.dev-desc { font-size: 16px; line-height: 1.7; opacity: .8; max-width: 50ch; margin-bottom: 30px; }
.dev-buy { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.dev-buy .price { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 38px); color: var(--gold); font-variant-numeric: tabular-nums; }
.dev-photo { position: relative; }
.dev-photo .device-frame { max-width: 470px; margin: 0 auto; box-shadow: 0 50px 100px rgba(0,0,0,.55); }
.dev-photo .idx {
  position: absolute; top: -40px; right: -10px; z-index: 2;
  font-family: var(--serif); font-size: clamp(70px, 8vw, 130px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(244,239,232,.3);
  pointer-events: none;
}
@media (max-width: 860px) { .dev-hero { grid-template-columns: 1fr; padding-top: 120px; min-height: 0; } .dev-photo { order: -1; } }

.dev-section { padding: clamp(60px, 8vw, 110px) var(--pad); max-width: 1360px; margin: 0 auto; }
.dev-section > .h-section { margin-bottom: clamp(36px, 5vw, 60px); }
.effects-cols { columns: 2; column-gap: clamp(30px, 4vw, 70px); max-width: 900px; }
.effects-cols li {
  break-inside: avoid;
  padding: 14px 0 14px 34px; position: relative;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px; opacity: .85;
}
.effects-cols li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
@media (max-width: 700px) { .effects-cols { columns: 1; } }
.dev-note { font-size: 13px; opacity: .55; max-width: 60ch; margin-top: clamp(30px, 4vw, 50px); }

.dev-nav {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--hairline);
}
.dev-nav a {
  padding: clamp(30px, 4vw, 50px) var(--pad);
  display: flex; flex-direction: column; gap: 8px;
  transition: background .35s;
}
.dev-nav a:hover { background: rgba(138,0,37,.16); }
.dev-nav a + a { border-left: 1px solid var(--hairline); text-align: right; align-items: flex-end; }
.dev-nav .dir { font-family: var(--caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; opacity: .5; }
.dev-nav .nm { font-family: var(--serif); font-size: clamp(18px, 2vw, 28px); }

/* ---------- живые кадры: бегущая фото-лента + лайтбокс ---------- */
.photo-marquee { overflow: hidden; }
.pm-track {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  animation: pmMove 70s linear infinite;
  padding: 6px 0;
  will-change: transform;
}
.photo-marquee:hover .pm-track { animation-play-state: paused; }
@keyframes pmMove { to { transform: translateX(-50%); } }
.pm-item {
  border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: 6px; overflow: hidden; flex: none;
  transition: transform .4s var(--ease-exp);
}
.pm-item:hover { transform: translateY(-6px); }
.pm-item img { display: block; width: auto; }
.pm-lg img { height: clamp(260px, 32vw, 420px); }
.pm-md img { height: clamp(190px, 24vw, 310px); }
@media (prefers-reduced-motion: reduce) {
  .pm-track { animation: none; }
  .photo-marquee { overflow-x: auto; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(18,16,19,.95);
  display: flex; align-items: center; justify-content: center;
  cursor: zoom-out;
  opacity: 0; transition: opacity .3s ease;
}
.lightbox.on { opacity: 1; }
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 88vh;
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 40px 120px rgba(0,0,0,.6);
}
.lb-close {
  position: absolute; top: 22px; right: 30px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--serif); font-size: 44px; line-height: 1;
  color: var(--ivory); opacity: .8; transition: opacity .3s;
}
.lb-close:hover { opacity: 1; }

/* флагман: второй ракурс при наведении */

/* ---------- курсор, магниты, паузы ---------- */
#cursor {
  position: fixed; top: 0; left: 0; z-index: 300;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .25s ease, height .25s ease, opacity .25s ease, background-color .25s ease;
  opacity: 0;
  will-change: transform;
}
#cursor.on { opacity: .9; }
#cursor.grow { width: 40px; height: 40px; background: transparent; border: 1px solid var(--gold); }
@media (hover: none), (max-width: 900px) { #cursor { display: none; } }
.magnetic { display: inline-block; will-change: transform; } /* движение — пружина в JS, CSS-transition тут только мешал */
.paused, .paused *, .paused::before, .paused::after { animation-play-state: paused !important; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal, .lines .line > span { opacity: 1 !important; transform: none !important; }
  .shutter { clip-path: none !important; }
  .shutter img { transform: none !important; }
  #dust { display: none; }
}

/* ---------- страницы аппаратов: до/после, рекомендации, характеристики, оплата ---------- */
.shot-rail { align-items: flex-start; } /* карточки-скриншоты разной высоты не растягиваются */
.reco-note { font-size: 14px; line-height: 1.7; opacity: .7; max-width: 60ch; margin-bottom: clamp(22px, 3vw, 34px); }
.ba-pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 2.6vw, 36px); max-width: 1100px; }
.ba-pairs p { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(16px, 1.6vw, 20px); line-height: 1.4; margin-top: 12px; opacity: .8; }

/* ---------- страницы аппаратов v2: галерея, липкая панель, навигация по секциям, глубина, таймлайн, ритуал ---------- */
.dev-pay-hint { margin-top: 18px; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.dev-photo .device-frame img { transition: opacity .35s; }
.dev-thumbs { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.dev-thumbs button {
  width: 56px; height: 56px; padding: 0; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--hairline); background: #fff; cursor: pointer; opacity: .55;
  transition: opacity .3s, border-color .3s, transform .3s var(--ease-exp);
}
.dev-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-thumbs button:hover { opacity: 1; transform: translateY(-2px); }
.dev-thumbs button.on { opacity: 1; border-color: var(--gold); }
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; gap: 18px;
  padding: 12px var(--pad);
  background: rgba(18,16,19,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%); transition: transform .5s var(--ease-exp);
}
.buybar.on { transform: none; }
.bb-name { font-family: var(--serif); font-size: 17px; color: var(--ivory); }
.bb-price { font-family: var(--serif); font-size: 17px; color: var(--gold); margin-left: auto; font-variant-numeric: tabular-nums; }
.buybar .btn-fill { padding: 12px 22px; font-size: 10px; }
.secnav {
  position: sticky; top: 70px; z-index: 40;
  display: flex; gap: clamp(14px, 2.2vw, 34px); justify-content: center; flex-wrap: wrap;
  padding: 12px var(--pad);
  background: rgba(18,16,19,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.secnav a { font-family: var(--caps); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; padding: 4px 0; border-bottom: 1px solid transparent; transition: opacity .3s, border-color .3s, color .3s; }
.secnav a:hover, .secnav a.on { opacity: 1; color: var(--gold); border-color: var(--gold); }
.tech-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .85fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.depth { position: sticky; top: 130px; border: 1px solid var(--hairline); border-radius: 6px; padding: clamp(20px, 2.4vw, 30px); }
.depth-t { font-family: var(--caps); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin-bottom: 16px; }
.depth-row { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline); min-height: 54px; }
.depth-row .dl { font-family: var(--serif); font-size: 14px; opacity: .45; transition: opacity .3s; }
.depth-row.has .dl { opacity: .9; }
.depth-row:nth-child(2) { background: linear-gradient(90deg, rgba(203,163,95,.05), transparent); }
.depth-row:nth-child(4) { background: linear-gradient(90deg, rgba(138,0,37,.08), transparent); }
.depth-row:nth-child(6) { background: linear-gradient(90deg, rgba(138,0,37,.16), transparent); }
.chip { display: inline-block; margin: 3px 6px 3px 0; padding: 5px 11px; border-radius: 100px; border: 1px solid var(--gold); color: var(--gold); font-family: var(--caps); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.depth-note { font-size: 12px; line-height: 1.6; opacity: .5; margin-top: 16px; }
.tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); max-width: 1000px; }
.tl-step { border-top: 1px solid var(--hairline); padding-top: 18px; }
.tl-when { display: block; font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(24px, 2.4vw, 34px); color: var(--gold); margin-bottom: 8px; }
.tl-step p { font-size: 14px; line-height: 1.65; opacity: .72; }
.ritual { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 44px); }
details.contra { margin-top: clamp(36px, 5vw, 60px); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
details.contra summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--serif); font-size: clamp(20px, 2vw, 27px); display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
details.contra summary::-webkit-details-marker { display: none; }
details.contra summary::after { content: '+'; margin-left: auto; font-family: var(--serif); font-size: 26px; color: var(--gold); transition: transform .55s var(--ease-exp); }
details.contra.is-open summary::after { transform: rotate(45deg); }
details.contra .sum-hint { font-family: var(--sans); font-size: 13px; opacity: .55; }
details.contra .effects-cols { padding-bottom: 26px; }
@media (max-width: 900px) {
  .tech-grid { grid-template-columns: 1fr; }
  .depth { position: static; }
  .tl, .ritual { grid-template-columns: 1fr; }
  .secnav { top: 62px; gap: 14px; }
  .buybar .bb-name { display: none; }
}

/* ---------- страницы аппаратов v2.1: дизайн-проход ---------- */
/* карточки родных средств — с фото */
/* схема глубины — ровные строки с воздухом и линией глубины */
.depth-rows { position: relative; padding-left: 18px; }
.depth-rows::before { content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--gold), var(--crimson)); opacity: .8; }
.depth-row { grid-template-columns: 118px 1fr; gap: 14px; padding: 13px 14px; margin: 4px 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.025); position: relative; }
.depth-row::before { content: ''; position: absolute; left: -19px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--hairline); }
.depth-row.has::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(203,163,95,.18); }
.depth-row:nth-child(2) { background: rgba(203,163,95,.05); }
.depth-row:nth-child(4) { background: rgba(138,0,37,.09); }
.depth-row:nth-child(5) { background: rgba(138,0,37,.16); }
.depth-row .dl { line-height: 1.2; }
.depth-row .dc { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { margin: 0; }
/* таймлайн — точки на линии */
.tl-step { position: relative; }
.tl-step::before { content: ''; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
/* до/после — живые слайдеры в ряд */
.ba-pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ba-pairs .ba { max-width: none; aspect-ratio: 3 / 4; }
.ba-mini .ba-tag { top: 12px; font-size: 9px; padding: 6px 12px; }
.ba-mini .ba-before .ba-tag { left: 12px; } .ba-mini .ba-after .ba-tag { right: 12px; }
.ba-mini .ba-handle span { width: 38px; height: 38px; }
.ba-mini .ba-handle span::before { width: 16px; height: 10px; }
/* оплата и бонусы — кремовая панель */
.pay-panel {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 44px);
  max-width: 1100px; padding: clamp(28px, 4vw, 52px);
  background: var(--cream); color: var(--ink-text); border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.pay-big { display: block; font-family: var(--serif); font-size: clamp(30px, 3.4vw, 46px); line-height: 1; color: var(--crimson); margin-bottom: 12px; }
.pay-col b { display: block; font-family: var(--caps); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 10px; }
.pay-col p { font-size: 14px; line-height: 1.6; opacity: .75; }
.pay-bonus { grid-column: 1 / -1; border-top: 1px solid rgba(46,26,30,.14); padding-top: clamp(20px, 2.6vw, 30px); }
.pay-bt { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(20px, 2vw, 26px); margin-bottom: 14px; }
.pay-bonus ul { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 24px; }
.pay-bonus li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; }
.pay-bonus li::before { content: '✦'; position: absolute; left: 0; top: 1px; color: var(--gold); font-size: 12px; }
@media (max-width: 900px) {
  .ba-pairs { grid-template-columns: 1fr; max-width: 420px; }
  .pay-panel { grid-template-columns: 1fr; }
  .pay-bonus ul { grid-template-columns: 1fr; }
}

/* ---------- страницы аппаратов v2.2 ---------- */
/* точки строго на линии глубины */
.depth-rows { padding-left: 22px; }
.depth-rows::before { left: 5px; width: 2px; top: 27px; bottom: 27px; }
.depth-row::before { left: -21px; width: 8px; height: 8px; margin-top: -4px; }
/* карточки средств — ряд на всю ширину под шагами */
/* плавное раскрытие противопоказаний */
details.contra .contra-body { overflow: hidden; height: 0; transition: height .55s var(--ease-exp); }
details.contra .effects-cols { padding-bottom: 26px; opacity: 0; transform: translateY(-6px); transition: opacity .45s ease .1s, transform .45s var(--ease-exp) .1s; }
details.contra.is-open .effects-cols { opacity: 1; transform: none; }

/* ---------- страницы аппаратов v2.3: ширина колонки на широких экранах, финальный призыв ---------- */
.secnav { max-width: 1360px; margin: 0 auto; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.dev-nav { max-width: 1360px; margin: 0 auto; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.dev-page #pay { padding-bottom: clamp(30px, 4vw, 56px); }
.dev-cta {
  position: relative; text-align: center;
  padding: clamp(90px, 11vw, 160px) var(--pad);
}
.dev-cta::before {
  content: ''; position: absolute; left: 0; right: 0; top: -120px; bottom: -80px; pointer-events: none;
  background: radial-gradient(820px 460px at 50% 55%, rgba(138, 0, 37, .30), transparent 62%);
}
.dev-cta .invite, .dev-cta .link-arrow { position: relative; }
.dev-cta .invite { margin-top: 0; font-size: clamp(24px, 2.8vw, 38px); }
@media (max-width: 1400px) {
  .secnav, .dev-nav { border-left: 0; border-right: 0; }
}

/* ---------- страницы аппаратов v2.4: ширина по внутренним краям контента ---------- */
.secnav, .dev-nav { max-width: calc(1360px - 2 * var(--pad)); }
.dev-nav a { padding-left: clamp(18px, 2vw, 30px); padding-right: clamp(18px, 2vw, 30px); }
.dev-page footer { max-width: calc(1360px - 2 * var(--pad)); margin: 0 auto; }
@media (min-width: 1400px) { .dev-page footer { padding-left: 0; padding-right: 0; } }

/* ---------- страницы аппаратов: кнопка «назад» ---------- */
.back-link {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(22px, 3vw, 40px);
  font-family: var(--caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--gold); opacity: .8;
  transition: opacity .3s, gap .3s var(--ease-exp);
}
.back-link:hover { opacity: 1; gap: 14px; }
.back-link svg { transition: transform .3s var(--ease-exp); }
.back-link:hover svg { transform: translateX(-3px); }


/* ---------- мобильная версия: меню, hero, обо мне, навигация по секциям ---------- */
.burger {
  display: none; width: 44px; height: 44px; margin-left: 12px; flex: none;
  border: 1px solid var(--hairline); border-radius: 3px; background: none; cursor: pointer;
  position: relative; transition: border-color var(--morph);
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 1.5px; background: currentColor;
  transition: transform .4s var(--ease-exp), top .4s var(--ease-exp), opacity .3s;
}
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.burger.is-open span:first-child { top: 21px; transform: rotate(45deg); }
.burger.is-open span:last-child { top: 21px; transform: rotate(-45deg); }
/* меню: раскрытие кругом из бургера, каскад пунктов, превью раздела, бегущая строка */
.mmenu {
  position: fixed; inset: 0; z-index: 95;
  --cx: calc(100% - var(--pad) - 22px);
  background:
    radial-gradient(900px 560px at 85% 8%, rgba(138,0,37,.34), transparent 60%),
    radial-gradient(600px 400px at 10% 100%, rgba(203,163,95,.10), transparent 60%),
    var(--black);
  color: var(--ivory);
  display: flex; flex-direction: column;
  padding: 92px var(--pad) 0;
  overflow-y: auto; overflow-x: hidden;
  clip-path: circle(0px at var(--cx) 42px);
  transition: clip-path .9s var(--ease-luxe);
}
.mmenu.on { clip-path: circle(170% at var(--cx) 42px); }
.mmenu[hidden] { display: none; }
.mmenu-inner { display: grid; grid-template-columns: 1fr; gap: 24px; flex: 1; align-content: start; }
.mmenu-nav { display: grid; }
.mmenu-nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 10px 0; min-height: 48px;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.mmenu-nav a i { font-style: normal; font-family: var(--caps); font-size: 10px; letter-spacing: .2em; color: var(--gold); width: 26px; flex: none; }
.mmenu-nav a span {
  display: block;
  font-family: var(--serif); font-size: clamp(30px, 8vw, 54px); line-height: 1.08;
  transform: translateY(115%);
  transition: transform .8s var(--ease-luxe), color .3s, letter-spacing .4s var(--ease-exp);
  transition-delay: 0s;
}
.mmenu.on .mmenu-nav a span { transform: none; transition-delay: calc(.22s + var(--i) * 65ms); }
.mmenu-nav a:hover span, .mmenu-nav a:focus-visible span, .mmenu-nav a.is-hot span { color: var(--gold); letter-spacing: .02em; }
.mmenu-preview { display: none; }
.mmenu-foot { display: grid; gap: 18px; padding: 30px 0 22px; }
.mmenu-foot .btn-fill { text-align: center; padding: 17px 22px; }
.mmenu-links { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.mmenu-tel { font-family: var(--serif); font-size: 21px; color: var(--ivory); }
.mmenu-ig { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.mmenu-marquee { margin: 0 calc(-1 * var(--pad)); border-top: 1px solid var(--hairline); padding: 14px 0; overflow: hidden; opacity: .55; }
.mmenu-track { display: flex; gap: 40px; width: max-content; animation: mmenuMove 26s linear infinite; font-family: var(--caps); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; }
@keyframes mmenuMove { to { transform: translateX(-50%); } }
body.menu-open { overflow: hidden; }
body.menu-open #header { background: transparent; box-shadow: none; backdrop-filter: none; }
@media (min-width: 600px) and (max-width: 900px) {
  .mmenu-inner { grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr); gap: 40px; align-items: center; }
  .mmenu-nav a span { font-size: clamp(38px, 6.4vw, 64px); }
  .mmenu-preview {
    display: block; position: relative; aspect-ratio: 3 / 4; max-width: 340px; width: 100%; justify-self: end;
    border-radius: 6px; overflow: hidden; box-shadow: 0 40px 90px rgba(0,0,0,.5);
    transform: translateY(24px) rotate(2deg); opacity: 0;
    transition: transform .9s var(--ease-luxe) .35s, opacity .6s ease .35s;
  }
  .mmenu.on .mmenu-preview { transform: none; opacity: 1; }
  .mmenu-preview::after { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(203,163,95,.35); border-radius: 3px; pointer-events: none; }
  .mmenu-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform 1.2s var(--ease-luxe); }
  .mmenu-preview img.on { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mmenu { transition: none; clip-path: none; }
  .mmenu-nav a span { transform: none; transition: none; }
  .mmenu-track { animation: none; }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .header-phone { padding: 9px 14px; font-size: 13px; }
  /* hero: кнопки переносятся, «с себя» не рвётся, карточка компактнее */
  #hero .hero-actions, .hero-frame--top .hero-actions { flex-wrap: wrap; gap: 18px 26px; }
  .hero-title .l2 { margin-left: 0; }
  .hero-title .accent { white-space: nowrap; }
  .hc-slide { gap: 16px; }
  .hc-photo img { width: 104px; height: 104px; }
  .hc-txt { gap: 6px; }
  .hc-txt b { font-size: 20px; }
  .hc-txt > span:last-child { font-size: 13px; }
  .hc-foot { position: static; margin-top: 12px; justify-content: flex-end; }
  /* обо мне: имя не наезжает на список */
  .cover-name { margin-top: 28px; }
  .cover-name .cn2 { margin-left: 8vw; }
  /* страница аппарата: навигация по секциям — одна строка со скроллом, тап-цели 44px */
  .secnav { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 22px; padding: 4px var(--pad); scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: none; border-left: 0; border-right: 0; }
  .secnav::-webkit-scrollbar { display: none; }
  .secnav a { flex: none; white-space: nowrap; padding: 14px 0; }
  .buybar { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .header-phone { display: none; } }

/* ---------- страницы аппаратов v3: светлая тема, манифест, патент, сравнение, сертификат ---------- */
.secnav { background: color-mix(in srgb, var(--bg) 86%, transparent); }
.secnav a { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; opacity: .8; }
.buybar { background: color-mix(in srgb, var(--bg) 90%, transparent); }
.bb-name { color: var(--fg); }
.bb-price { color: var(--crimson); }
.depth-row { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.depth-row:nth-child(2) { background: rgba(203, 163, 95, .12); }
.depth-row:nth-child(4) { background: rgba(138, 0, 37, .07); }
.depth-row:nth-child(5) { background: rgba(138, 0, 37, .13); }
.dev-page .device-frame { box-shadow: 0 30px 70px rgba(46, 26, 30, .2); }
.dev-page .pay-panel { background: #fffdf9; border: 1px solid var(--hairline); box-shadow: 0 24px 60px rgba(46, 26, 30, .1); }
.dev-page .dev-cta::before { background: radial-gradient(820px 460px at 50% 55%, rgba(138, 0, 37, .14), transparent 62%); }
.dev-page .dev-thumbs button { background: #fff; }
.dev-manifest {
  max-width: 1360px; margin: 0 auto;
  padding: clamp(40px, 6vw, 80px) var(--pad) 0;
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic;
  font-size: clamp(21px, 2.3vw, 32px); line-height: 1.4;
  max-width: calc(1360px - 2 * var(--pad)); text-wrap: balance;
}
.depth-patent {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--gold); border-radius: 6px;
  background: rgba(203, 163, 95, .08);
  font-size: 13px; line-height: 1.6;
}
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); max-width: 1000px; }
.vs-col { display: block; border: 1px solid var(--hairline); border-radius: 8px; padding: clamp(22px, 2.6vw, 34px); transition: border-color .35s, transform .35s var(--ease-exp); position: relative; }
a.vs-col:hover { border-color: var(--crimson); transform: translateY(-3px); }
.vs-col.is-this { border-color: var(--gold); }
.vs-col.is-this::after {
  content: 'Вы здесь'; position: absolute; top: -10px; left: 18px;
  font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 100px; background: var(--gold); color: #121013;
}
.vs-col b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(19px, 1.9vw, 25px); margin-bottom: 10px; }
.vs-col p { font-size: 14px; line-height: 1.65; opacity: .75; }
a.vs-col::before { content: 'Открыть страницу →'; float: right; font-family: var(--caps); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
/* 6 табов до/после */
.ba-thumbs { grid-template-columns: repeat(6, 1fr); }
/* подпись кейса не меняет высоту блока — табы не прыгают при переключении */
.ba-cap { min-height: 2.9em; }
@media (max-width: 700px) {
  .ba-thumbs { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
  .ba-thumb:nth-child(n+4) { display: flex; } /* как верхний ряд: flex-центровка цифры и подписи */
  .ba-thumb span { white-space: nowrap; }
  .ba-cap { min-height: 4.4em; margin-top: 14px; font-size: 16px; }
}
/* бургер и шапка поверх тёмного меню на светлых страницах */
body.menu-open #header { color: var(--ivory); }
body.menu-open .burger span { background: var(--ivory); }
body.menu-open .logo-name { color: var(--ivory); }
body.menu-open .header-phone { color: var(--ivory); border-color: rgba(203, 163, 95, .4); }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }


/* ---------- футер v2: финальный аккорд ---------- */
footer {
  position: relative; z-index: 2;
  display: block; padding: 0; border: 0; opacity: 1; max-width: none;
  background-image: linear-gradient(90deg, transparent 4%, var(--gold) 50%, transparent 96%);
  background-repeat: no-repeat; background-size: 100% 1px; background-position: top;
  transition: none;
}
.dev-page footer { max-width: none; margin: 0; padding: 0; }
.foot-inner { max-width: calc(1360px - 2 * var(--pad)); margin: 0 auto; padding: clamp(44px, 6vw, 80px) var(--pad) clamp(26px, 3vw, 40px); }
.dev-page .foot-inner { padding-left: 0; padding-right: 0; }
@media (max-width: 1440px) { .dev-page .foot-inner { padding-left: var(--pad); padding-right: var(--pad); } }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  padding-bottom: clamp(30px, 4vw, 50px);
}
.foot-brand .logo { display: inline-flex; align-items: center; gap: 14px; }
.foot-brand .logo-mark { width: 46px; height: 46px; font-size: 15px; }
.foot-tag {
  margin-top: 16px;
  font-family: 'Cormorant Garamond', var(--serif); font-style: italic;
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.35;
  opacity: .75; max-width: 22ch;
}
.foot-h { font-family: var(--caps); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.foot-col { display: grid; gap: 10px; justify-items: start; align-content: start; }
.foot-col a {
  font-size: 15px; opacity: .75; position: relative;
  transition: opacity .3s, color .3s, transform .35s var(--ease-exp);
}
.foot-col a:hover { opacity: 1; color: var(--gold); transform: translateX(6px); }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding-top: clamp(22px, 3vw, 30px);
}
.foot-fine { display: grid; gap: 4px; }
.foot-fine p { font-size: 12px; opacity: .55; }
.foot-fine p + p { font-size: 11px; opacity: .4; }
.dev-credit {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 20px; border: 1px solid var(--hairline); border-radius: 100px;
  position: relative; overflow: hidden; flex: none;
  transition: border-color .35s, background .35s, color .35s, transform .35s var(--ease-exp);
}
.dev-credit .dc-label { font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; transition: opacity .3s, color .3s; }
.dev-credit .dc-name { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 16px; color: var(--gold); transition: color .3s; }
.dev-credit::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 60%;
  background: linear-gradient(105deg, transparent, rgba(203, 163, 95, .25), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-exp);
}
.dev-credit:hover { border-color: var(--crimson); background: var(--crimson); transform: translateY(-2px); }
.dev-credit:hover .dc-label { opacity: .8; color: #f4efe8; }
.dev-credit:hover .dc-name { color: #fff; }
.dev-credit:hover::before { left: 120%; }
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col a { padding: 4px 0; }
  .foot-bottom { flex-direction: column-reverse; align-items: stretch; text-align: center; }
  .dev-credit { justify-content: center; }
  .foot-fine { text-align: center; }
}
/* колонки футера едины: без капса из старого правила footer nav a */
footer .foot-col a { font-family: var(--sans); font-size: 15px; letter-spacing: 0; text-transform: none; opacity: .75; }
footer .foot-col a:hover { opacity: 1; color: var(--gold); }

/* ---------- футер v3: шторка-reveal, гигант с заливкой, часы, наверх ---------- */
main { position: relative; z-index: 1; background: var(--bg); transition: background-color var(--morph); }
footer#footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  background-color: var(--black);
  background-image: radial-gradient(900px 460px at 50% 0%, rgba(138, 0, 37, .22), transparent 62%);
}
body.no-reveal footer#footer { position: static; }
.foot-giant {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(52px, 14.6vw, 264px); line-height: 1;
  letter-spacing: .02em; white-space: nowrap;
  text-align: center;
  padding-top: clamp(36px, 5vw, 70px);
  color: transparent; -webkit-text-stroke: 1px rgba(244, 239, 232, .22);
  background: linear-gradient(0deg, var(--gold), #e8c98c) no-repeat 0 100% / 100% 0%;
  -webkit-background-clip: text; background-clip: text;
  transition: background-size .25s ease-out; /* сглаживание скролл-заливки */
  user-select: none; pointer-events: none;
}
footer#footer.lit .foot-giant { background-size: 100% 100%; }
footer#footer .foot-inner { color: #f4efe8; }
footer#footer { color: rgba(244, 239, 232, .9); }
footer#footer .foot-h { color: var(--gold); }
footer#footer .foot-col a { opacity: .7; }
footer#footer .foot-col a:hover { opacity: 1; }
footer#footer .logo-name { color: #f4efe8; }
.foot-top { position: relative; }
.to-top {
  position: absolute; right: 0; top: 4px;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid rgba(203, 163, 95, .35); background: none; color: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .35s, color .35s, border-color .35s, transform .35s var(--ease-exp);
}
.to-top:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; transform: translateY(-4px); }
footer#footer .foot-fine p { color: rgba(244, 239, 232, .45); }
footer#footer .foot-fine p + p { color: rgba(244, 239, 232, .3); }
footer#footer .dev-credit { border-color: rgba(203, 163, 95, .3); }
@media (max-width: 860px) {
  .foot-giant { font-size: 13.4vw; padding-top: 40px; }
  .to-top { position: static; order: 3; justify-self: center; margin: 0 auto; }
  .foot-top { display: grid; }
}
/* футер v3.1: доводка после ревью */
#contacts { padding-bottom: clamp(70px, 9vw, 120px); } /* воздух после ссылок (гигант ушёл в футер) */
@media (max-width: 860px) {
  .foot-giant { font-size: 14vw; }
  .to-top { grid-column: 1 / -1; }
}

/* ---------- запрет горизонтального дрейфа страницы ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; }
.shutter { overflow: hidden; } /* фото в scale(1.15) до reveal не расширяют страницу */

/* ---------- футер v3.2: полная заливка хвостов букв + слоган по дизайн-системе ---------- */
.foot-giant { padding-bottom: .16em; margin-bottom: -.04em; } /* фон захватывает выносные элементы (хвост y) */
.foot-tag {
  margin-top: clamp(20px, 2.4vw, 30px);
  font-family: var(--serif); font-style: normal;
  font-size: clamp(26px, 2.5vw, 38px); line-height: 1.22;
  opacity: 1; max-width: 15ch;
  color: #f4efe8;
}
.foot-tag span { display: block; }
.foot-tag em { display: block; font-family: 'Cormorant Garamond', var(--serif); font-style: italic; color: var(--rose); }

/* ---------- футер v3.3: без дубля логотипа, воздух на мобиле ---------- */
.foot-tag { margin-top: 0; }
@media (max-width: 860px) {
  .foot-giant { padding-top: 52px; }
  .foot-inner { padding-top: clamp(30px, 8vw, 44px); }
  .foot-top { row-gap: 38px; padding-bottom: 38px; }
  .foot-tag { font-size: clamp(28px, 7.4vw, 34px); }
}

/* ---------- FAQ: плавное раскрытие ---------- */
.faq .faq-body { overflow: hidden; height: 0; transition: height .5s var(--ease-exp); }
.faq .faq-body p { opacity: 0; transform: translateY(-6px); transition: opacity .4s ease .06s, transform .4s var(--ease-exp) .06s; }
.faq details.is-open .faq-body p { opacity: .75; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .faq .faq-body, .faq .faq-body p, details.contra .contra-body { transition: none; }
}

/* ---------- мобильная диета главной ---------- */

/* ---------- hero-карточка на мобиле: три плитки сразу, активная подсвечена ---------- */
@media (max-width: 860px) {
  .hero-card { padding: 10px; border-radius: 18px; }
  .hc-track { position: static; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .hc-slide {
    position: static; inset: auto; opacity: 1; visibility: visible;
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 8px; border-radius: 12px; border: 1px solid transparent;
    transition: border-color .5s ease, background .5s ease, transform .5s var(--ease-exp);
  }
  .hc-slide.is-on { border-color: var(--gold); background: rgba(255, 255, 255, .06); transform: translateY(-3px); }
  .hc-photo { width: 100%; border-radius: 9px; }
  .hc-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .hc-txt { gap: 2px; }
  .hc-txt b { font-size: 13px; line-height: 1.2; }
  .hc-txt > span:last-child { display: none; }
  .hc-arrow, .hc-foot { display: none; }
}

/* ---------- hero-карточка на мобиле v2: expanding cards + stories-прогресс ---------- */
@media (max-width: 860px) {
  .hero-card { padding: 8px; border-radius: 20px; }
  .hc-track { display: flex; gap: 6px; height: 178px; min-height: 0; }
  .hc-slide {
    position: relative; inset: auto; flex: 1 1 0; min-width: 0;
    display: block; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
    background: #1b181b; opacity: 1; visibility: visible; transform: none;
    transition: flex .8s var(--ease-luxe);
  }
  .hc-slide.is-on { flex: 2.7 1 0; border: 0; background: #1b181b; transform: none; }
  .hc-photo { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
  .hc-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transform: scale(1.04); transition: transform 5.2s linear; }
  .hc-slide.is-on .hc-photo img { transform: scale(1.16); }
  .hc-slide::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(18,16,19,.05) 30%, rgba(18,16,19,.86) 100%);
  }
  .hc-txt { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; gap: 3px; }
  .hc-txt b { display: block; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: font-size .5s ease; }
  .hc-slide.is-on .hc-txt b { font-size: 17px; white-space: normal; }
  .hc-txt > span:last-child { display: none; font-size: 11px; line-height: 1.3; opacity: .8; }
  .hc-slide.is-on .hc-txt > span:last-child { display: block; }
  .hc-arrow { display: none; }
  .hc-slide.is-on .hc-arrow {
    display: flex; position: absolute; right: 10px; top: 18px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
  }
  /* stories-прогресс: заполняется за 5 с — ровно цикл смены */
  .hc-slide::before {
    content: ''; position: absolute; left: 10px; right: 10px; top: 8px; height: 2px; border-radius: 2px; z-index: 3;
    background: rgba(255,255,255,.22);
  }
  .hc-slide.is-on::before {
    background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 0 / 0% 100%, rgba(255,255,255,.22);
    animation: hcStory 5s linear forwards;
  }
  @keyframes hcStory { to { background-size: 100% 100%, auto; } }
  .hc-foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-slide.is-on::before { animation: none; background: var(--gold); }
  .hc-photo img { transition: none; }
}
/* узкие плитки: подпись вертикальным корешком, без обрезки */
@media (max-width: 860px) {
  .hc-slide:not(.is-on) .hc-txt {
    left: auto; right: auto; bottom: 12px; top: auto;
    inset-inline-start: 50%; transform: translateX(-50%);
    writing-mode: vertical-rl; rotate: 180deg;
    height: calc(100% - 44px); display: flex; align-items: center; justify-content: flex-start;
  }
  .hc-slide:not(.is-on) .hc-txt b {
    font-size: 11px; letter-spacing: .08em; white-space: nowrap; overflow: visible; text-overflow: clip;
  }
}
/* корешки v2: обёртка центрирует, поворачивается только текст */
@media (max-width: 860px) {
  .hc-slide:not(.is-on) .hc-txt {
    inset: 22px 0 12px 0; left: 0; right: 0; top: 22px; bottom: 12px;
    transform: none; rotate: none; writing-mode: horizontal-tb; height: auto;
    display: flex; align-items: center; justify-content: center;
  }
  .hc-slide:not(.is-on) .hc-txt b {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font-size: 11px; letter-spacing: .08em; white-space: nowrap; max-height: 100%;
  }
}

/* ---------- hero-галерея на мобиле v3: мягкая смена, 7 с на слот ---------- */
@media (max-width: 860px) {
  .hero-card .hc-slide { transition: flex 1.25s cubic-bezier(.45, .05, .2, 1); }
  .hero-card .hc-photo img { transition: transform 7.4s linear; }
  .hero-card .hc-slide.is-on::before { animation-duration: 7s; }
  /* горизонтальный текст всегда горизонтален, появляется/тает по opacity */
  .hero-card .hc-slide .hc-txt, .hero-card .hc-slide:not(.is-on) .hc-txt {
    inset: auto 12px 12px 12px; left: 12px; right: 12px; bottom: 12px; top: auto;
    height: auto; display: grid; gap: 3px; justify-items: start;
    writing-mode: horizontal-tb; transform: translateY(8px); rotate: none;
    opacity: 0; pointer-events: none;
    transition: opacity .45s ease, transform .7s cubic-bezier(.45, .05, .2, 1);
  }
  .hero-card .hc-slide.is-on .hc-txt { opacity: 1; transform: none; transition-delay: .5s; }
  .hero-card .hc-slide .hc-txt b, .hero-card .hc-slide:not(.is-on) .hc-txt b {
    writing-mode: horizontal-tb; transform: none; font-size: 17px; letter-spacing: 0;
    white-space: normal; overflow: visible; max-height: none;
  }
  .hero-card .hc-slide .hc-txt > span:last-child { display: block; }
  /* стрелка — тоже растворяется */
  .hero-card .hc-slide .hc-arrow {
    display: flex; position: absolute; right: 10px; top: 18px; z-index: 2;
    width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff;
    opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .6s cubic-bezier(.45, .05, .2, 1);
  }
  .hero-card .hc-slide.is-on .hc-arrow { opacity: 1; transform: none; transition-delay: .55s; }
  /* корешок — псевдоэлемент на фото, тает при раскрытии */
  .hero-card .hc-photo::after {
    content: attr(data-title); position: absolute; left: 50%; top: 50%; z-index: 2;
    transform: translate(-50%, -50%) rotate(180deg); writing-mode: vertical-rl;
    font-family: var(--serif); font-size: 11px; letter-spacing: .08em; white-space: nowrap; color: #fdfbf8;
    text-shadow: 0 1px 8px rgba(18,16,19,.6);
    opacity: 1; transition: opacity .45s ease .55s;
  }
  .hero-card .hc-slide.is-on .hc-photo::after { opacity: 0; transition-delay: 0s; }
}

/* ---------- до/после: плавная смена пары, hover только для мыши ---------- */
.ba-pane img { transition: opacity .55s ease; } /* старое притухание больше не нужно */
@media (hover: none) {
  .ba-thumb:hover { transform: none; opacity: .7; }
  .ba-thumb.on, .ba-thumb.on:hover { opacity: 1; }
  .ba-thumb:active { transform: scale(.97); }
}

/* ---------- ФИЛОСОФИЯ v2: манифест-караоке + карточки принципов ---------- */
#philosophy .manifesto {
  margin: clamp(22px, 3vw, 36px) 0 0;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(32px, 5vw, 72px); line-height: 1.12; letter-spacing: -.005em;
  max-width: 19ch; text-wrap: balance;
}
.manifesto .w { display: inline-block; opacity: .42; transition: opacity .45s ease, color .45s ease; }
.manifesto .w.on { opacity: 1; }
.manifesto em { font-style: italic; font-family: 'Cormorant Garamond', var(--serif); color: inherit; }
.manifesto em.w.on { color: var(--crimson); }
.phil-lead {
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 58ch; font-size: 16px; line-height: 1.75; opacity: .8;
}
.phil-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(44px, 6vw, 80px);
}
.phil-card {
  position: relative; border: 1px solid var(--hairline); border-radius: 10px;
  padding: clamp(24px, 2.8vw, 40px) clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 40px);
  background: rgba(255, 255, 255, .35);
  transition: border-color .45s ease, transform .6s var(--ease-exp), box-shadow .6s ease, background .45s ease;
}
.phil-card .pn {
  display: block; font-family: var(--serif); font-size: clamp(64px, 6.6vw, 104px); line-height: .9;
  color: transparent; -webkit-text-stroke: 1px var(--crimson);
  transition: color .6s ease, -webkit-text-stroke-color .6s ease;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.phil-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.25; margin-bottom: 12px; }
.phil-card p { font-size: 15px; line-height: 1.7; opacity: .74; }
.phil-card::after {
  content: ''; position: absolute; left: clamp(22px, 2.4vw, 34px); right: clamp(22px, 2.4vw, 34px); bottom: 0;
  height: 2px; background: var(--crimson); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-exp);
}
@media (hover: hover) {
  .phil-card:hover { transform: translateY(-6px); border-color: var(--crimson); box-shadow: 0 30px 60px rgba(46, 26, 30, .12); background: #fffdf9; }
  .phil-card:hover .pn { color: var(--crimson); }
  .phil-card:hover::after { transform: scaleX(1); }
}
.phil-card.is-active { border-color: var(--crimson); background: #fffdf9; }
.phil-card.is-active .pn { color: var(--crimson); }
.phil-card.is-active::after { transform: scaleX(1); }
@media (max-width: 860px) {
  .phil-cards {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad));
    padding: 6px var(--pad) 26px; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  .phil-cards::-webkit-scrollbar { display: none; }
  .phil-card { flex: 0 0 78vw; max-width: 340px; scroll-snap-align: center; scroll-snap-stop: always; }
  .phil-card .pn { font-size: 72px; }
}

/* ---------- философия v2.1: карточки-ссылки, индикатор ленты, без полоски ---------- */
.phil-card::after { display: none; }
.phil-card { display: block; color: inherit; }
.pc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: clamp(18px, 2vw, 26px); }
.pc-eyebrow { font-family: var(--caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--crimson); opacity: .85; }
.pc-go {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  border: 1px solid var(--hairline); color: var(--crimson);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .5s var(--ease-exp);
}
.phil-card:hover .pc-go, .phil-card.is-active .pc-go { background: var(--crimson); border-color: var(--crimson); color: #fff; transform: translateX(3px); }
.phil-card .pn { margin-bottom: clamp(14px, 1.6vw, 22px); }
.phil-ind { display: none; }
@media (max-width: 860px) {
  .phil-ind { display: flex; gap: 6px; justify-content: center; margin-top: -6px; }
  .phil-ind i { width: 26px; height: 2px; border-radius: 2px; background: var(--hairline); transition: background .4s ease, width .4s var(--ease-exp); }
  .phil-ind i.on { width: 44px; background: var(--crimson); }
}

/* ---------- УСЛУГИ на мобиле: карточки-«двери», активная — бордовая ---------- */
@media (max-width: 860px) {
  .service-rows { border-top: 0; display: grid; gap: 14px; }
  .service-row {
    display: block; position: relative; overflow: visible;
    padding: 22px 22px 22px; border: 1px solid var(--hairline); border-radius: 14px;
    background: rgba(255, 255, 255, .35);
    transition: background .6s ease, border-color .6s ease, transform .6s var(--ease-exp), box-shadow .6s ease;
  }
  .service-row::before { display: none; }
  .service-row .sn { display: block; font-size: 15px; margin-bottom: 40px; }
  .service-row .fmt { position: absolute; top: 20px; right: 20px; font-size: 9px; padding: 7px 13px; }
  .service-row h3 { font-size: 26px; line-height: 1.12; margin-bottom: 12px; }
  .service-row p { max-width: none; font-size: 14.5px; margin-bottom: 18px; }
  .service-row .rcol { display: contents; }
  .service-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 13px 18px; border: 1px solid var(--crimson); border-radius: 100px;
    font-size: 10px; letter-spacing: .18em;
    transition: background .5s ease, color .5s ease, border-color .5s ease;
  }
  /* активная (в центре экрана) — как hover на десктопе */
  .service-row.is-active {
    background: var(--crimson); border-color: var(--crimson);
    box-shadow: 0 26px 60px rgba(138, 0, 37, .25); transform: translateY(-2px);
  }
  .service-row.is-active .sn, .service-row.is-active h3, .service-row.is-active p { color: #fff; }
  .service-row.is-active p { opacity: .85; }
  .service-row.is-active .fmt { color: #fff; border-color: rgba(255, 255, 255, .5); }
  .service-row.is-active .service-cta { background: #fff; color: var(--crimson); border-color: #fff; }
}

/* ---------- УСЛУГИ на мобиле v2: непрерывная «шторка» заливки, без рывков ---------- */
@media (max-width: 860px) {
  .service-rows { gap: 16px; }
  .service-row {
    --f: 0; /* 0..1 — степень заливки, ставит JS по близости к центру экрана */
    overflow: hidden; border-radius: 16px; padding: 24px;
    background: rgba(255, 255, 255, .35);
    border: 1px solid color-mix(in srgb, var(--crimson) calc(var(--f) * 100%), var(--hairline));
    box-shadow: 0 22px 54px rgba(138, 0, 37, calc(var(--f) * .22));
    transform: none; transition: none;
  }
  .service-row::before {
    content: ''; display: block; position: absolute; inset: 0; z-index: 0;
    background: var(--crimson);
    transform: scaleY(var(--f)); transform-origin: bottom;
    transition: transform .12s linear; /* лишь сглаживание между кадрами скролла */
  }
  .service-row.is-active { background: rgba(255, 255, 255, .35); border-color: var(--crimson); box-shadow: 0 22px 54px rgba(138, 0, 37, .22); transform: none; }
  .service-row > * { position: relative; z-index: 1; }
  .service-row .sn, .service-row h3, .service-row p, .service-row .fmt, .service-cta {
    transition: color .55s ease, border-color .55s ease, background .55s ease, opacity .55s ease;
  }
  .service-row .sn { margin-bottom: 42px; }
  .service-row h3 { font-size: 27px; }
  .service-cta { padding: 14px 20px; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .service-row::before { transition: none; }
}
/* услуги v2.1: заливка через прозрачность всей карточки, а не шторкой — текст читаем на любом этапе */
@media (max-width: 860px) {
  .service-row::before { transform: none; opacity: var(--f); transition: opacity .12s linear; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) { .service-row::before { transition: none; } }

/* ---------- УСЛУГИ на мобиле v3: бордовая шторка выезжает снизу под кнопкой ---------- */
@media (max-width: 860px) {
  .service-row {
    padding: 24px 24px 0; overflow: hidden;
    background: rgba(255, 255, 255, .35);
    border: 1px solid var(--hairline); box-shadow: none;
    transition: border-color .6s ease;
  }
  .service-row.is-active { border-color: var(--crimson); box-shadow: none; }
  /* шторка: ровно высота нижней полосы с кнопкой */
  .service-row::before {
    inset: auto 0 0 0; height: 58px; opacity: 1;
    transform: translateY(calc((1 - var(--f)) * 100%));
    transition: transform .14s linear;
  }
  .service-row .sn, .service-row h3, .service-row p { color: inherit; }
  .service-row.is-active .sn, .service-row.is-active h3, .service-row.is-active p { color: inherit; }
  .service-row.is-active p { opacity: .74; }
  .service-row.is-active .fmt { color: inherit; border-color: var(--hairline); }
  .service-row p { margin-bottom: 20px; }
  .service-cta {
    margin: 0 -24px; padding: 0 24px; height: 58px; border: 0; border-radius: 0;
    border-top: 1px solid var(--hairline);
    color: var(--crimson); background: transparent;
    transition: color .45s ease, border-color .45s ease;
  }
  .service-row.is-active .service-cta { color: #fff; background: transparent; border-color: transparent; }
}
@media (max-width: 860px) { .service-row .service-cta { position: relative; z-index: 1; } }

/* ---------- УСЛУГИ на мобиле v3.1: шторка — одна CSS-анимация, без покадрового JS ---------- */
@media (max-width: 860px) {
  .service-row::before {
    transform: translateY(100%);
    transition: transform .75s cubic-bezier(.22, .8, .3, 1);
    will-change: transform;
  }
  .service-row.is-active::before { transform: translateY(0); }
  .service-row { transition: border-color .75s ease; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .service-row::before { transition: none; }
}

/* ---------- витрина коллекции на мобиле: без пустоты, имя в одну строку ---------- */
@media (max-width: 860px) {
  .featured { padding-top: 10px; gap: 18px; }
  .featured-side {
    position: static; writing-mode: horizontal-tb; transform: none;
    display: block; margin: 0 0 6px;
  }
  .featured-name {
    position: static; display: block; margin: 0 0 8px;
    font-size: clamp(40px, 12.5vw, 64px); line-height: 1;
    white-space: nowrap;
  }
  .featured-name .fn2 { display: inline; margin-left: .18em; color: transparent; -webkit-text-stroke: 1px var(--rose); }
  .featured-photo { width: min(72vw, 340px); margin: 6px auto 0; }
}

/* ---------- сетка коллекции: линии рамками, а не фоном — скрытые карточки не «коричневые» ---------- */
.type-grid { gap: 0; background: transparent; border: 1px solid var(--hairline); }
.type-cell { border-bottom: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
.type-cell:nth-child(3n) { border-right: 0; }
.type-cell:nth-last-child(-n+3) { border-bottom: 0; }
@media (max-width: 1020px) and (min-width: 561px) {
  .type-cell:nth-child(3n) { border-right: 1px solid var(--hairline); }
  .type-cell:nth-child(2n) { border-right: 0; }
  .type-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .type-cell:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 560px) {
  .type-cell, .type-cell:nth-child(3n) { border-right: 0; }
  .type-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--hairline); }
  .type-cell:last-child { border-bottom: 0; }
}
.type-cell.reveal { transition: opacity .7s ease, transform .9s var(--ease-exp); }
.cell-photo.shutter { overflow: hidden; }

/* ---------- бренды: плавное раскрытие по шеврону, без пилюли ---------- */
@media (max-width: 860px) { /* старое скрытие отключено */
}
/* ---------- мягкое проявление ленивых фото при загрузке ---------- */
img[loading="lazy"]:not(.alt) { opacity: 0; transition: opacity .7s ease; }
img[loading="lazy"]:not(.alt).ld { opacity: 1; }
.type-cell.reveal { transition: opacity 1s ease, transform 1.1s var(--ease-exp); }

/* ---------- экспертная плавность: аккордеоны, лайтбокс, кроссфейды ---------- */
a, button, summary, .ba-thumb, .shot-item, .pm-item, .ba-mini { -webkit-tap-highlight-color: transparent; }
.faq summary, details.contra summary { user-select: none; -webkit-user-select: none; outline: none; }
.faq summary:focus-visible, details.contra summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.faq summary:focus-visible, details.contra summary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }
/* шевроны вместо палок и плюсов */
.faq summary::after, details.contra summary::after {
  content: ''; width: 14px; height: 9px; flex: none; margin-left: auto; align-self: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23cba35f' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  font-size: 0; color: transparent;
  transform: rotate(0deg); transition: transform .55s var(--ease-exp);
}
.faq details.is-open summary::after, details.contra.is-open summary::after { transform: rotate(180deg); }
/* раскрытие — чистый CSS grid-переход, без измерения высоты */
.faq .faq-body, details.contra .contra-body {
  display: grid; grid-template-rows: 0fr; height: auto; overflow: visible;
  transition: grid-template-rows .55s var(--ease-exp);
}
.faq .faq-body > p, details.contra .contra-body > ul { overflow: hidden; min-height: 0; }
.faq details.is-open .faq-body, details.contra.is-open .contra-body { grid-template-rows: 1fr; }
.faq .faq-body p { transition: opacity .45s ease .1s, transform .45s var(--ease-exp) .1s; }
details.contra .effects-cols { transition: opacity .45s ease .1s, transform .45s var(--ease-exp) .1s; }
/* лайтбокс: сцена фиксированного размера, превью → полноразмер кроссфейдом, мягкий зум */
.lightbox .lb-stage { position: relative; transform: scale(.96); transition: transform .5s var(--ease-luxe); }
.lightbox.on .lb-stage { transform: none; }
.lightbox .lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 6px; }
.lightbox .lb-hi { opacity: 0; transition: opacity .5s ease; }
.lightbox .lb-hi.on { opacity: 1; } /* старое затухание отключено — теперь кроссфейд */
.device-frame { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .faq .faq-body, details.contra .contra-body, .faq summary::after, details.contra summary::after, .lightbox .lb-stage { transition: none; }
}
/* нижний отступ ответа — на контейнере (иначе padding p не даёт схлопнуться до 0) */
.faq .faq-body > p { padding-bottom: 0; }
.faq .faq-body { padding-bottom: 0; transition: grid-template-rows .55s var(--ease-exp), padding-bottom .55s var(--ease-exp); }
.faq details.is-open .faq-body { padding-bottom: 26px; }
details.contra .contra-body > ul { padding-bottom: 0; }
details.contra .contra-body { padding-bottom: 0; transition: grid-template-rows .55s var(--ease-exp), padding-bottom .55s var(--ease-exp); }
details.contra.is-open .contra-body { padding-bottom: 26px; }

/* ============ ЭКСПЕРТНЫЙ ПРОХОД: низ страниц аппаратов, шапка, прелоадер, переходы, документы ============ */

/* --- низ страницы аппарата: крем плавно уходит в тёмный, навигация тёмная --- */
.dev-page .dev-cta {
  padding-bottom: clamp(140px, 18vw, 230px);
  background: linear-gradient(180deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--black) 55%, var(--bg)) 70%, var(--black) 100%);
  max-width: none;
}
.dev-page .dev-cta::before { background: radial-gradient(820px 460px at 50% 40%, rgba(138, 0, 37, .18), transparent 62%); }
.dev-page .dev-cta .invite, .dev-page .dev-cta .link-arrow { color: var(--ivory); }
.dev-page .dev-nav {
  max-width: none; margin: 0; border: 0; border-top: 1px solid rgba(203, 163, 95, .22);
  background: var(--black); color: var(--ivory);
  padding-inline: max(var(--pad), calc((100vw - (1360px - 2 * var(--pad))) / 2));
}
.dev-page .dev-nav a { color: var(--ivory); padding-inline: 0; }
.dev-page .dev-nav a + a { border-left: 0; }
.dev-page .dev-nav a:hover { background: transparent; }
.dev-page .dev-nav a:hover .nm { color: var(--gold); }
.dev-page .dev-nav .nm { transition: color .4s ease; }
.dev-page .dev-nav .dir { opacity: .55; }
@media (hover: none) { .dev-nav a:hover { background: transparent; } }

/* --- шапка: мягкое проявление подложки, скругления премиум-класса --- */
#header { transition: color var(--morph), padding .6s cubic-bezier(.22, .8, .3, 1); background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--hairline);
  opacity: 0; transition: opacity .7s ease, background-color var(--morph);
}
#header.scrolled::before { opacity: 1; }
.header-phone { border-radius: 100px; padding: 10px 20px; }
.burger { border-radius: 14px; }
.mmenu-foot .btn-fill, .buybar .btn-fill { border-radius: 100px; }

/* --- прелоадер: мягче, с «горбиком» при уходе --- */
#loader {
  left: -12vw; right: -12vw;
  border-radius: 0 0 50% 50% / 0 0 9vh 9vh;
  transition: transform 1.15s cubic-bezier(.76, 0, .24, 1), visibility 1.15s;
}
body.loaded #loader { transform: translateY(-115%); }
.loader-mark, .loader-count { transition: opacity .45s ease, transform .6s ease; }
body.loaded .loader-mark, body.loaded .loader-count { opacity: 0; transform: translateY(-16px); }
body.via-curtain .loader-count { display: none; }
body.via-curtain #loader { transition-duration: .95s; }
/* шторка перехода между страницами: поднимается снизу с дугой */
.page-curtain {
  position: fixed; left: -12vw; right: -12vw; bottom: -14vh; height: 128vh; z-index: 300;
  background: var(--black);
  border-radius: 50% 50% 0 0 / 9vh 9vh 0 0;
  transform: translateY(112%);
  transition: transform .72s cubic-bezier(.76, 0, .24, 1);
  pointer-events: none;
}
.page-curtain.on { transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .page-curtain { display: none; } }

/* --- футер: четвёртая колонка «Документы» --- */
.foot-top { grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); }
.foot-fine p + p + p { font-size: 11px; opacity: .4; max-width: 62ch; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } .foot-fine p + p + p { max-width: none; } }

/* --- страницы документов --- */
.doc { max-width: 780px; margin: 0 auto; padding: clamp(130px, 16vw, 180px) var(--pad) clamp(80px, 10vw, 140px); }
.doc .kicker { margin-bottom: 18px; }
.doc h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.1; margin-bottom: 14px; text-wrap: balance; }
.doc .doc-meta { font-family: var(--caps); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .55; margin-bottom: clamp(30px, 4vw, 48px); }
.doc h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); margin: clamp(34px, 4vw, 52px) 0 14px; }
.doc p, .doc li { font-size: 15px; line-height: 1.8; opacity: .86; }
.doc p + p { margin-top: 12px; }
.doc ol, .doc ul { padding-left: 22px; margin: 10px 0; }
.doc li + li { margin-top: 6px; }
.doc a { color: var(--crimson); border-bottom: 1px solid rgba(138,0,37,.3); }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.doc td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.doc td:first-child { font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; width: 34%; }
/* текст приглашения лежит на уже тёмной части градиента; подложка шапки не проступает под открытым меню */
.dev-page .dev-cta { padding-top: clamp(200px, 24vw, 320px); background: linear-gradient(180deg, transparent 0%, var(--black) 42%); }
body.menu-open #header::before { opacity: 0; }
/* градиент низа: тёплые тёмные ступени вместо серой «полки» */
.dev-page .dev-cta {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(58, 26, 34, .10) 12%,
    rgba(46, 20, 28, .34) 24%,
    rgba(32, 16, 21, .66) 36%,
    rgba(22, 14, 18, .90) 48%,
    var(--black) 60%);
}
.doc .kicker { font-size: 10px; }
/* приход по шторке: одно непрерывное движение снизу вверх, без знака и счётчика */
body.via-curtain .loader-mark, body.via-curtain .loader-count { display: none; }
body.via-curtain #loader { transition: transform .9s cubic-bezier(.3, .75, .25, 1), visibility .9s; }
body.instant #loader { transition: none; }

/* ---------- страницы аппаратов: низ темнеет морфингом темы (как на главной), без градиентных слоёв ---------- */
.dev-page .dev-cta { background: none; padding-top: clamp(90px, 11vw, 160px); padding-bottom: clamp(90px, 11vw, 160px); }
.dev-page .dev-cta .invite, .dev-page .dev-cta .link-arrow { color: var(--fg); }
.dev-page .dev-nav { background: var(--bg); color: var(--fg); border-top-color: var(--hairline); transition: background-color var(--morph), color var(--morph), border-color var(--morph); }
.dev-page .dev-nav a { color: var(--fg); }
/* тёмная зона: панель оплаты — светлая «карточка» на тёмном, ссылки золотом */
body[data-theme="dark"] .dev-page .pay-panel, body[data-theme="dark"].dev-page .pay-panel { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border-color: transparent; }
body[data-theme="dark"].dev-page .dev-cta::before { background: radial-gradient(820px 460px at 50% 55%, rgba(138, 0, 37, .22), transparent 62%); }
.pay-panel { transition: box-shadow var(--morph), border-color var(--morph); }
/* цена в панели покупки в тёмной зоне — золотом, бордовый на чёрном не читается */
body[data-theme="dark"].dev-page .bb-price { color: var(--gold); }
.buybar * { transition: color var(--morph); }
/* флаги выставляются инлайн-скриптом в <head> до первого кадра: ни кружка, ни счётчика, ни второго запуска */
html.via-curtain .loader-mark, html.via-curtain .loader-count { display: none; }
html.via-curtain #loader { transition: transform .9s cubic-bezier(.3, .75, .25, 1), visibility .9s; }
html.instant #loader { display: none; }
/* возврат из bfcache: шторка опускается обратно */
.page-curtain.off { transform: translateY(112%); transition: transform .6s cubic-bezier(.22, .8, .3, 1); }
/* паспарту рамки фото аппарата всегда над слоем кроссфейда — иначе линия «мигает» при смене ракурса */
.device-frame::after { z-index: 4; }

/* ---------- переход между страницами по схеме RouteCurtain (The Rurik) ----------
   cover .5s → навигация под закрытой шторой → reveal .55s, кривая power2.inOut.
   Cross-document View Transition держит последний кадр старой страницы (чёрная штора),
   пока новая не отрисуется — между документами нет ни белого, ни пустого кадра. */
@view-transition { navigation: auto; }
::view-transition-group(root), ::view-transition-image-pair(root),
::view-transition-old(root), ::view-transition-new(root) { animation: none !important; mix-blend-mode: normal; }
.page-curtain { transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
html.via-curtain #loader { transition: transform .55s cubic-bezier(.65, 0, .35, 1), visibility .55s; }
/* элементы, «осевшие» под шторой: без анимаций появления и морфинга темы на первых кадрах */
.no-anim, .no-anim * { transition: none !important; animation: none !important; }
body.theme-instant, body.theme-instant main, body.theme-instant #header, body.theme-instant #header::before,
body.theme-instant .secnav, body.theme-instant .buybar, body.theme-instant .dev-nav, body.theme-instant .pay-panel { transition: none !important; }

/* ---------- «Что вы получите» v2: сетка эффектов + хронология результата ---------- */
.fx-grid {
  list-style: none; counter-reset: fx; max-width: 1100px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline);
  transition: border-color var(--morph);
}
.fx-grid li {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
  min-height: clamp(150px, 15vw, 200px);
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2vw, 28px) clamp(24px, 2.8vw, 36px);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  transition: border-color var(--morph), background-color .6s ease;
}
.fx-grid .fx-n {
  font-family: var(--serif); font-size: clamp(30px, 3.2vw, 44px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
  transition: color .6s ease;
}
.fx-grid .fx-t { font-family: var(--serif); font-size: clamp(17px, 1.45vw, 21px); line-height: 1.3; text-wrap: balance; max-width: 22ch; }
.fx-grid li::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 90% at 0% 100%, rgba(138, 0, 37, .07), transparent 60%);
  opacity: 0; transition: opacity .6s ease;
}
.fx-grid li::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--crimson));
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-exp);
}
@media (hover: hover) {
  .fx-grid li:hover .fx-n { color: var(--gold); }
  .fx-grid li:hover::before { opacity: 1; }
  .fx-grid li:hover::after { transform: scaleX(1); }
}
/* «хвост» сетки: последняя карточка растягивается, чтобы ряд был ровным */
.fx-grid.d3-1 li:last-child { grid-column: span 3; }
.fx-grid.d3-2 li:last-child { grid-column: span 2; }
.fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child { flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(18px, 3vw, 40px); min-height: 0; }
.fx-grid.d3-1 li:last-child .fx-t, .fx-grid.d3-2 li:last-child .fx-t { max-width: none; }
/* появление: сетка целиком видима, карточки — по одной */
.fx-grid.reveal { opacity: 1; transform: none; }
.fx-grid.reveal li { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .8s var(--ease-exp), border-color var(--morph), background-color .6s ease; transition-delay: calc(var(--i) * 65ms), calc(var(--i) * 65ms), 0s, 0s; }
.fx-grid.reveal.is-in li { opacity: 1; transform: none; }
.fx-grid.reveal .fx-n { opacity: 0; transition: opacity .6s ease calc(var(--i) * 65ms + .25s), color .6s ease; }
.fx-grid.reveal.is-in .fx-n { opacity: 1; }
@media (max-width: 900px) {
  .fx-grid { grid-template-columns: 1fr 1fr; }
  .fx-grid li { min-height: 128px; padding: 16px 14px 18px; gap: 18px; }
  .fx-grid .fx-n { font-size: 26px; }
  .fx-grid .fx-t { font-size: 15px; max-width: none; }
  .fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child { grid-column: auto; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 18px; min-height: 128px; }
  .fx-grid.d2-1 li:last-child { grid-column: span 2; flex-direction: row; align-items: center; gap: 22px; min-height: 0; }
}

/* хронология результата */
.tl-title { font-family: var(--serif); font-weight: 400; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.15; margin: clamp(48px, 6vw, 84px) 0 clamp(26px, 3.4vw, 44px); }
.tl-title em { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; color: var(--crimson); font-size: 1.12em; }
.tl.v2 { position: relative; max-width: 1100px; gap: clamp(24px, 3vw, 48px); padding-top: 38px; }
.tl.v2::before { content: ''; position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--hairline); transition: background-color var(--morph); }
.tl.v2::after { content: ''; position: absolute; left: 0; right: 0; top: 4px; height: 3px; background: linear-gradient(90deg, var(--gold), var(--crimson)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--ease-luxe) .15s; }
.tl.v2.is-in::after { transform: scaleX(1); }
.tl.v2 .tl-step { border-top: 0; padding-top: 0; }
.tl.v2 .tl-step::before { top: -38px; left: 0; width: 13px; height: 13px; margin-top: -1px; box-sizing: border-box; background: var(--bg); border: 2px solid var(--gold); transition: background-color .45s ease, transform .45s var(--ease-exp), border-color var(--morph); }
.tl.v2.is-in .tl-step::before { background: var(--gold); transform: scale(1.15); }
.tl.v2 .tl-step:nth-child(1)::before { transition-delay: .25s; }
.tl.v2 .tl-step:nth-child(2)::before { transition-delay: .95s; }
.tl.v2 .tl-step:nth-child(3)::before { transition-delay: 1.75s; }
.tl.v2 .tl-when { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 10px; }
.tl.v2 .tl-step:first-child .tl-when { color: var(--crimson); }
.tl.v2 .tl-step p { font-size: 15px; line-height: 1.7; opacity: .78; max-width: 34ch; }
.tl.v2 .tl-step { opacity: 0; transform: translateY(12px); transition: opacity .7s ease, transform .8s var(--ease-exp); }
.tl.v2.is-in .tl-step { opacity: 1; transform: none; }
.tl.v2.is-in .tl-step:nth-child(1) { transition-delay: .2s; } .tl.v2.is-in .tl-step:nth-child(2) { transition-delay: .9s; } .tl.v2.is-in .tl-step:nth-child(3) { transition-delay: 1.7s; }
.tl.v2.reveal { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .tl.v2 { grid-template-columns: 1fr; padding-top: 0; padding-left: 28px; gap: 30px; }
  .tl.v2::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .tl.v2::after { left: 5px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; transform: scaleY(0); transform-origin: top; }
  .tl.v2.is-in::after { transform: scaleY(1); }
  .tl.v2 .tl-step::before { top: 10px; left: -28px; margin-top: 0; }
  .tl.v2 .tl-step p { max-width: none; }
}
.fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child, .fx-grid.d2-1 li:last-child { justify-content: flex-start; }
@media (max-width: 900px) { .fx-grid.d2-1 li:last-child { justify-content: flex-start; } .fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child { justify-content: space-between; } .fx-grid.d3-1.d2-1 li:last-child, .fx-grid.d3-2.d2-1 li:last-child { justify-content: flex-start; } }
/* мгновенная тема под шторой: без переходов у всего, кроме самой шторы */
body.theme-instant *:not(#loader):not(.page-curtain), body.theme-instant *:not(#loader):not(.page-curtain)::before, body.theme-instant *:not(#loader):not(.page-curtain)::after { transition: none !important; }

/* ---------- «Что вы получите» v2.1: опрятная мобилка + заливка хронологии по скроллу ---------- */
/* планшет: номер и текст плотно сверху, без дыр */
@media (max-width: 900px) {
  .fx-grid li, .fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child { justify-content: flex-start; gap: 12px; min-height: 0; padding: 18px 16px 20px; }
  .fx-grid .fx-n { font-size: 24px; }
}
/* телефон: нумерованный список — ровные строки, золотые цифры проявляются по очереди */
@media (max-width: 600px) {
  .fx-grid { grid-template-columns: 1fr; border-left: 0; border-top: 1px solid var(--hairline); }
  .fx-grid li, .fx-grid.d2-1 li:last-child, .fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child, .fx-grid.d3-1.d2-1 li:last-child, .fx-grid.d3-2.d2-1 li:last-child {
    grid-column: auto; min-height: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 14px;
    padding: 15px 2px 15px 0; border-right: 0; border-bottom: 1px solid var(--hairline);
  }
  .fx-grid .fx-n { font-size: 19px; width: 34px; flex: none; color: transparent; -webkit-text-stroke: .7px var(--gold); transition: color .7s ease calc(var(--i) * 65ms + .2s); }
  .fx-grid.is-in .fx-n { color: var(--gold); }
  .fx-grid .fx-t { font-size: 17px; line-height: 1.32; max-width: none; text-wrap: pretty; }
  .fx-grid li::before { display: none; }
  .fx-grid li::after { height: 1px; bottom: -1px; }
  .fx-grid.reveal li { transform: translateY(10px); }
}

/* хронология: тонкая линия, заливка по скроллу (--tlp), точки загораются, когда заливка их проходит */
.tl.v2 { --tlp: 0; }
.tl.v2::before { top: 5px; height: 1px; }
.tl.v2::after { top: 4.5px; height: 2px; transform: scaleX(var(--tlp)); transition: transform .12s linear; will-change: transform; }
.tl.v2.is-in::after { transform: scaleX(var(--tlp)); }
.tl.v2 .tl-step:nth-child(n)::before {
  top: -38px; left: 0; width: 11px; height: 11px; margin-top: 0;
  background: var(--bg); border: 1.5px solid var(--gold);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .5s ease, transform .4s var(--ease-exp); transition-delay: 0s;
}
.tl.v2.is-in .tl-step:nth-child(n)::before { background: var(--bg); transform: none; }
.tl.v2 .tl-step.lit:nth-child(n)::before { background: var(--gold); box-shadow: 0 0 0 5px rgba(203, 163, 95, .16); transform: scale(1.08); }
.tl.v2 .tl-step.lit:last-child::before { background: var(--crimson); border-color: var(--crimson); box-shadow: 0 0 0 5px rgba(138, 0, 37, .12); }
.tl.v2.is-in .tl-step:nth-child(1) { transition-delay: 0s; }
.tl.v2.is-in .tl-step:nth-child(2) { transition-delay: .1s; }
.tl.v2.is-in .tl-step:nth-child(3) { transition-delay: .2s; }
.tl.v2 .tl-when { transition: color .4s ease; }
.tl.v2 .tl-step.lit .tl-when { color: var(--crimson); }
.tl.v2 .tl-step:not(.lit) .tl-when { color: var(--gold); }
@media (max-width: 900px) {
  .tl.v2 { padding-left: 30px; gap: 34px; }
  .tl.v2::before { left: 5px; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .tl.v2::after { left: 4.5px; top: 8px; bottom: 8px; width: 2px; height: auto; transform: scaleY(var(--tlp)); transform-origin: top; }
  .tl.v2.is-in::after { transform: scaleY(var(--tlp)); }
  .tl.v2 .tl-step:nth-child(n)::before { top: 11px; left: -30px; }
  .tl.v2 .tl-when { font-size: 27px; margin-bottom: 8px; }
}

/* ---------- хронология v3: «луч» (референс — Tracing Beam): градиент по треку, кончик растворяется, узлы контрастные ---------- */
.tl.v2::before { background: rgba(203, 163, 95, .28); }
.tl.v2::after, .tl.v2.is-in::after {
  transform: none; transition: none; will-change: auto;
  top: 4.5px; height: 2px; left: 0; right: 0;
  background: linear-gradient(90deg, var(--gold) 0%, #b8652f 45%, var(--crimson) 100%);
  box-shadow: 0 0 8px rgba(138, 0, 37, .28);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(var(--tlp) * 100% - 140px), transparent calc(var(--tlp) * 100%));
  mask-image: linear-gradient(to right, #000 0, #000 calc(var(--tlp) * 100% - 140px), transparent calc(var(--tlp) * 100%));
}
.tl.v2 .tl-step:nth-child(n)::before {
  top: -39.5px; left: -1.5px; width: 14px; height: 14px; z-index: 2;
  background: var(--bg); border: 1.5px solid rgba(203, 163, 95, .75);
  box-shadow: 0 0 0 3px var(--bg);
  transition: background-color .35s ease, border-color .35s ease, box-shadow .45s ease, transform .5s var(--ease-exp);
}
.tl.v2.is-in .tl-step:nth-child(n)::before { background: var(--bg); transform: none; }
.tl.v2 .tl-step.lit:nth-child(n)::before {
  background: var(--crimson); border-color: var(--crimson);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold), 0 0 18px rgba(138, 0, 37, .35);
  transform: scale(1.06);
}
/* расходящаяся волна в момент зажигания */
@keyframes tlPulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.2); opacity: 0; } }
.tl.v2 .tl-step::after {
  content: ''; position: absolute; top: -39.5px; left: -1.5px; width: 14px; height: 14px; border-radius: 50%; z-index: 1;
  border: 1px solid var(--crimson); opacity: 0; pointer-events: none;
}
.tl.v2 .tl-step.lit::after { animation: tlPulse .9s ease-out forwards; }
.tl.v2 .tl-step.lit .tl-when { color: var(--crimson); }
.tl.v2 .tl-step:not(.lit) .tl-when { color: var(--gold); opacity: .8; }
@media (max-width: 900px) {
  .tl.v2 { padding-left: 34px; gap: 36px; }
  .tl.v2::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .tl.v2::after, .tl.v2.is-in::after {
    left: 5.5px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; transform: none;
    background: linear-gradient(180deg, var(--gold) 0%, #b8652f 45%, var(--crimson) 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--tlp) * 100% - 110px), transparent calc(var(--tlp) * 100%));
    mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--tlp) * 100% - 110px), transparent calc(var(--tlp) * 100%));
  }
  .tl.v2 .tl-step:nth-child(n)::before, .tl.v2 .tl-step::after { top: 10px; left: -34.5px; }
}

/* ---------- «Что вы получите» v3: sticky-номер слева, список с подсветкой на линии чтения ---------- */
.fx-wrap { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(30px, 6vw, 110px); align-items: start; max-width: 1200px; }
.fx-side { position: sticky; top: 150px; }
.fx-big { position: relative; height: clamp(150px, 15vw, 220px); font-family: var(--serif); font-size: clamp(150px, 15vw, 220px); line-height: .85; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--gold); }
.fx-big span { position: absolute; left: 0; top: 0; transition: opacity .4s ease, transform .5s var(--ease-exp); }
.fx-big span.out { opacity: 0; transform: translateY(-18px); }
.fx-big span.in { opacity: 0; transform: translateY(18px); }
.fx-count { margin-top: 16px; font-family: var(--caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; opacity: .6; }
.fx-count b { font-weight: 400; color: var(--crimson); }
.fx-lead { margin-top: 20px; font-size: 15px; line-height: 1.7; opacity: .7; max-width: 30ch; }
@media (min-width: 901px) {
  .fx-grid, .fx-grid.d3-0, .fx-grid.d3-1, .fx-grid.d3-2 { display: block; border: 0; max-width: none; }
  .fx-grid li, .fx-grid.d3-1 li:last-child, .fx-grid.d3-2 li:last-child {
    display: grid; grid-template-columns: 72px 1fr; align-items: baseline; gap: 0 20px;
    min-height: 0; padding: clamp(22px, 2.4vw, 32px) 0; border: 0; border-bottom: 1px solid var(--hairline); overflow: visible;
  }
  .fx-grid li:first-child { border-top: 1px solid var(--hairline); }
  .fx-grid .fx-n { font-size: 26px; transition: color .5s ease; }
  .fx-grid li.is-cur .fx-n { color: var(--gold); }
  .fx-grid .fx-t { font-size: clamp(22px, 2vw, 30px); line-height: 1.25; max-width: 24ch; }
  .fx-grid li::before, .fx-grid li::after { display: none; }
  .fx-grid.reveal li { transition: opacity .6s ease, transform .8s var(--ease-exp), border-color var(--morph); }
  .fx-grid.reveal.is-in li { opacity: .38; }
  .fx-grid.reveal.is-in li.is-cur { opacity: 1; }
}
@media (max-width: 900px) {
  .fx-wrap { display: block; }
  .fx-side { display: none; }
  .fx-grid.reveal.is-in li { transition: opacity .5s ease, transform .8s var(--ease-exp), border-color var(--morph); }
  .fx-grid.reveal.is-in.has-cur li:not(.is-cur) { opacity: .6; }
  .fx-grid.reveal.is-in li.is-cur { opacity: 1; }
}

/* ---------- схема глубин: луч уходит вглубь слоёв по скроллу ---------- */
.depth-rows { --dp: 0; }
.depth-rows::before { left: 5.5px; width: 1px; top: 27px; bottom: 27px; background: rgba(203, 163, 95, .22); opacity: 1; }
.depth-rows::after {
  content: ''; position: absolute; left: 5px; width: 2px; top: 27px; bottom: 27px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, #b8652f 50%, var(--crimson) 100%);
  box-shadow: 0 0 8px rgba(203, 163, 95, .28);
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--dp) * 100% - 70px), transparent calc(var(--dp) * 100%));
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(var(--dp) * 100% - 70px), transparent calc(var(--dp) * 100%));
}
.depth-row::before { z-index: 2; width: 6px; height: 6px; left: -20px; margin-top: -3px; background: rgba(203, 163, 95, .28); box-shadow: none; transition: background-color .35s ease, border-color .35s ease, box-shadow .45s ease, transform .45s var(--ease-exp); }
.depth-row.has::before { width: 10px; height: 10px; left: -22px; margin-top: -5px; box-sizing: border-box; background: var(--bg); border: 1.5px solid var(--gold); box-shadow: 0 0 0 2px var(--bg); }
.depth-row.has.lit::before { background: var(--gold); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(203, 163, 95, .35), 0 0 14px rgba(203, 163, 95, .45); transform: scale(1.08); }
.depth-row.has.lit:last-child::before { background: var(--crimson); border-color: var(--crimson); box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(138, 0, 37, .4), 0 0 16px rgba(138, 0, 37, .55); }
.depth-row.has::after { content: ''; position: absolute; left: -22px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; z-index: 1; }
.depth-row.has.lit::after { animation: tlPulse .9s ease-out forwards; }
.depth-row .dl, .depth-row .chip { transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .3s; }
.depth-row.has.lit .dl { color: var(--gold); opacity: 1; }
.depth-row.has.lit .chip { background: rgba(203, 163, 95, .14); }
.depth-row.has.lit:last-child .chip { background: rgba(138, 0, 37, .22); border-color: #d9a0ae; color: #f0c9d2; }

/* ---------- v3.1: контраст активной строки, луч по центру кружков ---------- */
.fx-grid .fx-t { display: inline-block; transform-origin: left center; transition: transform .55s var(--ease-exp), opacity .5s ease; }
@media (min-width: 901px) {
  .fx-grid.reveal.is-in li { opacity: .2; }
  .fx-grid.reveal.is-in li.is-cur { opacity: 1; }
  .fx-grid li.is-cur .fx-t { transform: scale(1.1); }
  .fx-grid li.is-cur .fx-n { transform: scale(1.12); transform-origin: left center; }
  .fx-grid .fx-n { transition: color .5s ease, transform .55s var(--ease-exp); display: inline-block; }
}
@media (max-width: 900px) {
  .fx-grid.reveal.is-in.has-cur li:not(.is-cur) { opacity: .42; }
  .fx-grid li.is-cur .fx-t { transform: scale(1.05); }
}
/* хронология: центр линии = центр кружка (целые пиксели) */
.tl.v2::before { top: 5px; height: 2px; background: rgba(203, 163, 95, .2); }
.tl.v2::after, .tl.v2.is-in::after { top: 5px; height: 2px; }
.tl.v2 .tl-step:nth-child(n)::before, .tl.v2 .tl-step::after { top: -39px; left: -1px; }
@media (max-width: 900px) {
  .tl.v2 { padding-left: 34px; }
  .tl.v2::before { left: 6px; width: 2px; top: 8px; bottom: 8px; height: auto; }
  .tl.v2::after, .tl.v2.is-in::after { left: 6px; width: 2px; top: 8px; bottom: 8px; height: auto; }
  .tl.v2 .tl-step:nth-child(n)::before, .tl.v2 .tl-step::after { top: 10px; left: -34px; }
}
/* схема глубин: центр линии = центр кружка (5px от левого края .depth-rows) */
.depth-rows::before { left: 4px; width: 2px; background: rgba(203, 163, 95, .2); }
.depth-rows::after { left: 4px; width: 2px; }
.depth-row::before { left: -20px; width: 6px; margin-top: -3px; }
.depth-row.has::before, .depth-row.has::after { left: -22px; width: 10px; height: 10px; margin-top: -5px; }

/* ---------- «Ритуал» v2: поток из трёх карточек — средство встроено в свой шаг, аппарат в центре ---------- */
.ritual-flow { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 30px); max-width: 1200px; }
.rcard {
  position: relative; display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--hairline); border-radius: 14px; background: rgba(255, 255, 255, .45);
  transition: border-color .45s ease, box-shadow .6s ease, transform .6s var(--ease-exp), background-color .45s ease;
}
.rcard-main { background: #fffdf9; border-color: rgba(138, 0, 37, .3); }
.rcard-head { display: flex; align-items: baseline; gap: 14px; }
.rcard .n { font-family: var(--serif); font-size: clamp(34px, 3.2vw, 46px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--crimson); transition: color .5s ease; }
.rcard h3, .rcard h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; }
.rcard-text { font-size: 14.5px; line-height: 1.68; opacity: .8; }
.rcard-text b { font-family: var(--serif); font-weight: 400; font-size: 1.45em; color: var(--crimson); }
.rprod { margin-top: auto; display: grid; grid-template-columns: 84px 1fr; gap: 14px; align-items: center; padding-top: 16px; border-top: 1px solid var(--hairline); color: inherit; }
.rprod-img { display: block; width: 84px; aspect-ratio: 4 / 5; border-radius: 10px; background: #f8f3ed; overflow: hidden; }
.rprod-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .7s var(--ease-exp); }
.rprod-body { display: block; min-width: 0; }
.rprod b { display: block; font-family: var(--serif); font-weight: 400; font-size: 15px; line-height: 1.25; }
.rprod .rp { display: block; font-family: var(--serif); color: var(--gold); font-size: 13px; margin: 3px 0 5px; }
.rprod-desc { display: block; font-size: 12.5px; line-height: 1.5; opacity: .65; margin-bottom: 8px; }
.rdev { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; }
.rdev img { width: min(100%, 210px); aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; display: block; transition: transform .8s var(--ease-exp); }
/* соединители между шагами */
.rcard::after {
  content: ''; position: absolute; top: 50%; right: calc(-1 * clamp(16px, 2.2vw, 30px)); width: clamp(16px, 2.2vw, 30px); height: 1px;
  background: linear-gradient(90deg, var(--gold), var(--crimson)); opacity: .7;
  transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-exp) calc(var(--i) * .2s + .55s);
}
.rcard:last-child::after { display: none; }
.ritual-flow.is-in .rcard::after { transform: scaleX(1); }
/* появление по очереди и hover */
.ritual-flow.reveal { opacity: 1; transform: none; }
.ritual-flow.reveal .rcard { opacity: 0; transform: translateY(22px); transition: opacity .7s ease calc(var(--i) * .2s), transform .9s var(--ease-exp) calc(var(--i) * .2s), border-color .45s ease, box-shadow .6s ease, background-color .45s ease; }
.ritual-flow.reveal.is-in .rcard { opacity: 1; transform: none; transition: opacity .7s ease, transform .6s var(--ease-exp), border-color .45s ease, box-shadow .6s ease, background-color .45s ease; }
@media (hover: hover) {
  .ritual-flow.reveal.is-in .rcard:hover { transform: translateY(-5px); border-color: rgba(203, 163, 95, .8); box-shadow: 0 26px 54px rgba(46, 26, 30, .09); background: #fffdf9; }
  .rcard:hover .n { color: var(--crimson); }
  .rcard:hover .rprod-img img { transform: translateY(-4px) scale(1.04); }
  .rcard:hover .rdev img { transform: translateY(-6px) rotate(-2deg); }
}
@media (max-width: 900px) {
  .ritual-flow { grid-template-columns: 1fr; gap: 16px; }
  .rcard { padding: 20px; gap: 12px; }
  .rcard::after { display: none; }
  .rcard .n { font-size: 32px; }
  .rdev img { width: 170px; }
  .rprod { grid-template-columns: 76px 1fr; }
  .rprod-img { width: 76px; }
}
/* фото аппарата в карточке ритуала: края растворяются — фон снимка не читается прямоугольником */
.rdev img { -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%); }
/* карточка средства без внешней ссылки — продаёт только Наталья */
.rprod { cursor: default; }
.rprod-desc { margin-bottom: 0; }

/* ---------- «Технические характеристики» v2: чертёж + ключевые цифры + спецификация строками ---------- */
.spec-wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 90px); align-items: start; max-width: 1240px; }
.spec-blueprint { position: sticky; top: 140px; }
.bp-stage { position: relative; aspect-ratio: 1 / 1; border: 1px solid var(--hairline); border-radius: 16px; background: #fffdf9; overflow: hidden;
  background-image: linear-gradient(rgba(138, 0, 37, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 0, 37, .045) 1px, transparent 1px); background-size: 40px 40px; background-position: center; }
.bp-stage img { position: absolute; left: 50%; top: 50%; width: 74%; height: 74%; transform: translate(-50%, -50%); object-fit: contain; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 62% 66% at 50% 50%, #000 58%, transparent 100%); transition: transform 1.2s var(--ease-exp); }
.bp-stage.has-dims img { left: 44%; }
.spec-wrap.is-in .bp-stage:hover img { transform: translate(-50%, -52%) scale(1.02); }
/* размерные линии с засечками */
.bp-dim { position: absolute; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.bp-dim i { position: absolute; background: var(--gold); opacity: .7; }
.bp-dim i::before, .bp-dim i::after { content: ''; position: absolute; background: var(--gold); }
.bp-dim-h { right: 9%; top: 13%; bottom: 13%; width: 1px; }
.bp-dim-h i { left: 0; top: 0; bottom: 0; width: 1px; transform-origin: top; transform: scaleY(0); transition: transform 1s var(--ease-luxe) .35s; }
.bp-dim-h i::before, .bp-dim-h i::after { left: -5px; width: 11px; height: 1px; }
.bp-dim-h i::before { top: 0; } .bp-dim-h i::after { bottom: 0; }
.bp-dim-h em { position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); transform-origin: left center; white-space: nowrap; font-style: normal; opacity: 0; transition: opacity .6s ease 1.1s; }
.bp-dim-w { left: 13%; right: 25%; bottom: 8%; height: 1px; }
.bp-dim-w i { left: 0; right: 0; top: 0; height: 1px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease-luxe) .55s; }
.bp-dim-w i::before, .bp-dim-w i::after { top: -5px; height: 11px; width: 1px; }
.bp-dim-w i::before { left: 0; } .bp-dim-w i::after { right: 0; }
.bp-dim-w em { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); white-space: nowrap; font-style: normal; opacity: 0; transition: opacity .6s ease 1.3s; }
.spec-wrap.is-in .bp-dim i { transform: none; }
.spec-wrap.is-in .bp-dim em { opacity: 1; }
.bp-depth { position: absolute; left: 6%; top: 6%; font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; opacity: .45; }
/* ключевые цифры */
.spec-key { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 18px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; }
.spec-key li { background: var(--bg); padding: 18px 20px 16px; transition: background-color var(--morph); opacity: 0; transform: translateY(10px); }
.spec-wrap.is-in .spec-key li { opacity: 1; transform: none; transition: opacity .6s ease calc(.5s + var(--i) * .1s), transform .7s var(--ease-exp) calc(.5s + var(--i) * .1s), background-color var(--morph); }
.spec-key b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; color: var(--crimson); letter-spacing: -.01em; }
.spec-key small { font-size: .5em; color: var(--gold); letter-spacing: 0; }
.spec-key span { display: block; margin-top: 8px; font-family: var(--caps); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; }
/* спецификация строками */
.spec-sheet { border-top: 1px solid var(--hairline); }
.spec-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--hairline); transition: border-color var(--morph); opacity: 0; transform: translateY(10px); }
.spec-wrap.is-in .spec-row { opacity: 1; transform: none; transition: opacity .55s ease calc(var(--i) * .06s), transform .7s var(--ease-exp) calc(var(--i) * .06s), border-color var(--morph); }
.spec-row span { font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; opacity: .55; transition: opacity .3s, color .3s; }
.spec-row b { font-family: var(--serif); font-weight: 400; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.45; }
@media (hover: hover) { .spec-row:hover span { opacity: 1; color: var(--gold); } }
.spec-row-kit b { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--sans); font-size: 13px; }
.spec-row-kit i { font-style: normal; padding: 6px 12px; border: 1px solid var(--hairline); border-radius: 100px; opacity: .85; }
.spec-wrap.reveal { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .spec-wrap { grid-template-columns: 1fr; gap: 26px; }
  .spec-blueprint { position: static; }
  .bp-stage { max-width: 420px; margin: 0 auto; }
  .spec-key { max-width: 420px; margin: 18px auto 0; }
}
@media (max-width: 600px) {
  .spec-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .spec-row b { font-size: 16px; }
  .spec-key b { font-size: 26px; }
}

/* ---------- верх страницы аппарата v3: сцена для фото, факты в hero, лента-манифест ---------- */
.dev-hero { min-height: 0; padding-top: 128px; padding-bottom: clamp(50px, 6vw, 90px); row-gap: 0; }
.dev-hero > .back-link { grid-column: 1 / -1; margin-bottom: clamp(26px, 3.5vw, 48px); }
/* сцена */
.dev-photo { position: relative; padding: 4% 0 0; }
.dev-photo::before { content: ''; position: absolute; top: 0; right: 2%; width: 58%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(203, 163, 95, .38); pointer-events: none; }
.dev-photo::after { content: ''; position: absolute; left: 6%; bottom: 82px; width: 34%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(138, 0, 37, .14); pointer-events: none; }
.dev-photo .device-frame { position: relative; z-index: 1; max-width: 470px; margin: 0 auto; border-radius: 24px; border: 1px solid var(--hairline); box-shadow: none;
  background: radial-gradient(90% 80% at 50% 38%, #fffdf9 0%, #f6efe4 62%, #efe5d6 100%); }
.dev-page .device-frame { box-shadow: none; }
.dev-photo .device-frame::after { display: none; }
.dev-photo .device-frame::before { content: ''; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(46, 26, 30, .26), transparent 70%); filter: blur(7px); z-index: 0; }
.dev-photo .device-frame img { position: relative; z-index: 1; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 64% 68% at 50% 50%, #000 60%, transparent 100%); mask-image: radial-gradient(ellipse 64% 68% at 50% 50%, #000 60%, transparent 100%); }
@keyframes devFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.dev-photo .device-frame.is-in { animation: devFloat 7s ease-in-out 1.4s infinite; }
@media (prefers-reduced-motion: reduce) { .dev-photo .device-frame.is-in { animation: none; } }
.dev-photo .idx { top: -2%; left: -4%; right: auto; color: transparent; -webkit-text-stroke: 1px rgba(203, 163, 95, .55); z-index: 2; }
/* ракурсы */
.dev-thumbs { gap: 12px; margin-top: 18px; position: relative; z-index: 1; }
.dev-thumbs button { width: 64px; height: 64px; border-radius: 14px; background: #f6efe4; border: 1px solid var(--hairline); opacity: .7; }
.dev-thumbs button img { mix-blend-mode: multiply; }
.dev-thumbs button.on { opacity: 1; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(203, 163, 95, .16); }
/* факты в hero */
.dev-desc { margin-bottom: 22px; }
.dev-buy .btn-outline { border-radius: 100px; padding: 15px 28px; }
/* лента-манифест */
.dev-manifest-band { max-width: calc(1360px - 2 * var(--pad)); margin: clamp(10px, 2vw, 30px) auto 0; padding: clamp(28px, 4vw, 52px) 0 clamp(30px, 4.4vw, 56px); border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: start; }
.manifest-label { font-family: var(--caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); padding-top: .55em; }
.dev-manifest-band .dev-manifest { max-width: none; margin: 0; padding: 0; font-size: clamp(20px, 2vw, 29px); line-height: 1.42; }
@media (max-width: 860px) {
  .dev-hero { padding-top: 104px; }
  .dev-hero > .back-link { order: -2; margin-bottom: 18px; }
  .dev-photo { order: -1; margin-bottom: 26px; padding-top: 6%; }
  .dev-photo::before { width: 54%; right: 0; }
  .dev-photo .idx { font-size: 64px; top: 0; left: 0; }
  .dev-manifest-band { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 30px; }
}
/* лента-манифест: ширина колонки контента на любом экране */
.dev-manifest-band { width: min(100% - 2 * var(--pad), 1360px - 2 * var(--pad)); max-width: none; margin-left: auto; margin-right: auto; }
/* hero аппарата: без декоративных колец, без левитации, без дублирующих фактов */
.dev-photo::before, .dev-photo::after { display: none; }
.dev-photo .device-frame.is-in { animation: none; }
.dev-desc { margin-bottom: 30px; }
/* смена ракурса без тормозов: без маски и blur, два слоя с готовыми к анимации opacity */
.dev-photo .device-frame { isolation: isolate; }
.dev-photo .device-frame img { -webkit-mask-image: none; mask-image: none; will-change: opacity; transition: opacity .42s ease; }
.dev-photo .device-frame img.dev-layer2 { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dev-photo .device-frame::before { filter: none; background: radial-gradient(ellipse at center, rgba(46, 26, 30, .2), rgba(46, 26, 30, .07) 45%, transparent 72%); }

/* ---------- подменю разделов v2: стеклянная полоса, капсулы, скользящая пилюля ---------- */
.secnav, .dev-page .secnav {
  display: flex; justify-content: center; gap: 0;
  max-width: none; width: 100%; margin: 0; padding: 8px var(--pad);
  border: 0; border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.secnav-track {
  position: relative; display: flex; gap: 2px; padding: 4px;
  border-radius: 100px; border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--fg) 3%, transparent);
  transition: border-color var(--morph), background-color var(--morph);
}
.secnav a, .secnav-track a {
  position: relative; z-index: 1; flex: none; white-space: nowrap;
  padding: 9px 16px; border: 0; border-radius: 100px;
  font-family: var(--caps); font-size: 10px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase;
  opacity: .62; color: var(--fg);
  transition: opacity .3s ease, color .35s ease;
}
.secnav a:hover { opacity: 1; color: var(--fg); border-color: transparent; }
.secnav a.on { opacity: 1; color: var(--kicker-c); border-color: transparent; }
.secnav-pill {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 100px;
  background: color-mix(in srgb, var(--kicker-c) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kicker-c) 28%, transparent);
  opacity: 0; pointer-events: none;
  transition: transform .6s var(--ease-exp), width .6s var(--ease-exp), opacity .35s ease, background-color var(--morph), box-shadow var(--morph);
}
.secnav-pill.show { opacity: 1; }
@media (max-width: 900px) {
  .secnav, .dev-page .secnav { justify-content: flex-start; padding: 8px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .secnav::-webkit-scrollbar { display: none; }
  .secnav-track { flex: none; }
  .secnav a, .secnav-track a { padding: 9px 14px; font-size: 9.5px; }
}

/* ---------- подменю разделов: возврат к простой полосе с аккуратным подчёркиванием (капсула и пилюля отменены) ---------- */
.secnav-pill { display: none; }
.secnav, .dev-page .secnav {
  display: flex; justify-content: center; align-items: stretch; gap: clamp(22px, 3vw, 36px);
  width: auto; max-width: calc(1360px - 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad);
  border: 1px solid var(--hairline); border-top: 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.secnav a {
  position: relative; flex: none; white-space: nowrap;
  padding: 17px 0 16px; border: 0; border-radius: 0;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  opacity: .72; color: var(--fg);
  transition: opacity .3s ease, color .35s ease;
}
.secnav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: center;
  transition: transform .5s var(--ease-exp);
}
.secnav a:hover { opacity: 1; color: var(--fg); }
.secnav a.on { opacity: 1; color: var(--gold); }
.secnav a.on::after { transform: scaleX(1); }
@media (max-width: 900px) {
  .secnav, .dev-page .secnav { justify-content: flex-start; gap: 22px; width: 100%; max-width: none; padding: 0 var(--pad); border-left: 0; border-right: 0; overflow-x: auto; scrollbar-width: none; }
  .secnav a { padding: 15px 0 14px; font-size: 11px; }
  .secnav a::after { bottom: 9px; }
}
/* подменю разделов на мобилке лишнее: шапка + полоса + панель покупки съедали четверть экрана */
@media (max-width: 900px) { .secnav, .dev-page .secnav { display: none; } }

/* ---------- противопоказания: устойчивое раскрытие + каскад пунктов, шеврон как у вопросов ---------- */
/* без работающего JS — нативный <details>: тело видно, когда открыто */
html:not(.js) details.contra .contra-body { display: block; height: auto; padding-bottom: 26px; }
html:not(.js) details.contra .effects-cols { opacity: 1; transform: none; }
html:not(.js) details.contra summary::after { transform: none; }
html:not(.js) details.contra[open] summary::after { transform: rotate(180deg); }
details.contra { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); transition: border-color var(--morph); }
details.contra summary { padding: 22px 0; gap: 14px; align-items: center; }
details.contra summary .sum-hint { flex-basis: 100%; order: 3; margin-top: -8px; }
details.contra summary::after { margin-left: auto; align-self: center; }
details.contra summary > *:first-child { transition: color .4s ease; }
details.contra.is-open summary { color: var(--fg); }
details.contra .contra-body { display: grid; grid-template-rows: 0fr; height: auto; transition: grid-template-rows .6s var(--ease-exp), padding-bottom .6s var(--ease-exp); }
details.contra.is-open .contra-body { grid-template-rows: 1fr; padding-bottom: 28px; }
details.contra .effects-cols { opacity: 1; transform: none; transition: none; }
details.contra .effects-cols li { opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .55s var(--ease-exp); }
details.contra.is-open .effects-cols li { opacity: 1; transform: none; }
details.contra.is-open .effects-cols li:nth-child(1) { transition-delay: .08s; } details.contra.is-open .effects-cols li:nth-child(2) { transition-delay: .12s; }
details.contra.is-open .effects-cols li:nth-child(3) { transition-delay: .16s; } details.contra.is-open .effects-cols li:nth-child(4) { transition-delay: .2s; }
details.contra.is-open .effects-cols li:nth-child(5) { transition-delay: .24s; } details.contra.is-open .effects-cols li:nth-child(6) { transition-delay: .28s; }
details.contra.is-open .effects-cols li:nth-child(7) { transition-delay: .32s; } details.contra.is-open .effects-cols li:nth-child(8) { transition-delay: .36s; }
details.contra.is-open .effects-cols li:nth-child(9) { transition-delay: .4s; } details.contra.is-open .effects-cols li:nth-child(10) { transition-delay: .44s; }
details.contra.is-open .effects-cols li:nth-child(n+11) { transition-delay: .48s; }
details.contra .effects-cols li { font-size: 15px; line-height: 1.5; }

/* ---------- предыдущий / следующий: миниатюры, разделитель со счётчиком, живой ховер ---------- */
.dev-page .dev-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 0; }
.dev-page .dev-nav a { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 22px); padding: clamp(26px, 3.2vw, 44px) 0; min-width: 0; text-align: left; }
.dev-page .dev-nav a.dn-next { flex-direction: row-reverse; text-align: right; }
.dn-thumb { flex: none; width: clamp(60px, 6vw, 84px); aspect-ratio: 1; border-radius: 18px; overflow: hidden; background: #f4ece1; border: 1px solid rgba(203, 163, 95, .28); transition: transform .5s var(--ease-exp), border-color .4s ease, box-shadow .5s ease; }
.dn-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; transition: transform .7s var(--ease-exp); }
.dn-text { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dev-nav .dir { display: inline-block; transition: transform .45s var(--ease-exp), opacity .3s ease; }
.dev-nav .nm { transition: color .4s ease; }
@media (hover: hover) {
  .dev-page .dev-nav a:hover .dn-thumb { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
  .dev-page .dev-nav a:hover .dn-thumb img { transform: scale(1.07); }
  .dev-page .dev-nav a:hover .dir { opacity: 1; }
  .dev-page .dev-nav a.dn-prev:hover .dir { transform: translateX(-5px); }
  .dev-page .dev-nav a.dn-next:hover .dir { transform: translateX(5px); }
}
.dn-mid { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 clamp(22px, 3.4vw, 52px); }
.dn-mid i { flex: 1; width: 1px; background: linear-gradient(180deg, transparent, rgba(203, 163, 95, .55), transparent); }
.dn-mid b { font-family: var(--caps); font-weight: 400; font-size: 10px; letter-spacing: .26em; color: var(--gold); white-space: nowrap; }
@media (max-width: 760px) {
  .dev-page .dev-nav { grid-template-columns: 1fr; }
  .dev-page .dev-nav a, .dev-page .dev-nav a.dn-next { flex-direction: row; text-align: left; padding: 22px 0; gap: 16px; }
  .dn-mid { flex-direction: row; padding: 0; gap: 14px; }
  .dn-mid i { width: auto; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, rgba(203, 163, 95, .55), transparent); }
  .dn-thumb { width: 60px; border-radius: 14px; }
}
/* миниатюра и текст — в строку; «следующий» зеркально к правому краю */
.dev-page .dev-nav a, .dev-page .dev-nav a.dn-prev { flex-direction: row; justify-content: flex-start; align-items: center; }
.dev-page .dev-nav a.dn-next { flex-direction: row-reverse; justify-content: flex-start; }
.dev-page .dev-nav a.dn-next .dn-text { align-items: flex-end; }
@media (max-width: 760px) { .dev-page .dev-nav a.dn-next { flex-direction: row; } .dev-page .dev-nav a.dn-next .dn-text { align-items: flex-start; } }

/* ---------- противопоказания: раскрытие через height (px), список — сетка вместо multicol ---------- */
html.js details.contra .contra-body, html.js details.contra.is-open .contra-body { display: block; height: 0; overflow: hidden; padding-bottom: 0; grid-template-rows: none; transition: height .55s var(--ease-exp); will-change: height; }
details.contra .effects-cols { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(30px, 4vw, 70px); row-gap: 0; padding-bottom: 28px; }
@media (max-width: 700px) { details.contra .effects-cols { grid-template-columns: 1fr; } }

/* ---------- призыв в конце страницы аппарата: аккуратная капсула по центру, меньше воздуха на мобилке ---------- */
.dev-page .dev-cta { padding-top: clamp(70px, 10vw, 150px); padding-bottom: clamp(70px, 10vw, 150px); }
.dev-page .dev-cta .invite { margin-bottom: 26px; }
.dev-page .dev-cta .link-arrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  max-width: min(100%, 520px); padding: 15px 26px; border-radius: 100px;
  border: 1px solid rgba(203, 163, 95, .45); color: var(--fg); opacity: 1;
  font-size: 11px; letter-spacing: .16em; line-height: 1.4; text-align: center;
  transition: border-color .4s ease, background-color .4s ease, color .4s ease, transform .5s var(--ease-exp);
}
.dev-page .dev-cta .link-arrow svg { flex: none; }
@media (hover: hover) { .dev-page .dev-cta .link-arrow:hover { border-color: var(--gold); background: rgba(203, 163, 95, .1); color: var(--fg); transform: translateY(-2px); } }
@media (max-width: 600px) { .dev-page .dev-cta .link-arrow { font-size: 10px; letter-spacing: .14em; padding: 14px 20px; } .dev-page .dev-cta .invite { font-size: 24px; } }

/* ---------- «Почему именно он»: личная фраза + три причины, под лентой «Что это за аппараты» ---------- */
.dev-why {
  width: min(100% - 2 * var(--pad), 1360px - 2 * var(--pad)); margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5.5vw, 72px); border-top: 1px solid var(--hairline);
  display: grid; grid-template-columns: minmax(0, .32fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 60px); align-items: start;
  transition: border-color var(--morph);
}
.dev-manifest-band { padding-bottom: clamp(30px, 4.4vw, 56px); }
.why-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.why-list li { padding-top: 16px; border-top: 1px solid var(--hairline); transition: border-color var(--morph); }
.why-list b { display: block; font-family: var(--serif); font-weight: 400; font-size: 13px; letter-spacing: .14em; color: var(--gold); margin-bottom: 10px; }
.why-list h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.25; margin-bottom: 10px; text-wrap: balance; }
.why-list p { font-size: 14.5px; line-height: 1.65; opacity: .78; }
.dev-why.reveal { opacity: 1; transform: none; }
.dev-why.reveal .why-list li, .dev-why.reveal .manifest-label { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s var(--ease-exp); }
.dev-why.reveal.is-in .manifest-label { opacity: 1; transform: none; }
.dev-why.reveal.is-in .why-list li { opacity: 1; transform: none; transition-delay: calc(.2s + var(--i) * .12s); }
@media (max-width: 860px) {
  .dev-why { grid-template-columns: 1fr; gap: 14px; padding: 26px 0 36px; }
  .why-list { grid-template-columns: 1fr; gap: 18px; }
}

/* ---------- «Почему именно он» v2: личная цитата с подписью, крупные контурные номера ---------- */
.why-list li { padding-top: 18px; }
.why-list b { font-size: clamp(32px, 3vw, 44px); line-height: 1; letter-spacing: 0; color: transparent; -webkit-text-stroke: 1px var(--gold); margin-bottom: 14px; transition: color .6s ease; }
@media (hover: hover) { .why-list li:hover b { color: var(--gold); } }
@media (hover: none) { .dev-why.reveal.is-in .why-list li b { color: var(--gold); transition: color .7s ease calc(.5s + var(--i) * .15s); } }
@media (max-width: 860px) { .why-list b { font-size: 30px; } }

/* ---------- нижняя панель покупки: плавное появление/уход, на мобилке имя над ценой ---------- */
.buybar { opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform .7s cubic-bezier(.22, .8, .3, 1), opacity .45s ease, background-color var(--morph), border-color var(--morph); }
.buybar.on { opacity: 1; pointer-events: auto; transition: transform .7s cubic-bezier(.22, .8, .3, 1), opacity .5s ease .08s, background-color var(--morph), border-color var(--morph); }
@media (max-width: 860px) {
  .buybar { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name btn" "price btn"; column-gap: 14px; row-gap: 1px; align-items: center; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom)); }
  .buybar .bb-name { display: block; grid-area: name; font-family: var(--caps); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; opacity: .55; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buybar .bb-price { grid-area: price; margin-left: 0; font-size: 20px; line-height: 1.1; }
  .buybar .btn-fill { grid-area: btn; padding: 13px 18px; font-size: 9.5px; letter-spacing: .16em; }
}
@media (max-width: 860px) { .buybar { grid-template-areas: "name name" "price btn"; row-gap: 4px; } .buybar .bb-name { letter-spacing: .16em; } }
/* панель покупки без имени аппарата — и так понятно, на какой странице мы */
.buybar .bb-name { display: none !important; }
@media (max-width: 860px) { .buybar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price btn"; row-gap: 0; padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom)); } }

/* ---------- единая система появления: каскад по детям контейнера .stagger ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.stagger:not(.is-in) > * { opacity: 0; }
.stagger.is-in > * { animation: riseIn .8s var(--ease-exp) both; animation-delay: calc(var(--i, 0) * 75ms); }
.stagger.reveal { opacity: 1; transform: none; }
.no-anim.stagger > *, .no-anim .stagger > * { animation: none !important; opacity: 1 !important; }
.dev-nav.stagger > .dn-mid { animation-delay: calc(var(--i, 0) * 75ms + 120ms); }
/* сноски и мелкие одиночки — тот же мягкий подъём, чуть тише */
.dev-note.reveal { transform: translateY(14px); }
.kicker.reveal, .back-link.reveal { transform: translateY(10px); }
.spec-key b, .dev-buy .price { font-variant-numeric: tabular-nums; }
/* шторка перехода — быстрее */
.page-curtain { transition: transform .38s cubic-bezier(.65, 0, .35, 1); }
html.via-curtain #loader { transition: transform .42s cubic-bezier(.65, 0, .35, 1), visibility .42s; }
/* ленты «Что это за аппараты» и «Почему именно он»: каждый элемент появляется сам, по мере входа в экран */
.dev-why .why-list li.reveal, .dev-manifest-band .dev-manifest.reveal { transform: translateY(16px); }
.dev-why .why-list li.reveal.is-in { opacity: 1; transform: none; }
@media (hover: none) { .why-list li.is-in b { color: var(--gold); transition: color .7s ease .4s; } }

/* ---------- элементы, у которых собственный transition перекрывал переход появления: возвращаем opacity/transform в список ----------
   (transition задан longhand'ами, чтобы не сбрасывать transition-delay от data-delay) */
.why-list li.reveal, details.contra.reveal, .dev-cta .link-arrow.reveal, .back-link.reveal, .phil-card.reveal, .service-rows.reveal, .faq.reveal {
  transition-property: opacity, transform, border-color, background-color, color, box-shadow, gap;
  transition-duration: .9s, 1s, .8s, .8s, .8s, .5s, .3s;
  transition-timing-function: ease, var(--ease-exp), ease, ease, ease, ease, var(--ease-exp);
}

/* ---------- «Почему именно он» / «Что это за аппараты»: Safari-безопасное появление (без text-stroke, вложенной opacity и transform) ---------- */
.dev-why .manifest-label.reveal, .dev-why .why-list li.reveal, .dev-manifest-band .manifest-label.reveal, .dev-manifest-band .dev-manifest.reveal {
  transform: none; will-change: opacity; -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transition-property: opacity, border-color; transition-duration: .9s, .8s; transition-timing-function: ease, ease;
}
.dev-why .why-list li.reveal.is-in, .dev-why .manifest-label.reveal.is-in, .dev-manifest-band .manifest-label.reveal.is-in, .dev-manifest-band .dev-manifest.reveal.is-in { opacity: 1; transform: none; }
.why-list h3 { text-wrap: initial; }
.why-list b, .why-list li.is-in b, .why-list li:hover b { -webkit-text-stroke: 0; color: var(--gold); opacity: .42; transition: opacity .7s ease; }
@media (hover: hover) { .why-list li:hover b { opacity: 1; } }
@media (hover: none) { .why-list li.is-in b { opacity: 1; transition: opacity .8s ease .35s; } }

/* ---------- штора перехода 1:1 с The Rurik (RouteCurtain): плоская, на весь экран, наш чёрный ---------- */
.page-curtain, .page-curtain.on, .page-curtain.out, .page-curtain.off, .page-curtain.snap {
  position: fixed; inset: 0; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; border-radius: 0;
  background: var(--black); z-index: 300; will-change: transform; pointer-events: none;
}
.page-curtain { transform: translateY(100%); transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.page-curtain.on { transform: translateY(0); pointer-events: auto; transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
.page-curtain.out { transform: translateY(-100%); pointer-events: auto; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.page-curtain.snap { transform: translateY(100%); transition: none; }
.page-curtain.off { transform: translateY(100%); transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
@media (prefers-reduced-motion: reduce) { .page-curtain { display: none; } }
/* обновление страницы: та же штора, что и при переходе — подъём .55s power2.inOut */
html.via-curtain #loader { transition: transform .55s cubic-bezier(.65, 0, .35, 1), visibility .55s; }
/* занавес прелоадера/обновления — плоский, как штора перехода (1:1 с The Rurik) */
#loader { left: 0; right: 0; border-radius: 0; }
body.loaded #loader { transform: translateY(-100%); }

/* ---------- сопровождение v2: путь во времени (луч) + таблица двух уровней ---------- */
.sup-h { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; margin: clamp(10px, 2vw, 24px) 0 clamp(26px, 3.4vw, 44px); }
.sup-h em { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; color: var(--gold); font-size: 1.1em; }
.tl.v2.sup-path { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: clamp(20px, 2.6vw, 40px); }
.sup-path .tl-when { font-size: clamp(20px, 1.9vw, 26px); margin-bottom: 10px; }
.sup-path h4 { font-family: var(--serif); font-weight: 400; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.3; margin-bottom: 10px; text-wrap: pretty; }
.sup-path .tl-step p { font-size: 14px; line-height: 1.65; opacity: .72; max-width: 32ch; }
/* на тёмном: пройденные этапы — розовым, финальная точка — золотая */
#support .tl.v2 .tl-step.lit .tl-when { color: var(--rose); }
#support .tl.v2 .tl-step:not(.lit) .tl-when { color: var(--gold); opacity: .75; }
#support .tl.v2 .tl-step.lit:last-child::before { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px rgba(203, 163, 95, .5), 0 0 18px rgba(203, 163, 95, .4); }
#support .tl.v2 .tl-step.lit:nth-child(n)::before { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--gold), 0 0 18px rgba(203, 163, 95, .35); }
/* таблица уровней */
.sup-tiers { margin-top: clamp(44px, 6vw, 84px); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .02); }
.sup-tiers-head { display: grid; grid-template-columns: minmax(0, 1fr) 150px 180px; align-items: center; gap: 0 12px; padding: 18px clamp(18px, 2.4vw, 30px); border-bottom: 1px solid var(--hairline); background: rgba(203, 163, 95, .05); }
.sup-stamp { justify-self: start; font-family: var(--caps); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); padding: 7px 12px; border: 1px solid rgba(203, 163, 95, .45); border-radius: 100px; }
.sup-col-h { text-align: center; font-family: var(--caps); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; line-height: 1.4; }
.sup-col-h b { font-weight: 400; } .sup-col-h i { font-style: normal; }
.sup-col-h--dev { opacity: 1; color: var(--gold); }
.sup-rows { list-style: none; }
.sup-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 150px 180px; align-items: center; gap: 0 12px; padding: 15px clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.4; }
.sup-rows li:first-child { border-top: 0; }
.sup-rows li i { position: relative; justify-self: center; width: 100%; text-align: center; font-style: normal; }
.sup-rows li i.y::before { content: '\2726'; color: var(--gold); font-size: 13px; }
.sup-rows li i.n::before { content: '\2014'; opacity: .25; }
.sup-rows li i:last-child { background: rgba(203, 163, 95, .06); align-self: stretch; display: flex; align-items: center; justify-content: center; margin: -15px 0; }
.sup-tiers .sup-rows.stagger:not(.is-in) > li { opacity: 0; }
@media (max-width: 900px) {
  .sup-path .tl-step p { max-width: none; }
  .sup-tiers-head, .sup-rows li { grid-template-columns: minmax(0, 1fr) 62px 86px; gap: 0 6px; padding-left: 16px; padding-right: 12px; }
  .sup-col-h i { display: none; }
  .sup-col-h { font-size: 9px; letter-spacing: .12em; }
  .sup-stamp { font-size: 8px; letter-spacing: .18em; padding: 6px 10px; }
  .sup-rows li { font-size: 14px; padding-top: 13px; padding-bottom: 13px; }
  .sup-rows li i:last-child { margin: -13px 0; }
}
/* сопровождение на мобилке: путь вертикальный, штамп короткий */
.sup-stamp b { font-weight: 400; } .sup-stamp i { font-style: normal; }
@media (max-width: 900px) {
  .tl.v2.sup-path { grid-template-columns: 1fr; gap: 30px; padding-left: 34px; }
  .sup-path .tl-when { font-size: 22px; }
  .sup-path h4 { font-size: 18px; }
  .sup-stamp i { display: none; }
  .sup-stamp { white-space: nowrap; }
}

/* ---------- косметика v2: ритуал дня (утро/вечер) + полка брендов ---------- */
#cosmetics .cosm-notes { grid-template-columns: 1fr 1fr; column-gap: clamp(20px, 3vw, 40px); }
.routine { margin-top: clamp(36px, 5vw, 64px); }
.routine-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(18px, 2.4vw, 30px); }
.routine .sup-h { margin: 0; }
.rt-toggle { position: relative; display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--hairline); border-radius: 100px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.rt-toggle button { position: relative; z-index: 1; padding: 9px 20px; border: 0; background: transparent; border-radius: 100px; cursor: pointer; font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--fg); opacity: .6; transition: opacity .3s ease, color .35s ease; }
.rt-toggle button.on { opacity: 1; color: var(--crimson); }
.rt-pill { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 100px; background: rgba(138, 0, 37, .1); box-shadow: inset 0 0 0 1px rgba(138, 0, 37, .3); opacity: 0; transition: transform .55s var(--ease-exp), width .55s var(--ease-exp), opacity .3s ease; pointer-events: none; }
.rt-pill.show { opacity: 1; }
.rt-panels { display: grid; }
.rt-steps { grid-area: 1 / 1; list-style: none; border-top: 1px solid var(--hairline); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .4s ease, transform .5s var(--ease-exp); }
.rt-steps.is-on { opacity: 1; transform: none; pointer-events: auto; }
.rt-steps li { display: grid; grid-template-columns: 44px 64px minmax(0, .9fr) minmax(0, 1.4fr) auto; align-items: center; gap: 0 clamp(14px, 2vw, 28px); padding: 16px 0; border-bottom: 1px solid var(--hairline); }
.rt-steps li:not(:has(.rt-thumb)) { grid-template-columns: 44px 64px minmax(0, .9fr) minmax(0, 1.4fr) auto; }
.rt-steps.is-on li { animation: riseIn .6s var(--ease-exp) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rt-n { font-family: var(--serif); font-size: 15px; color: var(--gold); letter-spacing: .06em; }
.rt-thumb { grid-column: 2; width: 56px; aspect-ratio: 1; border-radius: 12px; background: #f6efe4; border: 1px solid var(--hairline); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.rt-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.rt-what { grid-column: 3; font-family: var(--serif); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.2; }
.rt-desc { grid-column: 4; font-size: 14px; line-height: 1.55; opacity: .72; }
.rt-brand { grid-column: 5; font-family: var(--caps); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); white-space: nowrap; }
.rt-note { margin-top: 14px; font-size: 12.5px; opacity: .5; }
/* полка брендов */
.brands-h { margin-top: clamp(44px, 6vw, 84px); }
#cosmetics .cosmetics-cta .btn-outline { border-radius: 100px; padding: 15px 28px; }
@media (max-width: 900px) {
  .rt-steps li, .rt-steps li:not(:has(.rt-thumb)) { grid-template-columns: 32px 48px minmax(0, 1fr); gap: 4px 12px; padding: 14px 0; }
  .rt-thumb { width: 44px; border-radius: 10px; }
  .rt-what { grid-column: 3; font-size: 17px; }
  .rt-desc { grid-column: 3; font-size: 13.5px; }
  .rt-brand { grid-column: 3; white-space: normal; }
}
@media (max-width: 600px) {
  #cosmetics .cosm-notes { grid-template-columns: 1fr; }
  #cosmetics .ghost-word { display: none; }
  .routine-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
/* ритуал: высота панели — по активному списку (неактивный вынесен из потока) */
.rt-panels { position: relative; display: block; }
.rt-steps:not(.is-on) { position: absolute; top: 0; left: 0; right: 0; }
.rt-steps.is-on { position: relative; }

/* ---------- косметика v2.1: производительность переключателя, ровная фото-композиция, типографский указатель марок ---------- */
.rt-pill { transition: transform .5s var(--ease-exp), opacity .3s ease; }
.rt-thumb { background: #fff; }
.rt-thumb img { mix-blend-mode: normal; }
@media (max-width: 860px) {
  .cosm-visual { max-width: none; margin: 24px 0 0; padding: 18px 0 30px; }
  .cosm-visual::before { right: -8px; top: 0; width: 62%; height: 54%; }
  .cosm-photo { margin: 0; max-width: none; }
  .cosm-photo-2 { width: 25%; left: -4px; bottom: 2%; }
}
/* указатель марок: крупные имена, актив курсивом, описание раскрывается на hover (на тач — видно сразу) */
.brands-index { list-style: none; border-top: 1px solid var(--hairline); }
.brands-index li { display: grid; grid-template-columns: 48px minmax(0, 1.1fr) minmax(0, .9fr) 120px; align-items: baseline; column-gap: clamp(14px, 2vw, 30px); padding: clamp(16px, 1.8vw, 24px) 0; border-bottom: 1px solid var(--hairline); transition: border-color var(--morph); }
.bi-n { font-family: var(--serif); font-size: 13px; color: var(--gold); letter-spacing: .06em; }
.bi-name { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.01em; transition: transform .5s var(--ease-exp), color .4s ease; }
.bi-act { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: clamp(18px, 1.7vw, 24px); color: var(--crimson); opacity: .85; transition: opacity .4s ease; }
.bi-geo { font-family: var(--caps); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; opacity: .5; text-align: right; }
.bi-spec { grid-column: 2 / 5; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-exp), opacity .4s ease; opacity: 0; }
.bi-spec > span { overflow: hidden; display: block; font-size: 13.5px; line-height: 1.6; opacity: .7; max-width: 60ch; }
@media (hover: hover) {
  .brands-index li:hover .bi-name { transform: translateX(8px); }
  .brands-index li:hover .bi-act { opacity: 1; }
  .brands-index li:hover .bi-spec { grid-template-rows: 1fr; opacity: 1; padding-top: 8px; }
}
@media (hover: none) { .bi-spec { grid-template-rows: 1fr; opacity: 1; padding-top: 6px; } }
.brands-index.stagger:not(.is-in) > li { opacity: 0; }
@media (max-width: 700px) {
  .brands-index li { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 2px; padding: 16px 0; }
  .bi-name { grid-column: 2; font-size: 24px; }
  .bi-geo { grid-column: 3; grid-row: 1; }
  .bi-act { grid-column: 2 / 4; grid-row: 2; font-size: 18px; }
  .bi-spec { grid-column: 2 / 4; grid-row: 3; }
}
/* футер на мобилке: «Документы» на всю ширину в две колонки — без пустого столбца */
@media (max-width: 860px) {
  .foot-col[aria-label="Документы"] { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; row-gap: 10px; }
  .foot-col[aria-label="Документы"] .foot-h { grid-column: 1 / -1; }
  .foot-top { row-gap: 30px; }
}

/* ---------- шапка v3: люкс-минимализм — словесный знак, текстовый призыв с тонкой линией, бургер без рамки ---------- */
.header-phone, .header-phone.magnetic {
  margin-left: auto; border: 0; border-radius: 0; background: transparent; padding: 8px 0 7px; position: relative;
  font-family: var(--caps); font-weight: 400; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: inherit;
  transition: color .35s ease;
}
.header-phone::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: var(--gold); opacity: .8; transform-origin: right; transition: transform .55s var(--ease-exp), opacity .3s ease; }
.header-phone:hover { background: transparent; border-color: transparent; color: var(--gold); }
@media (hover: hover) { .header-phone:hover::after { transform: scaleX(0); } }
.nav { margin-left: auto; margin-right: clamp(24px, 3vw, 48px); }
.burger { border: 0; border-radius: 0; width: 40px; height: 40px; margin-left: 18px; background: transparent; }
.burger span { left: 8px; right: 8px; height: 1px; }
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 23px; }
.burger.is-open span:first-child, .burger.is-open span:last-child { top: 19.5px; }
@media (max-width: 900px) { .header-phone, .header-phone.magnetic { font-size: 9.5px; letter-spacing: .2em; margin-right: 2px; } .burger { margin-left: 14px; margin-right: -8px; } }
@media (max-width: 480px) {
  .logo-name { display: inline; font-size: 10px; letter-spacing: .26em; }
  .logo { gap: 10px; }
  .logo-mark { width: 36px; height: 36px; font-size: 13px; }
  .header-phone, .header-phone.magnetic { font-size: 9px; letter-spacing: .16em; }
}
@media (max-width: 360px) { .logo-name { display: none; } }
.header-phone, .header-phone.magnetic { padding: 13px 0 12px; }
.header-phone::after { bottom: 8px; }
body.menu-open .header-phone { opacity: 0; pointer-events: none; transition: opacity .3s ease; }

/* ---------- правки по замечаниям: хронология, бургер, фото, ритуал, марки ---------- */
/* 1. луч и трек всегда ПОД кружками; сам шаг не двигается трансформом (иначе создаёт stacking context и луч ложится поверх) */
.tl.v2::before, .tl.v2::after { z-index: 0; }
.tl.v2 .tl-step { position: relative; z-index: 1; opacity: 1 !important; transform: none !important; }
.tl.v2 .tl-step > * { opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .8s var(--ease-exp); }
.tl.v2.is-in .tl-step > * { opacity: 1; transform: none; }
.tl.v2.is-in .tl-step:nth-child(1) > * { transition-delay: .05s; } .tl.v2.is-in .tl-step:nth-child(2) > * { transition-delay: .15s; }
.tl.v2.is-in .tl-step:nth-child(3) > * { transition-delay: .25s; } .tl.v2.is-in .tl-step:nth-child(4) > * { transition-delay: .35s; }
.tl.v2 .tl-step::before { z-index: 2; }
/* 2. бургер наследует цвет (в iOS Safari у button системный синий) */
.burger { color: inherit; -webkit-appearance: none; appearance: none; }
/* 3. фото-композиция: бутылка не по центру, а сдвинута вправо и крупнее; сыворотка крупнее слева */
.cosm-photo img { object-position: 62% 50%; transform: scale(1.12); transform-origin: 60% 50%; }
.cosm-photo-2 { width: 21%; left: 6%; bottom: 6%; }
@media (max-width: 860px) { .cosm-photo img { object-position: 66% 50%; transform: scale(1.18); } .cosm-photo-2 { width: 30%; left: -2%; bottom: 4%; } }
/* ритуал: переключение — строки уходят и приходят мягко, высота панели анимируется из JS */
.rt-panels { overflow: hidden; }
.rt-steps { transition: opacity .35s ease; transform: none; }
.rt-steps.is-on li { animation: rtIn .55s var(--ease-exp) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rtIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* 4. марки: две строки видны, шесть — под шевроном */
.bi-extra { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-exp); }
.bi-extra > div { overflow: hidden; min-height: 0; }
.bi-extra.is-open { grid-template-rows: 1fr; }
.brands-index--rest { border-top: 0; }
.brands-index--rest li { opacity: 1; }
.bi-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 10px 0; border: 0; background: transparent; cursor: pointer; font-family: var(--caps); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.bi-more svg { transition: transform .5s var(--ease-exp); }
.bi-more.is-open svg { transform: rotate(180deg); }
/* круг меню: центр — из JS (центр бургера), по вертикали тоже */
.mmenu { clip-path: circle(0px at var(--cx) var(--cy, 42px)); }
.mmenu.on { clip-path: circle(170% at var(--cx) var(--cy, 42px)); }
/* ритуал: старый список уходит быстро, новые строки приходят после — без наложения текстов */
.rt-steps { transition: opacity .18s ease; }
.rt-steps.is-on { transition: opacity .25s ease .12s; }
.rt-steps.is-on li { animation-delay: calc(140ms + var(--i, 0) * 45ms); }

/* ---------- правки: гель со сдвигом, шеврон марок с кольцами, меню поверх подложки шапки при сворачивании ---------- */
/* 1. гель заметно правее центра (у фото и рамки одна пропорция — object-position не двигает, нужен перенос) */
.cosm-photo img { object-position: 50% 50%; transform: translateX(11%) scale(1.16); transform-origin: 50% 50%; }
@media (max-width: 860px) { .cosm-photo img { transform: translateX(14%) scale(1.22); } .cosm-photo-2 { width: 32%; left: -3%; bottom: 3%; } }
/* 2. марки: шеврон напротив заголовка, без слов, с расходящимися кольцами */
.brands-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(44px, 6vw, 84px); }
.brands-head .brands-h { margin: 0; }
.bi-more { position: relative; width: 44px; height: 44px; margin: 0; padding: 0; border: 1px solid rgba(203, 163, 95, .55); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); background: transparent; flex: none; }
.bi-more svg { position: relative; z-index: 1; }
.bi-more .ring { position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); opacity: 0; pointer-events: none; animation: biRing 2.6s ease-out infinite; }
.bi-more .ring:nth-child(2) { animation-delay: 1.3s; }
@keyframes biRing { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
.bi-more.is-open .ring { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .bi-more .ring { animation: none; } }
/* 4. пока меню сворачивается, подложка шапки скрыта — круг виден до конца */
body.menu-closing #header::before { opacity: 0 !important; }
body.menu-closing #header { color: var(--ivory); }
/* гель: сдвиг вправо должен переживать состояние .shutter.is-in (там свой transform scale(1)) */
.cosm-photo.shutter img { transform: translateX(11%) scale(1.32); }
.cosm-photo.shutter.is-in img { transform: translateX(11%) scale(1.16); }
@media (max-width: 860px) {
  .cosm-photo.shutter img { transform: translateX(15%) scale(1.4); }
  .cosm-photo.shutter.is-in img { transform: translateX(15%) scale(1.24); }
}
/* гель и сыворотка — оба внутри рамки: гель правее центра без обрезки, сыворотка в левом нижнем углу рамки */
.cosm-photo.shutter img, .cosm-photo.shutter.is-in img { transform: translateX(12%) scale(1.02); }
.cosm-photo .cosm-photo-2 { position: absolute; left: 6%; bottom: 6%; width: 27%; margin: 0; z-index: 3; transform: none; opacity: 1; }
.cosm-photo .cosm-photo-2 img { width: 100%; height: auto; display: block; object-fit: contain; transform: none !important; filter: drop-shadow(0 16px 26px rgba(46, 26, 30, .26)); }
@media (max-width: 860px) { .cosm-photo.shutter img, .cosm-photo.shutter.is-in img { transform: translateX(13%) scale(1.02); } .cosm-photo .cosm-photo-2 { width: 31%; left: 6%; bottom: 6%; } }
.cosm-photo .cosm-photo-2 { width: 21%; left: 7%; bottom: 7%; }
@media (max-width: 860px) { .cosm-photo .cosm-photo-2 { width: 24%; left: 7%; bottom: 7%; } }

/* ---------- правки: звёздочки Meta, шеврон марок без ободка, сыворотка ближе к гелю ---------- */
sup.mark { font-size: .62em; line-height: 0; margin-left: 1px; color: var(--gold); vertical-align: super; }
.meta-note { font-size: 10.5px; opacity: .38; max-width: 70ch; margin-top: 8px; }
@media (max-width: 860px) { .meta-note { max-width: none; } }
/* шеврон марок: без ободка, кольца расходятся от центра; линии под заголовком нет */
.bi-more { border: 0; background: transparent; }
.bi-more .ring { inset: 14px; border-color: rgba(203, 163, 95, .7); animation: biRing2 2.4s ease-out infinite; }
.bi-more .ring:nth-child(2) { animation-delay: 1.2s; }
@keyframes biRing2 { 0% { transform: scale(.6); opacity: .7; } 75% { transform: scale(3.2); opacity: 0; } 100% { transform: scale(3.2); opacity: 0; } }
.brands-index { border-top: 0; }
.brands-index li:first-child { border-top: 0; }
/* сыворотка ближе к гелю */
.cosm-photo .cosm-photo-2 { left: 13%; }
@media (max-width: 860px) { .cosm-photo .cosm-photo-2 { left: 14%; } }
.lb-close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 36px; padding: 0; top: 10px; right: 12px; z-index: 5; }
/* флаконы: гель ещё правее, сыворотка ещё правее (внутри рамки) */
.cosm-photo.shutter img, .cosm-photo.shutter.is-in img { transform: translateX(16%) scale(1.02); }
.cosm-photo .cosm-photo-2 { left: 22%; }
@media (max-width: 860px) { .cosm-photo.shutter img, .cosm-photo.shutter.is-in img { transform: translateX(17%) scale(1.02); } .cosm-photo .cosm-photo-2 { left: 24%; } }
/* hero: акцент «с себя» насыщеннее и читаемее поверх видео */
.hero-title .accent { color: #ea7a90; text-shadow: 0 2px 28px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .35); }
/* «Подобрать мой уход» — бордовая заливка, как логотип */
#cosmetics .cosmetics-cta .btn-outline { background: var(--crimson); border-color: var(--crimson); color: #fff; transition: background-color .35s ease, border-color .35s ease, transform .5s var(--ease-exp), box-shadow .5s ease; }
#cosmetics .cosmetics-cta .btn-outline:hover { background: #6f0020; border-color: #6f0020; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 0, 37, .25); }
/* «с себя» без тени; сыворотка чуть левее */
.hero-title .accent { text-shadow: none; }
.cosm-photo .cosm-photo-2 { left: 20%; }
@media (max-width: 860px) { .cosm-photo .cosm-photo-2 { left: 22%; } }
/* номер коллекции за рамкой фото аппарата («ушки») убран — он дублирует kicker «Коллекция · N из 07» */
.dev-photo .idx { display: none; }

/* ---------- марки: раскрытие по высоте; сцена фото аппарата без зависимости от blend-режима ---------- */
.bi-extra, .bi-extra.is-open { display: block; height: 0; overflow: hidden; grid-template-rows: none; transition: height .6s var(--ease-exp); }
.bi-extra > div { overflow: visible; }
/* сцена hero: белый фон в тон снимку, глубина и тень — слоем поверх (одинаково в Safari и Chrome) */
.dev-photo .device-frame { background: #fff; }
.dev-photo .device-frame::before { display: none; }
.dev-photo .device-frame::after {
  display: block; content: ''; position: absolute; inset: 0; border: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background:
    radial-gradient(ellipse 34% 6% at 50% 91%, rgba(46, 26, 30, .20), rgba(46, 26, 30, .06) 50%, transparent 75%),
    radial-gradient(110% 100% at 50% 40%, transparent 55%, rgba(46, 26, 30, .075) 100%);
  box-shadow: inset 0 0 0 1px rgba(138, 0, 37, .06);
}
.dev-photo .device-frame img { will-change: auto; }
.dev-thumbs button { background: #fff; }
/* чертёж в характеристиках: сетка — слоем поверх, фон белый */
.bp-stage { background-color: #fff; background-image: none; }
.bp-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-image: linear-gradient(rgba(138, 0, 37, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(138, 0, 37, .045) 1px, transparent 1px); background-size: 40px 40px; background-position: center; }
.bp-dim, .bp-depth { z-index: 3; }
/* хронология на мобилке: точка строго по центру подписи этапа (курсив 27px даёт высоту строки 44px) */
@media (max-width: 900px) { .tl.v2 .tl-step:nth-child(n)::before, .tl.v2 .tl-step::after { top: 14px; } }
/* «Спросить об аппарате» в hero аппарата — бордовая заливка, как логотип */
.dev-buy .btn-outline { background: var(--crimson); border-color: var(--crimson); color: #fff; transition: background-color .35s ease, border-color .35s ease, transform .5s var(--ease-exp), box-shadow .5s ease; }
.dev-buy .btn-outline:hover { background: #6f0020; border-color: #6f0020; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 0, 37, .25); }
/* вертикальная хронология: трек и луч от центра первой точки до центра последней (координаты из JS) */
@media (max-width: 900px) { .tl.v2::before, .tl.v2::after, .tl.v2.is-in::after { top: var(--tl-top, 21px); bottom: var(--tl-bottom, 8px); } }

/* ---------- «Смотреть аппарат» у Zeus III — бордовая заливка со стрелкой; hero компактнее на невысоких экранах ---------- */
.featured-cta .btn-outline, .featured .btn-outline { display: inline-flex; align-items: center; gap: 12px; background: var(--crimson); border-color: var(--crimson); color: #fff; border-radius: 100px; padding: 15px 26px; transition: background-color .35s ease, border-color .35s ease, transform .5s var(--ease-exp), box-shadow .5s ease; }
.featured-cta .btn-outline svg, .featured .btn-outline svg { transition: transform .4s var(--ease-exp); }
.featured-cta .btn-outline:hover, .featured .btn-outline:hover { background: #6f0020; border-color: #6f0020; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 30px rgba(138, 0, 37, .25); }
.featured-cta .btn-outline:hover svg, .featured .btn-outline:hover svg { transform: translateX(5px); }
/* hero на телефоне: высота — окно целиком, отступы и дорожка карточки — от высоты экрана (шрифты неизменны) */
@media (max-width: 860px) {
  html.android #hero { padding-top: clamp(84px, 12svh, 110px); padding-bottom: clamp(14px, 3svh, 48px); }
  html.android .hero-card { margin-top: clamp(12px, 2.6svh, 26px); }
  html.android .hc-track { height: clamp(148px, 21svh, 178px); }
}
/* hero: «Косметолог Наталья Бугук» — всегда одной строкой (на узких экранах чуть плотнее разрядка) */
.kicker-2l .kcol > span:first-child { white-space: nowrap; }
@media (max-width: 480px) {
  .kicker-2l { font-size: clamp(9px, 2.9vw, 12px); letter-spacing: clamp(.16em, .9vw, .32em); gap: 12px; }
  .kicker-2l::before { width: 28px; }
}
@media (max-width: 360px) { .kicker-2l { font-size: 9px; letter-spacing: .14em; } .kicker-2l::before { width: 22px; } }
/* iPhone/не-Android: hero всегда во весь экран — минимум полная высота окна даже при свёрнутых панелях Safari */
@media (max-width: 860px) { html:not(.android) #hero { min-height: 100vh; min-height: 100lvh; } }
/* меню: две кнопки — MAX и Telegram */
.mmenu-cta2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mmenu-cta2 .btn-fill { width: 100%; text-align: center; justify-content: center; padding-left: 12px; padding-right: 12px; }
/* подменю разделов на страницах аппаратов убрано полностью (и на десктопе) */
.secnav, .dev-page .secnav { display: none !important; }
/* без отдельного движения картинок внутри карточек: ритуал (двигается только карточка целиком) и чертёж характеристик */
@media (hover: hover) {
  .rcard:hover .rprod-img img, .rcard:hover .rdev img { transform: none; }
  .spec-wrap.is-in .bp-stage:hover img, .bp-stage:hover img { transform: translate(-50%, -50%); }
}
.rprod-img img, .rdev img, .bp-stage img { transition: none; }
/* предыдущий / следующий: миниатюра при наведении неподвижна */
@media (hover: hover) {
  .dev-page .dev-nav a:hover .dn-thumb { transform: none; box-shadow: none; border-color: rgba(203, 163, 95, .55); }
  .dev-page .dev-nav a:hover .dn-thumb img { transform: none; }
}
.dn-thumb, .dn-thumb img { transition: border-color .4s ease; }
/* противопоказания: без двойной линии внизу — у последнего ряда нет своей границы, у списка есть нижний отступ */
details.contra .contra-body > ul.effects-cols { padding-bottom: 26px; }
details.contra .effects-cols li:last-child { border-bottom: 0; }
@media (min-width: 701px) { details.contra .effects-cols li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } }
/* панель покупки на десктопе — плавающая капсула справа снизу, а не полоса с пустой половиной */
@media (min-width: 901px) {
  .buybar { left: auto; right: var(--pad); bottom: 22px; width: auto; padding: 10px 10px 10px 24px; gap: 20px; border: 1px solid var(--hairline); border-radius: 100px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }
  .buybar .bb-price { margin-left: 0; font-size: 18px; }
  .buybar .btn-fill { padding: 12px 20px; }
}

/* ── подарочный сертификат: заметная карточка (лендинг + панель оплаты на страницах аппаратов) ── */
.gift-visual {
  position: relative; aspect-ratio: 1.6 / 1; width: 100%; max-width: 300px; border-radius: 12px;
  background: linear-gradient(135deg, #5f0019 0%, var(--crimson) 55%, #a5103a 100%);
  color: var(--cream); padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 0 0 1px rgba(203,163,95,.45);
  transform: rotate(-4deg); transition: transform .6s var(--ease-exp);
  overflow: hidden;
}
.gift-visual::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(203,163,95,.55); border-radius: 8px; pointer-events: none; }
.gift-visual::before { content: ''; position: absolute; top: -40%; right: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.18), transparent 65%); }
.gift-mark { font-family: var(--serif); font-size: 26px; letter-spacing: .06em; color: var(--gold); }
.gift-line { font-family: var(--caps); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; opacity: .85; }
.gift-sum { font-family: 'Cormorant Garamond', var(--serif); font-style: italic; font-size: 20px; color: var(--gold); margin-top: -12px; }
.gift-card:hover .gift-visual, .pay-gift:hover .gift-visual { transform: rotate(-1deg) translateY(-4px); }

/* лендинг: карточка под сеткой коллекции */
.gift-card {
  display: grid; grid-template-columns: minmax(220px, .38fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  margin-top: clamp(28px, 3.4vw, 48px); padding: clamp(28px, 4vw, 56px);
  background: #f7f2ea; color: var(--ink-text); border: 1px solid var(--gold); border-radius: 10px;
  text-decoration: none; transition: opacity .9s ease, transform 1s var(--ease-exp), background-color .45s ease, border-color .45s ease;
}
.gift-card:hover { background: #efe7d8; }
.gift-card .gift-visual { margin: 0 auto; }
.gift-card .kicker { color: var(--crimson); margin-bottom: 16px; }
.gift-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); line-height: 1.15; margin-bottom: 16px; text-wrap: balance; }
.gift-card h3 em { font-style: italic; font-family: 'Cormorant Garamond', var(--serif); color: var(--crimson); }
.gift-card p:not(.kicker) { font-size: 15px; line-height: 1.7; opacity: .8; max-width: 52ch; margin-bottom: 26px; }
.gift-card .btn-outline { color: var(--ink-text); border-color: rgba(46,26,30,.35); }
.gift-card .btn-outline svg { vertical-align: -1px; margin-left: 6px; }
@media (max-width: 760px) {
  .gift-card { grid-template-columns: 1fr; gap: 28px; }
  .gift-card .gift-visual { max-width: 260px; margin: 0; }
}

/* страницы аппаратов: строка в панели оплаты */
.pay-gift {
  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(200px, .32fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 48px); align-items: center;
  margin-top: clamp(8px, 1.5vw, 16px); padding: clamp(22px, 3vw, 38px);
  border: 1px solid var(--gold); border-radius: 8px; background: rgba(203,163,95,.08);
}
.pay-gift .gift-visual { max-width: 240px; margin: 0 auto; padding: 16px 18px; }
.pay-gift .gift-mark { font-size: 22px; }
.pay-gift .gift-sum { font-size: 18px; }
.pay-gift-k { font-family: var(--caps); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--crimson); margin-bottom: 10px; }
.pay-gift-t { font-family: var(--serif); font-size: clamp(20px, 2vw, 28px); line-height: 1.2; margin-bottom: 10px; text-wrap: balance; }
.pay-gift-body > p:not(.pay-gift-k):not(.pay-gift-t) { font-size: 14px; line-height: 1.6; opacity: .75; max-width: 52ch; margin-bottom: 20px; }
.pay-gift .btn-outline { color: var(--ink-text); border-color: rgba(46,26,30,.35); padding: 14px 26px; font-size: 11px; }
.pay-gift .btn-outline svg { vertical-align: -1px; margin-left: 6px; }
@media (max-width: 760px) {
  .pay-gift { grid-template-columns: 1fr; }
  .pay-gift .gift-visual { margin: 0; max-width: 220px; }
}

/* LED SET: список отличий в ленте-манифесте */
.manifest-list { list-style: none; margin-top: clamp(18px, 2.4vw, 30px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
.manifest-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.6; opacity: .82; }
.manifest-list li::before { content: '✦'; position: absolute; left: 0; top: 2px; color: var(--gold); font-size: 12px; }
@media (max-width: 720px) { .manifest-list { grid-template-columns: 1fr; } }

/* Zeus II Red: выделенная строка усиленного RF */
.dict-row.dict-hi { padding: clamp(18px, 2.4vw, 28px); border: 1px solid var(--gold); border-radius: 8px; background: rgba(203,163,95,.08); }
.dict-row.dict-hi b { color: var(--gold); -webkit-text-stroke: 0; }
.dict-row.dict-hi .dict-def { opacity: .92; }
.dict-badge { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 100px; background: var(--gold); color: var(--black); font-family: var(--caps); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.dict-row.dict-hi .dict-def .dict-badge { display: block; width: max-content; }
.dict-row b.dict-b-sm { font-size: clamp(34px, 4.4vw, 68px); white-space: nowrap; }

/* Safari: при кроссфейде ракурсов углы фото на долю секунды вылезали за скруглённую рамку — маска заставляет клипить всегда */
.dev-photo .device-frame { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); transform: translateZ(0); }
.gift-card .btn-outline, .pay-gift .btn-outline { white-space: nowrap; }

/* сертификат: единый радиус у карточки, «пластиковой» карты и панели; кнопка — пилюля, как основной CTA на страницах аппаратов */
.gift-card, .pay-gift { border-radius: 14px; }
.gift-visual { border-radius: 14px; }
.gift-visual::after { border-radius: 9px; }

/* сертификат: два мессенджера */
.gift-actions { display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; }
.gift-card { cursor: default; }
/* вторая строка ленты-манифеста (Caviet) */
.dev-manifest-band .dev-manifest.dev-manifest-sub { margin-top: 16px; font-size: clamp(16px, 1.4vw, 20px); opacity: .78; }

/* бегущая по контуру обводка: реальный слой с conic-gradient крутится через transform — работает и в iOS Safari */
.btn-run { position: relative; border-radius: 100px; border: 1px solid transparent; padding: 15px 30px; isolation: isolate; overflow: visible; transition: color .35s, background-color .35s; }
.btn-run::before { display: none; }
.run-ring { position: absolute; inset: -2px; border-radius: inherit; overflow: hidden; z-index: -1; pointer-events: none;
  padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.run-ring i { position: absolute; left: 50%; top: 50%; width: 180%; aspect-ratio: 1; margin: -90% 0 0 -90%;
  background: conic-gradient(from 0deg, transparent 0 50%, rgba(203,163,95,.35) 62%, var(--gold) 72%, var(--crimson) 84%, transparent 94%);
  animation: runRing 3.4s linear infinite; }
.btn-run + .btn-run .run-ring i { animation-delay: -1.7s; }
@keyframes runRing { to { transform: rotate(360deg); } }
.btn-run:hover { background: var(--crimson); color: #fff; }
@media (prefers-reduced-motion: reduce) { .run-ring i { animation: none; } }
.gift-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
.gift-actions .btn-run { width: min(100%, 300px); box-sizing: border-box; text-align: center; }
.gift-card .btn-run, .pay-gift .btn-run { border-color: transparent; }
.gift-card .btn-run:hover, .pay-gift .btn-run:hover { border-color: var(--crimson); }

/* ===== аудит 2026-09-04: доступность, no-JS, safe-area, скорость ===== */
/* без JavaScript контент виден, лоадер и курсор не показываются */
html:not(.js) .reveal, html:not(.js) .lines .line > span, html:not(.js) .stagger > *, html:not(.js) .shutter img, html:not(.js) .cell-reveal, html:not(.js) .fx-grid li, html:not(.js) .fx-grid .fx-n { opacity: 1 !important; transform: none !important; animation: none !important; }
html:not(.js) .shutter { clip-path: none !important; }
html:not(.js) #loader, html:not(.js) #cursor, html:not(.js) .page-curtain { display: none !important; }
/* safe-area: шапка и мобильное меню в standalone-режиме и ландшафте iPhone */
#header { padding-top: calc(20px + env(safe-area-inset-top, 0px)); padding-left: calc(var(--pad) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--pad) + env(safe-area-inset-right, 0px)); }
.mmenu { padding-top: calc(92px + env(safe-area-inset-top, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
/* контраст мелкого текста на кремовом фоне: золото и роза темнее, чтобы держать 4.5:1 */
:root { --gold-text: #7f6434; --rose-text: #ad4356; }
.back-link, .manifest-label, .dev-thumbs button, .tl.v2 .tl-step:not(.lit) .tl-when { color: var(--gold-text); }
body[data-theme="dark"] .back-link, body[data-theme="dark"] .manifest-label, body[data-theme="dark"] .tl.v2 .tl-step:not(.lit) .tl-when { color: var(--gold); }
.dev-tagline, .marquee-track i { color: var(--rose-text); }
.dev-pay-hint { opacity: .72; }
.dev-note { opacity: .74; }
.faq .kicker { color: var(--gold); }
/* заголовок «Почему именно он» стал h2 — визуально прежний лейбл */
h2.manifest-label { margin: 0; font-weight: 400; line-height: 1.4; }
/* лоадер уходит быстрее: контент под ним уже готов */
#loader { transition: transform .8s cubic-bezier(.76, 0, .24, 1), visibility .8s; }
body.via-curtain #loader { transition-duration: .7s; }
/* курсор двигается через transform, без layout на каждом кадре */
#cursor { will-change: transform; }
#faq .kicker { color: var(--gold); }
.marquee-track span i, .marquee i { color: var(--rose-text); }
.doc-meta { opacity: .8; }
#loader { transition: transform .65s cubic-bezier(.76, 0, .24, 1), visibility .65s; }
.marquee span i { -webkit-text-stroke: 1px var(--rose-text); }
.doc .doc-meta { opacity: .8; }
/* маркиза стоит на тёмном фоне: контур светлее, заливка прозрачная, как задумано */
.marquee span i, .marquee-track span i, .marquee i { color: transparent; -webkit-text-stroke: 1px #d97889; }
#faq .faq-left .kicker, #faq .kicker.reveal { color: var(--gold); }
#faq .faq-left .kicker { opacity: 1; }
.doc td:first-child { font-size: 12px; opacity: .85; }

/* ---------- cookie-баннер ---------- */
.consent {
  position: fixed; left: 20px; bottom: 20px; z-index: 180;
  width: min(372px, calc(100% - 40px)); padding: 20px 22px calc(18px + env(safe-area-inset-bottom, 0px));
  background: var(--cream); color: var(--ink-text);
  border: 1px solid rgba(203,163,95,.55); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(18,16,19,.28), 0 2px 8px rgba(18,16,19,.08);
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .55s ease, transform .7s var(--ease-exp);
}
.consent::before { content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .9; }
.consent.on { opacity: 1; transform: none; pointer-events: auto; }
.consent-t { font-family: var(--serif); font-size: 17px; line-height: 1.2; margin: 0 0 8px; }
.consent-x { font-family: var(--sans); font-size: 13px; line-height: 1.55; opacity: .82; margin: 0 0 16px; }
.consent-x a { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(138,0,37,.4); }
.consent-x a:hover { text-decoration-color: var(--crimson); }
.consent-a { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.consent-ok { font-family: var(--caps); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fff; background: var(--crimson); border: 0; border-radius: 100px; padding: 13px 24px; cursor: pointer; transition: background-color .3s ease, transform .4s var(--ease-exp); }
.consent-ok:hover { background: var(--crimson-h); transform: translateY(-1px); }
.consent-no { font-family: var(--caps); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; background: none; border: 0; border-bottom: 1px solid rgba(46,26,30,.28); padding: 6px 0 4px; color: var(--ink-text); opacity: .72; cursor: pointer; transition: opacity .3s, border-color .3s; }
.consent-no:hover { opacity: 1; border-color: var(--ink-text); }
.consent-ok:focus-visible, .consent-no:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) {
  .consent { left: 12px; right: 12px; bottom: 12px; width: auto; border-radius: 16px; }
  .dev-page .consent { bottom: calc(12px + 82px + env(safe-area-inset-bottom, 0px)); } /* над панелью покупки */
}
@media (prefers-reduced-motion: reduce) { .consent { transition: opacity .2s; transform: none; } }
/* компактнее: два ряда текста, меньше шрифт и отступы */
.consent { padding: 16px 18px calc(14px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100% - 40px)); }
.consent-t { font-size: 15px; margin-bottom: 5px; }
.consent-x { font-size: 12px; line-height: 1.5; margin-bottom: 12px; }
.consent-ok { padding: 11px 20px; font-size: 10.5px; }
.consent-no { font-size: 10px; }
@media (max-width: 600px) { .consent { padding: 14px 16px calc(12px + env(safe-area-inset-bottom, 0px)); } }
/* одна строка текста, как у Т-Банка / hh: без заголовка */
.consent { width: min(360px, calc(100% - 40px)); padding: 16px 18px calc(16px + env(safe-area-inset-bottom, 0px)); }
.consent-x { font-size: 13px; line-height: 1.5; margin-bottom: 12px; opacity: .9; }
@media (max-width: 600px) { .consent { padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- скролл без рывков ----------
   секции вне экрана не участвуют в пересчёте стилей и раскладке (content-visibility);
   первый экран исключён — там видео и частицы. contain-intrinsic-size даёт оценку высоты до рендера */
main > section:not(#hero):not(.dev-hero), .dev-why, .dev-manifest-band { content-visibility: auto; contain-intrinsic-size: auto 900px; } /* footer исключён: он в зоне видимости с первого кадра и оценка высоты давала сдвиг макета */
html.cv-off main > section, html.cv-off .dev-why, html.cv-off .dev-manifest-band { content-visibility: visible !important; }
/* монограмма BH: у Prata верхние выносные толкают буквы выше центра круга — компенсация по вертикали (измерено по пикселям) */
.loader-mark { padding-top: .225em; }
.logo-mark { padding-top: .3em; }
/* мелкий текст подвала: контраст не ниже 4.5:1 на тёмном */
footer#footer .foot-fine p, footer#footer .foot-fine p + p, footer#footer .foot-fine p + p + p { color: rgba(244, 239, 232, .66); opacity: 1; }

/* ---------- доводка после просмотра на ПК (2026-09-05) ---------- */
/* подводка в hero на десктопе крупнее */
@media (min-width: 901px) { #hero .hero-lead, .hero .hero-lead, .hero-lead { font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.65; max-width: 42ch; color: rgba(244,239,232,.86); } }
/* страница аппарата: между лентой о бренде и «Почему именно он» была двойная линия */
.dev-why { border-top: 0; padding-top: clamp(20px, 2.6vw, 34px); }
/* число в .spec-key при счётчике тоже держит ширину */
.spec-key b { display: inline-block; }
/* единый радиус крупных «карточек»: сетка коллекции, панель оплаты, сертификат */
.type-grid { border-radius: 14px; overflow: hidden; }
.pay-panel { border-radius: 14px; }