/* ЙОБА - дизайн-система магазина.
   Светлая база с глубиной: тёплые нейтрали, стеклянные поверхности, живой
   градиентный фон в герое и слой движения (появление по скроллу, микро-отклик
   на наведение и нажатие). Всё движение выключается одним медиазапросом в
   самом низу - для тех, кто просил у системы меньше анимаций.
   Тема одна, светлая: color-scheme фиксируем, чтобы браузер не перекрашивал
   поля ввода в тёмной системной теме. */

:root{
  color-scheme:light;

  /* поверхности */
  --bg:#FBFAF9;
  --bg-2:#F5F3F0;
  --surface:#FFFFFF;
  --surface-2:#F6F5F2;
  --surface-3:#EDEBE7;
  --glass:rgba(255,255,255,.9);

  /* текст */
  --ink:#0F0E0C;
  --ink-2:#57554E;
  --muted:#8B8880;

  /* линии */
  --line:#E9E7E2;
  --line-2:#DCD9D2;
  --line-3:#C9C5BC;

  /* акцент */
  --accent:#F04E23;
  --accent-2:#FF7A2F;
  --accent-3:#FFB020;
  --accent-deep:#C93A12;
  --accent-ink:#A83109;
  --accent-soft:#FFF1EA;
  --accent-line:#FBD0BB;
  --grad:linear-gradient(135deg,#FF7A2F 0%,#F04E23 55%,#DC3C12 100%);
  --grad-soft:linear-gradient(135deg,#FFF6F0 0%,#FFEFE6 100%);

  /* статусы */
  --ok:#14683A;
  --ok-soft:#EBF7F0;
  --ok-line:#BFE3CE;
  --err:#B02419;
  --err-soft:#FEF1EF;
  --err-line:#F3C9C3;
  --warn:#8A6410;
  --warn-soft:#FEF7E7;
  --warn-line:#EEDCB2;

  /* радиусы */
  --r-xs:8px;
  --r-sm:10px;
  --r:14px;
  --r-lg:18px;
  --r-xl:26px;
  --r-pill:999px;

  /* тени: слоями, чтобы карточка «стояла» на фоне, а не была наклеена */
  --sh-xs:0 1px 2px rgba(15,14,12,.05);
  --sh-sm:0 1px 2px rgba(15,14,12,.04), 0 2px 6px rgba(15,14,12,.04);
  --sh:0 1px 2px rgba(15,14,12,.04), 0 6px 16px rgba(15,14,12,.06), 0 12px 32px rgba(15,14,12,.04);
  --sh-lg:0 2px 4px rgba(15,14,12,.04), 0 12px 28px rgba(15,14,12,.08), 0 32px 64px rgba(15,14,12,.08);
  --sh-accent:0 4px 12px rgba(240,78,35,.24), 0 12px 28px rgba(240,78,35,.18);
  --ring:0 0 0 3px rgba(240,78,35,.16);

  /* движение */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
  --e-io:cubic-bezier(.4,0,.2,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.6s;

  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --header-h:4rem;
}

*{ box-sizing:border-box; }
/* .sup-panel и .sup-badge задают display:flex и перебивали бы браузерное правило. */
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs); }

.wrap{ width:100%; max-width:75rem; margin:0 auto; padding:0 1.5rem; }
.num{ font-variant-numeric:tabular-nums; }

/* ============ слой появления ============ */
/* Элемент с data-reveal ждёт своей очереди в наблюдателе (motion.js) и
   выезжает снизу. Задержку внутри группы задаёт --d, чтобы плитки
   появлялись каскадом, а не все разом.
   Прятать умеет только класс .motion на <html>, который ставит сам motion.js:
   если скрипт не загрузился или упал, витрина остаётся видимой, просто без
   анимации. Скрытый по умолчанию каталог - слишком дорогая цена за эффект. */
.motion [data-reveal]{
  opacity:0; transform:translateY(16px);
  transition:opacity .55s var(--e-out), transform .55s var(--e-out);
  transition-delay:var(--d,0ms);
  will-change:opacity,transform;
}
.motion [data-reveal].is-in{ opacity:1; transform:none; }
.motion [data-reveal="scale"]{ transform:translateY(16px) scale(.97); }
.motion [data-reveal="scale"].is-in{ transform:none; }

/* Смена экрана: содержимое #view проявляется после перерисовки. */
#catalog{ scroll-margin-top:calc(var(--header-h) + 1rem); }
#view.view-swap{ animation:view-in .42s var(--e-out) both; }
@keyframes view-in{ from{ opacity:0; transform:translateY(10px); } }

/* ============ шапка ============ */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,249,.7);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--e-io), background var(--t) var(--e-io),
             box-shadow var(--t) var(--e-io);
}
header.site.is-stuck{
  border-bottom-color:var(--line);
  background:rgba(251,250,249,.88);
  box-shadow:0 1px 20px rgba(15,14,12,.05);
}
.header-in{ display:flex; align-items:center; gap:.75rem; height:var(--header-h); }

.wordmark{
  display:inline-flex; align-items:center; gap:.6rem;
  font-weight:660; font-size:1.05rem; letter-spacing:-.02em; color:var(--ink);
}
.wordmark .mark{
  position:relative; width:1.85rem; height:1.85rem; border-radius:var(--r-xs);
  background:var(--grad); color:#fff;
  display:grid; place-items:center;
  font-size:.85rem; font-weight:700; letter-spacing:0;
  box-shadow:0 2px 8px rgba(240,78,35,.32);
  transition:transform var(--t) var(--e-spring), box-shadow var(--t) var(--e-out);
}
.wordmark:hover .mark{ transform:rotate(-6deg) scale(1.06); box-shadow:0 4px 14px rgba(240,78,35,.4); }
.wordmark small{ font-size:.74rem; font-weight:450; color:var(--muted); letter-spacing:0; }
.header-spacer{ flex:1; }
.header-nav{ display:flex; align-items:center; gap:.3rem; }

.chip{
  position:relative; display:inline-flex; align-items:center; gap:.4rem;
  font-size:.88rem; font-weight:500; color:var(--ink-2);
  border:1px solid transparent; border-radius:var(--r-sm);
  padding:.45rem .75rem; background:transparent; cursor:pointer;
  transition:background var(--t-fast) var(--e-io), color var(--t-fast) var(--e-io),
             border-color var(--t-fast) var(--e-io), transform var(--t-fast) var(--e-out);
}
.chip:hover{ background:var(--surface-2); color:var(--ink); }
.chip:active{ transform:scale(.97); }
.chip.accent{
  background:var(--surface); color:var(--ink);
  border-color:var(--line-2); box-shadow:var(--sh-xs);
}
.chip.accent:hover{ border-color:var(--line-3); box-shadow:var(--sh-sm); }
/* Зелёная точка «оператор на связи» - живой сигнал, а не просто иконка. */
.chip .live{
  width:.45rem; height:.45rem; border-radius:50%; background:#22A45D; flex:none;
  box-shadow:0 0 0 0 rgba(34,164,93,.5); animation:live 2.4s var(--e-io) infinite;
}
@keyframes live{
  0%{ box-shadow:0 0 0 0 rgba(34,164,93,.5); }
  70%{ box-shadow:0 0 0 .4rem rgba(34,164,93,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,164,93,0); }
}

/* ============ герой ============ */
.hero{ position:relative; padding:4.5rem 0 3rem; }
.hero-bg{
  position:absolute; inset:-8rem 0 -4rem; z-index:-1; overflow:hidden;
  pointer-events:none;
}
/* Пятна медленно дышат - фон живой, но ничего не мигает и не отвлекает. */
.blob{
  position:absolute; border-radius:50%; filter:blur(64px); opacity:.9;
  will-change:transform;
}
.blob.b1{
  width:34rem; height:34rem; left:-8rem; top:-6rem;
  background:radial-gradient(circle,rgba(255,122,47,.42),rgba(255,122,47,0) 68%);
  animation:drift1 22s var(--e-io) infinite alternate;
}
.blob.b2{
  width:30rem; height:30rem; right:-6rem; top:-10rem;
  background:radial-gradient(circle,rgba(255,176,32,.42),rgba(255,176,32,0) 68%);
  animation:drift2 26s var(--e-io) infinite alternate;
}
.blob.b3{
  width:26rem; height:26rem; left:38%; bottom:-12rem;
  background:radial-gradient(circle,rgba(255,90,120,.3),rgba(255,90,120,0) 68%);
  animation:drift3 30s var(--e-io) infinite alternate;
}
@keyframes drift1{ to{ transform:translate3d(5rem,3rem,0) scale(1.12); } }
@keyframes drift2{ to{ transform:translate3d(-4rem,4rem,0) scale(1.08); } }
@keyframes drift3{ to{ transform:translate3d(3rem,-3rem,0) scale(1.15); } }
/* Тонкая сетка поверх пятен: даёт фактуру и «съедает» банальность градиента. */
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(15,14,12,.06) 1px, transparent 0);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);
  mask-image:radial-gradient(70% 60% at 50% 30%,#000,transparent);
}

.hero-in{ max-width:46rem; }
/* Справа от текста - живая стопка обложек: показывает товар до прокрутки и
   закрывает пустоту, которая на широком экране висела рядом с заголовком. */
.hero-grid{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; }
@media (min-width:1080px){
  .hero-grid{ grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:3rem; }
  .hero-in{ max-width:none; }
}
.hero-art{ position:relative; display:none; height:24rem; }
@media (min-width:1080px){ .hero-art{ display:block; } }
.hero-card{
  position:absolute; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-lg);
  will-change:transform;
}
.hero-card img{ width:100%; aspect-ratio:16/9; object-fit:cover; }
.hero-card .hc-body{
  padding:.7rem .9rem .8rem; display:flex; align-items:center;
  justify-content:space-between; gap:.6rem;
}
.hero-card .hc-name{ font-size:.9rem; font-weight:620; letter-spacing:-.012em; }
.hero-card .hc-price{ font-size:.84rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
/* Композиция вместо плотной стопки: крупная карточка спереди, вторая уходит
   за неё вверх-вправо, снизу - плашка с исходом заказа. Ничего не режет
   картинку пополам, и сразу видно, чем всё заканчивается. */
.hero-card.lead{
  width:21rem; left:1.5rem; top:4.5rem; z-index:2;
  transform:rotate(-4deg); animation:float1 9s var(--e-io) infinite alternate;
}
.hero-card.back{
  width:15.5rem; right:0; top:0; z-index:1; opacity:.96;
  transform:rotate(7deg); animation:float2 11s var(--e-io) infinite alternate;
}
@keyframes float1{ to{ transform:rotate(-2.5deg) translateY(-.9rem); } }
@keyframes float2{ to{ transform:rotate(9deg) translateY(.9rem); } }
@keyframes float3{ to{ transform:rotate(-1deg) translateY(-.6rem); } }

.hero-done{
  position:absolute; left:0; bottom:.5rem; z-index:3;
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .9rem; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-lg);
  transform:rotate(-2deg); animation:float3 10s var(--e-io) infinite alternate;
}
.hero-done .hd-tick{
  width:1.6rem; height:1.6rem; border-radius:50%; flex:none;
  background:var(--ok-soft); color:var(--ok); border:1px solid var(--ok-line);
  display:grid; place-items:center; font-size:.8rem; font-weight:700;
}
.hero-done b{ display:block; font-size:.86rem; font-weight:620; letter-spacing:-.012em; }
.hero-done span{ font-size:.76rem; color:var(--muted); }
.hero h1{
  margin:0 0 1.1rem;
  font-size:clamp(2.4rem,6vw,4.25rem);
  line-height:1.02; letter-spacing:-.042em; font-weight:660;
  text-wrap:balance;
}
/* Акцент в заголовке - градиентом по тексту, с подчёркиванием-мазком. */
.hero h1 em{
  position:relative; font-style:normal;
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.09em;
  border-radius:var(--r-pill); background:var(--grad); opacity:.22;
  transform-origin:left; transform:scaleX(0);
  animation:swipe .8s .35s var(--e-out) forwards;
}
@keyframes swipe{ to{ transform:scaleX(1); } }

.hero .lede{
  margin:0; color:var(--ink-2); font-size:clamp(1.02rem,1.6vw,1.16rem);
  line-height:1.6; max-width:36rem;
}
.hero .lede b{ color:var(--ink); font-weight:600; }
.hero-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem; }

.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.79rem; font-weight:500; letter-spacing:.005em;
  color:var(--accent-ink); background:var(--surface);
  border:1px solid var(--accent-line); border-radius:var(--r-pill);
  padding:.34rem .8rem; margin:0 0 1.35rem;
  box-shadow:var(--sh-xs);
}
.kicker::before{
  content:""; width:.42rem; height:.42rem; border-radius:50%;
  background:var(--accent); flex:none;
  box-shadow:0 0 0 0 rgba(240,78,35,.45); animation:live 2.6s var(--e-io) infinite;
}

/* Показатели под героем: цифры набегают счётчиком (motion.js). */
.stats{
  display:flex; flex-wrap:wrap; gap:2.5rem; margin:2.75rem 0 0; padding:0; list-style:none;
}
.stats li{ display:flex; flex-direction:column; gap:.1rem; }
.stats b{
  font-size:clamp(1.5rem,3vw,2rem); font-weight:660; letter-spacing:-.035em;
  line-height:1.1; font-variant-numeric:tabular-nums;
}
.stats span{ font-size:.83rem; color:var(--muted); }

/* ============ бегущая строка сервисов ============ */
.ticker{
  position:relative; margin:1.5rem 0 0; padding:1rem 0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--surface); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.ticker-row{ display:flex; gap:2.75rem; width:max-content; animation:ticker 42s linear infinite; }
.ticker:hover .ticker-row{ animation-play-state:paused; }
.ticker-row span{
  font-size:.92rem; font-weight:500; color:var(--ink-2); white-space:nowrap;
  display:inline-flex; align-items:center; gap:.55rem;
}
.ticker-row span::before{
  content:""; width:.3rem; height:.3rem; border-radius:50%; background:var(--line-3);
}
@keyframes ticker{ to{ transform:translateX(-50%); } }

/* ============ навигация по разделам ============ */
/* Бегунок под активной вкладкой едет между кнопками (motion.js), поэтому сами
   вкладки прозрачные - подсветку рисует один общий элемент. */
.tabs{
  position:sticky; top:var(--header-h); z-index:30;
  display:flex; gap:.15rem; flex-wrap:wrap; align-items:center;
  padding:.9rem 0 1.4rem; margin:0;
  background:linear-gradient(var(--bg) 68%, rgba(251,250,249,0));
}
.tabs-in{
  position:relative; display:flex; gap:.15rem; flex-wrap:wrap;
  padding:.28rem; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--sh-xs);
}
.tab-ind{
  position:absolute; top:.28rem; left:0; height:calc(100% - .56rem);
  border-radius:var(--r-pill); background:var(--ink); z-index:0;
  transition:transform .42s var(--e-out), width .42s var(--e-out), opacity var(--t) var(--e-io);
  opacity:0;
}
.tab{
  position:relative; z-index:1;
  font-size:.88rem; font-weight:500; color:var(--ink-2);
  border:0; border-radius:var(--r-pill);
  padding:.45rem .95rem; background:transparent; cursor:pointer;
  white-space:nowrap;
  transition:color var(--t) var(--e-io);
}
.tab:hover{ color:var(--ink); }
.tab[aria-selected="true"]{ color:#fff; font-weight:550; }

/* ============ секции ============ */
.section{ padding-bottom:4rem; scroll-margin-top:calc(var(--header-h) + 4.5rem); }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; margin-bottom:1.5rem; }
.section h2{
  margin:0 0 .3rem;
  font-size:clamp(1.35rem,2.6vw,1.7rem); font-weight:640; letter-spacing:-.028em;
}
.section .sub{ margin:0; color:var(--ink-2); font-size:.94rem; max-width:44rem; }
.section-count{
  flex:none; font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.22rem .7rem;
  background:var(--surface);
}

.grid{
  display:grid; gap:1.1rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}

/* ============ карточка товара ============ */
.card{
  position:relative; display:flex; flex-direction:column; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; color:inherit;
  box-shadow:var(--sh-xs);
  transition:transform .38s var(--e-out), box-shadow .38s var(--e-out),
             border-color var(--t) var(--e-io);
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); border-color:var(--line-2); }
.card:active{ transform:translateY(-2px); transition-duration:.1s; }

/* Картинки в bot/pics - 1700x954, ровно 16:9: влезают без обрезки. */
.card-media{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  background:var(--surface-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--e-out);
}
.card:hover .card-media img{ transform:scale(1.07); }
/* Блик проезжает по обложке при наведении. */
.card-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.42) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .85s var(--e-out);
}
.card:hover .card-media::after{ transform:translateX(120%); }

/* Плашка для сервисов без картинки - в фирменных тёплых тонах. */
.ph{
  flex-direction:column; gap:.35rem; text-align:center; padding:1rem;
  background:var(--grad-soft); color:var(--ink);
}
.ph-emoji{ font-size:1.6rem; line-height:1; }
.ph-title{
  font-weight:640; letter-spacing:-.025em; line-height:1.1;
  font-size:clamp(1.05rem,3vw,1.45rem);
}
.ph-sub{ font-size:.7rem; color:var(--accent-ink); opacity:.7; letter-spacing:.02em; }

.card-body{ padding:1rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.card-body h3{ margin:0; font-size:1rem; font-weight:620; letter-spacing:-.015em; }
.card-body p{ margin:0; font-size:.86rem; color:var(--ink-2); line-height:1.45; }
.card-foot{
  margin-top:auto; padding-top:.85rem; display:flex; align-items:center;
  justify-content:space-between; gap:.5rem;
}
.card-price{ font-size:.85rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.card-price b{ font-size:1.06rem; font-weight:640; color:var(--ink); letter-spacing:-.02em; }
.card-go{
  flex:none; width:1.75rem; height:1.75rem; border-radius:50%;
  background:var(--surface-2); color:var(--ink-2);
  display:grid; place-items:center; font-size:.85rem;
  transition:background var(--t) var(--e-io), color var(--t) var(--e-io),
             transform var(--t) var(--e-spring);
}
.card:hover .card-go{ background:var(--accent); color:#fff; transform:translateX(2px) scale(1.08); }

.pill{
  display:inline-flex; align-items:center; gap:.3rem; align-self:flex-start;
  font-size:.72rem; font-weight:500; letter-spacing:.005em;
  border-radius:var(--r-pill); padding:.14rem .55rem;
  color:var(--ok); background:var(--ok-soft); border:1px solid var(--ok-line);
}
/* Бейдж уезжает на обложку: в теле карточки он сдвигал заголовок вниз только
   у части товаров, и ряд переставал стоять на одной линии. */
.card-media .pill{
  position:absolute; top:.6rem; left:.6rem; z-index:2;
  background:rgba(255,255,255,.92); border-color:rgba(255,255,255,.65);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:var(--sh-xs);
  transition:transform var(--t) var(--e-spring);
}
.card:hover .card-media .pill{ transform:translateY(-2px); }
.pill.neutral{ color:var(--ink-2); background:var(--surface-2); border-color:var(--line-2); }
.pill.warn{ color:var(--warn); background:var(--warn-soft); border-color:var(--warn-line); }
.pill.err{ color:var(--err); background:var(--err-soft); border-color:var(--err-line); }

/* ============ плашки-действия ============ */
.actions{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(23rem,1fr)); }
.action{
  position:relative; display:flex; align-items:flex-start; gap:1.1rem; text-align:left;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.3rem 1.4rem; color:inherit; overflow:hidden;
  box-shadow:var(--sh-xs);
  transition:transform .38s var(--e-out), box-shadow .38s var(--e-out),
             border-color var(--t) var(--e-io);
}
.action::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(22rem 12rem at 12% 0%,rgba(255,122,47,.1),transparent 70%);
  transition:opacity .4s var(--e-io);
}
.action:hover{ transform:translateY(-4px); box-shadow:var(--sh); border-color:var(--accent-line); }
.action:hover::before{ opacity:1; }
.action-icon{
  position:relative; flex:none; width:3rem; height:3rem; border-radius:var(--r);
  background:var(--grad-soft); border:1px solid var(--accent-line);
  display:grid; place-items:center; font-size:1.4rem; line-height:1;
  transition:transform var(--t) var(--e-spring);
}
.action:hover .action-icon{ transform:scale(1.08) rotate(-4deg); }
.action-body{ position:relative; display:flex; flex-direction:column; gap:.28rem; flex:1; min-width:0; }
.action-title{ font-size:1rem; font-weight:620; letter-spacing:-.015em; }
.action-text{ font-size:.88rem; color:var(--ink-2); line-height:1.5; }
.action-note{
  margin-top:.4rem; font-size:.86rem; font-weight:600; color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.action-arrow{
  position:relative; flex:none; color:var(--muted); font-size:1.05rem; line-height:3rem;
  transition:transform var(--t) var(--e-out), color var(--t) var(--e-io);
}
.action:hover .action-arrow{ color:var(--accent); transform:translateX(4px); }

/* ============ страница товара ============ */
.back{
  display:inline-flex; align-items:center; gap:.45rem; margin:1.75rem 0 0;
  font-size:.88rem; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.4rem .8rem .4rem .6rem;
  background:var(--surface); cursor:pointer; box-shadow:var(--sh-xs);
  transition:border-color var(--t) var(--e-io), color var(--t) var(--e-io),
             transform var(--t) var(--e-out);
}
.back:hover{ border-color:var(--line-3); color:var(--ink); transform:translateX(-3px); }
.back span{ transition:transform var(--t) var(--e-out); }
.back:hover span{ transform:translateX(-2px); }

.product-head{
  display:grid; grid-template-columns:minmax(0,22rem) 1fr; gap:2.5rem;
  align-items:center; margin:2rem 0 2.75rem;
}
.product-head .shot{
  position:relative; border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden;
  background:var(--surface-2); box-shadow:var(--sh-lg);
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
}
.product-head .shot img{ width:100%; height:100%; object-fit:cover; }
.product-head .shot.ph .ph-title{ font-size:clamp(1.3rem,3.4vw,1.9rem); }
.product-head h1{
  margin:0 0 .6rem; font-size:clamp(1.8rem,4vw,2.7rem);
  font-weight:660; letter-spacing:-.038em; line-height:1.08; text-wrap:balance;
}
.product-head .lede{ margin:0 0 1.1rem; color:var(--ink-2); font-size:1.04rem; }

.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.facts li{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.84rem; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.34rem .8rem;
  box-shadow:var(--sh-xs);
}
.facts li b{ color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.facts li i{ font-style:normal; opacity:.65; }

/* тарифы */
.block-title{
  margin:0 0 .9rem; font-size:.78rem; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted);
}
.plan-grid{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); }
.plan{
  position:relative; text-align:left; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.2rem 1.25rem;
  cursor:pointer; color:inherit; font:inherit; overflow:hidden;
  display:flex; flex-direction:column; gap:.35rem;
  box-shadow:var(--sh-xs);
  transition:border-color var(--t) var(--e-io), box-shadow var(--t) var(--e-out),
             transform var(--t) var(--e-out), background var(--t) var(--e-io);
}
.plan:hover{ border-color:var(--line-3); box-shadow:var(--sh); transform:translateY(-3px); }
.plan[aria-selected="true"]{
  border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring),var(--sh);
}
.plan-check{
  position:absolute; top:.9rem; right:1rem;
  width:1.35rem; height:1.35rem; border-radius:50%;
  border:1.5px solid var(--line-2); background:var(--surface);
  display:grid; place-items:center; color:#fff; font-size:.72rem; font-weight:700;
  transition:background var(--t) var(--e-spring), border-color var(--t) var(--e-io),
             transform var(--t) var(--e-spring);
}
.plan-check::after{ content:"✓"; opacity:0; transform:scale(.4); transition:opacity var(--t), transform var(--t) var(--e-spring); }
.plan[aria-selected="true"] .plan-check{ background:var(--accent); border-color:var(--accent); transform:scale(1.06); }
.plan[aria-selected="true"] .plan-check::after{ opacity:1; transform:none; }
.plan .plan-title{ font-size:1rem; font-weight:620; padding-right:1.9rem; letter-spacing:-.015em; }
.plan .desc{ font-size:.87rem; color:var(--ink-2); flex:1; line-height:1.45; }
.plan .price{
  margin-top:.5rem; display:block; font-size:1.3rem; font-weight:660; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}

/* пополнения */
.region-row{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1.35rem; }
.region{
  font-size:.88rem; font-weight:500; color:var(--ink-2);
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.42rem .9rem; background:var(--surface); cursor:pointer;
  box-shadow:var(--sh-xs);
  transition:border-color var(--t) var(--e-io), color var(--t) var(--e-io),
             background var(--t) var(--e-io), transform var(--t-fast) var(--e-out);
}
.region:hover{ border-color:var(--line-3); color:var(--ink); }
.region:active{ transform:scale(.97); }
.region[aria-selected="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; font-weight:550; }

.amount-grid{ display:grid; gap:.65rem; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); }
.amount{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  padding:.8rem .55rem; cursor:pointer; font:inherit; color:inherit; text-align:center;
  box-shadow:var(--sh-xs);
  transition:border-color var(--t) var(--e-io), background var(--t) var(--e-io),
             box-shadow var(--t) var(--e-out), transform var(--t) var(--e-out);
}
.amount:hover{ border-color:var(--line-3); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.amount[aria-selected="true"]{ border-color:var(--accent); background:var(--accent-soft); box-shadow:var(--ring); }
.amount b{ display:block; font-size:1.02rem; font-weight:620; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.amount span{ font-size:.82rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* ============ панели и формы ============ */
.panel{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:1.75rem; box-shadow:var(--sh); margin:2.25rem 0 3rem;
}
.panel h2{ margin:0 0 .3rem; font-size:1.15rem; font-weight:640; letter-spacing:-.022em; }
.panel .hint{ margin:0 0 1.5rem; color:var(--ink-2); font-size:.9rem; }

.field{ margin-bottom:1.2rem; }
.field:last-child{ margin-bottom:0; }
.field label{ display:block; font-weight:550; font-size:.88rem; margin-bottom:.45rem; color:var(--ink); }
.field label .opt{ font-weight:400; color:var(--muted); }
.field .help{ font-size:.82rem; color:var(--muted); margin:.45rem 0 0; line-height:1.45; }
.field .help.ok{ color:var(--ok); }
.field .help.err{ color:var(--err); }

input[type=text], input[type=email], input[type=number], textarea, select{
  width:100%; font:inherit; font-size:.95rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:.68rem .8rem;
  transition:border-color var(--t-fast) var(--e-io), box-shadow var(--t-fast) var(--e-io),
             background var(--t-fast) var(--e-io);
}
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:hover, textarea:hover{ border-color:var(--line-3); }
input:focus, textarea:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
textarea{ min-height:6.5rem; resize:vertical; line-height:1.5; }

.row{ display:flex; gap:.7rem; align-items:flex-start; }
.row > *{ flex:1; }
.row > .fit{ flex:none; }

/* ============ кнопки ============ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:inherit; font-weight:560; font-size:.96rem; line-height:1.2;
  color:#fff; background:var(--grad); border:0;
  border-radius:var(--r-sm); padding:.78rem 1.4rem; cursor:pointer;
  box-shadow:var(--sh-accent); white-space:nowrap; overflow:hidden;
  transition:transform var(--t) var(--e-out), box-shadow var(--t) var(--e-out), filter var(--t) var(--e-io);
}
/* Блик пробегает по кнопке при наведении - «живая», но без мигания. */
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.3) 50%,transparent 65%);
  transform:translateX(-120%);
  transition:transform .8s var(--e-out);
}
.btn:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 6px 18px rgba(240,78,35,.3), 0 16px 36px rgba(240,78,35,.22); }
.btn:hover:not(:disabled)::after{ transform:translateX(120%); }
.btn:active:not(:disabled){ transform:translateY(0) scale(.985); transition-duration:.09s; }
.btn:disabled{ filter:grayscale(.35) opacity(.5); cursor:not-allowed; box-shadow:none; }
.btn.secondary{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-2); box-shadow:var(--sh-xs);
}
.btn.secondary:hover:not(:disabled){ background:var(--surface-2); border-color:var(--line-3); box-shadow:var(--sh-sm); transform:translateY(-2px); }
.btn.secondary::after{ display:none; }
.btn.small{ font-size:.88rem; padding:.6rem 1rem; }
.btn.lg{ font-size:1.02rem; padding:.9rem 1.7rem; border-radius:var(--r); }
/* Кружок ожидания вместо смены текста - кнопка не «прыгает» шириной. */
.btn.is-busy{ pointer-events:none; }
.btn.is-busy .btn-label{ opacity:.35; }
.btn.is-busy::before{
  content:""; position:absolute; width:1.05rem; height:1.05rem; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .7s linear infinite; z-index:1;
}
.btn.secondary.is-busy::before{ border-color:rgba(15,14,12,.2); border-top-color:var(--ink); }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Волна от точки нажатия - её рисует motion.js. */
.ripple{
  position:absolute; border-radius:50%; transform:scale(0); pointer-events:none;
  background:rgba(255,255,255,.4); animation:ripple .6s var(--e-out) forwards;
}
.btn.secondary .ripple, .chip .ripple{ background:rgba(15,14,12,.09); }
@keyframes ripple{ to{ transform:scale(2.6); opacity:0; } }

/* ============ итог заказа ============ */
.total{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  border-top:1px solid var(--line); margin-top:1.6rem; padding-top:1.5rem;
  flex-wrap:wrap;
}
.total .quote-title{ font-size:.87rem; color:var(--ink-2); margin-bottom:.15rem; }
.total .sum{
  font-size:2.1rem; font-weight:660; letter-spacing:-.04em; line-height:1.12;
  font-variant-numeric:tabular-nums;
  transition:opacity .2s var(--e-io);
}
.total .sum.is-updating{ opacity:.4; }
.total .sum.empty{ color:var(--muted); font-weight:450; letter-spacing:0; }
.total .was{
  font-size:1.05rem; color:var(--muted); text-decoration:line-through;
  margin-right:.55rem; font-weight:400; letter-spacing:0;
}
.total .save{
  display:inline-flex; align-items:center; gap:.3rem; margin-top:.3rem;
  color:var(--ok); font-weight:550; font-size:.84rem;
  background:var(--ok-soft); border:1px solid var(--ok-line);
  border-radius:var(--r-pill); padding:.1rem .55rem;
  animation:pop .4s var(--e-spring) both;
}
@keyframes pop{ from{ opacity:0; transform:scale(.8); } }

/* Плавающая полоса оплаты на телефоне: итог всегда под рукой. */
.paybar{
  position:fixed; left:0; right:0; bottom:0; z-index:55;
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem 1.1rem calc(.7rem + env(safe-area-inset-bottom));
  background:var(--glass); border-top:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 -4px 24px rgba(15,14,12,.07);
  transform:translateY(110%);
  transition:transform .42s var(--e-out);
}
.paybar.is-on{ transform:none; }
.paybar .pb-sum{ font-size:1.15rem; font-weight:640; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.paybar .pb-label{ font-size:.75rem; color:var(--muted); }

/* ============ уведомления ============ */
.notice{
  display:flex; gap:.7rem; align-items:flex-start;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:var(--r); padding:.9rem 1.1rem;
  font-size:.9rem; margin:0 0 1.35rem; line-height:1.5;
  box-shadow:var(--sh-xs);
  animation:notice-in .4s var(--e-out) both;
}
@keyframes notice-in{ from{ opacity:0; transform:translateY(-6px); } }
.notice::before{ content:"i"; flex:none; width:1.15rem; height:1.15rem; border-radius:50%;
  display:grid; place-items:center; font-size:.72rem; font-weight:700; font-style:italic;
  background:var(--surface-3); color:var(--ink-2); margin-top:.12rem; }
.notice.err{ background:var(--err-soft); border-color:var(--err-line); color:#7a190f; }
.notice.err::before{ content:"!"; background:var(--err); color:#fff; font-style:normal; }
.notice.ok{ background:var(--ok-soft); border-color:var(--ok-line); color:#0e4a28; }
.notice.ok::before{ content:"✓"; background:var(--ok); color:#fff; font-style:normal; }
.notice.info{ background:var(--warn-soft); border-color:var(--warn-line); }
.notice.info::before{ background:var(--warn); color:#fff; }
.rules{ margin:.5rem 0 .6rem; padding-left:1.2rem; }
.rules li{ margin:.2rem 0; }

/* ============ страница заказа ============ */
/* Полоска прогресса: линия дорисовывается до текущего шага, точка пульсирует. */
.steps{ display:flex; margin:0 0 1.75rem; padding:0; list-style:none; overflow-x:auto; }
.steps li{
  position:relative; flex:1; min-width:4.75rem; padding-top:1.7rem; text-align:center;
  font-size:.8rem; color:var(--muted); white-space:nowrap;
}
.steps li::before{
  content:""; position:absolute; top:.3rem; left:50%; transform:translateX(-50%);
  width:.75rem; height:.75rem; border-radius:50%; z-index:1;
  background:var(--surface); border:1.5px solid var(--line-2);
  transition:background .4s var(--e-out), border-color .4s var(--e-out), box-shadow .4s var(--e-out);
}
.steps li::after{
  content:""; position:absolute; top:calc(.3rem + .375rem - 1px);
  left:-50%; width:100%; height:2px; background:var(--line);
}
.steps li:first-child::after{ display:none; }
.steps li .fill{
  position:absolute; top:calc(.3rem + .375rem - 1px); left:-50%; width:100%; height:2px;
  background:var(--ink); transform-origin:left; transform:scaleX(0);
  transition:transform .5s var(--e-out); transition-delay:var(--d,0ms);
}
.steps li.done{ color:var(--ink-2); }
.steps li.done::before{ background:var(--ink); border-color:var(--ink); }
.steps li.done .fill, .steps li.now .fill{ transform:scaleX(1); }
.steps li.now{ color:var(--ink); font-weight:600; }
.steps li.now::before{
  background:var(--accent); border-color:var(--accent);
  box-shadow:0 0 0 0 rgba(240,78,35,.4); animation:live 2.2s var(--e-io) infinite .5s;
}

.status-big{
  display:flex; align-items:center; gap:.55rem;
  margin:0 0 .4rem; font-size:1.45rem; font-weight:640; letter-spacing:-.03em;
}
/* Точка у статуса: зелёная - готово, оранжевая пульсирует - идёт работа. */
.status-dot{
  width:.6rem; height:.6rem; border-radius:50%; flex:none; background:var(--ok);
}
.status-dot.neutral{ background:var(--accent); animation:live 2.2s var(--e-io) infinite; }
.status-dot.warn{ background:#D89B14; animation:live 2.2s var(--e-io) infinite; }
.status-dot.err{ background:var(--err); }
.meta{ font-size:.86rem; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.meta b{ color:var(--ink); font-weight:600; }

.chat{
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  padding:1.1rem; max-height:27rem; overflow-y:auto;
  display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.1rem;
  scroll-behavior:smooth;
}
.msg{
  max-width:78%; border-radius:var(--r); padding:.6rem .85rem; font-size:.9rem;
  animation:msg-in .4s var(--e-out) both;
}
@keyframes msg-in{ from{ opacity:0; transform:translateY(8px) scale(.97); } }
.msg .who{
  display:block; font-size:.7rem; font-weight:600; letter-spacing:.01em;
  color:var(--muted); margin-bottom:.15rem;
}
.msg.operator{ background:var(--surface); border:1px solid var(--line); align-self:flex-start; box-shadow:var(--sh-xs); }
.msg.client{ background:var(--ink); color:#fff; align-self:flex-end; }
.msg.client .who{ color:rgba(255,255,255,.55); }
.msg.system{
  background:transparent; align-self:center; text-align:center; max-width:100%;
  font-size:.83rem; color:var(--muted);
}
.msg p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }

/* ============ подвал ============ */
footer.site{
  border-top:1px solid var(--line); margin-top:3rem; padding:2.25rem 0 3rem;
  font-size:.87rem; color:var(--muted); background:var(--surface);
}
.footer-in{ display:flex; gap:1rem 2rem; flex-wrap:wrap; justify-content:space-between; align-items:center; }
.footer-links{ display:flex; gap:1.4rem; flex-wrap:wrap; }
footer.site a{ position:relative; color:var(--ink-2); transition:color var(--t) var(--e-io); }
footer.site a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform var(--t) var(--e-out);
}
footer.site a:hover{ color:var(--accent); }
footer.site a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* ============ загрузка ============ */
/* Скелет повторяет форму витрины, поэтому переход к данным не «дёргает» страницу. */
.sk{
  background:linear-gradient(100deg,var(--surface-2) 30%,var(--surface-3) 50%,var(--surface-2) 70%);
  background-size:220% 100%; animation:shimmer 1.5s var(--e-io) infinite;
  border-radius:var(--r-xs);
}
@keyframes shimmer{ to{ background-position:-120% 0; } }
.sk-hero{ padding:4.5rem 0 2rem; }
.sk-line{ height:.85rem; margin-bottom:.7rem; }
.sk-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); }
.sk-card{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
.sk-card .sk-pic{ aspect-ratio:16/9; border-radius:0; }
.sk-card .sk-body{ padding:1rem 1.1rem 1.1rem; }
.skeleton{ color:var(--muted); padding:5rem 0; text-align:center; font-size:.9rem; }

/* ============ виджет поддержки ============ */
.sup{ position:fixed; right:1.4rem; bottom:1.4rem; z-index:60; }
.sup-btn{
  position:relative; width:3.4rem; height:3.4rem; border-radius:50%;
  border:none; background:var(--grad); cursor:pointer; color:#fff;
  box-shadow:var(--sh-accent);
  display:flex; align-items:center; justify-content:center;
  transition:transform var(--t) var(--e-spring), box-shadow var(--t) var(--e-out), background var(--t) var(--e-io);
}
.sup-btn::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 rgba(240,78,35,.4); animation:live 3s var(--e-io) infinite;
}
.sup-btn:hover{ transform:translateY(-3px) scale(1.05); }
.sup-btn.active{ background:var(--ink); box-shadow:var(--sh-lg); }
.sup-btn.active::before{ animation:none; }
.sup-ico{
  position:absolute; width:1.45rem; height:1.45rem;
  transition:transform var(--t) var(--e-spring), opacity var(--t) var(--e-io);
}
.sup-ico-close{ transform:rotate(-90deg) scale(.6); opacity:0; }
.sup-btn.active .sup-ico-chat{ transform:rotate(90deg) scale(.6); opacity:0; }
.sup-btn.active .sup-ico-close{ transform:none; opacity:1; }
.sup-btn.active .sup-btn-icon{ transform:rotate(90deg) scale(.9); }
.sup-badge{
  position:absolute; top:-.15rem; right:-.15rem; min-width:1.3rem; height:1.3rem;
  padding:0 .32rem; border-radius:var(--r-pill);
  border:2px solid var(--bg); background:var(--ink); color:#fff;
  font-size:.7rem; font-weight:650; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; justify-content:center;
  animation:pop .35s var(--e-spring) both;
}
.sup-panel{
  position:absolute; right:0; bottom:4.3rem; width:min(23.5rem, calc(100vw - 2.8rem));
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-lg); overflow:hidden;
  display:flex; flex-direction:column; max-height:min(32rem, calc(100vh - 7.5rem));
  transform-origin:bottom right;
  animation:sup-in .34s var(--e-spring) both;
}
@keyframes sup-in{ from{ opacity:0; transform:translateY(14px) scale(.94); } }
.sup-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.9rem 1.05rem; border-bottom:1px solid var(--line); background:var(--surface);
}
.sup-head b{ font-size:.96rem; font-weight:620; }
.sup-head .sup-status{
  display:flex; align-items:center; gap:.35rem;
  font-size:.76rem; color:var(--muted); font-weight:400;
}
.sup-head .sup-status::before{
  content:""; width:.38rem; height:.38rem; border-radius:50%; background:#22A45D;
  box-shadow:0 0 0 0 rgba(34,164,93,.5); animation:live 2.4s var(--e-io) infinite;
}
.sup-close{
  border:none; background:transparent; color:var(--muted); font-size:1.3rem;
  line-height:1; cursor:pointer; padding:.1rem .25rem; border-radius:var(--r-xs);
  transition:color var(--t) var(--e-io), background var(--t) var(--e-io);
}
.sup-close:hover{ color:var(--ink); background:var(--surface-2); }
.sup-body{
  flex:1; overflow-y:auto; padding:1rem; background:var(--surface-2);
  display:flex; flex-direction:column; gap:.5rem; min-height:9.5rem;
  scroll-behavior:smooth;
}
.sup-msg{
  max-width:85%; border-radius:var(--r); padding:.55rem .75rem; font-size:.87rem;
  animation:msg-in .35s var(--e-out) both;
}
.sup-msg .who{ display:block; font-size:.67rem; font-weight:600; color:var(--muted); margin-bottom:.12rem; }
.sup-msg p{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.sup-msg.operator{ background:var(--surface); border:1px solid var(--line); align-self:flex-start; box-shadow:var(--sh-xs); }
.sup-msg.client{ background:var(--ink); color:#fff; align-self:flex-end; }
.sup-msg.client .who{ color:rgba(255,255,255,.55); }
.sup-msg.system{
  background:transparent; align-self:center; text-align:center;
  color:var(--muted); font-size:.82rem; max-width:100%;
}
/* Три точки «печатает» - показываем сразу после отправки, чтобы ожидание
   не выглядело зависшим. */
.sup-typing{
  align-self:flex-start; display:flex; gap:.22rem; padding:.6rem .8rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  animation:msg-in .3s var(--e-out) both;
}
.sup-typing i{
  width:.35rem; height:.35rem; border-radius:50%; background:var(--muted);
  animation:typing 1.3s var(--e-io) infinite;
}
.sup-typing i:nth-child(2){ animation-delay:.18s; }
.sup-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes typing{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-.24rem); opacity:1; } }

.sup-form{ border-top:1px solid var(--line); padding:.8rem; display:flex; flex-direction:column; gap:.5rem; }
.sup-form input{ font-size:.88rem; padding:.55rem .7rem; }
.sup-row{ display:flex; gap:.5rem; }
.sup-row .sup-text{ flex:1; }
.sup-send{
  flex:none; width:2.6rem; border:0; border-radius:var(--r-sm);
  background:var(--grad); color:#fff; font-size:1rem; font-weight:600; cursor:pointer;
  box-shadow:var(--sh-xs);
  transition:transform var(--t) var(--e-spring), filter var(--t) var(--e-io);
}
.sup-send:hover:not(:disabled){ transform:scale(1.06); }
.sup-send:disabled{ filter:grayscale(.4) opacity(.5); cursor:not-allowed; }

/* ============ адаптив ============ */
@media (max-width:900px){
  .product-head{ grid-template-columns:1fr; gap:1.5rem; }
  .product-head .shot{ max-width:28rem; }
  .stats{ gap:1.75rem; }
}

@media (max-width:640px){
  body{ font-size:14.5px; }
  .wrap{ padding:0 1.15rem; }
  .wordmark small{ display:none; }
  .header-in{ gap:.35rem; }
  .chip{ padding:.42rem .6rem; font-size:.85rem; }
  .hero{ padding:2.75rem 0 2rem; }
  .hero-cta{ margin-top:1.6rem; }
  .hero-cta{ gap:.55rem; }
  .hero-cta .btn{ flex:1 1 0; min-width:0; padding-left:.9rem; padding-right:.9rem; }
  .stats{ gap:1.1rem 2rem; margin-top:2rem; }
  .stats b{ font-size:1.4rem; }
  .ticker{ margin-top:1.25rem; }
  .row{ flex-direction:column; }
  .row > *{ width:100%; }
  /* На телефоне витрина в одну колонку становится бесконечной - держим две. */
  .grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .sk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
  .card{ border-radius:var(--r); }
  .card-body{ padding:.7rem .8rem .85rem; gap:.25rem; }
  .card-body h3{ font-size:.88rem; }
  .card-body p{ font-size:.77rem; }
  .card-foot{ padding-top:.6rem; }
  .card-price{ font-size:.78rem; }
  .card-price b{ font-size:.92rem; }
  .card-go{ display:none; }
  .pill{ font-size:.66rem; padding:.1rem .42rem; }
  .actions{ grid-template-columns:1fr; }
  .action{ padding:1.1rem; gap:.85rem; }
  .action-arrow{ display:none; }
  .panel{ padding:1.25rem; border-radius:var(--r-lg); }
  .amount-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .total .sum{ font-size:1.75rem; }
  .total > .btn{ width:100%; }
  .msg, .sup-msg{ max-width:90%; }
  .section-head{ flex-direction:column; align-items:flex-start; gap:.6rem; }
  .sup{ right:1rem; bottom:1rem; }
  .sup-panel{ max-height:calc(100vh - 6.5rem); }
  .footer-in{ flex-direction:column; align-items:flex-start; gap:1rem; }
  /* Плавающая полоса оплаты только на телефоне - на десктопе итог и так виден. */
  .paybar{ display:flex; }
  body.has-paybar .sup{ bottom:5rem; }
}

/* Уважаем системную настройку: оставляем интерфейс, убираем движение. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto; }
  .motion [data-reveal]{ opacity:1 !important; transform:none !important; }
  .steps li .fill{ transform:scaleX(1) !important; }
  .hero h1 em::after{ transform:scaleX(1) !important; }
}