/* Lumen — премиальный слой оформления: шрифты, бренд, единая типографика и акценты.
   Цвета задаются в site.config.mjs → theme и попадают в :root через <style id="theme">. */

@font-face{font-family:Manrope;src:url('./assets/fonts/manrope-cyrillic.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Manrope;src:url('./assets/fonts/manrope-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';src:url('./assets/fonts/cormorant-cyrillic.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';src:url('./assets/fonts/cormorant-latin.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';src:url('./assets/fonts/cormorant-italic-cyrillic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:block;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Cormorant Garamond';src:url('./assets/fonts/cormorant-italic-latin.woff2') format('woff2');font-weight:500;font-style:italic;font-display:block;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--display:'Cormorant Garamond','Times New Roman',Georgia,serif;--font:Manrope,Arial,sans-serif;--radius:999px;--ease:cubic-bezier(.22,.7,.2,1)}
body{background:var(--paper);color:var(--ink);font-feature-settings:'kern'}
::selection{background:var(--accent);color:var(--paper)}
button:focus-visible,a:focus-visible,summary:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Единая типографика заголовков */
h1,h2,.doctor-card h3,.price-panel h3,.booking-result h3,.contact-phone{font-family:var(--display);font-weight:500;font-variant-numeric:lining-nums;text-wrap:balance}
.accent,h2>span:not(.line),.smile-banner h2>span{font-family:var(--display);font-style:italic;font-weight:500;color:var(--gold-text)}
.blue{color:var(--accent)}
.eyebrow{font-family:var(--font);font-size:11px!important;font-weight:600;letter-spacing:.2em!important;text-transform:uppercase;color:var(--gold-text)!important}
.section-tag{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);gap:18px}
.section-number{width:auto;height:auto;border:0;padding:0 18px 0 0;position:relative;color:var(--gold-text);font-family:var(--display);font-style:italic;font-size:20px;font-weight:500;letter-spacing:0}
.section-number:after{content:'';position:absolute;right:0;top:50%;width:10px;height:1px;background:var(--gold)}

/* Шапка и бренд */
.header{height:84px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--line)}
.brand{gap:12px;letter-spacing:0;line-height:1}
.brand-mark{width:40px;height:40px;padding:0;border:1px solid var(--gold);border-radius:50%;color:var(--accent);font-family:var(--display);font-style:italic;font-size:24px;font-weight:500;letter-spacing:0;flex-shrink:0;display:grid;place-items:center}
.brand-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:.01em;line-height:.8;color:var(--ink)}
.brand-name .brand-service{font-family:var(--font);font-size:9.5px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);line-height:1}
.header .brand>span:last-child{flex-direction:column;align-items:flex-start;gap:4px}
.header .brand-service{font-size:9.5px;letter-spacing:.32em}
.desktop-nav{font-size:13px;font-weight:500;letter-spacing:.04em}
.desktop-nav a:after{background:var(--gold)}
.header-phone{font-size:14px;font-weight:600;letter-spacing:.01em}
.header-phone:hover{color:var(--gold-text)}

/* Кнопки */
.button{border-radius:999px;font-weight:600;letter-spacing:.02em;transition:background .25s var(--ease),transform .3s var(--ease),color .2s,box-shadow .3s}
.button-blue,.button-ink{background:var(--accent);color:var(--paper)}
.button-blue:hover,.button-ink:hover{background:var(--accent-hover);box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 22%,transparent)}
.button-plus,.button>span[aria-hidden]{color:var(--gold)}
.text-link{font-weight:600;letter-spacing:.02em;border-bottom-color:color-mix(in srgb,var(--gold) 70%,transparent)}
.text-link:hover{color:var(--gold-text)}

/* Первый экран */
.hero{background:var(--scene)}
.hero h1{font-size:clamp(66px,6.9vw,118px);line-height:.98;letter-spacing:-.012em;font-weight:500}
.hero h1 .accent{font-weight:500;letter-spacing:-.01em}
.line{padding-bottom:.14em;margin-bottom:-.14em}
.hero-lead{font-size:17px;line-height:1.7;color:var(--muted);max-width:440px}
.hero-actions{align-items:center}
.hero-cta{display:none}
.hero-facts{gap:clamp(18px,2.4vw,40px);margin-top:34px;padding-top:24px;border-top:1px solid var(--line);max-width:520px}
.hero-facts strong{font-family:var(--display);font-weight:500;font-size:clamp(34px,3.3vw,50px);letter-spacing:0;color:var(--ink);line-height:1;font-variant-numeric:lining-nums}
.hero-facts strong>span{font-family:var(--font);font-size:13px;color:var(--gold-text);margin-left:5px;font-weight:600}
.hero-facts p{font-size:12px;color:var(--muted);margin-top:9px;line-height:1.5}
.hero-foot-brand{text-transform:uppercase;letter-spacing:.2em}
.hero-foot-brand>span{color:var(--muted)}
.hero-scroll>span{color:var(--gold)}
.room-invitation>span{background:color-mix(in srgb,var(--paper) 88%,transparent);color:var(--ink)}
.room-invitation .button{box-shadow:0 14px 36px color-mix(in srgb,var(--accent) 24%,transparent)}
.room-caption>span{background:color-mix(in srgb,var(--paper) 85%,transparent)}

/* Услуги на экране томографа */
.tomography{background:var(--scene);border-top-color:var(--line)}
.tomography-intro h2{font-size:clamp(50px,5.3vw,86px);line-height:1.02;letter-spacing:-.01em}
.tomography-intro h2 .accent{color:var(--gold-text)}
.tomography-journey li.is-active{color:var(--accent)}
.scanner-screen{background:var(--white)}
.scanner-screen-bar>span:first-child{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.01em}
.scanner-screen-bar>span:first-child>span{font-family:var(--font);font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-left:8px}
.scanner-screen-heading h2{font-size:38px;letter-spacing:0}
.scanner-services button{border-color:var(--line);background:var(--paper)}
.scanner-services button:hover,.scanner-services button:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.service-icon{color:var(--gold-text)}
.scanner-services button:hover .service-icon,.scanner-services button:focus-visible .service-icon{color:var(--gold)}

/* Разделы: ритм фонов и заголовки */
.atmosphere{background:var(--white)}
.team{background:var(--paper);border-top-color:var(--line)}
.prices{background:var(--paper-alt);border-top-color:var(--line)}
.contacts{background:var(--paper);border-top-color:var(--line)}
.footer{background:var(--paper-alt);border-top:1px solid var(--line)}
.atmosphere-heading h2,.team-heading h2,.prices-heading h2,.contacts-heading h2{font-size:clamp(46px,5.2vw,84px);line-height:1.02;letter-spacing:-.01em;font-weight:500}
.atmosphere-heading h2>span{color:var(--gold-text)}
.atmosphere figcaption>span:first-child{font-family:var(--display);font-style:italic;font-size:19px}

/* Врачи */
.doctor-card h3{font-size:clamp(28px,2.5vw,38px);letter-spacing:0;font-weight:500}
.doctor-specialty{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.doctor-photo-label{border-radius:999px;background:color-mix(in srgb,var(--paper) 92%,transparent);border-color:transparent;font-weight:500}
.doctor-photo-label>span,.doctor-more>span{color:var(--gold-text)}
.doctor-more{border-top-color:var(--line)}
.team-foot{border-top-color:var(--line)}
.team-foot p{font-size:15px;color:var(--muted);max-width:520px}
.doctor-dialog h2{font-size:clamp(36px,3.4vw,52px);letter-spacing:0}
.doctor-dialog-copy>.eyebrow{color:var(--gold-text)}
.doctor-dialog-close,.full-price-close{background:var(--paper-alt)}

/* Цены */
.price-tab{border-top-color:var(--line);font-size:16px}
.price-tab:last-child{border-bottom-color:var(--line)}
.price-tab>span:first-child{font-family:var(--display);font-style:italic;font-size:19px;color:var(--gold-text)}
.price-tab.is-active,.price-tab:hover{color:var(--ink)}
.price-tab.is-active>span:first-child{color:var(--gold-text)}
.price-tab-plus{color:var(--gold)}
.price-aside>span{color:var(--gold)}
.price-panel{background:var(--white);border-color:var(--line);border-radius:14px}
.price-panel h3{font-size:36px;letter-spacing:0;font-weight:500}
.price-table tr{border-top-color:var(--line)}
.price-table td{color:var(--ink);font-weight:600;font-size:19px;letter-spacing:-.01em}
.price-table td>span{color:var(--muted)}
.price-row-extra th,.price-row-extra td{animation:price-in .4s var(--ease) both}
@keyframes price-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.price-panel-footer{border-top-color:var(--line)}
.price-panel-footer .text-link{color:var(--accent)}
.price-panel-footer .text-link>span{color:var(--gold);transition:transform .3s}
.price-more[aria-expanded=true]>span{transform:rotate(45deg)}
.price-consult:hover{color:var(--gold-text)}

/* Тёмный блок записи */
.smile-banner{background:radial-gradient(ellipse 70% 120% at 80% 100%,color-mix(in srgb,var(--accent) 80%,#fff 0%),transparent 70%),linear-gradient(110deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 60%,var(--accent)) 100%)}
.smile-banner .eyebrow{color:color-mix(in srgb,var(--gold) 70%,#fff)!important}
.smile-banner h2{font-size:clamp(46px,5vw,80px);line-height:1.02;letter-spacing:-.01em}
.smile-banner h2>span{color:color-mix(in srgb,var(--gold) 60%,#fff)}
.smile-banner-copy>p:not(.eyebrow){color:color-mix(in srgb,var(--paper) 78%,transparent)}
.smile-banner-button{background:var(--paper);color:var(--ink);border-radius:999px}
.smile-banner-button:hover{background:#fff;color:var(--accent)}
.smile-banner-button span{color:var(--gold-text)}
.smile-halo-one{background:radial-gradient(circle at 43% 36%,#f4efe6,#d9cdb8 75%)}
.smile-halo-two,.smile-halo-three{border-color:color-mix(in srgb,var(--gold) 50%,#fff)}

/* Контакты */
.contact-phone{font-size:clamp(34px,3.4vw,52px);font-weight:500;letter-spacing:0}
.contact-phone>span{font-family:var(--font)}
.contact-phone:hover{color:var(--accent)}
.contact-detail address{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:0;line-height:1.25}
.contact-detail address+.contact-muted{font-size:14px;line-height:1.7;margin-top:8px;max-width:360px}
.contact-detail strong{font-weight:600}
.contact-email:hover,.contact-socials a:hover{color:var(--gold-text)}
.contact-call{border-radius:999px}
.map-placeholder{border-radius:14px;border-color:var(--line)}
.map-location-pin{transform:none;border-radius:50%;width:58px;height:58px;background:var(--accent);color:var(--paper);font-family:var(--display);font-style:italic;font-size:28px;box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 28%,transparent),0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}
.map-location-pin:before{content:none}
.map-caption>a{color:var(--accent)}
.contact-map iframe{border-color:var(--line);border-radius:14px}

/* Подвал */
.footer-bottom{border-top-color:var(--line)}
.footer-bottom a{color:var(--ink);border-bottom:1px solid var(--gold);padding-bottom:1px;margin-left:6px;font-weight:700;letter-spacing:.06em}
.footer-bottom a:hover{color:var(--gold-text)}
.footer-legal{color:var(--muted)}
.medical-note{font-family:var(--display);font-size:clamp(20px,2.4vw,36px);color:var(--muted);letter-spacing:0}

/* Окна */
.booking{background:var(--paper);border-radius:18px}
.booking h2{font-size:56px;letter-spacing:-.01em}
.booking select{border-color:var(--line);border-radius:10px;background:var(--white)}
.booking fieldset label span{border-color:var(--line);border-radius:999px}
.booking fieldset input:checked+span{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.result-mark{background:var(--accent-soft);color:var(--accent)}
.booking-result .result-selection{color:var(--accent)}
.booking-result a{color:var(--accent);font-weight:600;white-space:nowrap}
.booking::backdrop,.doctor-dialog::backdrop{background:color-mix(in srgb,var(--dark) 62%,transparent);backdrop-filter:blur(8px)}
.doctor-dialog{border-radius:18px;background:var(--white)}

/* Плавающий звонок */
.floating-call-phone{background:linear-gradient(145deg,var(--accent),var(--dark))}
.floating-call:focus-visible{outline-color:var(--gold);background:color-mix(in srgb,var(--paper) 80%,transparent)}
.floating-call-label{background:var(--white);color:var(--ink);border-color:var(--line)}

/* Мобильное меню */
.mobile-menu-phone{display:none}
@media(max-width:1350px){.header-phone{display:none}}
@media(max-width:800px){
  .header{height:74px}
  .mobile-menu{top:74px;background:var(--paper);font-family:var(--display);font-size:30px;gap:14px}
  .mobile-menu-phone{display:block;font-family:var(--font);font-size:16px;font-weight:600;color:var(--accent);margin-top:10px;padding-top:18px;border-top:1px solid var(--line)}
  .hero-copy{margin-top:30px}
  .hero h1{font-size:clamp(56px,11vw,84px)}
  .hero-lead{font-size:16px;margin-top:20px}
  .hero-actions{flex-wrap:wrap;gap:14px 24px;margin-top:24px}
  .hero-cta{display:inline-flex;min-height:54px;padding:15px 24px;gap:22px;font-size:14px}
  .hero-facts{margin-top:30px}
  .hero-art.room-art{height:440px;margin-top:8px}
  .atmosphere-heading h2,.team-heading h2,.prices-heading h2,.contacts-heading h2{font-size:clamp(42px,7vw,58px)}
  .tomography-intro h2{font-size:clamp(44px,8vw,60px)}
  .contact-detail address{font-size:26px}
}
@media(max-width:540px){
  .brand-mark{width:34px;height:34px;font-size:20px}
  .brand-name{font-size:25px}
  .header .brand-service,.brand-name .brand-service{font-size:8px;letter-spacing:.28em}
  .hero h1{font-size:clamp(50px,14vw,64px)}
  .hero-facts{gap:14px}
  .hero-facts strong{font-size:clamp(28px,8vw,36px)}
  .hero-facts p{font-size:11px}
  .hero-art.room-art{height:400px}
  .atmosphere-heading h2,.team-heading h2,.prices-heading h2,.contacts-heading h2{font-size:clamp(38px,10.5vw,48px)}
  .smile-banner h2{font-size:clamp(40px,11vw,52px)}
  .price-panel h3{font-size:30px}
  .price-table td{font-size:16px}
  .contact-phone{font-size:34px}
  .booking h2{font-size:46px}
  .medical-note{font-size:20px;line-height:1.3}
}
@media(prefers-reduced-motion:reduce){.price-row-extra th,.price-row-extra td{animation:none}}
.contact-detail p:has(>strong){display:grid;grid-template-columns:76px auto;justify-content:start}
.contact-detail p>strong{margin-left:0}
/* Сканирование томографа: статус на стекле, полоса прогресса и подпись под моделью */
.screen-scan{position:absolute;left:0;right:0;top:0;height:4px;background:color-mix(in srgb,var(--gold) 18%,transparent);opacity:0;transition:opacity .25s}
.screen-scan i{display:block;height:100%;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--scan,0))}
.tomography[data-scan=scanning] .screen-scan{opacity:1}
.tomography[data-scan=scanning] .screen-status i{background:var(--gold);animation:scan-pulse 1s ease-in-out infinite}
.tomography[data-scan=done]:not(.services-open) .screen-status i{background:var(--gold)}
.tomography-journey .journey-scan{position:relative}
.journey-scan:after{content:'';position:absolute;left:22px;right:0;bottom:-4px;height:2px;background:var(--gold);transform-origin:0 50%;transform:scaleX(var(--scan,0));opacity:0;transition:opacity .25s}
.tomography[data-scan=scanning] .journey-scan:after,.tomography[data-scan=done] .journey-scan:after{opacity:1}
.tomography[data-scan=done] .journey-scan:after{opacity:.45}
.scan-readout{color:var(--gold-text);font-weight:600;font-variant-numeric:tabular-nums;min-width:3.2ch}
.scan-readout:empty{display:none}
@keyframes scan-pulse{50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.tomography .screen-status i{animation:none!important}}

/* Preserve breathing room when the compact desktop hero has a low viewport. */
@media (min-width:801px) and (max-height:920px){
  .hero-copy{margin-top:clamp(42px,6.5vh,68px)}
  .hero-facts{margin-top:22px}
}

/* Keep the explanatory note visually separate from the price-card controls. */
.price-notes{margin-top:42px}

/* On very short desktop windows, let the hero footer follow the content. */
@media (min-width:801px) and (max-height:720px){
  .hero{height:auto;min-height:660px;padding-bottom:28px}
  .hero-foot{position:relative;left:auto;right:auto;bottom:auto;margin-top:36px}
}

/* На мобильных оставляем одну синюю кнопку записи — в первом экране. */
@media(max-width:800px){.room-invitation{display:none}}