/* ===== Токены ===== */
:root{
  --fog:#cfd8db; --fog-2:#dde4e6; --fog-3:#e9eef0; --paper:#f6f8f8;
  --ink:#141617; --ink-2:#2b3134; --muted:#5e686d; --line:rgba(20,22,23,.14);
  --night:#141617; --night-2:#1c2022; --on-night:#e9eef0; --on-night-2:#9aa6ab; --line-night:rgba(233,238,240,.14);
  --tg:#229ED9; --accent:#2c6a7d; --accent-night:#a6cbd8;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Onest,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --out:cubic-bezier(.16,1,.3,1);
  --wrap:1240px; --hdr:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--fog);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}
@media(min-width:768px){.wrap{padding-inline:48px}}
.tone-dark{background:var(--night);color:var(--on-night)}

/* заголовки: плотный гротеск + курсивный акцент антиквой */
.h2{font-family:var(--sans);font-weight:500;font-size:clamp(2.3rem,1.3rem + 3.6vw,4.6rem);line-height:1;letter-spacing:-.045em;margin:0;text-wrap:balance}
.h2 em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.14em;letter-spacing:-.02em;line-height:.8;color:var(--accent)}
.tone-dark .h2 em,.tone-dark .band__title em{color:var(--accent-night)}
.about__lead em{color:var(--accent)}
.band__title em{font-style:italic;font-weight:300}

/* разбивка заголовка на строки: строка выезжает из-под маски */
.split .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.split .ln>span{display:block;transform:translateY(105%);transition:transform .85s var(--out)}
.split.is-in .ln>span{transform:none}
.split.is-in .ln:nth-child(2)>span{transition-delay:.09s}

/* ===== Кнопки ===== */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:100px;
  font-weight:500;font-size:15px;white-space:nowrap;transition:transform .3s var(--out),background-color .3s var(--ease),color .3s,box-shadow .3s}
.pill:active{transform:scale(.96)}
.pill--sm{height:40px;padding:0 18px;font-size:14px}
.pill--line{border:1px solid currentColor}
.pill--dark{background:var(--ink);color:var(--paper)}
@media(hover:hover){.pill--dark:hover{background:#2c3235;color:var(--paper)}.ticket .pill--dark:hover{background:var(--accent)}.pill--tg:hover{box-shadow:0 12px 30px -10px rgba(34,158,217,.6)}}
.pill--tg{background:var(--tg);color:#fff}
.pill--tg svg{width:20px;height:20px;fill:currentColor}
.pill--wide{width:100%}
.chip{height:40px;padding:0 18px;border-radius:100px;border:1px solid var(--line-night);font-size:14px;color:var(--on-night-2);
  transition:background-color .35s var(--ease),color .35s,border-color .35s}
.chip.is-on{background:var(--on-night);color:var(--night);border-color:var(--on-night)}

/* ===== Шапка: меняет цвет над тёмными секциями ===== */
.hdr{position:fixed;inset:0 0 auto;z-index:50;height:var(--hdr);color:var(--ink);transition:color .4s var(--ease)}
.hdr::before{content:"";position:absolute;inset:0;background:rgba(207,216,219,.7);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  opacity:0;transition:opacity .4s var(--ease),background-color .4s}
.hdr.is-stuck::before{opacity:1}
.hdr.is-dark{color:var(--on-night)}
.hdr.is-dark::before{background:rgba(20,22,23,.72)}
.hdr__in{position:relative;max-width:var(--wrap);margin:0 auto;height:100%;padding-inline:20px;display:flex;align-items:center;justify-content:space-between;gap:20px}
@media(min-width:768px){.hdr__in{padding-inline:48px}}
.logo{display:flex;align-items:baseline;gap:8px;font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:-.01em;line-height:1}
.logo small{font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.6;font-weight:500}
.nav{display:none;gap:34px;font-size:14px}
.nav a{opacity:.75;transition:opacity .2s}.nav a:hover{opacity:1}
@media(min-width:900px){.nav{display:flex}}

/* ===== 1. Сцена ===== */
.stage{height:330vh;position:relative}
.stage__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 28%,#e2e8ea 0%,var(--fog) 58%,#c2ccd0 100%)}
.leaves{position:absolute;right:-14%;top:-6%;width:min(80vw,760px);color:rgba(40,52,58,.11);filter:blur(9px);pointer-events:none}
.leaf{transform-origin:300px 300px;animation:sway 9s ease-in-out infinite alternate}
.l2{animation-duration:11s;animation-delay:-3s}.l3{animation-duration:13s;animation-delay:-6s}
@keyframes sway{from{transform:rotate(-3deg) translateX(-6px)}to{transform:rotate(4deg) translateX(8px)}}
.words{position:absolute;left:0;right:0;top:40%;transform:translateY(-50%);pointer-events:none}
.words__track{display:flex;gap:7vw;padding-left:5vw;will-change:transform}
.words__track span{font-family:var(--serif);font-weight:300;font-size:clamp(6rem,27vw,21rem);line-height:1;letter-spacing:-.045em;white-space:nowrap;
  transition:opacity .7s var(--ease),filter .7s var(--ease)}
.words__track span:not(.is-on){opacity:.13;filter:blur(3px)}
.gl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s var(--ease)}
.gl.is-ready{opacity:1}
.stage__ui{position:absolute;inset:auto 0 0;padding:0 20px calc(20px + env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px 14px;pointer-events:none}
@media(min-width:768px){.stage__ui{padding:0 48px 36px}}
.stage__ui>*{pointer-events:auto}
.stage__name{margin:0;font-weight:500;font-size:clamp(1.7rem,1.3rem + 1.6vw,2.8rem);line-height:1;letter-spacing:-.04em;white-space:nowrap}
.stage__name em{font-family:var(--serif);font-weight:400;font-size:1.1em;letter-spacing:-.01em;color:var(--accent)}
#chapterPrice{white-space:nowrap;font-weight:500;color:var(--ink)}
.stage__sub{margin:6px 0 0;font-size:14px;color:var(--ink-2)}
.stage__meta>*{transition:opacity .35s var(--ease),transform .5s var(--out),filter .35s}
.stage__meta.is-swap>*{opacity:0;transform:translateY(10px);filter:blur(4px)}
.swatches{display:flex;gap:10px;padding:8px;border-radius:100px;background:rgba(246,248,248,.5);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sw{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);position:relative;transition:transform .3s var(--out)}
.sw::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--ink);opacity:0;transform:scale(.7);transition:opacity .25s,transform .4s var(--out)}
.sw.is-on::after{opacity:1;transform:none}
.sw:active{transform:scale(.88)}
.scrollhint{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}
.scrollhint__line{width:44px;height:1px;background:var(--line);position:relative;overflow:hidden}
.scrollhint__line::after{content:"";position:absolute;inset:0;background:var(--ink);transform:translateX(-100%);animation:run 2.2s var(--ease) infinite}
@keyframes run{to{transform:translateX(100%)}}

/* ===== Общие заголовки секций ===== */
.sec-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:18px 60px;margin-bottom:clamp(30px,4vw,56px)}
.sec-lead{margin:0;max-width:36ch;font-size:16px;color:var(--on-night-2)}
.sec-lead--ink{color:var(--ink-2);margin-top:20px}

/* ===== 2. Услуги: аккордеон ===== */
.services{padding-block:clamp(64px,7.5vw,108px)}
.acc{border-top:1px solid var(--line-night)}
.acc__item{border-bottom:1px solid var(--line-night)}
.acc__item summary{list-style:none;display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:6px 18px;padding:18px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.acc__item summary::-webkit-details-marker{display:none}
.acc__name{font-family:var(--serif);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.7rem);line-height:1.05;letter-spacing:-.015em;transition:transform .5s var(--out)}
.acc__item[open] .acc__price{color:var(--accent-night)}
.acc__price{font-size:15px;color:var(--on-night-2);font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:600px){.acc__item summary{grid-template-columns:1fr 30px}.acc__price{grid-row:2;grid-column:1}}
.acc__plus{width:30px;height:30px;border-radius:50%;border:1px solid var(--line-night);position:relative;transition:transform .5s var(--out),background-color .3s}
.acc__plus::before,.acc__plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;margin:-.75px 0 0 -5.5px;background:currentColor}
.acc__plus::after{transform:rotate(90deg);transition:transform .5s var(--out)}
.acc__item[open] .acc__plus{transform:rotate(180deg)}
.acc__item[open] .acc__plus::after{transform:rotate(0deg)}
@media(hover:hover){.acc__item summary:hover .acc__name{transform:translateX(8px)}}
.acc__body{display:grid;grid-template-rows:1fr;padding:0 0 26px}
.acc__body>div{overflow:hidden;max-width:62ch}
.acc__item[open] .acc__body>div{animation:accIn .6s var(--out)}
@keyframes accIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.acc__body p{margin:0 0 12px;color:var(--on-night-2);font-size:16px}
.acc__body ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.acc__body li{font-size:13px;padding:6px 12px;border-radius:100px;border:1px solid var(--line-night);color:var(--on-night)}
.acc--light{border-color:var(--line)}
.acc--light .acc__item{border-color:var(--line)}
.acc--light .acc__name{font-size:clamp(1.3rem,1.05rem + .8vw,1.75rem)}
.acc--light .acc__plus{border-color:var(--line)}
.acc--light .acc__body p{color:var(--ink-2)}

/* ===== 3. Подбор: чертёж ===== */
.fit{background:var(--fog-3);padding-block:clamp(70px,9vw,120px)}
.fit__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px}
@media(min-width:960px){.fit__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:60px}}
.faces{display:flex;gap:4px 18px;margin:26px -20px 0;padding:0 20px 6px;overflow-x:auto;scrollbar-width:none}
.faces::-webkit-scrollbar{display:none}
@media(min-width:960px){.faces{flex-direction:column;align-items:flex-start;margin:36px 0 0;padding:0;overflow:visible}}
.face{flex:none;font-family:var(--serif);font-size:clamp(1.8rem,1.4rem + 1.4vw,2.7rem);line-height:1.15;color:rgba(20,22,23,.48);position:relative;padding:2px 0 6px;transition:color .45s var(--ease),transform .5s var(--out)}
.face::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--out)}
.face.is-on{color:var(--ink)}.face.is-on::after{transform:none}
@media(hover:hover){.face:not(.is-on):hover{color:rgba(20,22,23,.55)}}
@media(min-width:960px){.face.is-on{transform:translateX(14px)}}
.fit__answer{margin-top:20px;max-width:42ch;transition:opacity .3s var(--ease),transform .45s var(--out)}
.fit__answer.is-swap{opacity:0;transform:translateY(8px)}
.fit__pick{margin:0 0 6px;font-size:15px;color:var(--muted)}.fit__pick b{color:var(--ink);font-weight:500}
.fit__desc{margin:0;color:var(--ink-2)}
.draft{margin:0;background:var(--paper);border-radius:28px;padding:14px;color:var(--ink);box-shadow:0 40px 70px -45px rgba(20,30,36,.45)}
.draft__svg{width:100%;height:auto;max-height:68vh}
.draft__axis{stroke:currentColor;stroke-width:.8;stroke-dasharray:2 5;opacity:.35}
.draft__shape{fill:rgba(207,216,219,.35);stroke:var(--ink);stroke-width:1.6}
.draft__dims line{stroke:#2f6f8a;stroke-width:1.1}
.draft__dims text{font-family:Onest,sans-serif;font-size:12px;fill:#2f6f8a;font-variant-numeric:tabular-nums}
.draft__dims .lbl{fill:var(--muted);font-size:10.5px;letter-spacing:.06em}
#draftGlasses{transition:opacity .35s var(--ease)}
.draft__cap{display:flex;justify-content:space-between;padding:8px 8px 2px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ===== 5. О салоне ===== */
.about{padding-block:clamp(64px,7.5vw,108px);background:var(--fog-2)}
.about__grid{display:grid;gap:34px}
@media(min-width:960px){.about__grid{grid-template-columns:1.25fr 1fr;gap:80px;align-items:end}}
.about__lead{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,1.4rem + 2.8vw,4rem);line-height:1.02;letter-spacing:-.02em;margin:0;text-wrap:balance}
.about__lead em{font-style:italic;font-weight:300}
.about__text p{margin:0 0 16px;color:var(--ink-2);font-size:16px;max-width:52ch}
.about__text b{color:var(--ink);font-weight:500}
.about__facts{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.about__facts li{padding:16px 10px 0 0;display:flex;flex-direction:column;gap:2px}
.about__facts li+li{padding-left:14px;border-left:1px solid var(--line)}
.about__facts b{font-family:var(--serif);font-size:clamp(1.15rem,1rem + .6vw,1.5rem);font-weight:500;line-height:1.1}
.about__facts span{font-size:12.5px;color:var(--muted)}

/* ===== 6. Гарантия ===== */
.care{padding-block:clamp(64px,7.5vw,108px)}
.care__list{list-style:none;margin:0;padding:0;display:grid;gap:0 60px;border-top:1px solid var(--line-night)}
@media(min-width:860px){.care__list{grid-template-columns:1fr 1fr}}
.care__list li{display:flex;gap:18px;padding:24px 0;border-bottom:1px solid var(--line-night)}
.care__list svg{flex:none;width:30px;height:30px;fill:none;stroke:#9fc3d3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.care__list b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,1.15rem + .9vw,1.9rem);line-height:1.1;margin-bottom:6px}
.care__list p{margin:0;color:var(--on-night-2);font-size:15px;max-width:40ch}

/* ===== 7. Вопросы ===== */
.faq{padding-block:clamp(64px,7.5vw,108px);background:var(--fog-3)}
.faq__grid{display:grid;gap:30px}
@media(min-width:960px){.faq__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:start}}

/* ===== 9. Контакты ===== */
.contacts{padding-block:clamp(64px,7.5vw,108px);background:var(--fog-2)}
.contacts__grid{display:grid;gap:34px}
@media(min-width:960px){.contacts__grid{grid-template-columns:1fr 1.1fr;gap:70px;align-items:center}}
.contacts__list{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.contacts__list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.contacts__list svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.contacts__list b{display:block;font-weight:500;font-size:17px}
.contacts__list span{font-size:14px;color:var(--muted)}
.contacts__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.map{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:5/4;box-shadow:0 40px 70px -45px rgba(20,30,36,.45)}
.map svg{width:100%;height:100%}
.map__pulse{transform-origin:center;transform-box:fill-box;animation:pulse 2.6s var(--out) infinite}
@keyframes pulse{from{transform:scale(.3);opacity:.35}to{transform:scale(1.4);opacity:0}}
.map__label{position:absolute;left:50%;top:calc(49% - 56px);transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:100px;font-size:13px;white-space:nowrap}
.map__label b{font-family:var(--serif);font-size:17px;font-weight:500;margin-right:4px}

/* ===== 8. Запись на тёмном ===== */
.exam.tone-dark{background:var(--night)}
.tone-dark .steps li{border-color:var(--line-night)}
.tone-dark .steps li>span{color:var(--accent-night)}
.tone-dark .steps p{color:var(--on-night-2)}
.ticket{color:var(--ink)}

/* ===== 4. Витрина ===== */
.shop{padding:clamp(64px,7.5vw,108px) 0 clamp(52px,6vw,90px);overflow:hidden}
.shop__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:26px 40px;margin-bottom:34px}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 20px 10px;scroll-padding-inline:20px;scrollbar-width:none;outline:none;
  overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
@media(min-width:768px){.rail{padding-inline:max(48px,calc((100vw - var(--wrap))/2 + 48px));scroll-padding-inline:max(48px,calc((100vw - var(--wrap))/2 + 48px));gap:20px}}
.prod{flex:none;width:min(80vw,380px);scroll-snap-align:start;border-radius:28px;padding:14px 14px 20px;position:relative;
  background:radial-gradient(90% 60% at 50% 30%,#2a3033 0%,var(--night-2) 70%);box-shadow:inset 0 0 0 1px var(--line-night);
  transition:transform .6s var(--out),opacity .5s var(--ease)}
.prod.is-hidden{display:none}
.prod.pop{animation:pop .7s var(--out) both}
@keyframes pop{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.prod__img{aspect-ratio:1/1;display:grid;place-items:center;position:relative}
.prod__img img{width:100%;height:auto;transition:transform .9s var(--out);filter:drop-shadow(0 26px 22px rgba(0,0,0,.45))}
.prod__img img[src=""]{visibility:hidden}
@media(hover:hover){.prod:hover .prod__img img{transform:translateY(-8px) rotate(-3deg) scale(1.04)}}
.prod__no{position:absolute;left:4px;top:2px;font-size:12px;letter-spacing:.14em;color:var(--on-night-2)}
.prod__name{margin:4px 4px 0;font-weight:500;font-size:24px;line-height:1.1;letter-spacing:-.035em}
.prod__name em{font-family:var(--serif);font-weight:400;font-size:1.12em;color:var(--accent-night);letter-spacing:0}
.prod{cursor:pointer}
.prod__more{margin:14px 4px 0;font-size:13px;color:var(--on-night-2);display:flex;align-items:center;gap:8px}
.prod__more::after{content:"";width:18px;height:1px;background:currentColor;transition:width .4s var(--out)}
@media(hover:hover){.prod:hover .prod__more::after{width:34px}}
.prod__mat{margin:6px 4px 0;font-size:14px;color:var(--on-night-2)}
.prod__row{display:flex;justify-content:space-between;align-items:center;margin:16px 4px 0}
.prod__price{font-size:16px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.dots{display:flex;gap:6px}.dots i{width:14px;height:14px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.rail__bar{display:flex;align-items:center;gap:18px;margin-top:22px}
.rail__count{font-size:13px;letter-spacing:.12em;color:var(--on-night-2);font-variant-numeric:tabular-nums;min-width:62px}
.arrow{width:52px;height:52px;border-radius:50%;border:1px solid rgba(233,238,240,.22);display:grid;place-items:center;color:var(--on-night);background:rgba(20,22,23,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s var(--ease),color .3s,opacity .3s,transform .3s var(--out)}
.arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){.arrow:hover{background:var(--on-night);color:var(--night)}}
.arrow:active{transform:scale(.92)}
.arrow[aria-disabled="true"]{opacity:0;pointer-events:none}
.rail__track{flex:1;height:1px;background:var(--line-night);position:relative;overflow:hidden;max-width:420px}
.rail__track i{position:absolute;inset:0;background:var(--on-night);transform-origin:left;transform:scaleX(.1)}

/* ===== 5. Запись ===== */
.exam{padding-block:clamp(64px,7.5vw,108px)}
.exam__grid{display:grid;gap:44px}
@media(min-width:960px){.exam__grid{grid-template-columns:1.1fr .9fr;align-items:start;gap:80px}}
.steps{list-style:none;margin:34px 0 0;padding:0}
.steps li{display:flex;gap:18px;padding:18px 0;border-top:1px solid var(--line)}
.steps li>span{font-family:var(--serif);font-size:28px;line-height:1;color:var(--accent);min-width:40px;font-variant-numeric:tabular-nums}
.steps b{font-size:17px;font-weight:500}.steps p{margin:4px 0 0;color:var(--muted);font-size:15px}
.ticket{background:var(--paper);border-radius:28px;padding:26px 20px 24px;position:relative;overflow:hidden;
  box-shadow:0 40px 70px -40px rgba(20,30,36,.45);
  -webkit-mask:radial-gradient(circle 13px at 0 112px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 112px,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 13px at 0 112px,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 13px at 100% 112px,#0000 98%,#000) right/51% 100% no-repeat}
@media(min-width:768px){.ticket{padding:32px 32px 30px}}
.ticket__top{height:86px;margin-bottom:24px;border-bottom:1.5px dashed var(--line)}
.ticket__title{font-family:var(--serif);font-size:34px;line-height:1;margin:0}
.ticket__note{margin:6px 0 0;font-size:13px;color:var(--muted)}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.field input{width:100%;height:54px;border-radius:16px;border:1px solid var(--line);background:var(--fog-3);padding:0 16px;font:inherit;font-size:16px;color:var(--ink);
  transition:border-color .2s,background-color .2s}
.field input::placeholder{color:#7a858a}
.field input:focus{outline:none;border-color:var(--ink);background:#fff}
.field input.is-bad{border-color:#b42318}
.days,.slots{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding:2px 20px;scroll-snap-type:x proximity}
@media(min-width:768px){.days,.slots{margin-inline:-32px;padding-inline:32px}}
.days::-webkit-scrollbar,.slots::-webkit-scrollbar{display:none}
.day,.slot{flex:none;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;background:var(--fog-3);transition:background-color .25s var(--ease),color .25s,border-color .25s,transform .25s var(--out)}
.day:active,.slot:active{transform:scale(.94)}
.day{width:60px;height:66px;display:grid;place-content:center;text-align:center;line-height:1.15}
.day small{font-size:11px;color:var(--muted)}.day b{font-size:19px;font-weight:500}
.slot{height:44px;padding:0 15px;font-size:14px;font-variant-numeric:tabular-nums}
.day.is-on,.slot.is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.day.is-on small{color:rgba(246,248,248,.65)}
.book__err{min-height:20px;margin:0 0 8px;color:#b42318;font-size:13px}
.book__ok{position:absolute;inset:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px;
  opacity:0;pointer-events:none;clip-path:circle(0% at 50% 90%);transition:clip-path .8s var(--out),opacity .2s}
.ticket.is-done .book__ok{opacity:1;pointer-events:auto;clip-path:circle(150% at 50% 90%)}
.book__ok svg{width:64px;height:64px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.book__ok path{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s .35s var(--ease)}
.ticket.is-done .book__ok path{stroke-dashoffset:0}
.book__ok p{margin:0;color:var(--muted)}.book__ok b{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--ink)}

/* ===== 6. Плашка ===== */
.band{padding:clamp(64px,7vw,104px) 0;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;width:560px;height:560px;left:50%;top:-280px;margin-left:-280px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(120,165,185,.28),transparent);animation:breathe 9s ease-in-out infinite alternate}
@keyframes breathe{to{transform:translateY(60px) scale(1.15)}}
.band__in{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center}
.band__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,1.6rem + 4.4vw,5.6rem);line-height:.95;margin:0 0 18px;letter-spacing:-.025em}
.band__lead{margin:0 0 26px;color:var(--on-night-2);max-width:34ch;font-size:17px}
.foot{padding:26px 0 calc(100px + env(safe-area-inset-bottom));border-top:1px solid var(--line-night)}
@media(min-width:900px){.foot{padding-bottom:26px}}
.foot__in{display:flex;flex-wrap:wrap;gap:8px 30px;justify-content:space-between;font-size:14px;color:var(--on-night-2)}
.foot p{margin:0}.foot__demo{opacity:.7;font-size:12px}

/* ===== Нижняя панель (телефон) ===== */
.mbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;display:flex;gap:8px;padding:6px;border-radius:100px;
  background:rgba(246,248,248,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 14px 34px -12px rgba(0,0,0,.35);
  opacity:0;transform:translateY(130%);transition:opacity .4s var(--ease),transform .6s var(--out)}
.mbar.is-on{opacity:1;transform:none}
.mbar .pill{height:48px}.mbar .pill--dark{flex:1;font-size:14px}.mbar .pill--tg{width:48px;padding:0}
@media(min-width:900px){.mbar{display:none}}

/* ===== Появление ===== */
.rise{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform 1s var(--out)}
.rise.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rise,.split .ln>span{opacity:1!important;transform:none!important}
}

/* ===== Две колонки: липкая левая + контент ===== */
.split2{display:grid;gap:34px}
@media(min-width:960px){.split2{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:80px;align-items:start}
  .split2__side{position:sticky;top:calc(var(--hdr) + 40px)}}
.split2__side .sec-lead{margin-top:18px}
@media(min-width:960px){.split2__side .h2,.faq__side .h2{font-size:clamp(2.6rem,1rem + 2.7vw,3.9rem);white-space:nowrap}}
.bignum{display:none;align-items:baseline;gap:14px;margin-top:clamp(30px,5vw,70px);line-height:.8}
@media(min-width:960px){.bignum{display:flex}}
.bignum--count{display:flex}
.bignum__n{font-family:var(--serif);font-weight:300;font-size:clamp(5.5rem,3rem + 9vw,11rem);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--accent-night);
  display:inline-block;font-variant-numeric:tabular-nums}
.bignum__n.swap{animation:numIn .7s var(--out)}
@keyframes numIn{from{opacity:0;transform:translateY(30%);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.bignum__of{font-size:15px;color:var(--on-night-2);letter-spacing:.06em}
.bignum__cap{margin:14px 0 0;color:var(--on-night);font-size:15px;min-height:1.4em}
@media(max-width:959px){.services .bignum__cap{display:none}}
.care__list{grid-template-columns:1fr!important}

/* ===== Вопросы: огромный знак «?» ===== */
.faq{position:relative;overflow:hidden}
.faq__q{position:absolute;right:3vw;top:50%;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(26rem,60vw,52rem);line-height:.7;
  color:rgba(20,22,23,.035);-webkit-text-stroke:1.5px rgba(20,22,23,.16);pointer-events:none;user-select:none;
  transform:translate3d(0,calc(-50% + var(--qy,0px)),0) rotate(var(--qr,8deg));transition:transform 1s var(--out)}
@media(max-width:959px){.faq__q{right:-14vw;top:30%;font-size:26rem}}
.faq__grid{position:relative}
.faq__side .pill{margin-top:22px}
.faq__side .sec-lead{max-width:30ch}
@media(min-width:960px){.faq__side{position:sticky;top:calc(var(--hdr) + 40px)}}

/* ===== Логотип, язык ===== */
.logo{align-items:center}
.logo__mark{width:34px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:none;margin-right:2px;transition:transform .6s var(--out)}
@media(hover:hover){.logo:hover .logo__mark{transform:rotate(-8deg)}}
.hdr__end{display:flex;align-items:center;gap:8px}
.lang{height:40px;min-width:44px;padding:0 12px;border-radius:100px;font-size:13px;font-weight:600;letter-spacing:.06em;opacity:.8;transition:opacity .2s,background-color .3s}
.lang:hover{opacity:1;background:rgba(127,127,127,.12)}
@media(max-width:400px){.hdr .pill--sm{padding:0 14px}}

/* ===== Заглушка, пока грузится 3D ===== */
.stage__ph{position:absolute;left:50%;top:46%;width:min(46vw,300px);height:min(26vw,170px);transform:translateX(-50%);pointer-events:none;transition:opacity .8s var(--ease)}
.stage__ph i{position:absolute;left:5%;right:5%;bottom:0;height:18%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,28,32,.22),transparent)}
.stage__ph::before{content:"";position:absolute;left:10%;right:10%;top:-38%;height:22%;border-radius:50%;border:2px solid rgba(20,22,23,.18);animation:phPulse 1.6s ease-in-out infinite}
@keyframes phPulse{50%{opacity:.35}}
.gl.is-ready + .stage__ph{opacity:0}
@media(max-width:760px){.stage{height:250vh}}

/* ===== Кнопки-контуры на светлом и тёмном ===== */
.pill--line{border:1px solid currentColor;background:transparent}
@media(hover:hover){.pill--line:hover{background:rgba(20,22,23,.07);border-color:currentColor}
  .tone-dark .pill--line:hover,.hdr.is-dark .pill--line:hover{background:rgba(233,238,240,.1)}}
.pill--line:active{background:rgba(20,22,23,.12)}
.tone-dark .pill--line:active{background:rgba(233,238,240,.16)}
.contacts__btns .pill--line,.faq__side .pill--line{color:var(--ink)}

/* ===== Футер ===== */
.foot__brand{display:flex;align-items:center;gap:8px}
.foot__brand .logo__mark{width:28px;height:14px}
.foot__links{display:flex;gap:18px}
.foot__links a{color:var(--on-night);opacity:.75;transition:opacity .2s}.foot__links a:hover{opacity:1}

/* ===== Окно оправы ===== */
.sheet{padding:0;border:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--ink);overflow:hidden}
.sheet::backdrop{background:rgba(10,12,13,0);transition:background-color .35s var(--ease)}
.sheet.is-open::backdrop{background:rgba(10,12,13,.55)}
.sheet__in{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--paper);border-radius:28px 28px 0 0;padding:14px 20px calc(24px + env(safe-area-inset-bottom));
  transform:translateY(100%);transition:transform .5s var(--out)}
.sheet.is-open .sheet__in{transform:none}
@media(min-width:860px){
  .sheet__in{left:50%;top:50%;bottom:auto;width:min(920px,92vw);border-radius:28px;display:grid;grid-template-columns:1.1fr 1fr;gap:30px;padding:26px;
    transform:translate(-50%,-46%) scale(.97);opacity:0;transition:transform .5s var(--out),opacity .35s var(--ease)}
  .sheet.is-open .sheet__in{transform:translate(-50%,-50%);opacity:1}}
.sheet__x{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(20,22,23,.06);z-index:2}
.sheet__x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sheet__img{border-radius:22px;background:radial-gradient(80% 60% at 50% 40%,#2a3033 0%,var(--night) 75%);aspect-ratio:1/1;display:grid;place-items:center}
@media(max-width:859px){.sheet__img{aspect-ratio:16/10;margin-top:40px}}
.sheet__img img{width:92%;height:auto;filter:drop-shadow(0 26px 22px rgba(0,0,0,.45))}
.sheet.is-open .sheet__img img{animation:sheetImg .9s var(--out)}
@keyframes sheetImg{from{transform:translateY(16px) rotate(-4deg) scale(.94);opacity:0}to{transform:none;opacity:1}}
.sheet__body{display:flex;flex-direction:column;padding:16px 4px 0}
@media(min-width:860px){.sheet__body{padding:30px 10px 6px 0;justify-content:center}}
.sheet__type{margin:0;font-size:13px;color:var(--accent);font-weight:500}
.sheet__name{margin:4px 0 0;font-weight:500;font-size:clamp(1.9rem,1.5rem + 1.4vw,2.6rem);letter-spacing:-.04em;line-height:1}
.sheet__name em{font-family:var(--serif);font-weight:400;color:var(--accent)}
.sheet__mat{margin:8px 0 0;color:var(--muted)}
.sheet__specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 0;border-top:1px solid var(--line)}
.sheet__specs div{padding:12px 8px 12px 0}
.sheet__specs div+div{padding-left:12px;border-left:1px solid var(--line)}
.sheet__specs dt{font-size:12px;color:var(--muted)}
.sheet__specs dd{margin:4px 0 0;font-weight:500;font-variant-numeric:tabular-nums}
.sheet__specs .dots i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.sheet__price{margin:18px 0;font-size:24px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.sheet__note{margin:12px 0 0;font-size:13px;color:var(--muted);text-align:center}
.ticket__note.is-fit{color:var(--accent);font-weight:500}

/* стрелки витрины по бокам */
.rail-wrap{position:relative}
.rail-wrap .arrow{position:absolute;z-index:3;top:calc(20px + (min(80vw,380px) - 28px) / 2 - 26px)}
.arrow--prev{left:max(10px,calc((100vw - var(--wrap)) / 2 + 14px))}
.arrow--next{right:max(10px,calc((100vw - var(--wrap)) / 2 + 14px))}
@media(max-width:600px){.rail-wrap .arrow{width:44px;height:44px}}
.rail__bar .rail__track{max-width:none}

/* маленькие «?» вокруг блока вопросов */
.faq__qs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.faq__qs i{position:absolute;font-family:var(--serif);font-style:italic;font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1.2px rgba(44,106,125,.28);
  animation:qFloat 9s ease-in-out infinite alternate}
.faq__qs i:nth-child(1){left:4%;top:6%;font-size:110px;transform:rotate(-14deg)}
.faq__qs i:nth-child(2){left:40%;top:3%;font-size:64px;animation-delay:-3s;transform:rotate(10deg)}
.faq__qs i:nth-child(3){left:7%;bottom:6%;font-size:84px;animation-delay:-5s;transform:rotate(8deg)}
.faq__qs i:nth-child(4){left:52%;bottom:2%;font-size:56px;animation-delay:-2s;transform:rotate(-8deg)}
.faq__qs i:nth-child(5){left:34%;top:52%;font-size:46px;animation-delay:-7s;transform:rotate(16deg)}
@keyframes qFloat{from{translate:0 -8px}to{translate:0 10px}}
@media(max-width:959px){.faq__qs i:nth-child(1){left:auto;right:6%;top:2%;font-size:80px}.faq__qs i:nth-child(2){left:58%;top:12%}.faq__qs i:nth-child(5){display:none}}
.faq__q{right:-1vw!important;top:42%!important}
@media(max-width:959px){.faq__q{right:-16vw!important;top:30%!important}}

/* ===== Карта Яндекса ===== */
.map{background:#dfe6e9}
.map__frame{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(1.05) brightness(1.03);transition:filter .6s var(--ease)}
.map.is-live .map__frame{filter:none}
.map__cover{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:18px;background:linear-gradient(180deg,transparent 65%,rgba(20,22,23,.18));transition:opacity .4s var(--ease)}
.map__cover span{background:var(--paper);color:var(--ink);font-size:13px;font-weight:500;padding:9px 16px;border-radius:100px;box-shadow:0 10px 24px -12px rgba(0,0,0,.4)}
.map.is-live .map__cover{opacity:0;pointer-events:none}

/* ===== Значки геолокации на фоне контактов ===== */
.contacts{position:relative;overflow:hidden}
.contacts .wrap{position:relative}
.pins{position:absolute;inset:0;pointer-events:none}
.pins svg{position:absolute;width:44px;height:44px;fill:none;stroke:rgba(44,106,125,.3);stroke-width:1;stroke-linecap:round;stroke-linejoin:round;animation:qFloat 8s ease-in-out infinite alternate}
.pins svg:nth-child(1){left:3%;top:7%;width:70px;height:70px;rotate:-10deg}
.pins svg:nth-child(2){left:44%;top:5%;width:40px;height:40px;animation-delay:-3s;rotate:8deg}
.pins svg:nth-child(3){left:6%;bottom:6%;width:54px;height:54px;animation-delay:-5s;rotate:6deg}
.pins svg:nth-child(4){left:48%;bottom:4%;width:34px;height:34px;animation-delay:-2s;rotate:-8deg}
.pins svg:nth-child(5){right:3%;top:4%;width:46px;height:46px;animation-delay:-6s;rotate:12deg}
.pins .pins__big{left:auto;right:-6vw;bottom:-14%;width:min(52vw,560px);height:min(52vw,560px);stroke:rgba(20,22,23,.08);stroke-width:.5;animation-duration:12s}
@media(max-width:959px){.pins svg:nth-child(2){left:70%;top:3%}.pins svg:nth-child(4){display:none}.pins .pins__big{right:-30vw;bottom:auto;top:8%;width:90vw;height:90vw}}

/* ===== Единая «коробка» 1240px для всех блоков, включая первый экран ===== */
.stage__ui{max-width:var(--wrap);margin:0 auto}

/* ===== Маленькие телефоны (320–380px) ===== */
@media(max-width:380px){
  .logo small{display:none}
  .lang{min-width:36px;padding:0 8px}
  .hdr .pill--sm{padding:0 12px;font-size:13px;height:36px}
  .hdr__in{gap:10px}
  .stage__ui{grid-template-columns:1fr}
  .swatches{justify-self:start}
  .sw{width:26px;height:26px}
}

/* Первый экран тоже в «коробке»: 3D-сцена не шире 1600px, слова начинаются от края коробки */
.gl{left:50%;right:auto;width:min(100%,1600px);transform:translateX(-50%)}
.words__track{padding-left:max(5vw,calc((100vw - var(--wrap)) / 2 + 20px))}
@media(min-width:768px){.words__track{padding-left:max(5vw,calc((100vw - var(--wrap)) / 2 + 48px))}}
.leaves{right:max(-14%,calc((100vw - 1600px) / 2 - 8%))}

/* карта: нарисованная подложка видна, пока не загрузилась настоящая (и там, где сторонние карты запрещены) */
.map__art{position:absolute;inset:0;width:100%;height:100%}
.map__frame{opacity:0;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.map__frame.is-loaded{opacity:1}