/*
  Макет 10: слайды. Девять экранов, каждый про одну мысль, цвет фона меняется от слайда к слайду.
  Анимации: scroll-snap, каскадное появление, счётчик 500 → 0, гармошка из фото, бегущая строка марок,
  прорисовка линии шагов, эффект наезда на главном фото, полоска прогресса.
*/
:root {
  --sand: #f5ebd6;
  --tomato: #ea5a3c;
  --teal: #0f5257;
  --butter: #f7c948;
  --ink: #191612;
  --font: "Geologica", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1180px;
}
@media (min-width: 1500px) { html { font-size: 112.5%; } :root { --wrap: 1300px; } }
@media (min-width: 1900px) { html { font-size: 125%; } :root { --wrap: 1460px; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.snap { scroll-snap-type: y proximity; }
body { margin: 0; font: 400 1.0625rem/1.55 var(--font); color: var(--ink); background: var(--sand); -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h1 { font-size: clamp(2.3rem, 4.8vw, 4.6rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); }
h3 { font-size: 1.3rem; }
p, dl, dd, dt, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.btn { display: inline-block; padding: 16px 30px; border: 0; border-radius: 999px; background: var(--ink); color: var(--sand); font: 600 1.05rem var(--font); cursor: pointer; text-decoration: none; transition: transform .2s; }
.btn:hover { transform: translateY(-3px); }
.btn--ink { background: var(--ink); color: var(--sand); }

/* Верхние плашки и навигация */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: var(--ink); transform-origin: left; transform: scaleX(0); z-index: 60; }
.bar { position: fixed; top: 16px; left: 20px; right: 20px; z-index: 50; display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; }
.bar a { pointer-events: auto; padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--sand); text-decoration: none; font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.bar a:hover { background: #000; }
.dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-radius: 999px; background: var(--ink); }
.dots a { position: relative; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.dots i { display: block; width: 8px; height: 8px; border-radius: 50%; background: #8d8676; transition: transform .25s, background .25s; }
.dots a.is-on i { background: var(--butter); transform: scale(1.7); }
.dots a::after { content: attr(data-t); position: absolute; right: 34px; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--sand); font-size: 0.82rem; white-space: nowrap; opacity: 0; transform: translateX(6px); pointer-events: none; transition: opacity .2s, transform .2s; }
.dots a:hover::after, .dots a:focus-visible::after { opacity: 1; transform: none; }

/* Слайд */
.slide { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 88px 0 56px; scroll-snap-align: start; overflow: hidden; }
.slide__in { width: min(var(--wrap), 100% - 140px); margin: 0 auto; }
.slide--tomato { background: var(--tomato); }
.slide--teal { background: var(--teal); color: var(--sand); }
.slide--butter { background: var(--butter); }
.slide--sand { background: var(--sand); }
.slide__sub { margin-top: 14px; max-width: 34em; font-size: 1.1rem; opacity: 0.85; }

/* Появление */
.js [data-in] { opacity: 0; transform: translateY(28px); }
.js .slide.is-in [data-in] { opacity: 1; transform: none; transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms); }
.js.still [data-in] { opacity: 1; transform: none; }

/* 1. Главный экран */
.slide--hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding: 0; background: var(--sand); }
.hero__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 100px 40px 60px max(20px, calc((100vw - var(--wrap)) / 2)); }
.hero__lead { margin: 20px 0 22px; font-size: 1.2rem; max-width: 28em; }
.hero__phone { font-size: clamp(2rem, 3.6vw, 3.4rem); font-weight: 800; letter-spacing: -0.04em; text-decoration: none; line-height: 1.1; border-bottom: 6px solid var(--tomato); }
.hero__phone:hover { color: var(--tomato); }
.hero__meta { margin: 18px 0 24px; max-width: 30em; opacity: 0.8; font-size: 0.95rem; }
.hero__photo { position: relative; min-height: 100svh; overflow: hidden; }
.hero__photo picture, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 30% 40%; }
.js .hero__photo img { transform: scale(1.14); }
.js .slide--hero.is-in .hero__photo img { transform: scale(1); transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.hint { position: absolute; left: max(20px, calc((100vw - var(--wrap)) / 2)); bottom: 28px; display: inline-flex; align-items: center; gap: 10px; font-size: 0.9rem; text-decoration: none; }
.hint i { width: 14px; height: 14px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px) rotate(45deg); } }

/* 2. Симптомы */
.syms { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 34px; }
.syms li { padding: 16px 0 14px; border-top: 2px solid var(--ink); }
.syms b { display: block; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.syms span { display: block; margin-top: 4px; font-size: 0.95rem; }

/* 3. Цена */
.free { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: end; }
.free__k { margin-top: 26px; font-size: 1.15rem; font-weight: 600; }
.free__v { display: flex; align-items: baseline; gap: 0.04em; font-size: clamp(6rem, 19vw, 17rem); line-height: 0.85; font-weight: 800; letter-spacing: -0.07em; color: var(--butter); margin: 6px 0 12px; font-variant-numeric: tabular-nums; }
.free__v small { font-size: 0.6em; font-weight: 800; }
.free__t { font-size: 1.3rem; max-width: 20em; }
.free__r li { padding: 18px 0; border-top: 2px solid rgba(245, 235, 214, 0.6); }
.free__r b { display: block; font-size: 2.1rem; letter-spacing: -0.04em; line-height: 1.1; }
.free__r span { display: block; margin-top: 4px; opacity: 0.9; }

/* 4. Прайс */
.pgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 30px; }
.pg h3 { font-size: 1.6rem; }
.pg p { margin: 3px 0 10px; font-size: 0.88rem; opacity: 0.75; }
.pg li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-top: 1.5px solid var(--ink); font-size: 0.95rem; }
.pg em { font-style: normal; font-weight: 800; white-space: nowrap; }

/* 5. Шаги */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 64px; }
.steps::before { content: ""; position: absolute; top: 12px; left: 0; right: 0; height: 4px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.slide.is-in .steps::before, .js.still .steps::before { transform: scaleX(1); transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) .2s; }
html:not(.js) .steps::before { transform: none; }
.steps li { position: relative; padding-top: 52px; }
.dotp { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); border: 6px solid var(--butter); box-shadow: 0 0 0 4px var(--ink); }
.steps b { display: block; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.035em; margin-bottom: 6px; }
.steps span { font-size: 1rem; }
.steps__end { margin-top: 44px; padding: 16px 22px; border: 3px dashed var(--ink); max-width: 36em; font-weight: 600; }

/* 6. Про меня */
.about { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.about__photo img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 40% 20%; border-radius: 0 120px 0 0; }
.about__text h2 { margin-bottom: 22px; }
.about__lede { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 16px; }
.about__text p + p { margin-top: 12px; }
.about__text p:not(.about__lede) { max-width: 38em; }

/* 7. Гармошка */
.acc { display: flex; gap: 10px; height: min(54svh, 470px); margin-top: 30px; }
.acc__i { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; cursor: pointer; transition: flex .7s cubic-bezier(.2, .7, .2, 1); outline-offset: -3px; }
.acc__i.is-open { flex: 5 1 0; cursor: default; }
.acc__i picture, .acc__i img { position: absolute; inset: 0; width: 100%; height: 100%; }
.acc__i img { object-fit: cover; filter: saturate(0.7) brightness(0.85); transition: filter .6s; }
.acc__i.is-open img { filter: none; }
.acc__i figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px 18px; background: var(--ink); color: var(--sand); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; }
.acc__i.is-open figcaption { opacity: 1; transform: none; transition-delay: .3s; }
.acc__i b { display: block; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.acc__i span { display: block; margin-top: 2px; font-size: 0.92rem; max-width: 34em; }

/* 8. FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 30px; }
.qa { padding: 14px 0 14px; border-top: 2px solid var(--ink); }
.qa dt { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.02em; }
.qa dd { margin-top: 4px; font-size: 0.93rem; opacity: 0.88; }

/* 9. Финал */
.slide--end { flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 68px 0 20px; }
.marq { background: var(--ink); color: var(--sand); overflow: hidden; white-space: nowrap; padding: 14px 0; margin-top: 0; }
.marq__track { display: inline-flex; animation: marq 36s linear infinite; }
.marq:hover .marq__track { animation-play-state: paused; }
.marq__row { display: inline-flex; gap: 3rem; padding-right: 3rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
@keyframes marq { to { transform: translateX(-50%); } }
.end { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 60px 0 30px; }
.end__l > p { margin-top: 14px; max-width: 28em; }
.end__phone { display: inline-block; margin: 22px 0 6px; font-size: clamp(2rem, 4.2vw, 3.8rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; text-decoration: none; border-bottom: 6px solid var(--ink); }
.messengers { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; }
.msg { font-weight: 700; }
.form { display: grid; gap: 18px; }
.form label { display: grid; gap: 4px; font-size: 0.9rem; font-weight: 600; }
.form input, .form textarea { font: 400 1.1rem var(--font); color: var(--ink); background: transparent; border: 0; border-bottom: 3px solid var(--ink); border-radius: 0; padding: 8px 0; resize: vertical; }
.form input::placeholder, .form textarea::placeholder { color: rgba(25, 22, 18, 0.55); }
.form input:focus, .form textarea:focus { outline: none; border-bottom-color: var(--sand); }
.form input.is-error { border-bottom-color: #fff; }
.form .btn { justify-self: start; }
.form__note { font-size: 0.8rem; max-width: 30em; opacity: 0.85; }
.form__ok { font-weight: 800; }
.form__ok.is-error { color: #c0392b; }
.fine { width: min(var(--wrap), 100% - 140px); margin: 0 auto; font-size: 0.82rem; opacity: 0.8; }

/* Модальное окно */
.modal { width: min(440px, calc(100% - 32px)); padding: 32px 28px 24px; border: 0; border-radius: 28px; background: var(--sand); color: var(--ink); }
.modal::backdrop { background: rgba(25, 22, 18, 0.7); }
.modal[open] { animation: pop .25s cubic-bezier(.2, .7, .2, 1); }
.modal h2 { font-size: 1.9rem; padding-right: 30px; margin-bottom: 18px; }
.modal__x { position: absolute; top: 12px; right: 16px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--ink); font: 400 2rem/1 var(--font); cursor: pointer; }
.modal .form input { border-bottom-color: var(--ink); }
.modal .form .btn { justify-self: stretch; width: 100%; text-align: center; }
.modal__alt { margin-top: 16px; padding-top: 12px; border-top: 2px solid var(--ink); font-size: 0.93rem; }
.modal__alt a { font-weight: 800; white-space: nowrap; }
body.modal-open { overflow: hidden; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

.callbar { display: none; }

@media (max-width: 1180px) {
  .pgs { gap: 22px; }
  .about { gap: 40px; }
}
@media (max-width: 979px) {
  html.snap { scroll-snap-type: none; }
  .slide { min-height: 0; padding: 84px 0 56px; }
  .slide__in, .fine { width: min(var(--wrap), 100% - 40px); }
  .dots, .hint { display: none; }
  .slide--hero { grid-template-columns: 1fr; }
  .hero__text { padding: 90px 20px 40px; order: 2; }
  .hero__photo { min-height: 0; height: 52svh; order: 1; margin-top: 0; }
  .syms, .faq, .pgs, .end, .about, .free { grid-template-columns: 1fr; gap: 28px 0; }
  .free { gap: 28px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 36px 24px; margin-top: 52px; }
  .acc { flex-direction: column; height: auto; }
  .acc__i { flex: none; height: 84px; transition: height .6s cubic-bezier(.2, .7, .2, 1); }
  .acc__i.is-open { height: 320px; flex: none; }
  .about__photo { max-width: 360px; }
  .end { padding: 44px 0 20px; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .bar { top: 10px; left: 12px; right: 12px; }
  .bar a { padding: 8px 14px; font-size: 0.9rem; }
  .steps { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .steps li { padding: 0 0 0 44px; }
  .dotp { top: 2px; }
  .btn { width: 100%; text-align: center; }
  .form .btn { justify-self: stretch; }
  .hero__photo { height: 44svh; }
  .marq__row { font-size: 1.15rem; }
  .fine { padding-bottom: 76px; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; border-top: 3px solid var(--ink); padding-bottom: env(safe-area-inset-bottom); background: var(--sand); }
  .callbar a { text-align: center; padding: 15px 8px; font-weight: 700; text-decoration: none; }
  .callbar__call { background: var(--ink); color: var(--sand); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hint i, .marq__track, .modal[open] { animation: none; }
  .js [data-in] { opacity: 1; transform: none; }
  .js .hero__photo img { transform: none; }
}