/* ==========================================================================
   components.css — компоненты интерфейса Cloud Page
   Подключается после style.css и опирается на его токены (--c-*, --grad, …).
   Порядок блоков совпадает с порядком секций на странице.
   ========================================================================== */

/* ==========================================================================
   1. КНОПКИ
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 2rem;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--r-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}

.btn:active { transform: translateY(1px); }

/* Основная — сплошная чёрная плашка (в тёмной теме белая) */
.btn--solid {
  background: var(--c-inverse-bg);
  color: var(--c-inverse);
  border: 1px solid var(--c-inverse-bg);
}
.btn--solid:hover { opacity: .86; }

/* Второстепенная — тонкая монохромная обводка */
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  border: 1px solid var(--c-line-strong);
}
.btn--ghost:hover { border-color: var(--c-text); }

/* Акцентная — единственное место, где градиент образует обводку.
   Реализация: градиентный фон + внутренняя подложка цвета фона. */
.btn--grad {
  position: relative;
  background: var(--grad);
  color: var(--c-text);
  border: 0;
  padding: calc(1rem + 1px) calc(2rem + 1px);
  isolation: isolate;
}
.btn--grad::before {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--r-sm) - 1px);
  background: var(--c-bg);
  z-index: -1;
  transition: opacity var(--dur-fast) ease;
}
.btn--grad:hover { color: #fff; }
.btn--grad:hover::before { opacity: 0; }

.btn--lg { padding: 1.15rem 2.4rem; font-size: 1rem; }
.btn--block { width: 100%; }

/* Состояние отправки формы */
.btn.is-loading { pointer-events: none; opacity: .7; }
.btn .spinner { display: none; }
.btn.is-loading .spinner {
  display: block;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.btn.is-loading .btn-label { opacity: .7; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   2. ШАПКА / НАВИГАЦИЯ
   ========================================================================== */

.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-fast) ease,
              border-color var(--dur-fast) ease,
              backdrop-filter var(--dur-fast) ease,
              box-shadow var(--dur-fast) ease;
}

/* Плотный фон появляется только после старта скролла.
   Первая строка — фолбэк для браузеров без color-mix(). */
.header.is-stuck {
  background: var(--c-bg);
  background: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Знак логотипа — PNG с прозрачным фоном.
   В тёмной теме инвертируем, чтобы чёрный контур стал белым. */
.logo__mark {
  width: auto;
  height: 30px;
  flex: none;
  object-fit: contain;
}
html.dark .logo__mark { filter: invert(1); }

.nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-2);
  padding-block: .35rem;
  transition: color var(--dur-fast) ease;
}
.nav__link:hover { color: var(--c-text); }

/* Градиентное подчёркивание активного пункта */
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--grad);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--c-text); }

.header__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.icon-btn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.icon-btn:hover { border-color: var(--c-text); }
.icon-btn svg { width: 18px; height: 18px; }

/* CTA в шапке прячем на мобильных (там он есть в бургер-меню) */
.header__actions .btn { display: none; }

/* ---------- Мобильное меню ---------- */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 auto 0;
  z-index: 99;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur) var(--ease);
}
.mobile-menu.is-open { max-height: 420px; }

.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem var(--gutter) 1.75rem;
}
.mobile-menu a {
  padding: .8rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  border-bottom: 1px solid var(--c-line);
}
.mobile-menu .btn {
  margin-top: 1rem;
  padding: 1rem 2rem;
  border-bottom: 0;
}

@media (min-width: 900px) {
  .nav { display: flex; }
  .header__actions .btn { display: inline-flex; }
  #menu-toggle { display: none; }
  .mobile-menu { display: none; }
}

/* ==========================================================================
   3. HERO
   ========================================================================== */

.hero {
  padding-top: calc(var(--header-h) + clamp(3.5rem, 8vw, 7rem));
  padding-bottom: var(--section-y);
}

.hero__status {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .9rem .4rem .7rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-text-2);
  margin-bottom: 2rem;
}
.hero__status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--grad);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .35; } }

.hero h1 { margin-bottom: 1.75rem; }
.hero .lead { margin-bottom: 0; }

/* Текст — строго слева, кнопки — строго справа */
.hero__grid {
  display: grid;
  gap: 2.5rem;
  align-items: end;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
}

.hero__text { text-align: left; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: flex-start;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr) auto; }
  .hero__cta {
    flex-direction: column;
    align-items: stretch;
    justify-self: end;      /* прижимаем колонку к правому краю блока */
    text-align: right;
    min-width: 232px;
  }
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--c-line);
}
.stats__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: .5rem;
}
.stats__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

@media (min-width: 760px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   4. УСЛУГИ — текстовый список без иконок, цена справа,
      детальное описание раскрывается по наведению
   ========================================================================== */

.services { display: flex; flex-direction: column; }

.service {
  position: relative;
  display: block;
  border-top: 1px solid var(--c-line);
  padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  cursor: pointer;
  transition: padding-inline var(--dur) var(--ease);
}
.services .service:last-child { border-bottom: 1px solid var(--c-line); }

/* Тонкая градиентная полоса слева — «загорается» при наведении */
.service::before {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 100%; height: 2px;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.service:hover::before,
.service.is-open::before { transform: scaleX(1); }

.service__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.service__title {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex: 1 1 260px;
  min-width: 0;
}

/* Порядковый номер вместо иконки — текстовый акцент */
.service__num {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--c-text-3);
  flex: none;
  padding-top: .2rem;
  transition: color var(--dur-fast) ease;
}
.service:hover .service__num,
.service.is-open .service__num {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.service__name {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2.15rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  transition: transform var(--dur) var(--ease);
}
.service:hover .service__name { transform: translateX(6px); }

/* Цена жёстко зафиксирована справа */
.service__price {
  flex: none;
  margin-left: auto;
  text-align: right;
  font-family: var(--font-display);
  font-size: clamp(1rem, .9rem + .5vw, 1.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.service__price small {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .15rem;
}

/* Короткое описание — ровно одна строка */
.service__short {
  margin-top: .5rem;
  padding-left: calc(1rem + 2ch);
  font-size: var(--fs-sm);
  color: var(--c-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Развёрнутое описание: плавно выезжает по grid-строке (без «прыжков») */
.service__detail {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--dur) var(--ease),
              opacity var(--dur-fast) ease,
              margin-top var(--dur) var(--ease);
  margin-top: 0;
}
.service:hover .service__detail,
.service.is-open .service__detail,
.service:focus-within .service__detail {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 1.25rem;
  transition-delay: 90ms;   /* небольшая задержка — эстетичнее */
}

.service__detail > div { overflow: hidden; min-height: 0; }

.service__detail-inner {
  padding-left: calc(1rem + 2ch);
  max-width: 68ch;
}
.service__detail-inner p {
  font-size: var(--fs-body);
  color: var(--c-text-2);
  margin-bottom: 1rem;
}

.tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.tag {
  padding: .32rem .7rem;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* Мобильные правила для услуг вынесены в блок 12.2 в конце файла */

/* ==========================================================================
   5. ДЕМО-ТЕЛЕФОН
   ========================================================================== */

.demo__grid {
  display: grid;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: center;
}

@media (min-width: 960px) {
  .demo__grid { grid-template-columns: 1fr 1fr; }
}

.demo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 2rem;
}

.demo-tab {
  padding: .7rem 1.15rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--c-text-3);
  transition: all var(--dur-fast) ease;
}
.demo-tab:hover { border-color: var(--c-text); color: var(--c-text); }
.demo-tab.is-active {
  background: var(--c-inverse-bg);
  border-color: var(--c-inverse-bg);
  color: var(--c-inverse);
}

.demo__metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}
.demo__metrics .stats__num { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }

/* ---------- Корпус смартфона ---------- */
.phone-wrap { display: flex; justify-content: center; }

.phone {
  position: relative;
  width: min(310px, 78vw);
  aspect-ratio: 310 / 630;
  background: #0A0A0A;
  border: 2px solid #1F1F1F;
  border-radius: 44px;
  padding: 10px;
  box-shadow: var(--c-shadow), inset 0 0 0 1px rgba(255, 255, 255, .06);
  flex: none;
}
html.dark .phone { border-color: #2E2E2E; }

/* Боковые кнопки корпуса */
.phone::before,
.phone::after {
  content: '';
  position: absolute;
  right: -3px;
  width: 3px;
  background: #262626;
  border-radius: 0 3px 3px 0;
}
.phone::before { top: 128px; height: 62px; }
.phone::after  { top: 202px; height: 40px; }

.phone__notch {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  width: 104px; height: 24px;
  background: #0A0A0A;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  background: #000;
  border-radius: 34px;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
}

.phone__statusbar {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
}
.phone__statusbar svg { width: 13px; height: 13px; opacity: .85; }
.phone__statusbar div { display: flex; gap: 4px; align-items: center; }

/* ---------- Экраны демо ---------- */
.phone__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition: opacity var(--dur-fast) ease, transform var(--dur) var(--ease);
}
.phone__panel.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Прокручиваемая область контента: имитирует настоящий экран приложения */
.ph-scroll {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 42px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  -webkit-mask-image: linear-gradient(#000 88%, transparent 100%);
  mask-image: linear-gradient(#000 88%, transparent 100%);
}
.ph-scroll--tabbar { padding-bottom: 4px; }

.ph-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.ph-h {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.ph-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

.ph-text {
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .55);
}

.ph-section-label {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  margin-top: 2px;
}

/* ---------- Лендинг ---------- */
.ph-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ph-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.ph-brand img { width: 16px; height: auto; filter: invert(1); }

.ph-burger { display: flex; flex-direction: column; gap: 3px; }
.ph-burger i { width: 13px; height: 1.5px; border-radius: 2px; background: rgba(255, 255, 255, .55); }

.ph-hero {
  position: relative;
  border-radius: 13px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Мягкое градиентное «фото» на подложке героя */
.ph-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(167, 139, 250, .38), transparent 60%),
    radial-gradient(110% 80% at 10% 100%, rgba(56, 189, 248, .32), transparent 62%),
    #0C0C0C;
}
.ph-hero > *:not(.ph-hero__bg) { position: relative; }

.ph-chip {
  align-self: flex-start;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.ph-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.ph-btn {
  padding: 10px;
  border-radius: 9px;
  background: #fff;
  color: #000;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .01em;
}

.ph-note {
  font-size: 8px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

.ph-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  text-align: center;
}
.ph-strip div {
  padding: 8px 4px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
}
.ph-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.ph-strip span { font-size: 7px; color: rgba(255, 255, 255, .45); }

.ph-feature {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
}
.ph-feature__ico {
  width: 22px; height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--grad);
  color: #fff;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 800;
}
.ph-feature div { flex: 1; min-width: 0; line-height: 1.3; }
.ph-feature b { display: block; font-size: 10px; font-weight: 700; }
.ph-feature span { font-size: 8px; color: rgba(255, 255, 255, .45); }
.ph-arrow { color: rgba(255, 255, 255, .3); font-size: 14px; line-height: 1; }

/* ---------- Магазин ---------- */
.ph-cart { position: relative; display: block; }
.ph-cart svg { width: 17px; height: 17px; opacity: .8; }

.ph-badge {
  position: absolute;
  top: -5px; right: -6px;
  min-width: 13px; height: 13px;
  padding-inline: 3px;
  border-radius: 999px;
  background: var(--grad);
  color: #fff;
  font-size: 7.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.ph-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .06);
  font-size: 9px;
  color: rgba(255, 255, 255, .42);
}
.ph-search svg { width: 12px; height: 12px; flex: none; }

.ph-chips { display: flex; gap: 5px; overflow: hidden; }
.ph-chips .ph-chip { flex: none; letter-spacing: .06em; }
.ph-chips .ph-chip.is-on {
  background: #fff;
  border-color: #fff;
  color: #000;
}

.ph-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-product {
  padding: 7px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ph-product b { font-size: 9.5px; font-weight: 700; }

.ph-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 7px;
  margin-bottom: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 4px, transparent 4px 8px);
}
.ph-tag {
  position: absolute;
  top: 4px; left: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 7px;
  font-weight: 800;
}
.ph-rate { font-size: 8px; color: rgba(255, 255, 255, .45); }
.ph-price { font-size: 10px; font-weight: 800; }
.ph-plus {
  width: 17px; height: 17px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ph-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 9px 14px 11px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(10, 10, 10, .9);
}
.ph-tabbar span { display: grid; place-items: center; color: rgba(255, 255, 255, .3); }
.ph-tabbar span.is-on { color: #fff; }
.ph-tabbar svg { width: 16px; height: 16px; }

/* ---------- Панель заявок ---------- */
.ph-avatar {
  width: 26px; height: 26px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--grad);
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .04em;
}
.ph-avatar--sm {
  width: 22px; height: 22px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  font-size: 7.5px;
}

.ph-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ph-kpi div {
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .06);
}
.ph-kpi b {
  display: block;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 2px;
}
.ph-kpi em {
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
}
.ph-kpi em.is-up { color: #4ADE80; }

.ph-chart {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 56px;
  margin-top: 2px;
}
.ph-col {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--grad);
  opacity: .85;
}

.ph-axis {
  display: flex;
  gap: 5px;
  margin-top: -4px;
}
.ph-axis span {
  flex: 1;
  text-align: center;
  font-size: 7px;
  color: rgba(255, 255, 255, .3);
}

.ph-list { display: flex; flex-direction: column; gap: 6px; }
.ph-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .05);
}
.ph-item div { flex: 1; min-width: 0; line-height: 1.35; }
.ph-item b { display: block; font-size: 9.5px; font-weight: 700; }
.ph-item span:not(.ph-pill):not(.ph-avatar) { font-size: 7.5px; color: rgba(255, 255, 255, .42); }

.ph-pill {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .6);
  flex: none;
}
.ph-pill.is-new { background: #fff; border-color: #fff; color: #000; }

/* ==========================================================================
   6. ЭТАПЫ РЕАЛИЗАЦИИ — вертикальная дорожка со скролл-триггером
   ========================================================================== */

.timeline {
  position: relative;
  padding-left: 4.5rem;
  max-width: 860px;
}

/* Серая направляющая */
.timeline::before {
  content: '';
  position: absolute;
  left: 21px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--c-line);
}

/* Градиентная заливка направляющей — тянется по мере прокрутки */
.timeline__progress {
  position: absolute;
  left: 21px; top: 8px;
  width: 2px;
  height: 0;
  background: var(--grad);
  transition: height .9s var(--ease);
  border-radius: 2px;
}

.step {
  position: relative;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.step:last-child { padding-bottom: 0; }

/* Активное состояние ставится/снимается через IntersectionObserver:
   при скролле вниз пункт появляется, при обратном — снова исчезает. */
.step.is-in {
  opacity: 1;
  transform: none;
}

.step__num {
  position: absolute;
  left: -4.5rem; top: 0;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-bg);
  border: 2px solid var(--c-line);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 800;
  color: var(--c-text-3);
  transition: all .5s var(--ease);
  transition-delay: calc(var(--delay, 0ms) + 120ms);
}

/* Цифра этапа «загорается» градиентом */
.step.is-in .step__num {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 24px -10px rgba(56, 189, 248, .7);
}

.step__title { margin-bottom: .65rem; }
.step__meta {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .6rem;
}
.step p { max-width: 56ch; }

@media (max-width: 620px) {
  .timeline { padding-left: 3.5rem; }
  .timeline::before,
  .timeline__progress { left: 17px; }
  .step__num { left: -3.5rem; width: 36px; height: 36px; font-size: .75rem; }
}

/* ==========================================================================
   7. КЕЙСЫ
   ========================================================================== */

.cases {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

@media (min-width: 760px) {
  .cases { grid-template-columns: repeat(2, 1fr); }
}

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur-fast) ease,
              box-shadow var(--dur) var(--ease);
}
.case:hover {
  transform: translateY(-6px);
  border-color: var(--c-line-strong);
  box-shadow: var(--c-shadow);
}

/* Превью проекта: абстрактный монохромный макет вместо картинки */
.case__preview {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: hidden;
}
html.dark .case__preview { background: #060606; }

.case__preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad);
  opacity: 0;
  mix-blend-mode: overlay;
  transition: opacity var(--dur) ease;
}
.case:hover .case__preview::after { opacity: .22; }

.case__browser {
  display: flex;
  gap: 5px;
  margin-bottom: .35rem;
}
.case__browser i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-line-strong);
}

.case__skeleton { display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.case__skeleton span {
  display: block;
  height: 9px;
  border-radius: 4px;
  background: var(--c-line);
}
.case__skeleton span:nth-child(1) { width: 62%; height: 20px; background: var(--c-line-strong); }
.case__skeleton span:nth-child(2) { width: 88%; }
.case__skeleton span:nth-child(3) { width: 74%; }
.case__blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: auto;
}
.case__blocks i {
  height: 34px;
  border-radius: 6px;
  background: var(--c-line);
  transition: transform var(--dur) var(--ease);
}
.case:hover .case__blocks i:nth-child(2) { transform: translateY(-4px); }
.case:hover .case__blocks i:nth-child(3) { transform: translateY(-8px); }

.case__body { padding: clamp(1.25rem, 2.5vw, 1.85rem); }

.case__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .75rem;
}
.case__meta span:not(:last-child)::after { content: ' /'; }

.case__body h3 { margin-bottom: .5rem; }
.case__body p { font-size: var(--fs-sm); margin-bottom: 1.25rem; }

.case__result {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--c-line);
}
.case__result div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.case__result div span {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ==========================================================================
   8. ФОРМА ОБРАТНОЙ СВЯЗИ
   ========================================================================== */

/* Секция занимает ровно один экран — скроллить не нужно.
   Верхний паддинг равен высоте фиксированной шапки, чтобы она не накрывала контент. */
.section--screen {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: var(--header-h) 1rem;
}

/* Две колонки: слева заголовочная часть, справа форма */
.contact__grid {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
}

/* Левая колонка — та же стилистика, что у section-head в «Услугах» и «Кейсах» */
.contact__head {
  margin-bottom: 0;
  max-width: 34ch;
}
.contact__head .eyebrow { margin-bottom: 1rem; }
.contact__head h2 { margin-bottom: .85rem; }
.contact__head p {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.contact__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--c-line);
}
.contact__list a {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: color var(--dur-fast) ease;
}
.contact__list a:hover { color: var(--c-text-3); }

/* Правая колонка — форма строго по центру по обеим осям */
.contact__form {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .contact__grid { grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); }
}

/* Компактная карточка */
.form-card {
  width: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  max-width: 520px;
  margin-inline: auto;
  box-shadow: var(--c-shadow-sm);
}

.form-grid {
  display: grid;
  gap: .85rem;
}

/* Компактные, но удобные для заполнения поля */
.form-card .form-field label {
  margin-bottom: .25rem;
  font-size: .68rem;
}
.form-card .form-field input,
.form-card .form-field textarea {
  padding: .5rem 0;
  font-size: .95rem;
}
.form-card .form-field textarea { min-height: 60px; }
.form-card .btn { padding: .85rem 2rem; }
.form-card .form-note {
  margin-top: .6rem;
  line-height: 1.4;
}
.form-card #form-status { margin-top: .6rem; }

@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field--full { grid-column: 1 / -1; }
}

/* Когда колонки складываются друг под друга — контакты в строку, отступы меньше */
@media (max-width: 899px) {
  .contact__grid { gap: 1.5rem; }
  .contact__head { max-width: none; }
  .contact__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    margin-top: 1rem;
    padding-top: 1rem;
  }
  .contact__list a { font-size: .9rem; }
}

/* Низкие экраны: подрезаем описание слева и поле «О проекте» */
@media (max-height: 720px) {
  .contact__head p { display: none; }
  .contact__list { margin-top: 1rem; padding-top: 1rem; }
  .form-card .form-field textarea { min-height: 46px; }
  .form-grid { gap: .7rem; }
}

/* Совсем низкие экраны — сжимаем ещё, но не в ущерб удобству ввода */
@media (max-height: 640px) {
  .contact__grid { gap: 1.1rem; }
  .contact__head h2 { font-size: 1.6rem; }
  .form-card { padding: 1rem; }
  .form-grid { gap: .55rem; }
  .form-card .form-field textarea { min-height: 38px; }
  .form-card .btn { padding: .7rem 2rem; }
  .form-card .form-note { margin-top: .45rem; font-size: .65rem; }
}

.form-field { position: relative; }

.form-field label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: .5rem;
}
.form-field label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--c-line-strong);
  padding: .75rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  outline: none;
  border-radius: 0;
  transition: border-color var(--dur-fast) ease;
}
.form-field textarea { resize: vertical; min-height: 96px; }

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--c-text-3); font-weight: 400; }

.form-field input:focus,
.form-field textarea:focus { border-bottom-color: var(--c-text); }

/* Градиентная линия под активным полем */
.form-field::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: var(--grad);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.form-field:focus-within::after { transform: scaleX(1); }

.form-field.has-error input,
.form-field.has-error textarea { border-bottom-color: #E11D48; }

.form-field__error {
  font-size: var(--fs-xs);
  color: #E11D48;
  margin-top: .4rem;
  font-weight: 600;
}

.form-note {
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin-top: 1rem;
  text-align: center;
}

#form-status {
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  margin-top: 1rem;
}

.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   9. ПОДВАЛ
   ========================================================================== */

.footer {
  border-top: 1px solid var(--c-line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--c-line);
}

@media (min-width: 760px) {
  .footer__top { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer__col h4 {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-text-3);
  margin-bottom: 1rem;
}
.footer__col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.footer__col a {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-2);
  transition: color var(--dur-fast) ease;
}
.footer__col a:hover { color: var(--c-text); }

.footer__about p {
  font-size: var(--fs-sm);
  max-width: 34ch;
  margin-top: 1rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.75rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-text-3);
}

/* ==========================================================================
   10. ТОСТ-УВЕДОМЛЕНИЯ
   ========================================================================== */

.toast-container {
  position: fixed;
  right: 1.25rem;
  bottom: 5.25rem;   /* выше кнопки «наверх», чтобы не перекрывались */
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-width: min(360px, calc(100vw - 2.5rem));
}

.toast {
  padding: .9rem 1.15rem;
  border-radius: var(--r-md);
  background: var(--c-inverse-bg);
  color: var(--c-inverse);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.45;
  box-shadow: var(--c-shadow);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.toast.is-visible { opacity: 1; transform: none; }

.toast--success { border-left: 3px solid #22C55E; }
.toast--error   { border-left: 3px solid #E11D48; }
.toast--info    { border-left: 3px solid var(--c-accent); }

/* ==========================================================================
   11. КНОПКА «НАВЕРХ»
   ========================================================================== */

.to-top {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 90;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-inverse-bg);
  color: var(--c-inverse);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) var(--ease);
}
.to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.to-top svg { width: 18px; height: 18px; }

/* ==========================================================================
   12. МОБИЛЬНАЯ АДАПТАЦИЯ
   Блок идёт последним, поэтому переопределяет правила выше без !important.
   Точки перелома: 900px — планшет, 640px — телефон, 380px — узкий телефон.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1. Планшеты и всё, что уже десктопа
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {

  /* Компактная шапка: логотип + бургер, кнопка уезжает в меню */
  .header__inner { gap: .75rem; }
  .logo { font-size: 1.05rem; }
  .logo__mark { height: 26px; }

  /* Мобильное меню занимает не больше экрана и прокручивается */
  .mobile-menu.is-open {
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-menu a { padding: .95rem 0; }   /* тап-таргет ≥ 44px */

  /* Демо: телефон под текстом, метрики в строку */
  .demo__grid { gap: 2.5rem; }
  .phone-wrap { order: 2; }
}

/* --------------------------------------------------------------------------
   12.2. Телефоны
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {

  /* ---------- Общее ---------- */
  .section-head { margin-bottom: 2rem; }
  .section-head p { font-size: var(--fs-sm); }

  /* ---------- Hero ---------- */
  .hero { padding-top: calc(var(--header-h) + 2.25rem); }
  .hero__status {
    font-size: .62rem;
    letter-spacing: .05em;
    padding: .35rem .75rem .35rem .6rem;
    margin-bottom: 1.5rem;
  }
  .hero__grid { gap: 1.75rem; margin-bottom: 2.75rem; }
  .hero .lead { font-size: 1rem; max-width: none; }

  /* Кнопки на всю ширину — попасть пальцем проще */
  .hero__cta { flex-direction: column; align-items: stretch; gap: .6rem; }
  .hero__cta .btn { width: 100%; }

  .stats { gap: 1.5rem 1rem; padding-top: 1.75rem; }
  .stats__num { font-size: 1.75rem; }
  .stats__label { font-size: .62rem; letter-spacing: .08em; }

  /* ---------- Услуги ----------
     Цена остаётся справа от названия, описание раскрывается по тапу. */
  .service {
    padding: 1.15rem 2rem 1.15rem 0;   /* место справа под индикатор */
  }
  .service__top {
    flex-direction: row;
    align-items: flex-start;
    gap: .75rem;
    flex-wrap: nowrap;
  }
  .service__title { flex: 1 1 auto; gap: .6rem; }
  .service__num { font-size: .6rem; padding-top: .3rem; }
  .service__name { font-size: 1.15rem; line-height: 1.25; }
  .service:hover .service__name { transform: none; }

  .service__price {
    margin-left: 0;
    text-align: right;
    font-size: .85rem;
    line-height: 1.2;
    padding-top: .15rem;
  }
  .service__price small { font-size: .55rem; letter-spacing: .06em; }

  .service__short {
    padding-left: 0;
    margin-top: .5rem;
    font-size: .8rem;
    white-space: normal;
  }
  .service__detail-inner { padding-left: 0; }
  .service__detail-inner p { font-size: .9rem; }
  .service:hover .service__detail,
  .service:focus-within .service__detail { margin-top: .9rem; }
  .service.is-open .service__detail { margin-top: .9rem; }
  .tag { font-size: .6rem; padding: .28rem .6rem; }

  /* ---------- Демо-телефон ---------- */
  .demo__tabs { gap: .4rem; }
  .demo-tab {
    padding: .65rem .85rem;
    font-size: .65rem;
    min-height: 42px;          /* удобный тап-таргет */
  }
  .demo__metrics { gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; }
  .phone { width: min(280px, 82vw); border-radius: 38px; }
  .phone__screen { border-radius: 30px; }

  /* ---------- Этапы ---------- */
  .timeline { padding-left: 3.25rem; }
  .timeline::before,
  .timeline__progress { left: 15px; }
  .step { padding-bottom: 2.25rem; }
  .step__num { left: -3.25rem; width: 32px; height: 32px; font-size: .68rem; }
  .step__meta { font-size: .62rem; margin-bottom: .4rem; }
  .step__title { font-size: 1.15rem; margin-bottom: .45rem; }
  .step p { font-size: .9rem; }

  /* ---------- Кейсы ----------
     На тач-экранах hover не срабатывает, поэтому смягчаем зависимость от него. */
  .case { border-radius: var(--r-lg); }
  .case__preview { aspect-ratio: 16 / 9; padding: .9rem; }
  .case__body { padding: 1.1rem; }
  .case__meta { font-size: .6rem; letter-spacing: .08em; margin-bottom: .5rem; }
  .case__body p { font-size: .85rem; margin-bottom: 1rem; }
  .case__result { gap: 1rem; padding-top: .9rem; }
  .case__result div strong { font-size: 1.1rem; }
  .case__result div span { font-size: .6rem; }

  /* ---------- Форма ---------- */
  .contact__grid { gap: 1.5rem; }
  .contact__head h2 { margin-bottom: .6rem; }
  .form-card { padding: 1.1rem; border-radius: var(--r-lg); }

  /* 16px — ниже этого значения iOS Safari зумит страницу при фокусе */
  .form-card .form-field input,
  .form-card .form-field textarea {
    font-size: 16px;
    padding: .55rem 0;
  }
  .form-card .form-field label { font-size: .65rem; }
  .form-card .btn { padding: .95rem 1.5rem; }
  .form-note { font-size: .65rem; }

  /* ---------- Подвал ---------- */
  .footer__top { gap: 1.75rem; padding-bottom: 1.75rem; }
  .footer__about p { max-width: none; }
  .footer__col ul { gap: .5rem; }
  .footer__col a { display: inline-block; padding-block: .3rem; }
  .contact__list a { display: inline-block; padding-block: .25rem; }
  .footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    font-size: .6rem;
  }

  /* ---------- Плавающие элементы ---------- */
  .to-top { right: 1rem; bottom: 1rem; width: 42px; height: 42px; }
  .toast-container {
    right: 1rem; left: 1rem;
    bottom: 4.5rem;
    max-width: none;
  }
  .toast { font-size: .8rem; padding: .8rem 1rem; }
}

/* --------------------------------------------------------------------------
   12.3. Узкие телефоны (320–380px)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
  .logo { font-size: .95rem; gap: .5rem; }
  .logo__mark { height: 23px; }

  .service__name { font-size: 1.05rem; }
  .service__price { font-size: .78rem; }
  .stats { grid-template-columns: 1fr 1fr; }
  .demo-tab { padding: .6rem .7rem; font-size: .6rem; }
  .phone { width: min(255px, 84vw); }
  .case__result { gap: .75rem; }
}

/* --------------------------------------------------------------------------
   12.4. Тач-устройства: заменяем hover-логику на явные состояния
   -------------------------------------------------------------------------- */
@media (hover: none) {

  /* Индикатор «нажми, чтобы раскрыть» у услуг */
  .service { padding-right: 2rem; }
  .service::after {
    content: '';
    position: absolute;
    right: .2rem;
    top: 1.5rem;
    width: 15px; height: 15px;
    background:
      linear-gradient(var(--c-text-3), var(--c-text-3)) center / 15px 1.5px no-repeat,
      linear-gradient(var(--c-text-3), var(--c-text-3)) center / 1.5px 15px no-repeat;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) ease;
  }
  .service.is-open::after {
    transform: rotate(135deg);
    opacity: .5;
  }

  /* Раскрытие услуги — только по тапу (.is-open), иначе «залипший» hover
     оставляет два открытых блока одновременно */
  .service:hover .service__detail {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
  }
  .service:hover::before { transform: scaleX(0); }
  .service:hover .service__num {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    color: var(--c-text-3);
  }
  .service.is-open .service__detail {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: .9rem;
  }
  .service.is-open::before { transform: scaleX(1); }
  .service.is-open .service__num {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  /* Ховер-эффекты, которые на тачах «залипают», выключаем */
  .btn--solid:hover { opacity: 1; }
  .btn--grad:hover { color: var(--c-text); }
  .btn--grad:hover::before { opacity: 1; }
  .case:hover { transform: none; box-shadow: none; }
  .case:hover .case__blocks i { transform: none; }
  .nav__link:hover::after { transform: scaleX(0); }
  .nav__link.is-active::after { transform: scaleX(1); }

  /* Превью кейса и без наведения выглядит живым */
  .case__preview::after { opacity: .12; }
}

/* --------------------------------------------------------------------------
   12.5. Телефон в альбомной ориентации — секции на весь экран не фиксируем
   -------------------------------------------------------------------------- */
@media (max-height: 520px) and (orientation: landscape) {
  .section--screen {
    min-height: 0;
    padding-block: calc(var(--header-h) + 1.5rem) 2.5rem;
  }
  .hero { padding-top: calc(var(--header-h) + 1.5rem); }
  .mobile-menu.is-open { max-height: calc(100svh - var(--header-h)); }
}