/* ── герой: лист стикеров. Тёмная подложка (лайнер), поверх белая плёнка с вырезами точно под стикеры; при скролле плёнку снимают (canvas #film), стикеры остаются. Лист «залипает», пока плёнка снимается ── */
/* скролл героя: 90vh лист стоит (sticky), снимается плёнка; дальше уезжает со страницей */
.hero{--top:clamp(48px,6vw,90px);height:calc(100vh + 90vh);padding:var(--top) 0 0}
.hero>.in{position:sticky;top:var(--top)}
@media(min-width:1001px){
  /* отступ над листом на десктопе вдвое меньше, чем на мобилке: на 1600×900 корешок должен влезать в первый экран */
  .hero{--top:clamp(24px,3vw,45px)}
}
/* подсказка «Листайте вниз»: прибита к окну, по центру свободного места под карточкой (считает JS → --hsb). Показ (.is-on) — только если место есть и следующий блок ещё не на экране. Работает на любом экране */
.hscroll{position:fixed;left:50%;bottom:var(--hsb,40px);transform:translateX(-50%);z-index:5;pointer-events:none;
    display:flex;flex-direction:column;align-items:center;gap:8px;font-size:15px;line-height:20px;font-weight:600;color:var(--text-primary);
    opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.hscroll.is-on{opacity:1;visibility:visible;transition:opacity .3s}
.hscroll svg{box-sizing:border-box;width:32px;height:32px;padding:8px;border-radius:50%;background:#FFC100;fill:none;stroke:#222220;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:hsBob 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .hscroll svg{animation:none}
}
/* 3D-карточка: лист наклоняется за курсором (--tx/--ty), блики стикеров едут в обратную сторону (--gx/--gy/--sx) */
.hsheet{transform:perspective(1600px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);will-change:transform}
.hst::after,.hst__holo,.hst__sheen{will-change:transform}
/* блики — свои слои: их движение не перерисовывает лист с фильтрами */
.hsheet.is-tilt{transition:transform .12s linear}
.hsheet{position:relative;min-height:clamp(460px,44vw,650px);border-radius:32px;padding:clamp(28px,4vw,56px) clamp(20px,4vw,56px);text-align:center;
    border-radius:32px 32px 0 0}
/* низ прямой: продолжается корешком */
/* фон листа (тёмная подложка) — псевдоэлементом; вместе с корешком снизу даёт общую тень */
/* ::before — только тень (маска срезала бы её), ::after — сама подложка с настоящими вырубками по линии отрыва (маска) */
.hsheet::before,.hsheet::after,.hsheet__bg,.hsheet__bg>i{content:"";position:absolute;inset:0 0 -60px;z-index:-1;border-radius:32px;pointer-events:none}
/* тень листа — фильтром на всём листе: повторяет форму с вырубками (box-shadow шёл прямоугольником мимо них) */
.hsheet::before{display:none}
/* загрузка: пока плёнка не собрана (шрифты, картинки стикеров), лист выглядит как плёнка — белый, с заголовком; подложка, стикеры и текст под плёнкой не мелькают. Плёнка ложится точно поверх — подмена незаметна */
.hsheet:not(.is-ready)::after,.hsheet:not(.is-ready) .hsheet__bg>i{background:linear-gradient(180deg,#fbfbfa,#f3f3f2)}
.hsheet:not(.is-ready) h1{color:var(--ink)}
.hsheet:not(.is-ready) #film{display:none}
/* холст 300×150 до сборки, потом скрипт растягивал и сдвигал его = CLS 0,75 */
.hsheet:not(.is-ready) :is(.hst,.hero__under,.hero__cta){visibility:hidden}
/* на тач-экранах фильтр-тень пересчитывался каждый кадр снятия плёнки (фриз) — там обычная тень псевдоэлементом */
/* тень по форме (с вырубками) — фильтром на подложке .hsheet__bg, а не на всём листе. раньше на десктопе тень висела на .hsheet вместе с холстом плёнки — холст перерисовывается каждый кадр, и тень пересчитывалась с ним (кадр 31 мс при 4× замедлении, сейчас 17). Без will-change: у слоя с фильтром браузер накладывает фильтр заново в каждом кадре; без своего слоя тень запекается в слой листа */
.hsheet::after{display:none}
.hsheet__bg{display:block;filter:drop-shadow(0 1px 1px rgba(20,18,18,.14)) drop-shadow(0 22px 26px rgba(20,18,18,.22))}
.hsheet__bg>i{inset:0}
.hsheet::after,.hsheet__bg>i{background:linear-gradient(180deg,transparent calc(100% - 60px),#fbfbfa calc(100% - 60px),#f1f0ee) ,linear-gradient(128deg,#3a3835 0%,#2c2a28 35%,#3d3b38 52%,#2a2826 78%,#353331 100%);   /* корешок белый, как плёнка */box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
    --nt:radial-gradient(circle 8px at 0 calc(100% - 60px),#0000 98%,#000),radial-gradient(circle 8px at 100% calc(100% - 60px),#0000 98%,#000);
    -webkit-mask:var(--nt);-webkit-mask-composite:source-in;mask:var(--nt);mask-composite:intersect}
#film{position:absolute;pointer-events:none;z-index:2}
/* размер и сдвиг — из скрипта: шире листа, чтобы отогнутый край не обрезался */
/* на плёнке (canvas) напечатан h1 и уходит с ней; сам h1 прозрачный — по нему считаются места слов. Под плёнкой на подложке — .hero__under в том же месте */
.hero__head{position:relative}
.hero__under{position:absolute;inset:0;z-index:1;display:grid;place-items:center;margin:0;color:#fff;
    font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:clamp(44px,5.3vw,86px);line-height:.9;letter-spacing:-.01em;text-wrap:balance}
.hero h1{position:relative;z-index:1;color:transparent;margin:0 auto;
    max-width:16ch;font-family:var(--font-head);font-weight:800;text-transform:uppercase;
    font-size:clamp(44px,5.3vw,86px);line-height:.9;letter-spacing:-.01em;text-wrap:balance}
/* кнопки — тоже под плёнкой; кликабельны, когда плёнка снята больше чем наполовину (.is-open) */
.hero__cta{position:relative;z-index:1;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2vw,28px);pointer-events:none}
.hero.is-open .hero__cta{pointer-events:auto}
/* наклейка-ценник на правом нижнем углу листа: жёлтая, с белой вырубкой, слегка повёрнута; правый верхний уголок отклеен (срезан + треугольник изнанки), на hover отклеивается сильнее и чуть приподнимается */
/* корешок: полоса подложки 60px под листом (фон рисует .hsheet::before, растянутый вниз), сверху перфорация с вырубками. Плёнка заканчивается на линии отрыва — снимается, не задевая корешок */
.hstub{position:absolute;left:0;right:0;top:calc(100% - 1px);height:61px;z-index:1;   /* -1px: середина ряда точек ровно на линии отрыва (центры вырубок) */
      /* под холстом плёнки (z 2): отогнутая плёнка ложится поверх корешка */
   display:flex;align-items:center;justify-content:center;gap:14px;
    color:var(--muted);text-decoration:none;font-size:14px;
    padding:0 14px;background:radial-gradient(circle,rgba(20,18,18,.28) 1px,transparent 1.5px) 0 0/8px 2px repeat-x content-box}
/* пунктир только между вырубками */
.hstub b{font-family:var(--font-head);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.02em;color:var(--ink)}
.hstub span{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink)}
.hstub small{display:inline-flex;align-items:center;gap:6px;height:34px;margin-left:6px;padding:0 6px 0 14px;border-radius:99px;background:var(--ink);color:#fff;
    font-size:13.5px;font-weight:700;transition:background .2s}
/* мини-кнопка в стиле главной: пилюля + стрелка в круге */
.hstub small .arr{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--y);color:var(--ink)}
.hstub:hover small{background:#000}
.hstub:hover .arr{transform:translateX(3px)}
.hstub:focus-visible{outline:3px solid var(--y);outline-offset:-6px;border-radius:0 0 32px 32px}
.hero__cta{margin-top:-10px}
/* кнопка ближе к «Сделаем ваши за 3 дня» */
/* стикеры на подложке: картинка плоская на прозрачном фоне, купол по её силуэту даёт тот же фильтр #resin, что у логотипов клиентов. Блик (::after) обрезан маской по той же картинке (--m), поэтому подходит любая вырубка */
.hst{position:absolute;width:var(--sz,clamp(130px,13vw,190px));transform:rotate(var(--r,0deg))}
.hst img{position:relative;display:block;width:100%;  /* без своего слоя: при 3D-наклоне фильтр иначе пересчитывается каждый кадр */
    
    filter:url(#resin-lg)}
/* без тени: стикер приклеен к плоскому пояску */
/* белый поясок без смолы вокруг купола, как у логотипов (там это padding .cut) */
.hst__cut{position:absolute;inset:-7px}
/* силуэт, расширенный на 7px, рисует скрипт плёнки (canvas внутри) */
.hst__cut canvas{display:block;width:100%;height:100%}
/* подпись-особенность: тоже наклейка, плоская (без смолы), вырублена по контуру букв — белую кайму (canvas внутри, z-index:-1) и вырез с надсечкой в плёнке рисует скрипт обводкой текста */
.hst__tag{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);z-index:1;white-space:nowrap;
    font-family:var(--font-head);font-size:clamp(16px,1.4vw,20px);font-weight:800;
    text-transform:uppercase;letter-spacing:.01em;line-height:1;color:var(--ink);isolation:isolate}
/* isolate: кайма (z-index:-1) остаётся под текстом */
/* голография на hover: цвета плывут по знаку (blend color) + светлый блик фольги проходит поперёк; только по маске знака */
.hst__holo,.hst__sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
    -webkit-mask:var(--hm) 0 0/100% 100% no-repeat;mask:var(--hm) 0 0/100% 100% no-repeat}
.hst__holo{mix-blend-mode:color;background:linear-gradient(110deg,#ff3b30,#ff7a1a,#ffd23f,#ffb3c7,#ff8a3d,#ff4f6e,#ffb02e,#ff3b30) 0 0/300% 100%}
.hst__sheen{background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%) 0 0/250% 100% no-repeat}
.hst:hover .hst__holo{opacity:1;animation:holo 2.4s linear infinite}
.hst:hover .hst__sheen{opacity:1;animation:sheen 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  .hst:hover .hst__holo,.hst:hover .hst__sheen{animation:none}
}
.hst__tag canvas{position:absolute;z-index:-1;pointer-events:none}
.hst::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
    background:
      linear-gradient(112deg,transparent 14%,rgba(255,255,255,.16) 24%,rgba(255,255,255,.05) 31%,transparent 35%,
        transparent 37%,rgba(255,255,255,.08) 38.5%,transparent 41%) var(--sx,50%) 0/220% 100% no-repeat,
      radial-gradient(70% 50% at var(--gx,32%) var(--gy,8%),rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
    transition:background-position .4s cubic-bezier(.2,.8,.2,1)}
.hst--pill{left:3%;top:50%;--r:-5deg;--sz:clamp(190px,19vw,250px)}
.hst--holo{right:6%;top:9%;--r:5deg;--sz:clamp(160px,15vw,200px)}
.hst--glow{right:22%;bottom:14%;--r:-4deg;--sz:clamp(105px,9.5vw,135px)}
.hst--bloom{left:27%;bottom:14%;--r:-10deg;--sz:clamp(115px,11vw,155px)}
.hst--evrone{left:45.5%;bottom:12%;--r:-5deg;--sz:clamp(170px,16vw,210px)}
.hst--frame{left:5%;top:10%;--r:-6deg;--sz:clamp(150px,14vw,190px)}
.hst--tiny{left:10%;bottom:9%;--r:12deg;--sz:clamp(30px,2.8vw,40px)}
.hst--m1{left:3.5%;top:72%;--r:-14deg;--sz:clamp(30px,2.8vw,38px)}
.hst--m2{left:94.5%;top:44%;--r:0deg;--sz:clamp(20px,1.9vw,24px)}
.hst--m3{left:22.5%;top:80%;--r:-10deg;--sz:clamp(26px,2.4vw,32px)}
.hst--m4{left:2%;top:36%;--r:75deg;--sz:clamp(36px,3.2vw,44px)}
.hst--m5{left:87%;top:85%;--r:0deg;--sz:clamp(18px,1.6vw,22px)}
.hst--m7{left:41.5%;top:60%;--r:0deg;--sz:clamp(18px,1.6vw,22px)}
.hst--m6{right:6%;top:70%;--r:14deg;--sz:clamp(26px,2.4vw,32px)}
.hst--heart{right:8%;top:39%;--r:8deg;--sz:clamp(100px,9vw,125px)}
@media(max-width:560px){
  /* мобилка: заголовок и кнопка сверху, стикеры — в нижней части листа; подписи и часть мелочи прячем (скрипт плёнки пропускает скрытые) */
  .hsheet{min-height:clamp(540px,150vw,620px);padding:28px 16px}
  /* ниже: было в высоту экрана */
  .hero h1,.hero__under{font-size:clamp(34px,10.4vw,44px)}
  .hst__tag,.hst--m2,.hst--m4,.hst--m7{display:none}
  .hst--frame{left:12%;top:38.5%;--r:-6deg;--sz:26vw}
  .hst--holo{left:auto;right:13%;top:37%;--r:6deg;--sz:24vw}
  .hst--pill{left:11%;top:57%;--r:-8deg;--sz:32vw}
  .hst--heart{left:auto;right:14%;top:55%;--r:8deg;--sz:21vw}
  .hst--bloom{left:10%;bottom:10%;--r:-10deg;--sz:19vw}
  .hst--evrone{left:38%;bottom:14%;--r:-5deg;--sz:27vw}
  .hst--glow{left:auto;right:9%;bottom:7%;--r:-4deg;--sz:17vw}
  .hst--tiny{left:auto;right:42%;top:51%;bottom:auto;--sz:26px}
  .hst--m1{left:auto;right:9%;top:49%;--sz:24px}
  .hst--m3{left:45%;top:auto;bottom:6%;--sz:22px}
  .hst--m5{left:9%;top:50%;--sz:16px}
  .hst--m6{right:auto;left:28%;top:auto;bottom:30%;--sz:22px}
  .hero__cta .btn--go{height:48px;padding:0 5px 0 20px;font-size:15px}
  .hero__cta .btn--go::after{width:38px;height:38px;background-size:18px}
  /* как .btn--s */
  .hstub{gap:8px;padding:0 10px;font-size:13px}
  .hstub b{font-size:14px;text-align:left;line-height:1.05}
  .hstub span{font-size:15px;white-space:nowrap}
  .hstub small{margin-left:0;height:32px;font-size:12.5px;padding:0 5px 0 11px}
  .hstub b{margin-left:12px;font-size:13px;text-wrap:balance}
  .hstub small{margin-right:12px}
}
@media(max-width:374px){
  .hstub small{font-size:0;gap:0;padding:0 5px}
}
@keyframes hsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@keyframes holo{to{background-position:300% 0}}
@keyframes sheen{from{background-position:130% 0}to{background-position:-30% 0}}