/* =============================================================
   ЛИСТОПАД ПРИЗОВ — styles.css
   Макет: Figma «Листопад призов — лендинг» 1200px, DS главной 3.0
   Шрифт Onest. Токены сняты с макета.
   ============================================================= */

:root{
  --bg:            #202020;
  --surface:       #121212;
  --surface-2:     #1a1a1a;
  --cream:         #f2efe9;
  --ink:           #ffffff;
  --ink-2:         #b5b5bc;
  --ink-muted:     #8a8a99;
  --ink-cream:     #121212;
  --accent:        #ff6600;
  --accent-red:    #d9180c;
  --accent-deep:   #990014;
  --grad: linear-gradient(97deg, #990014 0%, #d9180c 55%, #ff6a00 100%);
  --grad-soft: linear-gradient(97deg, #ac0001 0%, #d9180c 40%, #df130f 100%);

  --wrap: 1160px;
  --pad: 20px;
  --r-card: 16px;
  --r-big: 20px;

  --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ background:var(--bg); }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
@supports not (overflow:clip){ body{ overflow-x:hidden; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
dl,dd,dt,p,h1,h2,h3{ margin:0; }

.wrap{
  position:relative;      /* листья якорятся к сетке контента, а не к краю экрана */
  width:100%;
  max-width:calc(var(--wrap) + var(--pad)*2);
  margin:0 auto;
  padding-inline:var(--pad);
}

/* ---------- typography scale ---------- */
.h2{
  font-size:32px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-1px;
}
.deck{
  margin-top:12px;
  font-size:14px;
  color:var(--ink-2);
  line-height:1.45;
  max-width:820px;
}
.note{
  font-size:11.5px;
  line-height:1.45;
  color:var(--ink-muted);
}
.note--dark{ color:#6c6c6c; }

/* ---------- sections ---------- */
.sec{
  position:relative;
  padding-block:64px 72px;
  /* Декор каждой секции остаётся внутри неё и не проезжает по соседним блокам. */
  overflow:clip;
}
.sec--gloss{ padding-block:56px 72px; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;
  align-items:center;
  gap:16px;
  padding:8px 8px 8px 24px;
  border-radius:40px;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease);
  will-change:transform;
}
.btn__arrow{
  display:grid;
  place-items:center;
  width:32px; height:32px;
  border-radius:50%;
  flex:0 0 auto;
  transition:transform .3s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn:hover .btn__arrow{ transform:translate(2px,-2px) rotate(8deg); }
.btn:active{ transform:translateY(0); }

.btn--hot{
  background:var(--grad);
  color:#fff;
  box-shadow:0 6px 22px rgba(217,24,12,.28);
}
.btn--hot:hover{ box-shadow:0 10px 30px rgba(217,24,12,.42); }
.btn--hot .btn__arrow{ background:#fff; color:var(--accent-red); }

.btn--light{
  background:#fff;
  color:#121212;
  font-size:15px;
  padding:8px 8px 8px 26px;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.btn--light .btn__arrow{ background:var(--accent-red); color:#fff; width:36px; height:36px; }
.btn--light:hover{ box-shadow:0 12px 32px rgba(0,0,0,.32); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ padding-block:20px 0; overflow:clip; }

/* Hero fills the first screen. --screen = window height in layout px (set in app.js,
   already divided by the AutoScale zoom), minus the 20px top gap and 20px air below. */
.hero__card{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  min-height:clamp(420px, calc(var(--screen, 600px) - 40px), 720px);
  display:flex;
  align-items:center;
  isolation:isolate;
  /* fill above the picture: stops sampled from the picture's top row (card x → picture x
     at 118% width), so the seam between fill and picture is invisible */
  background:linear-gradient(90deg, #a3000e 0%, #ac0010 5%, #ad0011 10%, #b30111 15%, #b5020f 20%,
    #c6010f 25%, #d30c12 30%, #da1512 35%, #e21a15 40%, #e81c14 45%, #e62413 50%, #df310f 55%,
    #ef4215 60%, #fc6d1d 65%, #fc8f18 70%, #fcb014 75%, #febd3a 80%, #fdb630 85%, #fb8e1e 90%,
    #fb6709 95%, #f74f0b 100%);
}
/* The picture is 3:1 — `cover` on a tall card would push the products under the text.
   Pin it to the bottom-right at full width and fade its top edge into the fill. */
.hero__bg{
  position:absolute; right:0; bottom:0;
  width:118%;
  aspect-ratio:2320 / 766;            /* box = picture, so the mask fades the picture's own top edge */
  background:url('img/final-bg.webp') center / 100% 100% no-repeat;
  /* only a thin fade: products reach the top edge, a taller fade turns them see-through */
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 7%);
          mask-image:linear-gradient(180deg, transparent 0, #000 7%);
  z-index:0;
}

.hero__body{
  position:relative;
  z-index:1;
  padding:40px 48px 40px;
  max-width:660px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.hero__dates{
  font-size:13px;
  font-weight:600;
  letter-spacing:.8px;
  text-transform:uppercase;
}
.hero__title{
  font-size:76px;
  font-weight:600;
  line-height:.88;
  letter-spacing:-2.5px;
}
.hero__lead{
  font-size:17px;
  font-weight:500;
  line-height:1.4;
  max-width:500px;
}
.hero__notes{
  font-size:10px;
  line-height:1.5;
  opacity:.9;
}

/* ---------- timer ---------- */
.timer{
  background:#202020;
  border-radius:10px;
  padding:15px;
  width:max-content;
}
.timer__cap{
  font-size:15px;
  font-weight:500;
  margin-bottom:10px;
}
.timer__row{ display:flex; gap:4px; }
.timer__cell{
  width:44px;
  border-radius:6px;
  padding:2px;
  background:var(--grad-soft);
  text-align:center;
}
.timer__cell b{
  display:block;
  height:40px;
  border-radius:4px;
  background:#121212;
  font-size:24px;
  font-weight:700;
  line-height:40px;
  font-variant-numeric:tabular-nums;
}
.timer__cell span{
  display:block;
  font-size:8px;
  font-weight:500;
  padding:3px 0 2px;
}
.timer--hero-m{ margin-top:6px; }   /* hero countdown, sits above the button */

/* =========================================================
   HOW IT WORKS
   ========================================================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:30px;
}
.step{
  background:var(--surface);
  border-radius:18px;
  padding:24px 22px 26px;
  min-height:268px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:10px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.step__num{
  font-size:76px;
  font-weight:600;
  line-height:1;
  letter-spacing:-3px;
  opacity:.22;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.step:hover .step__num{ opacity:.4; transform:translateX(4px); }
.step--hot{ background:var(--grad); }
.step--hot .step__num{ opacity:1; }
.step__text h3{ font-size:18px; font-weight:600; line-height:1.25; }
.step__text p{ font-size:12.5px; line-height:1.5; opacity:.72; margin-top:8px; }
.step--hot .step__text p{ opacity:.92; }

.cta-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:30px;
  flex-wrap:wrap;
}

/* =========================================================
   PRIZES — podium (brief: 1st in the centre and highest, 2nd beside, boxes below)
   ========================================================= */
/* leaves here must stay on top while parallax pushes them past the section edge —
   .sec clip cut them like they slid under the next block. Horizontal overflow is still
   clipped by .scaler, so no sideways scroll. */
.sec--how,.sec--prizes{ overflow:visible; }
.sec--prizes .h2{ text-align:center; }
.podium{
  display:grid;
  grid-template-columns:1fr 1.12fr 1fr;
  align-items:end;            /* bases share one floor line */
  gap:12px;
  margin-top:34px;
}
.pod{ display:flex; flex-direction:column; text-align:center; }
.pod--2{ order:-1; }          /* 2 | 1 | 3–5 on desktop, DOM stays 1 → 2 → 3 */

.pod__prize{
  display:flex; flex-direction:column; align-items:center;
  padding:0 18px 18px;
}
.pod__prize img{
  width:150px; height:150px;
  object-fit:contain;
  margin-bottom:10px;
  transition:transform .4s var(--ease);
}
.pod:hover .pod__prize img{ transform:translateY(-6px) rotate(-3deg); }
.pod--1 .pod__prize img{ width:190px; height:190px; }
.pod__name{ font-size:18px; font-weight:600; line-height:1.25; }
.pod--1 .pod__name{ font-size:22px; }
.pod__what{
  margin-top:6px;
  font-size:12.5px; line-height:1.5;
  color:var(--ink-2);
  max-width:290px;
}

/* the step itself: height = rank */
.pod__base{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding-top:22px;
  border-radius:18px 18px 6px 6px;
  background:var(--surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.pod__base b{
  font-size:64px; font-weight:600; line-height:1;
  letter-spacing:-2px;
  font-variant-numeric:tabular-nums;
}
.pod__base span{ margin-top:4px; font-size:12px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; opacity:.6; }
.pod--1 .pod__base{ height:230px; background:var(--grad); box-shadow:0 0 60px rgba(255,106,0,.28); }
.pod--1 .pod__base b{ font-size:96px; }
.pod--1 .pod__base span{ opacity:.9; }
.pod--2 .pod__base{ height:160px; }
.pod--2 .pod__base b{ color:#fff; opacity:.85; }
.pod--3 .pod__base{ height:110px; }
.pod--3 .pod__base b{ font-size:48px; opacity:.6; }

/* boxes below the podium */
.boxes{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-top:12px;
}
.box{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px;
  border-radius:14px;
  background:var(--surface);
}
.box img{ width:84px; height:84px; object-fit:contain; flex:0 0 auto; }
.box__place{ font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--accent); }
.box__name{ margin-top:2px; font-size:16px; font-weight:600; }
.box__what{ margin-top:4px; font-size:12px; line-height:1.5; opacity:.72; }
.box--club{ background:var(--cream); color:var(--ink-cream); }
.box--club .box__place{ color:var(--accent-red); }
.box--club .box__what{ opacity:.65; }

/* =========================================================
   POINTS — stairs
   ========================================================= */
/* Flex прижимает сцену к концу трека: sticky с bottom держит её у нижнего края. */
.points-track{
  position:relative;
  height:150vh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}
.points-sticky{
  position:sticky;
  top:auto;
  bottom:20px;
  width:100%;
  height:auto;
}
.points-sticky > .h2{ margin-bottom:20px; }

.stairs{
  position:relative;
  width:100%;              /* внутри flex-родителя ширина иначе схлопывается по контенту */
  flex:0 0 auto;
  /* пропорции сцены из макета: 1160×424 */
  aspect-ratio:1160 / 424;
}
.stairs__path{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}
.stairs__track,.stairs__draw{
  fill:none;
  stroke-width:2;
  vector-effect:non-scaling-stroke;
}
.stairs__track{ stroke:rgba(255,255,255,.14); }
.stairs__draw{
  stroke:var(--accent-red);
  stroke-dasharray:var(--len,2000);
  /* смещением управляет скролл из app.js; короткий transition только сглаживает шаг кадра */
  stroke-dashoffset:var(--len,2000);
  transition:stroke-dashoffset .18s linear;
}

/* Метки стоят ровно на пути. Координаты из Figma (сцена 1160×424):
   центры кругов — (80,178), (580,123), (1080,52). */
.stairs__marks{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.mark{
  position:absolute;
  transform:translate(-50%,-50%);
}
.mark i{
  display:block;
  width:8px; height:8px;
  border-radius:50%;
  background:#8a8a99;
  transition:width .45s var(--ease), height .45s var(--ease),
             background .45s var(--ease), box-shadow .45s var(--ease);
}
.mark b{
  position:absolute;
  left:50%; bottom:calc(100% + 12px);
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:15px; font-weight:600;
  color:var(--ink-2);
  transition:color .45s var(--ease), font-size .45s var(--ease);
}
/* активная метка: круг вырастает и белеет */
.mark.is-active i{
  width:22px; height:22px;
  background:#fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.12);
}
.mark.is-active b{ color:#fff; font-size:18px; }
/* пройденная метка остаётся заметнее непройденной, но меньше активной */
.mark.is-done i{ width:12px; height:12px; background:#fff; }

.mark--a{ left:6.9%;  top:42%; }
.mark--b{ left:50%;   top:29%; }
.mark--c{ left:93.1%; top:12.3%; }

/* ступени расставлены по координатам макета (1160×424), а не сеткой —
   иначе они не совпадают с точками на пути */
.stairs__row{ position:absolute; inset:0; z-index:2; }
.tier{
  position:absolute;
  width:32.155%;                 /* 373 / 1160 */
  background:var(--surface);
  border-radius:18px;
  padding:20px 22px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.tier[data-tier="0"]{ left:0;      top:46.2%; height:53.8%; }
.tier[data-tier="1"]{ left:33.88%; top:33.5%; height:66.5%; }
.tier[data-tier="2"]{ left:67.76%; top:16.5%; height:83.5%; }

/* активная ступень — градиент; пройденная и будущая остаются тёмными */
.tier.is-active{ background:var(--grad); }

.tier.is-active{ box-shadow:0 0 46px rgba(255,106,0,.3); }
.tier__no{
  width:40px; height:40px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,106,0,.16);
  color:var(--accent);
  font-size:17px; font-weight:600;
  margin-bottom:4px;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.tier.is-active .tier__no{ background:#fff; color:var(--accent-red); }
.tier__kicker{
  font-size:11px; font-weight:600; letter-spacing:.4px; color:var(--accent);
  transition:color .5s var(--ease);
}
.tier.is-active .tier__kicker{ color:#fff; }
.tier__val{
  font-size:34px; font-weight:600; line-height:1.1;
  letter-spacing:-1px;
  font-variant-numeric:tabular-nums;
}
.tier__name{ font-size:16px; font-weight:600; }
.tier__list{ font-size:12px; line-height:1.55; opacity:.74; transition:opacity .5s var(--ease); }
.tier.is-active .tier__list{ opacity:.92; }

.duo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:28px;
}
.card{ border-radius:var(--r-card); padding:20px; }
.card--cream{
  background:var(--cream);
  color:var(--ink-cream);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
}
.card__text{ font-size:15px; font-weight:600; line-height:1.5; }
.card__cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.card--rules{ background:var(--surface); }
.card__title{ font-size:14px; font-weight:600; letter-spacing:.45px; }
.card__list{ font-size:13px; line-height:1.62; opacity:.85; margin-top:10px; }

/* =========================================================
   FINAL
   ========================================================= */
.final{
  position:relative;
  border-radius:15px;
  overflow:hidden;
  isolation:isolate;
  min-height:383px;
  display:flex;
  background:linear-gradient(100deg, #a3000f 0%, #bb0510 40%, #e0300f 68%, #f7731a 100%);
}
.final__bg{
  position:absolute; inset:0;
  background:url('img/final-bg.webp') right center / cover no-repeat;
  z-index:0;
}
.final__body{
  position:relative; z-index:1;
  padding:40px 44px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:22px;
  max-width:620px;
}
.final__title{
  font-size:40px; font-weight:600; line-height:1.08;
  letter-spacing:-1.2px;
}
/* two lines max — one long line ran into the laptop in the picture */
.final__q{ font-size:22px; font-weight:600; letter-spacing:-.3px; max-width:340px; }

/* =========================================================
   GLOSSARY
   ========================================================= */
.gloss{
  background:var(--cream);
  color:var(--ink-cream);
  border-radius:var(--r-card);
  overflow:hidden;
}
.gloss__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 24px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  list-style:none;
  min-height:66px;
}
.gloss__head::-webkit-details-marker{ display:none; }
.gloss__plus{
  position:relative;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--accent-red);
  flex:0 0 auto;
  transition:transform .3s var(--ease);
}
.gloss__plus::before,.gloss__plus::after{
  content:'';
  position:absolute; left:50%; top:50%;
  width:12px; height:2px;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:opacity .25s var(--ease);
}
.gloss__plus::after{ transform:translate(-50%,-50%) rotate(90deg); }
.gloss[open] .gloss__plus{ transform:rotate(180deg); }
.gloss[open] .gloss__plus::after{ opacity:0; }
.gloss__body{ padding:0 24px 24px; }
.gloss__body dl{
  columns:2;
  column-gap:40px;
}
.gloss__body dt{
  font-size:12.5px;
  font-weight:600;
  break-after:avoid;
  margin-top:14px;
}
.gloss__body dd{
  font-size:12.5px;
  line-height:1.5;
  opacity:.75;
  margin:2px 0 0;
  break-inside:avoid;
}

/* =========================================================
   FOOTER
   ========================================================= */
.foot{ padding-block:0 20px; overflow:clip; }
@supports not (overflow:clip){ .foot{ overflow:hidden; } }
.foot__card{
  background:var(--surface);
  border-radius:var(--r-big);
  padding:40px 40px 24px;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  gap:28px;
}
.foot__col{ display:flex; flex-direction:column; gap:10px; font-size:13px; }
.foot__col a{ opacity:.85; transition:opacity .2s, color .2s; }
.foot__col a:hover{ opacity:1; color:var(--accent); }
.foot__cap{ font-size:13px; font-weight:600; margin-bottom:4px; }
.foot__logo{ display:inline-flex; align-items:center; }
.foot__logo img{ width:120px; height:auto; }
.foot__addr{ font-size:13px; opacity:.8; line-height:1.5; }
.foot__soc{ display:flex; gap:10px; }
.soc{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  color:#fff;
  transition:transform .25s var(--ease);
}
.soc:hover{ transform:translateY(-3px); }
.soc--tg{ background:#2aabee; }
.soc--wa{ background:#25d366; }
.soc--max{ background:#6b5bff; }
.soc--yt{ background:#ff0033; }
.foot__sk{ width:126px; margin-top:6px; }
.foot__line{ height:1px; background:rgba(255,255,255,.14); margin:28px 0 18px; }
.foot__bottom{
  display:flex; justify-content:space-between; gap:16px;
  font-size:12px; opacity:.7; flex-wrap:wrap;
}

/* =========================================================
   LEAVES — the falling-leaves motif runs through the page
   ========================================================= */
.leaf{
  position:absolute;
  z-index:30;              /* листья лежат поверх всех блоков */
  pointer-events:none;
  user-select:none;
  /* параллакс идёт через `translate` — не конфликтует с поворотом на `transform` */
  translate:0 var(--shift,0);
  transform:rotate(var(--rot,0deg));
  will-change:transform, translate;
}
/* Позиции и углы сняты 1:1 из Figma (система 1200).
   В Figma угол отсчитывается против часовой, в CSS — по часовой, знак инвертирован.
   Y задан в % от высоты секции макета, чтобы держаться при другой высоте вёрстки. */
.leaf--hero{ width:161px; left:1030px; top:3%;     --rot:29deg; }

.leaf--h1{   width:113px; left:1020px; top:2%;      --rot:-141deg; }
.leaf--h2{   width:99px;  left:697px;  top:105.2%; --rot:-22.7deg; }
.leaf--h3{   width:150px; left:860px;  top:79%;     --rot:-158.4deg; }

.leaf--p1{   width:96px;  left:1039px; top:-0.5%;  --rot:22.3deg; }
.leaf--p2{   width:155px; left:1112px; top:93%;  --rot:-145.6deg; }

.leaf--b1{   width:99px;  left:280px;  top:18%;    --rot:-158.3deg; }
.leaf--b2{   width:180px; left:1140px; top:52%;    --rot:41.2deg; }
.leaf--b3{   width:106px; left:900px;  top:-10%;   --rot:-39.1deg; }
.leaf--b4{   width:109px; left:1060px; top:100%;   --rot:148.3deg; }
.leaf--st{   width:122px; left:340px;  top:86.5%;  --rot:-147.5deg; }

.leaf--f1{   width:166px; left:470px;  top:72%;     --rot:-137.4deg; }
.leaf--ft{   width:231px; left:1120px; top:18%;    --rot:-136.1deg; }

/* покачивание не сбрасывает собственный угол листа */
@keyframes leafFloat{
  0%   { transform:rotate(var(--rot,0deg)) translateY(0); }
  50%  { transform:rotate(var(--rot,0deg)) translateY(-12px); }
  100% { transform:rotate(var(--rot,0deg)) translateY(0); }
}
.leaf[data-float="1"]{ animation:leafFloat 7s ease-in-out infinite; }
.leaf[data-float="2"]{ animation:leafFloat 9s ease-in-out infinite .8s; }
.leaf[data-float="3"]{ animation:leafFloat 8s ease-in-out infinite .4s; }

/* a leaf shows only once fully decoded — on slow networks it no longer paints in strips.
   .is-ready is set in app.js; without js leaves are visible right away */
.has-js .leaf{ opacity:0; transition:opacity .6s var(--ease); }
.has-js .leaf.is-ready{ opacity:1; }

/* =========================================================
   REVEAL
   ========================================================= */
/* без js (или с ?reveal=off) контент виден сразу — страница не зависит от скрипта */
.has-js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.has-js .reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   AUTOSCALE
   Макет 1200 масштабируется под ширину окна, как AutoScale в Tilda.
   Высоту обёртки задаёт JS, иначе после scale остаётся пустое место.
   Ниже 1200 scale снимается — работает обычный адаптив.
   ========================================================= */
/* Масштабируем через `zoom`, а не `transform`:
   transform делает обёртку containing block и ломает position:sticky внутри,
   а zoom меняет layout по-настоящему — высота пересчитывается сама. */
/* clip обрезает вылет листьев по горизонтали и, в отличие от hidden,
   не делает элемент скролл-контейнером — sticky внутри продолжает работать */
.scaler{ width:100%; overflow-x:clip; }
@supports not (overflow:clip){ .scaler{ overflow-x:hidden; } }
.scaler__inner{ zoom:var(--k, 1); }

/* =========================================================
   ADAPTIVE — 1199 / 959 / 639 / 374
   ========================================================= */
@media (max-width:1199px){
  .hero__title{ font-size:62px; }
  .hero__body{ padding:34px 36px; max-width:58%; }
  .pod__prize img{ width:124px; height:124px; }
  .pod--1 .pod__prize img{ width:160px; height:160px; }
}

@media (max-width:959px){
  .h2{ font-size:28px; }
  /* Narrow screens: text sits on the clean red fill, the product shot becomes its own
     strip below it (instead of a cropped mess behind the text), timer overlaps its bottom. */
  .hero__card,.final{
    min-height:0;
    flex-direction:column;
    align-items:stretch;
    background:linear-gradient(180deg, #a3000f 0%, #b8040f 55%, #c50a0e 100%);
  }
  .hero__body,.final__body{ order:1; }
  .hero__bg,.final__bg{
    order:2;
    position:relative; inset:auto; width:auto;
    aspect-ratio:2.1;
    background:url('img/final-bg.webp') 88% center / cover no-repeat;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%);
            mask-image:linear-gradient(180deg, transparent 0, #000 14%);
  }
  .hero__body{ max-width:100%; padding:30px 26px 0; }
  .hero__title{ font-size:52px; letter-spacing:-1.8px; }
  .hero__lead{ max-width:100%; }

  .steps{ grid-template-columns:1fr; }
  .step{ min-height:0; }
  .step__num{ font-size:60px; }

  /* на узких фиксация и путь не нужны — ступени идут обычным столбиком */
  .points-track{ height:auto; display:block; }
  .points-sticky{ position:static; }
  .stairs{ aspect-ratio:auto; }
  .stairs__path,.stairs__marks{ display:none; }
  .stairs__row{ position:static; display:grid; grid-template-columns:1fr; gap:12px; }
  .tier{ position:static; width:auto; height:auto; }
  .tier[data-tier="0"],.tier[data-tier="1"],.tier[data-tier="2"]{ left:auto; top:auto; height:auto; }
  .tier[data-tier="1"]{ background:var(--grad); }

  .duo{ grid-template-columns:1fr; }

  /* podium keeps its three steps on tablets, just smaller */
  .podium{ gap:8px; }
  .pod__prize{ padding:0 8px 14px; }
  .pod__prize img{ width:96px; height:96px; }
  .pod--1 .pod__prize img{ width:124px; height:124px; }
  .pod__name{ font-size:15px; }
  .pod--1 .pod__name{ font-size:18px; }
  .pod__what{ font-size:12px; }
  .pod--1 .pod__base{ height:180px; }
  .pod--1 .pod__base b{ font-size:76px; }
  .pod--2 .pod__base{ height:130px; }
  .pod--2 .pod__base b{ font-size:52px; }
  .pod--3 .pod__base{ height:92px; }
  .pod--3 .pod__base b{ font-size:38px; }
  .boxes{ grid-template-columns:1fr; }

  .final__body{ padding:30px 26px 6px; max-width:100%; }
  .final__title{ font-size:32px; }
  .final__q{ font-size:19px; }

  .foot__grid{ grid-template-columns:1fr 1fr; gap:24px; }
  .gloss__body dl{ columns:1; }
}

@media (max-width:639px){
  .sec{ padding-block:44px 52px; }
  .h2{ font-size:24px; letter-spacing:-.6px; }
  /* the title must read as the title: big, tight, with the warm accent word */
  .hero__body{ padding:28px 20px 0; gap:12px; }
  .hero__title{ font-size:46px; line-height:.9; letter-spacing:-1.6px; }
  .hero__accent{
    display:inline-block;
    background:linear-gradient(95deg, #ffd25e 0%, #ffab2e 55%, #ff7a1a 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:#ffc23d;
  }
  .hero__lead{ font-size:15px; }
  .hero__bg,.final__bg{ aspect-ratio:1.35; background-position:94% center; }
  /* phone: full-width timer, picture closes the card */
  .timer--hero-m{ width:100%; }
  .hero__body{ padding-bottom:8px; }
  .hero__notes{ font-size:10.5px; opacity:.7; }

  /* на мобилке мелкий кегль не читается — поднимаем служебный текст */
  .deck{ font-size:15px; }
  .note{ font-size:13px; }
  .timer__cell span{ font-size:10px; }
  .tier__list{ font-size:13.5px; }

  /* podium → ranked list: step on the left, prize on the right, 1 → 2 → 3–5 */
  .podium{ grid-template-columns:1fr; gap:10px; margin-top:24px; }
  .pod{ order:0 !important; flex-direction:row-reverse; align-items:stretch; text-align:left;
        background:var(--surface); border-radius:16px; overflow:hidden; }
  .pod__prize{ flex:1; align-items:flex-start; padding:16px 16px 18px; }
  .pod__prize img,.pod--1 .pod__prize img{ width:96px; height:96px; margin-bottom:6px; }
  .pod__name,.pod--1 .pod__name{ font-size:17px; }
  .pod__what{ font-size:13.5px; }
  .pod__base,.pod--1 .pod__base,.pod--2 .pod__base,.pod--3 .pod__base{
    width:84px; height:auto; flex:0 0 auto;
    justify-content:center; padding:0;
    border-radius:0;
  }
  .pod--2 .pod__base,.pod--3 .pod__base{ background:var(--surface-2); }
  .pod__base b,.pod--1 .pod__base b,.pod--2 .pod__base b{ font-size:40px; }
  .pod--3 .pod__base b{ font-size:26px; }
  .pod__base span{ font-size:10px; }
  .box{ align-items:flex-start; }
  .box img{ width:72px; height:72px; }
  .box__what{ font-size:13.5px; }
  .card__list{ font-size:14px; }
  .gloss__body dt,.gloss__body dd{ font-size:14px; }

  .btn{ width:100%; justify-content:space-between; }
  .cta-row{ gap:14px; }
  .card__cta{ gap:12px; }

  .timer__cell{ width:100%; }
  .timer__row{ gap:6px; }

  .final__title{ font-size:26px; }
  .final__q{ font-size:17px; }

  .foot__card{ padding:28px 22px 20px; }
  .foot__grid{ grid-template-columns:1fr; }
  .foot__bottom{ flex-direction:column; gap:6px; }

  /* ниже 1200 автоскейла нет — пиксельные позиции макета заменяем процентными
     и оставляем только те листья, что не лезут на текст */
  .leaf{ width:56px !important; }
  .leaf--hero,.leaf--h2,.leaf--b1,.leaf--b4,.leaf--st,.leaf--p2{ display:none; }
  .leaf--h1{ left:auto; right:4%;  top:6%; }
  .leaf--h3{ left:auto; right:4%;  top:auto; bottom:-1%; width:48px !important; }
  .leaf--p1{ left:auto; right:3%;  top:1%; }
  .leaf--b2{ left:auto; right:4%;  top:4%; }
  .leaf--b3{ left:auto; right:-5%; top:auto; bottom:-6%; width:48px !important; }
  .leaf--f1{ left:auto; right:5%;  top:-2%; }
  .leaf--ft{ left:auto; right:-2%; top:72%; width:72px !important; }
}

@media (max-width:374px){
  .hero__title{ font-size:40px; }
  .hero__body{ padding:24px 16px 8px; }
  .timer__cell b{ font-size:20px; }
  .pod__base,.pod--1 .pod__base,.pod--2 .pod__base,.pod--3 .pod__base{ width:70px; }
  .foot__card{ padding:24px 16px 18px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .leaf{ animation:none !important; }
  .stairs__draw{ transition:none; stroke-dashoffset:0; }
  .btn,.step,.pod__prize img,.tier,.hero__bg,.final__bg{ transition:none !important; }
}

/* ============ REG POPUP (GetCourse widget) ============
   Lives outside .scaler so zoom does not distort the GC iframe.
   Hidden via visibility/opacity, NOT display:none — the widget measures
   its width on mount and collapses inside display:none. */
html.is-locked{ overflow:hidden; }
.reg-modal{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:rgba(12,12,12,.72);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  visibility:hidden; opacity:0; pointer-events:none;
  transition:opacity .25s var(--ease), visibility 0s linear .25s;
}
.reg-modal.is-open{ visibility:visible; opacity:1; pointer-events:auto; transition:opacity .25s var(--ease), visibility 0s; }
.reg-modal__panel{
  position:relative;
  width:min(560px, 100%);
  max-height:92vh; max-height:92dvh;
  background:#fff; color:var(--ink-cream);
  border-radius:var(--r-big);
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:40px 24px 24px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.reg-modal__panel::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  background:var(--grad);
}
.reg-modal__body{ min-height:160px; min-width:0; }
.reg-modal__body iframe{ display:block; width:100%; border:0; }
.reg-modal__error{ padding:28px 0; text-align:center; font-weight:600; }
.reg-modal__close{
  position:absolute; top:16px; right:16px; z-index:2;
  width:40px; height:40px; border:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,18,18,.08); color:var(--ink-cream);
  font:400 24px/1 var(--font); cursor:pointer;
  transition:background .2s var(--ease);
}
.reg-modal__close:hover{ background:rgba(18,18,18,.16); }
@media (max-width:639px){
  .reg-modal{ padding:0; align-items:flex-end; }
  .reg-modal__panel{ width:100%; max-height:94vh; max-height:94dvh; border-radius:var(--r-big) var(--r-big) 0 0; padding:40px 8px max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce){ .reg-modal{ transition:none; } }