/* Фирменные шрифты Nexa (полный лицензионный пакет заказчика; subset latin+cyr) */
@font-face{ font-family:"Nexa"; src:url("../fonts/nexa-text.woff?v=14") format("woff"); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:"Nexa"; src:url("../fonts/nexa-bold.woff?v=14") format("woff"); font-weight:700; font-style:normal; font-display:swap; }

/* =====================================================================
   НЕЙРОАКС — клиника лечения боли. Дизайн-система.
   Палитра: «чернила + бирюза». Один акцент. Светлая тема + петролевые блоки.
   Радиусы: кнопки — pill, карточки — 20px, инпуты — 12px.
   Шрифт: Onest (нативная кириллица).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Палитра по Гайдлайну НЕЙРОАКС v1.0 (2024): 50% белый / 25% светло-серый / 20% красный / 5% чёрный */
  --ink:        #0D0802;   /* фирменный чёрный */
  --ink-2:      #3E393A;   /* тёмно-серый (текстовые блоки) */
  --muted:      #545352;   /* серый */
  --line:       #e2e2e2;
  --line-soft:  #efefef;

  --bg:         #f4f4f4;   /* светло-серый фон (25% колорита) */
  --surface:    #ffffff;   /* белый (50%) */
  --mint:       #f0f0f0;   /* нейтральная подложка для иконок */
  --mint-2:     #e2e2e2;
  --tint-red:   rgba(220,13,21,.08);

  --accent:     #DC0D15;   /* фирменный красный (20%) */
  --accent-600: #A81815;   /* фирменный тёмно-красный */
  --accent-700: #A81815;
  --accent-ink: #A81815;

  --deep:       #0D0802;   /* тёмные блоки — фирменный чёрный из палитры */
  --deep-2:     #3E393A;   /* графитовый из палитры (пара в градиентах) */
  --deep-line:  rgba(255,255,255,.12);

  --warn:       rgba(220,13,21,.08);

  --r-card: 20px;
  --r-lg:   28px;
  --r-input:12px;
  --r-chip: 999px;

  --shadow-sm: 0 1px 2px rgba(13,8,2,.05), 0 2px 6px rgba(13,8,2,.04);
  --shadow:    0 8px 24px rgba(13,8,2,.08), 0 2px 6px rgba(13,8,2,.05);
  --shadow-lg: 0 30px 70px -24px rgba(13,8,2,.28), 0 10px 28px -16px rgba(13,8,2,.20);
  --shadow-teal: 0 18px 40px -16px rgba(220,13,21,.40);

  --maxw: 1240px;
  --gut: clamp(20px, 4vw, 56px);

  /* Гайдлайн: Nexa (заголовки Bold / текст Regular). Веб-аналог с качественной кириллицей — Montserrat */
  --font: "Nexa", "Montserrat", "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  font-size:clamp(15px,.6vw + 14px,17px); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; }
input,textarea,select{ font-family:inherit; font-size:1rem; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--accent); color:#fff; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- Typography (Nexa-манера: геометрический гротеск) ---------- */
.display{
  font-weight:700; line-height:1.06; letter-spacing:-.018em;
  font-size:clamp(2.2rem,1.15rem + 4.1vw,4.1rem);
}
.h1{ font-weight:700; line-height:1.09; letter-spacing:-.015em; font-size:clamp(1.85rem,1.2rem + 2.7vw,3.05rem); }
.h2{ font-weight:700; line-height:1.12; letter-spacing:-.012em; font-size:clamp(1.6rem,1.1rem + 2vw,2.45rem); }
.h3{ font-weight:600; line-height:1.2; letter-spacing:0; font-size:clamp(1.2rem,.9rem + 1vw,1.55rem); }
.lead{ font-size:clamp(1.05rem,.95rem + .5vw,1.3rem); color:var(--ink-2); line-height:1.5; }
.muted{ color:var(--muted); }
.accent-text{ color:var(--accent-700); }
.balance{ text-wrap:balance; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,7vw,120px); }
.section--tight{ padding-block:clamp(48px,5vw,80px); }
.stack > * + *{ margin-top:1rem; }
.center{ text-align:center; }
.grid{ display:grid; gap:24px; }

.section-head{ max-width:760px; }
.section-head.center{ margin-inline:auto; }
/* Красный капс-лейбл — паттерн заголовков-подписей из гайдлайна */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent); background:none; padding:0; border:0; border-radius:0;
}
.eyebrow svg{ width:16px; height:16px; }
.section-head .h2{ margin-top:18px; }
.section-head p{ margin-top:14px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-weight:600; font-size:1rem; line-height:1; white-space:nowrap;
  padding:16px 26px; border-radius:var(--r-chip);
  transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  will-change:transform;
}
.btn svg{ width:18px; height:18px; flex:none; }
.btn:active{ transform:translateY(1px) scale(.985); }
.btn--primary{ background:var(--accent); color:#fff; box-shadow:var(--shadow-teal); }
.btn--primary:hover{ background:var(--accent-600); transform:translateY(-2px); box-shadow:0 22px 46px -16px rgba(220,13,21,.6); }
.btn--ink{ background:var(--ink); color:#fff; }
.btn--ink:hover{ background:#3E393A; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent-700); background:var(--surface); }
.btn--light{ background:#fff; color:var(--deep); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn--on-deep-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1.5px solid rgba(255,255,255,.22); }
.btn--on-deep-ghost:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.4); }
.btn--sm{ padding:11px 18px; font-size:.92rem; }
.btn--lg{ padding:18px 32px; font-size:1.06rem; }
/* на самых узких экранах (320px) крупная кнопка с длинной подписью
   не помещалась в контейнер — ужимаем отступы и разрешаем перенос */
@media (max-width:360px){
  .btn{ max-width:100%; }
  .btn--lg{ padding:16px 20px; font-size:1rem; }
}
.btn--block{ width:100%; }

.link-arrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--accent-700); }
.link-arrow svg{ width:18px; height:18px; transition:transform .2s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Header ---------- */
.site-header{ position:sticky; top:0; z-index:60; }
.topbar{
  background:var(--deep); color:rgba(255,255,255,.82); font-size:.86rem;
  transition:height .3s var(--ease), opacity .3s, padding .3s;
}
.topbar .container{ display:flex; align-items:center; gap:22px; min-height:42px; flex-wrap:wrap; }
.topbar a{ color:rgba(255,255,255,.82); transition:color .2s; }
.topbar a:hover{ color:#fff; }
.topbar .tb-spacer{ flex:1; }
.topbar .tb-item{ display:inline-flex; align-items:center; gap:7px; }
.topbar .tb-item svg{ width:15px; height:15px; opacity:.7; }
.topbar .tb-cities a{ opacity:.6; }
.topbar .tb-cities a.is-active{ opacity:1; color:#fff; font-weight:600; }

.navbar{
  background:rgba(255,255,255,.82); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s, background .3s;
}
.navbar .container{ display:flex; align-items:center; gap:20px; min-height:86px; transition:min-height .3s var(--ease); }
.is-stuck .navbar{ box-shadow:var(--shadow); background:rgba(255,255,255,.92); }
.is-stuck .navbar .container{ min-height:72px; }
@media (prefers-reduced-transparency: reduce){
  .navbar{ background:#fff; }
}

/* Логотип — фирменный вектор в спрайте. В шапке — версия без дескриптора (по гайду для малых размеров) */
.brand{ display:inline-flex; align-items:center; line-height:0; }
.brand .logo-img{ display:block; width:auto; }
.brand .logo-img--full{ height:56px; aspect-ratio:764/182; }
.footer .brand .logo-img--full{ height:60px; }
@media (max-width:680px){ .brand .logo-img--full{ height:44px; } }

.nav{ display:flex; align-items:center; gap:2px; margin-left:6px; }
.nav-link{
  position:relative; padding:10px 11px; border-radius:12px; font-weight:500; font-size:.95rem; white-space:nowrap;
  color:var(--ink-2); transition:color .2s, background .2s;
}
.nav-link:hover{ color:var(--ink); background:var(--mint); }
.nav-link[aria-current="page"]{ color:var(--accent-700); background:var(--mint); }
.nav-item{ position:relative; }
.nav-item > .nav-link{ display:inline-flex; align-items:center; gap:5px; }
.nav-item > .nav-link svg{ width:15px; height:15px; opacity:.55; transition:transform .25s; }
.nav-item:hover > .nav-link svg{ transform:rotate(180deg); }
.dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:248px;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; z-index:5;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown a{ display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:12px; font-size:.95rem; color:var(--ink-2); transition:background .18s,color .18s; }
.dropdown a:hover{ background:var(--mint); color:var(--ink); }
.dropdown a svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.nav-actions{ margin-left:auto; display:flex; align-items:center; gap:12px; }

.icon-btn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; color:var(--ink); border:1px solid var(--line); transition:.2s; }
.icon-btn:hover{ border-color:var(--accent); color:var(--accent-700); }
.icon-btn svg{ width:20px; height:20px; }

.burger{ display:none; width:46px; height:46px; border-radius:12px; place-items:center; color:var(--ink); }
.burger svg{ width:26px; height:26px; }

/* Mobile menu */
.mobile-menu{ position:fixed; inset:0; z-index:90; visibility:hidden; }
.mobile-menu__scrim{ position:absolute; inset:0; background:rgba(13,8,2,.45); opacity:0; transition:opacity .3s; }
.mobile-menu__panel{
  position:absolute; top:0; right:0; height:100%; width:min(92vw,400px);
  background:var(--surface); box-shadow:var(--shadow-lg); padding:20px;
  transform:translateX(100%); transition:transform .35s var(--ease); overflow-y:auto;
  display:flex; flex-direction:column; gap:6px;
}
.mobile-menu.is-open{ visibility:visible; }
.mobile-menu.is-open .mobile-menu__scrim{ opacity:1; }
.mobile-menu.is-open .mobile-menu__panel{ transform:translateX(0); }
.mm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mm-link{ padding:14px 12px; border-radius:12px; font-weight:600; font-size:1.05rem; border-bottom:1px solid var(--line-soft); }
.mm-link:hover{ background:var(--mint); }
.mm-sub{ font-size:.82rem; color:var(--muted); padding:14px 12px 6px; font-weight:600; letter-spacing:.02em; }
.mm-sublink{ padding:11px 12px 11px 24px; border-radius:10px; color:var(--ink-2); }
.mm-sublink:hover{ background:var(--mint); }
.mm-foot{ margin-top:14px; display:grid; gap:10px; }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; }
/* мягкое растворение розовой подложки в фон секций сверху и снизу */
.hero-bg::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:42%; background:linear-gradient(to top, var(--bg), transparent); pointer-events:none; }
.aurora{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; }
.aurora--1{ width:46vw; height:46vw; left:-8vw; top:-12vw; background:radial-gradient(circle at 30% 30%, #e7e7e7, transparent 70%); opacity:.45; }
.aurora--2{ width:40vw; height:40vw; right:-6vw; top:4vw; background:radial-gradient(circle at 60% 40%, #f1f1f1, transparent 70%); opacity:.6; }
.aurora--3{ width:30vw; height:30vw; right:18vw; bottom:-14vw; background:radial-gradient(circle at 50% 50%, #ededed, transparent 70%); opacity:.35; }
@media (prefers-reduced-motion:no-preference){
  .aurora--1{ animation:drift 22s var(--ease) infinite alternate; }
  .aurora--2{ animation:drift 28s var(--ease) infinite alternate-reverse; }
}
@keyframes drift{ to{ transform:translate3d(40px,30px,0) scale(1.08); } }

.hero .container{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
  padding-block:clamp(48px,6vw,96px) clamp(56px,7vw,104px); }
.hero-badge{ margin-bottom:22px; }
.hero h1{ margin-bottom:22px; }
.hero h1 em{ font-style:normal; color:var(--accent-700); position:relative; }
.hero h1 em::after{ content:""; position:absolute; left:0; right:0; bottom:.06em; height:.18em; background:rgba(220,13,21,.22); z-index:-1; border-radius:4px; }
.hero .lead{ max-width:46ch; margin-bottom:30px; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.hero-trust{ margin-top:30px; display:flex; gap:26px; flex-wrap:wrap; }
.hero-trust .ht{ display:flex; align-items:center; gap:11px; }
.hero-trust .ht b{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; line-height:1; }
.hero-trust .ht span{ font-size:.85rem; color:var(--muted); max-width:14ch; line-height:1.25; }
.hero-trust .ht .ic{ width:42px; height:42px; border-radius:12px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; flex:none; }
.hero-trust .ht .ic svg{ width:22px; height:22px; }

/* Hero visual */
.hero-visual{ position:relative; }
.hero-visual::before{
  content:""; position:absolute; inset:30px -16px -20px 46px; z-index:0;
  background:linear-gradient(155deg,var(--mint),#ffffff);
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  transform:rotate(2.4deg); box-shadow:var(--shadow);
}
.hero-card{
  position:relative; z-index:1; background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line-soft);
  box-shadow:var(--shadow-lg); padding:28px; overflow:hidden;
}
.hero-card__spine{ position:absolute; right:-30px; top:-20px; width:240px; opacity:.10; color:var(--accent); }
.hc-badge{ position:absolute; top:18px; right:18px; background:var(--accent); color:#fff; font-size:.74rem; font-weight:700; padding:6px 12px; border-radius:var(--r-chip); box-shadow:var(--shadow-teal); }
.hc-stats{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line-soft); }
.hc-stats b{ font-size:1.55rem; font-weight:800; letter-spacing:-.02em; display:block; line-height:1; }
.hc-stats b.ac{ color:var(--accent-700); }
.hc-stats > div > span{ font-size:.78rem; color:var(--muted); display:block; margin-top:5px; }
.hero-card h3{ position:relative; }
.hc-row{ display:flex; align-items:center; gap:14px; padding:15px 0; border-top:1px solid var(--line-soft); }
.hc-row:first-of-type{ border-top:0; }
.hc-row .ic{ width:46px; height:46px; border-radius:13px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; flex:none; }
.hc-row .ic svg{ width:24px; height:24px; }
.hc-row .t{ font-weight:600; }
.hc-row .s{ font-size:.86rem; color:var(--muted); }
.hc-row .chk{ margin-left:auto; color:var(--accent); }
.float-stat{
  position:absolute; background:var(--surface); border-radius:18px; box-shadow:var(--shadow-lg);
  border:1px solid var(--line-soft); padding:16px 18px; display:flex; align-items:center; gap:12px;
}
.float-stat b{ font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.02em; }
.float-stat span{ font-size:.78rem; color:var(--muted); display:block; max-width:13ch; }
.float-stat .ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent); color:#fff; flex:none; }
.float-stat .ic svg{ width:20px; height:20px; }
.float-stat--tl{ right:14px; left:auto; top:-26px; }
.float-stat--br{ left:14px; right:auto; bottom:-26px; }
@media (prefers-reduced-motion:no-preference){
  .float-stat--tl{ animation:floaty 6s var(--ease) infinite alternate; }
  .float-stat--br{ animation:floaty 7s var(--ease) infinite alternate-reverse; }
}
@keyframes floaty{ to{ transform:translateY(-12px); } }

/* ---------- Marquee (conditions strip) ---------- */
.tagline-strip{ background:var(--deep); color:rgba(255,255,255,.9); overflow:hidden; }
.tagline-strip .container{ display:flex; align-items:center; gap:14px; min-height:58px; flex-wrap:wrap; justify-content:center; text-align:center; }
.tagline-strip .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }
.tagline-strip b{ color:#fff; }

/* ---------- Conditions bento ---------- */
.bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
/* число колонок задаётся классом, а не инлайновым стилем: инлайн перебивал бы
   мобильные правила ниже, и карточки схлопывались бы в нечитаемые столбики */
.bento--2{ grid-template-columns:repeat(2,1fr); }
.bento--3{ grid-template-columns:repeat(3,1fr); }
.bento--4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:980px){ .bento--3, .bento--4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .bento--1, .bento--2, .bento--3, .bento--4{ grid-template-columns:1fr; } }
.cond{
  position:relative; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:28px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display:flex; flex-direction:column; min-height:230px;
}
.cond::after{ content:""; position:absolute; width:200px; height:200px; border-radius:50%; right:-70px; top:-70px;
  background:radial-gradient(circle, var(--mint), transparent 70%); opacity:0; transition:opacity .35s; }
.cond:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--mint-2); }
.cond:hover::after{ opacity:1; }
.cond .ic{ width:54px; height:54px; border-radius:15px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; margin-bottom:auto; }
.cond .ic svg{ width:30px; height:30px; }
.cond h3{ margin-top:22px; position:relative; }
.cond p{ font-size:.92rem; color:var(--muted); margin-top:8px; position:relative; }
.cond .more{ margin-top:16px; position:relative; }
.cond--feature{ grid-column:span 2; grid-row:span 2; background:linear-gradient(150deg,var(--deep),var(--deep-2)); color:#fff; border-color:transparent; }
.cond--feature .ic{ background:rgba(255,255,255,.1); color:#fff; }
.cond--feature p{ color:rgba(255,255,255,.7); }
.cond--feature h3{ font-size:clamp(1.4rem,1rem + 1.4vw,2rem); }
.cond--feature .spine-art{ position:absolute; right:-20px; bottom:-30px; width:260px; opacity:.16; }
.cond--feature .more{ color:#fff; }
.cond--wide{ grid-column:span 2; }

/* generic list-card item icons */
.mini-list{ display:grid; gap:10px; margin-top:18px; position:relative; }
.mini-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.92rem; }
.mini-list li svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:2px; }

/* ---------- Methods (scroll-snap rail) ---------- */
.rail{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(270px,1fr); gap:20px; overflow-x:auto; scroll-snap-type:x proximity;
  margin-inline:calc(var(--gut)*-1); padding-inline:var(--gut); padding-bottom:6px; cursor:grab;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch; }
.rail::-webkit-scrollbar{ display:none; }
.rail.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.rail.dragging .method{ pointer-events:none; }

/* Карусель: шапка со стрелками */
.methods-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:28px; flex-wrap:wrap; }
.rail-nav{ display:inline-flex; gap:10px; flex:none; }
/* Фирменные стрелки-шевроны в кругах — как в навигации клиники по гайдлайну */
.rail-btn{ width:50px; height:50px; border-radius:50%; border:0; background:var(--accent); display:grid; place-items:center; color:#fff; transition:transform .18s var(--ease), opacity .2s, background .2s; }
.rail-btn svg{ width:22px; height:22px; }
.rail-btn--prev svg{ transform:rotate(180deg); }
.rail-btn:hover:not(:disabled){ background:var(--accent-600); transform:translateY(-2px); box-shadow:var(--shadow); }
.rail-btn:active:not(:disabled){ transform:translateY(0) scale(.95); }
.rail-btn:disabled{ opacity:.3; cursor:default; }

/* Индикатор прогресса */
.rail-progress{ position:relative; height:4px; background:var(--mint); border-radius:99px; margin-top:26px; overflow:hidden; }
.rail-progress__bar{ position:absolute; top:0; left:0; height:100%; width:30%; background:linear-gradient(90deg,var(--accent),#A81815); border-radius:99px; will-change:transform; }
@media (max-width:680px){ .rail-nav{ display:none; } }
.method{ scroll-snap-align:start; background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); padding:26px; transition:transform .3s var(--ease), box-shadow .3s; }
.method:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.method .num{ font-size:.82rem; font-weight:700; color:var(--accent); letter-spacing:.04em; }
.method .ic{ width:56px; height:56px; border-radius:15px; background:linear-gradient(150deg,var(--mint),var(--mint-2)); color:var(--accent-700); display:grid; place-items:center; margin:16px 0 18px; }
.method .ic svg{ width:30px; height:30px; }
.method h3{ font-size:1.16rem; }
.method p{ font-size:.92rem; color:var(--muted); margin-top:9px; }

/* ---------- Values (editorial numbered) ---------- */
.values{ display:grid; gap:0; }
.value{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,48px); align-items:start; padding:clamp(28px,3.4vw,46px) 0; border-top:1px solid var(--line); }
.value:last-child{ border-bottom:1px solid var(--line); }
.value .vn{ font-size:clamp(2.2rem,1.4rem + 2.4vw,3.4rem); font-weight:800; color:var(--mint-2); letter-spacing:-.03em; line-height:.9; }
.value h3{ font-size:clamp(1.3rem,1rem + 1.1vw,1.7rem); }
.value p{ color:var(--ink-2); margin-top:12px; max-width:62ch; }
.value .vic{ width:60px; height:60px; border-radius:16px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; }
.value .vic svg{ width:30px; height:30px; }

/* ---------- Stats band ---------- */
.statband{ background:linear-gradient(150deg,var(--deep),var(--deep-2)); color:#fff; position:relative; overflow:hidden; }
.statband .spine-art{ position:absolute; right:-40px; top:50%; transform:translateY(-50%); width:340px; opacity:.1; }
.statgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; position:relative; }
.stat .n{ font-size:clamp(2.4rem,1.6rem + 2.6vw,3.6rem); font-weight:800; letter-spacing:-.03em; line-height:1; }
.stat .n .suf{ color:var(--accent); }
.stat .l{ margin-top:10px; color:rgba(255,255,255,.72); font-size:.96rem; max-width:22ch; }
.statband .divider{ height:1px; background:var(--deep-line); margin:34px 0; }

/* ---------- MRI steps ---------- */
.mri{ background:linear-gradient(180deg, var(--bg) 0%, var(--mint) 14%, var(--mint) 86%, var(--bg) 100%); }
.mri-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
/* колонка грида по умолчанию не сжимается уже своего содержимого — без этого
   длинная строка внутри распирает сетку и на телефоне появляется боковой скролл */
.mri-grid > *, .offer-grid > *, .cta-band > *, .hc-grid > *, .contact-cards > *,
.form-grid > *, .form-row > *, .bento > *, .docs-grid > *, .reviews-grid > *{ min-width:0; }
.steps{ display:grid; gap:18px; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:18px; background:var(--surface); border-radius:var(--r-card); padding:22px 24px; box-shadow:var(--shadow-sm); border:1px solid var(--line-soft); }
.step .sn{ width:42px; height:42px; border-radius:12px; background:var(--accent); color:#fff; font-weight:800; display:grid; place-items:center; flex:none; }
.step h4{ font-size:1.08rem; }
.step p{ font-size:.92rem; color:var(--muted); margin-top:5px; }

/* ---------- Doctors ---------- */
.docs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.doc{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s; }
.doc:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.doc__photo{ position:relative; aspect-ratio:4/4.4; overflow:hidden; background:var(--mint); }
.doc__photo img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.15); transition:transform .5s var(--ease); }
.doc:hover .doc__photo img{ transform:scale(1.05); }
.doc__tag{ position:absolute; left:14px; bottom:14px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); color:var(--accent-ink); font-size:.78rem; font-weight:600; padding:6px 12px; border-radius:99px; }
.doc__body{ padding:20px; }
.doc__body h3{ font-size:1.12rem; }
.doc__body .spec{ color:var(--muted); font-size:.9rem; margin-top:4px; }
.doc__meta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.tagpill{ font-size:.78rem; background:var(--mint); color:var(--accent-ink); padding:5px 11px; border-radius:99px; }

/* ---------- Prices ---------- */
.price-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:30px; }
.price-tab{ padding:11px 18px; border-radius:99px; border:1.5px solid var(--line); font-weight:600; font-size:.92rem; color:var(--ink-2); transition:.2s; }
.price-tab:hover{ border-color:var(--accent); color:var(--accent-700); }
.price-tab.is-active{ background:var(--accent); color:#fff; border-color:var(--accent); }
.price-panel{ display:none; }
.price-panel.is-active{ display:block; animation:fade .4s var(--ease); }
@keyframes fade{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.price-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow-sm); }
.price-card h3{ padding:22px 26px; border-bottom:1px solid var(--line-soft); font-size:1.15rem; display:flex; align-items:center; gap:12px; }
.price-card h3 .ic{ width:40px; height:40px; border-radius:11px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; }
.price-card h3 .ic svg{ width:22px; height:22px; }
.price-row{ display:flex; gap:18px; align-items:baseline; padding:16px 26px; border-top:1px solid var(--line-soft); }
.price-row:first-of-type{ border-top:0; }
.price-row .pname{ flex:1; color:var(--ink-2); font-size:.96rem; }
.price-row .dots{ flex:1; border-bottom:1.5px dotted var(--line); transform:translateY(-4px); min-width:24px; }
.price-row .pval{ font-weight:700; white-space:nowrap; font-size:1.02rem; }
/* длинные формулировки цены («курс индивидуально; процедура — 2000 ₽») на телефоне
   переносятся на свою строку, короткие остаются справа от названия как раньше */
@media (max-width:680px){
  .price-row{ flex-wrap:wrap; row-gap:2px; }
  .price-row .pval{ white-space:normal; text-align:right; }
}
.price-row .pval s{ color:var(--muted); font-weight:400; font-size:.85rem; margin-left:6px; }
.price-row .pval .free{ color:var(--accent-700); }
.price-note{ display:flex; gap:10px; align-items:flex-start; background:var(--mint); border-radius:14px; padding:14px 18px; font-size:.9rem; color:var(--accent-ink); }
.price-note svg{ width:20px; height:20px; color:var(--accent-700); flex:none; }

/* ---------- Offer / discount ---------- */
.offer{ background:linear-gradient(150deg,var(--deep),var(--deep-2)); color:#fff; border-radius:var(--r-lg); padding:clamp(30px,4vw,56px); position:relative; overflow:hidden; }
.offer .spine-art{ position:absolute; right:-30px; bottom:-40px; width:300px; opacity:.12; }
.offer-grid{ display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:center; position:relative; }
.offer .pct{ font-size:clamp(3rem,2rem + 4vw,5.4rem); font-weight:800; line-height:.9; color:var(--accent); letter-spacing:-.03em; }
.offer h2{ color:#fff; }
.offer p{ color:rgba(255,255,255,.78); margin-top:14px; }
.price-pill{ display:inline-flex; align-items:baseline; gap:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:99px; padding:12px 22px; margin-top:22px; }
.price-pill b{ font-size:1.8rem; font-weight:800; }
.price-pill s{ color:rgba(255,255,255,.5); }

/* ---------- FAQ ---------- */
.faq{ max-width:860px; margin-inline:auto; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; gap:18px; padding:24px 4px; text-align:left; font-weight:700; font-size:clamp(1.05rem,.95rem + .4vw,1.25rem); color:var(--ink); }
.faq-q .qic{ margin-left:auto; width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; flex:none; transition:.3s var(--ease); }
.faq-q .qic svg{ width:18px; height:18px; transition:transform .3s var(--ease); }
.faq-item.is-open .qic{ background:var(--accent); color:#fff; }
.faq-item.is-open .qic svg{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.faq-a > div{ padding:0 4px 26px; color:var(--ink-2); max-width:72ch; }

/* ---------- Reviews ---------- */
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.review{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); padding:26px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.review .stars{ color:var(--accent); display:flex; gap:3px; margin-bottom:14px; }
.review .stars svg{ width:18px; height:18px; }
.review p{ color:var(--ink-2); }
.review .who{ margin-top:auto; padding-top:18px; display:flex; align-items:center; gap:12px; }
.review .who img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.review .who b{ font-size:.96rem; }
.review .who span{ font-size:.82rem; color:var(--muted); display:block; }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:clamp(30px,4vw,56px); display:grid; grid-template-columns:1.3fr 1fr; gap:40px; align-items:center; }
.cta-band .h2{ margin-bottom:14px; }

/* ---------- Forms ---------- */
.field{ display:grid; gap:7px; }
.field label{ font-size:.88rem; font-weight:600; color:var(--ink-2); }
.field input, .field textarea, .field select{
  width:100%; padding:14px 16px; border-radius:var(--r-input); border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink); transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(84,83,82,.55); }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(16,179,163,.14); }
.field textarea{ min-height:110px; resize:vertical; }
.form-check{ display:flex; gap:10px; align-items:flex-start; font-size:.82rem; color:var(--muted); }
/* текст согласия — одним блоком: иначе ссылка внутри flex не сжимается
   и на узких экранах (320px) распирает форму */
.form-check span{ min-width:0; }
/* ловушка для роботов: поле не видно человеку, но заполняется скриптами */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
/* если заявка не ушла - честно говорим об этом и даём телефон */
.form-err{ margin-top:12px; font-size:.86rem; line-height:1.45; color:var(--accent-700); }
/* ряд кнопок (мессенджеры в контактах): на узком экране переносится,
   а не вылезает за край — раньше стиль был инлайновым и без переноса */
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.form-check input{ width:18px; height:18px; margin-top:2px; accent-color:var(--accent); flex:none; }
.form-check a{ color:var(--accent-700); text-decoration:underline; }
.form-grid{ display:grid; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-lg); padding:clamp(24px,3vw,40px); box-shadow:var(--shadow); }
.form-success{ display:none; text-align:center; padding:20px; }
.form-success.show{ display:block; animation:fade .4s var(--ease); }
.form-success .ok{ width:64px; height:64px; border-radius:50%; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; margin:0 auto 16px; }
.form-success .ok svg{ width:34px; height:34px; }
.is-submitted .form-grid{ display:none; }

/* ---------- Modal ---------- */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; visibility:hidden; }
.modal__scrim{ position:absolute; inset:0; background:rgba(13,8,2,.55); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s; }
.modal__box{ position:relative; width:min(96vw,480px); background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:clamp(26px,3vw,40px); transform:translateY(20px) scale(.97); opacity:0; transition:transform .35s var(--ease), opacity .3s; max-height:92vh; overflow-y:auto; }
.modal.is-open{ visibility:visible; }
.modal.is-open .modal__scrim{ opacity:1; }
.modal.is-open .modal__box{ transform:none; opacity:1; }
.modal__close{ position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; color:var(--muted); transition:.2s; }
.modal__close:hover{ background:var(--mint); color:var(--ink); }
.modal__close svg{ width:22px; height:22px; }
.modal__eyebrow{ color:var(--accent-700); font-weight:600; font-size:.9rem; }
.modal h3{ margin:8px 0 6px; font-size:1.5rem; }
.modal__box > p{ color:var(--muted); margin-bottom:22px; font-size:.95rem; }

/* ---------- Cookie ---------- */
.cookie{ position:fixed; left:18px; bottom:18px; z-index:54; max-width:420px; background:var(--surface); border:1px solid var(--line-soft); border-radius:18px; box-shadow:var(--shadow-lg); padding:18px 20px; display:flex; gap:14px; align-items:center; transform:translateY(140%); transition:transform .5s var(--ease); }
.cookie.show{ transform:none; }
.cookie p{ font-size:.84rem; color:var(--ink-2); }
.cookie .btn{ flex:none; }

/* ---------- Breadcrumbs / page hero ---------- */
.pagehero{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--surface) 0%, var(--surface) 30%, var(--bg) 100%); }
.pagehero .aurora{ opacity:.4; }
.pagehero .container{ padding-block:clamp(40px,5vw,76px); position:relative; }
.crumbs{ display:flex; gap:8px; align-items:center; font-size:.86rem; color:var(--muted); margin-bottom:18px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--accent-700); }
.crumbs svg{ width:14px; height:14px; opacity:.5; }
.pagehero h1{ max-width:20ch; }
.pagehero .lead{ margin-top:16px; max-width:60ch; }

/* ---------- Footer ---------- */
.footer{ background:var(--deep); color:rgba(255,255,255,.72); padding-top:clamp(56px,6vw,84px); position:relative; overflow:hidden; }
.footer .spine-art{ position:absolute; left:-30px; top:30px; width:280px; opacity:.07; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; position:relative; }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:18px; }
.footer .brand{ color:#fff; margin-bottom:18px; }
.footer .brand b{ color:var(--accent); }
.footer-links{ display:grid; gap:11px; }
.footer-links a{ color:rgba(255,255,255,.72); transition:color .2s; font-size:.94rem; }
.footer-links a:hover{ color:#fff; }
.footer .contact-item{ display:flex; gap:11px; margin-bottom:14px; font-size:.94rem; }
.footer .contact-item svg{ width:19px; height:19px; color:var(--accent); flex:none; margin-top:2px; }
.footer .fa-row{ display:flex; gap:10px; margin-top:6px; }
.footer .fa-row a{ width:42px; height:42px; border-radius:50%; border:1px solid var(--deep-line); display:grid; place-items:center; color:#fff; transition:.2s; }
.footer .fa-row a:hover{ background:var(--accent); border-color:var(--accent); }
.footer .fa-row a svg{ width:20px; height:20px; }
.footer-disclaimer{ margin-top:clamp(40px,5vw,64px); padding:22px 0; border-top:1px solid var(--deep-line); font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-disclaimer .warn{ display:flex; gap:10px; align-items:flex-start; color:rgba(255,255,255,.66); font-weight:600; margin-bottom:14px; letter-spacing:.01em; }
.footer-disclaimer .warn svg{ width:20px; height:20px; color:var(--accent); flex:none; }
.footer-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:20px 0 30px; border-top:1px solid var(--deep-line); font-size:.82rem; }
.footer-bottom .dev-credit{ display:inline-flex; align-items:center; gap:7px; color:rgba(255,255,255,.6); }
.footer-bottom .dev-credit a{ color:var(--accent); font-weight:600; transition:color .2s; }
.footer-bottom .dev-credit a:hover{ color:#fff; }
.footer-bottom .dev-credit .qbull{ width:13px; height:13px; }

/* ---------- Map / contacts ---------- */
.contact-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:32px; }
.ccard{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r-card); padding:26px; }
.ccard .ic{ width:50px; height:50px; border-radius:14px; background:var(--mint); color:var(--accent-700); display:grid; place-items:center; margin-bottom:16px; }
.ccard .ic svg{ width:26px; height:26px; }
.ccard h3{ font-size:1.1rem; }
.ccard p{ color:var(--muted); margin-top:6px; font-size:.95rem; }
.ccard a.big{ font-size:1.25rem; font-weight:700; color:var(--ink); }
.map-wrap{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line-soft); box-shadow:var(--shadow); position:relative; min-height:380px; background:linear-gradient(135deg,#ffffff,#f4f4f4); }
.map-wrap iframe{ width:100%; height:100%; min-height:380px; border:0; display:block; }
.metro-line{ display:inline-flex; align-items:center; gap:8px; }
.metro-dot{ width:14px; height:14px; border-radius:50%; flex:none; }

/* ---------- Prose ---------- */
.prose{ max-width:760px; }
.prose h2{ font-size:1.5rem; margin-top:36px; margin-bottom:14px; }
.prose h3{ font-size:1.2rem; margin-top:26px; margin-bottom:10px; }
.prose p{ margin-bottom:14px; color:var(--ink-2); }
.prose ul{ display:grid; gap:10px; margin-bottom:18px; }
.prose ul li{ display:flex; gap:11px; }
.prose ul li svg{ width:20px; height:20px; color:var(--accent); flex:none; margin-top:2px; }

/* ---------- Reveal animation (gated by JS for no-JS fallback) ---------- */
body.js-on [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
body.js-on [data-reveal].in{ opacity:1; transform:none; }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
  .aurora,.float-stat{ animation:none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .cond--feature{ grid-column:span 2; grid-row:auto; }
  .docs-grid{ grid-template-columns:repeat(2,1fr); }
  .statgrid{ grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .reviews-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}
@media (max-width:920px){
  .nav, .nav-actions .desktop-only{ display:none; }
  .burger{ display:grid; }
  .hero .container{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; max-width:520px; }
  .mri-grid, .offer-grid, .cta-band{ grid-template-columns:1fr; }
  .offer .pct{ }
  .contact-cards{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .bento{ grid-template-columns:1fr; }
  .cond--feature, .cond--wide{ grid-column:auto; }
  .docs-grid, .reviews-grid, .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .value{ grid-template-columns:auto 1fr; }
  .value .vic{ display:none; }
  .topbar .tb-hide-sm{ display:none; }
  /* на телефоне баннер занимал пол-экрана: ужимаем текст и отступы,
     справа оставляем место под круглую кнопку звонка */
  .cookie{ left:12px; right:92px; bottom:12px; max-width:none; padding:12px 14px; gap:10px; border-radius:14px; }
  .cookie p{ font-size:.78rem; line-height:1.35; }
  .cookie .btn{ padding:9px 16px; font-size:.85rem; }
  .hero-trust{ gap:18px; }
  .footer-bottom{ flex-direction:column; }
}
@media (max-width:1240px){ .nav-actions .wide-only{ display:none; } }
@media (max-width:920px){ .mobile-only{ display:block; } }
.mobile-only{ display:none; }

/* =====================================================================
   WOW-слой: моушен и интерактив (всё под prefers-reduced-motion)
   ===================================================================== */

/* Прогресс-бар прокрутки */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:100%; z-index:70;
  background:linear-gradient(90deg, var(--accent), #A81815); transform:scaleX(0); transform-origin:0 50%;
  box-shadow:0 1px 8px rgba(220,13,21,.4); }
@supports (animation-timeline: scroll()){
  .scroll-progress{ animation:sp-grow linear both; animation-timeline:scroll(root); }
  @keyframes sp-grow{ to{ transform:scaleX(1); } }
}

/* Фирменная суперграфика: кольца-эхо мишени (по гайдлайну), мягкий пульс */
.hero-rings{ position:absolute; right:-14%; top:50%; transform:translateY(-50%); width:min(52vw,760px); aspect-ratio:1; z-index:-1; color:#e7e7e7; }
.hero-rings circle{ fill:none; stroke:currentColor; transform-origin:50% 50%; }
@media (prefers-reduced-motion:no-preference){
  .hero-rings .rp{ animation:ringpulse 5.5s var(--ease) infinite; }
  .hero-rings .rp2{ animation-delay:1.1s; }
  .hero-rings .rp3{ animation-delay:2.2s; }
}
@keyframes ringpulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.045); opacity:.75; } }

/* Курсор-спотлайт + 3D-наклон карточек */
.cond, .method, .doc{ transform-style:preserve-3d; }
.cond::after{ inset:0; width:auto; height:auto; right:auto; top:auto; border-radius:inherit;
  background:radial-gradient(260px circle at var(--mx,70%) var(--my,25%), rgba(220,13,21,.12), transparent 60%); }
.method{ position:relative; overflow:hidden; }
.method::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%), rgba(220,13,21,.10), transparent 60%); }
.method:hover::after{ opacity:1; }
.doc{ position:relative; }
.doc::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s; z-index:2;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.14), transparent 55%); }
.doc:hover::after{ opacity:1; }

/* Магнитные первичные кнопки — плавный возврат */
.btn--primary{ transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }

/* Подложка фото директора (вырезка с прозрачным фоном) */
.director-photo{ position:relative; max-width:430px; aspect-ratio:4/4.7; border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-lg); background:
    radial-gradient(120% 80% at 50% 120%, rgba(220,13,21,.16), transparent 60%),
    linear-gradient(160deg, #f7f4f4, #ffffff 45%, #f1efef); }
.director-photo::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 18%, rgba(220,13,21,.08), transparent 70%); }
.director-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 18px 30px rgba(20,18,18,.18)); }
@media (prefers-reduced-motion:no-preference){ .director-photo img{ animation:dfloat 6s var(--ease) infinite alternate; } }
@keyframes dfloat{ to{ transform:translateY(-10px); } }

/* ---------- Реальные врачи: монограммы вместо фото, сетка 3, отзывы-инициалы ---------- */
.docs-grid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){ .docs-grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .docs-grid--3{ grid-template-columns:1fr; } }
.doc__photo--mono{ display:grid; place-items:center; background:linear-gradient(155deg,#f7f7f7,#ffffff); position:relative; overflow:hidden; }
.doc__photo--mono .mono-rings{ position:absolute; right:-22%; top:-18%; width:85%; color:#ececec; }
.doc__photo--mono .mono-init{
  position:relative; width:112px; height:112px; border-radius:50%;
  background:var(--tint-red); color:var(--accent-600);
  display:grid; place-items:center; font-size:2.1rem; font-weight:700; letter-spacing:.03em;
  border:2px solid #fff; box-shadow:var(--shadow);
}
.doc--more{ border-style:dashed; border-color:var(--line); background:var(--surface); }
.review .who span.rev-init{ width:46px; height:46px; border-radius:50%; background:var(--mint); color:var(--accent-600); display:grid; place-items:center; font-weight:700; font-size:1.05rem; line-height:1; padding-top:.1em; flex:none; }

/* ---------- Интерьер (визуализации из брендбука) ---------- */
.interior-grid{ display:grid; grid-template-columns:1.65fr 1fr; gap:20px; align-items:stretch; }
.interior-grid img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-card); box-shadow:var(--shadow); }
@media (max-width:820px){ .interior-grid{ grid-template-columns:1fr; } }

/* Инлайн-логотип (вектор из брендбука в спрайте #logo-full): цвет букв через currentColor */
.brand{ color:var(--ink); }
.brand svg.logo-img{ aspect-ratio:764/182; width:auto; }
.footer .brand{ color:#fff; }

/* ---------- Квиз «Заказать звонок» (правый нижний угол) ---------- */
.quizfab{ position:fixed; right:20px; bottom:20px; z-index:55; }
.qf-call{ width:58px; height:58px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center;
  box-shadow:var(--shadow-lg); transition:transform .2s var(--ease), background .2s; }
.qf-call svg{ width:26px; height:26px; }
.qf-call:hover{ background:var(--accent-600); transform:scale(1.07); }
@media (prefers-reduced-motion:no-preference){ .qf-call{ animation:wpulse 2.8s infinite; } }

.qz-progress{ height:4px; background:var(--mint); border-radius:99px; overflow:hidden; margin:4px 0 8px; }
.qz-progress span{ display:block; height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .3s var(--ease); }
.qz-step{ display:none; }
.qz-step.is-active{ display:block; animation:fade .3s var(--ease); }
.qz-q{ font-weight:600; font-size:1.08rem; margin-bottom:12px; }
.qz-opts{ display:grid; gap:10px; }
.qz-opt{ text-align:left; padding:13px 16px; border:1.5px solid var(--line); border-radius:12px; font-weight:500; font-size:.98rem; background:var(--surface); transition:border-color .15s, background .15s, color .15s; }
.qz-opt:hover{ border-color:var(--accent); color:var(--accent-600); }
.qz-opt.is-sel{ background:var(--accent); border-color:var(--accent); color:#fff; }
.qz-back{ margin-top:14px; color:var(--muted); font-size:.9rem; display:inline-flex; align-items:center; gap:6px; visibility:hidden; }
.qz-back:hover{ color:var(--ink); }