/* Витрина: шапка, первый экран, разделы. Сначала телефон, на широком экране — сетка. */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: rgba(247, 242, 234, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line) }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none }
.brand__mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font: 600 22px/1 var(--serif) }
.brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 19px/1.1 var(--serif) }
.topbar__nav { display: none }
.topbar__tools { display: flex; gap: 8px; margin-left: auto; flex: none }
.topbar__tools .btn--sm { display: none }

/* Первый экран */
.hero { display: grid; gap: 22px; padding: 26px 16px 8px }
.kicker { font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent) }
.hero__title { margin: 8px 0 12px; font: 600 64px/.95 var(--serif); letter-spacing: -.01em }
.hero__lead { max-width: 560px; color: var(--ink-2); font-size: 16.5px }
.rating { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 4px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); text-decoration: none; font-size: 14px; box-shadow: var(--shadow-sm) }
.rating__stars { color: #d39a2c; letter-spacing: 1px }
.rating b { font-size: 15px }
.rating__src { color: var(--muted) }
.hero__meta { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14.5px; color: var(--ink-2) }
.hero__meta li { display: flex; gap: 10px; align-items: flex-start }
.hero__meta .ico { flex: none; width: 20px; color: var(--accent); text-align: center }
.hero__meta small { display: block; color: var(--muted); font-size: 12.5px }
.hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px }
.hero__actions .btn--lg { grid-column: 1 / -1 }
.hero__photo { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 4 / 3; background: var(--bg-2) }
.hero__photo img { width: 100%; height: 100%; object-fit: cover }
.hero__photo figcaption, .photo-note { position: absolute; right: 12px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 252, 247, .85); color: var(--muted); font-size: 11.5px; font-weight: 700 }

.facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0 16px }
.facts li { padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; color: var(--ink-2) }

/* Блоки */
.block { padding: 48px 16px 0 }
.block__head { margin-bottom: 18px }
.block__head h2 { font: 600 38px/1.05 var(--serif) }
.block__note { margin-top: 8px; color: var(--muted); font-size: 14px; max-width: 640px }

.why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: why }
.why__item { position: relative; padding: 20px 20px 20px 70px; border-radius: var(--r); background: var(--paper); border: 1px solid var(--line); counter-increment: why }
.why__item::before { content: counter(why, decimal-leading-zero); position: absolute; left: 20px; top: 16px; font: 600 32px/1 var(--serif); color: var(--accent-2) }
.why__item h3 { font-size: 16px; font-weight: 800; margin-bottom: 4px }
.why__item p { color: var(--ink-2); font-size: 14.5px }

/* Услуги */
.sections { display: grid; gap: 16px }
.sec { border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow-sm) }
.sec__photo { position: relative; aspect-ratio: 16 / 7; background: var(--bg-2) }
.sec__photo img { width: 100%; height: 100%; object-fit: cover }
.sec__title { padding: 18px 18px 4px; font: 600 28px/1.1 var(--serif) }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; align-items: center; padding: 14px 18px; border-top: 1px solid var(--line) }
.sec__title + .svc { border-top: 0 }
.svc__title { font-weight: 700; font-size: 15.5px }
.svc__meta { color: var(--muted); font-size: 13px }
.svc__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.svc__price { font-weight: 800; font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums }

/* Врач */
.doctors { display: grid; gap: 14px }
.doc { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 18px; align-items: center; padding: 22px; border-radius: var(--r-lg); background: linear-gradient(135deg, #fffaf2, #f6ebde); border: 1px solid var(--line) }
.doc__mono { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--paper); border: 1px solid var(--line-2); color: var(--accent); font: 600 34px/1 var(--serif) }
.doc__name { font: 600 28px/1.1 var(--serif) }
.doc__title { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 2px }
.doc__about { margin-top: 10px; color: var(--ink-2); font-size: 15px }
.doc .btn { grid-column: 1 / -1; justify-self: start }

/* Акции */
.promos { display: grid; gap: 12px }
.promo { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: var(--r); background: var(--accent-soft); color: #6d3c20; font-weight: 700 }
.promo__mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--paper); color: var(--accent); font: 600 24px/1 var(--serif) }

/* Контакты */
.contacts { display: grid; gap: 14px }
.cbox { padding: 22px; border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line) }
.cbox__addr { font: 600 26px/1.15 var(--serif) }
.cbox__note { margin-top: 8px; color: var(--ink-2); font-size: 14.5px }
.cbox__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.clist { display: grid; gap: 16px; margin: 0 }
.clist dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted) }
.clist dd { margin: 4px 0 0; font-size: 15.5px }
.clist a { font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--line-2) }
.clist small { color: var(--muted); font-size: 13px }

.footer { margin-top: 56px; padding: 26px 16px calc(110px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13.5px; display: grid; gap: 6px }

.mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(247, 242, 234, 0), rgba(247, 242, 234, .96) 30%); transform: translateY(110%); transition: transform .35s var(--ease) }
.mobile-cta.is-on { transform: none }

@media (min-width: 560px) {
  .hero__actions { display: flex; flex-wrap: wrap }
  .why__list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
}

@media (min-width: 900px) {
  .topbar { padding: 12px 40px }
  .topbar__nav { display: flex; gap: 26px; margin-left: 36px; font-size: 14px; font-weight: 700 }
  .topbar__nav a { text-decoration: none; color: var(--ink-2) }
  .topbar__nav a:hover { color: var(--accent) }
  .topbar__tools .btn--sm { display: inline-flex }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; max-width: 1240px; margin: 0 auto; padding: 56px 40px 8px }
  .hero__title { font-size: 104px }
  .hero__photo { aspect-ratio: 5 / 4 }
  .facts, .block { max-width: 1240px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px }
  .block { padding-top: 80px }
  .block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 26px }
  .block__head h2 { font-size: 48px }
  .block__note { margin: 0; text-align: right; max-width: 420px }
  .sections { display: block; columns: 2; column-gap: 22px }
  .sec { break-inside: avoid; margin-bottom: 22px }
  .doc { grid-template-columns: auto minmax(0, 1fr) auto; padding: 30px 34px }
  .doc__mono { width: 112px; height: 112px; font-size: 44px }
  .doc .btn { grid-column: 3; grid-row: 1 }
  .promos { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
  .contacts { grid-template-columns: 1fr 1fr; gap: 22px }
  .footer { max-width: 1240px; margin: 72px auto 0; padding: 28px 40px 40px }
  .mobile-cta { display: none }
}