/* Крутилочка.РФ — «Сторис роста» */
@font-face { font-family: "Golos Text"; src: url("../fonts/golos-cyr.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; src: url("../fonts/golos-lat.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD, U+20BD; }

:root {
    --violet: #6018f8;
    --violet-deep: #4f0fd6;
    --lilac: #ebdff8;
    --lilac-soft: #d5c2fb;
    --coral: #f84a5d;
    --coral-pale: #fcc2c8;
    --lime: #d8f83d;
    --ink: #0a1235;
    --ink-2: #5d6080;
    --line: #e7e4ef;
    --line-2: #f0eef5;
    --surface-2: #faf9fc;
    --paper: #ffffff;
    --chip: #f4f0f9;
    --tg: #0978f8;
    --font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
    --gutter: 55px;
    --wrap: 1426px;
    --u: calc(min(100vw, 1600px) / 1536);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.st { margin: 0; background: var(--ink); color: #fff; font-family: var(--font); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
:where(.st) img { display: block; max-width: 100%; }
:where(.st) a { color: inherit; text-decoration: none; }
:where(.st) ul { list-style: none; margin: 0; padding: 0; }
:where(.st) :is(h1, h2, h3, p) { margin: 0; }
.st ::selection { background: var(--lime); color: var(--ink); }
.st input { caret-color: var(--violet); }
.st :focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

.st-wrap { width: calc(1426 * var(--u)); margin-inline: auto; position: relative; }
.st-band { position: relative; overflow: hidden; }
.st-band--violet { background: var(--violet); height: calc(645 * var(--u)); }
.st-band--coral { background: var(--coral); }
.st-band--lime { background: var(--lime); color: var(--ink); }

/* ---- кнопки ---- */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; font: 600 18px/1 var(--font); cursor: pointer; transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.st-btn:active { transform: translateY(1px); }
.st-btn--white { background: #fff; color: var(--ink); height: 50px; padding: 0 24px; }
.st-btn--white:hover { background: var(--lime); }
.st-btn--violet { background: var(--violet); color: #fff; }
.st-btn--violet:hover { background: var(--violet-deep); }
.st-btn svg { width: 20px; height: 20px; }

/* ---- навигация ---- */
.st-nav { display: flex; align-items: center; height: calc(76 * var(--u)); padding-top: calc(2 * var(--u)); }
.st-nav__logo { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(40 * var(--u)); }
.st-nav__spin { display: block; width: calc(38 * var(--u)); height: calc(40 * var(--u)); overflow: hidden; flex: none; }
.st-nav__spin img { height: calc(40 * var(--u)); width: auto; max-width: none; }
.st-nav__name { font-size: calc(35 * var(--u)); font-weight: 800; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.st-nav__links { display: flex; gap: 0; margin-left: auto; padding-right: calc(252 * var(--u)); }
.st-nav__links a { font-size: calc(20 * var(--u)); font-weight: 500; padding: calc(6 * var(--u)) 0; margin-right: calc(52 * var(--u)); opacity: .96; }
.st-nav__links a:hover { color: var(--lime); }
.st-nav__actions { margin-left: auto; display: flex; align-items: center; gap: calc(28 * var(--u)); }
.st-nav__login { font-size: calc(20 * var(--u)); font-weight: 500; }
.st-nav__login:hover { color: var(--lime); }

.st-mnav { display: none; }

/* ---- полоски сторис ---- */
.st-ticks { display: flex; gap: calc(8 * var(--u)); height: calc(5 * var(--u)); margin-top: calc(6 * var(--u)); }
.st-ticks i { position: relative; flex: 0 0 calc(132 * var(--u)); border-radius: calc(3 * var(--u)); background: rgba(255,255,255,.28); overflow: hidden; }
.st-ticks i:first-child { flex-basis: calc(134 * var(--u)); }
.st-ticks i:last-child { flex: 1 1 auto; }
.st-ticks b { position: absolute; inset: 0; background: #fff; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.st-ticks i:first-child b { --f: 1; }
.js .st-ticks i:first-child b { --f: 0; }

/* ---- hero ---- */
.st-hero { display: grid; grid-template-columns: 1fr calc(510 * var(--u)); margin-top: calc(21 * var(--u)); }
.st-hero__main { position: relative; height: calc(520 * var(--u)); }
.st-h1 { position: relative; z-index: 2; width: calc(480 * var(--u)); font-size: calc(118 * var(--u)); font-weight: 800; line-height: .85; letter-spacing: -.055em; padding-top: calc(4 * var(--u)); }
.st-hero__sub { position: absolute; top: calc(322 * var(--u)); left: 0; width: calc(490 * var(--u)); font-size: calc(32 * var(--u)); font-weight: 600; line-height: 1.15; color: var(--lilac); letter-spacing: -.01em; }
.st-hero__icons { position: absolute; left: calc(423 * var(--u)); top: calc(38 * var(--u)); width: calc(480 * var(--u)); height: calc(400 * var(--u)); object-fit: cover; z-index: 1; }

.st-tag { position: absolute; z-index: 3; padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(255,255,255,.18); -webkit-backdrop-filter: blur(calc(6 * var(--u))); backdrop-filter: blur(calc(6 * var(--u))); font-size: calc(16 * var(--u)); font-weight: 600; line-height: 1.12; width: min-content; text-align: center; }
.st-tag--clients { left: calc(628 * var(--u)); top: calc(10 * var(--u)); transform: rotate(-8deg); }
.st-tag--results { left: calc(774 * var(--u)); top: calc(398 * var(--u)); transform: rotate(-10deg); }

.st-feats { position: absolute; left: 0; top: calc(444 * var(--u)); display: flex; }
.st-feats li { position: relative; padding-left: calc(42 * var(--u)); font-size: max(12px, calc(13.5 * var(--u))); line-height: 1.32; color: var(--lilac-soft); }
.st-feats li:nth-child(1) { width: calc(183 * var(--u)); }
.st-feats li:nth-child(2) { width: calc(199 * var(--u)); }
.st-feats li:nth-child(3) { width: calc(187 * var(--u)); }
.st-feats li:nth-child(4) { width: calc(220 * var(--u)); }
.st-feats svg { position: absolute; left: 0; top: 0; width: calc(30 * var(--u)); height: calc(30 * var(--u)); color: #fff; }
.st-feats b { display: block; color: #fff; font-size: calc(15 * var(--u)); font-weight: 600; margin-bottom: calc(6 * var(--u)); }
.st-feats span { display: block; max-width: calc(150 * var(--u)); }
.st-feats li:nth-child(4) span { max-width: calc(178 * var(--u)); }

/* ---- панель заказа ---- */
.st-order { align-self: start; margin-top: calc(7 * var(--u)); height: calc(510 * var(--u)); background: var(--paper); color: var(--ink); border-radius: calc(16 * var(--u)); padding: calc(15 * var(--u)) calc(25 * var(--u)) 0; box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) -20px rgba(30,0,110,.45); }
.st-order__tabs { display: flex; align-items: center; height: calc(34 * var(--u)); }
.st-order__tabs .is-on { font-size: calc(26 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.st-order__tabs a { margin-left: calc(22 * var(--u)); padding-left: calc(23 * var(--u)); border-left: calc(1 * var(--u)) solid var(--line); font-size: calc(17 * var(--u)); color: #9a9bb8; line-height: calc(24 * var(--u)); }
.st-order__tabs a:hover { color: var(--violet); }

.st-chips { display: flex; gap: calc(8 * var(--u)); margin-top: calc(15 * var(--u)); height: calc(74 * var(--u)); }
.st-chip { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--chip); font-size: max(12px, calc(13 * var(--u))); color: #2d2f4f; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.st-chip input { position: absolute; opacity: 0; pointer-events: none; }
.st-chip__ico { width: calc(21 * var(--u)); height: calc(21 * var(--u)); display: block; }
.st-chip__ico svg { width: 100%; height: 100%; display: block; }
.st-chip--telegram { flex-basis: calc(92 * var(--u)); } .st-chip--telegram .st-chip__ico { color: var(--tg); }
.st-chip--instagram { flex-basis: calc(82 * var(--u)); } .st-chip--instagram .st-chip__ico { color: #e1306c; }
.st-chip--vk { flex-basis: calc(52 * var(--u)); } .st-chip--vk .st-chip__ico { color: #0077ff; }
.st-chip--youtube { flex-basis: calc(76 * var(--u)); } .st-chip--youtube .st-chip__ico { color: #ff0000; }
.st-chip--tiktok { flex-basis: calc(58 * var(--u)); } .st-chip--tiktok .st-chip__ico { color: #111; }
.st-chip--max { flex-basis: calc(55 * var(--u)); } .st-chip--max .st-chip__ico { color: #7b2cf5; }
.st-chip:hover { background: #e9e5f5; }
.st-chip:has(input:checked) { background: var(--tg); color: #fff; }
.st-chip:has(input:checked) .st-chip__ico { color: #fff; }
.st-chip:has(input:focus-visible) { outline: calc(3 * var(--u)) solid var(--violet); outline-offset: calc(2 * var(--u)); }
.st-chip--youtube:has(input:checked) .st-chip__ico svg path { fill: var(--tg); }

.st-field { display: block; margin-top: calc(15 * var(--u)); }
.st-field + .st-field { margin-top: calc(9 * var(--u)); }
.st-field + .st-field .st-field__label { margin-bottom: calc(4 * var(--u)); }
.st-field__label { display: block; font-size: calc(15 * var(--u)); color: var(--ink-2); margin-bottom: calc(7 * var(--u)); }
.st-select { position: relative; display: block; }
.st-select__eye { position: absolute; left: calc(16 * var(--u)); top: 50%; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-top: -12px; color: #8a8ba8; pointer-events: none; }
.st-select::after { content: ""; position: absolute; right: calc(18 * var(--u)); top: 50%; width: calc(8 * var(--u)); height: calc(8 * var(--u)); margin-top: -6px; border: solid var(--ink); border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0; transform: rotate(45deg); pointer-events: none; }
.st-select select { width: 100%; height: calc(42 * var(--u)); padding: 0 calc(44 * var(--u)) 0 calc(55 * var(--u)); border: calc(1 * var(--u)) solid var(--line); border-radius: calc(8 * var(--u)); background: #fff; color: var(--ink); font: 500 calc(16 * var(--u)) var(--font); -webkit-appearance: none; appearance: none; cursor: pointer; }
.st-select select:hover { border-color: #c9c4dc; }

.st-qty { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.st-qty__range { flex: 1; -webkit-appearance: none; appearance: none; height: calc(42 * var(--u)); margin: 0; background: transparent; cursor: pointer; }
.st-qty__range::-webkit-slider-runnable-track { height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: linear-gradient(90deg, var(--violet) var(--p), #ebe8f3 var(--p)); }
.st-qty__range::-moz-range-track { height: calc(10 * var(--u)); border-radius: calc(5 * var(--u)); background: linear-gradient(90deg, var(--violet) var(--p), #ebe8f3 var(--p)); }
.st-qty__range::-webkit-slider-thumb { -webkit-appearance: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin-top: -10px; border-radius: 50%; background: var(--violet); border: calc(4 * var(--u)) solid #fff; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(60,10,170,.45); }
.st-qty__range::-moz-range-thumb { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--violet); border: calc(4 * var(--u)) solid #fff; box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(60,10,170,.45); }
.st-qty__num { width: calc(103 * var(--u)); height: calc(42 * var(--u)); border: calc(1 * var(--u)) solid var(--line); border-radius: calc(8 * var(--u)); text-align: center; font: 500 calc(16 * var(--u)) var(--font); color: var(--ink); }
.st-qty__num:focus { border-color: var(--violet); outline: none; }
.st-qty__ticks { display: flex; justify-content: space-between; margin-top: calc(11 * var(--u)); padding-right: calc(15 * var(--u)); }
.st-qty__ticks button { border: 0; background: none; padding: calc(2 * var(--u)) 0; font: 400 calc(13 * var(--u)) var(--font); color: var(--ink-2); cursor: pointer; }
.st-qty__ticks button:hover { color: var(--violet); }
.st-qty__ticks button.is-on { color: var(--violet); font-weight: 700; }

.st-result { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: end; margin-top: calc(17 * var(--u)); height: calc(80 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u)); background: #f1ecf9; }
.st-result__label { grid-column: 1 / -1; font-size: max(12px, calc(13 * var(--u))); color: var(--ink-2); }
.st-result__get { font-size: calc(20 * var(--u)); font-weight: 600; white-space: nowrap; }
.st-result__get b { font-size: calc(34 * var(--u)); font-weight: 700; color: var(--violet); letter-spacing: -.01em; line-height: 1; }
.st-result__price { font-size: calc(19 * var(--u)); white-space: nowrap; padding-bottom: calc(3 * var(--u)); }
.st-result__price b { font-size: calc(27 * var(--u)); font-weight: 700; }

.st-order__cta { width: 100%; height: calc(53 * var(--u)); margin-top: calc(10 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; border-radius: calc(10 * var(--u)); }

/* ---- сторис 2 ---- */
.st-orders { display: flex; justify-content: space-between; gap: calc(24 * var(--u)); height: calc(240 * var(--u)); padding-top: calc(34 * var(--u)); }
.st-orders__main { flex: 1; min-width: 0; container-type: inline-size; }
.st-orders__num { font-size: min(calc(84 * var(--u)), 9.4cqi); font-weight: 900; line-height: .86; letter-spacing: -.04em; white-space: nowrap; }
.st-orders__num span { font-size: min(calc(142 * var(--u)), 15.8cqi); letter-spacing: -.05em; }
.st-orders__sub { margin-top: calc(10 * var(--u)); max-width: calc(600 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 700; line-height: 1.02; color: #fff; letter-spacing: -.01em; }
.st-aud { display: flex; gap: calc(16 * var(--u)); flex-shrink: 0; align-self: start; margin-top: calc(2 * var(--u)); }
.st-aud li { width: calc(175 * var(--u)); height: calc(172 * var(--u)); padding: calc(22 * var(--u)) calc(12 * var(--u)) 0 calc(13 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(120,10,30,.16); font-size: max(12px, calc(13 * var(--u))); line-height: 1.4; color: #fff; }
.st-aud li:nth-child(2) { width: calc(188 * var(--u)); } .st-aud li:nth-child(3) { width: calc(191 * var(--u)); }
.st-aud svg { width: calc(66 * var(--u)); height: calc(50 * var(--u)); margin: 0 0 calc(18 * var(--u)) calc(16 * var(--u)); color: #fff; display: block; }
.st-aud b { display: block; color: #fff; font-size: calc(14 * var(--u)); letter-spacing: -.01em; white-space: nowrap; font-weight: 600; margin-bottom: calc(6 * var(--u)); }

/* ---- сторис 3 ---- */
.st-subs { min-height: calc(560 * var(--u)); padding-bottom: calc(72 * var(--u)); }
.st-subs__h2 { padding-top: calc(22 * var(--u)); width: calc(700 * var(--u)); font-size: calc(80 * var(--u)); font-weight: 900; line-height: .86; letter-spacing: -.035em; color: var(--ink); }
.st-subs__art { position: absolute; left: calc(735 * var(--u)); top: calc(18 * var(--u)); width: calc(720 * var(--u)); }
.st-subs__art img { width: 100%; height: auto; }
.st-bubble { position: absolute; left: 52%; top: 4%; width: calc(280 * var(--u)); padding: calc(18 * var(--u)) calc(22 * var(--u)); border-radius: calc(22 * var(--u)); background: #fff; color: var(--ink); font-size: calc(18 * var(--u)); line-height: 1.2; transform: rotate(-7deg); box-shadow: 0 calc(14 * var(--u)) calc(30 * var(--u)) -14px rgba(10,18,53,.35); }
.st-bubble b { display: block; font-weight: 700; }

.st-subs__body { position: relative; z-index: 2; width: 600px; margin-top: 34px; }
.st-subs__lead { font-size: 24px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.st-subs__facts { margin: 28px 0 34px; display: grid; gap: 14px; }
.st-subs__facts li { position: relative; padding-left: 34px; font-size: 18px; line-height: 1.4; }
.st-subs__facts li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.2 3 3 6-6.4' fill='none' stroke='%23d8f83d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.st-subs__facts b { font-weight: 800; }

/* ---- общие для секций ---- */
.st-btn--ink { background: var(--ink); color: #fff; height: 56px; padding: 0 28px; }
.st-btn--ink:hover { background: var(--violet); }
.st-btn--lime { background: var(--lime); color: var(--ink); height: 56px; padding: 0 28px; }
.st-btn--lime:hover { background: #fff; }
.st-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); height: 56px; padding: 0 28px; }
.st-btn--ghost:hover { background: var(--ink); color: #fff; }
.st-btn--lg { height: 64px !important; padding: 0 34px !important; font-size: 19px; }
.st-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 44px; }
.st-h2 { font-size: 72px; font-weight: 900; line-height: .92; letter-spacing: -.04em; max-width: 820px; }
.st-head__sub { max-width: 420px; font-size: 18px; line-height: 1.45; opacity: .78; padding-bottom: 6px; }
.st-h3 { font-size: 40px; font-weight: 900; letter-spacing: -.035em; line-height: 1; margin: 0 0 10px; }
.st-link { display: inline-block; margin-top: 22px; font-weight: 700; font-size: 17px; color: var(--violet); }
.st-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---- сторис 4: площадки ---- */
.st-band--ink { background: var(--ink); padding: 104px 0 110px; }
.st-nets { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.st-nets a { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.06); transition: background-color .15s ease, transform .15s ease; }
.st-nets a:hover { background: rgba(255,255,255,.13); transform: translateY(-2px); }
.st-nets img, .st-nets__glyph { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 12px; }
.st-nets__glyph { display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, #8147f8, #6018f8); }
.st-nets__glyph svg { width: 26px; height: 26px; }
.st-nets__glyph--traffic { background: linear-gradient(140deg, #34d3ff, #0a78f8); }
.st-nets__glyph--rutube { background: linear-gradient(140deg, #1b1f3b, #0a0d22); color: #ff4f6d; }
.st-nets__glyph--yandex { background: linear-gradient(140deg, #ff5a3c, #fc3f1d); }
.st-nets__glyph--crypto { background: linear-gradient(140deg, #ffc23d, #f7931a); }
.st-nets__glyph--shopee { background: linear-gradient(140deg, #ff7a45, #ee4d2d); }
.st-nets__glyph--ok { background: linear-gradient(140deg, #ffad3b, #f7931e); }
.st-nets__glyph--clubhouse { background: linear-gradient(140deg, #f7e9c4, #e8d9a8); color: #2b2b2b; }
.st-nets__glyph--audiomack { background: linear-gradient(140deg, #ffb13d, #ffa200); color: #1a1a1a; }
.st-nets__glyph--podcasts { background: linear-gradient(140deg, #d56bff, #9933cc); }
.st-nets__glyph--boomplay { background: linear-gradient(140deg, #2ce0ff, #0f8ec7); }
.st-nets b { font-size: 16px; font-weight: 700; line-height: 1.2; align-self: end; }
.st-nets span { font-size: 14px; color: #aab0d6; align-self: start; }
.st-nets li:nth-child(-n+2) a { background: var(--violet); }
.st-nets li:nth-child(-n+2) a:hover { background: #7032ff; }
.st-nets__all { margin-top: 36px; }

/* ---- сторис 5: почему и как ---- */
.st-band--paper { background: #f7f5f8; color: var(--ink); padding: 110px 0; }
.st-band--why { color: #fff; }
.st-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-why__item { min-height: 190px; padding: 30px 30px 28px; border-radius: 20px; background: rgba(255,255,255,.1); display: flex; flex-direction: column; justify-content: flex-end; }
.st-why__item b { font-size: 28px; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 10px; }
.st-why__item span { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.85); max-width: 340px; }
.st-why__item--violet { background: #fff; color: var(--ink); }
.st-why__item--violet span { color: var(--ink-2); }
.st-why__item--lime { background: var(--lime); color: var(--ink); }
.st-why__item--lime span { color: #3b4a10; }
.st-why__item--coral { background: var(--coral); }
.st-why__item--ink { background: var(--ink); }
.st-head--steps { margin-top: 110px; }
.st-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.st-steps li { position: relative; padding: 26px 26px 30px; border-radius: 20px; background: rgba(255,255,255,.1); }
.st-steps i { display: block; font-style: normal; font-size: 96px; font-weight: 900; line-height: .8; letter-spacing: -.05em; color: var(--lime); margin-bottom: 26px; }
.st-steps b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.st-steps span { font-size: 16px; line-height: 1.45; color: rgba(255,255,255,.85); }

/* ---- сторис 6: отзывы ---- */
.st-band--violet-flow { background: var(--violet); padding: 110px 0; }
.st-band--coral-flow { background: var(--coral); padding: 110px 0; }
.st-band--coral-flow .st-head__sub { opacity: 1; }
.st-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.st-reviews li { display: flex; flex-direction: column; padding: 30px; border-radius: 20px; background: #fff; color: var(--ink); }
.st-reviews__stars { display: flex; gap: 3px; color: var(--violet); }
.st-reviews__stars svg { width: 19px; height: 19px; fill: currentColor; }
.st-reviews p { flex: 1; margin: 16px 0 26px; font-size: 18px; line-height: 1.5; }
.st-reviews__who { display: flex; align-items: center; gap: 14px; }
.st-reviews__who i { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--lime); font-style: normal; font-weight: 800; font-size: 16px; }
.st-reviews__who span { font-size: 14px; color: var(--ink-2); line-height: 1.3; }
.st-reviews__who b { display: block; font-size: 16px; color: var(--ink); }

/* ---- новости и FAQ ---- */
.st-info { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; }
.st-info__note { font-size: 15px; color: var(--ink-2); margin-bottom: 22px; }
.st-news ul { display: grid; gap: 10px; }
.st-news__item { padding: 18px 20px; border-radius: 16px; background: #fff; color: var(--ink); }
.st-chiplet { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #efe9fd; color: var(--violet); }
.st-chiplet--new_services { background: #dcfae6; color: #0b6b3a; }
.st-chiplet--disabled_services { background: #ffe1e4; color: #a3122a; }
.st-chiplet--announcement { background: var(--lime); color: var(--ink); }
.st-band--info { color: #fff; }
.st-band--info .st-info__note { color: #aab0d6; }
.st-band--info .st-link { color: var(--lime); }
.st-news__meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); margin-bottom: 6px; }
.st-news__meta { align-items: center; }
.st-news__item p { font-size: 15px; line-height: 1.45; color: #343858; overflow-wrap: anywhere; }
.st-faq .st-h3 { margin-bottom: 26px; }
.st-faq details { border-radius: 16px; background: #fff; color: var(--ink); margin-bottom: 10px; }
.st-faq summary { position: relative; list-style: none; cursor: pointer; padding: 22px 64px 22px 24px; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 50%; background: #f1ecf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M14 8v12M8 14h12' stroke='%236018f8' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center no-repeat; transition: transform .2s ease; }
.st-faq details[open] summary::after { transform: rotate(45deg); }
.st-faq summary:hover { color: var(--violet); }
.st-faq details p { padding: 0 24px 22px; font-size: 16px; line-height: 1.55; color: #343858; }

/* ---- финал ---- */
.st-final { padding: 110px 0; }
.st-final__in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 64px; align-items: end; }
.st-final__h2 { font-size: 96px; font-weight: 900; line-height: .88; letter-spacing: -.045em; }
.st-final__sub { margin-top: 24px; max-width: 560px; font-size: 20px; line-height: 1.45; }
.st-final__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.st-news-form { padding: 30px; border-radius: 20px; background: rgba(10,18,53,.07); }
.st-news-form label { display: block; font-size: 17px; line-height: 1.45; margin-bottom: 16px; }
.st-news-form label b { display: block; font-size: 24px; font-weight: 900; letter-spacing: -.02em; }
.st-news-form__row { display: flex; gap: 10px; }
.st-news-form input { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border: 2px solid transparent; border-radius: 12px; background: #fff; font: 500 17px var(--font); color: var(--ink); }
.st-news-form input:focus { border-color: var(--ink); outline: none; }
.st-news-form__msg { min-height: 22px; margin-top: 10px; font-size: 15px; font-weight: 600; }
.st-news-form__msg.is-err { color: #b3261e; }

/* ---- подвал ---- */
.st-foot { background: var(--ink); color: #c9cde6; padding: 80px 0 40px; font-size: 15px; }
.st-foot__grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; gap: 48px; }
.st-foot .st-nav__logo { color: #fff; margin-bottom: 22px; }
.st-foot .st-nav__name { font-size: 28px; }
.st-foot p { line-height: 1.55; max-width: 380px; }
.st-foot__legal { margin-top: 14px; color: #8d93b8; font-size: 14px; }
.st-foot h3 { margin: 6px 0 16px; color: #fff; font-size: 16px; font-weight: 700; }
.st-foot nav a { display: block; padding: 5px 0; }
.st-foot nav a:hover, .st-foot__once a:hover { color: var(--lime); }
.st-foot__once a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-foot__bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: #8d93b8; }

.st-modal { max-width: 520px; border: 0; border-radius: 20px; padding: 30px; color: var(--ink); font-family: var(--font); }
.st-modal::backdrop { background: rgba(10,18,53,.55); }
.st-modal h2 { font-size: 28px; font-weight: 900; margin-bottom: 14px; }
.st-modal form { margin-top: 20px; }
.st-modal .st-btn { height: 48px; padding: 0 24px; }

/* ===== планшет и телефон ===== */
@media (max-width: 1099px) {
    :root { --u: 1px; --gutter: 24px; }
    .st-wrap { width: calc(100% - 2 * var(--gutter)); }
    .st-band--violet { height: auto; padding-bottom: 40px; }

    .st-nav { height: 64px; }
    .st-nav__links { display: none; }
    .st-mnav { display: flex; gap: 22px; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
    .st-mnav a { font-size: 16px; font-weight: 600; opacity: .92; padding: 4px 0; white-space: nowrap; }
    .st-nav__logo { height: 32px; gap: 8px; }
    .st-nav__spin { width: 30px; height: 32px; }
    .st-nav__spin img { height: 32px; }
    .st-nav__name { font-size: 26px; }
    .st-nav__actions { gap: 16px; }
    .st-nav__login { font-size: 17px; }
    .st-nav .st-btn--white { height: 42px; padding: 0 16px; font-size: 16px; }
    .st-ticks { margin-top: 2px; gap: 5px; height: 4px; }
    .st-ticks i, .st-ticks i:first-child { flex: 1 1 0; }

    .st-hero { display: block; margin-top: 28px; }
    .st-hero__main { height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "h1 icons" "sub icons" "feats feats"; column-gap: 24px; }
    .st-h1 { grid-area: h1; width: auto; font-size: clamp(60px, 10.5vw, 112px); padding-top: 0; }
    .st-hero__sub { grid-area: sub; position: static; width: auto; margin-top: 22px; font-size: clamp(19px, 2.6vw, 26px); }
    .st-hero__icons { grid-area: icons; position: relative; left: auto; top: auto; width: 100%; height: auto; align-self: center; }
    .st-tag { display: none; }
    .st-feats { grid-area: feats; position: static; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
    .st-feats li:nth-child(n) { width: auto; }
    .st-feats span, .st-feats li:nth-child(4) span { max-width: none; }

    .st-order { margin-top: 32px; height: auto; padding: 20px 20px 22px; }
    .st-chips { height: auto; flex-wrap: wrap; }
    .st-chip { flex: 1 1 calc(33.333% - 8px) !important; height: 62px; }
    .st-qty__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -9px; }
    .st-qty__ticks button { padding: 8px 0; }
    .st-result { height: auto; row-gap: 2px; }
    .st-order__cta { height: 56px; margin-top: 12px; }

    .st-orders { flex-direction: column; height: auto; padding: 44px 0 48px; gap: 30px; }
    .st-orders__main { flex: none; width: 100%; }
    .st-orders__num { font-size: min(84px, 9.6cqi); }
    .st-orders__num span { font-size: min(142px, 16.2cqi); }
    .st-orders__sub { font-size: clamp(20px, 3.4vw, 30px); max-width: 640px; margin-top: 10px; }
    .st-aud { width: 100%; margin: 0; gap: 10px; }
    .st-aud li, .st-aud li:nth-child(n) { flex: 1 1 0; width: auto; height: auto; padding: 20px 16px 22px; }
    .st-aud svg { margin: 0 0 14px; width: 54px; height: 42px; }
    .st-aud b { white-space: normal; }

    .st-subs { min-height: 0; padding: 0 0 60px; display: flex; flex-direction: column; }
    .st-subs__h2 { order: 1; width: auto; padding-top: 44px; font-size: clamp(44px, 8.4vw, 84px); }
    .st-subs__art { order: 2; position: relative; left: auto; top: auto; width: 100%; max-width: 640px; margin: 18px auto 0; }
    .st-subs__art img { width: 100%; }
    .st-bubble { left: 50%; top: 2%; width: auto; max-width: 54%; padding: 12px 16px; font-size: clamp(13px, 2vw, 17px); }
    .st-subs__body { order: 3; width: auto; max-width: 640px; margin-top: 28px; }
    .st-subs__lead { font-size: clamp(19px, 2.8vw, 24px); }
    .st-subs__facts li { font-size: 17px; }

    .st-band--ink, .st-band--paper, .st-band--violet-flow, .st-band--coral-flow, .st-final { padding: 72px 0; }
    .st-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 30px; }
    .st-h2 { font-size: clamp(40px, 7.4vw, 72px); }
    .st-head__sub { font-size: 17px; padding: 0; }
    .st-nets { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .st-why { grid-template-columns: 1fr 1fr; gap: 10px; }
    .st-why__item { min-height: 160px; padding: 24px; }
    .st-why__item b { font-size: 24px; }
    .st-head--steps { margin-top: 72px; }
    .st-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
    .st-steps i { font-size: 72px; margin-bottom: 18px; }
    .st-reviews { grid-template-columns: 1fr; gap: 10px; }
    .st-reviews li { padding: 24px; }
    .st-reviews p { font-size: 17px; }
    .st-info { grid-template-columns: 1fr; gap: 56px; }
    .st-h3 { font-size: 34px; }
    .st-final__in { grid-template-columns: 1fr; gap: 40px; }
    .st-final__h2 { font-size: clamp(48px, 9vw, 96px); }
    .st-final__sub { font-size: 18px; }
    .st-foot { padding: 60px 0 32px; }
    .st-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    .st-foot__about { grid-column: 1 / -1; }
    .st-foot__bottom { flex-direction: column; gap: 8px; margin-top: 44px; }

    .st-bar__in { gap: 18px; height: 56px; }
    .st-bar .st-nav__name { display: none; }
}

@media (max-width: 699px) {
    :root { --gutter: 16px; }
    .st-nav__login { display: none; }
    .st-mnav__login { margin-left: auto; color: var(--lime); }
    .st-nav .st-btn--white { height: 38px; padding: 0 12px; font-size: 14px; }
    .st-nav__name { font-size: 22px; }
    .st-nav__spin { width: 27px; height: 28px; }
    .st-nav__spin img { height: 28px; }
    .st-nav__logo { height: 28px; }
    .st-hero { margin-top: 22px; display: flex; flex-direction: column; }
    .st-hero__main { display: contents; }
    .st-h1 { order: 1; }
    .st-hero__sub { order: 2; }
    .st-order { order: 3; }
    .st-h1 { font-size: clamp(52px, 16.4vw, 80px); line-height: .86; }
    .st-hero__sub { margin-top: 18px; font-size: 19px; }
    .st-hero__icons { order: 4; width: 76%; margin: 22px auto 0; }
    .st-feats { order: 5; grid-template-columns: 1fr 1fr; gap: 20px 14px; margin-top: 18px; }
    .st-feats li { padding-left: 36px; font-size: 13px; }
    .st-feats svg { width: 26px; height: 26px; }
    .st-feats b { font-size: 14px; margin-bottom: 4px; }
    .st-order { margin-top: 24px; padding: 16px 14px 18px; border-radius: 18px; }
    .st-order__tabs .is-on { font-size: 22px; }
    .st-order__tabs a { margin-left: 14px; padding-left: 14px; font-size: 15px; }
    .st-chips { gap: 6px; margin-top: 14px; }
    .st-chip { flex-basis: calc(33.333% - 6px) !important; height: 58px; font-size: 12.5px; }
    .st-qty { gap: 12px; }
    .st-qty__num { width: 92px; }
    .st-qty__ticks { padding-right: 0; }
    .st-qty__ticks button { font-size: 12px; }
    .st-qty__ticks button:nth-child(2), .st-qty__ticks button:nth-child(4) { display: none; }
    .st-result { padding: 12px 14px; grid-template-columns: 1fr; }
    .st-result__get { font-size: 17px; }
    .st-result__get b { font-size: 30px; }
    .st-result__price { padding: 0; font-size: 16px; }
    .st-result__price b { font-size: 22px; }
    .st-order__cta { font-size: 16px; }

    .st-orders { padding: 36px 0 40px; }
    .st-orders__num { white-space: normal; line-height: .84; font-size: 13vw; }
    .st-orders__num span { display: block; font-size: 22.5vw; }
    .st-aud { flex-direction: column; }
    .st-aud li, .st-aud li:nth-child(n) { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; padding: 16px; }
    .st-aud svg { grid-row: 1 / 3; margin: 0; width: 46px; height: 38px; align-self: center; }
    .st-aud b { margin-bottom: 2px; }

    .st-subs__h2 { padding-top: 36px; font-size: clamp(40px, 12.4vw, 56px); }
    .st-subs__art { width: 108%; max-width: none; margin-left: -4%; margin-top: 8px; }
    .st-bubble { left: 44%; top: 2%; font-size: 13px; padding: 10px 12px; border-radius: 16px; }
    .st-subs__facts li { font-size: 16px; }
    .st-btn--ink, .st-btn--lime, .st-btn--ghost { width: 100%; }

    .st-band--ink, .st-band--paper, .st-band--violet-flow, .st-band--coral-flow, .st-final { padding: 56px 0; }
    .st-h2 { font-size: clamp(36px, 11vw, 52px); }
    .st-nets { grid-template-columns: 1fr 1fr; gap: 8px; }
    .st-nets a { grid-template-columns: 40px 1fr; column-gap: 10px; padding: 12px; border-radius: 14px; }
    .st-nets img, .st-nets__glyph { width: 40px; height: 40px; border-radius: 10px; }
    .st-nets b { font-size: 14.5px; }
    .st-nets span { font-size: 13px; }
    .st-why { grid-template-columns: 1fr; }
    .st-why__item { min-height: 0; padding: 22px; }
    .st-why__item b { font-size: 22px; }
    .st-head--steps { margin-top: 56px; }
    .st-steps { grid-template-columns: 1fr; }
    .st-steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; padding: 20px; }
    .st-steps i { grid-row: 1 / 3; font-size: 56px; margin: 0; }
    .st-steps b { font-size: 19px; }
    .st-faq summary { padding: 18px 56px 18px 18px; font-size: 17px; }
    .st-faq details p { padding: 0 18px 18px; }
    .st-final__h2 { font-size: clamp(42px, 13vw, 60px); }
    .st-final__cta .st-btn { width: 100%; }
    .st-news-form { padding: 20px; }
    .st-news-form__row { flex-direction: column; }
    .st-news-form .st-btn { width: 100%; }
    .st-foot__grid { grid-template-columns: 1fr; gap: 28px; }
    .st-bar .st-btn { height: 38px; padding: 0 14px; font-size: 15px; }
}

/* ---- компактная шапка ---- */
.st-bar { position: fixed; z-index: 50; left: 0; right: 0; top: 0; background: rgba(10,18,53,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transform: translateY(-110%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.st-bar.is-on { transform: none; }
.st-bar__in { display: flex; align-items: center; gap: 36px; height: 64px; }
.st-bar .st-nav__logo { height: 30px; gap: 8px; }
.st-bar .st-nav__spin { width: 28px; height: 30px; }
.st-bar .st-nav__spin img { height: 30px; }
.st-bar .st-nav__name { font-size: 24px; }
.st-ticks--bar { flex: 1; margin: 0; height: 4px; gap: 6px; }
.st-ticks--bar i, .st-ticks--bar i:first-child { flex: 1 1 0; }
.st-ticks--bar i b { --f: 0; }
.st-bar .st-btn { height: 42px; padding: 0 20px; font-size: 16px; border-radius: 10px; }

/* ---- движение ---- */
@keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes st-tilt-a { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-6px); } }
@keyframes st-tilt-b { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-13deg) translateY(5px); } }
@keyframes st-bubble { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-4deg) translateY(-4px); } }
@keyframes st-pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
    .st-hero__icons { animation: st-float 6s ease-in-out infinite; }
    .st-tag--clients { animation: st-tilt-a 5s ease-in-out infinite; }
    .st-tag--results { animation: st-tilt-b 5.6s ease-in-out .8s infinite; }
    .st-bubble { animation: st-bubble 5s ease-in-out infinite; }
    .st-result.is-pop .st-result__price b, .st-result.is-pop .st-result__get b { display: inline-block; animation: st-pop .3s ease-out; }
    .js .st-rv { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
    .js .st-rv.is-in { opacity: 1; transform: none; }
    .js .st-rv:is(.st-nets, .st-why, .st-steps, .st-reviews) { opacity: 1; transform: none; }
    .js .st-rv:is(.st-nets, .st-why, .st-steps, .st-reviews) > li { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 45ms); }
    .js .st-rv.is-in:is(.st-nets, .st-why, .st-steps, .st-reviews) > li { opacity: 1; transform: none; }
    .st-ticks b { transition: transform .25s linear; }
}
@media (prefers-reduced-motion: reduce) { .st * { transition: none !important; animation: none !important; } }

/* ===== аудит: colorize — контраст (WCAG AA) ===== */
/* соцсети: чёрные плашки TikTok/Reddit/Rutube сливались с тёмной карточкой — тонкое светлое кольцо отделяет любой значок */
.st-nets img, .st-nets__glyph { box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 6px 14px -8px rgba(0,0,0,.6); }
.st-nets__glyph--rutube { background: linear-gradient(140deg, #3a3f72, #222651); color: #ff6b84; }
.st-nets li:nth-child(-n+2) span { color: #e9e1fe; }                 /* счётчик на фиолетовой карточке: 3.3 → 5.6:1 */
.st-nets li:nth-child(-n+2) img, .st-nets li:nth-child(-n+2) .st-nets__glyph { box-shadow: 0 0 0 1px rgba(255,255,255,.3), 0 6px 14px -8px rgba(20,0,90,.6); }
/* первый экран */
.st-feats li { color: #e4d8fd; }                                      /* 4.3 → 5.2:1 */
.st-order__tabs a { color: #6b6e8f; }                                 /* «Массовый заказ»: 2.7 → 4.9:1 */
/* коралловые полосы: фон бренда не трогаем, затемняем плитки и усиливаем мелкий текст */
.st-aud li { background: rgba(120,10,30,.30); }                       /* белый текст 4.1 → 4.7:1 */
.st-why__item--coral { background: #d62f45; }                         /* 3.4 → 4.8:1 */
.st-why__item--coral span { color: #fff; }
.st-band--coral .st-head__sub, .st-band--coral-flow .st-head__sub { opacity: 1; font-weight: 700; font-size: 19px; } /* крупный полужирный: порог 3:1 */
@media (max-width: 767px) { .st-band--coral .st-head__sub, .st-band--coral-flow .st-head__sub { font-size: 19px; } }
/* подписи под ползунком: 10.8px → не меньше 12px */
.st-qty__ticks button { font-size: max(12px, calc(12 * var(--u))) !important; }
/* значки-глифы: на светлых плашках (жёлтый, оранжевый, голубой) белый штрих давал ~1.6:1 — делаем тёмным */
.st-nets__glyph--crypto, .st-nets__glyph--ok, .st-nets__glyph--audiomack { color: #2a1700; }
.st-nets__glyph--boomplay { color: #04263a; }
.st-nets__glyph--clubhouse { color: #3a3020; }
.st-nets__glyph svg { stroke-width: 2.4; }
/* значок — тоже <span>, и правило счётчика «.st-nets span» красило его в #aab0d6: возвращаем цвета значков */
.st-nets a > .st-nets__glyph { color: #fff; }
.st-nets a > .st-nets__glyph--rutube { color: #ff6b84; }
.st-nets a > :is(.st-nets__glyph--crypto, .st-nets__glyph--ok, .st-nets__glyph--audiomack) { color: #2a1700; }
.st-nets a > .st-nets__glyph--boomplay { color: #04263a; }
.st-nets a > .st-nets__glyph--clubhouse { color: #3a3020; }