@import url("./tokens.css");
@import url("../fonts/fonts.css");

/* ═══ БАЗА ═══════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + var(--s-3))}
body{margin:0;background:var(--paper);color:var(--text-2);
  font:400 var(--t-body)/1.62 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}
svg{max-width:100%;flex:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

h1,h2,h3,h4{color:var(--text);margin:0;text-wrap:balance}
h1,h2{font-family:var(--f-display);font-weight:600;text-transform:uppercase;line-height:1.06;letter-spacing:.004em}
h1{font-size:var(--t-h1)}
h2{font-size:var(--t-h2)}
h3{font:800 var(--t-h3)/1.24 var(--f-text);letter-spacing:-.012em}
p{margin:0}
strong{color:var(--text);font-weight:700}
mark{background:var(--accent);color:var(--on-accent);padding:.04em .14em;margin-inline:-.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec);position:relative}
.section--alt{background:var(--paper-2);border-block:1px solid var(--hairline)}
.lead{font-size:var(--t-lead);color:var(--text-2);max-width:60ch}
.muted{color:var(--text-3)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Заголовок секции: только h2 + при необходимости лид. Эйбрау — редкость. */
.sec-head{margin-bottom:var(--s-7);max-width:64ch}
.sec-head p{margin-top:var(--s-4)}
.eyebrow{display:flex;align-items:flex-start;gap:var(--s-3);
  font:600 var(--t-micro)/1.6 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-4)}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);flex:none;margin-top:.62em}

/* Зерно поверх страницы: фиксированный слой, репейнта при скролле нет */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
[data-theme="light"] .grain{opacity:.02}

/* ═══ КОМПОНЕНТЫ ═════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:52px;padding:var(--s-4) var(--s-6);border-radius:var(--r-pill);
  font:700 15px/1 var(--f-text);border:1px solid transparent;white-space:nowrap;
  transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
             box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.btn--primary:hover{background:var(--accent-hover)}
.btn--ghost{border-color:var(--border);color:var(--text);background:var(--surface)}
.btn--ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn--wide{width:100%}
.btn svg{width:18px;height:18px;flex:none}

.icon-btn{width:42px;height:42px;border-radius:var(--r-field);border:1px solid var(--border);
  display:grid;place-items:center;background:var(--surface);color:var(--text);
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:19px;height:19px}
.theme-btn .sun{display:none}
[data-theme="light"] .theme-btn .sun{display:block}
[data-theme="light"] .theme-btn .moon{display:none}

.tag{display:inline-flex;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-pill);
  font:500 var(--t-micro)/1 var(--f-mono);color:var(--text-3);white-space:nowrap}
.tag--accent{background:var(--accent-wash);border-color:transparent;color:var(--accent)}

.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-surface)}

/* ═══ ШАПКА ══════════════════════════════════════════════════════ */
.hd{position:sticky;top:0;z-index:60;height:var(--hd);
  background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--hairline)}
.hd__in{height:var(--hd);display:flex;align-items:center;gap:var(--s-4)}
.hd__logo{display:flex;align-items:center;margin-right:auto}
.hd__logo svg{height:19px;width:auto;color:var(--text)}
.hd__nav{display:none}
.hd__cta{display:none}
.hd__act{display:flex;align-items:center;gap:var(--s-2)}

.menu{position:fixed;inset:var(--hd) 0 0;z-index:55;background:var(--paper);
  padding:var(--s-6) var(--gut) var(--s-8);display:flex;flex-direction:column;
  transform:translateY(-8px);opacity:0;pointer-events:none;transition:var(--dur-2);overflow-y:auto}
.menu[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
.menu a{font:600 clamp(1.5rem,7vw,2rem)/1.4 var(--f-display);text-transform:uppercase;color:var(--text);
  padding:var(--s-3) 0;border-bottom:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:baseline}
.menu a .num{font-size:12px;color:var(--text-3)}
.menu .btn{margin-top:var(--s-6)}

/* ═══ ГЕРОЙ ══════════════════════════════════════════════════════ */
.hero{position:relative;padding-top:var(--s-7);padding-bottom:var(--s-8);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -20% auto -20%;height:760px;pointer-events:none;
  background:radial-gradient(56% 44% at 72% 20%,var(--glow),transparent 66%),
             radial-gradient(44% 38% at 6% 4%,var(--glow),transparent 70%)}
.hero__in{position:relative}
.hero h1{font-size:var(--t-display);line-height:1.26;margin:var(--s-4) 0 0}
.hero h1 .thin{display:block;font-weight:500;color:var(--text-3)}
.hero__lead{margin-top:var(--s-5);font-size:var(--t-lead);color:var(--text-2);max-width:32ch}
.hero__cta{display:flex;flex-direction:column;gap:var(--s-3);margin-top:var(--s-6)}
.hero__shots{margin-top:var(--s-7);display:grid;gap:var(--s-4)}

/* Метрики: числа моноширинные, без карточек, разделены линиями */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5) var(--s-4);
  margin-top:var(--s-7);padding-top:var(--s-6);border-top:1px solid var(--hairline)}
.fact b{display:block;font:600 clamp(1.7rem,6vw,2.4rem)/1 var(--f-display);color:var(--text);
  font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:var(--s-2);font-size:13.5px;line-height:1.4;color:var(--text-3)}

/* ═══ МОКАПЫ ═════════════════════════════════════════════════════ */
.device{border:1px solid var(--border);border-radius:var(--r-media);overflow:hidden;
  background:var(--surface);box-shadow:var(--shadow-2)}
.device__bar{display:flex;align-items:center;gap:7px;padding:11px var(--s-4);
  background:var(--surface-raised);border-bottom:1px solid var(--border)}
.device__dots{display:flex;gap:6px}
.device__dots i{width:9px;height:9px;border-radius:50%;background:var(--border);display:block}
.device__url{flex:1;text-align:center;font:500 11px/1 var(--f-mono);color:var(--text-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device img{width:100%;height:auto}
.device--phone{border-radius:26px;max-width:224px;margin-inline:auto}
.device--phone .device__bar{display:none}
.device--phone img{aspect-ratio:9/19.5;object-fit:cover;object-position:top center}

/* ═══ УСЛУГИ · редакционный список, а не сетка близнецов ═════════ */
.svc-list{border-top:1px solid var(--border)}
.svc{border-bottom:1px solid var(--border);position:relative}
.svc>summary{list-style:none;cursor:pointer;padding:var(--s-6) 0;display:grid;
  grid-template-columns:auto 1fr auto;gap:var(--s-3) var(--s-4);align-items:baseline;
  transition:color var(--dur-1) var(--ease)}
.svc>summary::-webkit-details-marker{display:none}
.svc__idx{font:500 13px/1 var(--f-mono);color:var(--text-3);padding-top:.4em}
.svc__name{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.5rem,5.2vw,2.5rem);line-height:1.1;color:var(--text);
  transition:color var(--dur-1) var(--ease)}
.svc:hover .svc__name,.svc[open] .svc__name{color:var(--accent)}
.svc__from{grid-column:2/-1;font:500 14px/1 var(--f-mono);color:var(--text-3);white-space:nowrap}
.svc__from b{color:var(--text);font-weight:600}
.svc__toggle{grid-column:3;grid-row:1;width:34px;height:34px;border-radius:var(--r-pill);
  border:1px solid var(--border);display:grid;place-items:center;color:var(--text-3);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-1) var(--ease)}
.svc[open] .svc__toggle{transform:rotate(45deg);border-color:var(--accent);color:var(--accent)}
.svc__body{padding-bottom:var(--s-7);display:grid;gap:var(--s-6)}
.svc__body p{max-width:58ch}
.svc__what{display:grid;gap:var(--s-3);list-style:none;padding:0;margin:0}
.svc__what li{position:relative;padding-left:var(--s-5);font-size:var(--t-small);color:var(--text-2)}
.svc__what li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:1px;background:var(--accent)}
.svc__meta{display:flex;flex-wrap:wrap;gap:var(--s-2)}

/* ═══ ПРАЙС · конфигуратор ══════════════════════════════════════ */
.calc{display:grid;gap:var(--s-6)}
.calc__controls{display:grid;gap:var(--s-6)}
.ctrl__title{font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-4)}
.seg{display:grid;gap:var(--s-2)}
.seg label{position:relative;display:flex;align-items:center;gap:var(--s-3);padding:var(--s-4) var(--s-5);
  border:1px solid var(--border);border-radius:var(--r-field);cursor:pointer;background:var(--surface);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.seg label:hover{border-color:var(--accent)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg .dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);flex:none;
  display:grid;place-items:center;transition:border-color var(--dur-1) var(--ease)}
.seg .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform var(--dur-1) var(--ease)}
.seg .box{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--border);flex:none;
  display:grid;place-items:center;color:var(--on-accent);transition:var(--dur-1) var(--ease)}
.seg .box svg{width:12px;height:12px;opacity:0;transition:opacity var(--dur-1) var(--ease)}
.seg input:checked ~ .dot{border-color:var(--accent)}
.seg input:checked ~ .dot::after{transform:scale(1)}
.seg input:checked ~ .box{background:var(--accent);border-color:var(--accent)}
.seg input:checked ~ .box svg{opacity:1}
.seg input:focus-visible ~ .dot,.seg input:focus-visible ~ .box{outline:2px solid var(--accent);outline-offset:3px}
.seg label:has(input:checked){border-color:var(--accent);background:var(--accent-wash)}
.seg .txt{flex:1}
.seg .txt b{display:block;font-weight:700;color:var(--text);font-size:15px}
.seg .txt span{display:block;font-size:13px;color:var(--text-3);margin-top:2px}
.seg .price{font:500 13px/1 var(--f-mono);color:var(--text-3);white-space:nowrap}

.calc__out{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-surface);
  padding:var(--s-6);position:relative;overflow:hidden}
.calc__out::before{content:"";position:absolute;width:340px;height:340px;right:-140px;top:-160px;
  background:radial-gradient(circle,var(--glow),transparent 70%);pointer-events:none}
.calc__label{position:relative;font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-3)}
.calc__sum{position:relative;margin-top:var(--s-4);font-family:var(--f-display);font-weight:600;
  font-size:clamp(2.1rem,8vw,3.4rem);line-height:1;color:var(--text);font-variant-numeric:tabular-nums;
  display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap}
.calc__sum .dash{color:var(--accent)}
/* Шкала диапазона: подсвечен отрезок «от и до», а не заполненный прогресс */
.calc__axis{position:relative;margin-top:var(--s-6);height:3px;border-radius:3px;
  --a:0%;--b:100%;
  background:linear-gradient(90deg,var(--border) 0 var(--a),var(--accent) var(--a) var(--b),var(--border) var(--b) 100%);
  transition:--a var(--dur-3) var(--ease-out),--b var(--dur-3) var(--ease-out)}
.calc__axis span{position:absolute;top:-4px;width:11px;height:11px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface);margin-left:-5px;
  transition:left var(--dur-3) var(--ease-out)}
.calc__axis-tags{position:relative;display:flex;justify-content:space-between;gap:var(--s-4);
  margin-top:var(--s-3);font:500 11.5px/1.4 var(--f-mono);color:var(--text-3)}
.calc__axis-cap{position:relative;margin-top:var(--s-2);font-size:12.5px;color:var(--text-3)}
.calc__inc{position:relative;margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--hairline);
  display:grid;gap:var(--s-3);list-style:none;padding-left:0}
.calc__inc li{display:flex;gap:var(--s-3);font-size:var(--t-small);color:var(--text-2)}
.calc__inc svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:.2em}
.calc__note{position:relative;margin-top:var(--s-5);font-size:13px;color:var(--text-3)}
.calc__cta{position:relative;margin-top:var(--s-5)}

/* На телефоне сумма едет вместе с выбором: иначе результат остаётся под экраном */
@media (max-width:699px){
  .calc{display:flex;flex-direction:column}
  .calc__out{order:-1;position:sticky;top:var(--hd);z-index:5;padding:var(--s-4) var(--s-5) var(--s-5);
    box-shadow:var(--shadow-2)}
  .calc__sum{font-size:clamp(1.8rem,7.6vw,2.4rem);margin-top:var(--s-3)}
  .calc__axis{margin-top:var(--s-4)}
  .calc__inc,.calc__note,.calc__axis-cap{display:none}
  .calc__cta{margin-top:var(--s-4)}
  .calc__cta .btn{min-height:46px}
}

/* Условия работы: три колонки без карточек */
.terms{display:grid;gap:var(--s-6);margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--border)}
.term b{display:block;font:600 clamp(1.5rem,5vw,2rem)/1 var(--f-display);color:var(--accent);
  font-variant-numeric:tabular-nums}
.term h3{margin:var(--s-3) 0 var(--s-2)}
.term p{font-size:var(--t-small);color:var(--text-2);max-width:34ch}

/* ═══ КЕЙСЫ · бенто с ритмом ════════════════════════════════════ */
.filters{display:flex;gap:var(--s-2);overflow-x:auto;padding-bottom:6px;margin-bottom:var(--s-6);
  scrollbar-width:none;-ms-overflow-style:none}
.filters::-webkit-scrollbar{display:none}
.chip{flex:none;padding:10px var(--s-4);border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--surface);font:600 12.5px/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-3);transition:var(--dur-1) var(--ease);white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.cases{display:grid;gap:var(--s-4)}
.case{display:grid;border:1px solid var(--border);border-radius:var(--r-media);overflow:hidden;
  background:var(--surface);transition:border-color var(--dur-2) var(--ease),
  transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.case:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-2)}
.case__shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--surface-raised);
  border-bottom:1px solid var(--border)}
.case__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .7s var(--ease)}
.case:hover .case__shot img{transform:scale(1.035)}
.case__badge{position:absolute;top:var(--s-3);left:var(--s-3);padding:7px 12px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(8px);
  font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.case__badge--wip{background:var(--accent);color:var(--on-accent)}
.case__body{padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3);flex:1}
.case__meta{font:500 var(--t-micro)/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.case__sub{font-size:var(--t-small);color:var(--text-3);margin-top:-6px}
.case__teaser{font-size:15px;color:var(--text-2)}
.case__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:var(--s-3)}
.case__more{display:inline-flex;align-items:center;gap:9px;font:700 14px/1 var(--f-text);color:var(--accent)}
.case__more svg{width:15px;height:15px;transition:transform var(--dur-1) var(--ease)}
.case:hover .case__more svg{transform:translateX(4px)}

/* ═══ ПРОЦЕСС · шкала, а не пять карточек ═══════════════════════ */
.flow{display:grid;gap:0;position:relative}
.flow__step{display:grid;grid-template-columns:auto 1fr;gap:var(--s-5);
  padding-bottom:var(--s-6);position:relative}
.flow__step:last-child{padding-bottom:0}
.flow__mark{width:44px;display:grid;justify-items:center;gap:var(--s-2)}
.flow__dot{width:12px;height:12px;border-radius:50%;background:var(--accent);margin-top:6px;flex:none}
.flow__line{width:1px;flex:1;background:var(--border);min-height:100%}
.flow__step:last-child .flow__line{display:none}
.flow__n{font:500 12px/1 var(--f-mono);color:var(--text-3)}
.flow__body h3{margin-bottom:var(--s-2)}
.flow__body p{font-size:var(--t-small);max-width:42ch}

/* ═══ ПЛЕЕР СТОРИС ══════════════════════════════════════════════ */
.player{position:fixed;inset:0;z-index:100;background:#000;display:none;align-items:center;justify-content:center}
.player[data-open="true"]{display:flex}
.player__stage{position:relative;width:100%;height:100%;max-width:520px;background:#08090C;
  display:flex;flex-direction:column;overflow:hidden}
.player__bars{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;gap:5px;padding:12px 14px}
.player__bar{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden}
.player__bar i{display:block;height:100%;width:0;background:#fff}
.player__bar[data-state="done"] i{width:100%}
.player__bar[data-state="active"] i{animation:fill var(--dur,7s) linear forwards}
@keyframes fill{to{width:100%}}
.player__top{position:absolute;top:26px;left:14px;right:14px;z-index:3;display:flex;align-items:center;gap:12px;color:#fff}
.player__who{font:700 14px/1.25 var(--f-text)}
.player__role{font:500 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;opacity:.7;margin-top:4px}
.player__close{margin-left:auto;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.player__close svg{width:17px;height:17px}
.player__media{flex:1;display:grid;place-items:center;background:#0B0F1A}
.player__media video{width:100%;height:100%;object-fit:cover}
.player__stub{text-align:center;padding:40px 28px;color:#fff}
.player__stub b{display:block;font:600 clamp(1.5rem,7vw,2.2rem)/1.1 var(--f-display);text-transform:uppercase}
.player__stub p{margin-top:14px;font-size:14.5px;color:rgba(255,255,255,.62);max-width:32ch;margin-inline:auto}
.player__stub .mark{display:inline-block;margin-top:20px;padding:8px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.1);font:500 11px/1 var(--f-mono);letter-spacing:.12em}
.player__nav{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:32% 1fr 32%}
.player__nav button{height:100%}

/* ═══ ВОПРОСЫ · линии вместо карточек ═══════════════════════════ */
.faq{border-top:1px solid var(--border)}
.q{border-bottom:1px solid var(--border)}
.q summary{list-style:none;cursor:pointer;padding:var(--s-5) 0;display:flex;gap:var(--s-4);
  align-items:flex-start;font:700 16px/1.45 var(--f-text);color:var(--text)}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:"+";margin-left:auto;font:400 24px/1 var(--f-display);color:var(--accent);
  flex:none;transition:transform var(--dur-2) var(--ease)}
.q[open] summary::after{transform:rotate(45deg)}
.q__a{padding:0 0 var(--s-5);font-size:15px;color:var(--text-2);max-width:64ch}

/* ═══ КОНТАКТЫ ══════════════════════════════════════════════════ */
.contact{display:grid;gap:var(--s-7)}
.form{display:grid;gap:var(--s-4)}
.field{display:grid;gap:var(--s-2)}
.field label{font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.field input,.field textarea,.field select{width:100%;padding:15px var(--s-4);
  border:1px solid var(--border);border-radius:var(--r-field);background:var(--surface);color:var(--text);
  font:400 16px/1.4 var(--f-text);transition:border-color var(--dur-1) var(--ease);-webkit-appearance:none;appearance:none}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),
  linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 15px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field textarea{min-height:118px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.form__note{font-size:12.5px;color:var(--text-3)}
.form__note a{color:var(--text-2);text-decoration:underline}
.form__ok{display:none;padding:var(--s-4);border-radius:var(--r-field);
  background:color-mix(in srgb,var(--signal) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--signal) 40%,transparent);color:var(--text);font-size:var(--t-small)}

.direct{display:grid;gap:0;border-top:1px solid var(--border)}
.ct{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) 0;border-bottom:1px solid var(--border);
  transition:padding-left var(--dur-2) var(--ease)}
a.ct:hover{padding-left:var(--s-3)}
.ct__ico{width:40px;height:40px;border-radius:var(--r-field);background:var(--accent-wash);
  display:grid;place-items:center;color:var(--accent);flex:none}
.ct__ico svg{width:19px;height:19px}
.ct b{display:block;font:700 16px/1.3 var(--f-text);color:var(--text)}
.ct span{font-size:13px;color:var(--text-3)}

/* ═══ CTA + ПОДВАЛ ══════════════════════════════════════════════ */
.cta{border-radius:var(--r-media);padding:clamp(32px,6vw,72px) clamp(22px,5vw,60px);
  background:linear-gradient(140deg,var(--surface-raised),var(--surface));
  border:1px solid var(--border);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;
  background:radial-gradient(circle,var(--glow),transparent 70%)}
.cta__in{position:relative}
.cta h2{margin-bottom:var(--s-4)}
.cta .btn{margin-top:var(--s-6)}

.ft{border-top:1px solid var(--hairline);background:var(--paper-2);padding-block:var(--s-7) 110px}
.ft__grid{display:grid;gap:var(--s-6)}
.ft__logo svg{height:22px;width:auto;color:var(--text)}
.ft__col h4{font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-3);margin-bottom:var(--s-4)}
.ft__col a{display:block;padding:6px 0;font-size:15px;color:var(--text-2)}
.ft__col a:hover{color:var(--accent)}
.ft__legal{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--hairline);
  font:500 12px/1.7 var(--f-mono);color:var(--text-3)}

.bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--border)}
.bar .btn{padding:13px 14px;min-height:48px;font-size:14.5px}

/* ═══ ПОЯВЛЕНИЕ ═════════════════════════════════════════════════ */
.js .reveal{opacity:0;transform:translateY(20px)}
.js .reveal.in{opacity:1;transform:none;
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.in{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important;animation:none!important}
}

/* ═══ СТРАНИЦА КЕЙСА ════════════════════════════════════════════ */
.chero{padding-top:var(--s-6);padding-bottom:var(--s-6);position:relative;overflow:hidden}
.chero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("../img/brand/pattern.svg");background-size:88px 88px}
.back{display:inline-flex;align-items:center;gap:9px;font:600 12px/1 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:var(--s-6);position:relative}
.back:hover{color:var(--accent)}
.back svg{width:14px;height:14px}
.chero h1{position:relative;font-size:var(--t-h1);margin:var(--s-3) 0 0}
.chero .lead{position:relative}
.cfacts{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5);
  margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--border)}
.cfact span{display:block;font:500 10.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.cfact b{display:block;margin-top:var(--s-2);font:700 15px/1.35 var(--f-text);color:var(--text)}
.prose{display:grid;gap:var(--s-5);max-width:68ch}
.prose p{font-size:16.5px;color:var(--text-2)}
.works{display:grid;gap:0;border-top:1px solid var(--border)}
.work{padding:var(--s-6) 0;border-bottom:1px solid var(--border);display:grid;gap:var(--s-3)}
.work h3{color:var(--text)}
.work p{font-size:15.5px;max-width:60ch}
.results{display:grid;gap:var(--s-4);list-style:none;padding:0;margin:0}
.results li{display:flex;gap:var(--s-4);align-items:flex-start;font-size:16px;color:var(--text-2);
  padding-bottom:var(--s-4);border-bottom:1px solid var(--hairline)}
.results li:last-child{border-bottom:0;padding-bottom:0}
.results svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:.22em}
.shots{display:grid;gap:var(--s-5);margin-top:var(--s-6);position:relative}

/* ═══ ПЛАНШЕТ ═══════════════════════════════════════════════════ */
@media (min-width:700px){
  :root{--gut:32px;--hd:72px}
  .facts,.cfacts{grid-template-columns:repeat(4,1fr)}
  .hero__cta{flex-direction:row}
  .hero__shots{grid-template-columns:1.6fr 1fr;align-items:end}
  .shots{grid-template-columns:1.7fr 1fr;align-items:end}
  .cases{grid-template-columns:repeat(2,1fr)}
  .case--wide{grid-column:span 2}
  .svc>summary{grid-template-columns:auto 1fr auto auto;gap:var(--s-5);align-items:center}
  .svc__from{grid-column:3;grid-row:1;text-align:right}
  .svc__toggle{grid-column:4;grid-row:1}
  .svc__body{grid-template-columns:1fr 1fr;padding-left:calc(var(--s-5) + 26px)}
  .calc{grid-template-columns:1fr 1fr;gap:var(--s-7);align-items:start}
  .calc__out{position:sticky;top:calc(var(--hd) + var(--s-4))}
  .terms{grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
  .contact{grid-template-columns:1.1fr .9fr;gap:var(--s-8);align-items:start}
  .ft__grid{grid-template-columns:2fr 1fr 1fr 1fr}
  .bar{display:none}
  .ft{padding-bottom:var(--s-7)}
  .faq{columns:1}
}

/* ═══ ДЕСКТОП ═══════════════════════════════════════════════════ */
@media (min-width:1000px){
  :root{--gut:40px}
  .hd__nav{display:flex;align-items:center;gap:26px}
  .hd__nav a{font:600 14px/1 var(--f-text);color:var(--text-2);position:relative;padding:6px 0;
    transition:color var(--dur-1) var(--ease)}
  .hd__nav a:hover{color:var(--text)}
  .hd__nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
    background:var(--accent);transition:right var(--dur-2) var(--ease)}
  .hd__nav a:hover::after{right:0}
  .hd__cta{display:inline-flex}
  .burger{display:none}
  .hero{padding-top:var(--s-8)}
  .hero__in{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--s-8);align-items:center}
  .hero__shots{margin-top:0;grid-template-columns:1fr;position:relative}
  .hero__shots .device--phone{position:absolute;right:-10px;bottom:-34px;max-width:180px;z-index:2}
  .facts{grid-column:1/-1}
  .cases{grid-template-columns:repeat(3,1fr)}
  .case--wide{grid-column:span 2}
  .case--wide .case__shot{aspect-ratio:16/9}
  .flow{grid-template-columns:repeat(5,1fr);gap:var(--s-5)}
  .flow__step{grid-template-columns:1fr;gap:var(--s-4);padding-bottom:0;align-content:start;position:relative}
  .flow__mark{width:100%;justify-items:start}
  .flow__line{width:auto;height:1px;min-height:0;position:absolute;top:11px;left:20px;
    right:calc(-1 * var(--s-5))}
  .flow__dot{margin-top:6px}
  .flow__body p{max-width:26ch}
  .story,.story__ring{width:128px}
  .story__ring{height:128px}
  .faq{columns:2;column-gap:var(--s-8)}
  .q{break-inside:avoid}
  .prose p{font-size:17.5px}
}
@media (min-width:1280px){
  .cta{padding:76px 72px}
  .cta__in{max-width:62%}
}

/* ═══ СТРАНИЦА ДИЗАЙН-СИСТЕМЫ ═══════════════════════════════════ */
.sw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-4)}
.sw{display:flex;gap:var(--s-3);align-items:center}
.sw__box{width:52px;height:52px;border-radius:var(--r-field);border:1px solid var(--border);flex:none}
.sw__meta b{display:block;font-size:12.5px;color:var(--text)}
.sw__meta span{font-size:12.5px;color:var(--text-3)}
.ty-list{display:grid;gap:var(--s-6);border-top:1px solid var(--border)}
.ty{padding-top:var(--s-5);border-bottom:1px solid var(--hairline);padding-bottom:var(--s-5);
  display:grid;gap:var(--s-3)}
.ty__meta b{font-size:12.5px;color:var(--accent)}
.ty__meta span{font-size:12.5px;color:var(--text-3);margin-left:var(--s-3)}
.ty__sample{color:var(--text);line-height:1.3}
.rad-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-5)}
.rad__box{height:72px;background:var(--surface-raised);border:1px solid var(--border);margin-bottom:var(--s-3)}
.rad b{font-size:12.5px;color:var(--text)}
.rad span{display:block;font-size:12.5px;color:var(--text-3)}
@media (min-width:700px){
  .sw-grid{grid-template-columns:repeat(4,1fr)}
  .rad-grid{grid-template-columns:repeat(4,1fr)}
  .ty{grid-template-columns:200px 1fr;gap:var(--s-5);align-items:baseline}
}

/* ═══ ГЕРОЙ · ЖИВАЯ ВИТРИНА РАБОТ ═══════════════════════════════ */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3);height:380px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.showcase__col{display:grid;gap:var(--s-3);align-content:start;animation:tick 46s linear infinite;will-change:transform}
.showcase__col--rev{animation-direction:reverse}
@keyframes tick{to{transform:translateY(-50%)}}
.showcase:hover .showcase__col{animation-play-state:paused}
.tile{position:relative;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.tile img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.tile__cap{position:absolute;left:8px;bottom:8px;padding:5px 10px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(6px);
  font:600 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text)}
@media (prefers-reduced-motion:reduce){.showcase__col{animation:none}}

/* Появление героя: строки въезжают по очереди, один раз при загрузке */
.js .hero__line{opacity:0;transform:translateY(16px);animation:rise .8s var(--ease-out) forwards}
.js .hero__line:nth-child(1){animation-delay:.05s}
.js .hero__line:nth-child(2){animation-delay:.16s}
.js .hero__line:nth-child(3){animation-delay:.27s}
.js .hero__line:nth-child(4){animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.js .hero__line{opacity:1;transform:none;animation:none}}

/* Выделение ключевых слов в тексте: подложка вместо жирного */
/* Подсветка ключевой фразы: на переносе строки фон клонируется, а не рвётся */
.hl{padding:.06em .08em;margin-inline:-.04em;color:var(--text);font-weight:600;border-radius:2px;
  background:color-mix(in srgb,var(--accent) 20%,transparent);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}

/* Подсветка карточки под курсором */
.case{position:relative;--mx:50%;--my:50%}
.case::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;z-index:1;
  transition:opacity var(--dur-2) var(--ease);
  background:radial-gradient(360px circle at var(--mx) var(--my),var(--accent-wash),transparent 62%)}
.case:hover::after{opacity:1}

/* ═══ ПАКЕТЫ ════════════════════════════════════════════════════ */
.packs{display:grid;gap:var(--s-4)}
.pack{position:relative;display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-6) var(--s-5);border:1px solid var(--border);border-radius:var(--r-surface);
  background:var(--surface);transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.pack:hover{border-color:var(--accent);transform:translateY(-3px)}
.pack--featured{border-color:var(--accent);
  background:linear-gradient(180deg,var(--accent-wash),transparent 42%),var(--surface);
  box-shadow:var(--shadow-accent)}
.pack__badge{position:absolute;top:-11px;left:var(--s-5);padding:5px 12px;border-radius:var(--r-pill);
  background:var(--accent);color:var(--on-accent);font:700 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.pack__name{font:600 clamp(1.4rem,4.4vw,1.9rem)/1 var(--f-display);text-transform:uppercase;color:var(--text)}
.pack__note{font-size:var(--t-small);color:var(--text-3)}
.pack__price{font:600 clamp(2rem,6.4vw,2.7rem)/1 var(--f-display);color:var(--text);
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:var(--s-2)}
.pack__price small{font:500 12px/1 var(--f-mono);color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
.pack__for{padding:var(--s-3) var(--s-4);border-radius:var(--r-field);background:var(--surface-raised);
  font-size:13.5px;color:var(--text-2)}
.pack__list{display:grid;gap:var(--s-3);list-style:none;padding:0;margin:0}
.pack__list li{display:flex;gap:var(--s-3);font-size:var(--t-small);color:var(--text-2)}
.pack__list svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:.24em}
.pack__foot{margin-top:auto;display:grid;gap:var(--s-3)}
.pack__term{font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}

/* ═══ ВИДЕО-ОТЗЫВЫ · ОБЛОЖКИ 9:16 ══════════════════════════════ */
.reels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)}
.reel{position:relative;aspect-ratio:9/16;border-radius:var(--r-media);overflow:hidden;
  border:1px solid var(--border);background:linear-gradient(165deg,var(--surface-raised),var(--surface));
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--s-4);text-align:left;
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.reel:hover{border-color:var(--accent);transform:translateY(-4px)}
.reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 38%,rgba(4,6,12,.82) 92%)}
.reel--empty{border-style:dashed;
  background:
    radial-gradient(120% 80% at var(--gx,20%) var(--gy,12%),var(--accent-wash),transparent 62%),
    linear-gradient(165deg,var(--surface-raised),var(--surface))}
.reel--empty::before{background:none}
.reel__idx{position:absolute;top:var(--s-4);left:var(--s-4);font:500 11px/1 var(--f-mono);
  letter-spacing:.14em;color:var(--text-3)}
.reel__hint{margin-top:var(--s-4);font-size:13.5px;color:var(--text-3)}
.reel__hint a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 92%,transparent);color:var(--on-accent);
  box-shadow:var(--shadow-accent);transition:transform var(--dur-2) var(--ease)}
.reel__play svg{width:22px;height:22px;margin-left:2px}
.reel:hover .reel__play{transform:translate(-50%,-50%) scale(1.08)}
.reel--empty .reel__play{background:color-mix(in srgb,var(--accent) 26%,var(--surface-raised));
  color:var(--text);box-shadow:none}
.reel__body{position:relative;display:grid;gap:6px}
.reel__quote{font:600 14.5px/1.35 var(--f-text);color:var(--text)}
.reel__who{font-size:12.5px;color:var(--text-2)}
.reel__role{font:500 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* ═══ ПЛАНШЕТ И ДЕСКТОП ДЛЯ НОВЫХ БЛОКОВ ═══════════════════════ */
@media (min-width:700px){
  .packs{grid-template-columns:repeat(3,1fr);align-items:stretch}
  .reels{grid-template-columns:repeat(4,1fr);gap:var(--s-4)}
  .showcase{height:520px;gap:var(--s-4)}
  .showcase__col{gap:var(--s-4)}
}
@media (min-width:1000px){
  .showcase{height:560px}
  .pack{padding:var(--s-7) var(--s-6)}
}

/* ═══ ГЕРОЙ 2.0 · бейджи, круглая кнопка, наклон ════════════════ */
.hero__badge{display:inline-flex;align-items:center;gap:var(--s-2);padding:8px 14px;border-radius:var(--r-pill);
  background:var(--accent-wash);border:1px solid color-mix(in srgb,var(--accent) 34%,transparent);
  font:600 12.5px/1 var(--f-text);color:var(--text);vertical-align:middle;margin-left:var(--s-3)}
.hero__badge i{width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
.hero h1 .light{font-weight:300;color:var(--text-2)}

.hero__row{display:flex;align-items:center;gap:var(--s-5);margin-top:var(--s-6);flex-wrap:wrap}
.round-cta{display:inline-flex;align-items:center;gap:var(--s-4);color:var(--text)}
.round-cta__circle{width:82px;height:82px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent-hover),var(--accent));color:var(--on-accent);
  box-shadow:0 14px 40px var(--glow);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.round-cta:hover .round-cta__circle{transform:scale(1.06);box-shadow:0 18px 52px var(--glow)}
.round-cta__circle svg{width:26px;height:26px}
.round-cta__label{font:700 17px/1.25 var(--f-text);max-width:9ch}

.dirs{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);margin-top:var(--s-6);
  padding-top:var(--s-5);border-top:1px solid var(--hairline)}
.dirs a{font:600 15px/1 var(--f-text);color:var(--text-2);padding-bottom:3px;
  border-bottom:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);transition:color var(--dur-1) var(--ease)}
.dirs a:hover{color:var(--accent)}

/* Витрина с наклоном и плавающими бейджами стека */
.stage{position:relative;perspective:1600px}
.stage .showcase{transform:rotateY(-9deg) rotateX(3deg) rotateZ(1deg);transform-origin:left center}
.chips-float{position:absolute;inset:0;pointer-events:none;z-index:3}
.chip-float{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface) 88%,transparent);
  border:1px solid var(--border);backdrop-filter:blur(10px);box-shadow:var(--shadow-1);
  font:600 12px/1 var(--f-mono);letter-spacing:.04em;color:var(--text);white-space:nowrap;
  animation:float 6s var(--ease) infinite}
.chip-float i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.chip-float:nth-child(1){top:4%;left:-6%;animation-delay:0s}
.chip-float:nth-child(2){top:26%;right:-4%;animation-delay:.8s}
.chip-float:nth-child(3){bottom:30%;left:-9%;animation-delay:1.6s}
.chip-float:nth-child(4){bottom:8%;right:-2%;animation-delay:2.4s}
.chip-float:nth-child(5){top:52%;right:16%;animation-delay:3.2s}
@keyframes float{50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.chip-float{animation:none}}

.bubble{position:absolute;z-index:4;top:-18px;right:2%;width:118px;height:118px;border-radius:50%;
  display:grid;place-content:center;text-align:center;gap:2px;
  background:linear-gradient(150deg,var(--accent),var(--accent-hover));color:var(--on-accent);
  box-shadow:0 16px 44px var(--glow)}
.bubble b{font:600 30px/1 var(--f-display);font-variant-numeric:tabular-nums}
.bubble span{font:600 10.5px/1.25 var(--f-mono);letter-spacing:.06em;opacity:.9}

/* ═══ КАРТОЧКА С ЦВЕТНОЙ ВКЛАДКОЙ И ПЛАШКОЙ-ВЫВОДОМ ════════════ */
.tabcard{position:relative;background:var(--surface-raised);border:1px solid var(--border);
  border-radius:var(--r-surface);padding:var(--s-6) var(--s-5);display:grid;gap:var(--s-4);
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.tabcard::before{content:"";position:absolute;left:-5px;top:var(--s-6);width:5px;height:64px;
  border-radius:5px 0 0 5px;background:var(--accent)}
.tabcard:hover{transform:translateY(-3px);border-color:var(--accent)}
.tabcard h3{padding-right:var(--s-5)}
.tabcard p{font-size:var(--t-small);color:var(--text-2)}
.tabcard__verdict{padding:var(--s-4);border-radius:var(--r-field);
  background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--text);font-size:14px;line-height:1.45}
.about{display:grid;gap:var(--s-4)}
.about__verdict{margin-top:var(--s-5);padding:var(--s-5) var(--s-6);border-radius:var(--r-surface);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%),var(--surface);
  border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);font-size:var(--t-lead);color:var(--text)}

/* ═══ КЛИЕНТЫ ══════════════════════════════════════════════════ */
.clients{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hairline);
  border:1px solid var(--hairline);border-radius:var(--r-surface);overflow:hidden}
.client{background:var(--paper);padding:var(--s-5) var(--s-4);display:grid;gap:4px;
  transition:background var(--dur-2) var(--ease)}
.client:hover{background:var(--surface)}
.client b{font:700 15.5px/1.25 var(--f-text);color:var(--text)}
.client span{font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* ═══ БЫЛО → СТАЛО ═════════════════════════════════════════════ */
.shift{display:grid;gap:var(--s-3)}
.shift__row{display:grid;gap:var(--s-3);align-items:center;padding:var(--s-4) var(--s-5);
  border:1px solid var(--border);border-radius:var(--r-surface);background:var(--surface)}
.shift__was{display:flex;align-items:center;gap:var(--s-3);color:var(--text-3);font-size:var(--t-small);
  text-decoration:line-through;text-decoration-color:color-mix(in srgb,#ff5a5a 70%,transparent)}
.shift__now{display:flex;align-items:center;gap:var(--s-3);color:var(--text);font-weight:600;font-size:15px}
.shift__now svg{width:17px;height:17px;color:var(--signal);flex:none}
.shift__arrow{display:none;color:var(--text-3)}

/* ═══ КАНАЛ ════════════════════════════════════════════════════ */
.posts{display:grid;gap:var(--s-3)}
.post{display:grid;gap:var(--s-2);padding:var(--s-5);border:1px solid var(--border);
  border-radius:var(--r-surface);background:var(--surface);transition:border-color var(--dur-2) var(--ease)}
.post:hover{border-color:var(--accent)}
.post__tag{justify-self:start;padding:5px 11px;border-radius:var(--r-pill);background:var(--accent-wash);
  font:600 10.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.post p{font:600 15.5px/1.4 var(--f-text);color:var(--text)}

/* ═══ ПЕРЕКЛЮЧАТЕЛЬ СПОСОБА СВЯЗИ ══════════════════════════════ */
.ways{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-bottom:var(--s-3)}
.ways label{cursor:pointer;position:relative}
.ways input{position:absolute;opacity:0;pointer-events:none}
.ways span{display:inline-flex;padding:11px 18px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--surface);font:600 14px/1 var(--f-text);color:var(--text-2);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.ways input:checked + span{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ways input:focus-visible + span{outline:2px solid var(--accent);outline-offset:3px}

/* На телефоне плавающие бейджи и наклон только мешают: убираем, плашку уменьшаем */
@media (max-width:699px){
  .chips-float{display:none}
  .stage .showcase{transform:none}
  .stage{margin-top:var(--s-6)}
  .bubble{width:88px;height:88px;top:-14px;right:6px}
  .bubble b{font-size:23px}
  .bubble span{font-size:9px}
  .round-cta__circle{width:66px;height:66px}
  .round-cta__circle svg{width:22px;height:22px}
}

@media (min-width:700px){
  .clients{grid-template-columns:repeat(4,1fr)}
  .about{grid-template-columns:repeat(3,1fr)}
  .shift__row{grid-template-columns:1fr 28px 1fr;gap:var(--s-5)}
  .shift__arrow{display:grid;place-items:center}
  .posts{grid-template-columns:repeat(3,1fr)}
  .hero__row{gap:var(--s-7)}
}
@media (min-width:1000px){
  .bubble{width:132px;height:132px;top:-24px;right:-3%}
  .bubble b{font-size:34px}
}

/* ═══ ВИТРИНА: колонка телефонов ═══════════════════════════════ */
.showcase{grid-template-columns:1fr .44fr}
.tile--phone{border-radius:22px}
.tile--phone img{aspect-ratio:9/19.5}
.tabcard__role{margin-top:-8px;font:500 11.5px/1 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent)}

/* ═══ ЦЕПОЧКА: от заявки до выдачи ═════════════════════════════ */
.pipe{display:grid;gap:var(--s-3);counter-reset:pipe}
.pipe__step{position:relative;display:grid;gap:var(--s-3);padding:var(--s-5);
  border:1px solid var(--border);border-radius:var(--r-surface);background:var(--surface);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.pipe__step:hover{border-color:var(--accent);transform:translateY(-3px)}
.pipe__n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent-wash);color:var(--accent);
  font:600 13px/1 var(--f-mono);font-variant-numeric:tabular-nums}
.pipe__step h3{font-size:1.1rem}
.pipe__step p{font-size:var(--t-small);color:var(--text-2)}
.pipe__link{display:none}

/* ═══ ИНТЕГРАЦИИ ═══════════════════════════════════════════════ */
.integr{display:grid;gap:var(--s-4)}
.ig{padding:var(--s-6) var(--s-5);border:1px solid var(--border);border-radius:var(--r-surface);
  background:var(--surface);display:grid;gap:var(--s-4);align-content:start}
.ig h3{font-size:1.15rem}
.ig__list{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ig__item{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pill);
  background:var(--surface-raised);border:1px solid var(--border);font:600 13px/1 var(--f-text);color:var(--text)}
.ig__item i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.ig p{font-size:var(--t-small);color:var(--text-3)}

/* ═══ SEO ══════════════════════════════════════════════════════ */
.seo{display:grid;gap:var(--s-4)}
.seo__item{display:grid;gap:var(--s-3);padding:var(--s-6) var(--s-5);border-radius:var(--r-surface);
  border:1px solid var(--border);background:var(--surface)}
.seo__item:first-child{background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 22%,transparent),transparent 62%),var(--surface);
  border-color:color-mix(in srgb,var(--accent) 32%,transparent)}
.seo__item h3{font-size:1.12rem}
.seo__item p{font-size:var(--t-small);color:var(--text-2)}

@media (min-width:700px){
  .about{grid-template-columns:repeat(2,1fr)}
  .pipe{grid-template-columns:repeat(5,1fr);gap:var(--s-3)}
  .pipe__step{padding:var(--s-5) var(--s-4)}
  .integr{grid-template-columns:repeat(3,1fr)}
  .seo{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .about{grid-template-columns:repeat(4,1fr)}
  .seo{grid-template-columns:repeat(4,1fr)}
}

/* Иконка блока: одна подложка на все секции */
.blk-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;
  background:var(--accent-wash);color:var(--accent);
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.tabcard:hover .blk-ico,.pipe__step:hover .blk-ico,.ig:hover .blk-ico,
.svc:hover .blk-ico,.svc[open] .blk-ico{background:var(--accent);color:var(--on-accent)}
.svc>summary{grid-template-columns:auto auto 1fr auto}
.pipe__step{grid-template-columns:auto 1fr;align-items:center;row-gap:var(--s-3)}
.pipe__step h3,.pipe__step p{grid-column:1/-1}
.pipe__n{justify-self:end}
@media (min-width:700px){
  .svc>summary{grid-template-columns:auto auto 1fr auto auto}
  .svc__from{grid-column:4}
  .svc__toggle{grid-column:5}
}

/* ═══ ПРАВКИ: цифры, цены, витрина ═════════════════════════════ */
/* Метрика с иконкой */
.fact{display:grid;gap:var(--s-3);justify-items:start}
.fact .blk-ico{width:40px;height:40px;border-radius:12px}
.fact__cap{font-size:13.5px;line-height:1.4;color:var(--text-3)}

/* Цена в пакете крупнее, с отбивкой */
.pack__price{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;
  padding:var(--s-4) 0;border-block:1px solid var(--hairline)}
.pack__sum{font:600 clamp(2.3rem,7vw,3.1rem)/1 var(--f-display);color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pack--featured .pack__sum{color:var(--accent)}
.pack__price small{font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}

/* Чипы стека выносим за пределы витрины: подписи плиток больше не перекрыты */
.chip-float:nth-child(1){top:2%;left:-9%;right:auto;bottom:auto}
.chip-float:nth-child(2){top:22%;right:-7%;left:auto;bottom:auto}
.chip-float:nth-child(3){bottom:26%;left:-11%;right:auto;top:auto}
.chip-float:nth-child(4){bottom:4%;right:-7%;left:auto;top:auto}
.chip-float:nth-child(5){top:50%;left:-13%;right:auto;bottom:auto}
.chip-float:nth-child(6){top:72%;right:-9%;left:auto;bottom:auto}
.tile__cap{left:auto;right:8px;bottom:8px}

/* Крупнее иконки и текст блоков на большом экране */
@media (min-width:1000px){
  .blk-ico{width:52px;height:52px;border-radius:16px}
  .blk-ico svg{width:26px;height:26px}
  .fact .blk-ico{width:46px;height:46px}
  .fact b{font-size:clamp(2rem,3vw,2.7rem)}
  .fact__cap{font-size:14.5px}
  .tabcard{padding:var(--s-7) var(--s-6)}
  .tabcard p{font-size:15.5px}
  .pipe__step p,.ig p{font-size:15px}
  .svc__name{font-size:clamp(1.7rem,3vw,2.6rem)}
}

/* ═══ БЛОК КАНАЛА ══════════════════════════════════════════════ */
.tgblock{display:grid;gap:var(--s-4);align-items:center}
.tgblock__phone{display:grid;gap:var(--s-5);justify-items:center;order:-1}
.tgblock__phone .device--phone img{aspect-ratio:auto;object-fit:contain}
.tgblock__side{display:grid;gap:var(--s-4)}
.tgcard{padding:var(--s-5);border:1px solid var(--border);border-radius:var(--r-surface);
  background:var(--surface);text-align:center;transition:border-color var(--dur-2) var(--ease)}
.tgcard:hover{border-color:var(--accent)}
.tgcard b{display:block;font:600 clamp(1.25rem,4.4vw,1.7rem)/1.1 var(--f-display);text-transform:uppercase;color:var(--text)}
.tgcard span{display:block;margin-top:var(--s-2);font-size:13.5px;color:var(--text-3)}
@media (min-width:700px){
  .tgblock{grid-template-columns:1fr auto 1fr;gap:var(--s-6)}
  .tgblock__phone{order:0}
  .tgcard{text-align:left;padding:var(--s-6) var(--s-5)}
}
@media (min-width:1000px){
  .tgblock{gap:var(--s-8)}
  .tgblock__phone .device--phone{max-width:300px}
}

/* ═══ ОБ АГЕНТСТВЕ ═════════════════════════════════════════════ */
.agency{display:grid;gap:var(--s-6)}
.agency__facts{list-style:none;padding:0;margin:var(--s-6) 0 0;display:grid;gap:var(--s-4)}
.agency__facts li{position:relative;padding-left:var(--s-5);font-size:15.5px;color:var(--text-2)}
.agency__facts li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
.agency__visual{border:1px solid var(--border);border-radius:var(--r-media);padding:var(--s-7) var(--s-6);
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 24%,transparent),transparent 62%),var(--surface);
  display:grid;gap:var(--s-6);align-content:center;justify-items:center;text-align:center}
.agency__logo svg{height:38px;width:auto;color:var(--text)}
.agency__badges{display:flex;flex-wrap:wrap;gap:var(--s-2);justify-content:center}

/* ═══ ЭТАПЫ РАБОТЫ КАК СИСТЕМА ═════════════════════════════════ */
.stages{display:grid;gap:var(--s-4);position:relative}
.stage-step{position:relative;display:grid;gap:var(--s-3);padding:var(--s-6) var(--s-5);
  border:1px solid var(--border);border-radius:var(--r-surface);background:var(--surface);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.stage-step:hover{border-color:var(--accent);transform:translateY(-3px)}
.stage-step__n{position:absolute;top:var(--s-5);right:var(--s-5);font:600 13px/1 var(--f-mono);color:var(--text-3)}
.stage-step h3{font-size:1.15rem}
.stage-step p{font-size:var(--t-small);color:var(--text-2)}
@media (min-width:700px){
  .agency{grid-template-columns:1.15fr .85fr;gap:var(--s-8);align-items:center}
  .agency__facts{grid-template-columns:repeat(2,1fr);gap:var(--s-4) var(--s-6)}
  .stages{grid-template-columns:repeat(5,1fr)}
  /* линия связи между этапами: видно, что это одна система */
  .stages::before{content:"";position:absolute;top:calc(var(--s-6) + 26px);left:8%;right:8%;height:1px;
    background:linear-gradient(90deg,transparent,var(--border) 12%,var(--border) 88%,transparent);z-index:0}
  .stage-step{z-index:1}
}

/* Прайс внутри раскрытой услуги */
.svc__prices{margin-top:var(--s-5);display:grid;gap:var(--s-2)}
.svc__price-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);
  padding:var(--s-3) 0;border-bottom:1px solid var(--hairline);font-size:var(--t-small);color:var(--text-3)}
.svc__price-row:last-child{border-bottom:0}
.svc__price-row b{font:600 15.5px/1 var(--f-mono);color:var(--text);white-space:nowrap}

/* Логотипы сервисов: реальный знак или нейтральная плашка с инициалами */
.ig__item{gap:9px;padding:7px 13px 7px 7px}
.ig__mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none;
  background:var(--surface);border:1px solid var(--border)}
.ig__mark img{width:17px;height:17px;display:block;filter:none}
[data-theme="light"] .ig__mark img{filter:invert(1)}
.ig__mark b{font:700 10.5px/1 var(--f-mono);color:var(--accent);letter-spacing:.02em}
@media (min-width:1000px){.integr{grid-template-columns:repeat(3,1fr)}}

/* ═══ SEO · СХЕМА РОСТА СТРУКТУРЫ ══════════════════════════════ */
.tree{margin-top:var(--s-7);padding:var(--s-6) var(--s-5);border:1px solid var(--border);
  border-radius:var(--r-media);background:var(--surface);display:grid;gap:var(--s-5);justify-items:center}
.tree__node{display:inline-flex;align-items:center;justify-content:center;text-align:center;
  padding:var(--s-3) var(--s-5);border-radius:var(--r-pill);font:600 14px/1.25 var(--f-text)}
.tree__node--root{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent);font-size:15px}
.tree__node--mid{background:var(--accent-wash);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 34%,transparent)}
.tree__row{display:grid;gap:var(--s-5);width:100%}
.tree__cluster{display:grid;gap:var(--s-3);justify-items:center;position:relative;padding-top:var(--s-5)}
.tree__cluster::before{content:"";position:absolute;top:0;left:50%;width:1px;height:var(--s-5);background:var(--border)}
.tree__leaves{display:grid;gap:var(--s-2);width:100%}
.tree__leaf{padding:11px var(--s-4);border:1px solid var(--hairline);border-radius:var(--r-field);
  background:var(--paper);font-size:13.5px;color:var(--text-2);text-align:center}
.tree__note{margin-top:var(--s-3);font-size:var(--t-small);color:var(--text-3);text-align:center;max-width:52ch}
@media (min-width:700px){
  .tree{padding:var(--s-7) var(--s-6)}
  .tree__row{grid-template-columns:repeat(3,1fr);gap:var(--s-6);position:relative}
  /* горизонтальная перемычка между кластерами: видно, что ветки от одного корня */
  .tree__row::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:1px;background:var(--border)}
}

/* Клиент как вход в кейс */
.client{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-5) var(--s-4);min-width:0}
.client--link{transition:background var(--dur-2) var(--ease),padding-left var(--dur-2) var(--ease)}
.client--link:hover{background:var(--surface);padding-left:var(--s-5)}
.client__mark{width:44px;height:44px;border-radius:12px;flex:none;display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent);font:700 12.5px/1 var(--f-mono);letter-spacing:.02em}
.client__txt{display:grid;gap:3px;min-width:0}
.client__txt b{font:700 15.5px/1.25 var(--f-text);color:var(--text)}
.client__txt span{font:500 11.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.client--link svg{width:16px;height:16px;color:var(--text-3);margin-left:auto;flex:none;
  transition:transform var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.client--link:hover svg{transform:translateX(4px);color:var(--accent)}
@media (min-width:1000px){.clients{grid-template-columns:repeat(3,1fr)}}

/* Вопросы: нумерация и призыв в конце */
.q summary{gap:var(--s-4)}
.q__n{flex:none;color:var(--text-3);font-size:12.5px;padding-top:.28em}
.q[open] .q__n{color:var(--accent)}
.faq__cta{margin-top:var(--s-6);padding:var(--s-6) var(--s-5);border:1px solid var(--border);
  border-radius:var(--r-surface);display:grid;gap:var(--s-5);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent 64%),var(--surface)}
.faq__cta h3{margin-bottom:var(--s-2)}
.faq__cta p{font-size:var(--t-small);color:var(--text-2);max-width:46ch}
@media (min-width:700px){
  .faq__cta{grid-template-columns:1fr auto;align-items:center;gap:var(--s-6);padding:var(--s-6)}
}

/* Страница кейса: работы с иконками и призыв */
.work{display:grid;grid-template-columns:auto 1fr;gap:var(--s-4);align-items:start}
.case-cta{padding:var(--s-6) var(--s-5);border:1px solid var(--border);border-radius:var(--r-media);
  display:grid;gap:var(--s-5);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent 64%),var(--surface)}
.case-cta h3{margin-bottom:var(--s-2)}
.case-cta p{font-size:var(--t-small);color:var(--text-2);max-width:52ch}
@media (min-width:700px){
  .case-cta{grid-template-columns:1fr auto;align-items:center;padding:var(--s-7) var(--s-6)}
  .ft__grid{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr}
}

/* ═══ РЕКЛАМНЫЕ КЕЙСЫ ══════════════════════════════════════════ */
.case--ads .case__shot{background:var(--paper-2)}
.case--ads .case__shot img{object-position:center}
.case__year{position:absolute;top:var(--s-3);right:var(--s-3);padding:6px 11px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(8px);
  font:600 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--text-2)}
.cover{border:1px solid var(--border);border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow-2)}
.cover img{width:100%;height:auto;display:block}
.metrics{display:grid;gap:var(--s-4);align-content:center}
.metric{padding:var(--s-5);border:1px solid var(--border);border-radius:var(--r-surface);background:var(--surface)}
.metric b{display:block;font:600 clamp(1.8rem,5.4vw,2.6rem)/1 var(--f-display);color:var(--text);
  font-variant-numeric:tabular-nums}
.metric span{display:block;margin-top:var(--s-2);font-size:var(--t-small);color:var(--text-3)}
.case-note{margin-top:var(--s-5);font-size:12.5px;line-height:1.5;color:var(--text-3);position:relative}

/* ═══ ИЕРАРХИЯ ИКОНОК ══════════════════════════════════════════
   Один вид плашки на всю страницу читается как штамп. Разводим
   оформление по ролям: услуга — крупный знак без рамки, шаг цепочки —
   круг, интеграция — квадрат, метрика — знак в строке с числом. */

/* Услуги и SEO: крупный duotone-знак, подложки нет */
.svc .blk-ico,.seo__item .blk-ico{width:auto;height:auto;background:none;border-radius:0;color:var(--accent)}
.svc:hover .blk-ico,.svc[open] .blk-ico,.seo__item .blk-ico{background:none;color:var(--accent)}
.svc>summary{align-items:center}

/* Цепочка и этапы: круглая подложка с тонкой рамкой */
.pipe__step .blk-ico,.stage-step .blk-ico{border-radius:50%;background:transparent;
  border:1px solid var(--border);color:var(--text-2)}
.pipe__step:hover .blk-ico,.stage-step:hover .blk-ico{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* Команда: заливка в приглушённом круге */
.tabcard .blk-ico{width:38px;height:38px;border-radius:50%;background:var(--surface-raised);color:var(--text-3)}
.tabcard:hover .blk-ico{background:var(--accent-wash);color:var(--accent)}

/* Метрики: знак стоит в строке с числом, без плашки */
.fact{grid-template-columns:auto 1fr;grid-template-areas:"ico num" ". cap";gap:var(--s-2) var(--s-3);align-items:center}
.fact .blk-ico{grid-area:ico;width:auto;height:auto;background:none;border-radius:0;color:var(--accent)}
.fact b{grid-area:num}
.fact__cap{grid-area:cap}

/* Работы в кейсе: квадрат остаётся, но приглушённый */
.work .blk-ico{background:var(--surface-raised);color:var(--text-2)}

/* ═══ ПАТТЕРН ══════════════════════════════════════════════════ */
.section--alt{position:relative}
.section--alt::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("../img/brand/pattern.svg");background-size:88px 88px}
.section--alt>*{position:relative}

/* ═══ ПЛАКАТ-РАЗДЕЛИТЕЛЬ ═══════════════════════════════════════
   Пауза между блоками карточек: только фраза, линия и подпись. */
.poster{padding-block:clamp(88px,14vw,180px);position:relative;overflow:hidden;
  border-block:1px solid var(--hairline);background:var(--paper-2)}
.poster::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("../img/brand/pattern.svg");background-size:88px 88px}
.poster__in{position:relative;display:grid;gap:var(--s-5);max-width:1000px}
.poster__big{font-family:var(--f-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(2.1rem,6.6vw,4.6rem);line-height:1.1;letter-spacing:.004em;color:var(--text)}
.poster__rule{width:64px;height:2px;background:var(--accent)}
.poster__sub{font-size:var(--t-lead);color:var(--text-3);max-width:52ch}
@media (min-width:1000px){
  .poster__in{grid-template-columns:1.25fr .75fr;gap:var(--s-8);align-items:end}
  .poster__big{grid-row:span 2}
  .poster__rule{align-self:start}
}

/* ═══ ГРАФИК ИЗ ДАННЫХ КЕЙСА ═══════════════════════════════════ */
.chart{margin:0;padding:var(--s-6) var(--s-5);border:1px solid var(--border);
  border-radius:var(--r-surface);background:var(--surface);display:grid;gap:var(--s-5);align-content:start}
.chart__title{font:600 var(--t-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.chart__row{display:grid;gap:var(--s-2)}
.chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}
.chart__head span{font-size:var(--t-small);color:var(--text-2)}
.chart__head b{font:600 16px/1 var(--f-mono);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart__track{height:10px;border-radius:10px;background:var(--surface-raised);overflow:hidden}
.chart__bar{display:block;height:100%;border-radius:10px;
  background:linear-gradient(90deg,var(--accent),var(--accent-hover));
  transform-origin:left;animation:grow .9s var(--ease-out) both}
@keyframes grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.chart__bar{animation:none}}
.chart__foot{font-size:13px;line-height:1.5;color:var(--text-3);padding-top:var(--s-3);
  border-top:1px solid var(--hairline)}

/* Скрытие отфильтрованных карточек: .case задаёт display:grid и перебивает
   встроенное правило [hidden]{display:none} — без этого фильтр не работает */
.case[hidden],.client[hidden]{display:none}

/* ═══ ЦЕПОЧКА «ОТ ЗАЯВКИ ДО ВЫДАЧИ» ═══════════════════════════
   Карточки связаны стрелками: видно, что это один поток. */
.pipe{display:grid;gap:var(--s-4);position:relative}
.pipe__step{position:relative;display:grid;gap:var(--s-3);align-content:start;
  padding:var(--s-5);border:1px solid var(--border);border-radius:var(--r-surface);
  background:var(--surface);transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.pipe__step:hover{border-color:var(--accent);transform:translateY(-3px)}
.pipe__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3)}
.pipe__n{font:600 12px/1 var(--f-mono);color:var(--text-3)}
.pipe__step h3{font-size:1.15rem}
.pipe__step p{font-size:var(--t-small);color:var(--text-2)}

/* стрелка между шагами: на телефоне вниз, на большом экране вправо */
.pipe__step::after{content:"";position:absolute;left:50%;bottom:calc(var(--s-4) * -1);
  width:10px;height:10px;margin-left:-5px;border-right:1.5px solid var(--border);
  border-bottom:1.5px solid var(--border);transform:translateY(-3px) rotate(45deg)}
.pipe__step:last-child::after{display:none}

/* ═══ КАРТОЧКА УЧАСТНИКА С ФОТО ════════════════════════════════
   Портрет 3:4 сверху. Пока снимка нет — заглушка с инициалами
   того же размера, чтобы сетка не прыгала при добавлении фото. */
.member{padding:0;overflow:hidden;gap:0}
.member::before{display:none}
.member__photo{position:relative;aspect-ratio:3/4;background:var(--surface-raised);
  display:grid;place-items:center;border-bottom:1px solid var(--border);overflow:hidden}
.member__photo img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform var(--dur-3) var(--ease)}
.member:hover .member__photo img{transform:scale(1.03)}
.member__ph{font:600 clamp(2rem,4vw,2.6rem)/1 var(--f-display);color:var(--text-3);letter-spacing:.04em}
.member__photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--paper) 55%,transparent))}
.member__body{padding:var(--s-5);display:grid;gap:var(--s-2)}
.member__body p{font-size:var(--t-small);color:var(--text-2)}
.member .tabcard__role{margin-top:0}

/* Кнопка «показать ещё» под сеткой работ */
.cases__more{display:flex;justify-content:center;margin-top:var(--s-6)}
.cases__more .btn[hidden]{display:none}

@media (min-width:700px){
  .pipe{grid-template-columns:repeat(5,1fr);gap:var(--s-5)}
  .pipe__step::after{left:auto;right:calc(var(--s-5) * -1 + 3px);bottom:auto;top:50%;
    margin:-5px 0 0;transform:rotate(-45deg)}
}
@media (min-width:1000px){
  .pipe__step{padding:var(--s-6) var(--s-5)}
  .pipe__step p{font-size:15px}
}

/* Узкий экран: карточки клиентов в две колонки по ~167 px. Стрелку прячем, чтобы название поместилось */
@media (max-width:600px){
  .client{gap:var(--s-3);padding:var(--s-4) var(--s-3)}
  .client__mark{width:36px;height:36px;font-size:12px}
  .client__txt b{font-size:14px;overflow-wrap:anywhere}
  .client--link svg{display:none}
}

/* ═══ ПОДПИСЬ ВНИЗУ (как на fake-wedding.ru) ═══════════════════════ */
.ft__sign{border-top:1px solid var(--border);padding:var(--s-4) 0;margin-top:var(--s-5)}
.ft__sign a{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-3);color:var(--text-3);
  font:500 13px/1.4 var(--f-text);text-decoration:none;transition:color var(--dur-1) var(--ease)}
.ft__sign a:hover{color:var(--text)}
.ft__sign a:hover .ft__sign-mark{color:var(--accent)}
.ft__sign-mark{font:700 13px/1 var(--f-mono);letter-spacing:.02em;color:var(--text-2)}
.ft__sign-mark i{color:var(--accent);font-style:normal}