/* ==========================================================================
   «Стикерпак» — krutilochka.ru (2026-10-26)
   Каждая соцсеть заливает экран своим цветом; пакеты — виниловые стикеры
   с белой высечкой на листе-подложке. Геометрия первого экрана снята с
   утверждённого макета 1536×1024: 1 единица макета = var(--u).
   ========================================================================== */

:root {
  --u: calc(min(100vw, 1680px) / 1536);
  --ink: #111014;
  --ink-2: #4a4950;
  --ink-3: #75747c;
  --paper: #ffffff;
  --paper-2: #f4f3f6;
  --spark: #ffd23f;
  --save: #ffe53b;
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-pill: 999px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-snap: cubic-bezier(.16, 1, .3, 1);
}

/* Цвет-лист соцсети. По умолчанию — розовый Instagram, он же цвет бренда Lite. */
body.stk { --g: #f50381; --g-soft: #fde6f0; --b-line: #111014; }
body.stk:has(.stk-hero[data-net="telegram"]) { --g: #1a8ad0; --g-soft: #e1f1fb; }
body.stk:has(.stk-hero[data-net="max"])      { --g: #6b3cf0; --g-soft: #ece6fe; }
body.stk:has(.stk-hero[data-net="vk"])       { --g: #0a66e0; --g-soft: #e2edfd; }
body.stk:has(.stk-hero[data-net="tiktok"])   { --g: #121216; --g-soft: #ffe3ea; --b-line: #25f4ee; }
body.stk:has(.stk-hero[data-net="twitch"])   { --g: #8a3cf2; --g-soft: #f0e6fe; }
body.stk:has(.stk-hero[data-net="youtube"])  { --g: #e8101a; --g-soft: #fde4e5; }
body.stk:has(.stk-hero[data-net="tiktok"]) .stk-pack__price,
body.stk:has(.stk-hero[data-net="tiktok"]) .stk-order__go,
body.stk:has(.stk-hero[data-net="tiktok"]) .stk-how__n { background: #fe2c55; }

body.stk {
  font-family: var(--font);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.stk .content-section-layout { padding-top: 0 !important; }

.stk svg { width: 1em; height: 1em; fill: currentColor; flex: none; }
.stk a { text-decoration: none; }
.stk :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 12px; }

/* ---------- Шапка ---------- */
.stk-head {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: calc(70 * var(--u));
  width: calc(1536 * var(--u));
  height: calc(100 * var(--u));
  margin: 0 auto;
  padding: 0 calc(40 * var(--u)) 0 calc(48 * var(--u));
  color: #fff;
  background: var(--g);
  box-shadow: 0 0 0 100vmax var(--g);
  clip-path: inset(0 -100vmax);
}
body.stk:has(.stk-hero) .stk-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  box-shadow: none;
}
.stk-logo { display: flex; align-items: center; gap: calc(12 * var(--u)); color: #fff; }
.stk-logo:hover { color: #fff; }
.stk-logo__mark {
  width: calc(62 * var(--u));
  height: calc(62 * var(--u));
  background-repeat: no-repeat;
  background-size: auto calc(66 * var(--u));
  background-position: calc(-1 * var(--u)) center;
  filter: brightness(0) invert(1);
}
.stk-logo__name { font-size: calc(37 * var(--u)); font-weight: 800; letter-spacing: -.02em; line-height: 1; white-space: nowrap; }
.stk-logo__name b { font-weight: 600; }
.stk-head__nav { display: flex; gap: calc(45 * var(--u)); }
.stk-head__nav a { color: #fff; font-size: calc(19 * var(--u)); font-weight: 700; }
.stk-head__nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: .25em; }
.stk-head__track {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(10 * var(--u));
  height: calc(56 * var(--u));
  padding: 0 calc(26 * var(--u));
  border: calc(2.5 * var(--u)) solid #fff;
  border-radius: var(--r-pill);
  color: #fff;
  font-size: calc(18 * var(--u));
  font-weight: 700;
  transition: background .2s, color .2s;
}
.stk-head__track svg { font-size: calc(24 * var(--u)); }
.stk-head__track:hover { background: #fff; color: var(--ink); }

/* ---------- Первый экран ---------- */
.stk-hero { position: relative; background: var(--g); overflow: hidden; }
.stk-frame { position: relative; width: calc(1536 * var(--u)); height: calc(798 * var(--u)); margin: 0 auto; }

.stk-h1 {
  position: absolute;
  left: calc(44 * var(--u));
  top: calc(140 * var(--u));
  width: calc(680 * var(--u));
  margin: 0;
  font-weight: 900;
  letter-spacing: -.035em;
  color: #fff;
  z-index: 3;
}
.stk-h1 span { display: block; }
.stk-h1 { --k: 1; } /* --k ставит sticker.js, если заголовок не влез */
.stk-h1__a, .stk-h1__b { font-size: calc(110 * var(--u) * var(--k)); line-height: calc(96 * var(--u) * var(--k)); letter-spacing: -.055em; }
.stk-h1__b { color: var(--b-line); }
.stk-h1__c { margin-top: calc(10 * var(--u)); width: calc(620 * var(--u)); font-size: calc(70 * var(--u) * var(--k)); line-height: calc(66 * var(--u) * var(--k)); letter-spacing: -.035em; }
.stk-h1--m .stk-h1__a, .stk-h1--m .stk-h1__b { font-size: calc(84 * var(--u) * var(--k)); line-height: calc(76 * var(--u) * var(--k)); }
.stk-h1--s .stk-h1__a, .stk-h1--s .stk-h1__b { font-size: calc(64 * var(--u) * var(--k)); line-height: calc(60 * var(--u) * var(--k)); }
.stk-h1--s .stk-h1__c { font-size: calc(60 * var(--u) * var(--k)); line-height: calc(56 * var(--u) * var(--k)); }

.stk-facts {
  position: absolute;
  left: calc(48 * var(--u));
  top: calc(474 * var(--u));
  display: flex;
  gap: calc(28 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 3;
}
.stk-facts li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  max-width: calc(220 * var(--u));
  color: #fff;
  font-size: calc(18.7 * var(--u));
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
}
.stk-facts li:first-child, .stk-facts li:nth-child(2) { max-width: calc(158 * var(--u)); }
.stk-facts li:last-child { max-width: calc(250 * var(--u)); }
.stk-facts__i {
  display: grid;
  place-items: center;
  width: calc(54 * var(--u));
  height: calc(54 * var(--u));
  border-radius: 50%;
  background: #fff;
  color: var(--g);
  font-size: calc(26 * var(--u));
  flex: none;
}

.stk-order {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(636 * var(--u));
  width: calc(656 * var(--u));
  height: calc(96 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  padding: 0 calc(18 * var(--u)) 0 calc(24 * var(--u));
  background: #fff;
  border-radius: var(--r-pill);
  box-shadow: 0 calc(14 * var(--u)) calc(40 * var(--u)) rgba(0, 0, 0, .2);
  z-index: 5;
  margin: 0;
}
.stk-order__field { flex: 1; display: flex; align-items: center; gap: calc(22 * var(--u)); margin: 0; min-width: 0; }
.stk-order__icon {
  display: grid; place-items: center; flex: none;
  width: calc(62 * var(--u)); height: calc(62 * var(--u));
  border-radius: 50%; background: var(--paper-2); color: var(--ink-2); font-size: calc(28 * var(--u));
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.stk-order input {
  flex: 1; min-width: 0; height: calc(62 * var(--u));
  border: 0; outline: 0; background: transparent;
  font: 500 calc(20 * var(--u)) / 1 var(--font); color: var(--ink);
}
.stk-order input::placeholder { color: var(--ink-3); opacity: 1; }
/* поле и есть белая плашка: рамка фокуса — вокруг всей формы, а не внутри */
.stk-order input:focus-visible { outline: 0; }
.stk-order:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; }
.stk-order__go {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  width: calc(220 * var(--u)); height: calc(62 * var(--u));
  border: 0; border-radius: var(--r-pill);
  background: var(--g); color: #fff;
  font: 700 calc(22 * var(--u)) / 1 var(--font);
  cursor: pointer;
  transition: transform .18s var(--ease-out), filter .18s;
}
.stk-order__go svg { font-size: calc(26 * var(--u)); transition: transform .2s var(--ease-out); }
.stk-order__go:hover { filter: brightness(1.08); }
.stk-order__go:hover svg { transform: translateX(3px); }
.stk-order__go:active { transform: scale(.97); }
.stk-order.is-empty { animation: stk-nudge .42s var(--ease-out); }
.stk-order__pick {
  position: absolute; left: calc(24 * var(--u)); bottom: calc(100% + 12 * var(--u));
  display: flex; align-items: baseline; gap: .4em; max-width: calc(100% - 48 * var(--u));
  margin: 0; padding: calc(8 * var(--u)) calc(18 * var(--u));
  border-radius: var(--r-pill); background: var(--ink); color: #fff;
  font: 600 max(15px, calc(17 * var(--u))) / 1.2 var(--font); white-space: nowrap;
  box-shadow: 0 calc(6 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.18);
}
.stk-order__pick span { opacity: .72; }
.stk-order__pick b { font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.stk-order__pick b:empty, .stk-order__pick:has(b:empty) { display: none; }
.stk-order__pick.is-new { animation: stk-pop .32s var(--ease-out); }
@keyframes stk-pop { 0% { transform: scale(.92) } 60% { transform: scale(1.04) } 100% { transform: none } }
@keyframes stk-nudge { 0%,100% { transform: none } 25% { transform: translateX(-8px) } 60% { transform: translateX(6px) } }

/* ---------- Лист стикеров ---------- */
.stk-sheet { position: absolute; left: calc(636 * var(--u)); top: calc(218 * var(--u)); width: calc(890 * var(--u)); height: calc(580 * var(--u)); z-index: 2; }
.stk-sheet__bg, .stk-sheet__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.stk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.stk-pack {
  --w: 248; --h: 224;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  color: var(--ink);
  transition: transform .35s var(--ease-snap), filter .35s var(--ease-out);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Высечка: белый контур повторяет цифры, подпись и плашку (SVG-фильтр #stk-cut) */
.stk-pack__in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  filter: url(#stk-cut);
}
.stk-pack:hover { color: var(--ink); transform: translateY(calc(-4 * var(--u))) rotate(-1deg); }
.stk-pack__qty { font-size: calc(112 * var(--u)); font-weight: 900; line-height: .8; letter-spacing: -.06em; margin-right: .06em; }
.stk-pack[data-len="4"] .stk-pack__qty { font-size: calc(104 * var(--u)); }
.stk-pack[data-len="5"] .stk-pack__qty { font-size: calc(84 * var(--u)); }
.stk-pack[data-len="6"] .stk-pack__qty { font-size: calc(70 * var(--u)); }
.stk-pack[data-len="7"] .stk-pack__qty { font-size: calc(58 * var(--u)); }
.stk-pack__unit { margin-top: calc(-2 * var(--u)); font-size: calc(25 * var(--u)); font-weight: 900; letter-spacing: -.015em; line-height: 1.05; text-align: center; max-width: calc((var(--w) - 20) * var(--u)); }
.stk-pack__price {
  margin-top: calc(8 * var(--u));
  display: grid; place-items: center;
  min-width: calc((var(--w) - 36) * var(--u));
  height: calc(64 * var(--u));
  padding: 0 calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
  background: linear-gradient(180deg, color-mix(in srgb, var(--g) 82%, #fff) 0%, var(--g) 46%, var(--g) 100%);
  color: #fff;
  font-size: calc(46 * var(--u));
  font-weight: 900;
  letter-spacing: -.035em;
  box-shadow: inset 0 calc(-4 * var(--u)) 0 rgba(0,0,0,.12);
}
.stk-pack__tab {
  display: inline-flex; align-items: center; gap: calc(8 * var(--u));
  margin-bottom: calc(10 * var(--u));
  padding: calc(9 * var(--u)) calc(18 * var(--u));
  border-radius: calc(16 * var(--u));
  background: var(--g); color: #fff;
  font-size: calc(24 * var(--u)); font-weight: 800; white-space: nowrap; line-height: 1;
}
.stk-pack__tab svg { color: var(--spark); font-size: calc(24 * var(--u)); }
.stk-pack__save {
  margin-top: calc(-10 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  border-radius: calc(14 * var(--u));
  background: var(--save); color: var(--ink);
  font-size: calc(21 * var(--u)); font-weight: 800; white-space: nowrap; line-height: 1;
  transform: rotate(-4deg);
  position: relative;
}

/* Слоты листа (коробки сняты с макета, относительно листа) */
.stk-pack--a { --w: 262; --h: 312; left: calc(44 * var(--u)); top: calc(18 * var(--u)); }
.stk-pack--b { left: calc(328 * var(--u)); top: calc(60 * var(--u)); rotate: -2deg; }
.stk-pack--c { --w: 254; left: calc(588 * var(--u)); top: calc(60 * var(--u)); rotate: 1.5deg; }
.stk-pack--d { --w: 244; --h: 222; left: calc(302 * var(--u)); top: calc(304 * var(--u)); rotate: -3deg; }
.stk-pack--e { --w: 284; --h: 230; left: calc(562 * var(--u)); top: calc(304 * var(--u)); rotate: 2deg; }
.stk-pack--a .stk-pack__qty { font-size: calc(132 * var(--u)); }
.stk-pack--a .stk-pack__unit { font-size: calc(28 * var(--u)); }
.stk-pack--a .stk-pack__price { height: calc(76 * var(--u)); font-size: calc(54 * var(--u)); }
.stk-sheet .stk-pack:not(.stk-pack--a):has(.stk-pack__tab) .stk-pack__qty { font-size: calc(76 * var(--u)); }
.stk-sheet .stk-pack:not(.stk-pack--a):has(.stk-pack__tab) .stk-pack__tab { font-size: calc(18 * var(--u)); margin-bottom: calc(6 * var(--u)); }

/* Отклеенный стикер: приподнят и повёрнут — это выбранный пакет */
.stk-pack.is-picked { z-index: 4; transform: rotate(-9deg) translateY(calc(-6 * var(--u))); }
.stk-pack.is-picked .stk-pack__in { filter: url(#stk-cut) drop-shadow(0 calc(18 * var(--u)) calc(16 * var(--u)) rgba(60, 0, 30, .25)); }
.stk-pack.is-picked:hover { transform: rotate(-10deg) translateY(calc(-9 * var(--u))); }

.stk-arrow { position: absolute; left: calc(696 * var(--u)); top: calc(584 * var(--u)); width: calc(104 * var(--u)); height: calc(90 * var(--u)); object-fit: cover; z-index: 4; pointer-events: none; }

.stk-spark { position: absolute; width: calc(44 * var(--u)); height: calc(44 * var(--u)); z-index: 7; pointer-events: none; }
.stk-spark i { position: absolute; left: 50%; top: 50%; width: calc(22 * var(--u)); height: calc(5 * var(--u)); margin: calc(-2.5 * var(--u)) 0 0 calc(-11 * var(--u)); border-radius: 3px; background: var(--spark); }
.stk-spark--top { left: calc(826 * var(--u)); top: calc(68 * var(--u)); }
.stk-spark--top i:nth-child(1) { transform: translate(calc(4 * var(--u)), calc(-6 * var(--u))) rotate(-58deg); }
.stk-spark--top i:nth-child(2) { transform: translate(calc(14 * var(--u)), calc(8 * var(--u))) rotate(-28deg); width: calc(18 * var(--u)); }
.stk-spark--top i:nth-child(3) { display: none; }
.stk-spark--mid { left: calc(622 * var(--u)); top: calc(440 * var(--u)); }
.stk-spark--mid i:nth-child(1) { transform: rotate(35deg) translateX(calc(-6 * var(--u))) translateY(calc(-12 * var(--u))); }
.stk-spark--mid i:nth-child(2) { transform: rotate(-12deg) translateY(calc(14 * var(--u))); }
.stk-spark--mid i:nth-child(3) { display: none; }

/* ---------- Ряд стикеров соцсетей ---------- */
.stk-nets { position: absolute; left: calc(724 * var(--u)); top: calc(84 * var(--u)); width: calc(748 * var(--u)); height: calc(140 * var(--u)); z-index: 6; }
.stk-nets > .stk-net { position: absolute; top: calc(6 * var(--u)); left: calc((var(--cx) - 724 - 56) * var(--u)); }
.stk-nets > .stk-net:nth-child(1) { --cx: 781; } .stk-nets > .stk-net:nth-child(2) { --cx: 891; } .stk-nets > .stk-net:nth-child(3) { --cx: 997; }
.stk-nets > .stk-net:nth-child(4) { --cx: 1100; } .stk-nets > .stk-net:nth-child(5) { --cx: 1206; } .stk-nets > .stk-net:nth-child(6) { --cx: 1313; } .stk-nets > .stk-net:nth-child(7) { --cx: 1421; }
.stk-net { position: relative; width: calc(112 * var(--u)); display: flex; justify-content: center; }
.stk-net__btn { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; }
/* Стикеры соцсетей — один плейт-спрайт (assets/plates/net-stickers.png, 748×114 ед. макета) */
.stk-net__ico {
  --k: var(--u); --d: 90; --x: 0; --y: 13;
  display: block;
  width: calc(var(--d) * var(--k)); height: calc(var(--d) * var(--k));
  margin-top: calc(10 * var(--u));
  background-repeat: no-repeat;
  background-size: calc(748 * var(--k)) calc(114 * var(--k));
  background-position: calc(var(--x) * -1 * var(--k)) calc(var(--y) * -1 * var(--k));
  border-radius: 50%;
  transition: transform .3s var(--ease-snap);
}
.stk-ico--instagram { --d: 110; --x: 2; --y: 3; --k: calc(var(--u) * 90 / 110); }
.stk-ico--telegram { --x: 122; } .stk-ico--max { --x: 228; } .stk-ico--vk { --x: 331; }
.stk-ico--tiktok { --x: 437; } .stk-ico--twitch { --x: 544; } .stk-ico--youtube { --x: 652; }
.stk-net.is-current .stk-net__ico { --k: calc(var(--u) * 110 / 90); margin-top: 0; }
.stk-net.is-current .stk-ico--instagram { --k: var(--u); }
.stk-net__btn:hover .stk-net__ico { transform: rotate(-8deg) scale(1.06); }
.stk-net__name { font-size: calc(16.5 * var(--u)); font-weight: 700; line-height: 1; white-space: nowrap; padding: calc(4 * var(--u)) 0; }
.stk-net.is-current .stk-net__name { margin-top: calc(-14 * var(--u)); padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: var(--r-pill); background: #fff; color: var(--ink); position: relative; }
.stk-net__menu {
  position: absolute; top: calc(100% + 10px); left: 50%;
  min-width: 260px; max-height: 60vh; overflow: auto;
  margin: 0; padding: 8px; list-style: none;
  background: #fff; border-radius: 22px;
  box-shadow: 0 0 0 6px #fff, 0 18px 40px rgba(20, 0, 10, .25);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px) rotate(-1deg);
  transition: opacity .18s, transform .25s var(--ease-out), visibility 0s .25s;
}
.stk-net:last-child .stk-net__menu, .stk-net:nth-last-child(2) .stk-net__menu { left: auto; right: 0; transform: translate(0, -6px) rotate(1deg); }
.stk-net.is-open .stk-net__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.stk-net:last-child.is-open .stk-net__menu, .stk-net:nth-last-child(2).is-open .stk-net__menu { transform: none; }
.stk-net__menu a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.stk-net__menu a:hover { background: var(--g-soft); color: var(--ink); }
.stk-net__menu a[aria-current] { background: var(--g); color: #fff; }

/* ---------- «Как это работает» ---------- */
.stk-how {
  position: relative;
  width: calc(1536 * var(--u));
  margin: 0 auto;
  padding: calc(26 * var(--u)) calc(66 * var(--u)) calc(56 * var(--u));
  background: #fff;
  border-radius: calc(44 * var(--u)) calc(44 * var(--u)) 0 0;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax -100vmax);
  z-index: 3;
}
.stk-how__title { margin: 0; font-size: calc(56 * var(--u)); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; }
.stk-how__steps { display: grid; grid-template-columns: 480fr 470fr 452fr; margin: calc(14 * var(--u)) 0 0; padding: 0; list-style: none; }
.stk-how__steps li { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: calc(16 * var(--u)); align-items: start; }
.stk-how__n { grid-row: 1 / 3; display: grid; place-items: center; width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: 50%; background: var(--g); color: #fff; font-size: calc(24 * var(--u)); font-weight: 800; font-style: italic; }
.stk-how__i { grid-row: 1 / 3; display: grid; place-items: center; width: calc(74 * var(--u)); height: calc(74 * var(--u)); border-radius: 50%; background: var(--g-soft); color: var(--ink); font-size: calc(32 * var(--u)); }
.stk-how__steps b { font-size: calc(23 * var(--u)); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; margin-top: calc(6 * var(--u)); }
.stk-how__steps li > span:last-child { font-size: calc(18.5 * var(--u)); color: var(--ink-3); line-height: 1.32; max-width: calc(290 * var(--u)); }

/* ---------- Ещё пакеты ---------- */
.stk-wrap { width: min(1536px, 100% - 32px); margin: 0 auto; padding: 0 calc(66 * var(--u)); }
.stk-more { background: #fff; padding: 24px 0 56px; }
.stk-more__title { margin: 0 0 22px; font-size: clamp(26px, 2.6vw, 40px); font-weight: 900; letter-spacing: -.03em; }
.stk-more__title span { color: var(--ink-3); font-weight: 700; }
.stk-more__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 22px; margin-bottom: 44px; }
.stk-more .stk-pack { --u: .78px; position: relative; width: auto; height: 210px; }
.stk-more__feat { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stk-more__feat li { padding: 10px 16px; border-radius: var(--r-pill); background: var(--paper-2); font-size: 15px; font-weight: 600; }

/* ---------- Узкие экраны: тот же мир, обычный поток ---------- */
@media (max-width: 1099.98px) {
  :root { --u: 1px; }
  .stk-head, body.stk:has(.stk-hero) .stk-head { position: relative; left: auto; transform: none; width: 100%; height: 64px; gap: 16px; padding: 0 16px; background: var(--g); box-shadow: none; clip-path: none; }
  .stk-logo__mark { width: 40px; height: 40px; background-size: auto 42px; }
  .stk-logo__name { font-size: 22px; }
  .stk-head__nav { display: none; }
  .stk-head__track { height: 44px; padding: 0 16px; font-size: 15px; }
  .stk-frame { width: 100%; height: auto; display: flex; flex-direction: column; padding: 8px 16px 28px; }
  .stk-frame > * { position: static !important; width: auto !important; height: auto !important; transform: none; }
  .stk-nets { order: 1; display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 10px 16px 8px; scrollbar-width: none; }
  .stk-net, .stk-net.is-current { width: 78px; flex: none; position: static; }
  .stk-net__ico, .stk-net.is-current .stk-net__ico { --k: calc(62px / 90); margin: 0; }
  .stk-ico--instagram, .stk-net.is-current .stk-ico--instagram { --k: calc(62px / 110); }
  .stk-net__name { font-size: 12.5px; }
  .stk-net.is-current .stk-net__name { margin-top: -10px; padding: 4px 9px; }
  .stk-net__menu { position: fixed; top: auto; bottom: 12px; left: 12px !important; right: 12px !important; transform: translateY(12px) !important; max-height: 55vh; }
  .stk-net.is-open .stk-net__menu { transform: none !important; }
  .stk-h1 { order: 2; margin-top: 18px; }
  .stk-h1__a, .stk-h1__b, .stk-h1--m .stk-h1__a, .stk-h1--m .stk-h1__b { font-size: clamp(40px, 11.5vw, 84px); line-height: .92; }
  .stk-h1--s .stk-h1__a, .stk-h1--s .stk-h1__b { font-size: clamp(32px, 8.6vw, 64px); line-height: .95; }
  .stk-h1__c, .stk-h1--s .stk-h1__c { font-size: clamp(26px, 7.4vw, 56px); line-height: 1; margin-top: 8px; }
  .stk-facts { order: 3; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; }
  .stk-facts li, .stk-facts li:first-child, .stk-facts li:nth-child(2) { max-width: none; font-size: 15px; }
  .stk-facts__i { width: 40px; height: 40px; font-size: 20px; }
  .stk-sheet { order: 4; margin: 26px 0 0; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; border-radius: 22px; background: #eeedf1; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05), 0 10px 30px rgba(0,0,0,.12); }
  .stk-sheet__bg { display: none; }
  .stk-sheet .stk-pack { --u: .62px; position: relative; left: auto; top: auto; width: auto; height: 160px; }
  .stk-pack__in, .stk-pack.is-picked .stk-pack__in { filter: url(#stk-cut-s); }
  .stk-sheet .stk-pack.is-picked { transform: rotate(-3deg); }
  .stk-sheet .stk-pack { rotate: 0deg; }
  .stk-sheet .stk-pack--a { grid-column: 1 / -1; height: 180px; }
  .stk-pack__unit { font-size: 15px; }
  .stk-arrow, .stk-spark { display: none; }
  .stk-order { order: 5; position: sticky !important; bottom: 10px; z-index: 20; margin-top: 18px; height: 64px !important; padding: 0 6px 0 8px; gap: 8px; }
  .stk-order__icon { width: 44px; height: 44px; font-size: 20px; }
  .stk-order__field { gap: 10px; }
  .stk-order input { height: 48px; font-size: 16px; }
  .stk-order__go { width: auto; height: 52px; padding: 0 18px; font-size: 16px; }
  .stk-how { width: 100%; padding: 28px 16px 36px; border-radius: 26px 26px 0 0; margin-top: -18px; }
  .stk-how__title { font-size: 30px; }
  .stk-how__steps { grid-template-columns: 1fr; gap: 18px; margin-top: 18px; }
  .stk-how__n { width: 40px; height: 40px; font-size: 18px; }
  .stk-how__i { width: 52px; height: 52px; font-size: 24px; }
  .stk-how__steps b { font-size: 18px; }
  .stk-how__steps li > span:last-child { font-size: 15px; max-width: none; }
  .stk-wrap { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .stk *, .stk *::before, .stk *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* Глянец плашки цены */
.stk-pack__price { position: relative; overflow: hidden; }
.stk-pack__price::before {
  content: "";
  position: absolute;
  left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(4 * var(--u));
  height: 42%;
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) / calc(12 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u));
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.06));
  pointer-events: none;
}
.stk-pack__price { text-shadow: 0 calc(2.5 * var(--u)) 0 rgba(0,0,0,.2), 0 calc(-1 * var(--u)) 0 rgba(255,255,255,.35); }
.stk-pack__tab, .stk-pack__save { text-shadow: 0 calc(1 * var(--u)) 0 rgba(0,0,0,.12); }

/* Числа из растровых глянцевых цифр */
.stk-dg { display: inline-flex; align-items: flex-end; height: var(--dh); }
.stk-dg i { display: block; width: calc(var(--dh) * var(--a)); height: 100%; background: center / 100% 100% no-repeat; }
.stk-dg--black i { transform: scaleX(1.06); transform-origin: left bottom; }
.stk-dg--black i + i { margin-left: calc(var(--dh) * .02); }
.stk-dg--white i + i { margin-left: calc(var(--dh) * -.05); }
.stk-dg b { display: block; width: calc(var(--dh) * .26); }
.stk-pack__qty { --dh: calc(98 * var(--u)); display: flex; background: none; -webkit-text-fill-color: currentColor; filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.18)); line-height: 1; margin: 0; }
.stk-pack[data-len="4"] .stk-pack__qty { --dh: calc(86 * var(--u)); }
.stk-pack[data-len="5"] .stk-pack__qty { --dh: calc(70 * var(--u)); }
.stk-pack[data-len="6"] .stk-pack__qty { --dh: calc(62 * var(--u)); }
.stk-pack[data-len="7"] .stk-pack__qty { --dh: calc(52 * var(--u)); }
.stk-pack--a .stk-pack__qty { --dh: calc(116 * var(--u)); }
.stk-sheet .stk-pack:not(.stk-pack--a):has(.stk-pack__tab) .stk-pack__qty { --dh: calc(70 * var(--u)); }
.stk-pack__price { --dh: calc(50 * var(--u)); background: var(--g); text-shadow: none; }
.stk-pack--a .stk-pack__price { --dh: calc(58 * var(--u)); }
.stk-pack__price::before {
  inset: 0; left: 0; right: 0; top: 0; height: auto;
  border-radius: inherit;
  background: none;
  border-image: url('../../../plates/pill-gloss.png') 45% 22% fill / auto;
  border-width: calc(28 * var(--u)) calc(60 * var(--u));
  border-style: solid;
  mix-blend-mode: hard-light;
  opacity: .9;
}
.stk-pack__price .stk-dg { position: relative; z-index: 1; }
.stk-pack__in { gap: 0; }

/* ==========================================================================
   Секции ниже первого экрана — белый лист, тот же гротеск, стикеры
   ========================================================================== */
.stk-wrap { width: min(1400px, 100% - 32px); margin: 0 auto; padding: 0; }
.stk-sec { padding: clamp(48px, 6vw, 96px) 0; background: #fff; }
.stk-sec + .stk-sec { padding-top: 0; }
.stk-sec__head { max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.stk-h2 { margin: 0; font-size: clamp(30px, 3.6vw, 52px); font-weight: 900; letter-spacing: -.04em; line-height: 1.04; color: var(--ink); text-wrap: balance; }
.stk-lead { margin: 14px 0 0; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; color: var(--ink-2); max-width: 62ch; }

/* SEO-текст */
.stk-read__col { max-width: 760px; }
.stk-read__text, .stk-prose { font-size: 18px; line-height: 1.7; color: var(--ink-2); overflow-wrap: anywhere; }
.stk-prose h2, .stk-prose h3 { color: var(--ink); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; margin: 1.6em 0 .5em; }
.stk-prose h2 { font-size: 30px; } .stk-prose h3 { font-size: 23px; }
.stk-prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--g); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.stk-prose ul, .stk-prose ol { padding-left: 1.2em; }
.stk-prose img { max-width: 100%; height: auto; border-radius: 18px; }

/* Карточки-стикеры (преимущества) */
.stk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.stk-card {
  position: relative; padding: 26px 24px 24px;
  background: #fff; border-radius: 28px;
  box-shadow: 0 0 0 1px rgba(17,16,20,.06), 0 0 0 8px #fff, 0 0 0 9px rgba(17,16,20,.07), 0 14px 30px rgba(20,0,10,.08);
  transition: transform .35s var(--ease-snap);
}
.stk-card:nth-child(odd) { transform: rotate(-1.2deg); } .stk-card:nth-child(even) { transform: rotate(1deg); }
.stk-card:hover { transform: rotate(0) translateY(-4px); }
.stk-card__i { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: var(--g); color: #fff; font-size: 26px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.14); }
.stk-card__t { margin: 18px 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.stk-card__p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.stk-why--alt { background: var(--paper-2); padding-top: clamp(48px, 6vw, 96px) !important; }
.stk-why--alt .stk-card { box-shadow: 0 0 0 1px rgba(17,16,20,.06), 0 14px 30px rgba(20,0,10,.07); }

/* Крупное заявление */
.stk-statement { background: var(--g); color: #fff; padding: clamp(56px, 7vw, 110px) 0 !important; }
.stk-statement__h { color: #fff; max-width: 18ch; font-size: clamp(36px, 5vw, 76px); }
.stk-statement__go { margin: 32px 0 0; }
.stk-statement .stk-btn--light:hover { color: var(--ink); }
.stk-statement__p { margin: 20px 0 0; max-width: 60ch; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; font-weight: 500; }

/* Шаги */
.stk-steps__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.stk-steps__list--3 { grid-template-columns: repeat(3, 1fr); }
.stk-steps__list li { padding: 22px; border-radius: 24px; background: var(--paper-2); }
.stk-steps__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--g); color: #fff; font-size: 23px; font-weight: 800; font-style: italic; box-shadow: 0 0 0 5px #fff; }
.stk-steps__list h3 { margin: 16px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.stk-steps__list p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }

/* FAQ */
.stk-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.stk-faq__list { display: grid; gap: 14px; }
.stk-faq__item { border-radius: 22px; background: var(--paper-2); transition: background .2s; }
.stk-faq__item[open] { background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.stk-faq__item summary { display: flex; align-items: center; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; }
.stk-faq__item summary::-webkit-details-marker { display: none; }
.stk-faq__item h3 { flex: 1; margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.stk-faq__x { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--g); transition: transform .3s var(--ease-snap); }
.stk-faq__x::before, .stk-faq__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; margin: -1.5px 0 0 -7px; border-radius: 2px; background: #fff; }
.stk-faq__x::after { transform: rotate(90deg); }
.stk-faq__item[open] .stk-faq__x { transform: rotate(45deg); }
.stk-faq__a { padding: 0 22px 22px; }
.stk-faq__a p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

/* Счётчики */
.stk-count { background: #fff; }
.stk-count__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.stk-count__item { display: grid; gap: 10px; justify-items: start; padding: 26px 26px 22px; border-radius: 28px; background: var(--paper-2); }
.stk-count__n { --dh: clamp(42px, 4vw, 62px); display: flex; filter: drop-shadow(0 3px 3px rgba(0,0,0,.15)); }
.stk-count__t { font-size: 16px; font-weight: 700; color: var(--ink-2); }

/* Ссылки-чипы */
.stk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.stk-chips a { display: inline-block; padding: 11px 18px; border-radius: var(--r-pill); background: var(--paper-2); color: var(--ink); font-weight: 700; }
.stk-chips a:hover { background: var(--g); color: #fff; }

/* Кнопки */
.stk-btn { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 28px; border-radius: var(--r-pill); background: var(--g); color: #fff; font-weight: 800; font-size: 18px; border: 0; }
.stk-btn:hover { color: #fff; filter: brightness(1.08); }
.stk-btn--light { background: #fff; color: var(--ink); }
.stk-btn--light:hover { color: var(--ink); }

/* ---------- Первый экран обычных страниц и главной ---------- */
.stk-hero--page { padding: calc(110 * var(--u)) 0 clamp(40px, 5vw, 80px); }
.stk-page { position: relative; width: calc(1536 * var(--u)); margin: 0 auto; padding: 0 calc(44 * var(--u)); }
.stk-page__text { position: relative; z-index: 3; max-width: calc(760 * var(--u)); }
.stk-ph1 { margin: calc(20 * var(--u)) 0 0; font-weight: 900; letter-spacing: -.05em; line-height: .92; font-size: clamp(40px, calc(96 * var(--u)), 110px); color: #fff; text-wrap: balance; }
.stk-ph1 span { display: block; }
.stk-ph1__b { color: var(--b-line); }
.stk-page__claim { margin: calc(14 * var(--u)) 0 0; font-size: clamp(26px, calc(64 * var(--u)), 74px); font-weight: 900; letter-spacing: -.035em; line-height: 1; color: #fff; }
.stk-page__desc { margin: calc(22 * var(--u)) 0 0; max-width: 56ch; font-size: clamp(16px, calc(20 * var(--u)), 22px); line-height: 1.5; color: #fff; font-weight: 500; }
.stk-facts--flow { position: static; margin-top: calc(30 * var(--u)); flex-wrap: wrap; row-gap: 14px; }
.stk-facts--flow li, .stk-facts--flow li:first-child, .stk-facts--flow li:nth-child(2) { max-width: calc(220 * var(--u)); }
.stk-hero--page .stk-btn { margin-top: 26px; }
.stk-hero--home { min-height: calc(860 * var(--u)); }
.stk-home-sheet { position: absolute; right: calc(44 * var(--u)); top: calc(20 * var(--u)); width: calc(720 * var(--u)); height: calc(530 * var(--u)); }
.stk-home-sheet .stk-sheet__bg, .stk-home-sheet .stk-sheet__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stk-home-nets { position: absolute; inset: 0; }
.stk-home-net { position: absolute; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: calc(170 * var(--u)); color: var(--ink); transition: transform .35s var(--ease-snap); }
.stk-home-net img { width: calc(150 * var(--u)); height: calc(150 * var(--u)); filter: drop-shadow(0 calc(8 * var(--u)) calc(10 * var(--u)) rgba(40,0,20,.22)); }
.stk-home-net span { padding: calc(5 * var(--u)) calc(14 * var(--u)); border-radius: var(--r-pill); background: #fff; font-size: calc(18 * var(--u)); font-weight: 800; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.stk-home-net:hover { color: var(--ink); transform: rotate(-6deg) scale(1.06); }
.stk-home-net--1 { left: 6%;  top: 4%;  rotate: -8deg; } .stk-home-net--2 { left: 37%; top: 6%; rotate: 4deg; }
.stk-home-net--3 { left: 68%; top: 3%;  rotate: -3deg; } .stk-home-net--4 { left: 2%;  top: 50%; rotate: 5deg; }
.stk-home-net--5 { left: 27%; top: 52%; rotate: -5deg; } .stk-home-net--6 { left: 52%; top: 49%; rotate: 3deg; }
.stk-home-net--7 { left: 77%; top: 53%; rotate: -6deg; }

/* ---------- Каталог на главной ---------- */
.stk-catalog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); grid-auto-rows: 4px; grid-auto-flow: row dense; column-gap: 24px; align-items: start; }
.stk-netc { --g-local: var(--g); margin: 0 0 24px; border-radius: 28px; background: var(--paper-2); overflow: hidden; scroll-margin-top: 20px; }
.stk-netc[data-net="instagram"] { --g: #f50381; } .stk-netc[data-net="telegram"] { --g: #1a8ad0; } .stk-netc[data-net="max"] { --g: #6b3cf0; }
.stk-netc[data-net="vk"] { --g: #0a66e0; } .stk-netc[data-net="tiktok"] { --g: #121216; } .stk-netc[data-net="twitch"] { --g: #8a3cf2; } .stk-netc[data-net="youtube"] { --g: #e8101a; }
.stk-netc__head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--g); color: #fff; }
.stk-netc__head img { width: 54px; height: 54px; margin: -6px 0; }
.stk-netc__head h3 { flex: 1; margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.03em; color: #fff; }
.stk-netc__count { min-width: 34px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(255,255,255,.22); font-weight: 800; text-align: center; }
.stk-netc__list { margin: 0; padding: 10px; list-style: none; display: grid; gap: 4px; }
.stk-netc__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 16px; color: var(--ink); font-size: 16px; font-weight: 600; line-height: 1.3; }
.stk-netc__list a svg { font-size: 18px; color: var(--ink-3); transition: transform .2s; }
.stk-netc__list a:hover { background: #fff; color: var(--ink); }
.stk-netc__list a:hover svg { transform: translateX(3px); color: var(--g); }

/* ---------- Ещё пакеты ---------- */
.stk-more__grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 30px 24px; }
.stk-more .stk-pack { --u: .82px; --w: 280; --h: 250; position: relative; left: auto; top: auto; width: 100%; height: calc(250 * var(--u)); }

/* ---------- Подвал ---------- */
.stk-foot { background: var(--ink); color: #c9c8cf; padding: clamp(48px, 6vw, 80px) 0 28px; font-size: 15.5px; }
.stk-foot a { color: #fff; }
.stk-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.stk-foot__grid { display: grid; grid-template-columns: 1.3fr 1.5fr 1fr 1fr; gap: 40px; }
.stk-foot .stk-logo__mark { width: 46px; height: 46px; background-size: auto 49px; }
.stk-foot .stk-logo__name { font-size: 26px; }
.stk-foot__brand p { margin: 16px 0 0; line-height: 1.55; max-width: 40ch; }
.stk-foot__pro a { text-decoration: underline; text-decoration-color: var(--g); text-underline-offset: 3px; }
.stk-foot__nets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; align-content: start; }
.stk-foot__nets a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; }
.stk-foot__nets img { width: 54px; height: 54px; transition: transform .3s var(--ease-snap); }
.stk-foot__nets a:hover img { transform: rotate(-10deg) scale(1.08); }
.stk-foot__links { display: grid; gap: 12px; align-content: start; font-weight: 600; }
.stk-foot__legal p { margin: 0; line-height: 1.6; }
.stk-foot__pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.stk-foot__pay img { height: 28px; width: auto; border-radius: 6px; background: #fff; padding: 3px 6px; }
.stk-foot__pay span { font-size: 13.5px; }
.stk-foot__bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); font-size: 14px; }
body.stk .btn-back-to-top { background: var(--g) !important; border: 0 !important; border-radius: 16px !important; box-shadow: 0 0 0 4px #fff, 0 8px 20px rgba(0,0,0,.2); }

/* ---------- Cookie-плашка: маленький стикер ---------- */
body.stk .cookie-popup { left: 16px !important; right: auto !important; bottom: 16px !important; transform: none !important; max-width: 360px; padding: 18px !important; border-radius: 22px !important; background: #fff !important; color: var(--ink) !important; box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(0,0,0,.08), 0 18px 40px rgba(0,0,0,.2) !important; font-size: 14.5px; }
body.stk .cookie-popup .btn { border-radius: var(--r-pill) !important; font-weight: 700; border: 0 !important; padding: 9px 16px !important; }
body.stk .cookie-popup .btn-primary { background: var(--g) !important; color: #fff !important; }
body.stk .cookie-popup .btn-dark { background: var(--paper-2) !important; color: var(--ink) !important; }

/* ---------- Старые шаблоны (оформление, отслеживание, блог, отзывы, контакты) в этом мире ---------- */
body.stk { --bs-primary: var(--g); --bs-body-font-family: var(--font); --bs-link-color: var(--ink); --bs-link-hover-color: var(--ink); }
body.stk main, body.stk .content-section-layout { font-family: var(--font); }
body.stk h1, body.stk h2, body.stk h3, body.stk .h1, body.stk .h2, body.stk .h3 { font-family: var(--font); letter-spacing: -.03em; }
body.stk .btn-primary { --bs-btn-bg: var(--g); --bs-btn-border-color: var(--g); --bs-btn-hover-bg: var(--g); --bs-btn-hover-border-color: var(--g); --bs-btn-active-bg: var(--g); border-radius: var(--r-pill); font-weight: 800; }
body.stk .btn-primary:hover { filter: brightness(1.08); }
body.stk .btn-outline-primary { --bs-btn-color: var(--ink); --bs-btn-border-color: var(--ink); --bs-btn-hover-bg: var(--ink); --bs-btn-hover-border-color: var(--ink); border-radius: var(--r-pill); font-weight: 800; border-width: 2px; }
body.stk .text-primary { color: var(--g) !important; }
body.stk .bg-primary { background-color: var(--g) !important; }
body.stk .form-control, body.stk .form-select { min-height: 52px; border-radius: 16px; border: 2px solid #e4e3e8; font-size: 16px; font-family: var(--font); }
body.stk .form-control:focus, body.stk .form-select:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g) 22%, transparent); }
body.stk .form-label { font-weight: 700; color: var(--ink); }
body.stk .card { border: 0; border-radius: 28px !important; box-shadow: 0 0 0 1px rgba(17,16,20,.06), 0 18px 40px rgba(20,0,10,.08) !important; }
body.stk .order-form .card-title, body.stk .card-title.bg-light { background: transparent !important; font-weight: 900; letter-spacing: -.03em; font-size: 30px; }
body.stk .reviews { background: var(--paper-2) !important; }
body.stk .reviews .overall-rating { font-weight: 900; letter-spacing: -.04em; }
body.stk .reviews .stars, body.stk .reviews .text-success { color: #ffb400 !important; }
body.stk .reviews .rating-bar { background: var(--g) !important; }
body.stk .reviews .card, body.stk .reviews .review-item { border-radius: 24px !important; }
body.stk .accordion-button:not(.collapsed) { color: var(--ink); background: transparent; box-shadow: none; }

/* ---------- Узкие экраны: секции ---------- */
@media (max-width: 1099.98px) {
  .stk-hero--page { padding: 24px 0 36px; }
  .stk-page { width: 100%; padding: 0 16px; }
  .stk-page__text { max-width: none; }
  .stk-ph1 { font-size: clamp(38px, 11vw, 72px); }
  .stk-page__claim { font-size: clamp(26px, 7.4vw, 52px); }
  .stk-page__desc { font-size: 16px; }
  .stk-facts--flow li, .stk-facts--flow li:first-child, .stk-facts--flow li:nth-child(2) { max-width: none; }
  .stk-hero--home { min-height: 0; }
  .stk-home-sheet { position: relative; right: auto; top: auto; width: 100%; height: auto; margin-top: 26px; }
  .stk-home-sheet .stk-sheet__bg { display: none; }
  .stk-home-nets { position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 6px; padding: 16px 8px; border-radius: 22px; background: #eeedf1; }
  .stk-home-net { position: static; width: auto; rotate: 0deg !important; }
  .stk-home-net img { width: 62px; height: 62px; }
  .stk-home-net span { font-size: 12px; padding: 3px 8px; }
  .stk-faq__grid { grid-template-columns: 1fr; }
  .stk-steps__list, .stk-steps__list--3 { grid-template-columns: 1fr; }
  .stk-card:nth-child(n) { transform: none; }
  .stk-foot__grid { grid-template-columns: 1fr; gap: 32px; }
  .stk-foot__nets { grid-template-columns: repeat(4, 1fr); }
  .stk-more .stk-pack { --u: .7px; }
  .stk-more__grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
}

/* AOS-анимации старых секций: контент виден сразу */
body.stk [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Телефон: без горизонтальной прокрутки */
@media (max-width: 1099.98px) {
  .stk-nets > .stk-net { position: static; left: auto; top: auto; }
  .stk-nets { height: auto !important; }
  .stk-h1__c { width: auto; }
}
@media (max-width: 480px) {
  .stk-head { gap: 10px; }
  .stk-head__track { width: 44px; padding: 0; justify-content: center; }
  .stk-head__track span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .stk-head__track svg { font-size: 22px; }
}
@media (max-width: 1099.98px) {
  .stk-more .stk-pack { --u: .58px; height: 160px; }
  .stk-pack__price { min-width: 0; }
  .stk-pack, .stk-pack__in { max-width: 100%; }
}

/* ---------- 404 ---------- */
.stk-404__num { --dh: clamp(110px, 14vw, 200px); display: flex; transform: rotate(-6deg); margin: 10px 0 6px; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 10px 14px rgba(60,0,30,.25)); }
.stk-404__nets { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 28px; }
.stk-404__nets a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 84px; color: #fff; font-size: 13px; font-weight: 800; }
.stk-404__nets img { width: 64px; height: 64px; transition: transform .3s var(--ease-snap); }
.stk-404__nets a:hover { color: #fff; } .stk-404__nets a:hover img { transform: rotate(-10deg) scale(1.08); }

/* ---------- Шапки старых страниц (оформление, оплата, отслеживание) ---------- */
body.stk .header-top { margin: 0 !important; padding: 36px 16px 44px !important; background: var(--g) !important; color: #fff; }
body.stk .header-top .img-background { display: none; }
body.stk .header-top h1, body.stk .header-top h1 span, body.stk .header-top .text-primary { margin-top: 0 !important; color: #fff !important; font-weight: 900; letter-spacing: -.04em; font-size: clamp(34px, 4.6vw, 64px); line-height: 1; }
body.stk .header-top p { color: #fff; font-weight: 500; font-size: 17px; }
body.stk .header-top + section, body.stk .order-form { margin-top: -24px; position: relative; }
body.stk .header-top .checkout-icon-status { color: #fff !important; }
body.stk .order-form .card, body.stk .header-top + section .card { box-shadow: 0 0 0 8px #fff, 0 0 0 9px rgba(17,16,20,.08), 0 20px 44px rgba(20,0,10,.12) !important; }

/* ---------- Блог ---------- */
body.stk .blog-sidebar .badge, body.stk .sidebar .badge, body.stk [class*="category"] .badge { border-color: var(--g) !important; color: var(--g) !important; }
body.stk .card-img-top, body.stk .blog-thumbnail img { border-radius: 22px 22px 0 0; }

/* Контраст: белый текст на цвете соцсети — только «крупный» (от 19px, жирный), порог WCAG 3:1 */
.stk-facts li { font-size: max(19px, calc(18.7 * var(--u))); font-weight: 700; }
.stk-head__nav a, .stk-head__track { font-size: max(19px, calc(19 * var(--u))); font-weight: 800; }
.stk-net__name { font-size: max(19px, calc(16.5 * var(--u))); font-weight: 800; letter-spacing: -.02em; }
.stk-net.is-current .stk-net__name { font-size: max(17px, calc(16.5 * var(--u))); }
.stk-page__desc, .stk-statement__p { font-size: max(19px, calc(20 * var(--u))); font-weight: 700; }
.stk-hero--home .stk-page__desc { max-width: 44ch; } /* не заходить под лист соцсетей */
.stk-pack__price { padding-block: calc(4 * var(--u)); }
@media (max-width: 1099.98px) {
  .stk-facts li, .stk-facts li:first-child, .stk-facts li:nth-child(2) { font-size: 19px; }
  .stk-net__name { font-size: 13px; color: #fff; }
  .stk-page__desc { font-size: 19px; }
}
/* clip, а не hidden: иначе липкое поле ссылки на телефоне не работает */
.stk-hero { overflow: clip; }


/* ==========================================================================
   Правки по финальному ревью (2026-10-26)
   ========================================================================== */
/* Единые поля секций — как у первого экрана */
.stk-wrap { width: calc(1536 * var(--u)); max-width: 100%; margin: 0 auto; padding: 0 calc(66 * var(--u)); }
.stk-sec { padding: clamp(44px, 5vw, 80px) 0; }
.stk-read__col { max-width: none; } .stk-read__col > * { max-width: 760px; }
.stk-h2--s { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 14px; }

/* «Как это работает»: белый лист со скруглённым верхом наезжает на цветной экран */
.stk-how {
  width: 100%; margin-top: calc(-34 * var(--u));
  padding: calc(30 * var(--u)) max(calc(66 * var(--u)), calc((100% - 1536 * var(--u)) / 2 + 66 * var(--u))) calc(56 * var(--u));
  border-radius: calc(44 * var(--u)) calc(44 * var(--u)) 0 0;
  box-shadow: none; clip-path: none;
}
.stk-hero:has(.stk-how) { padding-bottom: 0; }

/* Ряд соцсетей: подписи читаются и не наезжают друг на друга */
.stk-net__name { font-size: max(14px, calc(15.5 * var(--u))); font-weight: 800; padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: var(--r-pill); background: rgba(17, 16, 20, .22); }
.stk-net.is-current .stk-net__name { font-size: max(14px, calc(15.5 * var(--u))); padding: calc(4 * var(--u)) calc(10 * var(--u)); }
.stk-facts li:first-child { max-width: calc(200 * var(--u)); }

/* Стрелка белая, как в макете */
.stk-arrow { filter: brightness(0) invert(1) drop-shadow(0 2px 3px rgba(0,0,0,.15)); }

/* Преимущества: стикеры с высечкой на листе-подложке */
.stk-why { background: #eeedf1; }
.stk-why + .stk-sec, .stk-sec + .stk-why { padding-top: clamp(44px, 5vw, 80px); }
.stk-why--alt { background: #fff; }
.stk-card { background: #fff; border-radius: 32px; box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(17,16,20,.08), 0 16px 28px rgba(20,0,10,.10); }
.stk-why--alt .stk-card { background: #fff; box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(17,16,20,.09), 0 14px 26px rgba(20,0,10,.08); }
.stk-cards { gap: 36px; padding: 10px; }
.stk-more__feat li { display: inline-flex; align-items: center; gap: 8px; }
.stk-more__feat svg { color: var(--g); font-size: 18px; }

/* Форма заказа — белый стикер на цветном листе */
body.stk .order-form { margin-top: 0; padding: 0 0 56px !important; background: var(--g); }
body.stk .header-top + section { margin-top: 0; }
body.stk .header-top ~ section.mb-5 { background: var(--g); margin-bottom: 0 !important; padding-bottom: 56px; }

/* 404: справа — пустой лист, стикер оторван */
.stk-404 .stk-page { min-height: calc(640 * var(--u)); }
.stk-404 .stk-page::after { content: ""; position: absolute; right: calc(44 * var(--u)); top: calc(10 * var(--u)); width: calc(680 * var(--u)); height: calc(480 * var(--u)); background: url('../../../plates/sheet-900.webp') center / contain no-repeat; transform: rotate(4deg); }

/* Подвал — цвет подложки, тёмный текст */
.stk-foot { background: #eeedf1; color: var(--ink-2); }
.stk-foot a, .stk-foot a:hover { color: var(--ink); }
.stk-foot .stk-logo, .stk-foot .stk-logo:hover { color: var(--ink); }
.stk-foot .stk-logo__mark { filter: none; }
.stk-foot__bottom { border-top-color: rgba(17,16,20,.12); color: var(--ink-3); }
.stk-foot__pay img { box-shadow: 0 0 0 1px rgba(0,0,0,.08); }

/* Ещё пакеты: число не вылезает за высечку */
.stk-more .stk-pack { --u: .74px; }
.stk-mobile-only { display: none !important; }

@media (max-width: 1099.98px) {
  .stk-wrap { width: 100%; padding: 0 16px; }
  .stk-how { margin-top: -18px; padding: 28px 16px 36px; border-radius: 26px 26px 0 0; }
  .stk-mobile-only { display: flex !important; }
  h2.stk-mobile-only { display: block !important; }
  /* порядок: факты → форма → лист; форма больше не липнет поверх стикеров */
  .stk-order { order: 4; position: relative !important; top: auto; left: auto; bottom: auto; margin-top: 58px; }
  .stk-order__pick { left: 8px; bottom: calc(100% + 10px); max-width: calc(100% - 16px); padding: 7px 14px; font-size: 15px; }
  .stk-sheet { order: 5; position: relative !important; display: block; padding: 0; background: none; box-shadow: none; aspect-ratio: 800 / 1176; height: auto !important; border-radius: 0; }
  .stk-sheet__m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .stk-sheet .stk-pack { --u: .5px; position: absolute !important; height: auto; width: auto; }
  .stk-sheet .stk-pack--a { --u: .56px; left: 12%; top: 5%; width: 76%; height: 27%; grid-column: auto; }
  .stk-sheet .stk-pack--b { left: 9%;  top: 37%; width: 39%; height: 22%; }
  .stk-sheet .stk-pack--c { left: 50%; top: 37%; width: 39%; height: 22%; }
  .stk-sheet .stk-pack--d { left: 50%; top: 63%; width: 39%; height: 22%; }
  .stk-sheet .stk-pack--e { display: none; }
  .stk-404 .stk-page::after { display: none; }
  .stk-more .stk-pack { --u: .58px; }
}
.stk-sheet__m { display: none; }
@media (max-width: 1099.98px) { .stk-sheet__m { display: block; } .stk-sheet .stk-sheet__bg { display: none; } }
@media (max-width: 1099.98px) { .stk-sheet, .stk-order, .stk-h1, .stk-facts, .stk-nets { top: auto !important; left: auto !important; } }
@media (max-width: 1099.98px) { .stk-facts li:first-child { max-width: none; } }

/* ---- Второй проход ревью ---- */
/* факты не залезают под стикер «Топ продаж» */
.stk-facts li:first-child { max-width: calc(170 * var(--u)); }
.stk-facts li:last-child { max-width: calc(205 * var(--u)); }
.stk-facts { gap: calc(22 * var(--u)); }
/* подвал: нижний отступ */
.stk-foot { padding-bottom: 36px; }
.stk-foot__bottom { margin-top: 44px; padding-top: 22px; }
.stk-foot__links { padding-bottom: 6px; }
/* старый кикер в блоке отзывов */
body.stk .reviews .text-primary.fw-semibold { display: none; }

/* Преимущества: стикеры разного размера на листе, первый — широкий, значок — круглый стикер на краю */
.stk-why .stk-cards { grid-template-columns: repeat(6, 1fr); gap: 40px 30px; padding: 22px 10px 10px; }
.stk-why .stk-card { grid-column: span 2; padding-top: 34px; }
.stk-why .stk-card:nth-child(1) { grid-column: span 4; }
.stk-why .stk-card:nth-child(1) .stk-card__t { font-size: clamp(24px, 2vw, 30px); }
.stk-why .stk-card:nth-child(4) { grid-column: span 3; } .stk-why .stk-card:nth-child(3) { grid-column: span 3; }
.stk-why .stk-card__i { position: absolute; top: -22px; left: 22px; width: 58px; height: 58px; border-radius: 50%; box-shadow: 0 0 0 6px #fff, 0 6px 12px rgba(0,0,0,.15); }
.stk-why .stk-card:nth-child(3n+1) { transform: rotate(-1.6deg); } .stk-why .stk-card:nth-child(3n+2) { transform: rotate(1.2deg); } .stk-why .stk-card:nth-child(3n) { transform: rotate(-.6deg); }
.stk-why .stk-card__t { margin-top: 6px; }

/* Шаги: крупные глянцевые цифры-стикеры вместо одинаковых карточек */
.stk-steps__list li { position: relative; padding: 18px 0 0; background: none; border-top: 3px solid var(--ink); border-radius: 0; }
.stk-steps__n { --dh: 92px; display: flex; width: auto; height: auto; margin: -2px 0 12px; background: none; box-shadow: none; filter: drop-shadow(0 0 0 #fff) drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.stk-steps__list li:nth-child(even) .stk-steps__n { transform: rotate(5deg); } .stk-steps__list li:nth-child(odd) .stk-steps__n { transform: rotate(-5deg); }
@media (max-width: 1099.98px) {
  .stk-facts li:first-child, .stk-facts li:last-child { max-width: none; }
  .stk-why .stk-cards { grid-template-columns: 1fr; }
  .stk-why .stk-card, .stk-why .stk-card:nth-child(n) { grid-column: auto; }
  .stk-steps__n { --dh: 64px; }
}
.stk-facts--flow li:first-child, .stk-facts--flow li:last-child { max-width: calc(250 * var(--u)); }