/* --- Inter: свой шрифт сайта. Один вариативный файл на веса 100-900. --- */
/* Кириллица и латиница — подмножества Google Fonts; ₽ вырезан отдельно,   */
/* потому что в диапазоны Google он не входит (иначе подставлялся бы       */
/* системный шрифт устройства — ровно то, от чего мы уходим).              */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-latin.woff2) format('woff2');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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(assets/fonts/inter-ruble.woff2) format('woff2');unicode-range:U+20BD}
:root{
  --bg:#171514;
  --bg-soft:#201c19;
  --cream:#f5efe7;
  --cream-soft:#e7dbcf;
  --gold:#d9a46e;
  --gold-soft:#b98558;
  --brown:#4a2e23;
  --ink:#1e1a18;
  --muted:#a99d92;
  --line:rgba(217,164,110,.55);
  --max:1420px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;font-family:'Inter',Onest,Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--cream);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(calc(100% - 80px),var(--max));margin-inline:auto}
.section{position:relative;overflow:hidden}

.topbar{position:absolute;z-index:100;top:18px;left:50%;transform:translateX(-50%);width:min(calc(100% - 48px),var(--max));display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference;font-size:11.5px;font-weight:850;letter-spacing:.14em;text-transform:uppercase}
.brand{display:flex;align-items:center;gap:9px}.brand-line{display:inline-block;width:28px;height:2px;background:var(--gold)}
.topnav{display:flex;gap:28px}.topnav a{opacity:.74;transition:.2s opacity}.topnav a:hover{opacity:1}

.hero{min-height:660px;height:100svh;max-height:900px;background:#141312;display:flex;flex-direction:column;justify-content:space-between}
.hero-media{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
@supports (height:100lvh){
  .hero-media{bottom:auto;height:100lvh}
}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.hero-media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,14,13,.92) 0%,rgba(15,14,13,.77) 29%,rgba(15,14,13,.2) 58%,rgba(15,14,13,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18))}
.hero-copy{position:relative;z-index:3;padding-top:clamp(96px,13vh,150px)}
.eyebrow,.section-index{font-size:11px;font-weight:850;letter-spacing:.26em;color:var(--gold);margin-bottom:22px;text-transform:uppercase}
.hero h1{margin:0;font-size:clamp(78px,10vw,154px);line-height:.78;letter-spacing:-.075em;font-weight:950;color:#fff;white-space:nowrap}
.hero-kicker{margin:18px 0 12px;font-size:clamp(30px,3.4vw,52px);line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--gold)}
.lead{font-size:clamp(17px,1.45vw,22px);line-height:1.42;color:#e7ddd4;margin:17px 0 22px}
.price-row{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}.price-row strong{font-size:clamp(26px,2.1vw,34px);line-height:1;color:#fff}.price-row span{color:#bfb4aa;font-size:15px}
.cta{display:inline-flex;align-items:center;justify-content:flex-start;gap:18px;padding:18px 26px 18px 30px;border-radius:999px;background:linear-gradient(100deg,#b97847,#dda874);min-width:310px;font-weight:900;letter-spacing:.03em;color:#171514;box-shadow:0 12px 26px -10px rgba(0,0,0,.55);transition:.22s transform,.22s filter}.cta:hover{transform:translateY(-2px);filter:brightness(1.05)}.cta span{font-size:22px}
.telegram-note{margin:13px 0 0 0;font-size:12.5px;color:#d9cec4;letter-spacing:.07em}


.inside{background:#d3b08f;color:var(--ink);padding:100px 0 90px;min-height:860px}
.inside:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),transparent 38%,rgba(75,46,35,.08));pointer-events:none}
.inside-grid{position:relative;z-index:2;display:grid;grid-template-columns:.92fr 1.08fr;gap:6vw;align-items:center}
.section-index{color:#4e352b}.section-index span{display:inline-block;width:64px;height:1px;background:currentColor;vertical-align:middle;margin:0 15px 3px}
.inside h2,.coach h2{font-size:clamp(56px,6vw,92px);line-height:.88;letter-spacing:-.055em;margin:0 0 24px;font-weight:950}
.inside-lead{font-size:20px;line-height:1.45;margin:0 0 28px;max-width:520px}
.skills{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid rgba(30,26,24,.32);border-left:1px solid rgba(30,26,24,.32);max-width:620px}.skill{display:flex;align-items:center;gap:16px;padding:20px;border-right:1px solid rgba(30,26,24,.32);border-bottom:1px solid rgba(30,26,24,.32);font-size:18px;font-weight:780}.skill b{font-size:11px;letter-spacing:.16em;color:#654634}.archive{margin-top:24px;font-size:14px;line-height:1.5;font-weight:760}.archive span{color:#f0dac7;margin:0 7px}
.inside-visual{position:relative;min-height:620px}
.inside-athlete{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;object-position:58% 50%;border-radius:36px;box-shadow:0 24px 65px rgba(64,37,24,.18)}
.inside-visual:after{content:"";position:absolute;z-index:2;inset:0;border-radius:36px;background:linear-gradient(90deg,rgba(22,18,15,.1),rgba(22,18,15,.04) 48%,rgba(22,18,15,.27) 100%);pointer-events:none}
.telegram-phone{position:absolute;z-index:4;right:-7%;bottom:-7%;width:min(330px,47%);filter:drop-shadow(0 24px 32px rgba(37,22,13,.28))}
.phone-caption{position:absolute;z-index:5;right:4%;top:9%;max-width:200px;font-size:12px;line-height:1.35;font-weight:850;letter-spacing:.03em;color:#f8eee4;text-align:right}

.coach{background:#2b1d18;padding:95px 0 85px;min-height:760px}
.coach-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:6vw;align-items:center}
.coach-media{height:620px;border-radius:38px;overflow:hidden;position:relative;box-shadow:0 28px 70px rgba(0,0,0,.24)}
.coach-media img{width:100%;height:100%;object-fit:cover;object-position:center 52%}
.coach-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.15));pointer-events:none}
.section-index.light{color:var(--gold)}
.coach h2{color:#fff}.coach-copy>p{font-size:clamp(18px,1.55vw,23px);line-height:1.5;color:#ddcec3;max-width:620px}.coach blockquote{border-left:2px solid var(--gold);margin:34px 0 0;padding:8px 0 8px 20px;color:#c8b3a3;font-size:16px;line-height:1.5}

.final{min-height:760px;background:#151312;display:flex;align-items:center}
.final-media{position:absolute;inset:0}
.final-media img{width:100%;height:100%;object-fit:cover;object-position:center 50%}
.final-media-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,16,15,.95) 0%,rgba(18,16,15,.78) 33%,rgba(18,16,15,.28) 60%,rgba(18,16,15,.08) 100%),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.25))}
.final-copy{position:relative;z-index:3;padding-block:90px;width:min(calc(100% - 80px),var(--max))}
.final-price{font-size:clamp(86px,9vw,140px);font-weight:950;line-height:.8;letter-spacing:-.07em;color:#fff}.final-price small{font-size:.35em;letter-spacing:-.02em;color:var(--gold)}
.per-month{font-size:clamp(28px,3vw,46px);font-weight:900;margin:14px 0 30px;color:#fff}
.final ul{padding:0;margin:0 0 30px;list-style:none;display:grid;gap:10px;font-size:17px;color:#e3d8cf}.final li:before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:#1a1614;margin-right:12px;font-size:12px;font-weight:950}.final .cta{color:#171514}.after-click{font-size:13px;line-height:1.5;color:#d3c7bc;margin:13px 0 0 0}
footer{background:#11100f;color:#9a8d83;padding:26px 7vw;font-size:11px;letter-spacing:.24em;text-align:center}

@media (max-width:980px){
  .shell{width:min(calc(100% - 44px),var(--max))}.topnav{display:none}
  .hero{min-height:900px;height:auto}.hero-media img{object-position:50% 44%}.hero-media-shade{background:linear-gradient(180deg,rgba(14,13,12,.92) 0%,rgba(14,13,12,.72) 22%,rgba(14,13,12,.12) 46%,rgba(14,13,12,.66) 72%,rgba(14,13,12,.94) 100%)}.hero-copy{padding-top:125px}.hero h1{font-size:clamp(40px,13.5vw,112px);white-space:nowrap;line-height:.84}.hero-kicker{font-size:clamp(30px,7vw,49px)}.hero-side-note{display:none}
  .inside{padding:80px 0 70px}.inside-grid,.coach-grid{grid-template-columns:1fr;gap:38px}.inside-visual{min-height:650px}.telegram-phone{width:300px;right:-2%;bottom:-5%}.phone-caption{right:3%;top:8%}
  .coach{padding:80px 0}.coach-media{height:560px;order:2}.coach-copy{order:1}
  .final{min-height:820px}.final-media img{object-position:52% 46%}.final-media-shade{background:linear-gradient(180deg,rgba(17,15,14,.94) 0%,rgba(17,15,14,.84) 40%,rgba(17,15,14,.42) 74%,rgba(17,15,14,.30) 100%)}.final-copy{padding-top:85px;align-self:flex-start}
}
@media (max-width:640px){
  .shell{width:calc(100% - 32px)}.topbar{top:14px;width:calc(100% - 32px);font-size:11.5px;mix-blend-mode:normal;color:#efe4d8}.hero{min-height:0;height:96svh;max-height:none}.hero-copy{padding-top:40px}.eyebrow,.section-index{font-size:11px;margin-bottom:14px}.hero h1{font-size:clamp(34px,13.5vw,82px)}.hero-kicker{font-size:29px;margin-top:12px}.lead{font-size:16px;margin:13px 0 16px}.price-row strong{font-size:26px}.price-row span{font-size:13px}.cta{min-width:230px;justify-content:center;padding:11px 30px;gap:14px;font-size:15px}
  .inside{padding:62px 0 58px}.section-index span{width:42px;margin:0 9px 3px}.inside h2,.coach h2{font-size:47px}.inside-lead{font-size:17px}.skill{padding:14px 10px;font-size:14px;gap:9px}.archive{font-size:12px}.inside-visual{min-height:500px}.inside-athlete{border-radius:24px;object-position:58% 50%}.inside-visual:after{border-radius:24px}.telegram-phone{width:206px;right:-1%;bottom:-5%}.phone-caption{font-size:12px;max-width:168px;right:3%;top:3%}
  .coach{padding:62px 0 44px}.coach-media{height:430px;border-radius:24px}.coach-copy>p{font-size:17px}.coach blockquote{font-size:14px;margin-top:26px}
  .final{min-height:720px}.final-media img{object-position:50% 46%}.final-copy{padding-top:68px}.final-price{font-size:72px}.per-month{font-size:30px}.final ul{font-size:15px}.after-click{font-size:12.5px;max-width:290px}
}


/* ---- отдельная секция с настоящим постом ---- */
/* ===== третий экран: пост во всю ширину колонки =====
   Мокап телефона съедал 62 px рамкой и ещё ~80 px пустотой по бокам,
   текст поста рендерился в 7 px при пороге читаемости 11.
   Сам пост — единственное настоящее доказательство продукта,
   поэтому он идёт карточкой во всю ширину, а объяснений над ним нет. */
.proof{background:#1d1917;padding:clamp(48px,9vw,110px) 0 clamp(34px,7vw,90px)}
.proof-post{margin:0}
.proof-post img{display:block;width:100%;height:auto;border-radius:16px;
  box-shadow:0 22px 44px rgba(0,0,0,.5)}


/* низ героя: цена и кнопка прижаты к нижней кромке экрана */
.hero-bottom{position:relative;z-index:3;padding-bottom:clamp(30px,5vh,64px)}


/* низ героя: цена и кнопка прижаты к нижней кромке экрана */
.hero-bottom{position:relative;z-index:3;padding-bottom:clamp(30px,5vh,60px)}
@media (max-width:640px){ .hero-bottom{padding-bottom:20px} }


/* низкие окна: ужимаем герой, чтобы цена и кнопка оставались на первом экране */
@media (min-width:981px) and (max-height:760px){
  .hero{min-height:0;max-height:none}
  .hero-copy{padding-top:78px}
  .hero h1{font-size:clamp(56px,7vw,96px)}
  .hero-kicker{font-size:clamp(24px,2.6vw,34px);margin:12px 0 8px}
  .lead{margin:12px 0 14px}
}


/* ===== экран «что внутри» — пересобран ===== */
.inside{background:#d3b08f;color:var(--ink);padding:clamp(52px,9vw,90px) 0 0;min-height:0}
.inside:before{display:none}
.inside-copy h2{
  font-size:clamp(34px,10.2vw,92px);
  white-space:nowrap;
  line-height:1.0;   /* как было — этот вариант не ломает строки с «Д» */
  letter-spacing:-.055em;
  font-weight:950;margin:0 0 20px;text-transform:uppercase;
}
.inside-lead{font-size:clamp(15px,4vw,18px);line-height:1.45;margin:0 0 clamp(24px,6vw,34px);
  color:rgba(30,26,24,.78);max-width:24em}

/* навыки — тёмные карточки того же языка, что и весь сайт */
.skills{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:0;max-width:none}
.skill{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  background:#2b1d18;color:#f3e9df;border:0;border-radius:16px;
  padding:16px 16px 18px;
}
.skill b{font-size:11px;letter-spacing:.16em;color:var(--gold);font-weight:800}
.skill span{font-size:clamp(15px,4vw,18px);font-weight:700;letter-spacing:-.01em}

/* архив и розыгрыш — отдельные факты, а не хвост таблицы */
/* текст живёт на самой фотографии, а не отдельным этажом над ней */
.inside-photo{position:relative}
.on-photo{position:absolute;left:0;right:0;bottom:0;padding:clamp(60px,16vw,90px) 16px clamp(26px,6vw,36px);
  background:linear-gradient(180deg,rgba(20,15,12,0),rgba(20,15,12,.62) 42%,rgba(20,15,12,.9))}
.extra{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 0;border-top:1px solid rgba(243,233,223,.22);color:#f3e9df}
.extra:first-child{border-top:0}
.extra span{font-size:clamp(15px,4.1vw,18px);font-weight:800;letter-spacing:-.01em}
.extra b{font-size:13px;font-weight:600;color:rgba(243,233,223,.66);text-align:right}

/* фотография во всю ширину, встык с секцией — больше не «вставленное окно» */
.inside-photo{margin-top:clamp(28px,7vw,44px);width:100%;line-height:0}
.inside-photo img{display:block;width:100%;height:clamp(420px,108vw,620px);object-fit:cover;object-position:52% 56%}

@media (min-width:900px){
  .inside{padding-bottom:0}
  .inside-copy{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,80px);align-items:start}
  .inside-copy h2{grid-column:1;font-size:clamp(44px,4.6vw,72px)}
  .inside-lead{grid-column:1}
  .skills{grid-column:2;grid-row:1 / span 2}
  .extras{grid-column:2}
  .inside-photo img{height:clamp(420px,38vw,620px);object-position:52% 58%}
}


/* ===== один заголовочный стиль на все экраны ===== */
.coach h2, .proof-title{
  font-size:clamp(30px,9vw,80px);
  white-space:nowrap;
  line-height:1.0;
  letter-spacing:-.055em;
  font-weight:950;
  text-transform:uppercase;
  margin:0 0 20px;
}


/* нарисованная стрелка в одной оптике со шрифтом кнопки */
.cta .ico{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;flex:none}
.cta .ico svg{width:100%;height:100%;transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.cta:hover .ico svg{transform:translateX(3px)}

/* главное действие занимает всю ширину колонки, а не половину строки */
@media (max-width:640px){
  .cta{width:100%;min-width:0;justify-content:center;gap:12px}
}


/* квалификатор аудитории: ушёл из-под заголовка вниз, к цене */
.qual{margin:10px 0 0;font-size:13.5px;font-weight:600;letter-spacing:.02em;color:#d9cec4}
@media (max-width:640px){ .qual{margin:9px 0 0;font-size:13px} }


/* ===== второй экран: без боксов, с механикой уровней ===== */
.skills-line{
  margin:clamp(26px,7vw,40px) 0 0;
  font-size:clamp(21px,5.8vw,34px);font-weight:900;letter-spacing:-.03em;line-height:1.22;
  color:var(--ink);
}
.skills-line i{font-style:normal;color:#a9704a;padding:0 .1em}

.levels{margin-top:clamp(26px,7vw,38px);border-top:1px solid rgba(30,26,24,.28)}
.levels__row{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:clamp(13px,3.4vw,17px) 0;border-bottom:1px solid rgba(30,26,24,.18);
}
.levels__row b{font-size:clamp(15px,4.1vw,19px);font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.levels__row span{font-size:clamp(13px,3.5vw,15.5px);color:rgba(30,26,24,.66);text-align:right;line-height:1.35}
.levels__note{
  margin:clamp(14px,3.6vw,18px) 0 0;font-size:clamp(13.5px,3.6vw,16px);line-height:1.45;
  font-weight:700;color:#7a4f33;
}
.archive-line{
  margin:clamp(22px,6vw,32px) 0 0;padding-top:clamp(16px,4vw,20px);
  border-top:1px solid rgba(30,26,24,.28);
  font-size:clamp(13.5px,3.6vw,16px);line-height:1.45;color:rgba(30,26,24,.72);
}
/* фотография — чистая, без надписей поверх */
.on-photo{display:none}


/* ===== две версии задания — на языке самой страницы ===== */
.two-levels{margin-top:clamp(30px,8vw,48px)}
.two-levels__title{
  margin:0;font-weight:950;text-transform:uppercase;letter-spacing:-.045em;line-height:1.0;
  font-size:clamp(26px,7.4vw,54px);color:var(--ink);white-space:nowrap;
}
.two-levels__pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:clamp(16px,4vw,22px)}
.two-levels__pills span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:clamp(52px,13vw,62px);padding:10px 12px;border-radius:999px;
  background:#2b1d18;color:#f3e9df;
  font-size:clamp(14px,3.7vw,17px);font-weight:800;letter-spacing:-.01em;
}
.two-levels__pills span:last-child{background:transparent;color:#2b1d18;box-shadow:inset 0 0 0 2px rgba(43,29,24,.32)}

.archive-strong{
  margin:clamp(20px,5vw,28px) 0 0;
  font-size:clamp(17px,4.6vw,24px);font-weight:800;letter-spacing:-.02em;color:#7a4f33;
}

/* старые волосяные строки больше не используются */
.levels,.levels__row,.levels__note,.archive-line{display:none}


/* ===== второй экран: три типографических уровня вместо шести ===== */
/* 1 — заголовок секции (уже задан) */
/* 2 — утверждения: навыки и «две версии» — один размер, вес и регистр */
.skills-line,
.two-levels__title{
  font-size:clamp(22px,6vw,38px);
  font-weight:900;
  letter-spacing:-.035em;
  line-height:1.14;
  text-transform:uppercase;
  color:var(--ink);
  white-space:normal;
}
.two-levels__title{margin:0}
.skills-line i{padding:0 .12em;color:#a9704a}
/* 3 — пояснения: лид и архив — один размер, вес и цвет */
.inside-lead,
.archive-strong{
  font-size:clamp(15px,4vw,18px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:0;
  color:rgba(30,26,24,.7);
  margin-top:clamp(14px,3.6vw,20px);
}
/* единственный компонент на экране */
.two-levels__pills span{font-weight:700}

/* ===== фотография поднимается под текст, без прямой границы ===== */
.inside{position:relative;overflow:hidden;padding-bottom:clamp(300px,78vw,520px)}
.inside-photo{position:absolute;left:0;right:0;bottom:0;top:auto;z-index:0;margin:0}
.inside-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#d3b08f 0%,rgba(211,176,143,.94) 14%,rgba(211,176,143,.55) 34%,rgba(211,176,143,0) 62%);
}
.inside-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 46%}
.inside-copy{position:relative;z-index:2}


/* ===== стык блока и фотографии: чистый край + перекрытие ===== */
.inside{padding-bottom:0}
.inside-photo{position:relative;left:auto;right:auto;bottom:auto;margin:0;z-index:0}
.inside-photo::after{display:none}          /* никакого растворения в дымку */
.inside-photo img{width:100%;height:clamp(360px,96vw,560px);object-fit:cover;object-position:52% 52%}

/* плашки садятся верхом на кромку кадра */
.two-levels__pills{
  position:relative;z-index:3;
  margin:clamp(22px,6vw,32px) 0 clamp(-30px,-8vw,-42px);
}
.two-levels__pills span{box-shadow:0 10px 24px -12px rgba(20,14,10,.6)}
.two-levels__pills span:last-child{
  background:#d3b08f;color:#2b1d18;
  box-shadow:inset 0 0 0 2px rgba(43,29,24,.34), 0 10px 24px -12px rgba(20,14,10,.6);
}
.inside-copy{padding-bottom:0}


/* ===== второй экран: список фактов, один ритм ===== */
.inside{padding-top:clamp(46px,11vw,84px);padding-bottom:0}
.fact{padding:clamp(18px,4.6vw,26px) 0;border-bottom:1px solid rgba(30,26,24,.2)}
.fact:first-child{padding-top:0}
.fact:last-of-type{border-bottom:0}
.fact h3{
  margin:0;font-size:clamp(20px,5.4vw,34px);font-weight:900;
  letter-spacing:-.035em;line-height:1.14;text-transform:uppercase;color:var(--ink);
}
.fact h3 i{font-style:normal;color:#a9704a;padding:0 .1em}
.fact p{
  margin:clamp(6px,1.6vw,10px) 0 0;font-size:clamp(14px,3.8vw,17px);
  font-weight:500;line-height:1.4;color:rgba(30,26,24,.68);
}
.fact .two-levels__pills{margin:clamp(14px,3.6vw,18px) 0 0}

/* кромка кадра — дуга, а не прямая линия во всю ширину */
.inside-photo{border-radius:clamp(24px,7vw,40px) clamp(24px,7vw,40px) 0 0;overflow:hidden;
  margin-top:clamp(26px,7vw,40px)}
.inside-photo img{height:clamp(340px,92vw,540px)}

.skills-line,.two-levels,.two-levels__title,.archive-strong,.inside-lead{display:none}


/* ===== второй экран: фотография как поверхность ===== */

.inside--A{position:relative;background:#171210;color:#f3e9df;padding:clamp(48px,12vw,90px) 0 clamp(40px,10vw,70px);overflow:hidden}
.inside--A .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% 50%;z-index:0}
.inside--A::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(18,13,11,.95) 0%,rgba(18,13,11,.9) 42%,rgba(18,13,11,.45) 74%,rgba(18,13,11,.25) 100%)}
.inside--A .inside-copy{position:relative;z-index:2}
.inside--A .fact{border-bottom:1px solid rgba(243,233,223,.18);padding:clamp(16px,4.2vw,24px) 0}
.inside--A .fact:first-child{padding-top:0}
.inside--A .fact:last-child{border-bottom:0}
.inside--A .fact h3{color:#fff;font-size:clamp(19px,5.1vw,32px)}
.inside--A .fact h3 i{color:#d9a46e}
.inside--A .fact p{color:rgba(243,233,223,.62)}
.inside--A .two-levels__pills span{background:#d9a46e;color:#1a1512;box-shadow:none}
.inside--A .two-levels__pills span:last-child{background:transparent;color:#f3e9df;box-shadow:inset 0 0 0 2px rgba(243,233,223,.4)}


/* ===== второй экран по схеме референса: панель + нумерованные пункты ===== */
.inside{background:#171210;color:#f3e9df;padding:clamp(26px,6vw,44px) 0 clamp(44px,10vw,80px);overflow:visible}
.inside .bg,.inside::after{display:none}

.panel{
  position:relative;background:#2A211C;border-radius:clamp(20px,5vw,30px);
  padding:clamp(22px,6vw,34px) clamp(20px,5vw,32px) 0;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;
}
.panel__label{
  align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
}
.panel__title{
  margin:clamp(18px,5vw,30px) 0 0;font-size:clamp(38px,11vw,84px);font-weight:950;
  letter-spacing:-.045em;line-height:1;color:#fff;text-transform:uppercase;
}
.panel__lead{
  margin:clamp(10px,2.6vw,14px) 0 0;font-size:clamp(14px,3.7vw,17px);
  color:rgba(243,233,223,.6);max-width:26em;line-height:1.4;
}
.panel__fig{
  width:min(78%,340px);margin:clamp(-6px,-2vw,-14px) 0 0;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.5));
}

.items{list-style:none;margin:clamp(26px,7vw,44px) 0 0;padding:0}
.items li{padding:clamp(20px,5vw,28px) 0;border-bottom:1px solid rgba(243,233,223,.14)}
.items li:last-child{border-bottom:0}
.items h3{
  margin:0;font-size:clamp(17px,4.6vw,26px);font-weight:800;letter-spacing:-.02em;
  line-height:1.2;text-transform:uppercase;color:#fff;
}
.items p{
  margin:clamp(8px,2.4vw,12px) 0 0;font-size:clamp(14.5px,3.9vw,17px);line-height:1.5;
  color:rgba(243,233,223,.6);max-width:44em;
}

.fact,.inside-photo,.two-levels__pills{display:none}


/* кадр внутри панели: тот же студийный свет, что и везде на странице */
.panel{background:#14100e;padding-bottom:0}
.panel__shot{
  position:relative;width:100%;margin-top:clamp(18px,5vw,28px);line-height:0;
}
.panel__shot img{
  width:100%;height:clamp(300px,80vw,470px);object-fit:cover;object-position:52% 44%;
}
/* верх кадра растворяется в цвет панели — фотография не выглядит вклеенной */
.panel__shot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:38%;pointer-events:none;
  background:linear-gradient(180deg,#14100e 0%,rgba(20,16,14,.72) 38%,rgba(20,16,14,0) 100%);
}
.panel__fig{display:none}


/* ===== второй экран: без панели, кадр во всю ширину, без линеек ===== */
.inside{background:#171210;color:#f3e9df;padding:clamp(44px,11vw,84px) 0 clamp(48px,12vw,90px);overflow:hidden}
.inside__title{
  margin:0;font-size:clamp(34px,9.6vw,76px);font-weight:950;letter-spacing:-.05em;
  line-height:1;text-transform:uppercase;color:#fff;white-space:nowrap;
}
.inside__lead{
  margin:clamp(12px,3.2vw,18px) 0 0;font-size:clamp(15px,4vw,19px);line-height:1.4;
  color:var(--gold);max-width:24em;
}
/* кадр без боковых полей */
.inside__shot{width:100%;margin:clamp(26px,7vw,44px) 0 clamp(30px,8vw,50px);line-height:0}
.inside__shot img{width:100%;height:clamp(320px,86vw,520px);object-fit:cover;object-position:52% 44%}

/* пункты: группируются расстоянием, а не заборными линейками */
.items{list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,7vw,42px)}
.items li{padding:0;border:0}
.items h3{
  margin:0;display:flex;gap:clamp(10px,2.6vw,16px);align-items:baseline;
  font-size:clamp(17px,4.6vw,26px);font-weight:800;letter-spacing:-.02em;line-height:1.2;
  text-transform:uppercase;color:#fff;
}
.items h3 b{
  flex:none;font-size:clamp(12px,3.1vw,15px);font-weight:800;letter-spacing:.1em;
  color:var(--gold);transform:translateY(-.15em);
}
.items p{
  margin:clamp(8px,2.2vw,12px) 0 0 calc(clamp(12px,3.1vw,15px) * 2.1);
  font-size:clamp(14.5px,3.9vw,17px);line-height:1.5;color:rgba(243,233,223,.58);max-width:42em;
}
.panel,.panel__shot,.panel__fig{display:none}


/* фон секции подогнан под собственный фон снимка — стыка не видно */
.inside{background:#100D0C}
.inside__shot{position:relative;margin-top:clamp(22px,6vw,36px)}
/* кадр растворяется сверху и снизу, как в первом экране */
.inside__shot::before,.inside__shot::after{
  content:"";position:absolute;left:0;right:0;pointer-events:none;z-index:2;
}
.inside__shot::before{top:0;height:26%;
  background:linear-gradient(180deg,#100D0C 0%,rgba(16,13,12,.72) 40%,rgba(16,13,12,0) 100%)}
.inside__shot::after{bottom:0;height:26%;
  background:linear-gradient(0deg,#100D0C 0%,rgba(16,13,12,.72) 40%,rgba(16,13,12,0) 100%)}
.inside__shot img{position:relative;z-index:1}

/* буквы почти касаются ступней */
.inside__shot{margin-top:clamp(4px,1.4vw,10px)}
.inside__shot::before{height:16%}
.inside__shot img{object-position:52% 30%}

/* верхнее растворение не должно гасить ступни */
.inside__shot::before{height:9%;
  background:linear-gradient(180deg,#100D0C 0%,rgba(16,13,12,.45) 45%,rgba(16,13,12,0) 100%)}


/* ===== второй экран начинается прямо с фотографии, заголовок поверх ===== */
.inside{padding-top:0}
.inside__hero{position:relative;line-height:0;overflow:hidden}
.inside__hero img{width:100%;height:clamp(360px,96vw,580px);object-fit:cover;object-position:52% 30%}
.inside__hero .shell{position:absolute;left:0;right:0;top:clamp(16px,4.6vw,28px);z-index:2;line-height:1}
.inside__hero .inside__title{
  margin:0;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55);
}
/* низ кадра растворяем в фон, чтобы список начинался мягко */
.inside__hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,#100D0C 0%,rgba(16,13,12,.6) 45%,rgba(16,13,12,0) 100%);
}
.items{margin-top:clamp(26px,7vw,42px)}
.inside__shot{display:none}

/* кадр с запасом сверху: под заголовком тёмная стена, а не подсвеченная нога */
.inside__hero img{object-position:52% 6%;height:clamp(400px,106vw,620px)}


/* заголовок третьего экрана — в одной оптике с остальными, кегль подгоняет скрипт */
.proof-title{color:#fff;margin:0 0 clamp(20px,5vw,32px)}


/* ===== экран знакомства: сначала лицо, потом слова =====
   Раньше экран назывался «кто ведёт», но человека на нём не было:
   ни имени, ни первого лица, а заголовок в третий раз пересказывал методику. */
@media (max-width:980px){
  .coach-media{order:1}
  .coach-copy{order:2}
}
.coach-copy .eyebrow{margin-bottom:14px}
.coach-facts{font-size:15px;line-height:1.5;color:#b8a89c;margin:18px 0 0;max-width:34em}
.coach-facts b{color:#e6d9cd;font-weight:800}
@media (max-width:640px){
  .coach-media{height:400px}
  .coach-facts{font-size:14px}
}


/* портрет: кадр обрезан только по бокам, фигура видна целиком.
   На мобилке — во всю ширину экрана и без скруглений: владельцу мешали
   и срезанная рука, и «округлённые концы» карточки. */
@media (max-width:640px){
  /* фото начинается сразу от предыдущего экрана: верхний отступ секции
     давал полосу фона между тёмным блоком и портретом */
  .coach{padding-top:0}
  /* имя — подпись к портрету, поэтому липнет к фотографии,
     а не висит посередине между ней и заголовком */
  .coach-grid{row-gap:0}
  .coach-copy .eyebrow{margin-bottom:12px}
  .coach-media{
    width:100vw;margin-left:calc(-50vw + 50%);
    height:auto;aspect-ratio:860/1024;border-radius:0;box-shadow:none;
    margin-bottom:30px;
  }
  .coach-media img{object-position:center center}
}


/* ===== экран цены =====
   Список галочек убран: «5 минут в день», «закрытый канал» и «для начинающих»
   к этому месту сказаны уже по три раза. На экране оплаты человеку нужно не
   описание, а условия: что спишется, как часто и как отменить. */
.per-month{margin-bottom:34px}
.terms{font-size:12px;line-height:1.5;color:#a99c92;margin:10px 0 0;max-width:330px}
footer .legal{margin:0 0 12px;letter-spacing:0;font-size:12px}
footer .legal a{color:#c3b6ab;text-decoration:underline;text-underline-offset:2px;display:inline-block;padding:5px 2px}
footer .legal span{margin:0 8px;opacity:.5}
@media (max-width:640px){
  .per-month{margin-bottom:30px}
  .terms{font-size:11.5px;max-width:325px}
}

/* подвал: разрядка 0.24em ломала строку на две — сузил до 0.14em */
footer .fmark{letter-spacing:.14em}





/* ===== экран цены: текст разведён по краям, фотография держит середину =====
   Раньше весь текст сбивался в верхнюю треть, а лицо оставалось внизу —
   экран читался скомканным. Теперь цена сверху, действие снизу, фигура между. */
.final-top,.final-bottom{display:contents}
@media (max-width:640px){
  .final{min-height:0;height:100svh;display:flex;align-items:stretch}
  .final-copy{display:flex;flex-direction:column;justify-content:space-between;
    align-self:stretch;padding-top:76px;padding-bottom:30px}
  .final-top,.final-bottom{display:block}
  .per-month{margin-bottom:0}
  .final-media img{object-position:50% 42%}
}

@media (max-width:640px){
  /* текст теперь стоит и сверху, и снизу — затемнение нужно с обеих сторон,
     иначе мелкие строки ложатся на светлые руки и пол */
  .final-media-shade{background:linear-gradient(180deg,
    rgba(17,15,14,.93) 0%, rgba(17,15,14,.62) 20%, rgba(17,15,14,.20) 44%,
    rgba(17,15,14,.52) 68%, rgba(17,15,14,.88) 84%, rgba(17,15,14,.95) 100%)}
}


/* ===== экран цены: цена и кнопка — один предмет =====
   Разводить их по краям экрана нельзя: связь «сколько стоит → нажать»
   рвётся, и оба куска повисают сами по себе. Блок прижат к низу,
   фотография забирает верх — так же устроен первый экран. */
@media (max-width:640px){
  .final-copy{justify-content:flex-end;padding-top:0;padding-bottom:34px}
  .final-block{display:block}
  .final-price{font-size:68px}
  .per-month{margin:8px 0 22px}
  .terms{font-size:12px;color:#a99c92;margin:12px 0 0;max-width:100%}
  .final-media img{object-position:50% 38%}
}


/* ===== экран цены, третий подход =====
   Фигура во весь рост занимала всю высоту, и текст всякий раз оказывался
   зажат — то вверху, то внизу, то разорван пополам. Снимок притушен до
   фактуры, блок стоит по центру с воздухом сверху и снизу. */
@media (max-width:640px){
  .final-copy{justify-content:center;padding-top:0;padding-bottom:0}
  .final-media-shade{background:linear-gradient(180deg,
    rgba(17,15,14,.90) 0%, rgba(17,15,14,.80) 40%,
    rgba(17,15,14,.84) 70%, rgba(17,15,14,.94) 100%)}
  .final-price{font-size:72px}
  .per-month{margin:10px 0 30px}
}


/* ===== экран цены, окончательно: закрывающий блок, а не четвёртый кадр =====
   Целый экран под две строки и кнопку не окупается: информации мало,
   фотография занимает высоту и требует внимания, которое здесь уже не нужно.
   Страница заканчивается коротким плотным блоком — цена, действие, всё. */
@media (max-width:640px){
  .final{height:auto;min-height:0;padding:74px 0 78px;background:#171514;display:block}
  .final-media{display:none}
  .final-copy{display:block;padding:0}
  .final-price{font-size:76px}
  .per-month{margin:10px 0 32px}
}


/* ===== экран цены: фигура уходит вправо, текст держит левый край =====
   Снимок вернулся, но кадр сдвинут: девушка стоит в правой части,
   слева освобождается колонка под цену и кнопку. Оба блока — вверху. */
@media (max-width:640px){
  .final{height:100svh;min-height:0;padding:0;background:#171514;display:block}
  .final-media{display:block}
  .final-media img{object-position:38% 40%}
  .final-media-shade{background:linear-gradient(180deg,
    rgba(17,15,14,.86) 0%, rgba(17,15,14,.55) 42%, rgba(17,15,14,.35) 70%, rgba(17,15,14,.55) 100%)}
  .final-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding-top:84px;padding-bottom:0;height:100%}
  .final-price{font-size:62px}
  .per-month{font-size:26px;margin:6px 0 24px}
  .final .cta{width:auto;min-width:0;padding:13px 24px;font-size:14.5px}
}


/* ===== экран цены: короткий кадр, фигура обрезана по шорты =====
   Вертикальный кадр во всю высоту не окупался. Снимок обрезан:
   ноги и шорты справа, слева — колонка под цену и кнопку. */
@media (max-width:640px){
  .final{height:360px;min-height:0;padding:0;background:#171514;display:block;overflow:hidden}
  .final-media{display:block}
  .final-media img{object-position:50% 0}
  .final-media-shade{background:linear-gradient(90deg,
    rgba(17,15,14,.86) 0%, rgba(17,15,14,.62) 46%, rgba(17,15,14,.10) 72%, rgba(17,15,14,0) 100%)}
  .final-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    padding:0;height:100%}
  .final-price{font-size:52px}
  .final-price small{font-size:.36em}
  .per-month{font-size:20px;margin:6px 0 20px}
  .final .cta{width:auto;min-width:0;padding:12px 20px;font-size:14px;gap:10px}
}


/* цена крупная: владелец согласен, что она заходит на фигуру.
   Затемнение тянется дальше вправо, чтобы белая цифра читалась поверх руки */
@media (max-width:640px){
  .final-price{font-size:76px}
  .final-price small{font-size:.34em}
  .per-month{font-size:26px;margin:8px 0 22px}
  .final-media-shade{background:linear-gradient(90deg,
    rgba(17,15,14,.88) 0%, rgba(17,15,14,.72) 52%, rgba(17,15,14,.42) 76%, rgba(17,15,14,.05) 100%)}
}


/* «/ $5» на мобилке уезжает со строки цены на строку «В МЕСЯЦ»:
   крупная цена заходит на фигуру намеренно, но золотые символы
   ложились ровно на лицо. Десктоп не затронут. */
.usd-stack{display:none}
@media (max-width:640px){
  .usd-inline{display:none}
  .usd-stack{display:inline;color:var(--gold);font-size:.86em;letter-spacing:-.02em}
}


/* кадр стоит на месте, а текст с кнопкой поднят на 5% высоты блока (18 px):
   световая линия пола проходила впритык под кнопкой, теперь между ними 24 px */
@media (max-width:640px){
  .final-copy{padding-bottom:36px}
}








/* аккаунт Алёны — значком в правом нижнем углу её блока:
   узнаётся мгновенно, текстовую колонку не трогает и с кнопкой ниже не спорит */
.coach{position:relative}
.coach-ig{position:absolute;right:8px;bottom:8px;
  display:inline-flex;align-items:center;justify-content:center;
  width:72px;height:72px;color:var(--gold);transition:opacity .2s ease}
.coach-ig svg{width:56px;height:56px}
.coach-ig:hover{opacity:.75}


/* первый экран: «PRIVATKA · ЗАКРЫТЫЙ TELEGRAM-КЛУБ» одной строкой наверху.
   Надзаголовок из блока с заголовком убран, поэтому «КАЛИСТЕНИКА»
   поднимается ровно на его прежнюю линию. */
.brand{gap:0}
.brand-dot{margin:0 9px;opacity:.5}
.brand-sub{color:var(--gold)}
@media (max-width:640px){
  .topbar{font-size:11px;letter-spacing:.12em}
}

/* заголовок возвращается на прежнюю линию: место снятого надзаголовка
   отдано отступу, верхняя строка при этом остаётся объединённой */
@media (max-width:640px){ .hero-copy{padding-top:47px} }

/* зазор от кнопки до следующего экрана приравнен к такому же зазору
   на экране «что внутри»: от последней строки до кромки — 48 px */
@media (max-width:640px){ .hero-bottom{padding-bottom:48px} }