/* ============================================================
   TheArt‡of‡Web — мобильный лендинг
   Палитра: #FF3025 red / #111 ink / #F2F2F2 line / #F0FF25 yellow / #2584FF blue
   ============================================================ */

@font-face {
  font-family: 'Lebowski';
  src: url('assets/fonts/lebowski.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --red: #FF3025;
  --red-light: #FF584F;
  --ink: #111111;
  --line: #F2F2F2;
  --yellow: #F0FF25;
  --blue: #2584FF;
  --gray: #949494;
  --ink-dim: rgba(17, 17, 17, 0.36);
  --white-dim: rgba(255, 255, 255, 0.36);
  --on-red-dim: rgba(17, 17, 17, 0.4);
  --font-display: 'Lebowski', 'Arial Narrow', 'Roboto Condensed', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-narrow: 'Arial Narrow', 'Roboto Condensed', Arial, sans-serif;
  --font-inter: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --page-w: 480px;
  --pad: 16px;
  --hdr-h: 54px;
  --vh100: 100vh;
}
@supports (height: 100dvh) {
  :root { --vh100: 100dvh; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; color: inherit; font: inherit; }
img { display: block; max-width: 100%; }
u { text-underline-offset: 3px; text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }

.page { max-width: var(--page-w); margin: 0 auto; background: #fff; }

/* ---------- метки секций ---------- */
.tag {
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--red);
  line-height: 1;
}

/* ---------- Хедер ---------- */
.hdr {
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-w);
  height: var(--hdr-h);
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--pad);
  z-index: 100;
}
.hdr__logo { font-size: 14px; letter-spacing: -0.04em; }
.hdr__start {
  display: flex;
  gap: 12px;
  font-size: 14px;
  letter-spacing: -0.04em;
  margin-left: auto;
  margin-right: 20px;
}
.hdr__start .dim { color: var(--ink-dim); }
.hdr__plus {
  width: 32px; height: 32px;
  margin-right: -8px;
  display: grid;
  place-items: center;
}
.hdr__plus svg {
  width: 13px; height: 13px;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
body.menu-open .hdr { background: #111; border-bottom-color: #383838; }
body.menu-open .hdr__logo,
body.menu-open .hdr__start span:last-child { color: #fff; }
body.menu-open .hdr__start .dim { color: var(--white-dim); }
body.menu-open .hdr__plus { color: #fff !important; }
body.menu-open .hdr__plus svg { transform: rotate(45deg); }

/* ---------- Меню ---------- */
.menu {
  position: fixed;
  inset: 0;
  left: 50%;
  transform: translate(calc(-50% + 100%), 0);
  width: 100%;
  max-width: var(--page-w);
  background: #111;
  z-index: 90;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 0.55s;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(var(--hdr-h) + 24px) var(--pad) 0;
  overflow: hidden;
}
.menu.open {
  transform: translate(-50%, 0);
  visibility: visible;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.menu__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.menu__meta .note {
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--white-dim);
  text-align: right;
}
.menu__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 24px 0 24px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 16px;
}
.menu__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(24px, 7.4vw, 32px);
  line-height: 1;
  letter-spacing: -0.07em;
  color: #fff;
  text-align: right;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu.open .menu__item {
  opacity: 1;
  transform: translateX(0);
  transition-delay: calc(0.12s + var(--i) * 0.025s);
}
.menu__item:active { color: var(--red); }
.menu__cta {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  margin-top: 0;
  background: var(--red);
  color: #fff;
  height: 56px;
  padding: 0 16px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.04em;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.menu__cta .arr { display: flex; margin: 0 16px; }
.menu__cta .arr svg { width: 14px; height: 9px; }
.menu__cta-price { font-size: 16px; }
.menu__cta-chip {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  width: 75px;
  background: var(--red-light);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.menu__foot {
  flex: none;
  margin: 8px -16px 0;
  border-top: 1px solid #383838;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--pad);
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: #fff;
}

/* ---------- Hero ---------- */
.hero { padding-top: var(--hdr-h); }
.hero__note {
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  width: 245px;
  margin: 28px var(--pad) 16px calc(var(--pad) + 12px);
}
.hero__gallery {
  position: relative;
  height: 286px;
  overflow: hidden;
}
.hero__gallery iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.hero__sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--pad) 0;
  font-size: 18px;
  line-height: 1;
}
.hero__sub .dim { color: var(--ink-dim); }
.hero__head { position: relative; padding: 0 var(--pad); margin-top: 39px; }
.hero__eyebrow {
  position: absolute;
  left: var(--pad);
  top: 16px;
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--red);
  line-height: 1;
}
.hero__title {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-indent: 88px;
  max-width: 343px;
}
.hero__bonus {
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 24px var(--pad) 56px;
  max-width: 375px;
}

/* ---------- CTA-блок (343×167) ---------- */
.cta-block {
  display: block;
  margin: 24px var(--pad) 0;
  background: var(--red);
  color: #fff;
  padding: 14px;
  -webkit-tap-highlight-color: transparent;
}
.cta-block__row {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.cta-block__row .arr { margin-left: auto; margin-right: 48px; display: flex; }
.cta-block__row .arr svg { width: 14px; height: 9px; }
.cta-block__inner {
  margin: 14px -8px -8px;
  background: var(--red-light);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  min-height: 119px;
}
.cta-block__desc {
  font-family: var(--font-narrow);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 250px;
}
.cta-block__nums {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 14px;
}
.cta-block__timer {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.cta-block__prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.cta-block__prices s {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  font-size: 24px;
  letter-spacing: -0.04em;
  color: var(--white-dim);
}
.cta-block__prices b {
  font-weight: 400;
  font-size: 40px;
  letter-spacing: -0.04em;
}

/* ---------- Sticky CTA (343×72) ---------- */
.cta-sticky {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, 0);
  width: min(343px, calc(100vw - 32px));
  height: 72px;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.02em;
  z-index: 80;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.cta-sticky.hidden-down {
  transform: translate(-50%, calc(100% + 24px));
  pointer-events: none;
}
.cta-sticky.parked {
  position: absolute;
  bottom: auto;
  transition: none;
}
.cta-sticky .arr { display: flex; margin: 0 18px; }
.cta-sticky .arr svg { width: 14px; height: 9px; }
.cta-sticky__chip {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  width: 75px;
  background: var(--red-light);
  display: grid;
  place-items: center;
}

/* ---------- общая секционная шапка ---------- */
.sec-head {
  position: relative;
  padding: 0 var(--pad);
}
.sec-head .tag { position: absolute; left: var(--pad); top: 14px; }
.sec-head h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-indent: 96px;
}
.sec-head .turn-arr {
  position: absolute;
  right: var(--pad);
  display: flex;
}
.sec-head .turn-arr svg { width: 16px; height: 16px; }

/* ---------- //01 Чего ожидать ---------- */
.expect { padding: 0 var(--pad) 60px; position: relative; }
.expect > .tag {
  position: absolute;
  left: var(--pad);
  top: 107px;
  margin: 0;
  display: block;
}
.expect__lead {
  position: relative;
}
.expect__collage {
  position: absolute;
  left: 30px;
  top: 0;
  width: 90px;
  height: 117px;
  background:
    url('assets/expect-collage-1.png') 50% 62.4% / 115.6% 158.1% no-repeat,
    url('assets/expect-collage-2.png') 50% 50% / 100% 57.7% no-repeat,
    #000;
}
.expect__lead p {
  padding-top: 102px;
  text-indent: 136px;
}
.expect p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.expect__more { margin-top: 24px; max-width: 343px; }

/* появление фото снизу вверх */
@media (prefers-reduced-motion: no-preference) {
  .img-reveal {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .img-reveal.on { clip-path: inset(0 0 0 0); }
}
.expect .tag { display: block; margin-bottom: 16px; }

/* ---------- //02 Для кого ---------- */
.audience {
  background: var(--ink);
  color: #fff;
  padding: 28px 0 40px;
  overflow: hidden;
}
.audience .sec-head h2 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.04em;
  text-indent: 96px;
  padding-top: 36px;
  max-width: 343px;
}
.audience .sec-head .tag { top: 50px; }
.audience .sec-head .turn-arr { margin-top: -20px; position: static; justify-content: flex-end; }
.audience__card {
  background: #fff;
  color: var(--ink);
  margin: 48px var(--pad) 0;
  padding: 0 12px;
}
.aud-item {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(24px);
  transition: grid-template-rows 0.55s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.aud-item.show { grid-template-rows: 1fr; opacity: 1; transform: translateY(0); }
.aud-item > div { overflow: hidden; }
.aud-item .inner {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.aud-item:last-child .inner { border-bottom: 0; }
.aud-item .tag { position: absolute; left: 0; top: 17px; }
.aud-item p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.04em;
  text-indent: 30px;
}
.audience__bottom {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  padding: 24px var(--pad) 0;
  max-width: 375px;
}

/* ---------- //03 Что ты получишь ---------- */
.result { padding: 60px 0 72px; }
.result .sec-head h2 { text-indent: 110px; max-width: 360px; }
.result hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 32px var(--pad) 0;
}
.result__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px var(--pad) 0;
}
.result__list p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  max-width: 343px;
}

/* ---------- //04 Работы учеников ---------- */
.students { padding-bottom: 0; }
.students .sec-head h2 { text-indent: 86px; max-width: 360px; }
.students__box {
  margin-top: 24px;
  height: 540px;
  position: relative;
  overflow: hidden;
}
.students__box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- //05 Проблемы ---------- */
.problems { padding: 72px 0 64px; }
.problems .sec-head h2 { text-indent: 96px; max-width: 360px; }
.problems .sec-head .turn-arr { position: absolute; right: var(--pad); bottom: 2px; margin: 0; }
.prob-card {
  margin: 24px var(--pad) 0;
  border: 1px solid var(--line);
  min-height: 268px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
}
.prob-card + .prob-card { margin-top: 4px; }
.prob-card__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--red);
  line-height: 1;
}
.prob-card__row span:first-child { color: var(--gray); }
.prob-card__title {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-top: 14px;
  color: var(--red);
  white-space: nowrap;
}
.prob-card__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-top: auto;
  padding-top: 24px;
  max-width: 311px;
}
.problems__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  padding: 48px var(--pad) 120px;
}
.problems__sign b {
  font-weight: 400;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--red);
  white-space: nowrap;
}
.problems__sign span {
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--red);
  line-height: 1.15;
}

/* ---------- //06 О чем курс (pinned) ---------- */
.pin-course { height: 240vh; position: relative; }
.course-stage {
  position: sticky;
  top: 0;
  height: var(--vh100);
  margin: 0 4px;
  background: var(--red);
  overflow: hidden;
}
.course-stage .tag { position: absolute; left: 12px; top: calc(var(--hdr-h) + 26px); color: var(--on-red-dim); }
.course__t1 {
  position: absolute;
  left: 12px; right: 12px;
  top: calc(var(--hdr-h) + 18px);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--ink);
  text-indent: 104px;
}
.course__vm-a {
  position: absolute;
  left: 12px;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--on-red-dim);
  transition: opacity 0.2s ease;
}
.course__t2 {
  position: absolute;
  left: 12px; right: 12px;
  bottom: 28px;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.course__t2 .vm-b { color: var(--on-red-dim); }
.course__t2 .w {
  display: inline-block;
  text-indent: 0;
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.course__t2 .w.on { opacity: 1; transform: translateY(0); }
.course__t2 .vm-b .w { transition: none; transform: none; }
.course__t2.handoff .vm-b .w { opacity: 1; }

/* вращающийся крест (крутится только +, точки статичны) */
.course-cross {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.course-cross__plus {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 31px;
  height: 31px;
  transform: translate(-50%, -50%) rotate(var(--cross-rot, 0deg));
  will-change: transform;
}
.course-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink);
}

/* ---------- //07 Спикер (pinned) ---------- */
.pin-speaker { height: 460vh; position: relative; }
.speaker-stage {
  position: sticky;
  top: 0;
  height: var(--vh100);
  background: #fff;
  overflow: hidden;
}
.speaker-stage .tag {
  position: absolute;
  left: var(--pad);
  top: calc(var(--hdr-h) + 20px);
  z-index: 1;
  transition: opacity 0.3s ease;
}
.sp-photo {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 135px;
  height: 165px;
  background: url('assets/speaker-photo-2.png') 50% 22% / cover no-repeat;
  overflow: hidden;
  will-change: top, left, width, height;
}
.sp-photo__name {
  position: absolute;
  top: 74px;
  left: 0; right: 0;
  text-align: center;
  font-size: 32px;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #fff;
  opacity: 0;
}
.sp-cards {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 0);
  width: min(343px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  will-change: transform;
}
.sp-card {
  height: 278px;
  padding: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  flex: none;
}
.sp-card--red { background: var(--red); }
.sp-card--yellow { background: var(--yellow); }
.sp-card--blue { background: var(--blue); }
.sp-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.sp-card--red .sp-card__lead {
  margin-top: auto;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  max-width: 300px;
}
.sp-card--red .sp-card__sum {
  position: absolute;
  right: 12px;
  bottom: 18px;
  font-size: 88px;
  line-height: 0.82;
  letter-spacing: -0.07em;
  text-align: right;
}
.sp-card--yellow .sp-dim { color: rgba(17, 17, 17, 0.32); }
.sp-card--yellow .sp-card__lead {
  margin: auto 0;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-align: center;
  padding: 0 8px;
}
.sp-awards {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sp-award {
  display: flex;
  align-items: flex-end;
  gap: 0;
}
.sp-award .lt {
  width: 92px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.07em;
  color: rgba(17, 17, 17, 0.2);
  flex: none;
}
.sp-award .nm {
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.07em;
}
.sp-award .res {
  margin-left: auto;
  font-family: var(--font-narrow);
  font-size: 11px;
  letter-spacing: -0.04em;
  text-align: right;
  line-height: 1.05;
  max-width: 110px;
  padding-bottom: 2px;
}

/* ---------- //08 Программа ---------- */
.program { padding: 64px 0 24vh; position: relative; }
.program .sec-head {
  position: sticky;
  top: var(--hdr-h);
  z-index: 20;
  background: #fff;
  padding-top: 16px;
  padding-bottom: 16px;
}
.program .sec-head h2 { text-indent: 110px; max-width: 360px; }
.program .sec-head .turn-arr { position: absolute; right: var(--pad); bottom: 16px; margin: 0; }
.program__access {
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: var(--ink);
  width: 245px;
  margin: 16px auto 0;
  padding: 0;
}
.program__days { padding-top: 56px; }
.day-card {
  position: sticky;
  top: calc(var(--hdr-h) + 120px);
  width: 245px;
  min-height: 287px;
  margin: 0 auto 28px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  z-index: calc(2 + var(--i));
}
.day-card__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -2px -8px 0 0;
}
.day-card__row .tag { line-height: 1; }
.day-card__badge {
  background: #F8F8F8;
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  padding: 8px 10px;
  line-height: 1;
}
.day-card__title {
  margin-top: auto;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.04em;
  max-width: 213px;
}
.day-card__title .dim { color: var(--ink-dim); }
.day-card__text {
  font-family: var(--font-narrow);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-top: 18px;
  max-width: 215px;
}

/* ---------- //09 Отзывы ---------- */
.reviews {
  padding: 64px 0 64px;
  position: relative;
  background: #FAFAFA;
}
.reviews .sec-head h2 { text-indent: 96px; max-width: 360px; }
.reviews .sec-head h2 + h2 { margin-top: 0.4em; }
.reviews__box {
  margin-top: 40px;
  height: 560px;
  background: transparent;
  position: relative;
  overflow: hidden;
}
.reviews__box iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- //10 Твой шанс ---------- */
.chance {
  position: relative;
  background: var(--ink) url('assets/bg-chance.png') center 40% / cover no-repeat;
  color: #fff;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  padding: 30px 0 16px;
}
.chance .sec-head h2 { text-indent: 86px; max-width: 360px; }
.chance .cta-block { margin-top: auto; }
.chance .cta-block { margin-bottom: 0; }
.chance__spacer { height: 280px; }

/* ---------- //11 Детали ---------- */
.details { position: relative; padding: 35vh 0 30vh; }
.details__title {
  position: sticky;
  top: calc(50vh - 60px);
  padding: 0 var(--pad);
  z-index: 1;
}
.details__title .tag { display: block; margin-bottom: 8px; position: static; }
.details__title h2 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  text-indent: 96px;
  max-width: 360px;
}
.details__title .tag { position: absolute; top: 22px; }
.details__cards { position: relative; z-index: 2; margin-top: 38vh; }
.detail-card {
  width: 245px;
  min-height: 168px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  margin-bottom: 16vh;
}
.detail-card--1 { margin-left: var(--pad); }
.detail-card--2 { margin-left: auto; margin-right: var(--pad); }
.detail-card--3 { margin-left: 65px; margin-bottom: 0; }
.detail-card__title {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.detail-card__text {
  font-family: var(--font-narrow);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  margin-top: auto;
  padding-top: 32px;
  max-width: 215px;
}

/* ---------- //12 Гарантия ---------- */
.guarantee {
  position: relative;
  margin: 0 4px;
  background: var(--red);
  aspect-ratio: 367 / 1135;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 48px 12px 36px;
}
.guarantee__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom center;
}
.guarantee .tag { position: absolute; left: 12px; top: 64px; color: var(--on-red-dim); z-index: 1; }
.guarantee__text {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.04em;
  color: rgba(0, 0, 0, 0.24);
}
.guarantee__text .g-line { display: block; text-indent: 90px; }
.guarantee__text .w { transition: color 0.25s linear; text-indent: 0; }
.guarantee__text .w.fill { color: var(--ink); }
.guarantee__note {
  position: relative;
  z-index: 1;
  margin-top: auto;
  font-size: 28px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-indent: 72px;
  color: rgba(0, 0, 0, 0.4);
  max-width: 343px;
}

/* ---------- //13 FAQ ---------- */
.faq { padding: 64px 0 120px; }
.faq .sec-head h2 { text-indent: 96px; max-width: 360px; }
.faq__list { margin: 36px var(--pad) 0; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  text-align: left;
  font-size: 16px;
  letter-spacing: -0.04em;
  line-height: 1.1;
  -webkit-tap-highlight-color: transparent;
}
.faq-item__q svg {
  width: 11px; height: 11px;
  flex: none;
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq-item.open .faq-item__q svg { transform: rotate(45deg); }
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.faq-item.open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  font-family: var(--font-narrow);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.04em;
  max-width: 255px;
  padding-bottom: 16px;
}

/* ---------- //14 Действуй ---------- */
.act {
  position: relative;
  background: var(--ink) url('assets/bg-act.png') center / cover no-repeat;
  color: #fff;
  min-height: 812px;
  display: flex;
  flex-direction: column;
  padding-top: 30px;
}
.act .sec-head .tag { top: 14px; }
.act .sec-head h2 { text-indent: 96px; max-width: none; }
.act .sec-head h2 + h2 { margin-top: 0.3em; }
.act .cta-block { margin-top: auto; margin-bottom: 70px; }
.act__spacer { flex: 1; min-height: 220px; }
.footer {
  border-top: 1px solid #383838;
  min-height: var(--hdr-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 var(--pad);
  font-family: var(--font-narrow);
  font-size: 12px;
  letter-spacing: -0.04em;
  color: #fff;
}
.footer a, .menu__foot a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer__links, .menu__links { display: flex; gap: 16px; }

/* ---------- line-stagger reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] .w {
    display: inline-block;
    text-indent: 0;
    opacity: 0;
    transform: translateY(0.55em);
  }
  [data-reveal].on .w {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--l) * 0.09s);
  }
}