/* Макеты первого экрана touchon.ru — светлая палитра дизайн-системы TouchOn.
   Токены взяты из agro/agro.css без изменений. */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #ffffff;
  --bg-soft: #f4f7f5;
  --surface: #ffffff;
  --border: #e4eae7;
  --border-strong: #d2ddd8;
  --ink: #1f1f1f;
  --ink-2: #626664;
  --ink-3: #6b6f6d;
  --accent: #19b58f;
  --accent-ink: #0a7f63;
  --accent-soft: rgba(25, 181, 143, 0.1);
  --shadow-sm: 0 1px 2px rgba(12, 21, 18, 0.04);
  --shadow-md: 0 2px 4px rgba(12, 21, 18, 0.03), 0 12px 32px rgba(12, 21, 18, 0.05);
  --shadow-lg: 0 4px 8px rgba(12, 21, 18, 0.04), 0 24px 60px rgba(12, 21, 18, 0.08);
  --font: 'Mulish', 'Segoe UI', system-ui, sans-serif;
  --font-logo: 'Montserrat Alternates', 'Mulish', sans-serif;
  --radius: 20px;
  --radius-sm: 12px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --header-h: 66px;
  --gap: clamp(72px, 9vw, 120px);
}

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ===== ШАПКА ===== */
.hdr {
  position: sticky; top: 0; z-index: 100; height: var(--header-h);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--border);
}
.hdr__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hdr__logo { --logo-h: 22px; display: inline-flex; align-items: baseline; }
.hdr__logo img { height: var(--logo-h); width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.hdr__link { font-size: 0.9rem; font-weight: 600; color: var(--ink); transition: color var(--transition); }
.hdr__link:hover { color: var(--accent-ink); }
.hdr__side { display: flex; align-items: center; gap: 20px; }
.hdr__phone { font-size: 0.92rem; font-weight: 700; color: var(--ink); }

/* ===== КНОПКИ ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 32px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; background: var(--accent-ink); border: 1.5px solid var(--accent-ink);
  border-radius: 980px; cursor: pointer; white-space: nowrap;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { background: #086b53; border-color: #086b53; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(10, 127, 99, 0.22); }
.btn--outline { background: transparent; color: var(--accent-ink); border-color: var(--border-strong); }
.btn--outline:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); box-shadow: none; }
.btn--sm { padding: 10px 22px; font-size: 0.84rem; }

/* ===== ОБЩЕЕ ===== */
.label {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px;
}
.hero { position: relative; padding: clamp(48px, 6vw, 76px) 0 clamp(56px, 7vw, 88px); overflow: hidden; }
.hero__glow {
  position: absolute; top: -260px; left: 50%; width: 1100px; height: 760px;
  transform: translateX(-56%);
  background: radial-gradient(closest-side, rgba(25, 181, 143, 0.16), transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(12, 21, 18, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 21, 18, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 15%, #000, transparent 76%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 15%, #000, transparent 76%);
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; }

h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 20px; }
h1 span { color: var(--accent-ink); }
.lead { font-size: 1.05rem; color: var(--ink-2); line-height: 1.75; max-width: 620px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 0; }

/* метрики */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; padding-top: 32px; margin-top: 40px; border-top: 1px solid var(--border); }
.stat { display: flex; flex-direction: column; gap: 6px; padding-left: 16px; border-left: 2px solid var(--accent); }
.stat__value { font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; }
.stat__label { font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; }

/* полоса документов */
.docs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.doc { display: inline-flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--ink-2); }
.doc__mark {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  font-size: 0.72rem; font-weight: 800;
}
.doc b { color: var(--ink); font-weight: 700; }

/* следующая секция — чтобы был виден переход */
.next { padding: clamp(48px, 6vw, 72px) 0; background: var(--bg-soft); border-top: 1px solid var(--border); }
.next__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.next h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.015em; }
.next__link { font-size: 0.88rem; font-weight: 700; color: var(--accent-ink); }

/* ============ общие компоненты v2 ============ */

/* полоса доверия под первым экраном */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; margin-top: 40px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.trust__i { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 20px 22px; background: var(--surface); }
.trust__v { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 4px; }
.trust__l { font-size: 0.78rem; color: var(--ink-2); line-height: 1.5; }
.trust__i--doc { width: 100%; text-align: left; font: inherit; border: 0; cursor: pointer; text-decoration: none; color: inherit; transition: background-color var(--transition); }
.trust__i--doc:hover { background: var(--bg-soft); }
.trust__i--doc .trust__l { color: var(--accent-ink); }

/* карточки аудиторий */
.aud { display: grid; gap: 18px; }
.aud--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.aud__c { display: flex; flex-direction: column; padding: 24px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.aud__c:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.aud__tag { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; }
.aud__t { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.aud__d { font-size: 0.85rem; color: var(--ink-2); line-height: 1.6; }
.aud__list { margin: 14px 0 18px; display: flex; flex-direction: column; gap: 7px; }
.aud__list li { position: relative; padding-left: 17px; font-size: 0.8rem; color: var(--ink-2); line-height: 1.5; }
.aud__list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.aud__go { margin-top: auto; font-size: 0.84rem; font-weight: 700; color: var(--accent-ink); }
/* строки карточек ролей выравниваются между собой, чтобы заголовки стояли на одной высоте */
@supports (grid-template-rows: subgrid) {
  .aud--4 { grid-template-rows: repeat(5, auto); }
  .aud--4 .aud__c { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
  .aud--4 .aud__list { margin: 14px 0 18px; }
  .aud--4 .aud__go { margin-top: 0; align-self: end; }
}

/* сетка инженерных систем */
.sysgrid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.syscard { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); }
.syscard:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.syscard b { display: block; font-size: 0.94rem; font-weight: 800; margin-bottom: 5px; }
.syscard span { font-size: 0.79rem; color: var(--ink-2); line-height: 1.55; }
.syscard i { display: block; font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--accent-ink); margin-top: 10px; }

/* полоса направлений */
.dirs-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.dir-card { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.dir-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dir-card__lock { --logo-h: 18px; display: inline-flex; align-items: baseline; gap: calc(var(--logo-h) * 0.228); flex: none; }
.dir-card__lock img { height: var(--logo-h); width: auto; }
.dir-card__lock span { font-family: var(--font-logo); font-weight: 600; font-size: calc(var(--logo-h) * 0.694); line-height: 1; color: var(--accent-ink); position: relative; top: calc(var(--logo-h) * -0.06); }
.dir-card p { font-size: 0.82rem; color: var(--ink-2); line-height: 1.55; }

/* шаги устройства системы */

@media (max-width: 1000px) {
  .trust { grid-template-columns: 1fr 1fr; }
  .aud--4 { grid-template-columns: 1fr 1fr; }
  .sysgrid { grid-template-columns: repeat(2, 1fr); }
  .dirs-row { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .trust { grid-template-columns: 1fr; }
  .aud--4 { grid-template-columns: 1fr; }
  .sysgrid { grid-template-columns: 1fr 1fr; }
}

/* ============ компоненты полной главной ============ */
.sec { padding: clamp(44px, 5.5vw, 76px) 0; }
.sec--soft { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.sec__head--center { flex-direction: column; align-items: center; text-align: center; }
.sec h2 { font-size: clamp(1.45rem, 2.5vw, 2.05rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.18; }
.sec__desc { font-size: 0.9rem; color: var(--ink-2); line-height: 1.65; max-width: 390px; flex: 0 0 auto; text-align: right; }
.sec__head--center .sec__desc { text-align: center; max-width: 620px; margin-top: 10px; }
.sec__label { display: block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.sec__cta { display: flex; justify-content: center; margin-top: 32px; }
.sec__claim { display: inline-block; margin: 18px auto 0; padding: 12px 22px; font-size: clamp(0.98rem, 1.5vw, 1.2rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.4; color: var(--accent-ink); background: var(--accent-soft); border-radius: 980px; }
@media (max-width: 700px) { .sec__claim { padding: 11px 16px; border-radius: 20px; } }
.sec__link { font-size: 0.86rem; font-weight: 700; color: var(--accent-ink); white-space: nowrap; }

/* проекты и награды */
.cases { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.case { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); }
.case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.case__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.case:hover .case__pic img { transform: scale(1.03); }
.case__body { display: block; padding: 22px 24px 26px; }
.case__meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }
.case__t { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 8px; }
.case__d { display: block; font-size: 0.85rem; line-height: 1.6; color: var(--ink-2); }
.awards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.award { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.award__pic { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-soft); }
.award__pic img { width: 100%; height: 100%; object-fit: cover; }
.award__body { display: block; padding: 20px 22px 24px; }
.award__year { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; color: var(--accent-ink); margin-bottom: 8px; }

/* реализованные проекты — по образцу premium: слайдер фото, метки, студия, цифры объекта */
.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pf { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow var(--transition), border-color var(--transition); }
.pf:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.pf__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); touch-action: pan-y; }
.pf__track { display: flex; height: 100%; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.pf__track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; }
.pf__arrow { position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -19px; display: flex; align-items: center; justify-content: center; padding: 0 0 3px; font-size: 1.5rem; line-height: 1; color: var(--ink); background: rgba(255, 255, 255, .92); border: 0; border-radius: 50%; box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; transition: opacity .25s ease, background-color .25s ease; }
.pf__arrow--prev { left: 12px; }
.pf__arrow--next { right: 12px; }
.pf__media:hover .pf__arrow, .pf__arrow:focus-visible { opacity: 1; }
.pf__arrow:hover { background: #ffffff; }
.pf__dots { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: flex; gap: 6px; transform: translateX(-50%); }
.pf__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .7); box-shadow: 0 0 0 1px rgba(12, 21, 18, .12); cursor: pointer; transition: background-color .25s ease, transform .25s ease; }
.pf__dot.is-on { background: var(--accent); transform: scale(1.3); }
.pf__body { padding: 24px 24px 28px; }
.pf__meta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink); }
.pf__t { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 6px; }
.pf__studio { font-size: 0.8rem; font-style: italic; color: var(--ink-2); margin-bottom: 12px; }
.pf__d { font-size: 0.88rem; line-height: 1.65; color: var(--ink-2); margin-bottom: 16px; }
.pf__d:last-child { margin-bottom: 0; }
.pf__specs { display: flex; flex-wrap: wrap; gap: 6px; }
.pf__specs span { padding: 5px 11px; font-size: 0.72rem; font-weight: 600; color: var(--ink-2); border: 1px solid var(--border-strong); border-radius: 980px; }
@media (hover: none) { .pf__arrow { opacity: 1; } }
@media (max-width: 800px) { .pf-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .pf__track { transition: none; } }

/* партнёрская сеть */
.net { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.netc { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.netc__r { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 9px; display: block; }
.netc__n { font-size: 0.92rem; font-weight: 800; margin-bottom: 4px; }
.netc__c { font-size: 0.79rem; color: var(--ink-2); line-height: 1.5; }
.net-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--accent-line, rgba(25,181,143,.3)); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.net-cta b { display: block; font-size: 1.05rem; font-weight: 800; margin-bottom: 5px; }
.net-cta span { font-size: 0.86rem; color: var(--ink-2); }

/* знания */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tile { display: flex; flex-direction: column; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color var(--transition), transform var(--transition); }
.tile:hover { border-color: var(--accent); transform: translateY(-3px); }
.tile b { font-size: 0.94rem; font-weight: 800; margin-bottom: 6px; }
.tile span { font-size: 0.8rem; color: var(--ink-2); line-height: 1.55; }
.tile i { font-style: normal; margin-top: 14px; font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); }

/* форма */
.cta-form { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.cta-form h2 { margin-bottom: 12px; }
.cta-form__lead { font-size: 0.95rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 26px; }
.contacts { display: flex; flex-direction: column; gap: 16px; }
.contact { display: flex; flex-direction: column; gap: 3px; }
.contact__l { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.contact__v { font-size: 0.95rem; font-weight: 700; }
.contact__s { font-size: 0.8rem; color: var(--ink-2); }
.form { padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 13px 15px; font-size: 0.9rem; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 18px; font-size: 0.76rem; color: var(--ink-2); line-height: 1.5; }
.consent input { margin-top: 2px; flex: none; }

/* подвал-хаб */
.foot { padding: clamp(40px, 5vw, 64px) 0 28px; background: var(--bg-soft); border-top: 1px solid var(--border); }
.foot__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.foot__logo { --logo-h: 22px; display: inline-flex; align-items: baseline; margin-bottom: 14px; }
.foot__logo img { height: var(--logo-h); width: auto; }
.foot__about { font-size: 0.82rem; color: var(--ink-2); line-height: 1.65; max-width: 300px; }
.foot__t { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.foot__list { display: flex; flex-direction: column; gap: 9px; }
.foot__list a { font-size: 0.86rem; color: var(--ink); }
.foot__list a:hover { color: var(--accent-ink); }
.foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 20px; font-size: 0.78rem; color: var(--ink-2); }
.foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }

@media (max-width: 1000px) {
  .net, .tiles { grid-template-columns: 1fr 1fr; }
  .awards { grid-template-columns: 1fr 1fr; }
  .cta-form { grid-template-columns: 1fr; gap: 28px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .sec__head { flex-direction: column; align-items: flex-start; }
  .sec__desc { text-align: left; }
  .net, .tiles { grid-template-columns: 1fr; }
  .cases, .awards { grid-template-columns: 1fr; }
  .net-cta { flex-direction: column; align-items: flex-start; }
  .foot__grid { grid-template-columns: 1fr; gap: 24px; }
}

/* пять систем: кладка 3 + 2 */
.sysgrid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sysgrid--5 > .syscard { grid-column: span 2; }
.sysgrid--5 > .syscard:nth-child(4), .sysgrid--5 > .syscard:nth-child(5) { grid-column: span 3; }
@media (max-width: 1000px) {
  .sysgrid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sysgrid--5 > .syscard, .sysgrid--5 > .syscard:nth-child(4), .sysgrid--5 > .syscard:nth-child(5) { grid-column: auto; }
  .sysgrid--5 > .syscard:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 700px) {
  .sysgrid--5 { grid-template-columns: 1fr; }
  .sysgrid--5 > .syscard:nth-child(5) { grid-column: auto; }
}

.contact__map { color: var(--accent-ink); font-weight: 600; border-bottom: 1px solid rgba(10,127,99,.3); }
.contact__map:hover { border-bottom-color: var(--accent-ink); }
.contact__v a:hover { color: var(--accent-ink); }
.offices { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 26px; }
.office { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.office__ph { aspect-ratio: 3 / 2; background: repeating-linear-gradient(135deg, #eef1f0, #eef1f0 12px, #e7ebe9 12px, #e7ebe9 24px); display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 0.76rem; text-align: center; padding: 12px; }
.office__b { padding: 16px 18px; }
.office__c { font-size: 0.9rem; font-weight: 800; margin-bottom: 3px; }
.office__a { font-size: 0.79rem; color: var(--ink-2); line-height: 1.5; }
@media (max-width: 700px) { .offices { grid-template-columns: 1fr; } }

/* кнопка-ссылка с play */
.btn-play { display: inline-flex; align-items: center; gap: 10px; padding: 15px 8px; font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.btn-play:hover { color: var(--accent-ink); }
.btn-play__ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 0.62rem; }

/* интерфейсы: видео + два скриншота */
.ui-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 18px; align-items: stretch; }
.ui-video, .ui-shot { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition); }
.ui-video:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.ui-video__poster { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #020604, #0a1a14 55%, #020604); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 22px; text-align: center; }
.ui-video__play { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1rem; box-shadow: 0 10px 30px rgba(25,181,143,.35); }
.ui-video__hint { font-size: 0.84rem; font-weight: 700; color: #fff; line-height: 1.5; }
.ui-video__hint span { display: block; margin-top: 6px; font-size: 0.72rem; font-weight: 400; color: #b0b0b0; }
.ui-shot__pic { aspect-ratio: 16 / 10; background: #020604; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ui-shot__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ui-shot__pic--app { background: #020604; }
.ui-shot__pic--app img { object-fit: contain; padding: 0 0 6px; }
.ui-cap { padding: 18px 20px; }
.ui-cap b { display: block; font-size: 0.94rem; font-weight: 800; margin-bottom: 5px; }
.ui-cap span { font-size: 0.8rem; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 1000px) { .ui-grid { grid-template-columns: 1fr 1fr; } .ui-video { grid-column: span 2; } }
@media (max-width: 700px) { .ui-grid { grid-template-columns: 1fr; } .ui-video { grid-column: auto; } .btn-play { padding: 12px 0; } }

/* ============ «Как управлять?» — витрина с вкладками ============ */
/* картинки в витрине — фиксированного размера, меняются только на узких экранах */
.ways { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 22px; align-items: stretch; }
.ways__list { display: flex; flex-direction: column; gap: 8px; }
.ways__tab { position: relative; display: block; width: 100%; padding: 16px 20px 16px 24px; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: 16px; cursor: pointer; transition: background-color var(--transition), border-color var(--transition), box-shadow var(--transition); }
.ways__tab:hover { background: var(--bg-soft); }
.ways__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ways__tab.is-on { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-md); }
.ways__tab::before, .ways__tab::after { content: ''; position: absolute; left: 0; top: 18px; width: 3px; border-radius: 3px; }
.ways__tab::before { bottom: 18px; background: var(--border); }
.ways__tab::after { height: 0; background: var(--accent); }
.ways__tab.is-on::after { height: calc(100% - 36px); }
.ways.is-auto .ways__tab.is-on::after { animation: ways-progress 5s linear; }
@keyframes ways-progress { from { height: 0; } to { height: calc(100% - 36px); } }
.ways__t { display: block; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; }
.ways__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s ease; }
.ways__more > span { overflow: hidden; }
.ways__tab.is-on .ways__more { grid-template-rows: 1fr; }
.ways__d { display: block; padding-top: 6px; font-size: 0.84rem; line-height: 1.6; color: var(--ink-2); }
.ways__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ways__tags .tag { padding: 5px 11px; font-size: 0.72rem; }
.ways__stage { position: relative; min-height: 470px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #ffffff 0%, var(--bg-soft) 70%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.ways__pic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s ease, transform .5s ease; pointer-events: none; }
.ways__pic.is-on { opacity: 1; transform: none; }
.ways__pic img { display: block; flex: none; max-width: none; }
.ways__img--phone, .ways__img--alice { width: auto; }
.ways__img--screen, .ways__img--switch { height: auto; }
.ways__pic--drop img { filter: drop-shadow(0 12px 18px rgba(12, 21, 18, .13)); }
.ways__img--phone { height: 400px; }
.ways__img--screen { width: 470px; }
.ways__img--alice { height: 280px; }
.ways__img--switch { width: 230px; }
.ways__cap { display: none; }
.tag { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 980px; font-size: 0.78rem; font-weight: 600; }
.tag--green { background: var(--accent-soft); color: var(--accent-ink); }

/* сценарии — вместо картинки */
.scn { display: flex; flex-direction: column; gap: 10px; width: 330px; }
.scn__r { display: flex; align-items: center; gap: 8px; padding: 9px 12px 9px 9px; background: #ffffff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 0.8rem; line-height: 1.3; }
.scn__if { flex: none; padding: 5px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.scn__do { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
  .ways__pic, .ways__more { transition: none; }
}

/* ============ схема «Как это устроено» ============ */
/* связи рисуются линиями: --n — колонок в ряду, --g — зазор; линия идёт от центра первой карточки к центру последней */
.topo { --g: 18px; }
.topo__cap { display: block; margin-bottom: 10px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.topo__row { position: relative; display: grid; gap: var(--g); }
.topo__row--4 { --n: 4; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.topo__row--3 { --n: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.topo__c { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-sm); }
.topo__pic { display: flex; align-items: center; justify-content: center; height: 118px; margin-bottom: 12px; }
.topo__img--h { height: 108px; width: auto; }
.topo__img--w { width: 100%; max-width: 172px; height: auto; }
.topo__img--ctrl { height: 108px; width: auto; max-width: 100%; }
.topo__ico { width: 112px; height: 76px; }
.topo__t { display: block; font-size: 0.86rem; font-weight: 800; line-height: 1.35; }
.topo__d { display: block; margin-top: 4px; font-size: 0.74rem; color: var(--ink-2); }
.topo__band { position: relative; display: flex; align-items: center; justify-content: center; height: 64px; }
.topo__band::before { content: ''; position: absolute; top: 50%; height: 2px; background-color: #bfe6da; background-repeat: no-repeat;
  left: calc((100% - (var(--n) - 1) * var(--g)) / (2 * var(--n))); right: calc((100% - (var(--n) - 1) * var(--g)) / (2 * var(--n))); }
.topo__band--4 { --n: 4; }
.topo__band--3 { --n: 3; }
.topo__pill { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 980px; font-size: 0.78rem; font-weight: 800; color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.topo__pill--wire { flex-wrap: wrap; justify-content: center; gap: 7px; padding: 8px 14px; max-width: 100%; color: var(--ink-2); font-weight: 700; }
.topo__pill--wire i { font-style: normal; font-weight: 800; color: var(--accent-ink); margin-right: 2px; }
.topo__pill--wire span { padding: 3px 10px; background: var(--bg-soft); border-radius: 980px; font-size: 0.74rem; white-space: nowrap; }
.topo__row--4 .topo__c::after, .topo__c--down::after { content: ''; position: absolute; left: 50%; bottom: -32px; width: 2px; height: 32px; background-color: #bfe6da; background-repeat: no-repeat; }
.topo__row--3 .topo__c::before { content: ''; position: absolute; left: 50%; top: -32px; width: 2px; height: 32px; background-color: #bfe6da; background-repeat: no-repeat; }
.topo__sys { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 22px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-sm); }
.topo__sys::before { content: ''; position: absolute; left: 50%; top: -32px; width: 2px; height: 32px; background-color: #bfe6da; background-repeat: no-repeat; }
.topo__sys li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; background: var(--accent-ink); color: #ffffff; border-radius: 980px; font-size: 0.78rem; font-weight: 700; }
.topo__sys li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ffffff; }
/* появление при прокрутке: уровни сверху вниз, за ними линии */
.topo.js .topo__c, .topo.js .topo__pill, .topo.js .topo__sys li { opacity: 0; transform: translateY(12px); }
.topo.js .topo__c::after, .topo.js .topo__c::before, .topo.js .topo__sys::before { transform: scaleY(0); }
.topo.js .topo__row--4 .topo__c::after, .topo.js .topo__c--down::after { transform-origin: top; }
.topo.js .topo__row--3 .topo__c::before, .topo.js .topo__sys::before { transform-origin: bottom; }
.topo.js .topo__band::before { transform: scaleX(0); }
.topo.js.is-in .topo__c, .topo.js.is-in .topo__pill, .topo.js.is-in .topo__sys li { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s cubic-bezier(.25,.9,.4,1); }
.topo.js.is-in .topo__c::after, .topo.js.is-in .topo__c::before, .topo.js.is-in .topo__sys::before { transform: scaleY(1); transition: transform .45s ease; }
.topo.js.is-in .topo__band::before { transform: scaleX(1); transition: transform .6s ease; }
.topo.js.is-in .topo__row--4 .topo__c:nth-child(1) { transition-delay: 0ms; }
.topo.js.is-in .topo__row--4 .topo__c:nth-child(2) { transition-delay: 80ms; }
.topo.js.is-in .topo__row--4 .topo__c:nth-child(3) { transition-delay: 160ms; }
.topo.js.is-in .topo__row--4 .topo__c:nth-child(4) { transition-delay: 240ms; }
.topo.js.is-in .topo__row--4 .topo__c::after { transition-delay: 340ms; }
.topo.js.is-in .topo__band--4::before { transition-delay: 420ms; }
.topo.js.is-in .topo__band--4 .topo__pill { transition-delay: 520ms; }
.topo.js.is-in .topo__row--3 .topo__c::before { transition-delay: 600ms; }
.topo.js.is-in .topo__row--3 .topo__c:nth-child(1) { transition-delay: 640ms; }
.topo.js.is-in .topo__row--3 .topo__c:nth-child(2) { transition-delay: 720ms; }
.topo.js.is-in .topo__row--3 .topo__c:nth-child(3) { transition-delay: 800ms; }
.topo.js.is-in .topo__c--down::after { transition-delay: 900ms; }
.topo.js.is-in .topo__band--3::before { transition-delay: 960ms; }
.topo.js.is-in .topo__band--3 .topo__pill { transition-delay: 1040ms; }
.topo.js.is-in .topo__sys::before { transition-delay: 1100ms; }
.topo.js.is-in .topo__sys li { transition-duration: .4s; }
.topo.js.is-in .topo__sys li:nth-child(n) { transition-delay: calc(1140ms + 40ms * var(--k, 0)); }

/* дальше по связям идут импульсы сигнала */
.topo.is-live .topo__c::after, .topo.is-live .topo__c::before, .topo.is-live .topo__sys::before {
  background-image: linear-gradient(to bottom, rgba(25,181,143,0) 0%, #19b58f 50%, rgba(25,181,143,0) 100%);
  background-size: 100% 60%; animation: topo-down 2.8s linear infinite; }
.topo.is-live .topo__band::before {
  background-image: linear-gradient(to right, rgba(25,181,143,0) 0%, #19b58f 50%, rgba(25,181,143,0) 100%);
  background-size: 26% 100%; animation: topo-right 3.4s linear infinite; }
.topo.is-live .topo__row--4 .topo__c:nth-child(2)::after { animation-delay: .5s; }
.topo.is-live .topo__row--4 .topo__c:nth-child(3)::after { animation-delay: 1s; }
.topo.is-live .topo__row--4 .topo__c:nth-child(4)::after { animation-delay: 1.5s; }
.topo.is-live .topo__row--3 .topo__c:nth-child(2)::before { animation-delay: .7s; }
.topo.is-live .topo__row--3 .topo__c:nth-child(3)::before { animation-delay: 1.4s; }
.topo.is-live .topo__c--down::after { animation-delay: .9s; }
.topo.is-live .topo__band--3::before { animation-delay: 1.2s; }
.topo.is-live .topo__sys::before { animation-delay: 1.8s; }
@keyframes topo-down { from { background-position: 50% -60%; } to { background-position: 50% 160%; } }
@keyframes topo-right { from { background-position: -30% 50%; } to { background-position: 130% 50%; } }
@media (prefers-reduced-motion: reduce) {
  .topo.js .topo__c, .topo.js .topo__pill, .topo.js .topo__sys li { opacity: 1; transform: none; }
  .topo.js .topo__c::after, .topo.js .topo__c::before, .topo.js .topo__sys::before, .topo.js .topo__band::before { transform: none; }
  .topo.is-live .topo__c::after, .topo.is-live .topo__c::before, .topo.is-live .topo__sys::before, .topo.is-live .topo__band::before { animation: none; background-image: none; }
}

@media (max-width: 1000px) {
  .topo__img--w { max-width: 140px; }
  .topo__ico { width: 96px; height: 64px; }
  .topo__pill--wire { font-size: 0.72rem; }
}
@media (max-width: 700px) {
  .topo__row--4 { --n: 2; grid-template-columns: 1fr 1fr; }
  .topo__row--3 { --n: 1; grid-template-columns: 1fr; }
  .topo__row--4 .topo__c::after, .topo__c--down::after, .topo__row--3 .topo__c::before { display: none; }
  .topo__band::before { left: 50%; right: auto; top: 0; bottom: 0; height: auto; width: 2px; }
  .topo__band { height: auto; min-height: 54px; padding: 16px 0; }
  .topo__pic { height: 96px; }
  .topo__img--h { height: 88px; }
  .topo__sys li { font-size: 0.74rem; padding: 7px 12px; }
}

/* ============ оборудование и ПО ============ */
.prod { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.prod__c, .soft__c { display: flex; flex-direction: column; padding: 14px 14px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.prod__c:hover, .soft__c:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.prod__pic, .soft__pic { display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: radial-gradient(ellipse at 50% 45%, #ffffff 0%, var(--bg-soft) 74%); border-radius: 14px; overflow: hidden; }
.prod__pic { height: 190px; }
.prod__pic img { max-width: 76%; max-height: 150px; width: auto; height: auto; filter: drop-shadow(0 12px 18px rgba(12, 21, 18, .13)); }
.prod__img--blend { mix-blend-mode: multiply; filter: none; max-width: 100%; max-height: 178px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 54%, rgba(0,0,0,0) 76%);
  mask-image: radial-gradient(ellipse at 50% 48%, #000 54%, rgba(0,0,0,0) 76%); }
.prod__img--dev { max-width: 100%; max-height: 150px; width: auto; }
.prod__t { display: block; padding: 0 10px; font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 7px; }
.prod__d { display: block; padding: 0 10px; font-size: 0.82rem; line-height: 1.6; color: var(--ink-2); }

.soft { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.soft__c--wide { grid-column: span 2; }
.soft__pic { height: 320px; }
.soft__c--wide .soft__pic { height: 380px; }
.soft__img--phone { height: 290px; width: auto; }
.soft__img--tablet { width: 82%; max-width: 420px; height: auto; }
.soft__img--admin { width: 62%; max-width: 620px; height: auto; }
.feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 28px; }
.feats__i { position: relative; padding-left: 16px; font-size: 0.84rem; font-weight: 600; color: var(--ink-2); }
.feats__i::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
@media (max-width: 1000px) {
  .prod { grid-template-columns: 1fr 1fr; }
  .soft__img--admin { width: 78%; }
}
@media (max-width: 700px) {
  .prod { grid-template-columns: 1fr; }
  .soft { grid-template-columns: 1fr; }
  .soft__c--wide { grid-column: auto; }
  .soft__pic, .soft__c--wide .soft__pic { height: 240px; }
  .soft__img--phone { height: 210px; }
  .soft__img--tablet, .soft__img--admin { width: 88%; }
}

/* ============ схема «Чем управлять?» ============ */
/* координаты плашек и линий — в пикселях исходника 1653×1159, --u — один такой пиксель */
.scheme { max-width: 1100px; margin: 0 auto clamp(26px, 3vw, 44px); }
.scheme__stage { position: relative; container-type: inline-size; }
.scheme__stage > img { display: block; width: 100%; height: auto; }
.scheme__svg { position: absolute; top: 0; left: 0; width: 100%; height: auto; overflow: visible; }
.scheme__line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 7 7; transition: stroke-width var(--transition), opacity .5s ease; }
.scheme__spot { fill: var(--accent); stroke: #ffffff; stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3,1.6,.5,1); }
.scheme__ring { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.scheme__g { transition: opacity var(--transition); }
.scheme__labels { --u: calc(100cqw / 1653); position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.scheme__pin { position: absolute; transform: translateY(-50%); display: inline-flex; align-items: center; gap: calc(10 * var(--u)); height: max(22px, calc(38 * var(--u))); padding: 0 calc(17 * var(--u)) 0 calc(14 * var(--u)); font-size: max(11px, calc(21 * var(--u))); font-weight: 700; line-height: 1; color: #ffffff; background: var(--accent-ink); border-radius: 980px; white-space: nowrap; cursor: default; transition: background-color var(--transition), opacity .45s ease, transform .45s cubic-bezier(.3,1.4,.5,1); }
.scheme__pin--r { flex-direction: row-reverse; padding: 0 calc(14 * var(--u)) 0 calc(17 * var(--u)); }
.scheme__pin::before { content: ''; flex: none; width: max(10px, calc(20 * var(--u))); height: max(10px, calc(20 * var(--u))); border-radius: 50%; background: #ffffff; }

/* появление при прокрутке: класс .js ставит скрипт, без скрипта всё видно сразу */
.scheme.js .scheme__pin { opacity: 0; transform: translateY(-50%) scale(.8); }
.scheme.js .scheme__line { opacity: 0; }
.scheme.js .scheme__spot { transform: scale(0); }
.scheme.js.is-in .scheme__pin { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: calc(var(--i) * 70ms); }
.scheme.js.is-in .scheme__line { opacity: 1; transition-delay: calc(var(--i) * 70ms + 250ms); }
.scheme.js.is-in .scheme__spot { transform: scale(1); transition-delay: calc(var(--i) * 70ms + 450ms); }

/* активная система: сигнал бежит по линии к устройству */
.scheme__pin.is-active { background: var(--accent-ink); }
.scheme__pin.is-active::before { animation: scheme-dot 1.6s ease-out; }
.scheme__g.is-active .scheme__line { stroke-width: 4; animation: scheme-flow .8s linear infinite; }
.scheme__g.is-active .scheme__ring { animation: scheme-ring 1.6s ease-out; }
.scheme__g.is-active .scheme__spot { fill: var(--accent-ink); }
.scheme.is-focus .scheme__pin:not(.is-active) { opacity: .45; }
.scheme.is-focus .scheme__g:not(.is-active) { opacity: .3; }
@keyframes scheme-flow { to { stroke-dashoffset: -28; } }
@keyframes scheme-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }
@keyframes scheme-ring-m { 0% { opacity: .9; transform: scale(2.4); } 100% { opacity: 0; transform: scale(8); } }
@keyframes scheme-dot { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.85); } 100% { box-shadow: 0 0 0 max(8px, calc(16 * var(--u))) rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) {
  .scheme__pin, .scheme__line, .scheme__spot, .scheme__g { transition: none; }
  .scheme__pin.is-active::before, .scheme__g.is-active .scheme__line, .scheme__g.is-active .scheme__ring { animation: none; }
}

@media (max-width: 1000px) {
  .ways__stage { min-height: 420px; }
  .ways__img--phone { height: 360px; }
  .ways__img--screen { width: 420px; }
}
@media (max-width: 860px) {
  /* вкладки становятся чипсами над витриной */
  .ways { grid-template-columns: 1fr; gap: 14px; }
  .ways__list { flex-direction: row; overflow-x: auto; gap: 8px; margin: 0 -24px; padding: 2px 24px 6px; scrollbar-width: none; }
  .ways__list::-webkit-scrollbar { display: none; }
  .ways__tab { flex: none; width: auto; padding: 9px 15px; border-color: var(--border); border-radius: 980px; }
  .ways__tab::before, .ways__tab::after, .ways__more { display: none; }
  .ways__t { font-size: 0.84rem; white-space: nowrap; }
  .ways__tab.is-on { background: var(--ink); border-color: var(--ink); box-shadow: none; }
  .ways__tab.is-on .ways__t { color: #ffffff; }
  .ways__cap { display: block; min-height: calc(0.84rem * 1.6 * 3); }
  .ways__cap .ways__d { padding-top: 0; }
  .ways__cap .ways__tags { display: none; }
}
@media (max-width: 700px) {
  .ways__stage { min-height: 300px; }
  .ways__img--phone { height: 260px; }
  .ways__img--screen { width: 280px; }
  .ways__img--alice { height: 200px; }
  .ways__img--switch { width: 160px; }
  .scn { width: 268px; gap: 8px; }
  .scn__r { font-size: 0.72rem; padding: 7px 10px 7px 7px; }
  .scheme { overflow: hidden; }
  .scheme__stage { width: 116%; margin-left: -15%; container-type: normal; }
  .scheme__line { display: none; }
  .scheme__labels { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: calc(100% / 1.16); margin: 18px 0 0 calc(15% / 1.16); }
  .scheme__pin, .scheme__pin--r { position: static; flex-direction: row; gap: 7px; height: auto; padding: 7px 12px 7px 9px; font-size: 0.78rem; }
  .scheme__pin::before { width: 9px; height: 9px; }
  .scheme.js .scheme__pin, .scheme.js.is-in .scheme__pin { transform: none; }
  .scheme__pin.is-active::before { animation: none; }
  .scheme__spot, .scheme.js.is-in .scheme__spot { transform: scale(2.4); }
  .scheme__g.is-active .scheme__ring { animation-name: scheme-ring-m; }
}

/* ============ шапка: мобильное меню ============ */
.burger { display: none; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform var(--transition), opacity var(--transition); }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mnav { display: none; flex-direction: column; gap: 4px; padding: 16px 24px 22px; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
.mnav.is-open { display: flex; }
.mnav__link { padding: 12px 0; font-size: 1rem; font-weight: 700; border-bottom: 1px solid var(--border); }
.mnav__phone { padding: 14px 0 10px; font-size: 1rem; font-weight: 800; }
.mnav .btn { justify-content: center; }

@media (max-width: 1000px) {
  .hdr__nav { display: none; }
  .burger { display: inline-flex; }
  .hdr__inner { justify-content: space-between; }
}
@media (max-width: 700px) {
  .hdr__phone, .hdr__cta { display: none; }
}

/* ============ модальное окно с видео ============ */
.btn-play__dur { margin-left: 10px; padding: 3px 9px; border-radius: 980px; background: var(--bg-soft); color: var(--ink-2); font-size: 0.72rem; font-weight: 700; }
.vmodal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.vmodal[hidden] { display: none; }
.vmodal__overlay { position: absolute; inset: 0; background: rgba(2, 6, 4, .72); backdrop-filter: blur(6px); }
.vmodal__box { position: relative; width: min(1060px, 100%); background: #020604; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px rgba(2, 6, 4, .5); }
.vmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; }
.vmodal__title { font-size: 0.88rem; font-weight: 700; color: #fff; }
.vmodal__close { width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; font-size: 0.85rem; cursor: pointer; transition: background var(--transition); }
.vmodal__close:hover { background: rgba(255,255,255,.2); }
.vmodal__frame { position: relative; aspect-ratio: 16 / 9; background: #020604; }
.vmodal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 700px) { .vmodal { padding: 14px; } .vmodal__title { font-size: 0.8rem; } }

/* ============ попап с документами ============ */
.dmodal { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 24px; }
.dmodal[hidden] { display: none; }
.dmodal__bd { position: absolute; inset: 0; background: rgba(2, 6, 4, .6); backdrop-filter: blur(6px); }
.dmodal__win { position: relative; display: flex; flex-direction: column; width: min(1080px, 100%); max-height: 92vh; background: var(--surface); border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px rgba(2, 6, 4, .35); }
.dmodal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.dmodal__t { font-size: 0.95rem; font-weight: 800; }
.dmodal__x { width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; background: var(--bg-soft); color: var(--ink); font-size: 0.85rem; cursor: pointer; transition: background var(--transition); }
.dmodal__x:hover { background: var(--border); }
.dmodal__body { display: grid; gap: 22px; padding: 22px; overflow-y: auto; }
.dmodal__body--two { grid-template-columns: 1fr 1fr; }
.dmodal__fig { margin: 0; }
.dmodal__body:not(.dmodal__body--two) .dmodal__fig { width: min(640px, 100%); margin: 0 auto; }
.dmodal__fig img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #ffffff; }
.dmodal__fig figcaption { margin-top: 10px; font-size: 0.78rem; line-height: 1.5; color: var(--ink-2); }
.dmodal__fig a { color: var(--accent-ink); font-weight: 700; }
@media (max-width: 700px) {
  .dmodal { padding: 12px; }
  .dmodal__body, .dmodal__body--two { grid-template-columns: 1fr; padding: 16px; gap: 18px; }
}

/* партнёрская сеть: карточка партнёра с контактами */
.pnet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.pcard { display: flex; flex-direction: column; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.pcard__role { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 10px; }
.pcard__n { font-size: 1.2rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 4px; }
.pcard__reg { font-size: 0.9rem; font-weight: 700; margin-bottom: 12px; }
.pcard__addr { font-size: 0.82rem; color: var(--ink-2); line-height: 1.5; margin-bottom: 8px; }
.pcard__d { font-size: 0.84rem; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
.pcard__contacts { display: flex; flex-direction: column; margin-top: auto; border-top: 1px solid var(--border); }
.pcard__row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 0.86rem; transition: color var(--transition); }
.pcard__row:hover { color: var(--accent-ink); }
.pcard__k { color: var(--ink-2); flex: none; }
.pcard__v { font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.pcard__msgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pcard__msg { display: inline-flex; align-items: center; padding: 8px 16px; font-size: 0.8rem; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: 980px; transition: background-color var(--transition); }
.pcard__msg:hover { background: rgba(25, 181, 143, .18); }
@media (max-width: 800px) { .pnet { grid-template-columns: 1fr; } }

.soft__link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin: 14px 10px 0; font-size: 0.86rem; font-weight: 700; color: var(--ink); transition: color var(--transition); }
.soft__link:hover { color: var(--accent-ink); }

/* ============ анимации по образцу premium ============ */
/* свечение первого экрана идёт за курсором: позицию задаёт скрипт через transform */
.hero.is-live .hero__glow { top: 0; left: 0; will-change: transform; }

/* появление: класс .anim на <html> ставит скрипт, без скрипта и при «уменьшении движения» всё видно сразу */
.anim .rv { opacity: 0; transform: translateY(40px); filter: blur(10px);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1), filter 1s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--d, 0s); }
.anim .hero .rv { transform: translateY(28px); filter: blur(16px); transition-duration: 1.4s; }
.anim .rv.is-in { opacity: 1; transform: none; filter: none; }
.anim .rv-img img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
.anim .rv-img.is-in img { transform: scale(1); }
/* клетка проявляется вокруг свечения и движется вместе с ним; центр --mx/--my задаёт тот же скрипт */
.hero.is-live::after {
  background-image:
    linear-gradient(rgba(12, 21, 18, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 21, 18, 0.05) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%);
}
/* у нижней границы первого экрана свечение и клетка растворяются, без жёсткого обреза */
.hero.is-live .hero__glow {
  opacity: var(--go, 1);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--fe, 2000px) - 220px), transparent var(--fe, 2000px));
  mask-image: linear-gradient(to bottom, #000 calc(var(--fe, 2000px) - 220px), transparent var(--fe, 2000px));
}
.hero.is-live::after {
  opacity: var(--go, 1);
  -webkit-mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%), linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%), linear-gradient(to bottom, #000 calc(100% - 200px), transparent);
  mask-composite: intersect;
}
/* то же у верхней границы: свечение и клетка растворяются к шапке */
.hero.is-live .hero__glow {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fs, -2000px), #000 calc(var(--fs, -2000px) + 200px), #000 calc(var(--fe, 2000px) - 220px), transparent var(--fe, 2000px));
  mask-image: linear-gradient(to bottom, transparent var(--fs, -2000px), #000 calc(var(--fs, -2000px) + 200px), #000 calc(var(--fe, 2000px) - 220px), transparent var(--fe, 2000px));
}
.hero.is-live::after {
  -webkit-mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%), linear-gradient(to bottom, transparent, #000 160px, #000 calc(100% - 200px), transparent);
  mask-image: radial-gradient(ellipse 520px 380px at var(--mx, 50%) var(--my, 15%), #000 0%, transparent 78%), linear-gradient(to bottom, transparent, #000 160px, #000 calc(100% - 200px), transparent);
}
/* попап документов: мягкое проявление фона и лёгкий подъём окна */
.dmodal__bd { opacity: 0; transition: opacity .22s ease; }
.dmodal__win { opacity: 0; transform: translateY(12px) scale(.98); transition: opacity .22s ease, transform .28s cubic-bezier(.22, 1, .36, 1); }
.dmodal.is-open .dmodal__bd { opacity: 1; }
.dmodal.is-open .dmodal__win { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .dmodal__bd, .dmodal__win { transition: none; } }
/* подвал: пять колонок — о компании и четыре колонки ссылок */
.foot__grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 1000px) { .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__grid > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
/* заголовки секций везде по левому краю: бывшие центрированные — колонкой слева */
.sec__head--center { align-items: flex-start; text-align: left; }
.sec__head--center .sec__desc { text-align: left; }
.sec__head--center .sec__claim { margin-left: 0; margin-right: 0; }
.sec__head--center { gap: 0; }
.sec__head--center .sec__desc { margin-top: 12px; }

/* единая шапка секции: надпись, заголовок и описание колонкой слева, ссылка — справа на уровне заголовка */
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: end; margin-bottom: 32px; }
.sec__head > * { grid-column: 1; }
.sec__head .sec__link { grid-column: 2; grid-row: 1 / span 3; align-self: end; padding-bottom: 6px; }
.sec__head .sec__desc { max-width: 640px; margin-top: 12px; text-align: left; }
.sec__head .sec__claim { justify-self: start; margin: 18px 0 0; }
.sec__cta { justify-content: flex-start; }
@media (max-width: 700px) {
  .sec__head { grid-template-columns: 1fr; }
  .sec__head .sec__link { grid-column: 1; grid-row: auto; margin-top: 12px; padding-bottom: 0; }
}
.sec__head { row-gap: 0; }

/* шапки секций по центру: надпись, заголовок, описание и ссылка одной колонкой */
.sec__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; margin-bottom: 36px; }
.sec__head > *, .sec__head .sec__link { grid-column: 1; grid-row: auto; }
.sec__head .sec__desc { max-width: 640px; text-align: center; }
.sec__head .sec__link { align-self: auto; padding-bottom: 0; margin-top: 14px; }
.sec__head .sec__claim { justify-self: center; margin: 18px 0 0; }
.sec__cta { justify-content: center; }
@media (max-width: 700px) { .sec__head .sec__link { margin-top: 12px; } }

/* Юридические документы: политика и согласие */
.legal-hero { padding: clamp(36px, 5vw, 60px) 0 clamp(24px, 3vw, 36px); background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.legal-hero .crumbs { font-size: 0.8rem; color: var(--ink-3); margin-bottom: 16px; }
.legal-hero .crumbs a { color: var(--ink-2); }
.legal-hero .crumbs a:hover { color: var(--accent-ink); }
.legal-hero h1 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.015em; margin-bottom: 12px; }
.legal-hero__meta { font-size: 0.86rem; color: var(--ink-2); }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.legal-tabs a { padding: 9px 16px; border: 1px solid var(--border); border-radius: 980px; background: var(--surface); font-size: 0.82rem; font-weight: 600; color: var(--ink-2); transition: border-color var(--transition), color var(--transition); }
.legal-tabs a:hover { border-color: var(--accent); color: var(--accent-ink); }
.legal-tabs a[aria-current="page"] { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding-top: clamp(32px, 4.5vw, 56px); padding-bottom: clamp(48px, 6vw, 80px); }
.legal__toc { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 2px; font-size: 0.82rem; }
.legal__toc b { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.legal__toc a { padding: 6px 0 6px 12px; border-left: 2px solid var(--border); color: var(--ink-2); line-height: 1.4; transition: color var(--transition), border-color var(--transition); }
.legal__toc a:hover { color: var(--accent-ink); border-left-color: var(--accent); }
.legal__body { max-width: 760px; font-size: 0.95rem; line-height: 1.7; color: var(--ink); }
.legal__body h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 40px 0 14px; scroll-margin-top: 96px; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body p { margin: 0 0 12px; }
.legal__body ul { margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.legal__body li { position: relative; padding-left: 20px; }
.legal__body li::before { content: ''; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.legal__body a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.legal__card { margin: 0 0 28px; padding: 20px 22px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 0.88rem; }
.legal__card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.legal__card dt { color: var(--ink-2); }
.legal__card dd { margin: 0; font-weight: 600; }
.legal__note { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 0.84rem; color: var(--ink-2); }
.consent a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px) {
  .legal { grid-template-columns: minmax(0, 1fr); }
  .legal__toc { display: none; }
}
@media (max-width: 560px) {
  .legal__card dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .legal__card dd { margin-bottom: 8px; }
}

/* Награды: наведение как на premium — карточка приподнимается, рамка в акцент, фото приближается */
.award { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.award__pic img { transition: transform var(--transition); }
@media (hover: hover) {
  .award:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-md); }
  .award:hover .award__pic img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .award, .award__pic img { transition: none; }
  .award:hover, .award:hover .award__pic img { transform: none; }
}

/* Проекты: наведение как на premium — карточка приподнимается, рамка в акцент, фото приближается.
   Приближаем ленту целиком (свойство scale складывается со сдвигом слайдера), а не отдельные кадры:
   иначе соседний кадр выступает по краю */
.pf { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.pf__track { transition: transform .45s cubic-bezier(.22, 1, .36, 1), scale .6s ease; }
@media (hover: hover) {
  .pf:hover { transform: translateY(-6px); border-color: rgba(25, 181, 143, 0.55); box-shadow: var(--shadow-lg); }
  .pf:hover .pf__track { scale: 1.04; }
}
@media (prefers-reduced-motion: reduce) {
  .pf, .pf__track { transition: none; }
  .pf:hover { transform: none; }
  .pf:hover .pf__track { scale: none; }
}

/* Поля и кнопки по умолчанию берут системный шрифт — наследуем Mulish */
button, input, select, textarea { font-family: inherit; }

/* Список: своя стрелка с отступом от края вместо системной, прижатой к рамке */
.field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%231f1f1f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Сообщение формы и ловушка для ботов */
.form__note { margin-top: 12px; font-size: 0.84rem; line-height: 1.5; color: var(--ink-2); }
.form__note--ok { color: var(--accent-ink); font-weight: 700; }
.form__note--error { color: #b3261e; }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form { position: relative; }

/* Страница 404 */
.nf { min-height: calc(100vh - var(--header-h)); display: flex; align-items: center; background: var(--bg-soft); }
.nf__inner { padding-top: 64px; padding-bottom: 64px; text-align: center; }
.nf h1 { font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; margin: 12px 0 14px; }
.nf p { max-width: 520px; margin: 0 auto 28px; color: var(--ink-2); }
.nf__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Уведомление о cookie: слева внизу (справа — виджет менеджера), над контентом, под окнами */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 140; width: min(440px, calc(100vw - 48px)); padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease; }
.cookie.is-on { opacity: 1; transform: none; }
.cookie[hidden] { display: none; }
.cookie__text { font-size: 0.86rem; line-height: 1.55; color: var(--ink-2); margin-bottom: 14px; }
.cookie__text a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.foot__cookie { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.foot__cookie:hover { color: var(--accent-ink); }
@media (max-width: 700px) {
  /* место справа под кнопку виджета менеджера (56 px + отступ) */
  .cookie { left: 12px; right: 84px; bottom: 12px; width: auto; padding: 16px; }
  .cookie__actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; transform: none; } }