/* SMM v2 — временная страница по макету Figma «19 · Additional Pages».
   Шапка, меню и подвал — из общего style.css; здесь только блоки страницы.
   Все классы с префиксом smm-, чтобы не задеть общие стили. */

@font-face{font-family:'JetBrains Mono';src:url(jbm-cyr.woff2) format('woff2');font-weight:400;font-display:swap;
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'JetBrains Mono';src:url(jbm-lat.woff2) format('woff2');font-weight:400;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}

.page-smm{
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --mist:#f5f5f5;
  --on-dark-60:rgba(255,255,255,.6);
  --on-dark-30:rgba(255,255,255,.3);
  --inset:12px;          /* поле вокруг панелей */
  --px:36px;             /* внутренний отступ панели */
}
@media (max-width:809px){.page-smm{--inset:6px;--px:20px}}

/* блок связи и подвал — как на всех страницах сайта (без переопределений); серый холст только под листами */
/* шапка лежит поверх первой панели — сдвигаем на её поле */
.page-smm .topbar{padding-inline:calc(var(--inset) + var(--px))}

.smm{display:grid;gap:var(--inset);padding:var(--inset);background:#e6e6e8}
.smm-panel{position:relative;background:var(--paper);border-radius:28px;
  padding:88px var(--px);overflow:hidden;min-width:0}
.smm-panel--dark{background:var(--ink);color:#fff}
.smm-panel--accent{background:var(--accent);color:#fff}
@media (max-width:809px){.smm-panel{border-radius:22px;padding-block:64px}}

.smm-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.smm-mono{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.3}
.is-mute{color:var(--ink-40)}
.smm-panel--dark .is-mute{color:var(--on-dark-30)}

/* ── уголок ⌜ — знак бренда вместо звёздочек (компонент SMMv2/Corner) ── */
.smm-corner{position:relative;display:inline-block;flex:none;width:1em;height:1em;font-size:22px}
.smm-corner::before{content:'';position:absolute;inset:14%;
  border-top:.16em solid var(--accent);border-left:.16em solid var(--accent)}

/* ── подпись раздела: «01 / Подход ───── ◯» ── */
.smm-label{display:flex;align-items:center;gap:18px;height:20px}
.smm-label span{font:400 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-60);white-space:nowrap}
.smm-label i{flex:1;height:1px;background:var(--line)}
/* конец подписи — наш уголок, отражённый по горизонтали: ⌝ уходит вправо-вверх (28.09) */
.smm-label b{flex:none;position:relative;width:22px;height:22px}
.smm-label b::before{content:'';position:absolute;inset:14%;
  border-top:3.5px solid var(--accent);border-right:3.5px solid var(--accent)}
.smm-panel--dark .smm-label span,.smm-panel--accent .smm-label span{color:var(--on-dark-60)}
.smm-panel--dark .smm-label i{background:var(--line-dark)}
.smm-panel--accent .smm-label i{background:rgba(255,255,255,.2)}
.smm-panel--accent .smm-label b::before{border-color:#fff}

/* ── текст ── */
.smm-lead{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.04em;color:var(--ink-60)}
.smm-panel--dark .smm-lead{color:var(--on-dark-60)}
.smm-panel--accent .smm-lead{color:#fff}
.smm-h2{font-size:80px;font-weight:600;line-height:.96;letter-spacing:-.07em}
.smm-h2 .is-mute{display:block}
@media (max-width:1199px){.smm-h2{font-size:64px}}
@media (max-width:809px){.smm-h2{font-size:40px}.smm-lead{font-size:16px}}

/* ── кнопка SMMv2/Button: чип со стрелкой + подпись ── */
.smm-btn{display:inline-flex;align-items:center;gap:16px;padding:5px 24px 5px 5px;border-radius:16px;
  background:var(--ink);color:#fff;font-size:15px;font-weight:600;line-height:1.3;letter-spacing:-.02em;
  white-space:nowrap;border:1px solid transparent;transition:transform .3s var(--ease-hover),background .3s}
.smm-btn__chip{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:11px;background:#fff;
  transition:transform .3s var(--ease-hover)}
.smm-btn:hover .smm-btn__chip{transform:translateX(3px)}
.smm-btn--light{background:#fff;color:var(--ink);border-color:var(--line)}
.smm-btn--light .smm-btn__chip{background:var(--ink)}
.smm-btn--white{background:#fff;color:var(--ink)}
.smm-btn--white .smm-btn__chip{background:var(--ink)}
.smm-btn--accent{background:var(--accent);color:#fff}
.smm-btn--wide{width:100%}
button.smm-btn{font:inherit;font-size:15px;font-weight:600;cursor:pointer}

.smm-tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:100px;background:#fff;
  color:var(--ink);font:400 10px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}

/* ═════════ 01 · первый экран ═════════ */
.smm-hero{padding:182px 20px 16px}
.smm-hero>.smm-label{margin-inline:20px}
.smm-hero__row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  margin:40px 20px 44px}
.smm-hero__title{font-size:132px;font-weight:600;line-height:.96;letter-spacing:-.07em}
.smm-hero__title .is-mute{display:block}
.smm-hero__side{display:grid;gap:28px;width:440px;flex:none}
.smm-hero__btns{display:flex;gap:10px}
.smm-hero__photo{position:relative;height:640px;border-radius:18px;overflow:hidden;color:#fff}
.smm-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.smm-hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(5,5,8,.82))}
.smm-hero__tag{position:absolute;left:24px;top:24px;padding:8px 14px 8px 12px;font-size:11px}
.smm-hero__tag i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.smm-hero__clients{position:absolute;left:32px;bottom:32px;display:grid;gap:14px;max-width:calc(100% - 360px)}
.smm-hero__for{font-size:12px;color:var(--on-dark-60)}
.smm-hero__names{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;
  font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:56px;line-height:.9;letter-spacing:-.01em}
.smm-hero__names .smm-corner{font-size:22px}
.smm-phone{position:absolute;right:32px;top:32px;margin:0;display:grid;gap:12px;padding:10px 10px 14px;
  border-radius:22px;background:#fff;color:var(--ink)}
.smm-phone img{width:240px;height:520px;object-fit:cover;border-radius:14px}
.smm-phone figcaption{display:grid;gap:3px;padding-left:4px}
.smm-phone b{font-size:14px;font-weight:600;letter-spacing:0}
.smm-phone .smm-mono{font-size:10px;color:var(--ink-60)}

@media (max-width:1199px){
  .smm-hero__title{font-size:96px}
  .smm-hero__row{flex-direction:column;align-items:flex-start}
  .smm-hero__side{width:min(100%,520px)}
}
@media (max-width:809px){
  .smm-hero{padding:96px 8px 8px}
  .smm-hero>.smm-label{margin-inline:12px}
  .smm-hero__row{margin:28px 12px 24px;gap:20px}
  .smm-hero__title{font-size:46px;letter-spacing:-.06em}
  .smm-hero__side{gap:20px}
  .smm-hero__btns{display:grid}
  .smm-hero__btns .smm-btn{width:100%}
  .smm-hero__photo{height:428px}
  .smm-hero__tag{left:14px;top:14px;font-size:9px;padding:6px 10px}
  .smm-hero__clients{left:14px;right:14px;bottom:14px;max-width:none;gap:10px}
  .smm-hero__for{font-size:9px}
  .smm-hero__names{font-size:27px;gap:4px 10px}
  .smm-hero__names .smm-corner{font-size:12px}
  .smm-phone{right:10px;top:42px;padding:5px 5px 7px;border-radius:12px;gap:6px}
  .smm-phone img{width:116px;height:250px;border-radius:8px}
  .smm-phone b{font-size:10px}
  .smm-phone .smm-mono{font-size:7px}
}

/* ═════════ 02 · подход + бенто ═════════ */
.smm-manifesto{margin-top:40px;max-width:1110px;font-size:64px;font-weight:600;line-height:1.05;letter-spacing:-.05em}
.smm-manifesto .w{color:var(--ink-40);transition:color .35s var(--ease)}
.smm-manifesto .w.is-lit{color:var(--ink)}
.smm-approach__sub{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:40px}
.smm-approach__sub .smm-lead{max-width:540px}
.smm-bento{display:grid;grid-template-columns:408fr 300fr 300fr 300fr;gap:12px;height:430px;margin-top:40px}
.smm-bento>*,.smm-bento__col>*{border-radius:20px;padding:24px;display:flex;flex-direction:column;
  justify-content:space-between;min-width:0}
.smm-bento .smm-mono{color:var(--ink-60)}
.smm-bento__txt{margin-top:6px;font-size:14px;line-height:1.4;letter-spacing:-.02em;color:var(--ink-60)}
.smm-bento__romi{background:var(--ink);color:#fff}
.smm-bento__romi .smm-mono,.smm-bento__romi .smm-bento__txt{color:var(--on-dark-60)}
.smm-bento__romi .smm-bento__txt{font-size:15px;line-height:1.45;margin-top:14px}
.smm-bento__top{display:flex;justify-content:space-between;align-items:center}
.smm-bento__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff}
.smm-bento__big{font-size:128px;font-weight:500;line-height:.86;letter-spacing:-.06em}
.smm-bento__col{display:grid;grid-template-rows:1fr 1fr;gap:12px;padding:0!important}
.smm-bento__dash{background:var(--mist);border:1px dashed var(--ink-40)}
.smm-bento__num{font-size:60px;font-weight:500;line-height:.95;letter-spacing:-.06em}
.smm-bento__num--s{font-size:52px}
.smm-bento__num--l{font-size:64px}
.smm-bento__hyde{background:var(--mist)}
.smm-bars{display:flex;gap:10px;align-items:flex-end}
.smm-bars>div{flex:1;display:grid;gap:8px}
.smm-bars i{display:block;height:70px;border-radius:10px;background:var(--ink-40)}
.smm-bars>div+div i{height:133px;background:var(--ink)}
.smm-bars .smm-mono{font-size:9px}
.smm-bento__quote{background:#fff;border:1px solid var(--line)}
.smm-corner--q{font-size:34px}
.smm-bento__say{font-size:20px;font-weight:500;line-height:1.32;letter-spacing:-.03em}
.smm-bento__src{margin-top:16px;font-size:10px;color:var(--ink-40)!important}

@media (max-width:1199px){
  .smm-manifesto{font-size:48px}
  .smm-bento{grid-template-columns:1fr 1fr;height:auto}
  .smm-bento>*{min-height:300px}
  .smm-bento__col{min-height:0}
}
@media (max-width:809px){
  .smm-manifesto{margin-top:28px;font-size:28px;letter-spacing:-.045em}
  .smm-approach__sub{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  .smm-bento{grid-template-columns:1fr;gap:10px;margin-top:28px}
  .smm-bento>*{min-height:0;padding:18px}
  .smm-bento__romi{gap:28px}
  .smm-bento__big{font-size:56px}
  .smm-bento__col{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:10px}
  .smm-bento__col>*{padding:16px;gap:12px}
  .smm-bento__col .smm-mono{font-size:8px}
  .smm-bento__num,.smm-bento__num--s{font-size:26px}
  .smm-bento__col .smm-bento__txt{font-size:11px}
  .smm-bento__hyde{display:grid;grid-template-columns:1fr 1fr;gap:16px 10px}
  .smm-bento__hyde>.smm-mono{grid-column:1/-1}
  .smm-bento__hyde .smm-bars{grid-column:1/-1}
  .smm-bento__hyde>div:last-child{grid-column:1/-1}
  .smm-bento__num--l{font-size:44px}
  .smm-bars i{height:50px}
  .smm-bars>div+div i{height:90px}
  .smm-bento__quote{gap:20px}
  .smm-bento__say{font-size:17px}
}

/* ═════════ бегущая строка (Кейсы / Пакеты / SMM) ═════════ */
.smm-marquee{overflow:hidden;margin:-48px calc(var(--px) * -1) 36px;padding-inline:var(--px);
  -webkit-mask:linear-gradient(90deg,transparent,#000 var(--px),#000 calc(100% - var(--px)),transparent);
  mask:linear-gradient(90deg,transparent,#000 var(--px),#000 calc(100% - var(--px)),transparent)}
.smm-marquee__track{display:flex;align-items:center;gap:.16em;width:max-content;
  font-size:300px;font-weight:600;line-height:1;letter-spacing:-.07em;
  animation:smm-run 26s linear infinite}
.smm-marquee__track--slow{animation-duration:34s}
.smm-marquee__track span{flex:none;padding-right:.02em}
.smm-marquee__track .smm-corner{font-size:.633em;margin-inline:.1em}
@keyframes smm-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.smm-marquee__track{animation:none}}
@media (max-width:1199px){.smm-marquee__track{font-size:200px}}
@media (max-width:809px){.smm-marquee{margin-top:-24px;margin-bottom:20px}.smm-marquee__track{font-size:120px}}

/* подпись слева + текст с кнопкой справа */
.smm-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px}
.smm-intro>.smm-label{flex:0 1 560px}
.smm-intro__side{display:grid;gap:22px;justify-items:start;width:460px;flex:none}
@media (max-width:809px){
  .smm-intro{flex-direction:column;align-items:stretch;gap:20px}
  .smm-intro>.smm-label{flex:none}
  .smm-intro__side{width:auto}
}

/* ═════════ 03 · кейсы ═════════ */
.smm-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px;align-items:start}
.smm-case{display:flex;flex-direction:column;gap:6px;padding:8px 8px 20px;border:1px solid var(--line);border-radius:20px;
  background:#fff;transition:border-color .3s}
.smm-case:hover{border-color:var(--ink-40)}
.smm-case__photo{position:relative;height:380px;border-radius:14px;overflow:hidden;margin-bottom:12px}
.smm-case__photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.smm-case:hover .smm-case__photo img{transform:scale(1.03)}
.smm-case__photo .smm-tag{position:absolute;left:12px;top:12px}
.smm-case__who{padding-inline:8px;font-size:10px;color:var(--ink-60)}
.smm-case__title{padding-inline:8px;font-size:20px;font-weight:600;line-height:1.22;letter-spacing:-.03em}
.smm-case__nums{display:flex;margin:12px 8px 0}
.smm-case__nums>div{flex:1;display:grid;gap:4px;align-content:start;padding-top:12px;border-top:1px solid var(--line)}
.smm-case__nums>div+div{border-left:1px solid var(--line);padding-left:12px}
.smm-case__nums b{font:400 20px/1.2 var(--mono);letter-spacing:-.02em}
.smm-case__nums span{font-size:12px;line-height:1.3;letter-spacing:0;color:var(--ink-60)}
.smm-swipe{display:none}
@media (max-width:1199px){.smm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* мобильный: карусель прокруткой, без скрипта */
@media (max-width:809px){
  .smm-cards{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
    margin-inline:calc(var(--px) * -1);padding-inline:var(--px);scroll-padding-inline:var(--px);scrollbar-width:none}
  .smm-cards::-webkit-scrollbar{display:none}
  .smm-case{flex:0 0 80%;scroll-snap-align:start}
  .smm-case__photo{height:auto;aspect-ratio:222/272}
  .smm-case__title{font-size:16px}
  .smm-case__nums b{font-size:14px}
  .smm-case__nums span{font-size:10px}
  .smm-swipe{display:block;margin-top:18px;font-size:9px;color:var(--ink-40)}
}

/* ═════════ 04 · что входит ═════════ */
.smm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:44px}
.smm-head .smm-lead{width:420px;flex:none}
/* Плашки — как «Почему мы» на главной: у каждой свой визуальный приём и своё движение.
   Движение стартует, когда плашка входит в экран (smm.js ставит .is-in); без скрипта
   и при reduced-motion видно сразу конечное состояние (28.09) */
.smm-incl__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:44px}
.smm-item{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:22px;
  padding:24px;border-radius:20px;background:#fff}
.smm-item--cal,.smm-item--chat{background:var(--mist)}
.smm-item--dark{background:var(--ink);color:#fff}
.smm-item__top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:26px}
.smm-item__top>.smm-mono:first-child{font-size:12px;color:var(--ink-40)}
.smm-chip{padding:6px 10px;border-radius:40px;background:var(--mist);font-size:10px;color:var(--ink-60);white-space:nowrap}
.smm-item--dark .smm-chip{background:rgba(255,255,255,.08);color:var(--on-dark-60)}
.smm-item--dark .smm-item__top>.smm-mono:first-child{color:var(--on-dark-30)}
.smm-item .card__corner{top:24px;right:24px}
.smm-item__txt{margin-top:auto}
.smm-item h3{font-size:26px;font-weight:600;line-height:1.3;letter-spacing:-.04em}
.smm-item__txt p{margin-top:10px;font-size:15px;line-height:1.45;letter-spacing:-.03em;color:var(--ink-60)}
.smm-item--dark .smm-item__txt p{color:var(--on-dark-60)}
.smm-viz{position:relative;height:210px;flex:none}
.smm-viz p{margin:0}

/* 01 — монтажный стол: кадры съезжаются в дорожку, бегунок идёт по таймлайну */
.cut{display:flex;flex-direction:column;justify-content:center;gap:8px}
.cut__ruler{display:flex;justify-content:space-between;font-size:9px;color:var(--ink-40);
  padding-bottom:6px;border-bottom:1px dashed var(--line)}
.cut__track{display:flex;gap:3px;height:84px}
.cut__clip{flex:var(--f) 1 0;min-width:0;border-radius:8px;overflow:hidden;background:var(--mist);
  box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line)}
.cut__clip{display:grid;place-items:center;color:var(--ink)}
.cut__clip .smm-ph{width:28px;height:28px}
.cut__clip:nth-child(2){background:#e7efff;color:var(--accent);box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--accent)}
.smm-ph{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cut__wave{width:100%;height:30px;padding:3px 6px;border-radius:8px;background:var(--mist);fill:var(--accent-soft)}
.cut__head{position:absolute;top:18px;bottom:22px;left:0;width:2px;margin-left:-1px;background:var(--accent);
  border-radius:2px;left:34%}
.cut__head::before{content:'';position:absolute;top:-6px;left:-5px;width:12px;height:12px;border-radius:3px 3px 50% 50%;background:var(--accent)}

/* 02 — календарь месяца: дни с публикациями отмечаются по очереди */
.cal{display:flex;flex-direction:column;justify-content:center;gap:6px}
.cal__week,.cal__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal__week{font-size:9px;color:var(--ink-40);text-align:center}
.cal__d{position:relative;height:26px;border-radius:7px;background:#fff}
.cal__d.is-off{background:transparent}
.cal__d i{position:absolute;left:5px;top:3px;font:400 8px/1 var(--mono);font-style:normal;color:var(--ink-40)}
.cal__d.is-a::after,.cal__d.is-b::after{content:'';position:absolute;right:5px;bottom:5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cal__d.is-b::after{background:var(--ink)}
.cal__d.is-a{background:#e7efff}
.cal__legend{display:flex;gap:14px;margin-top:6px;font-size:10px;color:var(--ink-60)}
.cal__legend span{display:inline-flex;align-items:center;gap:6px}
.cal__legend span:last-child{margin-left:auto;color:var(--ink-40)}
.cal__legend i{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.cal__legend i.is-b{background:var(--ink)}

/* 03 — сторис веером; полоски прогресса бегут от карточки к карточке */
.sto{--w:92px;--h:164px;--sx:118px;display:grid;place-items:center}
.sto__card{position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius:12px;overflow:hidden;background:var(--mist);box-shadow:0 0 0 1px var(--line),0 12px 26px rgba(12,12,12,.12);
  transform:translateX(calc(var(--x) * var(--sx))) translateY(calc(var(--r) * var(--r) * 10px)) rotate(calc(var(--r) * 12deg));
  z-index:calc(4 - var(--i))}
.sto__card:nth-child(3){z-index:5}
.sto__card{display:grid;place-items:center;color:var(--ink);background:linear-gradient(160deg,#fff,var(--mist))}
.sto__card:nth-child(3){color:var(--accent);background:linear-gradient(160deg,#fff,#e7efff)}
.sto__card .smm-ph{width:34px;height:34px}
.sto__bar{position:absolute;left:7px;right:7px;top:7px;height:3px;border-radius:3px;background:rgba(12,12,12,.1);overflow:hidden}
.sto__bar::after{content:'';position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(1)}

/* 04 — переписка: вопрос, «печатает…», ответ */
.chat{display:flex;flex-direction:column;justify-content:center;gap:10px}
.chat__in{display:flex;align-items:flex-end;gap:8px;max-width:86%}
.chat__ava{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;background:#fff;color:var(--ink-60);outline:2px solid var(--accent-soft);outline-offset:-2px}
.chat__ava svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.chat__in p,.chat__out p{padding:10px 13px;font-size:13px;font-weight:500;line-height:1.35;letter-spacing:-.03em}
.chat__in p{background:#fff;border-radius:16px 16px 16px 4px;color:var(--ink);box-shadow:0 6px 16px rgba(12,12,12,.06)}
.chat__slot{position:relative;align-self:flex-end;max-width:86%;display:grid}
.chat__slot>*{grid-area:1/1}
.chat__out p{background:var(--accent);color:#fff;border-radius:16px 16px 4px 16px;box-shadow:0 8px 18px rgba(27,109,245,.28)}
.chat__typing{align-self:end;justify-self:end;display:flex;gap:4px;padding:12px 14px;border-radius:16px 16px 4px 16px;background:#fff;opacity:0}
.chat__typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-40)}
.chat__meta{align-self:flex-end;font-size:9px;color:var(--ink-40)}

/* 05 — прицел: кольца сходятся к точке, цифра из кейса докручивается */
.aim{display:flex;align-items:center;gap:24px}
.aim__rings{width:170px;height:170px;flex:none;overflow:visible}
.aim__rings line{stroke:rgba(255,255,255,.14);stroke-width:1;stroke-dasharray:3 4}
.aim__rings circle{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1.2;transform-box:fill-box;transform-origin:center}
.aim__rings circle:nth-of-type(4){stroke:var(--accent-soft)}
.aim__rings .aim__dot{fill:var(--accent);stroke:none;filter:drop-shadow(0 0 10px rgba(43,195,245,.8))}
.aim__num{display:grid;gap:6px;min-width:0}
.aim__num b{font:700 76px/.85 'Bebas Neue',sans-serif;letter-spacing:.005em;color:#fff}
.aim__num .smm-mono{font-size:10px;color:var(--accent-soft)}
.aim__num .aim__sub{color:var(--on-dark-60)}

/* 06 — табло: буквы перелистываются, RU и KZ встают на места */
.lang{display:flex;justify-content:center;align-items:center;gap:22px}
.lang__col{display:grid;justify-items:center;gap:12px}
.lang__col>.smm-mono{font-size:10px;color:var(--ink-40)}
.flap{--h:92px;display:flex;gap:4px}
.flap__c{position:relative;width:calc(var(--h) * .74);height:var(--h);border-radius:10px;overflow:hidden;background:var(--ink)}
.flap--kz .flap__c{background:var(--accent)}
.flap__c::after{content:'';position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:rgba(255,255,255,.22);
  box-shadow:0 1px 0 rgba(0,0,0,.25)}
.flap__s{display:flex;flex-direction:column;transform:translateY(calc(var(--n) * var(--h) * -1))}
.flap__s b{display:grid;place-items:center;height:var(--h);font:700 calc(var(--h) * .8)/1 'Bebas Neue',sans-serif;color:#fff;padding-top:.06em}

/* ── движение. Плашки играют строго по одной (очередь в smm.js): пока очередь не дошла,
   видна статичная начальная поза; .is-in запускает свою сцену, data-dur — её длительность ── */
@media (prefers-reduced-motion:no-preference){
  /* 01: кадры лежат вразброс и собираются в дорожку; затем бегунок идёт по таймлайну */
  .is-armed .cut__clip{opacity:.45;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.8)}
  .is-armed .cut__wave{clip-path:inset(0 100% 0 0)}
  .is-armed .cut__head{opacity:0;left:0}
  .is-armed .is-in .cut__clip{animation:cutIn .9s cubic-bezier(.34,1.45,.64,1) calc(var(--i) * .12s) both}
  .is-armed .is-in .cut__wave{animation:cutWave .9s cubic-bezier(.65,0,.35,1) .45s both}
  .is-armed .is-in .cut__head{animation:cutHead 5s linear 1.2s infinite}
  @keyframes cutIn{from{opacity:.45;transform:translate(var(--dx),var(--dy)) rotate(var(--r)) scale(.8)}to{opacity:1;transform:none}}
  @keyframes cutWave{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes cutHead{0%{left:0;opacity:1}92%{left:100%;opacity:1}100%{left:100%;opacity:0}}

  /* 02: пустой месяц; дни публикаций отмечаются по порядку */
  .is-armed .cal__d.is-a{background:#fff}
  .is-armed .cal__d::after{transform:scale(0)}
  .is-armed .is-in .cal__d.is-a{animation:calTint .4s ease-out calc(.2s + var(--i) * .12s) both}
  .is-armed .is-in .cal__d::after{animation:calDot .45s cubic-bezier(.34,1.8,.64,1) calc(.2s + var(--i) * .12s) both}
  @keyframes calTint{from{background:#fff}to{background:#e7efff}}
  @keyframes calDot{from{transform:scale(0)}to{transform:scale(1)}}

  /* 03: стопка сторис раскрывается веером, прогресс бежит от карточки к карточке */
  .is-armed .sto__card{transform:rotate(calc(var(--r) * 3deg))}
  .is-armed .sto__bar::after{transform:scaleX(0)}
  .is-armed .is-in .sto__card{animation:storyFan 1.1s cubic-bezier(.22,1.2,.36,1) calc((3 - var(--i)) * .06s) both}
  .is-armed .is-in .sto__bar::after{animation:storyBar 6s linear calc(1.1s + var(--i) * 1.5s) infinite}
  @keyframes storyFan{from{transform:rotate(calc(var(--r) * 3deg))}
    to{transform:translateX(calc(var(--x) * var(--sx))) translateY(calc(var(--r) * var(--r) * 10px)) rotate(calc(var(--r) * 12deg))}}
  @keyframes storyBar{0%{transform:scaleX(0)}25%,100%{transform:scaleX(1)}}

  /* 04: вопрос уже висит; три точки «печатает…», затем прилетает ответ */
  .is-armed .chat__out,.is-armed .chat__meta{opacity:0}
  .is-armed .is-in .chat__typing{animation:chatType 1.3s ease .15s both}
  .is-armed .is-in .chat__typing i{animation:chatDot .9s ease-in-out infinite}
  .is-armed .is-in .chat__typing i:nth-child(2){animation-delay:.15s}
  .is-armed .is-in .chat__typing i:nth-child(3){animation-delay:.3s}
  .is-armed .is-in .chat__out{animation:chatFly .6s cubic-bezier(.22,1.3,.36,1) 1.4s both}
  .is-armed .is-in .chat__meta{animation:chatFade .4s ease 1.9s both}
  @keyframes chatType{0%{opacity:0;transform:scale(.6)}15%,85%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
  @keyframes chatDot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
  @keyframes chatFly{from{opacity:0;transform:translate(30px,16px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes chatFade{from{opacity:0}to{opacity:1}}

  /* 05: широкие бледные кольца сужаются к точке, цифра докручивается (smm.js) */
  .is-armed .aim__rings circle{opacity:.3;transform:scale(1.35)}
  .is-armed .aim__rings .aim__dot{opacity:0;transform:scale(0)}
  .is-armed .is-in .aim__rings circle{animation:aimIn 1.2s cubic-bezier(.16,1,.3,1) calc(var(--i) * .16s) both}
  .is-armed .is-in .aim__rings .aim__dot{animation:aimDot .5s cubic-bezier(.34,1.8,.64,1) .8s both,aimPulse 2.4s ease-in-out 1.4s infinite}
  @keyframes aimIn{from{opacity:.3;transform:scale(1.35)}to{opacity:1;transform:none}}
  @keyframes aimDot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
  @keyframes aimPulse{0%,100%{transform:none}50%{transform:scale(1.5)}}

  /* 06: табло перелистывает буквы шагами, KZ догоняет RU */
  .is-armed .flap__s{transform:none}
  .is-armed .is-in .flap__s{animation:flap 1.1s steps(var(--n),end) both}
  .is-armed .is-in .flap__c:nth-child(2) .flap__s{animation-delay:.18s}
  .is-armed .is-in .flap--kz .flap__s{animation-delay:.5s}
  .is-armed .is-in .flap--kz .flap__c:nth-child(2) .flap__s{animation-delay:.68s}
  @keyframes flap{from{transform:none}to{transform:translateY(calc(var(--n) * var(--h) * -1))}}
}

@media (max-width:1199px){.smm-incl__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:809px){
  .smm-head{flex-direction:column;align-items:flex-start;gap:16px;margin-top:28px}
  .smm-head .smm-lead{width:auto}
  .smm-incl__grid{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .smm-item{gap:16px;padding:20px}
  .smm-item .card__corner{top:20px;right:20px}
  .smm-item h3{font-size:19px}
  .smm-item__txt p{font-size:14px}
  .smm-viz{height:190px}
  .cut__track{height:76px}
  .sto{--w:80px;--h:142px;--sx:92px}
  .aim{gap:16px}
  .aim__rings{width:128px;height:128px}
  .aim__num b{font-size:60px}
  .flap{--h:78px}
  .lang{gap:16px}
}

/* ═════════ 05 · процесс ═════════ */
.smm-proc__grid{display:flex;justify-content:space-between;gap:48px;margin-top:56px}
.smm-proc__left{display:flex;flex-direction:column;align-items:flex-start;gap:28px;width:540px;flex:none}
.smm-proc__left .smm-h2 .is-mute{display:block}
.smm-proc__time{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;margin-top:20px}
.smm-proc__time>div{display:grid;gap:8px;align-content:start;padding:16px 18px;border:1px solid var(--line-dark);border-radius:16px}
.smm-proc__time b{font-size:34px;font-weight:400;line-height:1;letter-spacing:-.03em}
.smm-proc__time b span{font:400 38px/1 'Bebas Neue',sans-serif;letter-spacing:0}
.smm-proc__time span{font-size:13px;line-height:1.35;letter-spacing:0;color:var(--on-dark-60)}
.smm-steps{flex:1;max-width:804px;display:grid;gap:10px;align-content:start}
.smm-step{border:1px solid var(--line-dark);border-radius:20px;transition:background .3s}
.smm-step[open]{background:var(--line-dark)}
.smm-step summary{display:flex;align-items:center;gap:22px;padding:24px 24px 24px 28px;cursor:pointer;list-style:none}
.smm-step summary::-webkit-details-marker{display:none}
.smm-step__n{font-size:14px;letter-spacing:0;color:var(--on-dark-30);text-transform:none}
.smm-step__t{flex:1;font-size:26px;font-weight:600;line-height:1.3;letter-spacing:-.04em}
.smm-step__tag{display:none;padding:6px 12px;border-radius:100px;background:#fff;color:var(--ink)}
.smm-step[open] .smm-step__tag{display:block}
.smm-step[open] .smm-step__i{display:none}
.smm-step__body{padding:0 24px 24px 98px;display:grid;gap:16px}
.smm-step__body>p:first-child{font-size:18px;line-height:1.45;letter-spacing:-.02em;color:var(--on-dark-60)}
.smm-step__res{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.smm-step__res .smm-mono{color:var(--on-dark-30)}
.smm-step__res b{font-size:15px;font-weight:600;letter-spacing:0}
@media (max-width:1199px){
  .smm-proc__grid{flex-direction:column}
  .smm-proc__left{width:auto}
  .smm-steps{max-width:none}
}
@media (max-width:809px){
  .smm-proc__grid{margin-top:32px;gap:24px}
  .smm-proc__left{gap:20px}
  .smm-proc__time{margin-top:0;gap:10px}
  .smm-proc__time b{font-size:26px}.smm-proc__time b span{font-size:30px}
  .smm-proc__time span{font-size:12px}
  .smm-step summary{gap:14px;padding:18px}
  .smm-step__t{font-size:22px}
  .smm-step__tag{display:none!important}
  .smm-step[open] .smm-step__i{display:block;transform:rotate(45deg)}
  .smm-step__body{padding:0 18px 18px}
  .smm-step__body>p:first-child{font-size:16px}
  .smm-step__res b{font-size:14px}
}

/* ═════════ 06 · пакеты ═════════ */
.smm-packs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:36px;
  border:1px solid var(--line);border-radius:20px;overflow:hidden}
.smm-pack{display:flex;flex-direction:column;gap:22px;padding:28px 28px 32px;min-width:0}
.smm-pack+.smm-pack{border-left:1px solid var(--line)}
.smm-pack__n{display:flex;justify-content:space-between;align-items:center;height:24px;color:var(--ink-40)}
.smm-pack__badge{padding:6px 10px;border-radius:100px;background:var(--accent);color:#fff;font-size:10px}
.smm-pack__name{font-size:26px;font-weight:600;line-height:1.3;letter-spacing:-.04em}
.smm-pack__price{display:grid;gap:6px}
.smm-pack__price b{font-size:38px;font-weight:400;line-height:1;letter-spacing:-.05em;white-space:nowrap}
.smm-pack__price .smm-mono{font-size:10px;color:var(--ink-60)}
.smm-pack__lead{min-height:60px;font-size:14px;line-height:1.4;letter-spacing:-.02em;color:var(--ink-60)}
.smm-pack ul{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.smm-pack li{position:relative;padding-left:16px;font-size:14px;line-height:1.4;letter-spacing:-.02em}
.smm-pack li::before{content:'';position:absolute;left:0;top:6px;width:6px;height:6px;border-radius:1px;background:var(--ink)}
.smm-pack--hot{background:var(--ink);color:#fff}
.smm-pack--hot .smm-pack__n{color:var(--on-dark-30)}
.smm-pack--hot .smm-pack__price .smm-mono,.smm-pack--hot .smm-pack__lead{color:var(--on-dark-60)}
.smm-pack--hot ul{border-top-color:var(--line-dark)}
.smm-pack--hot li::before{background:var(--accent)}
.smm-budget{display:flex;align-items:center;gap:14px;margin-top:36px;padding:14px 20px;border-radius:16px;
  background:var(--mist);font-size:15px;line-height:1.4;letter-spacing:-.02em}
.smm-budget .smm-corner{font-size:18px}
@media (max-width:1199px){
  .smm-packs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .smm-pack:nth-child(3){border-left:0}
  .smm-pack:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:809px){
  .smm-packs{grid-template-columns:1fr;gap:10px;border:0;border-radius:0;overflow:visible;margin-top:24px}
  .smm-pack{border:1px solid var(--line)!important;border-radius:20px;padding:22px 20px;gap:16px}
  .smm-pack__price b{font-size:34px}
  .smm-pack__lead{min-height:0}
  .smm-budget{align-items:flex-start;font-size:13px;margin-top:20px}
  .smm-budget .smm-corner{margin-top:2px}
}

/* ═════════ 07 · города + лист ожидания ═════════ */
.smm-city__grid{display:flex;justify-content:space-between;gap:48px;margin-top:48px}
.smm-city__left{width:640px;display:grid;gap:28px;align-content:start}
.smm-city__left .smm-h2{max-width:520px}
.smm-city__three{display:flex;align-items:center;gap:24px}
.smm-city__three b{font-size:120px;font-weight:600;line-height:.9;letter-spacing:-.06em}
.smm-city__three .smm-mono{font-size:12px;line-height:1.45}
.smm-form{width:560px;flex:none;display:grid;gap:12px;padding:32px;border-radius:24px;background:#fff;color:var(--ink)}
.smm-form>.smm-mono{color:var(--ink-60)}
.smm-form__title{font-size:26px;font-weight:600;line-height:1.3;letter-spacing:-.04em;margin-bottom:8px}
.smm-field{display:block;position:relative}
.smm-field input,.smm-field select{width:100%;height:54px;padding:0 44px 0 22px;border:1px solid var(--line);border-radius:100px;
  background:var(--mist);font:500 15px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em;color:var(--ink);
  appearance:none;-webkit-appearance:none;outline:none;transition:border-color .2s}
.smm-field input::placeholder{color:var(--ink-40)}
.smm-field select:invalid{color:var(--ink-40)}
.smm-field input:focus,.smm-field select:focus{border-color:var(--ink)}
.smm-field--select::after{content:'';position:absolute;right:18px;top:19px;width:16px;height:16px;
  background:url(i/chevron.svg) center/16px no-repeat;pointer-events:none}
.smm-field.is-bad input,.smm-field.is-bad select{border-color:#e5484d}
.smm-via{display:flex;gap:4px;margin:0;padding:4px;border:1px solid var(--line);border-radius:100px;background:var(--mist);min-width:0}
.smm-via label{flex:1;cursor:pointer}
.smm-via input{position:absolute;opacity:0;pointer-events:none}
.smm-via span{display:block;padding:12px;border-radius:100px;text-align:center;font-size:14px;font-weight:600;
  letter-spacing:0;color:var(--ink-60);transition:background .2s,color .2s}
.smm-via input:checked+span{background:var(--ink);color:#fff}
.smm-via input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.smm-form .smm-btn{margin-top:8px}
.smm-form__note{font-size:13px;line-height:1.4;letter-spacing:-.01em;color:var(--ink-60)}
.smm-form__note.is-bad{color:#e5484d}

.smm-cities{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:48px}
.smm-cityc{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px 8px;padding:22px;border-radius:20px;
  background:var(--line-dark);border:1px solid var(--on-dark-30);color:#fff}
.smm-cityc--on{background:#fff;border-color:#fff;color:var(--ink)}
.smm-cityc--you{border-style:dashed}
.smm-cityc__name{font-size:22px;font-weight:600;letter-spacing:-.03em;white-space:nowrap}
.smm-dots{display:flex;gap:6px}
.smm-dots i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.smm-dots i.on{background:#fff;border-color:#fff}
.smm-cityc--on .smm-dots i{background:var(--accent);border-color:var(--accent)}
.smm-cityc__bar{grid-column:1/-1;display:flex;gap:6px}
.smm-cityc__bar i{flex:1;height:6px;border-radius:3px;background:var(--line-dark)}
.smm-cityc__bar i.on{background:#fff}
.smm-cityc--on .smm-cityc__bar i{background:var(--accent)}
.smm-cityc__sub{font-size:10px;white-space:nowrap}
.smm-cityc__badge{justify-self:end;padding:5px 10px;border-radius:100px;border:1px solid var(--on-dark-60);font-size:9px;white-space:nowrap}
.smm-cityc--on .smm-cityc__badge{background:var(--ink);border-color:var(--ink);color:#fff}
.smm-city__stub{display:flex;align-items:center;gap:8px;margin-top:48px;font-size:10px;color:rgba(255,255,255,.8)}
.smm-city__stub span{padding:3px 8px;border-radius:4px;background:#fff;color:var(--accent)}
@media (max-width:1199px){
  .smm-city__grid{flex-direction:column}
  .smm-city__left,.smm-form{width:auto}
  .smm-cities{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:809px){
  .smm-city__grid{margin-top:28px;gap:24px}
  .smm-city__left{gap:20px}
  .smm-city__three b{font-size:72px}
  .smm-city__three .smm-mono{font-size:9px}
  .smm-form{padding:20px;border-radius:20px;gap:10px}
  .smm-form__title{font-size:19px}
  .smm-field input,.smm-field select{height:50px;font-size:16px}
  .smm-field--select::after{top:17px}
  .smm-cities{grid-template-columns:1fr;gap:8px;margin-top:24px}
  /* строка: название и подпись слева, точки и значок справа */
  .smm-cityc{grid-template-columns:1fr auto auto;grid-template-areas:"name dots badge" "sub dots badge";
    gap:2px 10px;padding:14px 16px;border-radius:14px}
  .smm-cityc__name{grid-area:name;font-size:18px}
  .smm-cityc__sub{grid-area:sub;font-size:8px}
  .smm-dots{grid-area:dots}
  .smm-cityc__badge{grid-area:badge;font-size:8px}
  .smm-cityc__bar{display:none}
  .smm-city__stub{margin-top:20px;font-size:8px}
}

/* ═════════ 08 · вопросы ═════════ */
.smm-faq__grid{display:flex;justify-content:space-between;gap:48px;margin-top:48px}
.smm-faq__left{width:460px;flex:none;display:grid;gap:28px;justify-items:start;align-content:start}
.smm-faq__left .smm-h2 .is-mute{display:block}
.smm-faq__list{flex:1;max-width:884px;display:grid;gap:8px;align-content:start}
.smm-q{background:var(--ink);color:#fff;border-radius:18px}
.smm-q summary{display:flex;align-items:center;gap:24px;padding:22px 24px 22px 28px;cursor:pointer;list-style:none;
  font-size:19px;font-weight:500;line-height:1.35;letter-spacing:-.03em}
.smm-q summary::-webkit-details-marker{display:none}
.smm-q summary img{margin-left:auto;flex:none;transition:transform .3s var(--ease)}
.smm-q[open] summary img{transform:rotate(45deg)}
.smm-q p{padding:0 24px 22px 28px;margin-top:-10px;font-size:15px;line-height:1.45;letter-spacing:-.03em;color:var(--on-dark-60)}
@media (max-width:1199px){.smm-faq__grid{flex-direction:column}.smm-faq__left{width:auto}.smm-faq__list{max-width:none}}
@media (max-width:809px){
  .smm-faq__grid{margin-top:28px;gap:24px}
  .smm-faq__left{gap:20px}
  .smm-q summary{padding:16px 18px;font-size:16px;gap:14px}
  .smm-q p{padding:0 18px 16px;margin-top:-6px;font-size:14px}
}

/* ═════════ 09 · контакты ═════════ */
.smm-cta{padding-bottom:124px}
.smm-cta__title{margin-top:48px;font-size:112px;font-weight:600;line-height:.96;letter-spacing:-.07em}
.smm-cta__title .is-mute{display:block}
.smm-cta__row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:48px}
.smm-cta__left{width:560px;display:grid;gap:24px}
.smm-cta__who{display:flex;align-items:center;gap:14px}
.smm-cta__who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.smm-cta__who div{display:grid;gap:4px}
.smm-cta__who b{font-size:16px;font-weight:600;letter-spacing:0}
.smm-cta__who .smm-mono{font-size:10px;color:var(--on-dark-60)}
.smm-cta__right{display:grid;gap:16px;justify-items:end}
.smm-cta__or{font-size:10px;color:var(--on-dark-30)}
.smm-cta__tel{font-size:40px;font-weight:600;letter-spacing:-.05em;white-space:nowrap}
.smm-cta__tel:hover{color:var(--accent-soft)}
@media (max-width:1199px){.smm-cta__title{font-size:80px}}
@media (max-width:809px){
  .smm-cta{padding-bottom:56px}
  .smm-cta__title{margin-top:28px;font-size:40px}
  .smm-cta__title .is-mute{display:inline}
  .smm-cta__row{flex-direction:column;align-items:stretch;gap:24px;margin-top:24px}
  .smm-cta__left{width:auto}
  .smm-cta__right{justify-items:start}
  .smm-cta__right .smm-btn{width:100%}
  .smm-cta__tel{font-size:30px}
}

/* ── кнопки: слайдер и заливка при нажатии (28.09) ──
   Наведение: чип «едет» вправо, стрелка пробегает внутри чипа.
   Нажатие: цвет чипа разливается на всю кнопку, подпись перекрашивается. */
.smm-btn{position:relative;overflow:hidden;isolation:isolate;--fill:#fff;--go:var(--ink)}
.smm-btn--light,.smm-btn--white{--fill:var(--ink);--go:#fff}
.smm-btn--accent{--go:var(--accent)}
.smm-btn::before{content:'';position:absolute;z-index:-1;left:5px;top:5px;bottom:5px;width:44px;
  border-radius:11px;background:var(--fill);transition:width .5s cubic-bezier(.7,0,.2,1),border-radius .5s}
.smm-btn__chip{position:relative;overflow:hidden;transition:transform .45s cubic-bezier(.7,0,.2,1)}
.smm-btn__chip img{transition:transform .45s cubic-bezier(.7,0,.2,1)}
.smm-btn:hover .smm-btn__chip,.smm-btn:focus-visible .smm-btn__chip{transform:translateX(6px)}
.smm-btn:hover .smm-btn__chip img{animation:smm-slide .6s cubic-bezier(.7,0,.2,1)}
@keyframes smm-slide{0%{transform:translateX(0)}45%{transform:translateX(28px)}46%{transform:translateX(-28px)}100%{transform:translateX(0)}}
.smm-btn{transition:color .35s .1s,transform .3s var(--ease-hover),background .3s}
.smm-btn.is-go{color:var(--go)}
.smm-btn.is-go::before{width:calc(100% - 10px);border-radius:11px}
.smm-btn.is-go .smm-btn__chip{transform:translateX(0)}
.smm-btn.is-go .smm-btn__chip img{animation:smm-slide .5s cubic-bezier(.7,0,.2,1)}
.smm-btn:active{transform:scale(.985)}
@media (prefers-reduced-motion:reduce){
  .smm-btn::before,.smm-btn__chip,.smm-btn__chip img{transition:none;animation:none!important}
}

/* ── свайп по кнопке (28.09): чип тянется пальцем вправо, заливка идёт следом;
   дотянул дальше 55% — срабатывает, отпустил раньше — возвращается ── */
.smm-btn{touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.smm-btn img{-webkit-user-drag:none;pointer-events:none}
.smm-btn.is-drag::before,.smm-btn.is-drag .smm-btn__chip{transition:none}
.smm-btn.is-drag::before{width:calc(44px + var(--dx,0px))}
.smm-btn.is-drag .smm-btn__chip{transform:translateX(var(--dx,0px))}

/* ── бенто: цвет бренда (28.09, «тут цвета не хватает») ──
   Главная цифра — синим листом; «после старта» у Hyde — синий столбик; цифры карточек — синие. */
.smm-bento__romi{background:var(--accent)}
.smm-bento__romi .smm-mono,.smm-bento__romi .smm-bento__txt{color:rgba(255,255,255,.78)}
.smm-bars i{background:#d7d7da}
.smm-bars>div+div i{background:var(--accent)}
.smm-bento__dash .smm-bento__num{color:var(--accent)}
.smm-bento__dash{border-color:rgba(27,109,245,.45)}

/* ── стык с блоком связи: у стандартного блока отступ сверху 170px белым — после серого
   холста это выглядело как разрыв. Здесь блок встаёт вплотную к холсту. ── */
/* Отступ блока связи (170px, в нём он «подтягивается» при прокрутке) переносим внутрь
   холста: стык серый, и тёмный блок не наезжает на последний лист. */
.page-smm .smm{padding-bottom:170px}
.page-smm .cta-section{margin-top:0}

/* ── хиро на телефоне (28.09, «хиро странный»): одна главная кнопка, пакеты — ссылкой;
   без наложенной сторис; клиенты — столбиком с уголком, без висящих знаков в конце строк ── */
@media (max-width:809px){
  .smm-hero .smm-phone{display:none}
  .smm-hero__photo{height:470px}
  .smm-hero__names{display:grid;gap:2px;font-size:30px}
  .smm-hero__names .smm-corner{display:none}
  .smm-hero__names span:not(.smm-corner){display:flex;align-items:center;gap:10px}
  .smm-hero__names span:not(.smm-corner)::before{content:'';flex:none;width:11px;height:11px;margin-top:-6px;
    border-top:2.5px solid var(--accent);border-left:2.5px solid var(--accent)}
}

/* ── хиро: «SMM, который» чернеет по словам при прокрутке (28.09) ── */
.smm-hero__title .is-mute .w{color:var(--ink-40);transition:color .35s var(--ease)}
.smm-hero__title .is-mute .w.is-lit{color:var(--ink)}
.smm-hero__title .is-mute.is-split{color:inherit}

/* ── кнопки: подпись перекрашивается ровно по кромке заливки (28.09) ──
   Раньше цвет текста менялся целиком, и под заливкой белый текст пропадал на белом.
   Теперь поверх лежит копия подписи в цвете «после нажатия», обрезанная по краю заливки;
   край заливки и обрезка считаются от одного --p (0…1). */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
.smm-btn{--p:0;transition:--p .5s cubic-bezier(.7,0,.2,1),transform .3s var(--ease-hover),background .3s}
.smm-btn.is-go{--p:1;color:inherit}
.smm-btn::before,.smm-btn.is-go::before,.smm-btn.is-drag::before{width:calc(44px + (100% - 54px) * var(--p));transition:none}
.smm-btn.is-drag{transition:transform .3s var(--ease-hover),background .3s}
.smm-btn__go{position:absolute;inset:0;display:flex;align-items:center;gap:inherit;padding:inherit;
  color:var(--go);pointer-events:none;white-space:nowrap;
  clip-path:inset(0 calc(100% - 49px - (100% - 54px) * var(--p)) 0 0)}
.smm-btn__go i{flex:none;width:44px;height:44px}

/* ── карусель кейсов на телефоне: центральная карточка «раскрывается», соседние — меньше
   и приглушены; значение --k (0…1) ставит скрипт по расстоянию до центра (28.09) ── */
@media (max-width:809px){
  .smm-case{scroll-snap-align:center;--k:1;transform:scale(calc(.88 + .12 * var(--k)));
    opacity:calc(.55 + .45 * var(--k));transform-origin:50% 50%;will-change:transform}
  .smm-case__photo{border-radius:calc(22px - 8px * var(--k))}
  .smm-cards{scroll-padding-inline:0;padding-inline:10%}
}
@media (prefers-reduced-motion:reduce){.smm-case{transform:none!important;opacity:1!important}}

/* ── телефон (28.09): кнопки хиро — в один ряд; любая одиночная кнопка — во всю ширину;
   карусель — центральная карточка крупнее и раскрывается из центра по ширине и высоте ── */
@media (max-width:809px){
  .smm-hero__btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .smm-hero__btns .smm-btn{width:auto;min-width:0;padding:4px 10px 4px 4px;gap:10px;font-size:14px;
    line-height:1.15;white-space:normal;text-align:left;border-radius:14px}
  .smm-hero__btns .smm-btn__chip,.smm-hero__btns .smm-btn__go i{width:40px;height:40px;border-radius:10px}
  .smm-hero__btns .smm-btn::before{left:4px;top:4px;bottom:4px;width:calc(40px + (100% - 48px) * var(--p));border-radius:10px}
  .smm-hero__btns .smm-btn__go{white-space:normal;clip-path:inset(0 calc(100% - 44px - (100% - 48px) * var(--p)) 0 0)}
  .smm-btn{width:100%;box-sizing:border-box}
  .smm-hero__btns .smm-btn{width:auto}
  .smm-cards{padding-inline:6%;gap:6px}
  .smm-case{flex:0 0 88%;transform:scale(calc(.84 + .16 * var(--k)),calc(.8 + .2 * var(--k)))}
  .smm-case__photo{aspect-ratio:222/300}
}

/* ── «Что входит» — на сером холсте, без белого листа; плашки белые и появляются
   каждая сама по себе, как 4 сторис на главной (anim.js: fade-40 + nudge) (28.09) ── */
.smm-incl{background:transparent;padding-block:72px 64px}
@media (max-width:809px){.smm-incl{padding-block:48px 40px}}

/* ── «2 недели» и «2–3 месяца» целиком Bebas Neue Bold (28.09) ── */
.smm-proc__time b,.smm-proc__time b span{font:700 44px/.95 'Bebas Neue',sans-serif;letter-spacing:.01em;text-transform:uppercase}
@media (max-width:809px){.smm-proc__time b,.smm-proc__time b span{font-size:36px}}

/* ── «02 / Кейсы» на десктопе: карточки одной высоты, заголовок на две строки,
   цифры прижаты к низу — разделительные линии на одной высоте (28.09) ── */
@media (min-width:810px){
  .smm-cards{align-items:stretch}
  .smm-case__title{min-height:calc(2 * 1.22em)}
  .smm-case__nums{margin-top:auto;padding-top:12px}
  .smm-case__nums span{min-height:calc(2 * 1.3em)}
}

/* ── компьютер (28.09): меню ниже от края листа, отступ до «Услуги / SMM» втрое меньше ── */
@media (min-width:810px){
  .page-smm .topbar{padding-top:44px}
  .smm-hero{padding-top:124px}
}

/* ── цитата Hyde — карточка с фото в стиле сторис главной (.story--photo) (28.09) ── */
.smm-bento .smm-bento__quote.story{background:#0c0c0c;border:0;color:#fff;padding:24px;aspect-ratio:auto;min-height:0;justify-content:flex-end}
.smm-bento__quote .story__text{font-size:19px}
.smm-bento__quote .story__foot{padding-top:16px}
.smm-bento__quote .story__bgimg,.smm-bento__quote .story__frameimg{object-position:center 30%}
@media (max-width:809px){.smm-bento .smm-bento__quote.story{min-height:460px;padding:20px}.smm-bento__quote .story__text{font-size:18px}}
/* цитата Hyde — шрифт мельче (28.09) */
.smm-bento__quote .story__text{font-size:16px;line-height:1.35}
.smm-bento__quote .story__name{font-size:14px}
.smm-bento__quote .story__role{font-size:12px}
@media (max-width:809px){.smm-bento__quote .story__text{font-size:15px}}
/* цитата Hyde — внутренний кадр дальше от краёв карточки (было 20px, как на главной) */
.smm-bento__quote .story__frame{inset:32px}
@media (max-width:809px){.smm-bento__quote .story__frame{inset:28px}}
/* сроки: заголовок сверху, мелкий текст прижат к низу — в обеих карточках на одной линии */
.smm-proc__time{align-items:stretch}
.smm-proc__time>div{display:flex;flex-direction:column;justify-content:space-between;gap:16px}
/* бенто: карточка цитаты Hyde шире на 40% (300 → 420) — только широкий экран, где 4 колонки */
@media (min-width:1200px){.smm-bento{grid-template-columns:359fr 264fr 264fr 420fr}}
/* цитата Hyde: текст лежит ВНУТРИ цветного кадра, с отступом 10% ширины кадра от его краёв.
   Кадр = карточка минус inset с каждой стороны; % у absolute-блока считается от карточки,
   поэтому 10% кадра = 10% карточки − 0,1 × 2 × inset. */
.smm-bento__quote .story__body{position:absolute;inset:32px;z-index:1;width:auto;
  display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:calc(10% - 6.4px)}
@media (max-width:809px){.smm-bento__quote .story__body{inset:28px;padding:calc(10% - 5.6px)}}
/* ── города на компьютере (28.09, «поплыло»): в карточке 1/5 ширины подпись и бейдж
   не помещались в одну строку — сетка распиралась, полосы и бейдж вылезали за край.
   Теперь: имя и точки сверху, полоса, ниже подпись и бейдж — столбиком. ── */
@media (min-width:810px){
  .smm-cityc{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name dots" "bar bar" "sub sub" "badge badge";
    gap:14px 10px;min-width:0;overflow:hidden}
  .smm-cityc__name{grid-area:name;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .smm-cityc .smm-dots{grid-area:dots}
  .smm-cityc__bar{grid-area:bar;min-width:0}
  .smm-cityc__sub{grid-area:sub;margin-top:4px}
  .smm-cityc__badge{grid-area:badge;justify-self:start}
}
/* 894% — по ширине карточки (28.09): раньше фиксированные 128px вылезали за край узкой
   колонки, а на телефоне 56px занимали меньше половины. Теперь цифра = ширина карточки. */
.smm-bento__romi{container-type:inline-size}
.smm-bento__romi .smm-bento__big{font-size:min(40cqi,180px);white-space:nowrap}
/* ── релиз 28.09 ── */
/* цифры бенто в одну строку: кегль по ширине карточки, как у 894% (container query).
   Две строки «109 000+» в узкой колонке 1200–1300 px читались как два числа. */
.smm-bento__dash,.smm-bento__hyde{container-type:inline-size}
/* у колонки двух карточек justify-content:space-between (общий .smm-bento>*) — её
   единственный auto-трек не растягивается и ширину берёт из содержимого; с container-type
   содержимое ширины не даёт, карточки схлопывались. Трек — явно во всю колонку. */
@media (min-width:810px){.smm-bento__col{grid-template-columns:minmax(0,1fr)}}
.smm-bento__dash .smm-bento__num,.smm-bento__hyde .smm-bento__num{white-space:nowrap}
.smm-bento__dash .smm-bento__num{font-size:min(var(--fit),60px)}
.smm-bento__hyde .smm-bento__num{font-size:min(var(--fit),64px)}
/* обе карточки колонки — одним кеглем, по самой длинной цифре («109 000+» = 23cqi):
   стоят рядом (телефон) или одна над другой, и разный кегль читался бы как разный вес */
.smm-bento__dash .smm-bento__num{--fit:23cqi}
.smm-bento__hyde .smm-bento__num{--fit:30cqi}
@media (max-width:809px){.smm-bento__hyde .smm-bento__num{font-size:min(var(--fit),44px)}}
/* цены пакетов — Bebas Neue Bold, как крупные цифры сайта. Знака ₸ в Bebas нет
   (и в урезанном Inter тоже) — он набирается системным гротеском, см. .smm-tg */
.smm-pack__price b{font-family:'Bebas Neue',Inter,system-ui,sans-serif;font-weight:700;
  font-size:44px;line-height:.9;letter-spacing:0}
.smm-tg{font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;font-weight:600;font-size:.78em;
  margin-left:.06em}
@media (max-width:809px){.smm-pack__price b{font-size:40px}}
/* строка «Обновлено» — под подзаголовком FAQ, ближе к нему, чем шаг сетки */
.smm-upd{margin-top:-14px;font-size:13px}
.smm-pack__price .smm-pre{font-family:Inter,system-ui,sans-serif;font-weight:500;font-size:.42em;letter-spacing:-.02em;margin-right:.1em}
/* ── лист ожидания с бэкендом (28.09): поле-ловушка для ботов и ответ на месте формы ── */
.smm-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.smm-form.is-done>:not(.smm-form__done){display:none}
.smm-form__done{display:grid;gap:12px;align-content:center;min-height:100%;animation:smmDone .5s cubic-bezier(.2,.8,.2,1)}
.smm-form__done .smm-mono{color:var(--ink-60)}
.smm-form__note a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@keyframes smmDone{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.smm-form__done{animation:none}}