/* ===========================================================
   Backspace.BY — premium redesign
   =========================================================== */

:root{
  --bg:#ffffff;
  --bg-ink:#0a0a0a;
  --surface:#f5f5f7;
  --surface-2:#ececef;
  --text:#0a0a0a;
  --text-muted:#6e6e73;
  --text-dim:#86868b;
  --line:rgba(10,10,10,.08);
  --line-strong:rgba(10,10,10,.14);
  --accent:#db073d;
  --accent-hover:#b30531;
  --accent-ink:#ffffff;
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --radius-xl:32px;
  --shadow-1:0 1px 3px rgba(10,10,10,.05), 0 1px 2px rgba(10,10,10,.04);
  --shadow-2:0 10px 30px -10px rgba(10,10,10,.15), 0 4px 8px -4px rgba(10,10,10,.08);
  --shadow-3:0 30px 80px -30px rgba(10,10,10,.25);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --t-fast:.18s;
  --t-med:.35s;
  --t-slow:.6s;
  --container:1240px;
  --pad:clamp(20px, 4vw, 56px);
  --font:"Inter","SF Pro Text","Helvetica Neue",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
html, body{margin:0;padding:0}
body{
  font-family:var(--font);
  font-weight:400;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  font-feature-settings:"ss01","cv11","cv02";
  letter-spacing:-0.005em;
  overflow-x:clip;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.skip-link{
  position:fixed;left:12px;top:-100px;background:#000;color:#fff;
  padding:10px 14px;border-radius:8px;z-index:9999;transition:top .25s;
}
.skip-link:focus{top:12px}

.container{
  width:100%;max-width:var(--container);
  margin:0 auto;padding:0 var(--pad);
}

/* ===========================================================
   Typography
   =========================================================== */
.eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);
  margin:0 0 18px;
}
.eyebrow--chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px 7px 12px;
  background:linear-gradient(135deg, rgba(219,7,61,.10), rgba(219,7,61,.05));
  border:1px solid rgba(219,7,61,.18);
  border-radius:999px;
  text-transform:none;letter-spacing:0;
  font-size:13px;font-weight:500;color:var(--accent);
  margin-bottom:24px;
}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(219,7,61,.5);
  animation:pulse 2s infinite var(--ease-out);
  flex-shrink:0;
}

.eyebrow--marked{
  display:inline-flex;align-items:center;gap:14px;
  margin-bottom:22px;
}
.eyebrow--marked .num{
  font-weight:700;font-size:14px;letter-spacing:0;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.eyebrow--marked .bar{
  display:inline-block;width:36px;height:2px;background:var(--accent);
}
.section__title{
  font-weight:700;
  font-size:clamp(30px, 4.4vw, 64px);
  line-height:1.05;
  letter-spacing:-0.025em;
  margin:0 0 18px;
  max-width:18ch;
}
.section__lede{
  font-size:clamp(15px, 1.1vw + 8px, 19px);
  color:var(--text-muted);
  max-width:60ch;
  margin:0;
}
.section__head{margin-bottom:clamp(28px, 4vw, 56px)}
.section__head--row{
  display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(28px, 4vw, 56px);
}
.section{padding:clamp(50px, 7vw, 100px) 0;position:relative}

/* split-text reveal */
[data-split] .word{display:inline-block;overflow:hidden;line-height:1.1;vertical-align:top}
[data-split] .word > span{display:inline-block;transform:translateY(110%)}
[data-split].is-visible .word > span{transform:translateY(0);transition:transform .9s var(--ease-out)}
[data-split].is-visible .word:nth-child(n) > span{transition-delay:calc(var(--i,0) * 40ms)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ===========================================================
   Header
   =========================================================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  padding:14px 0;
  transform:translateY(0);
  transition:
    transform .4s var(--ease-out),
    background var(--t-med) var(--ease-soft),
    backdrop-filter var(--t-med),
    box-shadow var(--t-med);
}
.site-header.scrolled{
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 1px 0 var(--line);
}
.site-header.is-hidden{transform:translateY(-105%)}
.header-row{
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:24px;
}
.brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;letter-spacing:-0.02em;
}
.brand__mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg,#0a0a0a 0%,#2a2a2a 100%);
  color:#fff;
  display:grid;place-items:center;
  font-size:13px;font-weight:700;letter-spacing:0;
}
.brand__name{font-size:17px}
.brand__dot{color:var(--accent)}

.nav{
  display:flex;justify-content:center;gap:clamp(14px, 2vw, 28px);
}
.nav a{
  font-size:14px;font-weight:500;color:var(--text);
  padding:8px 4px;position:relative;opacity:.78;
  transition:opacity var(--t-fast);
}
.nav a:hover{opacity:1}
.nav a::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:0;height:1.5px;background:var(--accent);
  transform:translateX(-50%);transition:width .25s var(--ease-out);
}
.nav a:hover::after{width:18px}

.phone-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:999px;
  background:var(--bg-ink);color:#fff;
  font-size:14px;font-weight:600;
  transition:transform var(--t-fast), background var(--t-fast);
}
.phone-pill:hover{transform:scale(1.04)}
.phone-pill__dot{
  width:7px;height:7px;border-radius:50%;background:#1fd95a;
  box-shadow:0 0 0 0 rgba(31,217,90,.7);
  animation:pulse 2s infinite var(--ease-out);
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(31,217,90,.6)}
  70%{box-shadow:0 0 0 8px rgba(31,217,90,0)}
  100%{box-shadow:0 0 0 0 rgba(31,217,90,0)}
}

.nav-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:10px}
.nav-toggle span{display:block;width:20px;height:1.6px;background:var(--text);border-radius:2px;transition:transform var(--t-med),opacity var(--t-med)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-nav{display:none}
.mobile-nav[hidden]{display:none !important}
@media (max-width: 1024px){
  .mobile-nav:not([hidden]){
    position:absolute;top:100%;left:0;right:0;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    padding:24px var(--pad) 32px;
    display:flex;flex-direction:column;gap:8px;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:18px}
  .mobile-nav__cta{color:var(--accent);font-weight:600}
}

/* ===========================================================
   Hero
   =========================================================== */
.hero{
  position:relative;
  padding:clamp(80px, 9vw, 110px) 0 clamp(40px, 5vw, 70px);
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{
  position:absolute;inset:-10% -5% auto -5%;height:120%;z-index:-1;
  background:
    radial-gradient(ellipse 90% 70% at 85% 25%, rgba(219,7,61,.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 5% 70%, rgba(255,180,80,.10), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}
.hero__bg::before{
  content:"";position:absolute;
  top:18%;left:20%;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle, rgba(219,7,61,.22), transparent 65%);
  filter:blur(20px);
  animation:hero-pulse 7s ease-in-out infinite alternate;
}
.hero__bg::after{
  content:"";position:absolute;
  bottom:0;right:8%;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,120,.18), transparent 65%);
  filter:blur(20px);
  animation:hero-pulse 9s ease-in-out infinite alternate-reverse;
}
@keyframes hero-pulse{
  from{transform:translate3d(0,0,0) scale(1);opacity:.7}
  to{transform:translate3d(40px,-30px,0) scale(1.15);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .hero__bg::before,.hero__bg::after{animation:none}
}
/* subtle dotted grid */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle, rgba(10,10,10,.08) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  -webkit-mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  opacity:.5;pointer-events:none;
}
.hero__inner{
  display:grid;
  grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
  gap:clamp(30px, 5vw, 64px);
  align-items:center;
  position:relative;
}
.hero__title{
  font-weight:800;
  font-size:clamp(48px, 7.2vw, 108px);
  line-height:.96;
  letter-spacing:-0.04em;
  margin:0 0 10px;
  position:relative;z-index:2;
}
.hero__title em{
  font-style:italic;font-weight:800;
  color:var(--accent);
  font-family:"Inter","SF Pro Text",serif;
  position:relative;
  white-space:nowrap;
}
.hero__title em::after{
  content:"";
  position:absolute;left:-4px;right:-4px;bottom:.12em;height:.14em;
  background:var(--accent);opacity:.18;border-radius:4px;
  z-index:-1;
}
.hero__subtitle{
  font-size:clamp(14px, .8vw + 8px, 17px);
  font-weight:500;
  color:var(--text-muted);
  letter-spacing:0;
  margin:0 0 26px;
  text-transform:lowercase;
  position:relative;z-index:2;
}
.hero__lede{
  font-size:clamp(15px, 1vw + 8px, 18px);
  color:var(--text-muted);
  max-width:46ch;
  margin:0 0 30px;
}

.hero__proof{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:0 0 26px;
  padding:14px 18px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--line);
  border-radius:14px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  max-width:max-content;
}
.hero__proof-rating{display:inline-flex;align-items:baseline;gap:6px;font-size:13px}
.hero__proof-stars{color:#f5b400;letter-spacing:1.5px;font-size:14px;line-height:1}
.hero__proof-rating strong{font-weight:700;color:var(--text);font-size:15px}
.hero__proof-mut{color:var(--text-muted);font-size:12.5px}
.hero__proof-sep{
  width:1px;align-self:stretch;background:var(--line-strong);
}
.hero__proof-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--text);
}
.hero__proof-badge svg{color:#0a8a3a;flex-shrink:0}
@media (max-width: 540px){
  .hero__proof{padding:12px 14px}
  .hero__proof-sep{display:none}
}
.hero__meta{
  list-style:none;padding:0;margin:36px 0 0;
  display:flex;gap:clamp(20px, 3vw, 48px);
  border-top:1px solid var(--line);
  padding-top:28px;
}
.hero__meta li{
  display:flex;flex-direction:column;
  position:relative;
  padding-left:14px;
}
.hero__meta-bar{
  position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:linear-gradient(180deg, var(--accent), #f04e7c);
  border-radius:2px;
}
.hero__meta li:nth-child(2) .hero__meta-bar{
  background:linear-gradient(180deg, #0a0a0a, #444);
}
.hero__meta li:nth-child(3) .hero__meta-bar{
  background:linear-gradient(180deg, #1fd95a, #0f8c3a);
}
.hero__meta strong{
  font-size:clamp(22px, 1.4vw + 14px, 32px);
  font-weight:700;letter-spacing:-0.02em;
}
.hero__meta span:not(.hero__meta-bar){font-size:13px;color:var(--text-muted);margin-top:2px}

.hero__art{
  position:relative;display:grid;place-items:center;
  width:100%;max-width:560px;margin:0 auto;
  will-change:transform;
  transform:rotate(-3deg);
}
.hero__photo{
  position:relative;margin:0;width:100%;
  aspect-ratio: 4 / 3;
  border-radius:28px;overflow:hidden;
  box-shadow:
    0 50px 100px -30px rgba(10,10,10,.4),
    0 20px 40px -15px rgba(219,7,61,.25),
    inset 0 0 0 1px rgba(255,255,255,.5);
}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform 1s var(--ease-out);
}
.hero__art:hover{transform:rotate(-2deg) scale(1.01)}
.hero__art{transition:transform .5s var(--ease-out)}
.hero__art:hover .hero__photo img{transform:scale(1.06)}

/* floating white chip — top-left, on the hero image area */
.hero__chip{
  position:absolute;top:14px;left:14px;z-index:3;
  display:inline-flex;align-items:center;gap:10px;
  padding:9px 14px 9px 12px;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-radius:999px;
  font-size:13px;line-height:1.2;color:var(--text);
  box-shadow:0 12px 28px -10px rgba(10,10,10,.25), 0 0 0 1px var(--line);
}
.hero__chip strong{display:block;font-weight:700;color:var(--accent);font-size:13px}
.hero__chip > span{display:flex;flex-direction:column;line-height:1.15}
.hero__chip > span > span{font-size:11px;color:var(--text-muted)}
.hero__chip-dot{
  width:9px;height:9px;border-radius:50%;background:#1fd95a;
  box-shadow:0 0 0 0 rgba(31,217,90,.55);
  animation:pulse 2s infinite var(--ease-out);
  flex-shrink:0;
}

/* red circular sticker — bottom-right */
.hero__sticker{
  position:absolute;bottom:-18px;right:-18px;z-index:3;
  width:118px;height:118px;border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #a4042e 100%);
  color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  box-shadow:0 20px 40px -10px rgba(219,7,61,.5);
  transform:rotate(-10deg);
  font-weight:700;
}
.hero__sticker::before{
  content:"";position:absolute;inset:8px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.4);
}
.hero__sticker-num{
  font-size:28px;line-height:1;letter-spacing:-.03em;
  display:inline-flex;align-items:baseline;gap:2px;
}
.hero__sticker-num small{font-size:.4em;font-weight:600}
.hero__sticker-label{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  margin-top:6px;opacity:.85;
}

@media (max-width: 640px){
  .hero__sticker{width:92px;height:92px}
  .hero__sticker-num{font-size:22px}
}

.scroll-hint{display:none}
.scroll-hint span{
  display:block;width:2px;height:8px;background:var(--text);border-radius:2px;
  animation:scrollHint 1.8s var(--ease-out) infinite;
}
@keyframes scrollHint{
  0%{transform:translateY(0);opacity:1}
  60%{transform:translateY(12px);opacity:0}
  61%{transform:translateY(0);opacity:0}
  100%{transform:translateY(0);opacity:1}
}

/* ===========================================================
   Trust strip
   =========================================================== */
.trust{
  background:var(--bg-ink);color:#fff;
  position:relative;overflow:hidden;
}
.trust::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 90% 50%, rgba(219,7,61,.16), transparent 55%);
  pointer-events:none;
}
.trust__inner{
  position:relative;
  display:flex;align-items:center;gap:clamp(24px, 3vw, 56px);
  /* Только вертикальный padding — горизонтальный отступ остаётся от .container. */
  padding-block:36px;
}
.trust__item{display:flex;flex-direction:column;gap:6px;min-width:0}
.trust__num{
  font-size:clamp(28px, 2vw + 14px, 38px);
  font-weight:700;letter-spacing:-0.03em;line-height:1;
  display:inline-flex;align-items:baseline;gap:4px;
}
.trust__num small{
  font-size:.45em;font-weight:600;letter-spacing:0;
  color:rgba(255,255,255,.55);
}
.trust__label{font-size:13px;color:rgba(255,255,255,.65);line-height:1.4;max-width:22ch}
.trust__sep{
  width:1px;align-self:stretch;background:rgba(255,255,255,.12);
}
.trust__item--cta{
  margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;text-align:right;
}
.trust__phone{
  font-size:clamp(20px, 1.2vw + 12px, 26px);
  font-weight:700;letter-spacing:-0.02em;
  color:#fff;
  padding:8px 18px;border-radius:999px;
  background:var(--accent);
  box-shadow:0 8px 24px -8px rgba(219,7,61,.55);
  transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.trust__phone:hover{transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(219,7,61,.7)}
.trust__item--cta .trust__label{color:rgba(255,255,255,.55);margin-bottom:4px}

@media (max-width: 900px){
  /* padding-inline здесь важен — .trust__inner делит класс .container,
     чей padding-inline мы не хотим потерять. */
  .trust__inner{flex-wrap:wrap;gap:20px;padding-block:32px}
  .trust__sep{display:none}
  .trust__item{flex:1 1 45%}
  .trust__item--cta{flex-basis:100%;align-items:flex-start;text-align:left;margin-left:0;margin-top:14px}
}
@media (max-width: 640px){
  /* На узком экране жать 4 колонки в 2 нечитаемо — лучше вертикальный список
     с крупными цифрами и человеческой подписью. */
  .trust__inner{gap:22px;padding-block:28px}
  .trust__item{flex-basis:100%}
  .trust__num{font-size:32px}
  .trust__label{font-size:14px;max-width:none}
  .trust__phone{font-size:18px;padding:10px 20px}
}

/* ===========================================================
   Form / Buttons
   =========================================================== */
.callback{
  display:grid;gap:14px;max-width:520px;
}
.callback__fields{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.field{display:flex;flex-direction:column;gap:6px}
.field span{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:.02em}
.field input{
  padding:14px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:#fff;font-size:15px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.field input::placeholder{color:var(--text-dim)}
.field input:focus{
  outline:none;border-color:var(--bg-ink);
  box-shadow:0 0 0 4px rgba(10,10,10,.06);
}
/* Field label как отдельный элемент (не span-child .field, где он уже стилизован) */
.field__label{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:.02em;display:block;margin-bottom:6px}
.callback--dark .field__label{color:rgba(255,255,255,.6)}

/* Селект «Что случилось?» занимает всю ширину — как отдельная строка,
   не смешиваясь с полями имя/телефон. */
.field--full{grid-column:1 / -1}

/* ===========================================================
   Custom picker (кастомный dropdown «Что случилось?»)
   =========================================================== */
.picker{position:relative}

/* Нативный <select> — скрываем визуально, но оставляем в DOM для формы,
   валидации браузером и form.submit. !important + opacity — на случай
   если какое-то другое правило или расширение попробует его показать. */
.picker__native{
  position:absolute !important;
  top:0;left:0;
  width:1px !important;height:1px !important;
  padding:0 !important;margin:0 !important;
  border:0 !important;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  opacity:0 !important;
  pointer-events:none;
}

/* Триггер — кнопка, которая выглядит как обычное поле формы */
.picker__trigger{
  width:100%;
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  background:#fff;font-family:inherit;font-size:15px;color:var(--text);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.picker__trigger:hover{border-color:var(--text-dim)}
.picker__trigger:focus-visible{
  outline:none;border-color:var(--bg-ink);
  box-shadow:0 0 0 4px rgba(10,10,10,.06);
}
.picker__trigger--placeholder .picker__value{color:var(--text-dim)}
.picker__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker__caret{
  flex:none;color:var(--text-dim);
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform var(--t-fast), color var(--t-fast);
}
.picker.is-open .picker__caret{transform:rotate(180deg);color:var(--text)}
.picker.is-open .picker__trigger{border-color:var(--bg-ink);box-shadow:0 0 0 4px rgba(10,10,10,.06)}

/* Панель со списком.
   position:fixed — чтобы вырваться из любого overflow:hidden предка
   (у нас .hero и .section часто клипают). Координаты выставляет JS. */
.picker__panel{
  position:fixed;
  z-index:1000;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 20px 60px -12px rgba(0,0,0,.18), 0 6px 16px -4px rgba(0,0,0,.08);
  padding:8px;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  transform-origin:top center;
  animation:picker-in .22s cubic-bezier(0.16, 1, 0.3, 1);
}
.picker__panel[hidden]{display:none}
@keyframes picker-in{
  from{opacity:0;transform:translateY(-6px) scale(.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Затемнение под панелью — общее и для десктопа, и для мобилки.
   На десктопе оно почти прозрачное, только чтобы клик по нему закрывал
   пикер (обработчик в JS). На мобилке — полноценное. */
.picker__backdrop{
  position:fixed;inset:0;z-index:999;
  background:transparent;
  animation:picker-backdrop-in .22s ease-out;
  cursor:pointer;
}
@keyframes picker-backdrop-in{from{opacity:0}to{opacity:1}}

.picker__group + .picker__group{
  margin-top:6px;padding-top:6px;
  border-top:1px solid var(--line);
}
.picker__group-title{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);
  padding:8px 12px 4px;
}
.picker__option{
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:11px 12px;
  border:0;border-radius:10px;background:transparent;
  font-family:inherit;font-size:14.5px;color:var(--text);
  text-align:left;cursor:pointer;
  transition:background-color .12s ease-out, color .12s ease-out;
}
.picker__option:hover,
.picker__option.is-focus{background:rgba(10,10,10,.05)}
.picker__option-label{flex:1;min-width:0}
.picker__option-check{
  flex:none;color:var(--accent);
  opacity:0;transform:scale(.6);
  transition:opacity .18s ease-out, transform .18s ease-out;
}
.picker__option.is-selected{color:var(--accent);font-weight:600;background:rgba(219,7,61,.06)}
.picker__option.is-selected .picker__option-check{opacity:1;transform:scale(1)}

/* Тёмная версия — форма на секции CTA */
.callback--dark .picker__trigger{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.15);
  color:#fff;
}
.callback--dark .picker__trigger:hover{border-color:rgba(255,255,255,.28)}
.callback--dark .picker.is-open .picker__trigger{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}
.callback--dark .picker__trigger--placeholder .picker__value{color:rgba(255,255,255,.5)}
.callback--dark .picker__caret{color:rgba(255,255,255,.55)}
.callback--dark .picker.is-open .picker__caret{color:#fff}

@media (max-width: 640px){
  /* Мобилка: сдвигаем панель к нижнему краю, шире паддинги, крупнее шрифт.
     Координаты панели рассчитываются в JS (см. initPicker). */
  .picker__panel{
    border-radius:20px 20px 16px 16px;
    padding:12px;
    animation:picker-sheet-in .28s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes picker-sheet-in{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
  }
  .picker__option{padding:14px 12px;font-size:15px}
  /* На мобилке затемняем сильнее — модальный вид */
  .picker__backdrop{background:rgba(0,0,0,.4)}
}
.callback__hint{font-size:12px;color:var(--text-dim);margin:6px 0 0}
.callback__status{font-size:14px;margin:0;min-height:1em}
.callback__status.is-ok{color:#0a8a3a}
.callback__status.is-err{color:#c2185b}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;
  font-weight:600;font-size:15px;letter-spacing:-0.005em;
  cursor:pointer;
  transition:transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  position:relative;will-change:transform;
}
.btn--accent{
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 8px 20px -8px rgba(219,7,61,.6), 0 2px 4px rgba(219,7,61,.2);
}
.btn--accent:hover{background:var(--accent-hover)}
.btn__arrow{
  display:inline-block;
  transition:transform var(--t-fast) var(--ease-out);
}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* dark form */
.callback--dark .field span{color:rgba(255,255,255,.6)}
.callback--dark .field input{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.16);
  color:#fff;
}
.callback--dark .field input::placeholder{color:rgba(255,255,255,.4)}
.callback--dark .field input:focus{
  border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.1);
}
.callback--dark .callback__status{color:rgba(255,255,255,.8)}

/* ===========================================================
   Tiles
   =========================================================== */
.tiles__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.tile{
  position:relative;
  grid-column:span 1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  padding:28px;
  display:flex;flex-direction:column;
  min-height:360px;
  overflow:hidden;
  isolation:isolate;
  will-change:transform;
  transition:transform var(--t-med) var(--ease-out), box-shadow var(--t-med), border-color var(--t-med);
}
.tile:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}

.tile--surface{background:var(--surface);border-color:transparent}
.tile--outline{background:#fff;border:1px solid var(--line-strong)}

.tile--feature{grid-column:span 2;padding:36px;min-height:420px}

.tile--dark{
  background:var(--bg-ink);color:#fff;border-color:transparent;
}
.tile--dark::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(circle at 90% 10%, rgba(219,7,61,.32), transparent 55%),
    radial-gradient(circle at 20% 90%, rgba(219,7,61,.18), transparent 60%);
}
.tile--dark .tile__list{color:rgba(255,255,255,.7)}
.tile--dark .tile__title{font-weight:700}

.tile--accent{
  background:linear-gradient(135deg, var(--accent) 0%, #a4042e 100%);
  color:#fff;border-color:transparent;
}
.tile--accent::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.15), transparent 50%);
}
.tile--accent .tile__list{color:rgba(255,255,255,.78)}
.tile--accent .tile__title{font-weight:700}

/* photo bg behind dark / accent feature tiles */
.tile--bg{position:relative}
.tile--bg::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background-image:var(--bg-img);
  background-size:cover;background-position:center;
  opacity:.22;
  transition:opacity var(--t-med) var(--ease-out), transform .8s var(--ease-out);
}
.tile--bg:hover::after{opacity:.32;transform:scale(1.04)}
.tile--bg.tile--accent::after{
  /* circuit photo is dark — boost it slightly */
  opacity:.28;
  mix-blend-mode:overlay;
}
.tile--bg.tile--accent:hover::after{opacity:.4}

.tile__icon{
  width:48px;height:48px;border-radius:14px;
  display:grid;place-items:center;
  background:rgba(10,10,10,.06);
  color:var(--text);
  margin-bottom:18px;
  transition:transform var(--t-med) var(--ease-out), background var(--t-med);
}
.tile__icon svg{width:24px;height:24px}
.tile:hover .tile__icon{transform:rotate(-4deg) scale(1.06)}
.tile--dark .tile__icon,
.tile--accent .tile__icon{background:rgba(255,255,255,.12);color:#fff}
.tile--dark:hover .tile__icon{background:var(--accent);color:#fff}
.tile--accent:hover .tile__icon{background:#fff;color:var(--accent)}
.tile__tag{
  align-self:flex-start;
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border-radius:999px;
  background:var(--accent);color:#fff;
  margin-bottom:18px;
}
.tile__tag--ghost{
  background:rgba(255,255,255,.18);
  color:#fff;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.tile__price-row{
  display:flex;align-items:baseline;gap:6px;
  margin-top:auto;padding-top:22px;
  border-top:1px dashed currentColor;
  border-color:rgba(10,10,10,.1);
}
.tile--dark .tile__price-row,
.tile--accent .tile__price-row{border-color:rgba(255,255,255,.2)}

.tile__from{
  font-size:13px;font-weight:500;color:var(--text-muted);
  letter-spacing:.01em;
}
.tile--dark .tile__from,
.tile--accent .tile__from{color:rgba(255,255,255,.65)}

.tile__price-big{
  font-size:clamp(32px, 2.6vw + 14px, 48px);
  font-weight:700;letter-spacing:-0.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.tile__price-big small{
  font-size:.5em;font-weight:600;
  margin-left:3px;color:var(--text-muted);
  letter-spacing:0;
}
.tile--dark .tile__price-big small,
.tile--accent .tile__price-big small{color:rgba(255,255,255,.65)}

.tile__arrow-big{
  margin-left:auto;font-size:22px;line-height:1;
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(10,10,10,.06);
  transition:background var(--t-med), color var(--t-med), transform var(--t-fast);
}
.tile--dark .tile__arrow-big{background:rgba(255,255,255,.12);color:#fff}
.tile--accent .tile__arrow-big{background:rgba(255,255,255,.18);color:#fff}
.tile:hover .tile__arrow-big{background:var(--accent);color:#fff;transform:translateX(4px)}
.tile--accent:hover .tile__arrow-big{background:#fff;color:var(--accent)}
.tile__title{
  font-size:clamp(22px, 1.6vw + 12px, 32px);
  font-weight:600;letter-spacing:-0.02em;line-height:1.1;
  margin:0 0 18px;
}
.tile__list{
  list-style:none;padding:0;margin:auto 0 0;
  display:flex;flex-direction:column;gap:6px;
  font-size:14px;color:var(--text-muted);
}
.tile__list li{position:relative;padding-left:18px}
.tile__list li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.4;
}
.tiles__footer{margin-top:36px;text-align:center}
.link-arrow{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:600;font-size:15px;color:var(--text);
  padding:6px 0;border-bottom:1px solid var(--text);
  transition:gap var(--t-fast);
}
.link-arrow:hover{gap:14px}

/* ===========================================================
   Horizontal services strip
   =========================================================== */
.services{padding:clamp(50px, 7vw, 90px) 0 clamp(30px, 4vw, 50px)}
.services__head{margin-bottom:32px}
.services__track-wrap{
  overflow:hidden;padding:0;
}
.services__track{
  display:flex;gap:18px;
  padding-left:var(--pad);
  /* right gutter added in JS (gsap distance includes +pad) — keeps DOM clean */
  will-change:transform;
}
@media (max-width: 900px){
  /* На мобилке горизонтальный pin-скролл ощущается сломанным. Переводим ленту
     в обычную вертикальную колонку — большие тап-цели, никакой блокировки
     скролла. app.js параллельно не активирует GSAP-pin ниже 900px. */
  .services__track-wrap{overflow:visible}
  .services__track{
    display:grid;grid-template-columns:1fr;gap:14px;
    padding:0 var(--pad);
    transform:none !important;
  }
  .card-svc{flex:none;min-height:auto;padding:22px}
  .services__hint{display:none !important}
}
.card-svc{
  flex:0 0 300px;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:24px;
  min-height:280px;
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-med);
  position:relative;overflow:hidden;
  isolation:isolate;
  text-decoration:none;
}
.card-svc:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:transparent}
.card-svc__num{
  position:absolute;top:20px;right:24px;z-index:2;
  font-size:11px;font-weight:600;letter-spacing:.1em;
  color:var(--text-dim);
}
.card-svc__icon{
  width:44px;height:44px;min-width:44px;
  border-radius:12px;
  display:grid;place-items:center;
  background:rgba(10,10,10,.06);
  color:var(--text);
  flex-shrink:0;
  transition:background var(--t-med), color var(--t-med), transform var(--t-med);
}
.card-svc__icon svg{width:22px;height:22px}
.card-svc:hover .card-svc__icon{transform:rotate(-6deg)}
.card-svc h3{
  font-size:19px;font-weight:600;letter-spacing:-0.02em;line-height:1.2;
  margin:0;
}
.card-svc p{
  font-size:13.5px;color:var(--text-muted);
  margin:0;line-height:1.5;flex:1;
}
.card-svc__cta{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:600;color:var(--text);
  margin-top:8px;
  transition:gap var(--t-fast), color var(--t-fast);
}
.card-svc__cta span{transition:transform var(--t-fast)}
.card-svc:hover .card-svc__cta{gap:12px;color:var(--accent)}
.card-svc:hover .card-svc__cta span{transform:translateX(2px)}

/* DARK variant */
.card-svc--dark{
  background:var(--bg-ink);color:#fff;border-color:transparent;
}
.card-svc--dark .card-svc__num{color:rgba(255,255,255,.5)}
.card-svc--dark .card-svc__icon{background:rgba(255,255,255,.12);color:#fff}
.card-svc--dark p{color:rgba(255,255,255,.65)}
.card-svc--dark .card-svc__cta{color:#fff}
.card-svc--dark:hover .card-svc__cta{color:var(--accent)}
.card-svc--dark:hover .card-svc__icon{background:var(--accent);color:#fff}

/* ACCENT (red) variant */
.card-svc--accent{
  background:linear-gradient(135deg, var(--accent) 0%, #a4042e 100%);
  color:#fff;border-color:transparent;
}
.card-svc--accent::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(circle at 85% 15%, rgba(255,255,255,.15), transparent 50%);
}
.card-svc--accent .card-svc__num{color:rgba(255,255,255,.55)}
.card-svc--accent .card-svc__icon{background:rgba(255,255,255,.18);color:#fff}
.card-svc--accent p{color:rgba(255,255,255,.78)}
.card-svc--accent .card-svc__cta{color:#fff}
.card-svc--accent:hover .card-svc__cta{color:#fff;gap:14px}
.card-svc--accent:hover .card-svc__icon{background:#fff;color:var(--accent)}

/* PHOTO variant — full clear photo at top, solid text block below */
.card-svc--photo{
  background:#fff !important;
  color:var(--text) !important;
  border:1px solid var(--line);
  padding:0;
  min-height:360px;
  display:flex;flex-direction:column;
  overflow:hidden;
  position:relative;
}
.card-svc--photo::before{
  content:"";display:block;
  height:180px;flex-shrink:0;
  background-image:var(--bg-img);
  background-size:cover;background-position:center;
  background-color:#1a1a1a;
  transition:transform .8s var(--ease-out);
}
.card-svc--photo::after{
  content:none !important;
}
.card-svc--photo:hover::before{transform:scale(1.05)}
.card-svc--photo:hover{border-color:transparent;box-shadow:var(--shadow-2)}

.card-svc--photo .card-svc__num{
  color:#fff !important;
  top:14px;right:18px;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
.card-svc--photo .card-svc__icon{
  position:absolute;top:14px;left:18px;
  background:rgba(255,255,255,.94) !important;
  color:var(--text) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  width:42px;height:42px;
  box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.card-svc--photo .card-svc__icon svg{width:20px;height:20px}

.card-svc--photo > h3{
  padding:18px 22px 4px;margin:0;
  color:var(--text) !important;
}
.card-svc--photo > p{
  padding:0 22px;margin:0 0 12px;
  color:var(--text-muted) !important;
  flex:1;
}
.card-svc--photo > .card-svc__cta{
  padding:0 22px 20px;margin-top:0;
  color:var(--text) !important;
}
.card-svc--photo:hover .card-svc__icon{background:var(--accent) !important;color:#fff !important}
.card-svc--photo:hover > .card-svc__cta{color:var(--accent) !important;gap:14px}
.services__hint{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--text-dim);
  padding:32px 0 0;
}

/* ---- Brand marquee ---- */
.brands{
  margin-top:48px;
  padding:22px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--surface);
  overflow:hidden;
  position:relative;
  mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.brands__track{
  display:flex;align-items:center;gap:32px;
  width:max-content;
  padding-left:max(var(--pad), 24px);
  padding-right:max(var(--pad), 24px);
  animation:marquee-bounce 36s ease-in-out infinite alternate;
}
.brands:hover .brands__track{animation-play-state:paused}
.brands__track > span{
  font-size:clamp(20px, 2vw + 10px, 32px);
  font-weight:600;letter-spacing:-0.02em;
  color:var(--text);
  white-space:nowrap;
  opacity:.55;
  transition:opacity var(--t-fast), color var(--t-fast);
}
.brands__track > span:hover{opacity:1;color:var(--accent)}
.brands__track > .brands__sep{
  opacity:.25;color:var(--text-dim);font-size:24px;
}
/* Bounce: 0 → (track_width - viewport_width), then alternate back.
   min(0px, ...) clamps to 0 if track fits viewport on very wide screens. */
@keyframes marquee-bounce{
  from{transform:translate3d(0, 0, 0)}
  to{transform:translate3d(min(0px, calc(100vw - 100%)), 0, 0)}
}
@media (prefers-reduced-motion: reduce){
  .brands__track{animation:none}
}

/* ---- Services bottom CTA ---- */
.services__ask{
  margin-top:36px;
  padding:clamp(24px, 3vw, 36px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-xl);
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;
}
.services__ask-text{flex:1 1 300px;min-width:0}
.services__ask-eyebrow{
  font-size:13px;font-weight:500;letter-spacing:.02em;
  color:var(--accent);
  margin:0 0 6px;
  text-transform:uppercase;
}
.services__ask h3{
  font-size:clamp(18px, 1.2vw + 10px, 22px);
  font-weight:600;letter-spacing:-0.01em;line-height:1.3;
  margin:0;
}
.phone-pill--lg{
  padding:14px 22px;font-size:16px;font-weight:700;
  letter-spacing:-0.01em;
  flex-shrink:0;
}
.phone-pill--lg .phone-pill__dot{width:9px;height:9px}

/* ===========================================================
   Stats
   =========================================================== */
.stats{background:var(--surface);position:relative}

.stats__scene{
  position:relative;margin:0 0 36px;
  border-radius:var(--radius-xl);overflow:hidden;
  aspect-ratio: 21 / 8;
  isolation:isolate;
}
.stats__scene img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--ease-out);
}
.stats__scene:hover img{transform:scale(1.04)}
.stats__scene::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg, rgba(10,10,10,.62) 0%, rgba(10,10,10,.3) 50%, rgba(10,10,10,.0) 80%);
}
.stats__scene figcaption{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:clamp(20px, 3vw, 36px);
  color:#fff;max-width:54ch;
}
.stats__scene-tag{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:.12em;
  padding:5px 10px;border-radius:999px;
  background:var(--accent);color:#fff;
  margin-bottom:14px;
}
.stats__scene figcaption p{
  margin:0;font-size:clamp(16px, 1.1vw + 8px, 22px);
  font-weight:500;line-height:1.35;letter-spacing:-0.01em;
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:40px;
}
.stat{
  position:relative;overflow:hidden;
  padding:28px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--line);
  display:flex;flex-direction:column;gap:16px;
  min-height:200px;
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.stat:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.stat__ico{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(10,10,10,.06);
  color:var(--text);
}
.stat__ico svg{width:22px;height:22px}
.stat__num{
  font-size:clamp(34px, 3.4vw + 8px, 58px);
  font-weight:700;letter-spacing:-0.04em;line-height:1;
  font-variant-numeric:tabular-nums;
  margin-top:auto;
}
.stat__label{font-size:13px;color:var(--text-muted);line-height:1.4}

/* Featured red card */
.stat--accent{
  background:linear-gradient(135deg, var(--accent) 0%, #a4042e 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 18px 40px -18px rgba(219,7,61,.55);
}
.stat--accent .stat__ico{background:rgba(255,255,255,.18);color:#fff}
.stat--accent .stat__label{color:rgba(255,255,255,.8)}
.stat--accent::after{
  content:"";position:absolute;top:-30%;right:-30%;
  width:90%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 60%);
  pointer-events:none;
}

/* Dark card */
.stat--dark{
  background:var(--bg-ink);color:#fff;border-color:transparent;
}
.stat--dark .stat__ico{background:rgba(255,255,255,.1);color:#fff}
.stat--dark .stat__label{color:rgba(255,255,255,.65)}
.stats__notes{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
}
.stats__notes article{
  padding:28px;
  background:#fff;border-radius:var(--radius-lg);
  display:flex;flex-direction:column;gap:14px;
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.stats__notes article:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.note-icon{
  width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(219,7,61,.08), rgba(219,7,61,.16));
  color:var(--accent);
}
.note-icon svg{width:22px;height:22px}
.stats__notes h3{font-size:18px;font-weight:600;margin:0}
.stats__notes p{font-size:14px;color:var(--text-muted);margin:0;line-height:1.55}

/* ===========================================================
   Reviews
   =========================================================== */
.reviews__scroller{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(320px, 380px);
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  margin:0 calc(var(--pad) * -1);
  padding:8px var(--pad);
}
.reviews__scroller::-webkit-scrollbar{display:none}
.quote{
  position:relative;
  scroll-snap-align:start;
  background:var(--surface);
  border-radius:var(--radius-lg);
  padding:28px 28px 24px;
  margin:0;
  display:flex;flex-direction:column;gap:18px;
  min-height:260px;
  transition:transform var(--t-med), box-shadow var(--t-med);
}
.quote::before{
  content:"\201C"; /* curly opening quote */
  position:absolute;top:-8px;right:24px;
  font-family:Georgia, "Times New Roman", serif;
  font-size:96px;line-height:1;color:var(--accent);opacity:.18;
  pointer-events:none;
}
.quote:hover{transform:translateY(-3px);box-shadow:var(--shadow-2)}
.quote__stars{color:#f5b400;font-size:14px;letter-spacing:2px;line-height:1}
.quote blockquote{
  margin:0;font-size:17px;line-height:1.5;letter-spacing:-0.005em;
  color:var(--text);flex:1;
}
.quote figcaption{
  display:flex;align-items:center;gap:12px;
  margin-top:auto;
  font-size:13px;color:var(--text-muted);
}
.avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--c1, #eee) 0%, var(--c2, #ccc) 100%);
  color:#fff;
  font-weight:600;font-size:15px;
  text-shadow:0 1px 2px rgba(0,0,0,.15);
  flex-shrink:0;
}
.quote__who{display:flex;flex-direction:column;line-height:1.2}
.quote__who b{color:var(--text);font-weight:600;font-size:14px;letter-spacing:-0.005em}
.quote__who span{font-size:12px;color:var(--text-dim)}

/* ===========================================================
   CTA / Contact
   =========================================================== */
.cta{
  background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 100%);
  color:#fff;
  position:relative;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 30% 20%, rgba(219,7,61,.18), transparent 50%),
             radial-gradient(circle at 80% 90%, rgba(219,7,61,.12), transparent 60%);
  pointer-events:none;
}
.cta__inner{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center}
.cta__title{
  font-size:clamp(32px, 4.6vw, 64px);
  font-weight:700;letter-spacing:-0.03em;line-height:1.05;
  max-width:18ch;margin:0 0 18px;
}
.cta__lede{font-size:18px;color:rgba(255,255,255,.7);margin:0 0 40px;max-width:46ch}
.cta .callback{margin-bottom:60px;width:100%;max-width:520px}
.cta__contacts{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:24px;
  width:100%;max-width:760px;
  border-top:1px solid rgba(255,255,255,.1);padding-top:40px;
}
.cta__contacts a{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  padding:8px 0;
  transition:transform var(--t-fast);
}
.cta__contacts a:hover{transform:translateY(-2px)}
.cta__label{font-size:12px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em}
.cta__value{font-size:16px;font-weight:500}

/* ===========================================================
   Footer
   =========================================================== */
.site-footer{
  background:#0a0a0a;color:#fff;padding:60px 0 30px;
  position:relative;
  border-top:3px solid var(--accent);
}
.site-footer__row{display:grid;grid-template-columns:auto 1fr;gap:60px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.site-footer__brand{display:flex;align-items:center;gap:12px;font-weight:600}
.site-footer__brand .muted{color:rgba(255,255,255,.4);font-weight:400;font-size:13px}
.site-footer__cols{display:grid;grid-template-columns:repeat(3, 1fr);gap:32px}
.site-footer__cols h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5);margin:0 0 18px;font-weight:600}
.site-footer__cols a{display:block;font-size:14px;color:rgba(255,255,255,.8);padding:5px 0;transition:color var(--t-fast)}
.site-footer__cols a:hover{color:#fff}
.site-footer__cols .muted{color:rgba(255,255,255,.4);font-size:13px;display:block;padding:5px 0}
.site-footer__legal{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:24px;font-size:13px;color:rgba(255,255,255,.5);
}
.site-footer__legal a{color:rgba(255,255,255,.7);text-decoration:underline}

/* ===========================================================
   Custom cursor (desktop only)
   =========================================================== */
.cursor{
  position:fixed;top:0;left:0;
  width:28px;height:28px;border-radius:50%;
  background:rgba(10,10,10,.08);
  border:1px solid rgba(10,10,10,.18);
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  transition:width var(--t-fast), height var(--t-fast), background var(--t-fast);
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  body.cursor-on-link .cursor{
    width:56px;height:56px;
    background:rgba(219,7,61,.2);
    border-color:transparent;
  }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 1024px){
  .nav{display:none}
  .nav-toggle{display:flex}
  .header-row{grid-template-columns:auto 1fr auto}
  .hero__inner{grid-template-columns:1fr}
  .hero__art{order:-1;max-width:480px;margin:0 auto}
  .tiles__grid{grid-template-columns:repeat(2, 1fr)}
  .tile{grid-column:span 1}
  .tile--feature{grid-column:span 2;min-height:340px}
  .stats__grid{grid-template-columns:repeat(2, 1fr)}
  .stats__notes{grid-template-columns:1fr}
  .site-footer__row{grid-template-columns:1fr;gap:32px}
  .site-footer__cols{grid-template-columns:repeat(2,1fr)}
  .cta__contacts{grid-template-columns:1fr;text-align:center}
  .cta__contacts a{align-items:center;text-align:center}
}
@media (max-width: 640px){
  /* На мобилке номер прячем, но кнопка превращается в яркий CTA-таргет
     с иконкой телефона — понятно, что тапабельно и куда ведёт. */
  .site-header .phone-pill span:last-child,
  .site-header .phone-pill .phone-pill__dot{display:none}
  .site-header .phone-pill{
    width:40px;height:40px;padding:0;
    justify-content:center;
    background:var(--accent);
    box-shadow:0 6px 18px -6px rgba(219,7,61,.7);
  }
  .site-header .phone-pill::after{
    content:"";
    width:18px;height:18px;
    background-color:#fff;
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>") center/contain no-repeat;
  }
  .callback__fields{grid-template-columns:1fr}
  .tiles__grid{grid-template-columns:1fr;gap:14px}
  .tile--feature{grid-column:span 1;min-height:auto}
  .hero__meta{flex-direction:column;gap:18px}
  .hero__meta li{flex-direction:row;align-items:baseline;gap:12px}
  .stats__grid{grid-template-columns:1fr}
  .site-footer__cols{grid-template-columns:1fr}
  .site-footer__legal{flex-direction:column;gap:8px;text-align:center}
  .card-svc{flex-basis:280px}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{opacity:1;transform:none}
  [data-split] .word > span{transform:none}
}