/* ===== SKIP LINK (a11y) ===== */
.skip-link{
  position:absolute;
  top:-100px;
  left:0;
  background:var(--ink);
  color:#fff;
  padding:12px 20px;
  z-index:9999;
  text-decoration:none;
  border-radius:0 0 8px 0;
  font-weight:600;
  transition:top .2s ease;
}
.skip-link:focus{top:0}

/* ===== TOKENS ===== */
:root{
  /* Белые фоны — чисто, без тёплых оттенков */
  --bg: #FFFFFF;          /* чистый белый */
  --bg-alt: #F7FAFF;      /* soft: едва голубоватый для карточек */
  --bg-deep: #EBF2FE;     /* deep: светло-голубой для акцентных полос */
  --bg-cream: var(--bg-alt);
  --bg-sand: var(--bg-deep);
  --bg-warm: var(--bg-deep);
  --sand: #DCE6F8;
  --ink: #0A2540;         /* deep blue — основной для текста и тёмных блоков */
  --ink-soft: #1A3A63;
  --text: #1F2E46;
  --text-mute: #5A6B82;
  --line: #D6E1F2;
  --line-soft: #E8EEF8;
  --accent: #2B6FEF;      /* electric blue — главный акцент, CTA, ссылки */
  --accent-2: #2B6FEF;    /* унифицирую: использовалась бронза, теперь тот же акцент */
  --accent-soft: #5B8FFF; /* голубой для градиентов */
  --accent-sky: #8BB5FF;  /* светлый конец градиента */
  --cream: #F7FAFF;
  --on-accent: #FFFFFF;   /* текст на синем — белый */

  /* Градиенты */
  --grad-hero: linear-gradient(135deg, #0A2540 0%, #1E4B9E 45%, #3B82F6 80%, #8BB5FF 100%);
  --grad-radial: radial-gradient(ellipse at 50% 0%, #DBEAFE 0%, #FFFFFF 55%);
  --grad-cta: linear-gradient(135deg, #1E4B9E 0%, #2B6FEF 100%);
  --grad-soft: linear-gradient(180deg, #EBF2FE 0%, #FFFFFF 100%);

  --radius-s: 12px;
  --radius-m: 20px;
  --radius-l: 28px;
  --radius-xl: 40px;

  --density: 1;

  --shadow-s: 0 1px 2px rgba(10,37,64,.04), 0 2px 8px rgba(10,37,64,.04);
  --shadow-m: 0 2px 6px rgba(10,37,64,.06), 0 12px 36px rgba(10,37,64,.08);
  --shadow-l: 0 8px 24px rgba(10,37,64,.08), 0 24px 60px rgba(10,37,64,.12);
  --shadow-blue: 0 8px 24px rgba(43,111,239,.18), 0 2px 6px rgba(43,111,239,.1);

  /* Fonts: монолитный sans — Inter для заголовков и UI, Geist для текста */
  --font-serif: 'Inter', 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-sans: 'Inter', 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Inter', 'Geist', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --container: 1280px;
  --gutter: clamp(20px, 3vw, 40px);
}

/* Dark theme */
body[data-theme="dark"]{
  --bg: #141514;
  --bg-alt: #1C1D1B;
  --bg-deep: #232421;
  --bg-cream: var(--bg-alt);
  --bg-sand: var(--bg-deep);
  --bg-warm: var(--bg-deep);
  --sand: #2A2B28;
  --ink: #F4EEE4;
  --ink-soft: #E8E2D6;
  --text: #E8E2D6;
  --text-mute: #9A958A;
  --line: #2E2F2C;
  --line-soft: #262724;
  --accent: #E8DFD3;
  --accent-2: #C9A24B;
  --cream: #1F201E;
  --on-accent: #0F1010;
}

/* Reset */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.025em;color:var(--ink)}
p{margin:0}
input,textarea,select{font:inherit;color:inherit}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* ===== TYPE SCALE ===== */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:500;
}
.eyebrow--ink{color:var(--accent)}
.display{
  font-family:var(--font-display);
  font-size:clamp(48px, 7.5vw, 104px);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:700;
}
.display em{font-style:normal;font-weight:700;color:var(--accent);display:inline}
.h1{font-family:var(--font-display);font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.h2{font-family:var(--font-display);font-size:clamp(28px,3.6vw,48px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.h3{font-family:var(--font-display);font-size:clamp(20px,2.2vw,28px);line-height:1.2;font-weight:600;letter-spacing:-.015em}
.lede{font-size:clamp(16px,1.25vw,19px);line-height:1.6;color:var(--text-mute);max-width:62ch;font-weight:400}
.small{font-size:13px;color:var(--text-mute)}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:700}
em.serif{font-style:normal;font-weight:700;color:var(--accent)}

/* ===== SECTIONS ===== */
section{position:relative;padding-block:calc(120px * var(--density));}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px;margin-bottom:64px;flex-wrap:wrap}
.section-head .title{max-width:720px}
.section-head .eyebrow{margin-bottom:20px;display:block}
hr.rule{border:0;border-top:1px solid var(--line);margin:0}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;
  border-radius:999px;
  font-size:14px;font-weight:600;letter-spacing:-.005em;
  border:1px solid transparent;
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  white-space:nowrap;
  font-family:var(--font-display);
}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-blue)}
.btn--primary:hover{background:#1A5AD9;border-color:#1A5AD9;transform:translateY(-1px);box-shadow:0 12px 28px rgba(43,111,239,.25)}
body[data-theme="dark"] .btn--primary{background:var(--accent);color:#fff}
body[data-theme="dark"] .btn--primary:hover{background:#4A8AFF;color:#fff}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--ghost:hover{background:var(--bg-alt);border-color:var(--accent);color:var(--accent)}
.btn--soft{background:var(--bg-alt);color:var(--ink);border-color:var(--line-soft)}
.btn--soft:hover{background:var(--bg-deep);border-color:var(--accent);color:var(--accent)}
.btn svg{width:14px;height:14px}

/* ===== PLACEHOLDER (for imagery) ===== */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      var(--sand) 0 2px,
      transparent 2px 12px),
    var(--bg-deep);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  isolation:isolate;
}
.ph::after{
  content:attr(data-label);
  position:absolute;inset:auto 0 0 0;
  padding:10px 14px;
  background:var(--bg);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-mute);
}

/* ===== NAV ===== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:76px;gap:32px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand-mark{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-accent);display:grid;place-items:center;font-family:var(--font-serif);font-style:italic;font-size:20px;font-weight:600;letter-spacing:-.02em}
.brand-name{font-family:var(--font-serif);font-size:18px;line-height:1;letter-spacing:-.01em}
.brand-sub{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);margin-top:3px}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-link{font-size:13.5px;color:var(--text);position:relative;padding:8px 0;transition:color .2s}
.nav-link:hover{color:var(--ink)}
.nav-link.active{color:var(--ink)}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink)}

/* === MEGA MENU === */
.nav-link-wrap{position:relative}
.nav-link-wrap .nav-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-chev{font-size:10px;opacity:.5;transition:transform .2s}
.nav-link-wrap.mega-open .nav-chev{transform:rotate(180deg);opacity:.85}
.nav-link-wrap.has-mega .nav-link{cursor:pointer}

.mega-panel{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  transform:translateX(-50%);
  min-width:640px;
  max-width:760px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:
    0 1px 2px rgba(10,37,64,.04),
    0 24px 48px -12px rgba(10,37,64,.18);
  padding:28px;
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:32px;
  z-index:999;
  animation:megaIn .18s cubic-bezier(.2,.8,.2,1);
}
@keyframes megaIn{
  from{opacity:0;transform:translateX(-50%) translateY(-8px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* мост между пунктом меню и панелью — чтобы мышь не теряла hover */
.mega-panel::before{
  content:"";
  position:absolute;
  top:-14px; left:0; right:0;
  height:14px;
}

.mega-head{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:16px;
}
.mega-list{
  display:flex;
  flex-direction:column;
}
.mega-list--doctors{
  gap:4px;
}
.mega-item{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:2px;
  padding:10px 12px;
  border-radius:10px;
  text-decoration:none;
  transition:background .15s;
  align-items:baseline;
}
.mega-item:hover{background:var(--bg-alt)}
.mega-item-idx{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--text-mute);
  grid-row:1/3;
  padding-top:4px;
  min-width:28px;
}
.mega-item-tag{
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  grid-column:1/-1;
  margin-bottom:2px;
}
.mega-item-title{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.3;
  grid-column:2/3;
}
.mega-item-sub{
  font-size:12.5px;
  color:var(--text-mute);
  line-height:1.45;
  grid-column:2/3;
}

/* Врач — с аватаром */
.mega-item--doctor{
  grid-template-columns:auto 1fr;
  align-items:center;
}
.mega-item--doctor img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 15%;
  background:var(--bg-alt);
  grid-row:1/3;
}
.mega-item--doctor .mega-item-title{grid-column:2/3;grid-row:1}
.mega-item--doctor .mega-item-sub{grid-column:2/3;grid-row:2}
/* Title/sub в обёртке (<div>) — отображаем блочно */
.mega-item--doctor > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.mega-item--doctor > div .mega-item-title,
.mega-item--doctor > div .mega-item-sub{display:block;grid-column:auto;grid-row:auto}

/* Правая колонка — CTA блок */
.mega-aside{
  background:var(--bg-alt);
  border-radius:14px;
  padding:24px;
  display:flex;
  flex-direction:column;
  align-self:start;
}
.mega-aside-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.01em;
  margin-bottom:10px;
}
.mega-aside-text{
  font-size:13px;
  color:var(--text-mute);
  line-height:1.55;
  margin-bottom:18px;
}
.mega-aside-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  transition:gap .2s;
}
.mega-aside-link:hover{gap:10px}
.mega-aside-link svg{width:12px;height:12px}

/* Мегаменю в overlay-режиме (на тёмном hero) */
.nav--overlay .nav-chev{opacity:.6;color:rgba(255,255,255,.82)}

/* Скрываем мегаменю на узких экранах — там есть мобильное меню */
@media (max-width:980px){
  .mega-panel{display:none !important}
  .nav-chev{display:none}
}
.nav-right{display:flex;align-items:center;gap:14px}
.phone-inline{font-family:var(--font-serif);font-size:18px;color:var(--ink);letter-spacing:-.01em;white-space:nowrap !important;word-break:keep-all}

.nav-progress{position:absolute;bottom:-1px;left:0;height:1px;background:var(--ink);width:0;transition:width .15s linear}

/* Overlay mode — когда навигация лежит поверх тёмного hero */
.nav--overlay{border-bottom-color:transparent}
.nav--overlay .brand{color:#fff}
.nav--overlay .brand-mark{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px)}
.nav--overlay .brand-sub{color:rgba(255,255,255,.65)}
.nav--overlay .nav-link{color:rgba(255,255,255,.82)}
.nav--overlay .nav-link:hover{color:#fff}
.nav--overlay .nav-link.active{color:#fff}
.nav--overlay .nav-link.active::after{background:#fff}
.nav--overlay .phone-inline{color:#fff}
.nav--overlay .btn--cta{background:#fff;color:var(--accent);border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.nav--overlay .btn--cta:hover{background:var(--accent-sky);color:var(--ink);border-color:var(--accent-sky);transform:translateY(-1px)}

@media (max-width:900px){
  .nav-links{display:none}
  .phone-inline{display:none}
}

/* ===== HERO ===== */
.hero{padding-top:140px;padding-bottom:80px;position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr .9fr;gap:72px;align-items:end}
.hero-left .eyebrow{margin-bottom:40px}
.hero-title{margin-bottom:40px}
.hero-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px;padding-top:32px;border-top:1px solid var(--line)}
.hero-meta .num{font-size:36px;line-height:1;display:block;margin-bottom:8px;color:var(--ink)}
.hero-meta .lbl{font-size:12.5px;color:var(--text-mute);line-height:1.35}
.hero-cta{display:flex;gap:14px;margin-top:8px;flex-wrap:wrap}

.hero-visual{position:relative;aspect-ratio:4/5;border-radius:var(--radius-l);overflow:hidden}
.hero-caption{position:absolute;bottom:20px;left:20px;right:20px;background:var(--bg);border-radius:var(--radius-s);padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-m)}
.hero-caption .dot{width:8px;height:8px;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 4px color-mix(in oklab, #2E8B57 20%, transparent)}
.hero-caption .t1{font-size:13px;color:var(--ink);font-weight:500}
.hero-caption .t2{font-size:11.5px;color:var(--text-mute)}

.hero-side{position:absolute;right:calc(var(--gutter) * -0.2);top:160px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--text-mute)}

/* Hero V2 — full bleed (Payrot style: светлый фон) */
.hero-v2{padding:0}
.hero-bleed{
  position:relative;
  width:100%;
  height:100vh;
  min-height:720px;
  max-height:920px;
  overflow:hidden;
  background:#FFFFFF;
}
.hero-bleed-scrim{
  position:absolute;inset:0;
  background: transparent;
  pointer-events:none;
  z-index:1;
}
.hero-bleed-inner{
  position:relative;z-index:3;
  height:100%;
  display:flex;flex-direction:column;
  padding-top:120px;
  padding-bottom:40px;
}
.hero-bleed-head{flex:0 0 auto}
.hero-bleed-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;max-width:min(760px, 62%);padding-block:40px}
.hero-bleed .hero-title{
  font-size:clamp(48px, 7vw, 96px);
  line-height:.98;
  letter-spacing:-.035em;
  margin-bottom:32px;
  color:var(--ink) !important;
  font-weight:700;
}
.hero-bleed .hero-title em{color:var(--accent);font-style:normal;font-weight:700}
.hero-bleed-lede{
  color:var(--text-mute);
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.6;
  max-width:44ch;
  margin-left:auto;
  text-align:left;
  padding-left:clamp(24px, 4vw, 64px);
  border-left:1px solid var(--line);
}
@media (max-width:900px){
  .hero-bleed-lede{margin-left:0;padding-left:0;border-left:0;margin-top:24px}
  .hero-bleed-body{max-width:100%}
}
.hero-bleed-foot{
  flex:0 0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  flex-wrap:wrap;
}

/* chips */
.hero-chips{display:flex;gap:10px;flex-wrap:wrap;max-width:60%}
.hero-chip{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  border-radius:999px;
  font-size:13px;font-weight:500;
  color:var(--ink);
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:all .25s ease;
  white-space:nowrap;
}
.hero-chip:hover{background:#fff;border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-s)}
.hero-chip.sel{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-blue)}

/* doctor card (bottom right) */
.hero-doc{
  display:flex;align-items:center;gap:14px;
  padding:10px 14px 10px 10px;
  background:#fff;
  border-radius:16px;
  box-shadow: 0 20px 50px rgba(10,37,64,.12), 0 4px 14px rgba(10,37,64,.06);
  border:1px solid var(--line-soft);
  max-width:320px;
}
.hero-doc-ph{
  width:56px;height:56px;
  border-radius:12px;
  overflow:hidden;flex:0 0 auto;
}
.hero-doc-body{flex:1 1 auto;min-width:0}
.hero-doc-name{font-family:var(--font-serif);font-size:17px;color:var(--ink);line-height:1.15;font-weight:500}
.hero-doc-role{font-size:11.5px;color:var(--text-mute);margin-top:2px;letter-spacing:.01em}
.hero-doc-years{font-size:11px;color:var(--text-mute);margin-top:4px;font-family:var(--font-mono);letter-spacing:.04em}
.hero-doc-years span{color:var(--accent-2);font-weight:600;font-size:13px}
.hero-doc-arr{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--ink);color:var(--on-accent);
  border:0;
  display:grid;place-items:center;
  flex:0 0 auto;
  transition:transform .25s ease, background .25s ease;
}
.hero-doc-arr svg{width:14px;height:14px}
.hero-doc-arr:hover{transform:translateX(2px) rotate(-45deg);background:var(--accent-2)}

@media (max-width:760px){
  .hero-bleed{min-height:620px;height:92vh}
  .hero-bleed-inner{padding-top:96px}
  .hero-chips{max-width:100%}
  .hero-chip:nth-child(n+4){display:none}
  .hero-doc{width:100%;max-width:100%}
  .hero-bleed-foot{flex-direction:column;align-items:stretch}
}

/* Hero V3 — editorial split */
.hero-v3 .hero-grid{grid-template-columns:1fr;gap:0}
.hero-v3 .hero-visual{aspect-ratio:21/9;margin-top:40px;border-radius:var(--radius-l)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-meta{grid-template-columns:1fr 1fr;gap:20px}
}

/* ===== MARQUEE OF TRUST BADGES ===== */
.trust{padding-block:40px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-alt)}
.trust-row{display:flex;gap:64px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.trust-item{display:flex;align-items:center;gap:10px;color:var(--text-mute);font-size:12.5px;font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

/* ===== SERVICES ===== */
.services-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:start}
.services-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.service-row{
  display:grid;grid-template-columns:42px 1fr auto;gap:24px;align-items:center;
  padding:22px 4px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
  transition:background .25s ease, padding .25s ease;
  position:relative;
}
.service-row:hover{padding-inline:14px;background:color-mix(in oklab, var(--ink) 3%, transparent)}
.service-row.active{padding-inline:14px;background:color-mix(in oklab, var(--ink) 5%, transparent)}
.service-row .idx{font-family:var(--font-mono);font-size:11px;color:var(--text-mute);letter-spacing:.1em}
.service-row .name{font-family:var(--font-serif);font-size:24px;line-height:1.1;color:var(--ink);font-weight:600}
.service-row .name em{font-style:normal;color:var(--text-mute);font-weight:400}
.service-row .price{font-family:var(--font-serif);font-size:18px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.service-row .arrow{position:absolute;right:-30px;top:50%;transform:translateY(-50%) translateX(-10px);opacity:0;transition:all .3s ease;color:var(--ink)}
.service-row:hover .arrow, .service-row.active .arrow{opacity:1;transform:translateY(-50%) translateX(0)}

.service-panel{
  position:sticky;top:110px;
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  padding:36px;
}
.service-panel h3{margin-bottom:12px}
.service-panel p{color:var(--text-mute);margin-bottom:24px}
.service-panel .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line-soft);font-size:12px;color:var(--ink)}
.service-panel .price-block{display:flex;justify-content:space-between;align-items:baseline;padding-top:20px;border-top:1px solid var(--line)}
.service-panel .price-from{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute)}
.service-panel .price-big{font-family:var(--font-serif);font-size:40px;color:var(--ink);font-weight:500}

/* Tooth diagram */
.tooth-diagram{margin-top:24px;background:var(--bg);border:1px solid var(--line-soft);border-radius:var(--radius-m);padding:20px}
.tooth-diagram .diag-head{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);margin-bottom:14px}
.tooth-row{display:flex;gap:3px;justify-content:center;margin-bottom:4px}
.tooth{
  width:18px;height:26px;border-radius:6px 6px 4px 4px;
  background:#FFFFFF;
  border:1px solid var(--line);
  transition:all .25s ease;
  cursor:pointer;
}
.tooth.hi{background:var(--ink);border-color:var(--ink);transform:scaleY(1.08)}
.tooth.hi--brass{background:var(--accent-soft);border-color:var(--accent);transform:scaleY(1.08)}

@media (max-width:980px){
  .services-layout{grid-template-columns:1fr;gap:32px}
  .service-panel{position:static}
}

/* ===== SECTION BACKGROUNDS — rhythm ===== */
.bg-cream{background:var(--bg-cream)}
.bg-sand{background:var(--bg-sand)}
.bg-warm{background:var(--bg-warm)}
.bg-ink{background: var(--grad-cta);color:var(--on-accent);position:relative}
.bg-ink::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(139,181,255,.25) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 85%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.bg-ink > *{position:relative;z-index:1}
.bg-ink h2, .bg-ink h3, .bg-ink h4{color:var(--on-accent)}
.bg-ink .eyebrow{color:color-mix(in oklab, var(--on-accent) 70%, transparent)}
.bg-ink .lede, .bg-ink p{color:color-mix(in oklab, var(--on-accent) 85%, transparent)}
.bg-ink em.serif, .bg-ink .display em{color:#D9E6FF !important;font-weight:800 !important}
.bg-ink .btn--primary{background:#fff;color:var(--accent);border-color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.15)}
.bg-ink .btn--primary:hover{background:var(--accent-sky);color:var(--ink);border-color:var(--accent-sky);transform:translateY(-1px)}
.bg-ink .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.bg-ink .btn--ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
.bg-deep{background:var(--bg-deep)}
.bg-ink .ba-wrap{background:color-mix(in oklab, var(--on-accent) 8%, transparent)}
.bg-ink .ba-label{background:color-mix(in oklab, var(--on-accent) 15%, var(--ink));border-color:color-mix(in oklab, var(--on-accent) 20%, transparent);color:var(--on-accent)}
.bg-ink .case-meta{border-top-color:color-mix(in oklab, var(--on-accent) 20%, transparent)}
.bg-ink .case-meta .v{color:var(--on-accent)}
.bg-ink .case-meta .k{color:color-mix(in oklab, var(--on-accent) 55%, transparent)}
.bg-ink .cases-tabs{background:color-mix(in oklab, var(--on-accent) 10%, transparent);border-color:color-mix(in oklab, var(--on-accent) 15%, transparent)}
.bg-ink .case-tab{color:color-mix(in oklab, var(--on-accent) 60%, transparent)}
.bg-ink .case-tab.active{background:var(--on-accent);color:var(--ink)}
.bg-ink .ba-handle::before{background:var(--on-accent)}
.bg-ink .ba-handle::after{color:var(--ink)}
.bg-ink .ba-layer.after{background:
  repeating-linear-gradient(135deg, var(--accent-2) 0 2px, transparent 2px 22px),
  color-mix(in oklab, var(--accent-2) 15%, var(--ink))}

body[data-theme="dark"] .bg-ink{background:var(--bg-deep)}

/* Diagonal tint accents for some sections */
.tinted-top::before{
  content:"";position:absolute;top:0;left:0;right:0;height:60%;
  background:linear-gradient(180deg, var(--bg-cream), transparent);
  z-index:-1;pointer-events:none;
}

/* ===== PHILOSOPHY ===== */
.philo{background:var(--bg-sand)}
.philo-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.philo-quote{font-family:var(--font-serif);font-size:clamp(32px,3.4vw,44px);line-height:1.18;font-weight:500;color:var(--ink);letter-spacing:-.01em}
.philo-quote em{color:var(--ink);font-weight:700;font-style:italic}
.philo-sign{margin-top:32px;display:flex;align-items:center;gap:16px}
.philo-sign .ph{width:60px;height:60px;border-radius:50%}
.philo-sign .who{font-family:var(--font-serif);font-size:17px;color:var(--ink)}
.philo-sign .role{font-size:12.5px;color:var(--text-mute);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin-top:4px}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:8px}
.pillar{padding:28px;border-radius:var(--radius-m);background:var(--bg);border:1px solid var(--line-soft)}
.pillar .num{font-family:var(--font-mono);font-size:11px;color:var(--text-mute);letter-spacing:.2em;display:block;margin-bottom:14px}
.pillar h4{font-family:var(--font-serif);font-size:22px;font-weight:600;color:var(--ink);margin-bottom:10px;line-height:1.15}
.pillar p{font-size:14px;color:var(--text-mute);line-height:1.55}

@media (max-width:900px){
  .philo-grid{grid-template-columns:1fr;gap:40px}
  .pillars{grid-template-columns:1fr}
}

/* ===== TECH ===== */
.tech-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.tech-card{
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  background:var(--bg-alt);
  display:flex;
  flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
  height:100%;
  position:relative;
  overflow:hidden;
}
/* Фото оборудования — плашка сверху */
.tech-card-photo{
  position:relative;
  aspect-ratio:4/3;
  background:
    radial-gradient(ellipse at 50% 55%,
      color-mix(in oklab, var(--accent) 18%, transparent) 0%,
      transparent 70%),
    linear-gradient(135deg, #E8F0FE 0%, #BFD4FC 100%);
  overflow:hidden;
}
/* Крупный полупрозрачный номер — внутри фото-плашки */
.tech-card::before{
  content:attr(data-num);
  position:absolute;
  right:20px; top:-12px;
  font-family:var(--font-serif);
  font-size:140px;
  font-weight:400;
  font-style:italic;
  line-height:1;
  letter-spacing:-.04em;
  color:color-mix(in oklab, var(--accent) 22%, transparent);
  pointer-events:none;
  user-select:none;
  z-index:1;
}
.tech-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-m);
  border-color:var(--accent-sky);
}

/* Плейсхолдер "здесь будет фото" — внутри плашки */
.tech-card-placeholder{
  position:absolute;
  top:16px; left:16px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(6px);
  border:1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent);
}
.tech-card-placeholder svg{
  flex-shrink:0;
  opacity:.7;
}

.tech-card-body{
  padding:28px 32px 32px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.tech-card-top{
  display:flex;
  flex-direction:column;
}
.tech-title{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.25;
  margin-top:10px;
}
.tech-desc{
  font-size:14px;
  color:var(--text-mute);
  line-height:1.6;
  margin-top:auto;
  padding-top:20px;
  border-top:1px solid var(--line);
}

/* Факт внизу карточки — отделён линией, прижат к низу */
.tech-fact{
  margin-top:auto;
  padding-top:24px;
  border-top:1px solid var(--line);
}
.tech-fact-num{
  display:block;
  font-family:var(--font-display);
  font-size:40px;
  font-weight:700;
  letter-spacing:-0.03em;
  color:var(--accent);
  line-height:1;
}
.tech-fact-unit{
  font-size:22px;
  font-weight:600;
  margin-left:4px;
  letter-spacing:-0.02em;
}
.tech-fact-label{
  display:block;
  margin-top:12px;
  font-size:12.5px;
  color:var(--text-mute);
  line-height:1.5;
}

@media (max-width:900px){
  .tech-grid{grid-template-columns:1fr}
  .tech-card::before{font-size:80px}
}

/* ===== DOCTORS ===== */
.doctors-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.doc-card{display:flex;flex-direction:column;gap:16px;cursor:pointer}
.doc-card .ph{aspect-ratio:3/4;border-radius:var(--radius-m);transition:transform .4s ease}
.doc-card:hover .ph{transform:scale(1.02)}
.doc-card .name{font-family:var(--font-serif);font-size:22px;color:var(--ink);font-weight:600;line-height:1.15}
.doc-card .spec{font-size:12.5px;color:var(--text-mute);font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.doc-card .exp{font-size:13px;color:var(--text);margin-top:4px}

@media (max-width:980px){.doctors-grid{grid-template-columns:repeat(2,1fr)}}

/* ===== BEFORE/AFTER CASES ===== */
.cases-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:32px;flex-wrap:wrap}
.cases-tabs{display:flex;gap:6px;padding:6px;background:var(--bg-alt);border-radius:999px;border:1px solid var(--line-soft)}
.case-tab{padding:10px 18px;border-radius:999px;border:0;background:transparent;font-size:13px;color:var(--text-mute);cursor:pointer;transition:all .25s}
.case-tab.active{background:var(--ink);color:var(--on-accent)}

.ba-wrap{position:relative;border-radius:var(--radius-l);overflow:hidden;user-select:none;aspect-ratio:16/9;background:var(--bg-deep);cursor:ew-resize}
.ba-layer{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,var(--sand) 0 2px, transparent 2px 14px),
  var(--bg-deep)}
.ba-layer.after{background:
  repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 22px),
  color-mix(in oklab, var(--ink) 5%, var(--bg))}
.ba-layer.after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba-label{position:absolute;top:20px;padding:6px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.ba-label.l{left:20px}
.ba-label.r{right:20px}
.ba-handle{position:absolute;top:0;bottom:0;width:2px;background:var(--bg);left:var(--pos,50%);transform:translateX(-50%);pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.ba-handle::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.ba-handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-sans);font-size:16px;color:var(--ink)}

.case-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.case-meta .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);margin-bottom:6px}
.case-meta .v{font-family:var(--font-serif);font-size:18px;color:var(--ink);line-height:1.2}

@media (max-width:700px){.case-meta{grid-template-columns:1fr 1fr;gap:20px}}

/* ===== CALCULATOR ===== */
.calc{background:var(--grad-cta);color:var(--on-accent);border-radius:var(--radius-xl);padding:clamp(32px,5vw,72px);position:relative;overflow:hidden}
.calc::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(139,181,255,.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.calc > *{position:relative;z-index:1}
body[data-theme="dark"] .calc{background:var(--bg-alt);color:var(--ink);border:1px solid var(--line)}
.calc h2{color:var(--on-accent)}
body[data-theme="dark"] .calc h2{color:var(--ink)}
.calc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.calc-step{margin-bottom:28px}
.calc-step .eyebrow{color:color-mix(in oklab, var(--on-accent) 55%, transparent);margin-bottom:14px;display:block}
body[data-theme="dark"] .calc-step .eyebrow{color:var(--text-mute)}
.calc-opts{display:flex;flex-wrap:wrap;gap:8px}
.calc-opt{
  padding:10px 16px;border-radius:999px;
  background:transparent;
  border:1px solid color-mix(in oklab, var(--on-accent) 25%, transparent);
  color:var(--on-accent);font-size:13.5px;cursor:pointer;transition:all .2s;
}
body[data-theme="dark"] .calc-opt{border-color:var(--line);color:var(--ink)}
.calc-opt:hover{border-color:var(--on-accent)}
.calc-opt.sel{background:var(--on-accent);color:var(--ink);border-color:var(--on-accent)}
body[data-theme="dark"] .calc-opt.sel{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.calc-slider{margin-top:10px}
.calc-slider input[type=range]{width:100%;accent-color:var(--accent-2)}
.calc-slider .row{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:6px}

.calc-result{
  background:color-mix(in oklab, var(--on-accent) 8%, transparent);
  border:1px solid color-mix(in oklab, var(--on-accent) 15%, transparent);
  border-radius:var(--radius-l);padding:32px;
}
body[data-theme="dark"] .calc-result{background:var(--bg);border-color:var(--line)}
.calc-result .total{font-family:var(--font-serif);font-size:clamp(48px,6vw,72px);line-height:1;margin:8px 0 6px;font-weight:500;letter-spacing:-.02em}
.calc-result .range{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:24px}
.calc-breakdown{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid color-mix(in oklab, var(--on-accent) 15%, transparent)}
body[data-theme="dark"] .calc-breakdown{border-top-color:var(--line)}
.calc-bk{display:flex;justify-content:space-between;font-size:13px}
.calc-bk .k{opacity:.75}

@media (max-width:900px){.calc-grid{grid-template-columns:1fr;gap:36px}}

/* ===== TESTIMONIALS ===== */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.testi{
  padding:32px;
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  background:var(--bg-alt);
  display:flex;flex-direction:column;gap:20px;
  min-height:320px;
  height:100%;
}
.testi .stars{color:var(--accent-2);font-size:14px;letter-spacing:.1em}
.testi p{font-family:var(--font-serif);font-size:18px;font-weight:500;line-height:1.45;color:var(--ink);letter-spacing:-.005em;flex:1}
.testi .by{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line-soft)}
.testi .by .ph{width:40px;height:40px;border-radius:50%;flex-shrink:0}
.testi .by .n{font-size:14px;color:var(--ink);font-weight:600}
.testi .by .d{font-size:11.5px;color:var(--text-mute);font-family:var(--font-mono);letter-spacing:.05em}

@media (max-width:980px){.testi-grid{grid-template-columns:1fr}.testi{min-height:auto}}

/* ===== FAQ ===== */
.faq-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);cursor:pointer}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-family:var(--font-serif);font-size:22px;color:var(--ink);font-weight:600;line-height:1.2}
.faq-q .plus{width:32px;height:32px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;flex-shrink:0;transition:all .3s ease;font-family:var(--font-sans);font-size:16px;color:var(--ink)}
.faq-item.open .plus{background:var(--ink);color:var(--on-accent);border-color:var(--ink);transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease, padding .3s ease;color:var(--text-mute);font-size:15px;line-height:1.55}
.faq-item.open .faq-a{max-height:400px;padding:0 0 24px}

@media (max-width:900px){.faq-layout{grid-template-columns:1fr;gap:32px}}

/* ===== BOOKING / CONTACT ===== */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:stretch}
.contact-card{
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  padding:40px;
  display:flex;flex-direction:column;gap:24px;
}
.contact-card .row{display:flex;flex-direction:column;gap:4px}
.contact-card .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute)}
.contact-card .v{font-family:var(--font-serif);font-size:22px;color:var(--ink);line-height:1.25}

.map-ph{height:220px;border-radius:var(--radius-m);margin-top:10px;background:
  radial-gradient(ellipse at 30% 40%, color-mix(in oklab, var(--accent-2) 20%, transparent) 0%, transparent 60%),
  repeating-linear-gradient(0deg, var(--line-soft) 0 1px, transparent 1px 24px),
  repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px 24px),
  var(--bg-deep);
  border:1px solid var(--line);position:relative}
.map-pin{position:absolute;top:40%;left:32%;width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--ink);transform:rotate(-45deg);box-shadow:0 0 0 5px color-mix(in oklab, var(--ink) 15%, transparent)}

/* Настоящая Яндекс-карта */
.map-wrap{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.map-wrap iframe{overflow:hidden}
.map-link{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-mute);
  text-decoration:none;
  align-self:flex-start;
  transition:color .2s;
}
.map-link:hover{color:var(--ink)}

.form{display:flex;flex-direction:column;gap:18px}
.form .field{display:flex;flex-direction:column;gap:6px}
.form label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute)}
.form input, .form select, .form textarea{
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--bg);
  border-radius:var(--radius-s);
  font-size:15px;
  color:var(--ink);
  transition:border-color .2s, background .2s;
  font-family:inherit;
}
.form input:focus, .form select:focus, .form textarea:focus{outline:none;border-color:var(--ink);background:var(--bg-alt)}
.form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--text-mute)}
.form .consent input{width:auto;padding:0;margin-top:3px}
.form .success{padding:32px;text-align:center;background:var(--bg-alt);border-radius:var(--radius-m);border:1px solid var(--line-soft)}
.form .success .big{font-family:var(--font-serif);font-size:32px;color:var(--ink);margin-bottom:8px;font-weight:500}

@media (max-width:900px){.contact-layout{grid-template-columns:1fr}}

/* ===== FOOTER ===== */
.footer{padding-block:60px 40px;border-top:1px solid var(--line-soft);background:var(--bg-alt);margin-top:60px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer-col h5{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);margin-bottom:20px;font-weight:400}
.footer-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.footer-col a{color:var(--ink);font-size:14px;transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:32px;border-top:1px solid var(--line);font-size:12px;color:var(--text-mute);flex-wrap:wrap;gap:16px;font-family:var(--font-mono);letter-spacing:.05em}

@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* ===== CHAT WIDGET ===== */
.chat-fab{
  position:fixed;bottom:24px;right:24px;z-index:50;
  width:60px;height:60px;border-radius:50%;
  background:var(--ink);color:var(--on-accent);
  border:0;display:grid;place-items:center;
  box-shadow:var(--shadow-l);
  transition:transform .25s;
}
.chat-fab:hover{transform:scale(1.05)}
.chat-fab .dot{position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:#2E8B57;box-shadow:0 0 0 4px color-mix(in oklab, #2E8B57 30%, transparent)}
.chat-panel{
  position:fixed;bottom:100px;right:24px;z-index:50;
  width:360px;max-width:calc(100vw - 32px);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-l);
  overflow:hidden;
  display:flex;flex-direction:column;
  transform-origin:bottom right;
}
.chat-head{padding:18px 20px;background:var(--ink);color:var(--on-accent);display:flex;align-items:center;gap:12px}
.chat-head .ph{width:36px;height:36px;border-radius:50%;background:var(--on-accent);border:0}
.chat-head .ph::after{display:none}
.chat-head .t1{font-family:var(--font-serif);font-size:17px;line-height:1.1}
.chat-head .t2{font-size:11.5px;opacity:.75;font-family:var(--font-mono);letter-spacing:.08em}
.chat-body{padding:20px;display:flex;flex-direction:column;gap:12px;max-height:360px;overflow-y:auto}
.chat-msg{padding:12px 14px;border-radius:16px;font-size:13.5px;line-height:1.4;max-width:85%}
.chat-msg.bot{background:var(--bg-alt);border:1px solid var(--line-soft);border-bottom-left-radius:4px;align-self:flex-start}
.chat-msg.user{background:var(--ink);color:var(--on-accent);border-bottom-right-radius:4px;align-self:flex-end}
.chat-quick{padding:0 20px 16px;display:flex;flex-wrap:wrap;gap:6px}
.chat-quick button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--bg);font-size:12px;color:var(--ink);cursor:pointer;transition:all .2s}
.chat-quick button:hover{background:var(--ink);color:var(--on-accent);border-color:var(--ink)}
.chat-input{padding:14px 16px;border-top:1px solid var(--line);display:flex;gap:8px;background:var(--bg-alt)}
.chat-input input{flex:1;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg);font-size:13px}
.chat-input button{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--on-accent);border:0;display:grid;place-items:center;cursor:pointer}

/* ===== MODAL ===== */
.modal-scrim{position:fixed;inset:0;z-index:70;background:color-mix(in oklab, var(--ink) 55%, transparent);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:fadeIn .25s ease}
.modal{background:var(--bg);border-radius:var(--radius-l);max-width:520px;width:100%;padding:40px;box-shadow:var(--shadow-l);position:relative;animation:popIn .35s cubic-bezier(.2,.8,.2,1)}
.modal .x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.modal h3{margin-bottom:8px}
.modal p.lede{margin-bottom:24px;font-size:14.5px;color:var(--text-mute)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

/* ===== TWEAKS PANEL ===== */
.tweaks{
  position:fixed;bottom:24px;left:24px;z-index:80;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--shadow-l);
  width:280px;padding:18px;
  font-family:var(--font-sans);
}
.tweaks h5{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-mute);margin:0 0 14px;display:flex;justify-content:space-between;align-items:center}
.tweaks h5 .x{border:0;background:transparent;color:var(--text-mute);cursor:pointer;font-size:14px}
.tweaks .t-row{margin-bottom:14px}
.tweaks .t-label{font-size:11.5px;color:var(--text-mute);margin-bottom:6px;display:flex;justify-content:space-between;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase}
.tweaks .swatches{display:flex;gap:6px}
.tweaks .sw{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);cursor:pointer;transition:transform .15s}
.tweaks .sw:hover{transform:scale(1.1)}
.tweaks .sw.sel{border-color:var(--ink);transform:scale(1.12)}
.tweaks .seg{display:flex;gap:0;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--bg-alt)}
.tweaks .seg button{flex:1;padding:6px 10px;border-radius:999px;border:0;background:transparent;font-size:11.5px;cursor:pointer;color:var(--text-mute);font-family:inherit}
.tweaks .seg button.sel{background:var(--ink);color:var(--on-accent)}
.tweaks input[type=range]{width:100%;accent-color:var(--accent-2)}

/* ===== SCROLL REVEAL ===== */
/* Content is visible by default. .pre fades it up until .in triggers anim */
.reveal{animation: reveal-in .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes reveal-in{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion: reduce){
  .reveal{animation:none}
}

/* ===== UTIL ===== */
.grow{flex:1}
.row{display:flex;align-items:center;gap:10px}

/* ============================================================
   ADDITIONS: new components (burger, avatars, hero bg,
   case gallery, tech icons, trust facts, chat typing, map hint)
   ============================================================ */

/* ----- Hero B: светлый фон с мягким голубым свечением (Payrot style) ----- */
.hero-bleed-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, #DBEAFE 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 75% 70%, #EBF2FE 0%, transparent 55%),
    linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 70%);
  z-index:0;
}
.hero-bleed-bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(139,181,255,.25) 0%, transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(43,111,239,.1) 0%, transparent 45%);
}
.hero-bleed-bg::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg,
      rgba(43,111,239,.01) 0 2px,
      transparent 2px 8px);
}

/* ----- Avatar placeholder (elegant monogram) ----- */
.avatar-ph{
  width:100%;height:100%;
  display:grid;place-items:center;
  background: linear-gradient(135deg, #2B6FEF 0%, #1A4FC4 100%);
  color:#fff;
  font-family:var(--font-display);
  font-style:normal;
  font-weight:700;
  font-size:18px;
  letter-spacing:-.02em;
  border-radius:inherit;
}
.avatar-ph::before{content:attr(data-initials)}
.avatar-ph--lg{width:60px;height:60px;border-radius:50%;font-size:20px;flex:0 0 auto}
.avatar-ph--chat{width:36px;height:36px;border-radius:50%;font-size:14px;flex:0 0 auto}

/* ----- Doctor card placeholder ----- */
.doc-ph{
  aspect-ratio:3/4;
  border-radius:var(--radius-m);
  overflow:hidden;
  position:relative;
  display:grid;place-items:center;
  background: linear-gradient(135deg, #EBF2FE 0%, #DBEAFE 60%, #BFD4FC 100%);
  border:1px solid var(--line);
  transition:transform .4s ease;
}
.doc-ph::before{
  content:"";position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:50%;
  background: linear-gradient(180deg, rgba(43,111,239,.25) 0%, rgba(10,37,64,.55) 100%);
  border-radius:50% 50% 0 0;
  filter:blur(2px);
}
.doc-ph::after{
  content:"";position:absolute;
  top:22%;left:50%;transform:translateX(-50%);
  width:38%;aspect-ratio:1;
  background: rgba(43,111,239,.35);
  border-radius:50%;
  filter:blur(1px);
}
/* разные оттенки по seed */
.doc-card:nth-child(2n) .doc-ph{background:linear-gradient(135deg,#F7FAFF 0%,#CFE0FC 70%,#A8C5FA 100%)}
.doc-card:nth-child(3n) .doc-ph{background:linear-gradient(135deg,#EBF2FE 0%,#E8DEF8 60%,#D6C6F2 100%)}
.doc-ph-initials{
  position:absolute;bottom:16px;right:16px;
  font-family:var(--font-display);font-weight:700;
  font-size:22px;color:var(--ink);opacity:.5;
  z-index:2;letter-spacing:-.02em;
}
.doc-card:hover .doc-ph{transform:scale(1.02)}

/* ----- Tech card icon placeholder ----- */
.tech-ph{
  height:180px;
  border-radius:var(--radius-m);
  display:grid;place-items:center;
  color:var(--ink);
  background:
    radial-gradient(ellipse at 50% 100%,
      color-mix(in oklab, var(--ink) 8%, transparent) 0%,
      transparent 70%),
    var(--bg-alt);
  border:1px solid var(--line-soft);
  opacity:.75;
  transition:opacity .3s ease;
}
.tech-card:hover .tech-ph{opacity:1}
.tech-ph--0{background:radial-gradient(ellipse at 50% 100%,color-mix(in oklab,#1F3A5F 10%,transparent) 0%,transparent 70%),var(--bg-alt)}
.tech-ph--1{background:radial-gradient(ellipse at 50% 100%,color-mix(in oklab,#6B5B8C 8%,transparent) 0%,transparent 70%),var(--bg-alt)}
.tech-ph--2{background:radial-gradient(ellipse at 50% 100%,color-mix(in oklab,#5E4438 8%,transparent) 0%,transparent 70%),var(--bg-alt)}

/* ----- Cases section: тёмная, на всю ширину, без округления ----- */
#cases.bg-ink{
  max-width:100%;
  margin:0;
  width:100%;
  border-radius:0;
}

.case-gallery{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
}

/* Плейсхолдер фото — показывает, где будет реальный снимок */
.case-shot-placeholder{
  position:absolute;
  top:20px; right:20px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  border:1px dashed color-mix(in oklab, var(--on-accent) 35%, transparent);
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--on-accent) 75%, transparent);
  max-width:calc(100% - 40px);
}
.case-shot-placeholder svg{
  flex-shrink:0;
  opacity:.8;
}
@media (max-width:560px){
  .case-shot-placeholder span{display:none}
  .case-shot-placeholder{padding:8px}
}

.case-shot{
  margin:0;
  border-radius:var(--radius-l);
  overflow:hidden;
  position:relative;
  min-height:420px;
  display:flex;
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 20%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, #2A3B55 0%, #1A2A42 100%);
}
.case-shot--after{
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 35%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent-2) 40%, #1A2A42) 0%, #1A2A42 100%);
}
/* Крупный номер кейса — теперь на всей панели */
.case-shot::before{
  content:attr(data-num);
  position:absolute;
  left:28px;top:-8px;
  font-family:var(--font-serif);
  font-size:clamp(120px, 18vw, 180px);
  font-weight:400;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.09);
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.case-shot--after::before{
  color:color-mix(in oklab, var(--accent-2) 30%, transparent);
}

/* Внутренний контент панели */
.case-shot-inner{
  position:relative;
  z-index:1;
  padding:36px 36px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  width:100%;
  gap:20px;
}
.case-shot-quote{
  font-family:var(--font-display);
  font-size:22px;
  line-height:1.35;
  font-weight:500;
  letter-spacing:-0.01em;
  color:#fff;
  max-width:40ch;
}
.case-shot--before .case-shot-quote{
  color:color-mix(in oklab, #fff 82%, transparent);
}
.case-shot-quote::before{
  content:"«";
  font-family:var(--font-serif);
  font-style:italic;
  color:color-mix(in oklab, var(--accent-2) 60%, transparent);
  margin-right:2px;
}
.case-shot-quote::after{
  content:"»";
  font-family:var(--font-serif);
  font-style:italic;
  color:color-mix(in oklab, var(--accent-2) 60%, transparent);
  margin-left:2px;
}

.case-shot-tag{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:color-mix(in oklab, var(--on-accent) 10%, transparent);
  border:1px solid color-mix(in oklab, var(--on-accent) 20%, transparent);
  color:color-mix(in oklab, var(--on-accent) 80%, transparent);
}
.case-shot-tag--brass{
  background:var(--accent-2);
  color:#fff;
  border-color:var(--accent-2);
}
.case-shot-meta{
  font-family:var(--font-serif);
  font-size:15px;
  color:color-mix(in oklab, var(--on-accent) 75%, transparent);
  padding-top:16px;
  border-top:1px solid color-mix(in oklab, var(--on-accent) 12%, transparent);
}
.case-disclaimer{
  margin-top:20px;
  font-size:12px;
  color:color-mix(in oklab, var(--on-accent) 55%, transparent);
  max-width:62ch;
  line-height:1.55;
}
@media (max-width:700px){
  .case-gallery{grid-template-columns:1fr}
  .case-shot{min-height:340px}
  .case-shot-quote{font-size:18px}
}

/* ----- Burger button (mobile) ----- */
.nav-burger{
  display:none;
  width:40px;height:40px;
  background:transparent;border:1px solid var(--line);
  border-radius:50%;
  cursor:pointer;
  padding:0;
  position:relative;
  align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
  transition:border-color .2s ease, background .2s ease;
}
.nav-burger span{
  display:block;width:16px;height:1.5px;
  background:var(--ink);
  transition:transform .3s ease, opacity .2s ease;
  transform-origin:center;
}
.nav--overlay .nav-burger{border-color:rgba(255,255,255,.3)}
.nav--overlay .nav-burger span{background:#fff}
.nav--mobile-open .nav-burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav--mobile-open .nav-burger span:nth-child(2){opacity:0}
.nav--mobile-open .nav-burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ----- Mobile menu drawer ----- */
.nav-mobile{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--bg);
  z-index:-1;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
  padding-top:76px;
  overflow-y:auto;
}
.nav--mobile-open .nav-mobile{opacity:1;pointer-events:auto;z-index:59}
.nav-mobile-inner{
  padding:32px var(--gutter) 48px;
  display:flex;flex-direction:column;gap:4px;
}
.nav-mobile-inner a{
  display:block;
  padding:18px 0;
  font-family:var(--font-serif);
  font-size:28px;
  color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  font-weight:500;
  line-height:1.2;
}
.nav-mobile-inner a.active{color:var(--ink)}
.nav-mobile-inner a.active::before{content:"— "}
.nav-mobile-foot{
  margin-top:32px;
  padding-top:24px;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:20px;align-items:flex-start;
}
.nav-mobile-foot .phone-inline{display:inline-block;font-size:22px}
.nav-mobile-foot .btn{width:100%;justify-content:center;padding:16px}

@media (max-width:900px){
  .nav-burger{display:flex}
  .phone-inline{display:none}
  .nav--overlay .phone-inline{display:none}
  .nav-right .btn--cta{display:none}
  .nav-mobile-foot .phone-inline{display:inline-block}
}

/* ----- Trust facts (новая лента) ----- */
.trust{padding-block:40px 28px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--bg-alt)}
.trust-facts{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
  padding-bottom:0;
}
.trust-fact-n{
  font-family:var(--font-serif);
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.02em;
}
.trust-fact-n span{
  font-size:.45em;
  color:var(--text-mute);
  font-style:italic;
  margin-left:4px;
  letter-spacing:0;
}
.trust-fact-t{
  font-size:12px;
  color:var(--text-mute);
  margin-top:8px;
  line-height:1.4;
}
.trust-label{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--text-mute);
  margin-right:8px;
}
.trust-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap}
@media (max-width:900px){
  .trust-facts{grid-template-columns:repeat(2,1fr);gap:20px}
  .trust-row{gap:16px 20px}
  .trust-item{font-size:11px}
}

/* ----- Chat typing indicator ----- */
.chat-typing{display:flex;gap:4px;padding:14px 16px;align-items:center}
.chat-typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--text-mute);
  animation:chat-dot 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2){animation-delay:.15s}
.chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chat-dot{
  0%,60%,100%{opacity:.3;transform:scale(1)}
  30%{opacity:1;transform:scale(1.2)}
}

/* ----- Map placeholder with hint ----- */
.map-ph{
  display:block;
  text-decoration:none;
  color:var(--ink);
  cursor:pointer;
  transition:transform .3s ease, border-color .3s ease;
}
.map-ph:hover{border-color:var(--ink);transform:translateY(-1px)}
.map-hint{
  position:absolute;bottom:12px;right:12px;
  padding:6px 12px;border-radius:999px;
  background:var(--bg);
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.05em;
  color:var(--ink);
  box-shadow:var(--shadow-s);
}

/* ----- Disabled button state ----- */
.btn:disabled{cursor:not-allowed}

/* ----- Text wrap balance для display-заголовков ----- */
.display, .h1, .h2{text-wrap:balance}

/* ----- Убираю .ph label в местах, где он уже не нужен ----- */
.tech-card .ph::after,
.doc-card .ph::after,
.philo-sign .ph::after,
.chat-head .ph::after{display:none}


/* Testimonial avatar monogram */
.testi-av{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background: linear-gradient(135deg, #EBF2FE 0%, #BFD4FC 100%);
  color:var(--ink);
  font-family:var(--font-display);font-style:normal;
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  flex-shrink:0;
}

/* ============================================================
   INNER PAGES — страница услуги, врача, прайса
   ============================================================ */

/* ----- Inner hero (более компактный чем на главной) ----- */
.hero-inner{padding:0}
.hero-bleed--inner{
  height:auto;
  min-height:520px;
  max-height:640px;
  padding-bottom:60px;
}
.hero-bleed-inner-wrap{
  padding-top:140px;
  padding-bottom:40px;
  position:relative;
  z-index:2;
  display:flex;flex-direction:column;gap:24px;
  min-height:inherit;
  justify-content:flex-end;
}
.hero-bleed-body--inner{max-width:min(880px, 92%);padding-block:0}
.hero-bleed-lede--inner{
  margin-left:0;
  padding-left:0;
  border-left:0;
  max-width:56ch;
  margin-top:24px;
}

/* Разные оттенки для фонов разных hero (плейсхолдеры пока) */
.hero-bleed-bg--implant-hero,
.hero-bleed-bg--prices-hero,
.hero-bleed-bg--terapy-hero{
  background:
    radial-gradient(ellipse 80% 60% at 30% 40%, #DBEAFE 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 75% 70%, #EBF2FE 0%, transparent 55%),
    linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 80%);
}
.hero-bleed-bg--implant-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(139,181,255,.3) 0%, transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(43,111,239,.12) 0%, transparent 50%);
}
.hero-bleed-bg--prices-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 20%, rgba(139,181,255,.28) 0%, transparent 60%);
}
.hero-bleed-bg--terapy-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 40% 50%, rgba(43,111,239,.18) 0%, transparent 65%);
}

/* Hero title на inner-страницах — тёмный */
.hero-inner .hero-title,
.hero-bleed--inner .hero-title{color:var(--ink) !important}
.hero-inner .hero-title em,
.hero-bleed--inner .hero-title em{color:var(--accent)}
.hero-bleed-lede--inner{color:var(--text-mute) !important}
.hero-inner .eyebrow,
.hero-bleed--inner .eyebrow{color:var(--accent) !important}

/* ----- Breadcrumbs ----- */
.breadcrumbs{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);
  margin-bottom:0;
}
.breadcrumbs a{color:var(--text-mute);transition:color .2s}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{color:var(--line)}
.breadcrumbs .current{color:var(--ink)}

/* на не-hero страницах breadcrumbs темные */
.breadcrumbs--dark{color:var(--text-mute)}
.breadcrumbs--dark a{color:var(--text-mute)}
.breadcrumbs--dark a:hover{color:var(--ink)}
.breadcrumbs--dark .sep{color:var(--line)}
.breadcrumbs--dark .current{color:var(--ink)}

/* ----- Inner nav: по дефолту светлый, .nav--overlay делает прозрачным поверх hero ----- */
.nav--inner{background:color-mix(in oklab, var(--bg) 80%, transparent);backdrop-filter:saturate(1.2) blur(14px);-webkit-backdrop-filter:saturate(1.2) blur(14px);border-bottom:1px solid var(--line-soft)}
.nav--inner.nav--overlay{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent}
.nav--inner.nav--overlay .brand{color:#fff}
.nav--inner.nav--overlay .brand-mark{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28)}
.nav--inner.nav--overlay .brand-sub{color:rgba(255,255,255,.65)}
.nav--inner.nav--overlay .nav-link{color:rgba(255,255,255,.82)}
.nav--inner.nav--overlay .nav-link:hover, .nav--inner.nav--overlay .nav-link.active{color:#fff}
.nav--inner.nav--overlay .nav-link.active::after{background:#fff}
.nav--inner.nav--overlay .phone-inline{color:#fff}
.nav--inner.nav--overlay .btn--cta{background:#fff;color:var(--accent);border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.nav--inner.nav--overlay .btn--cta:hover{background:var(--accent-sky);color:var(--ink);border-color:var(--accent-sky)}
.nav--inner.nav--overlay .nav-burger{border-color:rgba(255,255,255,.3)}
.nav--inner.nav--overlay .nav-burger span{background:#fff}

/* ----- Service intro ----- */
.svc-intro{padding-block:80px 40px}
.svc-intro-grid{display:grid;grid-template-columns:1fr;gap:60px;align-items:start;max-width:800px}
.svc-intro-text{
  font-family:var(--font-serif);
  font-size:clamp(22px, 2.2vw, 30px);
  line-height:1.4;
  color:var(--ink);
  font-weight:500;
  letter-spacing:-.01em;
  margin-top:16px;
}
.svc-facts{display:flex;flex-direction:column;gap:24px;border-left:1px solid var(--line);padding-left:32px}
.svc-fact .n{font-family:var(--font-serif);font-size:40px;line-height:1;color:var(--ink);font-weight:500;letter-spacing:-.02em}
.svc-fact .t{font-size:12.5px;color:var(--text-mute);line-height:1.4;margin-top:8px}
@media (max-width:900px){
  .svc-intro-grid{grid-template-columns:1fr;gap:40px}
  .svc-facts{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:32px;flex-direction:row;flex-wrap:wrap}
  .svc-fact{flex:1 1 180px}
}

/* ----- Service stages ----- */
.svc-stages{padding-block:100px}
.stages-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.stage-card{
  padding:32px;
  border:1px solid var(--line-soft);
  background:var(--bg);
  border-radius:var(--radius-l);
  display:flex;flex-direction:column;gap:16px;
  min-height:260px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.stage-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.stage-top{display:flex;justify-content:space-between;align-items:center}
.stage-num{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.2em;
  color:var(--text-mute);
}
.stage-time{
  font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-2);
  padding:4px 10px;border-radius:999px;
  background:color-mix(in oklab, var(--accent-2) 10%, transparent);
}
.stage-title{
  font-family:var(--font-serif);
  font-size:22px;color:var(--ink);font-weight:600;line-height:1.2;
}
.stage-text{font-size:14px;color:var(--text-mute);line-height:1.55}
@media (max-width:980px){
  .stages-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .stages-grid{grid-template-columns:1fr}
}

/* ----- Service systems (имплант-системы) ----- */
.svc-systems{padding-block:100px}
.systems-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:20px}
.system-card{
  padding:32px;
  border:1px solid var(--line-soft);
  background:var(--bg-alt);
  border-radius:var(--radius-l);
  display:flex;flex-direction:column;gap:14px;
  min-height:280px;
  transition:transform .3s ease;
}
.system-card:hover{transform:translateY(-3px);border-color:var(--ink)}
.system-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.system-head h3{
  font-family:var(--font-serif);font-size:28px;color:var(--ink);
  font-weight:600;line-height:1;
}
.system-country{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-mute);
}
.system-card p{font-size:13.5px;color:var(--text-mute);line-height:1.55;flex:1}
.system-price{
  font-family:var(--font-serif);font-size:22px;color:var(--ink);
  font-weight:600;padding-top:16px;border-top:1px solid var(--line-soft);
  letter-spacing:-.01em;
}
@media (max-width:980px){.systems-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.systems-grid{grid-template-columns:1fr}}

/* ----- Doctor card as link ----- */
.doc-card--link{color:inherit;text-decoration:none;display:block}
.doc-card--link:hover .name{color:var(--ink)}
.doc-card--link:hover .doc-ph{transform:scale(1.02)}

/* ----- Service doctors ----- */
.svc-doctors{padding-block:100px}

/* ----- Service pricing table ----- */
.svc-pricing{padding-block:100px}
.pricing-table{
  display:flex;flex-direction:column;
  border-top:1px solid var(--line);
}
.pricing-row{
  display:flex;align-items:baseline;gap:12px;
  padding:18px 4px;
  border-bottom:1px solid var(--line-soft);
}
.pricing-title{
  font-family:var(--font-serif);
  font-size:18px;color:var(--ink);
  line-height:1.25;
  flex-shrink:0;
  max-width:62%;
}
.pricing-dots{
  flex:1;
  border-bottom:1px dotted var(--line);
  min-height:2px;
  position:relative;top:-5px;
}
.pricing-price{
  font-family:var(--font-serif);
  font-size:18px;color:var(--ink);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.pricing-note{
  margin-top:32px;
  padding:20px 24px;
  background:var(--bg-alt);
  border-left:3px solid var(--accent-2);
  border-radius:var(--radius-s);
  font-size:14px;
  line-height:1.55;
  color:var(--text-mute);
  max-width:720px;
}
@media (max-width:600px){
  .pricing-title{max-width:none}
  .pricing-row{flex-wrap:wrap}
  .pricing-dots{display:none}
  .pricing-price{margin-left:auto}
}

/* ----- Service FAQ ----- */
.svc-faq{padding-block:100px}

/* ----- Service CTA ----- */
.svc-cta{padding-block:100px}
.cta-block{
  display:grid;grid-template-columns:1.3fr .9fr;gap:48px;align-items:end;
}
.cta-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch}
.cta-actions .btn{justify-content:center;padding:18px 26px}
@media (max-width:900px){
  .cta-block{grid-template-columns:1fr}
}

/* ----- Other services (related) ----- */
.svc-other{padding-block:100px}
.other-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}
.other-card{
  display:block;
  padding:28px;
  border:1px solid var(--line-soft);
  background:var(--bg);
  border-radius:var(--radius-l);
  color:inherit;
  text-decoration:none;
  transition:all .25s ease;
  min-height:220px;
  display:flex;flex-direction:column;gap:12px;
}
.other-card:hover{transform:translateY(-3px);border-color:var(--ink);box-shadow:var(--shadow-s)}
.other-head{display:flex;justify-content:space-between;align-items:center}
.other-head .idx{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.15em;color:var(--text-mute);
}
.other-head svg{color:var(--text-mute);transition:color .25s}
.other-card:hover .other-head svg{color:var(--ink)}
.other-card h3{
  font-family:var(--font-serif);font-size:24px;
  color:var(--ink);font-weight:600;line-height:1.15;
}
.other-card p{font-size:13px;color:var(--text-mute);line-height:1.5;flex:1}
.other-price{
  font-family:var(--font-serif);font-size:17px;color:var(--ink);
  padding-top:14px;border-top:1px solid var(--line-soft);
  margin-top:auto;
}
@media (max-width:980px){.other-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.other-grid{grid-template-columns:1fr}}

/* ============================================================
   DOCTOR PAGE
   ============================================================ */

/* Docter hero — не full-bleed, а светлый портрет + контент */
.doc-hero{padding-top:120px;padding-bottom:60px;background:var(--bg)}
.doc-hero .breadcrumbs{color:var(--text-mute);margin-bottom:40px}
.doc-hero .breadcrumbs a{color:var(--text-mute)}
.doc-hero .breadcrumbs a:hover{color:var(--ink)}
.doc-hero .breadcrumbs .sep{color:var(--line)}
.doc-hero .breadcrumbs .current{color:var(--ink)}

/* Nav на странице врача — overlayMode=false, работает через классы */

.doc-hero-grid{
  display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start;
}
.doc-hero-ph{
  aspect-ratio:3/4;
  border-radius:var(--radius-l);
  overflow:hidden;
  position:relative;
  display:grid;place-items:center;
  background:
    linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  border:1px solid var(--line);
}
/* Если внутри есть реальное фото — декоративные слои не показываем */
.doc-hero-ph:has(.doc-hero-img) {background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%)}
.doc-hero-ph:has(.doc-hero-img)::before,
.doc-hero-ph:has(.doc-hero-img)::after{display:none}

.doc-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 15%;
  display:block;
  position:relative;
  z-index:2;
}

.doc-hero-ph::before{
  content:"";position:absolute;
  bottom:0;left:50%;transform:translateX(-50%);
  width:60%;height:50%;
  background:linear-gradient(180deg,
    color-mix(in oklab, var(--ink) 30%, transparent) 0%,
    color-mix(in oklab, var(--ink) 60%, transparent) 100%);
  border-radius:50% 50% 0 0;
  filter:blur(2px);
}
.doc-hero-ph::after{
  content:"";position:absolute;
  top:22%;left:50%;transform:translateX(-50%);
  width:38%;aspect-ratio:1;
  background:color-mix(in oklab, var(--ink) 40%, transparent);
  border-radius:50%;
  filter:blur(1px);
}
.doc-hero-ph .doc-ph-initials{position:absolute;bottom:20px;right:20px;z-index:2}

.doc-hero-body .display{
  font-size:clamp(44px, 5.5vw, 72px);
  line-height:1;
}
.doc-hero-meta{
  display:grid;grid-template-columns:repeat(3, auto);gap:32px;
  padding-top:32px;padding-bottom:32px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:32px;
  flex-wrap:wrap;
}
.doc-hero-meta > div{display:flex;flex-direction:column;gap:6px}
.doc-hero-meta .k{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute)}
.doc-hero-meta .v{font-family:var(--font-serif);font-size:18px;color:var(--ink)}
.doc-hero-bio{
  font-size:17px;line-height:1.6;color:var(--text);
  max-width:56ch;margin-bottom:32px;
}
.doc-hero-cta{display:flex;gap:14px;flex-wrap:wrap}
@media (max-width:900px){
  .doc-hero-grid{grid-template-columns:1fr;gap:40px}
  .doc-hero-meta{grid-template-columns:1fr 1fr;gap:20px}
}

/* Doctor specs */
.doc-specs{padding-block:100px}
.specs-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:16px}
.spec-card{
  padding:24px;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
  display:flex;gap:16px;align-items:center;
  transition:all .25s ease;
}
.spec-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.spec-num{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;color:var(--text-mute);
}
.spec-name{
  font-family:var(--font-serif);font-size:19px;color:var(--ink);
  font-weight:600;line-height:1.2;flex:1;
}
@media (max-width:700px){.specs-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.specs-grid{grid-template-columns:1fr}}

/* Doctor education */
.doc-edu{padding-block:100px}
.doc-edu-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:72px;align-items:start}
.edu-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.edu-item{
  display:grid;grid-template-columns:auto 1fr;gap:24px;
  padding:24px 0;border-bottom:1px solid var(--line-soft);align-items:start;
}
.edu-item:first-child{border-top:1px solid var(--line)}
.edu-n{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;color:var(--text-mute);
  padding-top:4px;
}
.edu-text{
  font-family:var(--font-serif);font-size:20px;color:var(--ink);
  line-height:1.35;font-weight:600;
}
@media (max-width:900px){.doc-edu-layout{grid-template-columns:1fr;gap:32px}}

/* Doctor services */
.doc-services{padding-block:100px}
.related-svc-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px}
@media (max-width:980px){.related-svc-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.related-svc-grid{grid-template-columns:1fr}}

/* Doctor schedule */
.doc-schedule{padding-block:100px}
.schedule-card{
  background:var(--ink);color:var(--on-accent);
  padding:clamp(40px, 6vw, 72px);
  border-radius:var(--radius-xl);
  display:grid;grid-template-columns:1.3fr auto;gap:48px;align-items:center;
}
.schedule-card h2{color:var(--on-accent);font-family:var(--font-serif)}
.schedule-card .eyebrow{color:color-mix(in oklab, var(--on-accent) 55%, transparent)}
.schedule-card p{color:color-mix(in oklab, var(--on-accent) 75%, transparent)}
.schedule-card .btn--primary{background:var(--on-accent);color:var(--ink);border-color:var(--on-accent)}
.schedule-card .btn--primary:hover{background:transparent;color:var(--on-accent);border-color:var(--on-accent)}
@media (max-width:800px){
  .schedule-card{grid-template-columns:1fr;gap:32px}
}

/* Doctor other */
.doc-other{padding-block:100px}

/* ============================================================
   PRICES PAGE
   ============================================================ */

.prices-top{padding-block:80px 40px}
.prices-top-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:end}

.prices-search{
  display:flex;flex-direction:column;
}
.prices-input-wrap{
  position:relative;
  display:flex;align-items:center;
}
.prices-search-icon{
  position:absolute;left:20px;top:50%;transform:translateY(-50%);
  color:var(--text-mute);
  pointer-events:none;
}
.prices-input-wrap input{
  width:100%;
  padding:20px 52px 20px 52px;
  border:1px solid var(--line);
  background:var(--bg-alt);
  border-radius:999px;
  font-size:17px;
  color:var(--ink);
  font-family:inherit;
  transition:border-color .2s, background .2s;
}
.prices-input-wrap input:focus{
  outline:none;border-color:var(--ink);background:var(--bg);
}
.prices-input-wrap input::placeholder{color:var(--text-mute)}
.prices-clear{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:0;
  font-size:20px;color:var(--text-mute);cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s;
}
.prices-clear:hover{background:var(--line-soft);color:var(--ink)}
.prices-matches{
  margin-top:10px;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute);
}

.prices-cta-box{
  padding:28px;
  background:var(--ink);
  color:var(--on-accent);
  border-radius:var(--radius-l);
}
.prices-cta-box .eyebrow{color:color-mix(in oklab, var(--on-accent) 55%, transparent)}
.prices-cta-box p{color:color-mix(in oklab, var(--on-accent) 75%, transparent) !important}
.prices-cta-box .btn--primary{background:var(--on-accent);color:var(--ink);border-color:var(--on-accent)}
.prices-cta-box .btn--primary:hover{background:transparent;color:var(--on-accent);border-color:var(--on-accent)}

@media (max-width:900px){.prices-top-grid{grid-template-columns:1fr}}

/* Prices list accordion */
.prices-list{padding-block:40px 100px}
.price-section{border-bottom:1px solid var(--line);background:var(--bg)}
.price-section:first-child{border-top:1px solid var(--line)}
.price-section-head{
  width:100%;
  display:flex;align-items:center;gap:24px;
  padding:28px 8px;
  background:transparent;border:0;
  cursor:pointer;text-align:left;
  font-family:inherit;
  transition:padding .2s ease;
}
.price-section-head:hover{padding-inline:20px;background:color-mix(in oklab, var(--ink) 3%, transparent)}
.price-section-name{
  font-family:var(--font-serif);font-size:28px;color:var(--ink);
  font-weight:600;flex:1;line-height:1.15;
}
.price-section-count{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-mute);
}
.price-section-plus{
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;
  font-size:20px;color:var(--ink);flex-shrink:0;
  transition:all .3s ease;
}
.price-section.open .price-section-plus{
  background:var(--ink);color:var(--on-accent);border-color:var(--ink);
}
.price-section-body{
  padding:0 8px 32px;
  animation:price-expand .4s ease;
}
@keyframes price-expand{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:none}
}
.prices-empty{
  padding:60px 0;text-align:center;color:var(--text-mute);
}
@media (max-width:600px){
  .price-section-name{font-size:22px}
  .price-section-count{display:none}
}

/* Prices finances */
.prices-fin{padding-block:100px}
.fin-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}
.fin-card{
  padding:40px;
  background:var(--bg);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  display:flex;flex-direction:column;gap:16px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.fin-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.fin-num{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.2em;color:var(--accent-2);
}
.fin-card h3{
  font-family:var(--font-serif);font-size:26px;color:var(--ink);
  font-weight:600;line-height:1.15;
}
.fin-card p{font-size:14.5px;color:var(--text-mute);line-height:1.55}
@media (max-width:900px){.fin-grid{grid-template-columns:1fr}}


/* ============================================================
   HERO 3D OBJECT — зуб/иллюстрация
   ============================================================ */
.hero-object{
  position:absolute;
  right:calc(var(--gutter) * -0.5);
  top:50%;
  transform:translateY(-50%);
  width:min(45vw, 560px);
  max-width:none;
  height:auto;
  max-height:80vh;
  object-fit:contain;
  z-index:2;
  pointer-events:none;
  animation:hero-float 8s ease-in-out infinite;
  filter:drop-shadow(0 40px 60px rgba(10,37,64,.4)) drop-shadow(0 0 80px rgba(139,181,255,.3));
}
@keyframes hero-float{
  0%, 100%{transform:translateY(-50%) translateX(0)}
  50%{transform:translateY(calc(-50% - 12px)) translateX(-4px)}
}
/* Свечение под объектом */
.hero-object::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse at center, rgba(139,181,255,.4), transparent 60%);
  z-index:-1;
  filter:blur(40px);
}

/* Адаптивность */
@media (max-width:1100px){
  .hero-object{
    width:min(40vw, 420px);
    right:calc(var(--gutter) * -1);
    opacity:.75;
  }
  .hero-bleed-body{max-width:min(560px, 58%)}
}
@media (max-width:760px){
  .hero-object{
    width:80vw;
    right:-20%;
    top:15%;
    transform:none;
    opacity:.35;
    animation:none;
  }
  .hero-bleed-body{max-width:100%}
}
@media (prefers-reduced-motion: reduce){
  .hero-object{animation:none}
}

/* ============================================================
   PAYROT-STYLE ADDITIONS
   ============================================================ */

/* Огромное название бренда полупрозрачным (как PAYROT) */
.hero-brand-text{
  position:absolute;
  top:18%;
  left:50%;
  transform:translateX(-50%);
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(120px, 19vw, 280px);
  letter-spacing:-.06em;
  line-height:.8;
  color:transparent;
  -webkit-text-stroke:1px rgba(10,37,64,.08);
  text-stroke:1px rgba(10,37,64,.08);
  background:linear-gradient(180deg, rgba(10,37,64,.10) 0%, rgba(43,111,239,.06) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  pointer-events:none;
  z-index:1;
  white-space:nowrap;
  user-select:none;
  text-transform:uppercase;
}

@media (max-width:760px){
  .hero-brand-text{
    font-size:clamp(90px, 28vw, 180px);
    top:20%;
  }
}

/* Центральные CTA-кнопки (под текстом) */
.hero-cta-center{
  display:flex;
  gap:14px;
  margin-top:40px;
  flex-wrap:wrap;
}
.btn--hero{
  padding:18px 32px;
  font-size:15px;
  font-weight:600;
}

/* Зуб на светлом фоне — меняю тень */
.hero-object{
  filter:
    drop-shadow(0 30px 50px rgba(10,37,64,.25))
    drop-shadow(0 0 80px rgba(43,111,239,.25));
}

/* Hero-doc card — теперь тёмный скин, чтобы выделяться на светлом фоне */
.hero-doc-name{color:var(--ink)}
.hero-doc-role{color:var(--text-mute)}
.hero-doc-years{color:var(--text-mute)}
.hero-doc-years span{color:var(--accent)}

/* Nav на главной (светлый фон) — сразу светлый */
body:has(.hero-v2):not(:has(.hero-bleed--inner)) .nav:not(.scrolled):not(.nav--overlay){
  background:rgba(255,255,255,.7);
  backdrop-filter:saturate(1.2) blur(14px);
  -webkit-backdrop-filter:saturate(1.2) blur(14px);
  border-bottom-color:transparent;
}


/* ============================================================
   HERO V4 — композиция как у City Dent, наша сине-белая палитра
   ============================================================ */
.hero-v4{
  padding:0;
  position:relative;
  overflow:hidden;
  background: #F2F6FE;  /* очень светло-голубой (аналог лавандового в реф) */
  min-height:100vh;
  display:flex;align-items:center;
  padding-top:100px;
  padding-bottom:40px;
}

/* Фон с декоративными элементами */
.hero-v4-bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(219,234,254,.6) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 75%, rgba(191,212,252,.35) 0%, transparent 60%);
}

/* Декоративные элементы */
.deco{position:absolute;color:rgba(43,111,239,.35);pointer-events:none}
.deco-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(43,111,239,.35);
}
.deco-dot--1{top:18%;left:8%;width:6px;height:6px}
.deco-dot--2{top:42%;left:4%;width:10px;height:10px;background:rgba(43,111,239,.2)}
.deco-dot--3{bottom:30%;right:38%;width:7px;height:7px}
.deco-zigzag{top:22%;right:12%;opacity:.4}
.deco-cross{bottom:32%;left:6%;opacity:.5}
.deco-arrow{top:38%;left:44%;opacity:.4;color:var(--accent)}
.deco-circle{
  border:1.5px solid rgba(43,111,239,.25);
  border-radius:50%;
}
.deco-circle--sm{width:18px;height:18px;top:55%;right:6%}

/* Grid: 2 колонки */
.hero-v4-wrap{position:relative;z-index:2;width:100%}
.hero-v4-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:60px;
}

/* Левая колонка */
.hero-v4-left{
  display:flex;flex-direction:column;gap:28px;
  padding-right:20px;
}
.hero-v4-left .eyebrow{color:var(--accent)}
.hero-v4-title{
  font-family:var(--font-display);
  font-size:clamp(40px, 5.2vw, 68px);
  line-height:1.05;
  letter-spacing:-.03em;
  font-weight:700;
  color:var(--ink);
  margin:0;
}
.hero-v4-title em{
  font-style:normal;
  font-weight:700;
  color:var(--accent);
}
.hero-v4-lede{
  font-size:clamp(15px, 1.15vw, 17px);
  line-height:1.65;
  color:var(--text-mute);
  max-width:50ch;
}
.hero-v4-cta{
  display:flex;gap:14px;
  flex-wrap:wrap;align-items:center;
}

/* Кнопка play-видео */
.btn--play{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 20px 14px 14px;
  border-radius:999px;
  background:transparent;
  border:0;
  font-family:var(--font-display);
  font-size:14px;font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:color .2s ease;
}
.btn--play:hover{color:var(--accent)}
.btn--play:hover .play-icon{background:var(--accent);color:#fff;transform:scale(1.05)}
.play-icon{
  width:42px;height:42px;
  border-radius:50%;
  background:#fff;
  color:var(--accent);
  display:grid;place-items:center;
  box-shadow:var(--shadow-blue);
  transition:all .25s ease;
}
.play-icon svg{margin-left:2px}

/* Правая колонка — фото с кругами */
.hero-v4-right{
  position:relative;
  aspect-ratio:3/4;
  max-width:440px;
  margin-left:auto;
  display:flex;align-items:flex-end;justify-content:center;
}

/* Большой круг — декоративный фон (без overflow!) */
.hero-v4-circle-big{
  position:absolute;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background: linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
}

/* Само фото — поверх круга, выходит за его пределы вверх */
.hero-v4-person{
  position:relative;
  z-index:2;
  width:92%;
  height:auto;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter: drop-shadow(0 14px 24px rgba(10,37,64,.18));
  animation: hero-v4-float 8s ease-in-out infinite;
}
@keyframes hero-v4-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@media (prefers-reduced-motion: reduce){
  .hero-v4-person{animation:none}
}

/* Маленький круг сверху — поверх большого круга, рядом с головой */
.hero-v4-circle-small{
  position:absolute;
  width:18%;
  aspect-ratio:1;
  border-radius:50%;
  background: linear-gradient(135deg, #EBF2FE 0%, #A8C5FA 100%);
  top:6%;
  right:4%;
  z-index:0;
  box-shadow: 0 12px 32px rgba(43,111,239,.15);
}

/* Fallback plaсeholder если фото не загрузилось */
.hero-v4-person-ph{
  position:relative;
  z-index:3;
  width:70%;
  aspect-ratio:5/6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;
}
.hero-v4-person-ph svg{
  width:100%;height:auto;max-height:340px;
  filter: drop-shadow(0 20px 40px rgba(10,37,64,.15));
}
.hero-v4-person-ph .ph-label{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--text-mute);
  text-align:center;
  padding:6px 12px;
  background:rgba(255,255,255,.7);
  border-radius:999px;
  backdrop-filter:blur(6px);
  position:absolute;bottom:8%;
}
/* Если фото загружено — скрываем заглушку */
.hero-v4-right:has(.hero-v4-person:not([style*="display: none"])) .hero-v4-person-ph{display:none}

/* Полоса преимуществ снизу */
.hero-v4-features{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:32px;
  padding:32px 40px;
  background:#fff;
  border-radius:var(--radius-l);
  box-shadow: 0 24px 60px rgba(10,37,64,.08), 0 4px 14px rgba(10,37,64,.04);
  border:1px solid var(--line-soft);
}
.hero-v4-feature{
  display:flex;gap:14px;align-items:flex-start;
}
.hero-v4-feature-n{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.15em;
  color:var(--accent);
  font-weight:500;
  flex-shrink:0;
  padding-top:2px;
}
.hero-v4-feature-title{
  font-family:var(--font-display);
  font-size:15px;font-weight:600;
  color:var(--ink);
  letter-spacing:-.01em;
  line-height:1.3;
}
.hero-v4-feature-text{
  font-size:13px;color:var(--text-mute);
  line-height:1.45;margin-top:4px;
}

/* Адаптив */
@media (max-width:980px){
  .hero-v4{padding-top:90px}
  .hero-v4-grid{grid-template-columns:1fr;gap:40px}
  .hero-v4-right{max-width:400px;margin:0 auto}
  .hero-v4-features{grid-template-columns:1fr 1fr;gap:24px;padding:24px}
}
@media (max-width:600px){
  .hero-v4-title{font-size:clamp(32px, 9vw, 44px)}
  .hero-v4-features{grid-template-columns:1fr;gap:16px}
  .deco-arrow,.deco-zigzag{display:none}
}

/* ============================================================
   TESTIMONIALS — карусель со стрелками и точками
   ============================================================ */
.testi-section{
  padding-block:120px;
  background:var(--bg-alt);
  overflow:hidden;  /* карусель может выезжать за пределы */
}

.testi-head{margin-bottom:56px;max-width:600px}
.testi-head .h1 em{color:var(--accent)}

/* Шапка с заголовком слева и стрелками справа */
.testi-head--row{
  max-width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:32px;
  flex-wrap:wrap;
}
.testi-head--row > div:first-child{max-width:600px}

/* Стрелки в шапке */
.testi-arrows{display:flex;gap:10px;flex-shrink:0}
.testi-arrow{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  cursor:pointer;
  transition:all .2s ease;
}
.testi-arrow:hover{
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
  transform:translateY(-2px);
  box-shadow:var(--shadow-blue);
}

/* Карусель: обрезаем overflow, внутри двигаем track */
.testi-carousel{
  overflow:hidden;
  width:100%;
}
.testi-track{
  display:flex;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.testi-page{
  flex:0 0 100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  align-items:stretch;
}
@media (max-width:980px){
  .testi-page{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:640px){
  .testi-page{grid-template-columns:1fr}
}

.testi-card{
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:18px;
  padding:28px;
  display:flex;flex-direction:column;
  min-height:280px;
  box-shadow:
    0 1px 2px rgba(10,37,64,.04),
    0 4px 16px rgba(10,37,64,.05);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
}
.testi-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(10,37,64,.10), 0 4px 14px rgba(43,111,239,.06);
  border-color:var(--accent-sky);
}

.testi-card-text{
  font-family:var(--font-display);
  font-size:15px;
  line-height:1.6;
  color:var(--ink);
  margin:0 0 24px;
  font-weight:400;
  letter-spacing:-.005em;
  flex:1;
}

.testi-card-by{
  display:flex;align-items:center;gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
  margin-top:auto;
}
.testi-card-av{
  width:40px;height:40px;
  border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg, #2B6FEF 0%, #1E4FC4 100%);
  color:#fff;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.02em;
  flex-shrink:0;
}
.testi-card-meta{flex:1;min-width:0}
.testi-card-name{
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.005em;
}
.testi-card-role{
  font-size:11.5px;
  color:var(--text-mute);
  margin-top:2px;
  font-family:var(--font-mono);
  letter-spacing:.02em;
}

/* Точки-индикаторы снизу */
.testi-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:48px;
}
.testi-dot{
  width:10px;height:10px;
  border-radius:50%;
  background:var(--line);
  border:0;
  cursor:pointer;
  transition:all .25s ease;
  padding:0;
}
.testi-dot:hover{background:var(--accent-sky)}
.testi-dot.active{
  background:var(--accent);
  width:32px;
  border-radius:5px;
}

@media (max-width:640px){
  .testi-head--row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   DOCTORS — Grid 3×3 с фото в голубых кругах
   ============================================================ */
.doctors-section{
  padding-block:120px;
  background:var(--bg);
}

.doctors-grid-9{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:40px 32px;
  max-width:1100px;
  margin-inline:auto;
}
@media (max-width:900px){
  .doctors-grid-9{grid-template-columns:repeat(3, 1fr);gap:32px 20px;max-width:none}
}
@media (max-width:640px){
  .doctors-grid-9{grid-template-columns:1fr;gap:40px;max-width:400px}
}

/* Карточка врача */
.doc-card-photo{
  display:flex;flex-direction:column;
  cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.doc-card-photo:hover{transform:translateY(-6px)}
.doc-card-photo:hover .doc-photo-frame{
  box-shadow:0 16px 40px rgba(43,111,239,.18);
}
.doc-card-photo:hover .doc-name{color:var(--accent)}

/* Голубой круг с прозрачным фото внутри */
.doc-photo-frame{
  position:relative;
  width:100%;
  aspect-ratio:1;
  border-radius:50%;
  background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;
  margin-bottom:20px;
  transition:box-shadow .3s ease, transform .3s ease;
  box-shadow:0 4px 16px rgba(10,37,64,.08);
}
/* Чередование оттенков для разнообразия */
.doc-card-photo:nth-child(3n+2) .doc-photo-frame{
  background:linear-gradient(135deg, #EBF2FE 0%, #A8C5FA 100%);
}
.doc-card-photo:nth-child(3n+3) .doc-photo-frame{
  background:linear-gradient(135deg, #F0F4FB 0%, #CFE0FC 100%);
}

/* Прозрачное фото врача — стоит на дно круга, торчит вверх как у hero */
.doc-photo{
  width:92%;
  height:auto;
  max-width:92%;
  max-height:100%;
  object-fit:contain;
  object-position:bottom center;
  display:block;
  position:relative;
  margin-top:8%;
  transition:transform .3s ease;
}
.doc-card-photo:hover .doc-photo{transform:translateY(-3px)}

.doc-info{
  display:flex;flex-direction:column;
  padding:0 4px;
}
.doc-name{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-.015em;
  line-height:1.2;
  transition:color .2s ease;
}
.doc-role{
  font-size:13px;
  color:var(--text-mute);
  line-height:1.4;
  margin-top:6px;
}
.doc-years{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--accent);
  text-transform:uppercase;
  margin-top:8px;
}

@media (max-width:560px){
  .doc-name{font-size:17px}
}

/* ============================================================
   CASES — section стилизуется через .bg-ink (тёмный)
   ============================================================ */

/* ===== CALCULATOR ===== */
.calc{background:var(--grad-cta);color:var(--on-accent);border-radius:var(--radius-xl);padding:clamp(32px,5vw,72px);position:relative;overflow:hidden}
.calc::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 85% 15%, rgba(139,181,255,.3) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(255,255,255,.08) 0%, transparent 60%);
}
.calc > *{position:relative;z-index:1}
body[data-theme="dark"] .calc{background:var(--bg-alt);color:var(--ink);border:1px solid var(--line)}
.calc h2{color:var(--on-accent)}
.calc h2 em.serif, .calc em.serif{color:#8BB5FF !important;font-weight:800 !important}
body[data-theme="dark"] .calc h2{color:var(--ink)}

/* ============================================================
   PAGE: Каталог врачей (doctors.html)
   ============================================================ */
.doctors-page-hero{padding:120px 0 56px}
.doctors-page-hero .display{font-size:clamp(48px,6vw,80px);line-height:1.02}

.doctors-page-filters{padding:0 0 48px;background:var(--bg)}
.filter-chips{display:flex;gap:10px;flex-wrap:wrap}
.filter-chip{
  padding:10px 18px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:999px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:500;
  color:var(--ink);
  cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s ease;
}
.filter-chip:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.filter-chip.active{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.filter-chip:disabled{opacity:.4;cursor:not-allowed}
.filter-count{
  font-family:var(--font-mono);
  font-size:11px;
  opacity:.6;
  background:rgba(0,0,0,.06);
  padding:2px 8px;
  border-radius:999px;
}
.filter-chip.active .filter-count{background:rgba(255,255,255,.25);opacity:.9}

.doctors-page-grid{padding:0 0 120px}

.doctors-page-cta{padding-block:120px}
.doctors-page-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   PAGE: О клинике (about.html)
   ============================================================ */
.about-hero{padding:120px 0 80px}
.about-hero .display{font-size:clamp(48px,6vw,88px);line-height:1.02}

/* Статистика */
.about-stats{padding:80px 0;background:var(--bg-alt);border-block:1px solid var(--line-soft)}
.about-stats-grid{
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap:40px;
}
.about-stats-grid > div{text-align:center}
.about-stats-grid .n{
  font-family:var(--font-display);
  font-size:clamp(48px,5.5vw,72px);
  font-weight:700;
  color:var(--ink);
  line-height:1;
  letter-spacing:-.02em;
}
.about-stats-grid .t{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-mute);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:12px;
}
@media (max-width:760px){.about-stats-grid{grid-template-columns:repeat(2,1fr)}}

/* Принципы */
.about-values{padding:120px 0;background:var(--bg)}
.about-values .h1 em{color:var(--accent)}
.about-values-grid{
  display:grid;grid-template-columns:repeat(2, 1fr);
  gap:32px;
  margin-top:56px;
}
@media (max-width:760px){.about-values-grid{grid-template-columns:1fr}}
.about-value{
  padding:40px;
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-value:hover{transform:translateY(-4px);box-shadow:var(--shadow-m)}
.about-value .num{
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.15em;
  color:var(--accent);
  margin-bottom:16px;
}
.about-value h3{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 12px;
  letter-spacing:-.015em;
}
.about-value p{
  font-size:15px;
  line-height:1.6;
  color:var(--text-mute);
}

/* Таймлайн */
.about-timeline{padding:120px 0;background:var(--bg-alt)}
.about-timeline .h1 em{color:var(--accent)}
.timeline-list{
  margin-top:56px;
  position:relative;
  padding-left:120px;
}
.timeline-list::before{
  content:"";position:absolute;
  left:100px;top:0;bottom:0;
  width:1px;background:var(--line);
}
.timeline-item{
  position:relative;
  padding-bottom:48px;
}
.timeline-item:last-child{padding-bottom:0}
.timeline-item::before{
  content:"";position:absolute;
  left:-25px;top:6px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--accent);
  border:3px solid var(--bg-alt);
  z-index:1;
}
.timeline-year{
  position:absolute;
  left:-120px;
  top:0;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-.01em;
}
.timeline-body h4{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.timeline-body p{
  font-size:14.5px;
  line-height:1.6;
  color:var(--text-mute);
  max-width:52ch;
}
@media (max-width:760px){
  .timeline-list{padding-left:80px}
  .timeline-list::before{left:60px}
  .timeline-item::before{left:-25px}
  .timeline-year{left:-80px;font-size:18px}
}

/* Оборудование */
.about-equipment{padding:120px 0;background:var(--bg)}
.about-equipment .h1 em{color:var(--accent)}
.equipment-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:24px;
  margin-top:56px;
}
@media (max-width:980px){.equipment-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.equipment-grid{grid-template-columns:1fr}}
.equipment-card{
  padding:32px;
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:var(--radius-l);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.equipment-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-m);
  border-color:var(--accent-sky);
}
.equipment-tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent);
  background:color-mix(in oklab, var(--accent) 10%, transparent);
  padding:4px 10px;
  border-radius:999px;
  margin-bottom:16px;
}
.equipment-card h4{
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 12px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.equipment-card p{
  font-size:14px;
  line-height:1.6;
  color:var(--text-mute);
}

/* Превью команды */
.about-team-preview{padding:120px 0;background:var(--bg-alt)}
.about-team-preview .h1 em{color:var(--accent)}

/* CTA */
.about-cta{padding-block:120px}
.about-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   PAGE: Каталог кейсов (cases.html)
   ============================================================ */
.cases-page-hero{padding:120px 0 48px}
.cases-page-hero .display{font-size:clamp(48px,6vw,80px);line-height:1.02}
.cases-page-filters{padding:0 0 48px}
.cases-page-grid{padding:0 0 120px}

.cases-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
@media (max-width:980px){.cases-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.cases-grid{grid-template-columns:1fr}}

.case-card{
  display:block;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.case-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(10,37,64,.12);
  border-color:var(--accent-sky);
}

.case-card-shots{
  display:grid;grid-template-columns:1fr 1fr;
  aspect-ratio:16/9;
  position:relative;
}
/* Плейсхолдер фото — показывает что здесь будет реальный снимок */
.case-card-placeholder{
  position:absolute;
  top:12px; left:12px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.8);
  backdrop-filter:blur(6px);
  border:1px dashed color-mix(in oklab, var(--accent) 45%, transparent);
  font-family:var(--font-mono);
  font-size:9px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent);
  pointer-events:none;
}
.case-card-placeholder svg{
  flex-shrink:0;
  opacity:.7;
}
@media (max-width:560px){
  .case-card-placeholder span{display:none}
  .case-card-placeholder{padding:5px}
}
.case-card-shot{
  position:relative;
  display:flex;align-items:flex-end;padding:12px;
  overflow:hidden;
}
.case-card-shot--before{
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 15%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, #2A3B55 0%, #1A2A42 100%);
}
.case-card-shot--after{
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 35%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 50%, #1A2A42) 0%, #1A2A42 100%);
}
/* Крупный номер в каталожных карточках */
.case-card-shot::before{
  content:attr(data-num);
  position:absolute;
  left:14px;top:-6px;
  font-family:var(--font-serif);
  font-size:90px;
  font-weight:400;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.10);
  pointer-events:none;
  user-select:none;
}
.case-card-shot--after::before{
  color:color-mix(in oklab, var(--accent) 32%, transparent);
}
/* Разделитель */
.case-card-shots::after{
  content:"";position:absolute;
  top:0;bottom:0;left:50%;
  width:2px;background:#fff;
  z-index:1;
}
.case-card-shot-label{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.4);
  backdrop-filter:blur(4px);
  padding:4px 10px;
  border-radius:999px;
  opacity:.9;
}

.case-card-body{padding:24px}
.case-card-meta{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-mute);
  margin-bottom:12px;
}
.case-card-method{color:var(--accent);font-weight:500}
.case-card-time{opacity:.8}

.case-card-title{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;
  color:var(--ink);margin:0 0 10px;
  letter-spacing:-.015em;line-height:1.2;
}
.case-card-summary{
  font-size:14px;line-height:1.55;
  color:var(--text-mute);margin:0 0 20px;
}
.case-card-footer{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:16px;border-top:1px solid var(--line-soft);
}
.case-card-price{
  font-family:var(--font-display);
  font-size:16px;font-weight:600;
  color:var(--ink);
}
.case-card-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;color:var(--accent);font-weight:500;
}

.cases-page-cta{padding-block:120px}
.cases-page-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   PAGE: Один кейс (case.html)
   ============================================================ */
.case-hero{padding:120px 0 80px}
.case-hero .display{font-size:clamp(40px,5vw,72px);line-height:1.05}
.case-hero-grid{
  display:grid;grid-template-columns:2fr 1fr;
  gap:60px;align-items:flex-start;
}
@media (max-width:900px){.case-hero-grid{grid-template-columns:1fr;gap:40px}}

.case-hero-meta{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px 32px;
  margin-top:32px;
  padding:24px;
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
}
.case-hero-meta > div{display:flex;flex-direction:column;gap:4px}
.case-hero-meta .k{
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);
}
.case-hero-meta .v{
  font-family:var(--font-display);font-size:16px;
  font-weight:600;color:var(--ink);
}

.case-hero-side{position:sticky;top:100px}
.case-hero-doc{
  display:flex;align-items:center;gap:16px;
  padding:20px;
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  text-decoration:none;color:inherit;
  transition:all .2s ease;
}
.case-hero-doc:hover{border-color:var(--accent);transform:translateY(-2px)}
.case-hero-doc img{
  width:72px;height:72px;border-radius:50%;
  object-fit:cover;object-position:center 22%;
  background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  flex-shrink:0;
}
.case-hero-doc-label{
  font-family:var(--font-mono);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:4px;
}
.case-hero-doc-name{
  font-family:var(--font-display);font-size:16px;
  font-weight:600;color:var(--ink);
  letter-spacing:-.005em;line-height:1.2;
}
.case-hero-doc-role{
  font-size:12px;color:var(--text-mute);
  margin-top:2px;
}

/* Before/After слайдер */
.case-shots-section{padding:60px 0 120px}
.case-shots-head{margin-bottom:32px}
.case-shots-head .h2{margin-bottom:8px}
.case-shots-hint{
  font-size:13px;color:var(--text-mute);
  font-family:var(--font-mono);letter-spacing:.05em;
}

.ba-before,
.ba-after{
  position:absolute;inset:0;
  overflow:hidden;
}
.ba-before{
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 15%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, #2A3B55 0%, #1A2A42 100%);
}
.ba-after{
  background:
    radial-gradient(ellipse at 50% 60%,
      color-mix(in oklab, #fff 35%, transparent) 0%,
      transparent 65%),
    linear-gradient(135deg, color-mix(in oklab, var(--accent) 50%, #1A2A42) 0%, #1A2A42 100%);
}
.ba-before::before,
.ba-after::before{
  content:attr(data-num);
  position:absolute;
  left:36px;top:-12px;
  font-family:var(--font-serif);
  font-size:clamp(160px, 22vw, 260px);
  font-weight:400;
  font-style:italic;
  line-height:.9;
  letter-spacing:-.04em;
  color:rgba(255,255,255,.09);
  pointer-events:none;
  user-select:none;
}
.ba-after::before{
  color:color-mix(in oklab, var(--accent) 28%, transparent);
}
.ba-tag{
  position:absolute;top:20px;left:20px;
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:#fff;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  padding:6px 14px;
  border-radius:999px;
}
.ba-tag--after{left:auto;right:20px;background:var(--accent)}
.ba-handle{
  position:absolute;top:0;bottom:0;
  width:2px;background:#fff;
  transform:translateX(-50%);
  pointer-events:none;
  z-index:2;
}
.ba-handle-line{
  position:absolute;top:0;bottom:0;
  left:50%;transform:translateX(-50%);
  width:2px;background:rgba(255,255,255,.8);
  box-shadow:0 0 12px rgba(0,0,0,.3);
}
.ba-handle-knob{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%, -50%);
  width:40px;height:40px;
  border-radius:50%;background:#fff;
  display:grid;place-items:center;
  color:var(--ink);
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}

.case-shots-captions{
  display:grid;grid-template-columns:1fr 1fr;
  gap:32px;margin-top:32px;
}
@media (max-width:760px){.case-shots-captions{grid-template-columns:1fr}}
.case-shots-caption{
  padding:20px;
  background:var(--bg-alt);
  border:1px solid var(--line-soft);
  border-radius:var(--radius-m);
}
.case-shots-caption-label{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:8px;
}
.case-shots-caption p{
  font-size:14px;line-height:1.6;color:var(--ink);margin:0;
}

.case-related{padding:120px 0;background:var(--bg-alt)}
.case-related .h1 em{color:var(--accent)}

.case-cta{padding-block:120px}
.case-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   PAGE: Блог (blog.html)
   ============================================================ */
.blog-hero{padding:120px 0 48px}
.blog-hero .display{font-size:clamp(56px,7vw,100px);line-height:1.02}
.blog-hero .display em{color:var(--accent)}
.blog-filters{padding:0 0 48px}
.blog-grid-section{padding:0 0 120px}

.blog-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);
  gap:32px;
}
@media (max-width:980px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr}}

.blog-card{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 40px rgba(10,37,64,.10);
  border-color:var(--accent-sky);
}
.blog-card-cover{
  aspect-ratio:16/9;
  background:
    radial-gradient(ellipse at 30% 40%,
      color-mix(in oklab, var(--accent) 30%, transparent) 0%,
      transparent 60%),
    linear-gradient(135deg, #E8F0FE 0%, #BFD4FC 100%);
  position:relative;
  padding:20px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.blog-card-category{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
  background:#fff;
  padding:6px 12px;
  border-radius:999px;
  box-shadow:0 2px 8px rgba(10,37,64,.08);
}
.blog-card-placeholder{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(4px);
  border:1px dashed color-mix(in oklab, var(--accent) 40%, transparent);
  font-family:var(--font-mono);
  font-size:9.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:color-mix(in oklab, var(--accent) 80%, var(--ink));
  flex-shrink:0;
}
.blog-card-placeholder svg{
  flex-shrink:0;
  opacity:.65;
}
@media (max-width:560px){
  .blog-card-placeholder span{display:none}
  .blog-card-placeholder{padding:6px}
}
.blog-card-body{
  padding:24px;display:flex;flex-direction:column;gap:16px;flex:1;
}
.blog-card-title{
  font-family:var(--font-display);
  font-size:20px;font-weight:600;
  color:var(--ink);margin:0;
  letter-spacing:-.015em;line-height:1.25;
}
.blog-card-excerpt{
  font-size:14px;line-height:1.55;
  color:var(--text-mute);margin:0;flex:1;
}
.blog-card-footer{
  padding-top:16px;border-top:1px solid var(--line-soft);
}
.blog-card-author{
  display:flex;align-items:center;gap:10px;
}
.blog-card-author img{
  width:32px;height:32px;border-radius:50%;
  object-fit:cover;object-position:center 22%;
  background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  flex-shrink:0;
}
.blog-card-author-name{
  font-size:13px;font-weight:600;color:var(--ink);
}
.blog-card-meta{
  font-family:var(--font-mono);font-size:10.5px;
  color:var(--text-mute);letter-spacing:.04em;
  margin-top:2px;
}

.blog-cta{padding-block:120px}
.blog-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   PAGE: Одна статья (article.html)
   ============================================================ */
.article-hero{padding:120px 0 48px}
.article-hero .display{
  font-size:clamp(36px,4.5vw,64px);
  line-height:1.1;letter-spacing:-.02em;
}
.article-hero-author{
  display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;
  padding-top:32px;
  border-top:1px solid var(--line-soft);
}
.article-hero-author img{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;object-position:center 22%;
  background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
  flex-shrink:0;
}
.article-hero-author-name{
  font-family:var(--font-display);font-size:15px;
  font-weight:600;color:var(--ink);
}
.article-hero-author-role{
  font-size:12.5px;color:var(--text-mute);
  margin-top:2px;
}
.article-hero-meta{
  margin-left:auto;display:flex;gap:10px;
  font-family:var(--font-mono);font-size:12px;
  color:var(--text-mute);letter-spacing:.03em;
}
@media (max-width:560px){
  .article-hero-meta{margin-left:0;width:100%}
}

.article-body-section{padding:48px 0 80px}
.article-body{
  max-width:680px;margin:0 auto;
  font-family:var(--font-display);
  font-size:17px;line-height:1.75;
  color:var(--ink);
}
.article-body .article-lead{
  font-size:20px;line-height:1.55;
  color:var(--ink);font-weight:500;
  margin:0 0 32px;
  padding-bottom:32px;
  border-bottom:1px solid var(--line-soft);
}
.article-body p{
  margin:0 0 20px;color:var(--text);
}
.article-body h2{
  font-family:var(--font-display);
  font-size:28px;font-weight:700;
  color:var(--ink);
  margin:48px 0 16px;
  letter-spacing:-.02em;
}
.article-body h3{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;
  color:var(--ink);
  margin:36px 0 12px;
  letter-spacing:-.015em;
}
.article-body ul,
.article-body ol{
  margin:0 0 24px;padding-left:24px;color:var(--text);
}
.article-body li{margin-bottom:10px;line-height:1.65}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.article-quote{
  margin:32px 0;
  padding:32px;
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius-m) var(--radius-m) 0;
  font-style:italic;
  color:var(--ink);
  font-size:18px;line-height:1.55;
}
.article-quote cite{
  display:block;margin-top:16px;
  font-style:normal;
  font-family:var(--font-mono);
  font-size:12px;letter-spacing:.05em;
  color:var(--text-mute);
}

.article-tags{
  max-width:680px;margin:48px auto 0;
  display:flex;flex-wrap:wrap;gap:8px;
  padding-top:32px;
  border-top:1px solid var(--line-soft);
}
.article-tag{
  display:inline-block;
  font-family:var(--font-mono);font-size:12px;
  color:var(--accent);
  background:color-mix(in oklab, var(--accent) 8%, transparent);
  padding:6px 12px;border-radius:999px;
  letter-spacing:.02em;
}

/* Карточка автора */
.article-author-section{padding:48px 0 80px;background:var(--bg-alt)}
.article-author-card{
  display:grid;grid-template-columns:auto 1fr;
  gap:32px;align-items:flex-start;
  max-width:800px;margin:0 auto;
  padding:32px;
  background:#fff;
  border:1px solid var(--line-soft);
  border-radius:var(--radius-l);
}
@media (max-width:640px){
  .article-author-card{grid-template-columns:1fr;gap:20px}
}
.article-author-photo{
  width:140px;height:140px;border-radius:var(--radius-m);
  object-fit:cover;object-position:center 22%;
  background:linear-gradient(135deg, #DBEAFE 0%, #BFD4FC 100%);
}
.article-author-label{
  font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:8px;
}
.article-author-name{
  font-family:var(--font-display);
  font-size:22px;font-weight:600;
  color:var(--ink);
  letter-spacing:-.015em;
}
.article-author-role{
  font-size:13px;color:var(--text-mute);
  margin-top:4px;margin-bottom:16px;
}
.article-author-bio{
  font-size:14.5px;line-height:1.6;
  color:var(--text);max-width:54ch;
}

.article-related{padding:120px 0}
.article-related .h1 em{color:var(--accent)}

.article-cta{padding-block:120px}
.article-cta .h1 em{color:#fff !important;font-weight:800 !important}

/* ============================================================
   SMILE ILLUSTRATIONS — SVG для кейсов
   ============================================================ */
.smile-svg{
  width:100%;
  height:100%;
  display:block;
}

/* Контейнеры для SVG: теперь не нужно никакого градиента на бэкграунде */
.case-shot-img{
  overflow:hidden;
  border-radius:var(--radius-l);
  aspect-ratio:4/3;
  background:#1A2238;
  position:relative;
}

.case-card-shot{
  overflow:hidden;
  position:relative;
  padding:0 !important;  /* убираем отступы для SVG */
}
.case-card-shot .smile-svg{
  position:absolute;
  inset:0;
}
.case-card-shot-label{
  position:absolute;
  bottom:12px;left:12px;
  z-index:2;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FFFFFF;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  padding:4px 10px;
  border-radius:999px;
}
.case-card-shot--after .case-card-shot-label{
  left:auto;right:12px;
  background:var(--accent);
}

/* Убираю предыдущие декоративные градиенты с секций before/after */
.case-card-shot--before,
.case-card-shot--after{
  background:transparent !important;
}
.case-card-shots::after{
  display:none !important;  /* убираем белую разделительную линию */
}

/* Для before/after слайдера на странице кейса */
.ba-before .smile-svg,
.ba-after .smile-svg{
  position:absolute;
  inset:0;
}
.ba-before,
.ba-after{
  background:transparent !important;  /* убираем старый градиент - он теперь в SVG */
}

/* Убираем старые псевдо-before/after подложки */

/* ===== LEGAL PAGES (privacy, offer) ===== */
.legal-hero{
  padding:144px 0 80px;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.legal-body{
  padding:80px 0 120px;
  background:var(--bg);
}
.legal-doc{
  max-width:780px;
  font-size:16px;
  line-height:1.75;
  color:var(--ink);
}
.legal-doc h2{
  font-family:var(--font-display);
  font-size:24px;
  font-weight:700;
  letter-spacing:-0.015em;
  margin:56px 0 20px;
  color:var(--ink);
}
.legal-doc h2:first-child{margin-top:0}
.legal-doc p{
  margin:16px 0;
  color:var(--text);
}
.legal-doc ul{
  margin:16px 0;
  padding-left:24px;
}
.legal-doc li{
  margin:10px 0;
  line-height:1.7;
  color:var(--text);
}
.legal-doc strong{
  font-weight:600;
  color:var(--ink);
}
.legal-doc a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.legal-doc a:hover{text-decoration-thickness:2px}
.legal-footnote{
  margin-top:56px;
  padding:24px 28px;
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0;
  font-size:14px;
  color:var(--text-mute);
}