/*
  ОСНОВНЫЕ СТИЛИ САЙТА
  Здесь находятся базовая сетка, цвета, секции и адаптация под разные экраны.
*/

/* ---------- Цвета, размеры и общие переменные ---------- */
:root {
  --bg: #020a12;
  --panel: #071727;
  --line: rgba(85,163,255,.18);
  --text: #f6f8fb;
  --muted: #9fb0c2;
  --blue: #138fff;
  --cyan: #3bc7ff;
  --red: #ff373d;
  --cream: #f0e3d1;
  --brown: #5f422c;
  --max: 1440px;
  --shadow: 0 18px 52px rgba(0,0,0,.36)
}

/* ---------- Базовые правила страницы ---------- */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  color: var(--text);
  font-family: Inter,Arial,sans-serif;
  background: linear-gradient(180deg,#020810,#04111d 46%,#020810);
  overflow-x: hidden
}

a {
  color: inherit;
  text-decoration: none
}

.wrap {
  width: min(var(--max),calc(100% - 36px));
  margin: auto
}

/* ---------- Шапка и навигация ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(2,9,18,.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(90,165,255,.08)
}

.header-in {
  height: 86px;
  display: flex;
  align-items: center;
  gap: 28px
}

.logo {
  display: none
}

.brand-logo {
  width: 322px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto
}

.brand-logo-mark {
  width: 82px;
  height: 68px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  flex: 0 0 auto
}

.brand-logo-red {
  color: #ff3a3f
}

.brand-logo-word {
  white-space: nowrap;
  color: #168fff;
  font-family: Arial,sans-serif;
  font-size: 45px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -2.7px
}

.brand-logo-word .brand-logo-red {
  color: #ff3a3f
}

.nav {
  margin-left: auto;
  display: flex;
  gap: 30px;
  font-size: 15px;
  color: #d1dce7
}

.nav a {
  opacity: .86;
  transition: .2s
}

.nav a:hover {
  opacity: 1;
  color: #fff
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  padding: 15px 24px;
  background: linear-gradient(135deg,#f0272d,#ff4b44);
  color: white;
  font-weight: 750;
  box-shadow: 0 12px 30px rgba(255,52,57,.22);
  transition: .2s
}

.cta:hover {
  transform: translateY(-1px)
}

.menu {
  display: none;
  margin-left: auto;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(93,168,255,.26);
  background: #071523;
  color: white;
  font-size: 28px
}

.mobile-nav {
  display: none
}

/* ---------- Первый экран ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(90,165,255,.07)
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 480px at 66% 32%,rgba(0,134,255,.10),transparent 70%),radial-gradient(520px 400px at 92% 31%,rgba(255,48,48,.08),transparent 70%);
  pointer-events: none
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  min-height: 660px;
  padding: 42px 0 20px
}

.hero-copy {
  padding-left: 12px
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(56px,5.4vw,86px);
  line-height: .97;
  letter-spacing: -.055em
}

h1 .blue {
  color: var(--blue)
}

h1 .red {
  color: var(--red)
}

.hero-p {
  max-width: 580px;
  margin: 0 0 28px;
  color: #b2bfce;
  font-size: 21px;
  line-height: 1.55
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap
}

.secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 24px;
  border: 1px solid rgba(98,171,255,.28);
  border-radius: 12px;
  background: rgba(5,16,29,.54);
  font-weight: 700
}

.hero-media {
  position: relative;
  min-height: 540px;
  align-self: stretch
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  display: block;
  animation: breath 8s ease-in-out infinite alternate
}

.hero-head-layer,.head-underlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  display: block;
  pointer-events: none;
  will-change: transform,opacity,filter;
  backface-visibility: hidden
}

.head-underlay {
  z-index: 2;
  opacity: 0
}

.hero-head-layer {
  z-index: 3;
  opacity: 0;
  transform: translate3d(0,0,0) rotate(0deg) scale(1.001);
  filter: drop-shadow(0 0 4px rgba(48,181,255,.04))
}

.hero-head-layer.dog,.head-underlay.dog {
  transform-origin: 72.8% 50.8%
}

.hero-head-layer.cat,.head-underlay.cat {
  transform-origin: 84.5% 73.4%
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,#020a12 0%,rgba(2,10,18,.28) 19%,transparent 46%);
  pointer-events: none;
  z-index: 4
}

@keyframes breath {
  from {
    transform: scale(1.01)
  }

  to {
    transform: scale(1.03)
  }

}

/* ---------- Карточки с показателями клиники ---------- */
.stats {
  position: relative;
  z-index: 3;
  margin-top: -20px;
  padding-bottom: 26px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 12px
}

.stat {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 19px 20px;
  border-radius: 15px;
  background: linear-gradient(180deg,#081a2d,#051421);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease
}

.stat:hover {
  transform: translateY(-3px);
  border-color: rgba(76,177,246,.42);
  background: linear-gradient(180deg,#0a2036,#061725);
  box-shadow: 0 17px 36px rgba(0,0,0,.34),0 0 25px rgba(22,143,255,.08)
}

.stat:focus-visible {
  outline: 2px solid #52c6ff;
  outline-offset: 3px
}

.circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-weight: 800;
  flex: 0 0 auto
}

.stat-beacon {
  width: 35px;
  height: 35px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round
}

.stat:nth-child(odd) .circle {
  color: #168fff
}

.stat:nth-child(even) .circle {
  color: #ff3a3f
}

.stat b {
  font-size: 29px;
  display: block;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  transform-origin: left center
}

.stat b.counting {
  animation: countPop .65s cubic-bezier(.2,.8,.2,1)
}

@keyframes countPop {
  0% {
    transform: scale(.92);
    filter: brightness(.9)
  }

  55% {
    transform: scale(1.045);
    filter: brightness(1.25)
  }

  100% {
    transform: scale(1);
    filter: brightness(1)
  }

}

.stat span {
  font-size: 13px;
  color: #9baebe
}

/* ---------- Услуги и доказательный подход ---------- */
.stage {
  scroll-margin-top: 120px;
  padding: 36px 0 34px;
  background: linear-gradient(180deg,rgba(5,20,35,.70),rgba(3,13,23,.58));
  border-top: 1px solid rgba(96,170,255,.07);
  border-bottom: 1px solid rgba(96,170,255,.07)
}

/* Якорные ссылки оставляют заголовки разделов ниже закреплённой шапки. */
#approach,
#room {
  scroll-margin-top: 120px
}

.stage-grid {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 20px;
  align-items: start
}

.left {
  display: grid;
  gap: 28px
}

.stage h2 {
  font-size: 36px;
  margin: 0 0 20px;
  letter-spacing: -.035em
}

.services {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 12px
}

.service {
  position: relative;
  min-height: 116px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 18px 31px;
  border-radius: 15px;
  background: linear-gradient(180deg,#071727,#061421);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease
}

.service:hover {
  transform: translateY(-3px);
  border-color: rgba(83,171,255,.46);
  box-shadow: 0 15px 34px rgba(0,0,0,.24),0 0 24px rgba(26,143,255,.06)
}

.service:focus-visible {
  outline: 2px solid #55caff;
  outline-offset: 3px;
  border-color: rgba(83,193,255,.62)
}

.service-open-label {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: #62c8ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .72;
  transition: transform .2s ease,opacity .2s ease
}

.service:hover .service-open-label,
.service:focus-visible .service-open-label {
  transform: translateX(3px);
  opacity: 1
}

.ico {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  color: #168fff
}

.service:nth-child(2n) .ico {
  color: #ff3a3f
}

.ico svg {
  width: 48px;
  height: 48px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.service h3 {
  font-size: 19px;
  margin: 0 0 6px
}

.service p {
  font-size: 14px;
  color: #9db0c2;
  margin: 0;
  line-height: 1.45
}

.evidence {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px
}

.ev {
  position: relative;
  min-height: 150px;
  padding: 17px 17px 38px;
  border-radius: 15px;
  background: linear-gradient(180deg,#071727,#061421);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease
}

.ev:hover,
.ev:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(68,174,255,.4);
  box-shadow: 0 15px 34px rgba(0,0,0,.2)
}

.ev:focus-visible {
  outline: 2px solid rgba(64,181,255,.72);
  outline-offset: 3px
}

.mini {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  color: #168fff;
  margin-bottom: 12px
}

.ev:nth-child(2n) .mini {
  color: #ff3a3f
}

.ev h3 {
  font-size: 15px;
  margin: 0 0 8px
}

.ev p {
  font-size: 12.5px;
  line-height: 1.48;
  color: #9db0c2;
  margin: 0
}

.ev-open-label {
  position: absolute;
  left: 17px;
  bottom: 14px;
  color: #66c7ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  opacity: .74;
  transition: transform .2s ease,opacity .2s ease
}

.ev:nth-child(2n) .ev-open-label {
  color: #ff8589
}

.ev:hover .ev-open-label,
.ev:focus-visible .ev-open-label {
  transform: translateX(3px);
  opacity: 1
}

/* ---------- Комната тишины и кремация ---------- */
.room-card {
  position: sticky;
  top: 104px;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg,#081a2d,#051421);
  color: var(--text);
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  border: 1px solid rgba(84,165,255,.22)
}

.room-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 240px at 12% 0%,rgba(19,143,255,.14),transparent 60%),radial-gradient(460px 240px at 88% 100%,rgba(255,55,61,.12),transparent 60%);
  pointer-events: none
}

.room-copy {
  position: relative;
  padding: 32px 34px 24px
}

.room-copy h2 {
  font-size: 38px;
  margin: 0 0 14px;
  color: #fff
}

.room-copy .lead {
  font-size: 17px;
  line-height: 1.55;
  color: #dde7f2;
  margin: 0 0 16px
}

.room-copy p {
  font-size: 14px;
  line-height: 1.58;
  color: #9db0c2;
  margin: 0 0 11px
}

.room-img {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-top: 1px solid rgba(84,165,255,.12);
  border-bottom: 1px solid rgba(84,165,255,.12)
}

.room-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(3,11,19,.14),rgba(3,11,19,.62));
  pointer-events: none
}

.room-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s ease;
  filter: saturate(.9) brightness(.82)
}

.room-card:hover .room-img img {
  transform: scale(1.025)
}

.crem {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(84,165,255,.12)
}

.crem-intro {
  grid-column: 1/-1;
  padding: 23px 30px;
  border-bottom: 1px solid rgba(84,165,255,.12)
}

.crem-intro h3 {
  font-size: 26px;
  margin: 0 0 8px;
  color: #fff
}

.crem-intro p,.crem-card p {
  font-size: 13px;
  color: #9db0c2;
  line-height: 1.5;
  margin: 0
}

.crem-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 13px;
  padding: 22px 24px;
  border-left: 1px solid rgba(84,165,255,.12)
}

.crem-card:first-of-type {
  border-left: 0
}

.crem-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(84,165,255,.20);
  color: #168fff;
  background: rgba(7,24,43,.82)
}

.crem-card h4 {
  font-size: 15px;
  margin: 3px 0 6px;
  color: #fff
}

/* ---------- Ночной приём ---------- */
.night {
  scroll-margin-top: 92px;
  padding: 28px 0 44px
}

.night-card {
  min-height: 184px;
  display: grid;
  grid-template-columns: 1.1fr .9fr .48fr;
  align-items: center;
  border: 1px solid rgba(84,165,255,.2);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(90deg,#07182b,#07182c 58%,#071425);
  box-shadow: var(--shadow)
}

.night-photo {
  height: 184px;
  background: linear-gradient(90deg,rgba(3,12,22,.05),rgba(3,12,22,.72)),url('../images/hero-poster.webp') 72% 53%/cover no-repeat
}

.night-copy {
  padding: 22px 32px
}

.night-copy h3 {
  font-size: 31px;
  margin: 0 0 9px
}

.night-copy p {
  margin: 0 0 16px;
  color: #acbbcb;
  font-size: 14px;
  line-height: 1.5
}

.clock {
  height: 100%;
  display: grid;
  place-items: center;
  border-left: 1px solid rgba(255,73,63,.14);
  background: radial-gradient(circle,rgba(255,44,44,.11),transparent 62%)
}

.clock span {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 2px solid #ff5851;
  color: #ff625a;
  font-size: 34px;
  font-weight: 850;
  text-shadow: 0 0 18px rgba(255,72,64,.5)
}

/* ---------- Подвал и контакты ---------- */
footer {
  padding: 34px 0 24px;
  border-top: 1px solid rgba(96,170,255,.08);
  background: #020a12
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr .7fr 1fr;
  gap: 34px
}

.footer-brand-logo {
  width: 240px;
  gap: 7px
}

.footer-brand-logo .brand-logo-mark {
  width: 64px;
  height: 54px
}

.footer-brand-logo .brand-logo-word {
  font-size: 34px;
  letter-spacing: -2px
}

.foot-desc {
  max-width: 330px;
  color: #8598aa;
  font-size: 13px;
  line-height: 1.5;
  margin-top: 14px
}

footer h4 {
  font-size: 14px;
  margin: 0 0 12px;
  color: #dce6ef
}

footer a,footer p {
  display: block;
  color: #8194a7;
  font-size: 13px;
  margin: 0 0 8px;
  line-height: 1.45
}

.copy {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(96,170,255,.07);
  display: flex;
  justify-content: space-between;
  color: #617488;
  font-size: 11px
}

/* ---------- Анимация появления блоков ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: .6s ease
}

.js .reveal:not(.on) {
  opacity: 0;
  transform: translateY(14px)
}

@media(max-width:1100px) {
  .nav,.header>.wrap>.cta {
    display: none
  }

  .menu {
    display: block
  }

  .mobile-nav {
    position: absolute;
    top: 88px;
    left: 12px;
    right: 12px;
    border: 1px solid var(--line);
    background: #06121f;
    border-radius: 18px;
    padding: 12px;
    box-shadow: var(--shadow)
  }

  .mobile-nav.open {
    display: grid;
    gap: 4px
  }

  .mobile-nav a {
    padding: 12px
  }

  .mobile-nav .cta {
    display: flex
  }

  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 28px
  }

  .hero-copy {
    padding: 10px
  }

  .hero-media {
    min-height: 500px
  }

  .stats {
    margin-top: 12px;
    grid-template-columns: repeat(2,1fr)
  }

  .stage-grid {
    grid-template-columns: 1fr
  }

  .room-card {
    position: relative;
    top: auto
  }

  .evidence {
    grid-template-columns: repeat(2,1fr)
  }

  .night-card {
    grid-template-columns: 1fr 1fr
  }

  .night-photo {
    display: none
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr
  }

}

@media(max-width:620px) {
  .wrap {
    width: calc(100% - 18px)
  }

  .header-in {
    height: 78px
  }

  .logo {
    display: none
  }

  .brand-logo {
    width: 214px;
    gap: 7px
  }

  .brand-logo-mark {
    width: 59px;
    height: 51px
  }

  .brand-logo-word {
    font-size: 29px;
    letter-spacing: -1.7px
  }

  .menu {
    width: 50px;
    height: 50px
  }

  h1 {
    font-size: 54px;
    line-height: .98
  }

  .hero-p {
    font-size: 16px
  }

  .hero-actions {
    display: grid;
    gap: 10px
  }

  .cta,.secondary {
    width: 100%
  }

  .hero-media {
    min-height: 430px
  }

  .hero-img {
    object-position: 70% center
  }

  .stats {
    grid-template-columns: 1fr 1fr;
    gap: 9px
  }

  .stat {
    padding: 14px 11px;
    gap: 10px
  }

  .circle {
    width: 43px;
    height: 43px
  }

  .stat b {
    font-size: 23px
  }

  .stat span {
    font-size: 11px
  }

  .stage {
    padding: 28px 0
  }

  .stage h2 {
    font-size: 31px
  }

  .services,.evidence {
    grid-template-columns: 1fr
  }

  .service {
    min-height: 108px
  }

  .room-copy {
    padding: 28px 22px 22px
  }

  .room-copy h2 {
    font-size: 34px
  }

  .room-img {
    height: 230px
  }

  .crem {
    grid-template-columns: 1fr
  }

  .crem-intro {
    grid-column: auto
  }

  .crem-card {
    border-left: 0;
    border-top: 1px solid rgba(84,165,255,.12)
  }

  .night-card {
    grid-template-columns: 1fr
  }

  .night-copy {
    padding: 25px 22px
  }

  .clock {
    min-height: 145px;
    border-left: 0;
    border-top: 1px solid rgba(255,73,63,.14)
  }

  .footer-grid {
    grid-template-columns: 1fr
  }

}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior: auto!important;
    animation-duration: .001ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .001ms!important
  }

  .reveal {
    opacity: 1!important;
    transform: none!important
  }

}

/* ---------- Карточки врачей ---------- */
.doctors-section {
  scroll-margin-top: 92px;
  padding: 20px 0 28px;
  border-top: 1px solid rgba(73,135,200,.10);
  border-bottom: 1px solid rgba(73,135,200,.10);
  background: radial-gradient(760px 340px at 12% 0%,rgba(18,139,255,.08),transparent 65%),linear-gradient(180deg,rgba(4,15,27,.96),rgba(5,18,32,.94))
}

.doctors-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 22px
}

.doctors-head h2 {
  font-size: 36px;
  margin: 0;
  color: #fff
}

.doctors-head p {
  max-width: 620px;
  margin: 0;
  color: #9fb1c1;
  font-size: 14px;
  line-height: 1.55;
  text-align: right
}

.doctors-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: #45b9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase
}

.doctors-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg,#168fff,transparent);
  box-shadow: 0 0 12px rgba(22,143,255,.65)
}

.doctor-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px
}

.doctor-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(73,135,200,.22);
  background: linear-gradient(180deg,#081b2e,#061522);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  transition: transform .28s ease,border-color .28s ease,box-shadow .28s ease
}

.doctor-card:hover {
  transform: translateY(-5px);
  border-color: rgba(52,169,255,.42);
  box-shadow: 0 22px 48px rgba(0,0,0,.32),0 0 34px rgba(18,135,240,.07)
}

.doctor-photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: #071522
}

.doctor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease,filter .4s ease;
  filter: saturate(.94) contrast(1.02)
}

.doctor-card:hover .doctor-photo img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.03)
}

.doctor-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 48%,rgba(5,17,30,.15) 66%,#071827 100%);
  pointer-events: none
}

.doctor-line {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,transparent,#168fff 22%,#ff3a3f 78%,transparent);
  opacity: .65;
  box-shadow: 0 0 12px rgba(22,143,255,.24)
}

.doctor-info {
  padding: 17px 17px 18px;
  min-height: 205px;
  display: flex;
  flex-direction: column
}

.doctor-info h3 {
  font-size: 18px;
  line-height: 1.17;
  margin: 0 0 7px;
  color: #fff;
  letter-spacing: -.015em
}

.doctor-role {
  font-size: 12px;
  line-height: 1.42;
  color: #60c4ff;
  font-weight: 700;
  margin-bottom: 11px
}

.doctor-info p {
  margin: 0;
  color: #9baebe;
  font-size: 12px;
  line-height: 1.55
}

.doctor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 13px
}

.doctor-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid rgba(60,151,235,.20);
  background: rgba(8,30,50,.72);
  color: #c8d7e6;
  font-size: 10px;
  line-height: 1
}

.doctor-tags span.red {
  border-color: rgba(255,58,63,.20);
  color: #ff9b9e;
  background: rgba(52,13,19,.30)
}

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

  .doctors-head {
    align-items: flex-start
  }

  .doctors-head p {
    text-align: left
  }

}

@media(max-width:640px) {
  .doctors-section {
    padding: 14px 0 20px
  }

  .doctors-head {
    display: block;
    margin-bottom: 16px
  }

  .doctors-head h2 {
    font-size: 31px
  }

  .doctors-head p {
    font-size: 13px;
    margin-top: 8px
  }

  .doctor-grid {
    grid-template-columns: 1fr;
    gap: 12px
  }

  .doctor-card {
    display: grid;
    grid-template-columns: 138px 1fr;
    min-height: 190px
  }

  .doctor-photo {
    aspect-ratio: auto;
    height: 100%;
    min-height: 190px
  }

  .doctor-info {
    min-height: 190px;
    padding: 16px 15px
  }

  .doctor-info h3 {
    font-size: 17px
  }

  .doctor-role {
    font-size: 11px
  }

  .doctor-info p {
    font-size: 11px;
    line-height: 1.46
  }

  .doctor-tags {
    padding-top: 10px
  }

  .doctor-tags span {
    font-size: 9px;
    min-height: 24px;
    padding: 4px 8px
  }

}

@media(max-width:390px) {
  .doctor-card {
    grid-template-columns: 122px 1fr
  }

  .doctor-info {
    padding: 14px 13px
  }

  .doctor-info p {
    display: none
  }

  .doctor-tags {
    margin-top: auto
  }

}

/* ---------- Отзывы ---------- */
.reviews-section {
  scroll-margin-top: 92px;
  padding: 34px 0 34px;
  border-bottom: 1px solid rgba(73,135,200,.10);
  background: radial-gradient(700px 300px at 86% 0%,rgba(255,58,63,.055),transparent 65%),linear-gradient(180deg,rgba(4,15,27,.97),rgba(5,17,30,.96))
}

.reviews-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 20px
}

.reviews-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: #45b9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase
}

.reviews-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg,#168fff,transparent);
  box-shadow: 0 0 12px rgba(22,143,255,.65)
}

.reviews-head h2 {
  font-size: 36px;
  margin: 0;
  color: #fff
}

.reviews-head p {
  max-width: 600px;
  margin: 0;
  color: #9fb1c1;
  font-size: 14px;
  line-height: 1.55;
  text-align: right
}

.yandex-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid rgba(255,214,0,.20);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(35,31,8,.25),rgba(17,19,22,.44));
  width: max-content;
  max-width: 100%;
  margin-bottom: 16px
}

.yandex-mark {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #ffd600;
  color: #111;
  font-weight: 900;
  font-size: 18px
}

.yandex-summary strong {
  display: block;
  color: #fff;
  font-size: 14px
}

.yandex-summary span {
  display: block;
  color: #9fb1c1;
  font-size: 11px;
  margin-top: 2px
}

.yandex-stars {
  color: #ffd600;
  letter-spacing: 1px;
  font-size: 13px;
  margin-left: auto
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px
}

.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 225px;
  padding: 20px 19px 18px;
  border-radius: 18px;
  border: 1px solid rgba(73,135,200,.20);
  background: linear-gradient(180deg,#081b2e,#061522);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
  transition: transform .26s ease,border-color .26s ease,box-shadow .26s ease
}

.review-card:hover {
  transform: translateY(-4px);
  border-color: rgba(52,169,255,.36);
  box-shadow: 0 20px 44px rgba(0,0,0,.28),0 0 30px rgba(18,135,240,.055)
}

.review-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px
}

.review-author {
  font-size: 14px;
  font-weight: 800;
  color: #fff
}

.review-source {
  font-size: 10px;
  color: #ffd600;
  white-space: nowrap
}

.review-quote {
  position: relative;
  margin: 0;
  color: #d6e0ea;
  font-size: 14px;
  line-height: 1.62;
  padding-left: 17px
}

.review-quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -6px;
  color: #45b9ff;
  font-size: 30px;
  line-height: 1;
  font-weight: 900;
  opacity: .8
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 15px;
  color: #7f95a8;
  font-size: 10px
}

.review-rating {
  color: #ffd600;
  letter-spacing: .08em
}

.reviews-actions {
  display: flex;
  justify-content: center;
  margin-top: 18px
}

.reviews-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 12px;
  border: 1px solid rgba(255,214,0,.20);
  background: rgba(255,214,0,.055);
  color: #fff;
  font-size: 12px;
  font-weight: 800
}

.reviews-link:hover {
  border-color: rgba(255,214,0,.38);
  background: rgba(255,214,0,.08)
}

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

  .reviews-head {
    align-items: flex-start
  }

  .reviews-head p {
    text-align: left
  }

}

@media(max-width:640px) {
  .reviews-section {
    padding: 24px 0 26px
  }

  .reviews-head {
    display: block;
    margin-bottom: 14px
  }

  .reviews-head h2 {
    font-size: 31px
  }

  .reviews-head p {
    font-size: 13px;
    margin-top: 8px
  }

  .yandex-summary {
    width: 100%;
    padding: 10px 12px
  }

  .yandex-stars {
    font-size: 12px
  }

  .review-grid {
    display: flex;
    overflow-x: auto;
    gap: 11px;
    scroll-snap-type: x mandatory;
    padding: 1px 1px 9px;
    scrollbar-width: none
  }

  .review-grid::-webkit-scrollbar {
    display: none
  }

  .review-card {
    min-width: 84%;
    min-height: 220px;
    scroll-snap-align: start
  }

  .review-quote {
    font-size: 13px
  }

  .reviews-actions {
    justify-content: stretch
  }

  .reviews-link {
    width: 100%
  }

}

@media(max-width:760px) {
  .hero-head-layer.dog {
    transform-origin: 68% 60%
  }

  .hero-head-layer.cat {
    transform-origin: 82% 73%
  }

  .head-underlay.dog {
    left: 34%;
    top: 4%;
    width: 58%;
    height: 59%
  }

  .head-underlay.cat {
    left: 60%;
    top: 31%;
    width: 38%;
    height: 50%
  }

  .gaze-hint {
    left: 64%;
    top: 43%;
    width: 22%
  }

}

/*
  ВИДЕО НА ПЕРВОМ ЭКРАНЕ
  Управляет положением, плавным переключением и мобильным отображением видео.
*/

/* Hero video sequence:static poster -> intro turn -> seamless living loop */
.hero-media {
  overflow: hidden;
  background: #020a12
}

.hero-video-stack {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #020a12
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
  display: block;
  background: #020a12;
  transform: translateZ(0);
  transition: opacity .22s linear;
  will-change: opacity
}

.hero-intro {
  z-index: 2;
  opacity: 1
}

.hero-loop {
  z-index: 1;
  opacity: 0
}

.hero-video-stack.looping .hero-intro {
  opacity: 0;
  pointer-events: none
}

.hero-video-stack.looping .hero-loop {
  opacity: 1
}

.hero-media::after {
  z-index: 3
}

@media(max-width:620px) {
  .hero-video {
    object-position: 70% center
  }

}

@media(prefers-reduced-motion:reduce) {
  .hero-video-stack {
    display: none
  }

  .hero-media {
    --hero-poster: url("../images/hero-poster.webp");
    background-image: var(--hero-poster);
    background-size: cover;
    background-position: 70% center
  }

}

/*
  РЕЗЕРВНОЕ ПРАВИЛО ДЛЯ ГЕРОЙ-БЛОКА
  Скрывает старые слои анимации головы, которые заменены видеопоследовательностью.
*/

.hero-head-layer,.head-underlay {
  display: none!important
}

/*
  КАРТОЧКИ ВРАЧЕЙ И МОДАЛЬНЫЕ ОКНА
  Отвечает за кликабельные карточки, подробные профили врачей и окно звонка.
*/

/* Doctor interaction + veterinary modal */
.doctor-card.doctor-open {
  cursor: pointer;
  isolation: isolate
}

.doctor-card.doctor-open:focus-visible {
  outline: 2px solid #35b9ff;
  outline-offset: 3px
}

.doctor-hover-pulse {
  position: absolute;
  left: -35%;
  bottom: 14px;
  width: 42%;
  height: 2px;
  background: linear-gradient(90deg,transparent,rgba(54,200,255,.15),#63d8ff 58%,#fff 76%,transparent);
  filter: drop-shadow(0 0 8px rgba(62,196,255,.9));
  opacity: 0;
  transform: translateX(0);
  pointer-events: none
}

.doctor-card:hover .doctor-hover-pulse,.doctor-card:focus-within .doctor-hover-pulse {
  opacity: 1;
  animation: doctorPulseSweep 1.45s ease-in-out infinite
}

.doctor-more {
  margin-top: 13px;
  width: 100%;
  height: 36px;
  border-radius: 11px;
  border: 1px solid rgba(68,166,245,.2);
  background: rgba(7,27,46,.78);
  color: #d9e8f5;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: .22s ease
}

.doctor-card:hover .doctor-more {
  border-color: rgba(77,188,255,.45);
  background: rgba(10,39,65,.92);
  color: #fff;
  box-shadow: 0 0 22px rgba(29,145,240,.08)
}

.doctor-paw {
  color: #4ec6ff;
  text-shadow: 0 0 10px rgba(53,190,255,.75)
}

.doctor-arrow {
  transition: transform .2s ease
}

.doctor-card:hover .doctor-arrow {
  transform: translateX(3px)
}

@keyframes doctorPulseSweep {
  0% {
    left: -42%;
    opacity: 0
  }

  14% {
    opacity: 1
  }

  72% {
    opacity: 1
  }

  100% {
    left: 110%;
    opacity: 0
  }

}

.vet-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .24s ease,visibility .24s ease
}

.vet-modal.open {
  visibility: visible;
  opacity: 1
}

.vet-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,7,14,.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.vet-modal-panel {
  position: relative;
  width: min(1060px,calc(100vw - 48px));
  max-height: min(86vh,850px);
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(76,169,239,.27);
  background: linear-gradient(145deg,#071829 0%,#04111e 54%,#081725 100%);
  box-shadow: 0 38px 110px rgba(0,0,0,.62),0 0 65px rgba(18,139,255,.09);
  transform: translateY(22px) scale(.965);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2,.75,.2,1),opacity .28s ease
}

.vet-modal.open .vet-modal-panel {
  transform: translateY(0) scale(1);
  opacity: 1
}

.vet-modal-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px 260px at 14% 0%,rgba(28,157,255,.12),transparent 64%),radial-gradient(460px 240px at 92% 92%,rgba(255,57,68,.08),transparent 67%);
  pointer-events: none
}

.vet-modal-close {
  position: absolute;
  right: 17px;
  top: 15px;
  z-index: 5;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  border: 1px solid rgba(103,173,231,.25);
  background: rgba(4,17,29,.82);
  color: #eef7ff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  transition: .2s
}

.vet-modal-close:hover {
  border-color: rgba(92,198,255,.55);
  box-shadow: 0 0 24px rgba(33,166,255,.13);
  transform: rotate(4deg)
}

.vet-modal-ecg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 54px;
  opacity: .55;
  pointer-events: none;
  overflow: hidden
}

.vet-modal-ecg svg {
  width: 100%;
  height: 100%
}

.vet-modal-ecg path {
  fill: none;
  stroke: #30bfff;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(41,190,255,.85));
  stroke-dasharray: 1150;
  stroke-dashoffset: 1150
}

.vet-modal.open .vet-modal-ecg path {
  animation: modalEcgDraw 1.05s .12s ease-out forwards
}

.vet-modal-ecg span {
  position: absolute;
  top: 26px;
  left: -16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e9fbff;
  box-shadow: 0 0 7px #fff,0 0 18px #37c7ff,0 0 34px rgba(55,199,255,.85)
}

.vet-modal.open .vet-modal-ecg span {
  animation: modalPulseDot 1.12s .1s ease-out forwards
}

.vet-modal-ecg.red path {
  stroke: #ff535b;
  filter: drop-shadow(0 0 7px rgba(255,65,75,.8))
}

.vet-modal-ecg.red span {
  box-shadow: 0 0 7px #fff,0 0 18px #ff4b54,0 0 34px rgba(255,75,84,.8)
}

@keyframes modalEcgDraw {
  to {
    stroke-dashoffset: 0
  }

}

@keyframes modalPulseDot {
  0% {
    left: -18px;
    opacity: 0
  }

  10% {
    opacity: 1
  }

  100% {
    left: calc(100% + 8px);
    opacity: 0
  }

}

.doctor-modal-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(330px,38%) 1fr;
  min-height: 650px
}

.doctor-modal-photo {
  position: relative;
  overflow: hidden;
  background: #061321
}

.doctor-modal-photo img {
  width: 100%;
  height: 100%;
  min-height: 650px;
  object-fit: cover;
  object-position: center;
  display: block
}

.doctor-modal-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,transparent 68%,#061421 100%),linear-gradient(180deg,rgba(4,14,24,.08),rgba(4,14,24,.28));
  pointer-events: none
}

.doctor-modal-photo-glow {
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: radial-gradient(ellipse at 50% 100%,rgba(31,167,255,.17),transparent 70%);
  pointer-events: none
}

.doctor-modal-content {
  position: relative;
  padding: 66px 42px 32px;
  overflow: auto;
  max-height: min(86vh,850px);
  scrollbar-width: thin;
  scrollbar-color: rgba(35,166,255,.9) rgba(4,17,29,.72)
}

.doctor-modal-content::-webkit-scrollbar {
  width: 9px
}

.doctor-modal-content::-webkit-scrollbar-track {
  background: rgba(4,17,29,.72);
  border-radius: 999px;
  margin: 58px 3px 14px
}

.doctor-modal-content::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 2px solid #061421;
  border-radius: 999px;
  background: linear-gradient(180deg,#32c5ff 0%,#138fff 58%,#0b5ea8 100%);
  box-shadow: 0 0 12px rgba(31,166,255,.35)
}

.doctor-modal-content::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,#6bd7ff 0%,#239dff 58%,#0d70c9 100%)
}

.doctor-modal-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: #67cfff;
  font-size: 10px;
  font-weight: 850;
  margin-bottom: 11px
}

.paw-dot {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(76,190,255,.28);
  background: rgba(14,50,78,.55);
  color: #72d6ff;
  box-shadow: 0 0 18px rgba(31,170,255,.08)
}

.vet-modal.open .paw-dot {
  animation: pawBeat .62s .45s ease-out 2
}

@keyframes pawBeat {
  0%,100% {
    transform: scale(1)
  }

  45% {
    transform: scale(1.18);
    box-shadow: 0 0 24px rgba(46,187,255,.35)
  }

}

.doctor-modal-content h2 {
  font-size: clamp(30px,3.3vw,48px);
  line-height: 1.02;
  margin: 0 54px 9px 0;
  color: #fff;
  letter-spacing: -.035em
}

.doctor-modal-tagline {
  font-size: 16px;
  line-height: 1.45;
  color: #a8c2d8;
  margin-bottom: 16px
}

.doctor-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 20px
}

.doctor-modal-tags span {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(54,164,244,.22);
  background: rgba(8,33,55,.75);
  color: #cbe7f8;
  font-size: 10px;
  font-weight: 750
}

.doctor-modal-blocks {
  display: grid;
  gap: 10px
}

.doctor-bio-block {
  position: relative;
  padding: 15px 16px 15px 47px;
  border: 1px solid rgba(64,143,207,.14);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(11,31,50,.72),rgba(7,23,39,.72));
  transition: .2s ease
}

.doctor-bio-block::before {
  content: "✦";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #54c9ff;
  font-size: 9px;
  border: 1px solid rgba(73,187,248,.27);
  box-shadow: 0 0 14px rgba(43,175,247,.08)
}

.doctor-bio-block:hover {
  border-color: rgba(70,172,240,.27);
  transform: translateX(2px)
}

.doctor-bio-block h4 {
  font-size: 12px;
  color: #fff;
  margin: 0 0 5px
}

.doctor-bio-block p {
  font-size: 12px;
  line-height: 1.58;
  color: #aabccc;
  margin: 0
}

.doctor-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px
}

.doctor-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  min-height: 46px
}

.doctor-close-secondary {
  cursor: pointer
}

.call-modal-panel {
  width: min(560px,calc(100vw - 40px));
  padding: 72px 34px 30px;
  text-align: center;
  overflow: visible
}

.call-modal-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 15px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,82,91,.26);
  background: linear-gradient(145deg,rgba(92,20,28,.56),rgba(16,28,43,.7));
  font-size: 31px;
  color: #ff6269;
  box-shadow: 0 0 32px rgba(255,64,76,.09)
}

.call-modal-panel h2 {
  font-size: 31px;
  margin: 0 0 8px;
  color: #fff
}

.call-modal-lead {
  color: #a9bac9;
  font-size: 13px;
  line-height: 1.55;
  margin: 0 auto 18px;
  max-width: 430px
}

.call-number-list {
  display: grid;
  gap: 10px
}

.call-number-card {
  text-decoration: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  padding: 16px 17px;
  border-radius: 15px;
  border: 1px solid rgba(70,146,210,.18);
  background: linear-gradient(180deg,#0a2136,#071827);
  transition: .2s ease
}

.call-number-card:hover {
  border-color: rgba(64,181,255,.42);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.22)
}

.call-number-card.max-card {
  border-color: rgba(56,172,255,.27);
  background: linear-gradient(180deg,#0a243d,#07192a)
}

.call-label {
  grid-column: 1/-1;
  color: #86a5bb;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em
}

.call-label b {
  color: #58c8ff
}

.call-number-card strong {
  font-size: 21px;
  color: #fff
}

.call-action {
  align-self: end;
  color: #58c8ff;
  font-size: 11px
}

.max-note {
  margin-top: 13px;
  display: flex;
  gap: 11px;
  text-align: left;
  padding: 14px;
  border-radius: 13px;
  border: 1px solid rgba(80,160,224,.13);
  background: rgba(7,24,40,.74);
  color: #a7bacb;
  font-size: 12px;
  line-height: 1.5
}

.max-note strong,.max-note b {
  color: #fff
}

.max-note-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #35baff;
  margin-top: 4px;
  box-shadow: 0 0 14px rgba(53,186,255,.8)
}

/* ---------- Подробные окна услуг ---------- */
.service-modal-panel {
  --service-accent: #23afff;
  width: min(900px,calc(100vw - 48px));
  max-height: min(86vh,760px)
}

.service-modal-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(245px,.72fr) minmax(0,1.48fr);
  max-height: min(86vh,760px)
}

.service-modal-visual {
  position: relative;
  min-height: 550px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--service-accent);
  background: linear-gradient(155deg,#081d31,#04111e 72%);
  background: radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--service-accent) 18%,transparent),transparent 35%),linear-gradient(155deg,#081d31,#04111e 72%)
}

.service-modal-visual::before,
.service-modal-visual::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 43%;
  width: 188px;
  height: 188px;
  border-radius: 50%;
  border: 1px solid rgba(45,178,255,.34);
  border: 1px solid color-mix(in srgb,var(--service-accent) 38%,transparent);
  transform: translate(-50%,-50%);
  box-shadow: 0 0 45px color-mix(in srgb,var(--service-accent) 13%,transparent)
}

.service-modal-visual::after {
  width: 250px;
  height: 250px;
  opacity: .45
}

.service-modal-icon {
  position: absolute;
  top: calc(43% - 69px);
  left: calc(50% - 69px);
  z-index: 2;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  border-radius: 34px;
  border: 1px solid rgba(45,178,255,.42);
  border: 1px solid color-mix(in srgb,var(--service-accent) 48%,transparent);
  background: rgba(3,14,25,.76);
  box-shadow: 0 0 54px color-mix(in srgb,var(--service-accent) 16%,transparent)
}

.service-modal-icon svg {
  width: 92px;
  height: 92px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 9px color-mix(in srgb,var(--service-accent) 60%,transparent))
}

.principle-modal-icon {
  color: var(--service-accent);
  font-size: 72px;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 0 22px color-mix(in srgb,var(--service-accent) 48%,transparent)
}

.vet-modal.open .service-modal-icon {
  animation: serviceIconPulse 2.6s .55s ease-in-out infinite
}

.vet-modal.open .service-modal-icon path,
.vet-modal.open .service-modal-icon rect {
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  animation: serviceIconDraw 1.25s .2s ease-out forwards
}

.service-modal-orbit-dot {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 43%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff,0 0 24px var(--service-accent);
  transform-origin: 0 0
}

.vet-modal.open .service-modal-orbit-dot {
  animation: serviceOrbit 4.2s linear infinite
}

.service-modal-visual-label {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 31px;
  color: #83a7bd;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase
}

@keyframes serviceIconDraw {
  to {
    stroke-dashoffset: 0
  }
}

@keyframes serviceIconPulse {
  0%,100% {
    transform: scale(1);
    box-shadow: 0 0 54px color-mix(in srgb,var(--service-accent) 16%,transparent)
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 0 70px color-mix(in srgb,var(--service-accent) 25%,transparent)
  }
}

@keyframes serviceOrbit {
  from {
    transform: rotate(0deg) translateX(94px) rotate(0deg)
  }
  to {
    transform: rotate(360deg) translateX(94px) rotate(-360deg)
  }
}

.service-modal-content {
  position: relative;
  padding: 69px 42px 34px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--service-accent) rgba(4,17,29,.72)
}

.service-modal-content::-webkit-scrollbar {
  width: 8px
}

.service-modal-content::-webkit-scrollbar-track {
  background: rgba(4,17,29,.72)
}

.service-modal-content::-webkit-scrollbar-thumb {
  border: 2px solid #061421;
  border-radius: 999px;
  background: var(--service-accent)
}

.service-modal-kicker {
  margin-bottom: 10px;
  color: var(--service-accent);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .15em;
  text-transform: uppercase
}

.service-modal-content h2 {
  margin: 0 52px 10px 0;
  color: #fff;
  font-size: clamp(32px,4vw,48px);
  line-height: 1.02;
  letter-spacing: -.035em
}

.service-modal-lead {
  margin: 0 0 20px;
  color: #a9c0d1;
  font-size: 15px;
  line-height: 1.55
}

.service-modal-list {
  display: grid;
  gap: 9px;
  margin-bottom: 17px
}

.service-modal-item {
  position: relative;
  padding: 13px 15px 13px 44px;
  border: 1px solid rgba(74,151,211,.16);
  border-radius: 14px;
  background: linear-gradient(180deg,rgba(10,31,51,.77),rgba(6,23,38,.77));
  color: #d5e5ef;
  font-size: 12px;
  line-height: 1.48;
  transition: transform .2s ease,border-color .2s ease
}

.service-modal-item::before {
  content: "✓";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb,var(--service-accent) 42%,transparent);
  color: var(--service-accent);
  font-size: 10px;
  font-weight: 900
}

.service-modal-item:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb,var(--service-accent) 34%,transparent)
}

.service-modal-note {
  margin: 0;
  padding: 13px 14px;
  border-left: 2px solid var(--service-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(7,25,41,.72);
  color: #8da8bb;
  font-size: 11px;
  line-height: 1.5
}

.service-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px
}

.service-modal-actions .cta {
  min-height: 47px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none
}

.service-modal-actions .ghost {
  cursor: pointer
}

body.modal-lock {
  overflow: hidden
}

@media(max-width:760px) {
  .vet-modal {
    padding: 0;
    align-items: end
  }

  .vet-modal-panel {
    width: 100%;
    max-height: 92svh;
    border-radius: 24px 24px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    transform: translateY(34px) scale(.99)
  }

  .doctor-modal-grid {
    display: block;
    min-height: 0
  }

  .doctor-modal-photo {
    height: 34svh;
    min-height: 245px
  }

  .doctor-modal-photo img {
    min-height: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    /* Новые портреты уже содержат запас фона над головой. */
    object-position: center top
  }

  .doctor-modal-photo::after {
    background: linear-gradient(180deg,transparent 52%,#061421 100%)
  }

  .doctor-modal-content {
    padding: 25px 20px 26px;
    max-height: 58svh
  }

  .doctor-modal-content h2 {
    font-size: 29px;
    margin-right: 38px
  }

  .doctor-modal-tagline {
    font-size: 14px
  }

  .doctor-modal-blocks {
    gap: 8px
  }

  .doctor-bio-block {
    padding: 13px 13px 13px 42px
  }

  .doctor-bio-block p {
    font-size: 11px
  }

  .doctor-modal-actions {
    position: sticky;
    bottom: -26px;
    margin: 17px -20px -26px;
    padding: 12px 20px 18px;
    background: linear-gradient(180deg,rgba(5,18,31,0),#05121f 25%)
  }

  .doctor-modal-actions .cta {
    flex: 1
  }

  .doctor-modal-actions .ghost {
    display: none
  }

  .call-modal-panel {
    width: 100%;
    padding: 70px 20px 26px
  }

  .service-modal-panel {
    width: 100%;
    max-height: 92svh
  }

  .service-modal-grid {
    display: block;
    max-height: 92svh;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--service-accent) rgba(4,17,29,.72)
  }

  .service-modal-visual {
    min-height: 220px
  }

  .service-modal-visual::before {
    top: 48%;
    width: 145px;
    height: 145px
  }

  .service-modal-visual::after {
    top: 48%;
    width: 195px;
    height: 195px
  }

  .service-modal-icon {
    top: calc(48% - 52px);
    left: calc(50% - 52px);
    width: 104px;
    height: 104px;
    border-radius: 27px
  }

  .service-modal-icon svg {
    width: 70px;
    height: 70px
  }

  .principle-modal-icon {
    font-size: 56px
  }

  .service-modal-orbit-dot {
    top: 48%
  }

  .vet-modal.open .service-modal-orbit-dot {
    animation-name: serviceOrbitMobile
  }

  .service-modal-visual-label {
    display: none
  }

  .service-modal-content {
    padding: 27px 20px 26px;
    overflow: visible
  }

  .service-modal-content h2 {
    margin-right: 38px;
    font-size: 30px
  }

  .service-modal-lead {
    font-size: 14px
  }

  .service-modal-actions {
    position: sticky;
    bottom: -26px;
    margin: 18px -20px -26px;
    padding: 13px 20px 19px;
    background: linear-gradient(180deg,rgba(5,18,31,0),#05121f 25%)
  }

  .service-modal-actions .cta {
    flex: 1
  }

  .service-modal-actions .ghost {
    display: none
  }

  .call-number-card strong {
    font-size: 19px
  }

  .doctor-more {
    height: 33px;
    font-size: 10px
  }

}

@keyframes serviceOrbitMobile {
  from {
    transform: rotate(0deg) translateX(72px) rotate(0deg)
  }
  to {
    transform: rotate(360deg) translateX(72px) rotate(-360deg)
  }
}

@media(prefers-reduced-motion:reduce) {
  .vet-modal.open .service-modal-icon,
  .vet-modal.open .service-modal-icon path,
  .vet-modal.open .service-modal-icon rect,
  .vet-modal.open .service-modal-orbit-dot {
    animation: none
  }
}

@media(max-width:390px) {
  .doctor-more {
    margin-top: 8px
  }

  .doctor-modal-photo {
    height: 30svh
  }

  .doctor-modal-content {
    max-height: 62svh
  }

  .doctor-modal-content h2 {
    font-size: 26px
  }

}

/*
  УЛУЧШЕНИЯ КОНВЕРСИИ, КАРТА И МОБИЛЬНЫЕ ДЕЙСТВИЯ
  Оформляет подпись первого экрана, блок маршрута и нижнюю панель на телефонах.
*/

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 17px;
  color: #68c8ff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .16em;
  text-transform: uppercase
}

.hero-kicker::before {
  content: "";
  width: 30px;
  height: 1px;
  background: linear-gradient(90deg,#168fff,transparent);
  box-shadow: 0 0 12px rgba(22,143,255,.65)
}

.location-section {
  scroll-margin-top: 92px;
  padding: 36px 0 48px;
  border-top: 1px solid rgba(73,135,200,.10);
  background: radial-gradient(760px 360px at 15% 0%,rgba(18,139,255,.08),transparent 66%),linear-gradient(180deg,#04111d,#020a12)
}

.location-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px
}

.location-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  color: #45b9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  text-transform: uppercase
}

.location-kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg,#168fff,transparent)
}

.location-head h2 {
  font-size: 36px;
  margin: 0;
  color: #fff
}

.location-head p {
  max-width: 580px;
  margin: 0;
  color: #9fb1c1;
  font-size: 14px;
  line-height: 1.55;
  text-align: right
}

.location-grid {
  display: grid;
  grid-template-columns: minmax(280px,.72fr) minmax(0,1.28fr);
  gap: 16px;
  align-items: stretch
}

.location-info {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid rgba(73,135,200,.22);
  border-radius: 20px;
  background: linear-gradient(180deg,#081b2e,#061522);
  box-shadow: var(--shadow)
}

.location-list {
  display: grid;
  gap: 18px;
  margin: 0
}

.location-list>div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 13px;
  align-items: start
}

.location-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(84,165,255,.22);
  background: rgba(7,27,46,.8);
  color: #53bdff;
  font-size: 19px
}

.location-list dt {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7690a8;
  margin-bottom: 5px
}

.location-list dd {
  margin: 0;
  color: #edf4fa;
  font-size: 15px;
  line-height: 1.5
}

.location-route {
  width: 100%;
  margin-top: auto;
  padding-top: 22px
}

.map-frame {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(73,135,200,.22);
  border-radius: 20px;
  background: #071522;
  box-shadow: var(--shadow)
}

.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.map-frame iframe[hidden],
.map-consent[hidden] {
  display: none
}

.map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 32px;
  text-align: center;
  background:
    radial-gradient(circle at 18% 16%,rgba(41,147,255,.16),transparent 34%),
    radial-gradient(circle at 84% 82%,rgba(255,52,57,.13),transparent 32%),
    linear-gradient(145deg,#071827,#04101c)
}

.map-consent-card {
  width: min(470px,100%);
  padding: 30px;
  border: 1px solid rgba(103,181,243,.2);
  border-radius: 20px;
  background: rgba(7,25,41,.84);
  box-shadow: 0 22px 58px rgba(0,0,0,.3)
}

.map-consent-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(68,165,255,.42);
  border-radius: 50%;
  color: #42afff;
  font-size: 27px;
  box-shadow: inset 0 0 24px rgba(34,142,255,.1),0 0 26px rgba(34,142,255,.08)
}

.map-consent h3 {
  margin: 0 0 10px;
  color: #f4f9fd;
  font-size: 22px;
  line-height: 1.25
}

.map-consent p {
  margin: 0 auto 20px;
  color: #9fb3c4;
  font-size: 14px;
  line-height: 1.55
}

.map-consent-button {
  border: 0;
  cursor: pointer
}

.mobile-actions {
  display: none
}

@media(max-width:900px) {
  .location-head {
    display: block
  }

  .location-head p {
    text-align: left;
    margin-top: 8px
  }

  .location-grid {
    grid-template-columns: 1fr
  }

  .map-frame {
    min-height: 360px
  }

  .location-route {
    margin-top: 4px
  }

}

@media(max-width:760px) {
  body {
    padding-bottom: 76px
  }

  .hero-kicker {
    font-size: 10px;
    letter-spacing: .12em;
    margin-bottom: 14px
  }

  .location-section {
    padding: 28px 0 30px
  }

  .location-head h2 {
    font-size: 31px
  }

  .location-info {
    padding: 20px
  }

  .map-frame {
    min-height: 320px
  }

  .mobile-actions {
    position: fixed;
    z-index: 80;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 6px;
    border: 1px solid rgba(96,170,255,.25);
    border-radius: 18px;
    background: rgba(3,13,23,.94);
    box-shadow: 0 18px 50px rgba(0,0,0,.48);
    backdrop-filter: blur(16px)
  }

  .mobile-actions a {
    min-height: 54px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    border-radius: 13px;
    color: #dce8f3;
    font-size: 10px;
    font-weight: 800
  }

  .mobile-actions a span {
    font-size: 18px;
    line-height: 1
  }

  .mobile-actions .mobile-book {
    background: linear-gradient(135deg,#f0272d,#ff4b44);
    color: #fff;
    box-shadow: 0 8px 22px rgba(255,52,57,.22)
  }

  footer {
    padding-bottom: 92px
  }

}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 16px;
  padding-top: 18px;
  border-top: 1px solid rgba(140,190,230,.12);
  color: #8095a8;
  font-size: 12px;
  line-height: 1.65
}

.footer-legal-details {
  max-width: 720px
}

.footer-legal a,
.footer-legal-link {
  color: #a9c4d9;
  text-decoration: none
}

.footer-legal-link {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed rgba(169,196,217,.45);
  background: none;
  font: inherit;
  cursor: pointer
}

.footer-legal-action {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px 18px
}

.footer-legal a:hover,
.footer-legal-link:hover {
  color: #fff
}

.privacy-modal-panel {
  width: min(860px,calc(100vw - 48px));
  max-height: min(88vh,900px);
  overflow-y: auto;
  padding: 48px 52px 42px
}

.privacy-modal-content {
  position: relative;
  z-index: 1;
  color: #b8c8d6;
  font-size: 14px;
  line-height: 1.75
}

.privacy-modal-content h2 {
  max-width: 700px;
  margin: 0 52px 8px 0;
  color: #fff;
  font-size: clamp(25px,4vw,38px);
  line-height: 1.12
}

.privacy-modal-date {
  margin: 0 0 28px;
  color: #6fc7ff;
  font-weight: 700
}

.privacy-modal-content h3 {
  margin: 25px 0 8px;
  color: #eef7ff;
  font-size: 17px
}

.privacy-modal-content p,
.privacy-modal-content ul {
  margin: 8px 0
}

.privacy-modal-content ul {
  padding-left: 20px
}

.privacy-modal-content a {
  color: #6fc7ff
}

.privacy-contact-card {
  margin-top: 26px;
  padding: 18px 20px;
  border: 1px solid rgba(91,178,238,.2);
  border-radius: 16px;
  background: rgba(15,40,61,.52)
}

.cookie-banner {
  position: fixed;
  z-index: 9000;
  left: 50%;
  bottom: 20px;
  width: min(980px,calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  border: 1px solid rgba(87,168,229,.28);
  border-radius: 20px;
  background: rgba(4,17,29,.97);
  box-shadow: 0 24px 70px rgba(0,0,0,.56),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(18px)
}

.cookie-banner[hidden] {
  display: none
}

.cookie-banner-copy {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  gap: 14px;
  align-items: start
}

.cookie-banner-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(77,165,255,.34);
  border-radius: 13px;
  color: #4eb7ff;
  font-size: 20px;
  background: rgba(21,93,154,.13)
}

.cookie-banner h2 {
  margin: 0 0 5px;
  color: #f4f9fd;
  font-size: 17px;
  line-height: 1.25
}

.cookie-banner p {
  margin: 0;
  color: #9db1c2;
  font-size: 13px;
  line-height: 1.5
}

.cookie-policy-link {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed rgba(111,199,255,.55);
  background: none;
  color: #6fc7ff;
  font: inherit;
  cursor: pointer
}

.cookie-actions {
  display: flex;
  align-items: center;
  gap: 10px
}

.cookie-button {
  min-height: 44px;
  padding: 0 17px;
  border-radius: 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer
}

.cookie-button-essential {
  border: 1px solid rgba(117,173,217,.3);
  background: rgba(13,45,70,.72);
  color: #dbe9f4
}

.cookie-button-accept {
  border: 1px solid rgba(255,93,93,.4);
  background: linear-gradient(135deg,#f0272d,#ff4b44);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255,52,57,.2)
}

.cookie-button:hover,
.cookie-button:focus-visible,
.cookie-policy-link:focus-visible {
  filter: brightness(1.1)
}

@media(max-width:760px) {
  .footer-legal {
    display: block
  }

  .footer-legal-action {
    margin-top: 8px;
    display: flex
  }

  .cookie-banner {
    bottom: 86px;
    width: calc(100% - 20px);
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: 18px
  }

  .cookie-banner-copy {
    grid-template-columns: 36px minmax(0,1fr);
    gap: 11px
  }

  .cookie-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 17px
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr
  }

  .cookie-button {
    width: 100%;
    padding: 0 10px
  }

  .privacy-modal-panel {
    width: 100%;
    max-height: 92svh;
    padding: 42px 20px 30px
  }

  .privacy-modal-content {
    font-size: 13px
  }

  .privacy-modal-content h2 {
    font-size: 26px
  }
}