/* ============================================================
   SVOMAX — кабинет ультразвуковой диагностики
   Единая дизайн-система для всех страниц сайта
   ============================================================ */
:root{
  --bg:#ffffff;
  --alt:#f5f8fb;
  --ink:#0d1b2a;
  --muted:#5c7085;
  --line:#e4ecf2;
  --brand:#0f6fff;
  --brand-2:#00c2b2;
  --brand-ink:#0a4fb8;
  --card:#ffffff;
  --warn:#f5b301;
  --shadow-sm:0 1px 2px rgba(13,27,42,.05), 0 6px 20px rgba(13,27,42,.05);
  --shadow-md:0 20px 50px -20px rgba(13,27,42,.25);
  --r:16px; --r-lg:24px;
  --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:1.1rem}
h4{font-size:1rem}
p{margin:0 0 1rem}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.micro{font-size:.8rem;color:var(--muted);margin:12px 0 0}
.note{font-size:.85rem;color:var(--muted)}
.center{text-align:center}
.grad{background:linear-gradient(100deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 16px;border-radius:10px;z-index:100}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.84);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;height:124px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.14em;font-size:1.05rem}
.logo small{display:block;font-size:.58rem;letter-spacing:.08em;font-weight:600;color:var(--muted);
  text-transform:uppercase;line-height:1;margin-top:3px}
.logo-mark{width:34px;height:34px;flex:0 0 34px}
.logo-mark rect{fill:var(--brand)}
.nav-links{margin-left:auto;display:flex;gap:16px}
.nav-links a{color:var(--muted);font-weight:600;font-size:.9rem;position:relative;padding:4px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transform:scaleX(0);
  transform-origin:left;transition:transform .25s ease;border-radius:2px}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.nav-links a.active{color:var(--ink)}
/* ---------- телефоны операторов ----------
   Логотипы у операторов разного цвета: красный МТС, красно-чёрный A1,
   тёмно-синий life:). На тёмном подвале два последних сливались бы с фоном,
   поэтому каждый знак кладём на собственную белую подложку — так он читается
   на любом фоне и стоит на своём белом поле, как и задуман.
   content-box обязателен: при глобальном border-box отступы подложки съедали
   бы высоту и знак получался бы вдвое мельче заданного. */
.operator-logo{height:14px;width:auto;flex:0 0 auto;box-sizing:content-box;
  margin-left:.5em;display:inline-block;vertical-align:middle;
  background:#fff;padding:3px 6px;border-radius:5px}

/* номер + логотип: одной строкой, не разрываясь при переносе.
   tabular-nums — чтобы в столбик цифры вставали строго друг под друга:
   в обычном начертании они разной ширины и край получается рваным. */
.nav-phones a,.phones-col a,.phones-inline a{white-space:nowrap;
  display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}

/* столбик номеров: в шапке и в блоках «Позвоните — подскажем» */
.nav-phones,.phones-col{display:inline-flex;flex-direction:column;gap:4px}
/* Знаки у операторов разной ширины (МТС вчетверо шире A1). В столбик это
   давало рваный край: цифры начинались в разных местах. Даём знаку слот
   одинаковой ширины — номера выстраиваются по одной вертикали, а сами знаки
   стоят своей ровной колонкой. */
.nav-phones .operator-logo,.phones-col .operator-logo{width:56px;object-fit:contain}
.nav-phones{font-weight:800;font-size:.9rem;align-items:flex-end}
.phones-col{gap:6px;font-weight:700;font-size:.95rem}
.phones-col a:hover,.nav-phones a:hover{color:var(--brand)}

/* номера в строку — для примечания на «Ценах» */
.phones-inline{display:inline}
.phones-inline a:not(:first-child){margin-left:.7em}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);
  background:#fff;border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}.burger span::after{top:6px}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:linear-gradient(120deg,var(--brand),var(--brand-ink));color:#fff;
  border:1px solid transparent;border-radius:999px;padding:12px 24px;font:inherit;
  font-weight:700;font-size:.95rem;cursor:pointer;transition:.22s ease;
  box-shadow:0 10px 24px -12px rgba(15,111,255,.85)}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(15,111,255,.9)}
.btn-sm{padding:9px 18px;font-size:.88rem}
.btn-lg{padding:15px 30px;font-size:1rem}
.btn-block{width:100%}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}

/* ---------------- hero (главная) ---------------- */
.hero{position:relative;overflow:hidden;padding:84px 0 0;
  background:radial-gradient(1200px 500px at 15% -10%, #eaf2ff 0%, transparent 60%),
             radial-gradient(900px 460px at 90% 0%, #e6fbf8 0%, transparent 55%),
             linear-gradient(180deg,#fbfdff,#ffffff)}
.hero-glow{position:absolute;inset:auto auto -180px 40%;width:520px;height:420px;
  background:radial-gradient(circle,rgba(0,194,178,.22),transparent 65%);filter:blur(20px)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.25fr .85fr;gap:56px;
  align-items:start;padding-bottom:64px}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:7px 16px;font-size:.82rem;font-weight:700;color:var(--muted);
  box-shadow:var(--shadow-sm);margin-bottom:22px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--brand-2);
  box-shadow:0 0 0 4px rgba(0,194,178,.18);display:inline-block}
.lead{color:var(--muted);font-size:1.12rem;max-width:56ch}
/* align-items обязателен: рядом с кнопкой стоит столбик из трёх номеров, и без
   выравнивания flex растянул бы кнопку на всю его высоту */
.cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:30px 0 40px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  border-top:1px solid var(--line);padding-top:26px}
/* цифра стоит по центру своей подписи, а не прижата к краю ячейки */
.metrics>div{text-align:center}
.metrics strong{display:block;font-size:1.6rem;font-weight:800;letter-spacing:-.02em}
.metrics span{font-size:.82rem;color:var(--muted)}
.hero-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow-md)}
/* «Быстрая запись» прижата к правому краю экрана: на широких мониторах панель
   выходит за границы центральной колонки, ширина при этом не меняется.
   Ниже 1160px свободного места нет — сдвиг обнуляется сам. */
.hero-panel{--panel-shift:max(0px,(100vw - var(--max) - 24px) / 2);
  margin-left:var(--panel-shift);margin-right:calc(-1 * var(--panel-shift))}
/* панель занимает 75% своей колонки и остаётся прижатой к правому краю;
   не уже 320px — иначе названия исследований начинают рваться на три строки */
@media (min-width:1001px){
  .hero-panel{width:max(320px,75%);justify-self:end;padding:22px}
}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.panel-head h3{margin:0}
.badge-live{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;
  color:#0a8f83;background:rgba(0,194,178,.1);border-radius:999px;padding:5px 10px}
.slots{list-style:none;padding:0;margin:14px 0 20px}
.slots li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;
  border:1px solid var(--line);border-radius:12px;margin-bottom:8px;transition:.2s ease}
.slots li:hover{border-color:var(--brand);background:#f7faff}
.slots span{color:var(--muted);font-size:.92rem}
.slots b{font-variant-numeric:tabular-nums}
.trust-bar{border-top:1px solid var(--line);background:#fff}
/* Зазор здесь — только нижняя граница: space-between всё равно раздвигает пункты
   на всю ширину. Держим его небольшим, иначе шесть пунктов не помещаются
   в строку и последний переносится вниз один. */
.trust{display:flex;flex-wrap:wrap;gap:14px 20px;justify-content:space-between;
  padding:18px 24px;color:var(--muted);font-size:.85rem;font-weight:600}

/* ---------------- page hero (внутренние) ---------------- */
.page-hero{padding:56px 0 46px;border-bottom:1px solid var(--line);
  background:radial-gradient(900px 380px at 10% -30%, #eaf2ff 0%, transparent 60%),
             linear-gradient(180deg,#fbfdff,#ffffff)}
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.crumbs a:hover{color:var(--brand)}
.crumbs span{margin:0 6px;opacity:.5}
.page-hero h1{margin-bottom:.35em}
.page-hero p{color:var(--muted);max-width:70ch;margin:0}

/* ---------------- sections ---------------- */
.section{padding:88px 0}
.section.tight{padding:56px 0}
.section.alt{background:var(--alt)}
.section-head{max-width:660px;margin-bottom:44px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* заголовок «Виды ультразвуковых исследований» — строго в одну строку */
.section-head.wide{max-width:780px}
@media (min-width:1000px){
  .section-head.wide h2{white-space:nowrap}
}
.section-head p{color:var(--muted);margin:0}
.eyebrow{display:inline-block;font-size:.76rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand);margin-bottom:12px}

.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-sm);transition:.25s ease}
.card:hover{transform:translateY(-4px);border-color:#cfe0f5;box-shadow:var(--shadow-md)}
.card p{color:var(--muted);margin:0}
.card .price{display:block;margin-top:14px;font-weight:800;color:var(--brand)}
.card ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:.92rem}
.card li{margin-bottom:4px}
.icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(15,111,255,.12),rgba(0,194,178,.14))}
.icon svg{width:24px;height:24px;fill:none;stroke:var(--brand);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.step{position:relative;padding-left:64px}
.step .num{position:absolute;left:0;top:0;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}

/* врачи */
/* Фото 128px и по центру карточки, над текстом. Скругление увеличено вдвое
   вместе с размером — иначе на крупном снимке углы выглядели бы почти острыми.
   margin-inline:auto центрирует и фотографию, и кружок с инициалами. */
.doc .avatar{width:128px;height:128px;border-radius:36px;display:grid;place-items:center;
  font-weight:800;color:#fff;letter-spacing:.04em;margin:0 auto 18px;font-size:2.1rem;
  background:linear-gradient(135deg,var(--brand),var(--brand-2))}
/* Ф. И. О. должно вставать в одну строку. Самое длинное — «Шишляева Светлана
   Валентиновна» — при общем кегле карточек не помещалось на 6px, а на узких
   десктопах (три колонки, карточка 248px) не помещалось бы и после правки.
   Поэтому кегль подстраивается под ширину: 1rem на широком экране, ниже
   уменьшается вместе с карточкой и упирается в .88rem, чтобы не мельчить. */
.doc h3{font-size:clamp(.88rem,1.35vw,1rem);letter-spacing:-.03em}
.doc .role{color:var(--brand);font-weight:700;font-size:.88rem;margin:0 0 10px}
/* график приёма врача: день слева, часы справа, цифры столбиком друг под другом */
.doc-hours{list-style:none;padding:10px 0 0;margin:0 0 12px;
  border-top:1px solid var(--line);font-size:.85rem}
.doc-hours li{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.doc-hours span{color:var(--muted)}
.doc-hours b{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0;list-style:none}
.tags li{background:var(--alt);border:1px solid var(--line);border-radius:999px;
  padding:5px 12px;font-size:.78rem;color:var(--muted);font-weight:600;margin:0}

/* ---------------- about ---------------- */
.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.checklist{list-style:none;padding:0;margin:0 0 28px}
.checklist li{position:relative;padding:8px 0 8px 34px;color:var(--muted)}
.checklist li::before{content:"";position:absolute;left:0;top:14px;width:18px;height:18px;
  border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-2))}
.checklist li::after{content:"";position:absolute;left:5.5px;top:20px;width:7px;height:4px;
  border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.about-visual{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;
  box-shadow:var(--shadow-sm)}
.stat-card.wide{grid-column:1 / -1}
.stat-card strong{display:block;font-size:2rem;font-weight:800;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.stat-card span{font-size:.86rem;color:var(--muted)}

/* ---------------- отзывы ---------------- */
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:28px;box-shadow:var(--shadow-sm)}
.stars{color:var(--warn);letter-spacing:2px;margin-bottom:10px;font-size:.95rem}
.quote p{color:var(--ink);font-size:1rem}
.quote footer{color:var(--muted);font-size:.86rem;font-weight:700}

/* ---------------- таблица цен ---------------- */
.price-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.table-scroll{overflow-x:auto;margin-bottom:34px}
/* Заголовок таблицы вынесен над областью прокрутки: внутри неё у первой буквы
   срезался край. Сам caption оставлен для программ чтения с экрана. */
.table-title{font-size:1.15rem;margin:0 0 12px}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.price-table th,.price-table td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);
  font-size:.95rem}
.price-table thead th{background:var(--alt);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.price-table tbody tr:last-child td{border-bottom:none}
.price-table tbody tr:hover{background:#f9fbff}
.price-table td.num{text-align:right;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.price-table td.dur{color:var(--muted);white-space:nowrap}

/* ---------------- аккордеон ---------------- */
.acc{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;
  overflow:hidden}
.acc summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";font-size:1.3rem;color:var(--brand);font-weight:700;line-height:1}
.acc[open] summary::after{content:"–"}
.acc .acc-body{padding:0 22px 20px;color:var(--muted)}
.acc .acc-body ul{padding-left:18px;margin:0}
.acc .acc-body li{margin-bottom:6px}

/* ---------------- контакты и форма ---------------- */
/* Ряд между колонками — 60px, между рядами меньше: карта лежит отдельным
   рядом под контактами и формой, и 60px разрыва до неё выглядели бы провалом. */
.contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:36px 60px;align-items:start}
/* карта занимает обе колонки, поэтому тянется до правого края раздела */
.contact-grid .map-wide{grid-column:1 / -1}
.contact-list{list-style:none;padding:0;margin:0 0 20px}
.contact-list li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.contact-list span{color:var(--muted);font-size:.9rem}
.contact-list b{font-weight:700;text-align:right}
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;
  display:grid;gap:16px;box-shadow:var(--shadow-md)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:7px;font-size:.85rem;font-weight:700;color:var(--ink)}
.form input,.form select,.form textarea{font:inherit;font-weight:500;padding:13px 15px;
  border:1px solid var(--line);border-radius:12px;background:#fbfdff;transition:.2s ease}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,111,255,.12)}
.form textarea{resize:vertical}
.form-status{margin:0;font-weight:700;color:#0a8f83;min-height:1.2em;font-size:.92rem}
.map{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;height:320px;
  background:linear-gradient(135deg,#eef4fb,#e6fbf8);display:grid;place-items:center;
  color:var(--muted);font-weight:600;text-align:center;padding:24px}

/* ---------------- CTA полоса ---------------- */
.cta-band{background:linear-gradient(120deg,var(--brand-ink),var(--brand) 55%,var(--brand-2));
  color:#fff;padding:56px 0}
.cta-band h2{margin-bottom:.3em}
.cta-band p{color:rgba(255,255,255,.86);margin:0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-band .btn{background:#fff;color:var(--brand-ink);box-shadow:0 12px 30px -14px rgba(0,0,0,.6)}

/* ---------------- footer ---------------- */
.site-footer{background:var(--ink);color:#c7d5e3;padding:56px 0 28px}
.site-footer .logo{color:#fff}
.site-footer .logo small{color:#8fa4b8}
.site-footer h4{color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.12em}
.site-footer .micro{color:#8fa4b8;max-width:38ch}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;
  padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-col ul{list-style:none;padding:0;margin:0;font-size:.92rem}
.footer-col li{margin-bottom:9px}
.footer-col a{color:#c7d5e3}
.footer-col a:hover{color:#fff}
/* Нижняя строка повторяет сетку колонок подвала: копирайт остаётся под
   логотипом, а дисклеймер начинается ровно под колонкой «Разделы».
   Раньше здесь был flex со space-between и дисклеймер прижимался к правому
   краю, ни с чем не совпадая. */
.footer-bottom{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:16px 40px;
  padding-top:20px;font-size:.82rem;color:#8fa4b8}
.footer-bottom p{margin:0}
/* дисклеймер длинный — занимает вторую и третью колонки, начинаясь со второй */
.footer-bottom p:nth-of-type(2){grid-column:2 / -1}
.footer-bottom .credits{grid-column:1 / -1;font-size:.76rem;color:#7e93a7;line-height:1.5}
.footer-bottom .credits a{color:#a9bccd;text-decoration:underline}
.footer-bottom .credits a:hover{color:#fff}

/* ---------------- анимация появления ---------------- */
.reveal{opacity:0;transform:translateY(18px)}
.reveal.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* Фон раздела «Виды ультразвуковых исследований»: два собственных УЗИ-снимка,
   обрезанных до самого изображения (без рамки монитора и данных пациента). */
.section.scans{position:relative;isolation:isolate;overflow:hidden}
.section.scans::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* верхний слой — заливка фоном страницы: гасит снимки под текстом раздела */
  background-image:linear-gradient(180deg,var(--bg) 0,var(--bg) 87%,rgba(255,255,255,0) 100%),
    url("/assets/uzi-plod-20-nedel.jpg"),url("/assets/uzi-plod-3-trimestr.jpg");
  background-repeat:no-repeat,no-repeat,no-repeat;
  background-position:top left,left -360px bottom 0,right -360px bottom 0;
  /* оба снимка занимают раздел от нижней границы текста (262px) до низа;
     ширины подобраны так, что стык приходится на середину страницы,
     а между снимками остаётся белый просвет в 4px */
  background-size:100% 300px,calc(50% + 358px) calc(100% - 262px),calc(50% + 358px) calc(100% - 262px);
  filter:saturate(1.7);
  opacity:.5}

/* Фон раздела «Оборудование»: фотография консоли VINNO G55 справа.
   Текст прижат влево и ограничен по ширине, слева фото гасится заливкой
   цвета раздела — поэтому читаемость не зависит от снимка. */
.section.equip{position:relative;isolation:isolate;overflow:hidden}
.section.equip .wrap.narrow{max-width:var(--max)}
/* 660px хватает заголовку в одну строку; на узких экранах ограничиваем долей
   ширины, чтобы текст не заезжал на фотографию */
.section.equip .wrap.narrow>div{max-width:min(660px,62%)}
.section.equip::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(90deg,var(--alt) 0,var(--alt) 50%,rgba(245,248,251,0) 70%),
    /* «-2» в имени — не версия ради версии: картинки отдаются с кэшем на год
       и пометкой immutable, поэтому исправленный файл под старым именем
       браузеры бы не перезапросили. Меняете картинку — меняйте и имя. */
    url("/assets/vinno-g55-konsol-2.jpg");
  background-repeat:no-repeat,no-repeat;
  /* фото прижато к правому краю; отступ сдвигает его влево, к тексту.
     На узких десктопах запаса до текста мало, поэтому там сдвиг меньше. */
  background-position:left top,right 0 bottom 0;
  /* верхняя граница фото — на уровне заголовка раздела (125px от верха) */
  background-size:100% 100%,auto calc(100% - 125px);
  opacity:.8}
@media (min-width:1200px){
  .section.equip::before{background-position:left top,right 80px bottom 0}
}
@media (max-width:1000px){
  .section.equip .wrap.narrow{max-width:860px}
  .section.equip .wrap.narrow>div{max-width:none}
  .section.equip::before{display:none}
}

/* якоря (#booking и т.п.) не должны уезжать под липкую шапку */
:target,[id]{scroll-margin-top:140px}

/* ---------------- адаптив ---------------- */
/* Узкие ноутбуки: восемь пунктов меню и крупный логотип перестают помещаться
   в строку — убираем телефон (он остаётся в подвале, на «Контактах»
   и открывается из бургер-меню ниже 1000px). */
@media (max-width:1150px){
  .nav-phones{display:none}
}
@media (max-width:1000px){
  .section.scans::before{background-size:100% 260px,calc(50% + 418px) calc(100% - 235px),calc(50% + 418px) calc(100% - 235px);
    background-position:top left,left -420px bottom 0,right -420px bottom 0;opacity:.44}
  .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;gap:40px}
  .grid-3,.grid-4{grid-template-columns:1fr 1fr}
  .footer-grid,.footer-bottom{grid-template-columns:1fr 1fr}
  .section{padding:68px 0}
  .burger{display:flex}
  .nav-phones{display:none}
  .nav{height:112px}
  .nav-links{position:fixed;inset:112px 0 auto 0;background:#fff;flex-direction:column;gap:0;
    border-bottom:1px solid var(--line);padding:8px 24px 20px;display:none;
    box-shadow:var(--shadow-md);max-height:calc(100vh - 112px);overflow:auto}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-links a::after{display:none}
  .nav .btn-sm{display:none}
}
@media (max-width:640px){
  .section.scans::before{background-size:100% 350px,auto 40%,auto 40%;
    background-position:top left,left -120px top 310px,right -120px bottom 0;opacity:.36}
  .grid-2,.grid-3,.grid-4,.about-visual,.form .row{grid-template-columns:1fr}
  .metrics{grid-template-columns:1fr 1fr;gap:14px}
  .stat-card.wide{grid-column:auto}
  .cta-row .btn{width:100%}
  .footer-grid,.footer-bottom{grid-template-columns:1fr}
  /* в одну колонку дисклеймеру растягиваться некуда */
  .footer-bottom p:nth-of-type(2){grid-column:1}
  .page-hero{padding:40px 0 34px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .site-header,.site-footer,.cta-band,.form{display:none}
}

/* ---------- фирменный логотип ---------- */
.site-header{background:rgba(255,255,255,.96)}
.logo{gap:12px;letter-spacing:normal}
.logo-img{display:block;height:92px;width:auto;flex:0 0 auto}
.site-header .logo{margin-top:8px}
.site-footer .logo{display:inline-flex;margin-bottom:16px}
/* Логотип в подвале лежит на белом описанном овале: овал проходит через углы
   знака, поэтому габарит больше самого знака в √2 раз по каждой стороне.
   Знак 113x57 (на 30% крупнее прежних 87x44) -> овал 161x81, отсюда отступы.
   height задаёт внешний габарит: box-sizing:border-box включает отступы. */
.site-footer .logo-img{height:81px;background:#fff;border-radius:50%;padding:12px 24px}
@media (max-width:1000px){
  .logo-img{height:80px}
  .site-header .logo{margin-top:6px}
}

/* фотография врача вместо инициалов */
.doc .avatar-photo{object-fit:cover;display:block}

/* встроенная карта на странице контактов */
.map:has(iframe){padding:0}
.map iframe{width:100%;height:100%;border:0;display:block}

/* ---------- hero с фотографией аппарата ---------- */
.hero--photo{
  background:
    linear-gradient(105deg,
      rgba(255,255,255,.97) 0%,
      rgba(255,255,255,.94) 34%,
      rgba(255,255,255,.72) 52%,
      rgba(240,248,255,.42) 68%,
      rgba(230,245,252,.28) 100%),
    url("/assets/vinno-g55-hero.jpg") right center / cover no-repeat,
    linear-gradient(180deg,#fbfdff,#ffffff);
}
.hero--photo .hero-panel{background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
.hero--photo .trust-bar{background:rgba(255,255,255,.94);backdrop-filter:blur(6px)}
@media (max-width:1000px){
  .hero--photo{
    background:
      linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 55%,rgba(255,255,255,.86) 100%),
      url("/assets/vinno-g55-hero.jpg") center 20% / cover no-repeat,
      linear-gradient(180deg,#fbfdff,#ffffff);
  }
}

/* ---------------- помощница Юлия ---------------- */
.assistant{position:fixed;right:24px;bottom:24px;z-index:80;font-size:15px}
.assistant-launcher{display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff;
  padding:8px 18px 8px 8px;border-radius:999px;font:inherit;font-weight:700;
  box-shadow:0 18px 34px -14px rgba(15,111,255,.85);transition:transform .2s ease,box-shadow .2s ease}
.assistant-launcher:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(15,111,255,.95)}
.assistant-avatar{width:44px;height:44px;flex:0 0 44px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;background:#fff;color:var(--brand);font-weight:800;font-size:1.05rem}
.assistant-avatar img{width:100%;height:100%;object-fit:cover;display:block}

.assistant-panel{position:absolute;right:0;bottom:calc(100% + 14px);width:min(370px,calc(100vw - 32px));
  max-height:min(560px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md)}
.assistant-panel[hidden]{display:none}
.assistant-head{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:linear-gradient(120deg,var(--brand),var(--brand-2));color:#fff}
.assistant-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.assistant-who strong{font-size:1rem}
.assistant-who small{font-size:.78rem;opacity:.85}
.assistant-close{margin-left:auto;width:32px;height:32px;border-radius:10px;border:none;cursor:pointer;
  background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center}
.assistant-close:hover{background:rgba(255,255,255,.3)}
.assistant-close svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.assistant-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;
  background:var(--alt)}
.assistant-msg{max-width:86%;padding:11px 14px;border-radius:16px;line-height:1.5;font-size:.92rem;
  white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-msg.from-bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;
  align-self:flex-start;color:var(--ink)}
.assistant-msg.from-user{background:var(--brand);color:#fff;border-bottom-right-radius:6px;align-self:flex-end}
.assistant-msg a{color:inherit;text-decoration:underline}
.assistant-msg.is-typing{display:flex;gap:5px;align-items:center;padding:14px}
.assistant-msg.is-typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);
  animation:assistant-dot 1.1s infinite ease-in-out}
.assistant-msg.is-typing i:nth-child(2){animation-delay:.15s}
.assistant-msg.is-typing i:nth-child(3){animation-delay:.3s}
@keyframes assistant-dot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* частые вопросы живут внутри ленты — окно прокручивается одним куском */
.assistant-topics{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:96%}
.assistant-topics-title{width:100%;font-size:.76rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.assistant-topics button{border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  border-radius:999px;padding:7px 13px;font:inherit;font-size:.83rem;line-height:1.3;text-align:left}
.assistant-topics button:hover{border-color:var(--brand);color:var(--brand)}

/* нижняя панель окна: список вопросов и очистка */
.assistant-bar{display:flex;gap:8px;padding:10px 16px 0;background:#fff}
.assistant-bar-btn{flex:1;border:1px solid var(--line);background:var(--alt);color:var(--ink);cursor:pointer;
  border-radius:10px;padding:8px 12px;font:inherit;font-size:.82rem;font-weight:700;transition:.15s}
.assistant-bar-btn:hover{border-color:var(--brand);color:var(--brand);background:#fff}
.assistant-bar-btn.ghost{flex:0 0 auto;font-weight:600;color:var(--muted)}

.assistant-form{display:flex;gap:8px;padding:10px 16px 14px;background:#fff}
.assistant-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;font:inherit;font-size:.92rem;background:var(--alt);color:var(--ink)}
.assistant-form input:focus{outline:none;border-color:var(--brand);background:#fff}
.assistant-form button{width:44px;flex:0 0 44px;border:none;border-radius:12px;cursor:pointer;
  background:var(--brand);color:#fff;display:grid;place-items:center}
.assistant-form button:hover{background:var(--brand-ink)}
.assistant-form button svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:640px){
  .assistant{right:16px;bottom:16px}
  .assistant-launcher-text{display:none}
  .assistant-launcher{padding:8px}
  .assistant-panel{position:fixed;right:16px;left:16px;bottom:86px;width:auto;
    max-height:calc(100vh - 120px)}
}
@media print{.assistant{display:none}}

/* ---------------- форма записи: согласие и ловушка для ботов ---------------- */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.form .consent input{margin-top:2px;width:22px;height:22px;flex:0 0 22px;accent-color:var(--brand);cursor:pointer}
.form .consent .micro{margin:0}

/* ============================================================
   Фоновое изображение сайта
   Медицинский светло-голубой фон закреплён на весь экран и лежит
   ниже всего контента. Фотографии (герой с VINNO G55, УЗИ-снимки
   в «Направлениях», консоль в «Оборудовании», портреты врачей)
   остаются на своих местах — они рисуются поверх фона.
   ============================================================ */
body{position:relative;z-index:0}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("/assets/bg-medical.svg") center center / cover no-repeat}

/* Полупрозрачные заливки вместо сплошных — иначе фон не был бы виден.
   Плотности подобраны так, чтобы контраст текста не падал. */
.page-hero{
  background:radial-gradient(900px 380px at 10% -30%, rgba(234,242,255,.75) 0%, transparent 60%),
             linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7));
  backdrop-filter:blur(2px)}
.section.alt{background:rgba(245,248,251,.68)}
.trust-bar{background:rgba(255,255,255,.9)}

/* Разделы с собственными фотографиями не трогаем: у .scans и .equip
   заливка гасит снимок под текстом, полупрозрачность сломала бы читаемость. */

@media print{
  body::before{display:none}
  .page-hero,.section.alt{background:#fff}
}

/* быстрые действия и подсказки в чате помощницы */
.assistant-actions{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:92%}
.assistant-actions a,.assistant-actions button{border:1px solid var(--brand);background:#fff;color:var(--brand);
  border-radius:999px;padding:6px 13px;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;
  text-decoration:none;line-height:1.3;text-align:left}
.assistant-actions a:hover,.assistant-actions button:hover{background:var(--brand);color:#fff}

/* ---------------- контакты: адрес, телефон и почта кликабельны ----------------
   В покое ссылки выглядят как обычный текст — так задуман строгий список.
   Чтобы по ним было понятно кликать, добавляем наведение, а адрес помечаем
   значком карты: он ведёт на внешнюю карту и открывается в новой вкладке. */
.contact-list a{color:inherit;transition:color .15s ease}
.contact-list a:hover,.contact-list a:focus-visible{color:var(--brand);text-decoration:underline}
.contact-list a[target="_blank"]::after{content:"";display:inline-block;width:.85em;height:.85em;
  margin-left:.4em;vertical-align:-.08em;background:currentColor;opacity:.55;
  -webkit-mask:var(--pin) center/contain no-repeat;mask:var(--pin) center/contain no-repeat}
.contact-list a[target="_blank"]:hover::after{opacity:1}
:root{--pin:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E")}

/* тот же значок и в подвале, где адрес тоже ведёт на карту */
.site-footer a[target="_blank"][href*="map"]{text-decoration:none}
.site-footer a:hover{color:#fff}

/* ---------------- прайс на телефоне: строки вместо горизонтальной прокрутки ---------------- */
@media (max-width:640px){
  .table-scroll{overflow-x:visible;border-radius:var(--r)}
  .price-table{border-radius:var(--r)}
  .price-table thead{display:none}
  .price-table,.price-table tbody,.price-table tr{display:block;width:100%}
  .price-table tr{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;
    padding:13px 16px;border-bottom:1px solid var(--line)}
  .price-table tbody tr:last-child{border-bottom:none}
  .price-table td{display:block;border:none;padding:0;font-size:.92rem}
  .price-table td:first-child{grid-column:1;font-weight:700;line-height:1.35}
  .price-table td.dur{grid-column:1;font-size:.82rem;color:var(--muted)}
  .price-table td.num{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:1.05rem;
    font-weight:800;color:var(--brand);white-space:nowrap}
  .price-table td.num::after{content:" руб.";font-size:.74rem;font-weight:700;color:var(--muted)}

  /* кнопка чата не должна закрывать последнюю строку подвала */
  .site-footer{padding-bottom:96px}
}

/* правовая оговорка под прайсом: тем же кеглем, но приглушённее основного
   примечания — это сноска, а не совет пациенту */
.note-legal{margin-top:10px;color:#7e93a7;font-size:.8rem;max-width:80ch}

/* телефоны для справок на «Ценах»: своя строка сразу под фразой о ценах.
   На узких экранах перенос разрешён — иначе строка вылезла бы за край. */
.note-phones{margin-top:6px}
.note-phones .phones-inline a{margin-left:0}
.note-phones .phones-inline a:not(:first-child){margin-left:1.2em}