/* ============================================================
   ERMAXAGENCY — immersive dark (v1)
   Палитра: Void #05070C · Panel #0B0F17 · Ice #E9EFF6
            Fog #7C8794 · Pulse #5FD4FF · Ion #8B7CF6
   ============================================================ */

@font-face{font-family:'Unbounded';src:url('../assets/fonts/Unbounded-400.woff2') format('woff2'),url('../assets/fonts/Unbounded-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Unbounded';src:url('../assets/fonts/Unbounded-600.woff2') format('woff2'),url('../assets/fonts/Unbounded-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Unbounded';src:url('../assets/fonts/Unbounded-800.woff2') format('woff2'),url('../assets/fonts/Unbounded-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-400.woff2') format('woff2'),url('../assets/fonts/Inter-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-500.woff2') format('woff2'),url('../assets/fonts/Inter-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-700.woff2') format('woff2'),url('../assets/fonts/Inter-700.ttf') format('truetype');font-weight:700;font-display:swap}

:root{
  --void:#05070C;
  --panel:#0B0F17;
  --panel-2:#0E1420;
  --line:rgba(150,180,220,.12);
  --ice:#E9EFF6;
  --fog:#7C8794;
  --pulse:#5FD4FF;
  --ion:#8B7CF6;
  --glow:0 0 24px rgba(95,212,255,.35), 0 0 64px rgba(139,124,246,.18);
  --disp:'Unbounded',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.65,.05,0,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--void);
  color:var(--ice);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--pulse);color:var(--void)}

a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--pulse);outline-offset:3px;border-radius:2px}

.container{width:min(1240px,92vw);margin:0 auto}

/* ---------- WebGL фон ---------- */
#gl-bg{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;display:block;
}
main,.header,.footer,.marquee{position:relative;z-index:1}

/* ---------- Прелоадер ---------- */
/* z-index выше чат-виджета (9700/9800) и cookie-баннера: пока занавес на
   экране, поверх него не должно быть ничего, кроме букв. */
.loader{
  position:fixed;inset:0;z-index:99995;
  background:var(--void);
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:2rem;
}
.js .loader{display:flex}
.loader-brand{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(1.4rem,4.5vw,2.6rem);
  letter-spacing:.06em;
  overflow:hidden;
}
.loader-brand b{color:var(--pulse);font-weight:800;text-shadow:var(--glow)}
.loader-brand .ldr-ch{display:inline-block;transform:translateY(120%)}
/* Правка 31.07: процент и линия прогресса убраны — в занавесе только буквы,
   центрированные по обеим осям (.loader уже flex/center/center). */
.loader.done{pointer-events:none}
/* --- splash-заставка подстраниц (letters-вариант .loader-word) ---
   Показывается БЕЗ глобального .js-гейта (на подстраницах есть data-reveal/data-split,
   которые .js прячет), но только ПОСЛЕ того как скрипт вписал буквы → безопасно для no-JS. */
.loader{transition:opacity .55s ease}
.loader:has(.loader-word span){display:flex}
.loader-word{display:flex;gap:.02em;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.4rem,5vw,2.8rem);letter-spacing:.06em;color:var(--ice);
  text-shadow:0 0 1px rgba(0,0,0,.2)}
.loader-word span{display:inline-block;opacity:.28;transform:translateY(8px)}
.loader-word span:nth-child(n+6){color:var(--pulse);text-shadow:var(--glow)} /* «AGENCY» — фирменный cyan, как на index */
.loader-word span.pulse{animation:ldr-letter 1.15s cubic-bezier(.65,.05,0,1) infinite}
@keyframes ldr-letter{0%,100%{opacity:.28;transform:translateY(8px)}45%{opacity:1;transform:translateY(0)}}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .loader-word span,.loader-word span.pulse{animation:none;opacity:1;transform:none}
  .loader-brand .ldr-ch{transform:none}
}

/* ---------- Курсор ---------- */
.cursor-dot,.cursor-ring{
  /* z-index максимально высокий: сайт прячет нативный курсор (cursor:none),
     поэтому свой курсор обязан рисоваться ПОВЕРХ любых оверлеев — гео-пикера
     (99995), карточки локали (99988), тоста (99996), чат-виджета (9800),
     модалок заказа (9000). Иначе над панелью диалога курсора не видно вообще
     и кнопки («Показать все услуги», крестик) кажутся неживыми. */
  position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none;
  border-radius:50%;will-change:transform;
}
.cursor-dot{width:6px;height:6px;background:var(--pulse);box-shadow:0 0 10px rgba(95,212,255,.8)}
.cursor-ring{
  width:36px;height:36px;border:1px solid rgba(95,212,255,.5);
  transition:width .25s,height .25s,border-color .25s,background .25s;
}
.cursor-ring.is-hover{width:56px;height:56px;border-color:rgba(139,124,246,.8);background:rgba(139,124,246,.08)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}

/* ---------- Шапка ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:transform .5s var(--ease),background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
.header.is-scrolled{background:rgba(5,7,12,.78);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.header.is-hidden{transform:translateY(-100%)}
.header-in{
  width:min(1400px,94vw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 0;
}
.logo{font-family:var(--disp);font-weight:800;font-size:1.02rem;letter-spacing:.04em;display:inline-block}
.logo b{color:var(--pulse);font-weight:800}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{font-size:.86rem;font-weight:500;color:var(--fog);transition:color .25s;position:relative}
.nav a:hover{color:var(--ice)}
.nav a:not(.btn-contact)::after{
  content:'';position:absolute;left:0;bottom:-5px;height:1px;width:0;
  background:var(--pulse);transition:width .35s var(--ease);
}
.nav a:not(.btn-contact):hover::after{width:100%}
.btn-contact{
  color:var(--ice)!important;border:1px solid var(--line);border-radius:99px;
  padding:.55rem 1.3rem;transition:border-color .3s,box-shadow .3s,background .3s;
  display:inline-block;
}
.btn-contact:hover{border-color:var(--pulse);box-shadow:var(--glow);background:rgba(95,212,255,.06)}

.burger{
  display:none;background:none;border:0;width:40px;height:40px;
  flex-direction:column;justify-content:center;align-items:center;gap:6px;z-index:130;position:relative;
}
.burger span{display:block;width:24px;height:2px;background:var(--ice);transition:transform .35s var(--ease),opacity .25s}
.burger.is-open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Мобильное меню ---------- */
.mnav{
  position:fixed;inset:0;z-index:90;
  background:rgba(5,7,12,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;justify-content:center;gap:1.4rem;
  padding:0 8vw;
  opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s;
}
.mnav.is-open{opacity:1;visibility:visible}
.mnav-brand{font-family:var(--disp);font-weight:800;font-size:.95rem;letter-spacing:.06em;color:var(--fog);margin-bottom:1.5rem}
.mnav-brand b{color:var(--pulse)}
.mnav a{
  font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,7vw,2.4rem);
  transform:translateY(30px);opacity:0;transition:transform .55s var(--ease),opacity .55s,color .3s;
}
.mnav.is-open a{transform:translateY(0);opacity:1}
.mnav a:hover{color:var(--pulse)}
.mnav.is-open a:nth-child(2){transition-delay:.06s}
.mnav.is-open a:nth-child(3){transition-delay:.12s}
.mnav.is-open a:nth-child(4){transition-delay:.18s}
.mnav.is-open a:nth-child(5){transition-delay:.24s}
.mnav.is-open a:nth-child(6){transition-delay:.3s}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  position:relative;padding:8rem 0 5rem;
}
.hero-eyebrow{
  font-size:.78rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pulse);margin-bottom:2.2rem;
}
.hero-title{
  font-family:var(--disp);font-weight:800;
  font-size:clamp(2rem,6.4vw,5.2rem);
  line-height:1.06;letter-spacing:-.01em;
  text-transform:uppercase;
  max-width:16ch;
}
.hero-title .st-char{display:inline-block}
/* herosplitfix 2026-08-11: слово — цельная inline-block коробка с nowrap.
   Без этого при ресайзе (шрифт героя завязан на vw, ширина — на ch) коробка
   слова остаётся со старой геометрией, буквы в неё не влезают и последняя
   уезжает на вторую строку — заголовок «рассыпается» на «ПОМОГ / У».
   nowrap делает такой перенос невозможным в принципе; сама геометрия
   пересчитывается пересборкой сплита в app.js (debounce 200мс). */
.hero-title .st-word{display:inline-block;white-space:nowrap}
.hero-sub{
  margin-top:2.4rem;max-width:52ch;color:var(--fog);font-size:clamp(1rem,1.4vw,1.15rem);
}
.hero-cta-row{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:3rem}

.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  color:var(--void);background:linear-gradient(120deg,var(--pulse),#9BE8FF);
  border:0;border-radius:99px;padding:1.05rem 2.1rem;
  box-shadow:var(--glow);
  transition:box-shadow .3s,filter .3s;
}
.btn-primary:hover{box-shadow:0 0 34px rgba(95,212,255,.55),0 0 90px rgba(139,124,246,.28);filter:brightness(1.06)}
.btn-arr{transition:transform .3s var(--ease);display:inline-block}
.btn-primary:hover .btn-arr{transform:translateX(5px)}
.btn-ghost{
  display:inline-flex;align-items:center;
  font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  color:var(--ice);border:1px solid var(--line);border-radius:99px;padding:1.05rem 2.1rem;
  transition:border-color .3s,background .3s;
}
.btn-ghost:hover{border-color:var(--pulse);background:rgba(95,212,255,.06)}

.hero-scroll-hint{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--fog);
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.hero-scroll-hint span{
  width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--pulse));
  animation:hint-drop 1.8s var(--ease) infinite;
}
@keyframes hint-drop{
  0%{transform:scaleY(0);transform-origin:top}
  45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:1.3rem 0;background:rgba(11,15,23,.55);backdrop-filter:blur(6px);
}
.marquee-track{display:inline-flex;animation:marquee 28s linear infinite;will-change:transform}
.marquee-track span{
  font-family:var(--disp);font-weight:400;font-size:.92rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fog);flex-shrink:0;
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- Секции ---------- */
.section{padding:8.5rem 0;position:relative}
.sec-label{
  font-size:.74rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pulse);margin-bottom:1.6rem;display:flex;align-items:center;gap:1rem;
}
.sec-label::before{content:'';width:34px;height:1px;background:var(--pulse);box-shadow:0 0 8px rgba(95,212,255,.7)}
.sec-title{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3.6vw,2.9rem);line-height:1.14;letter-spacing:-.005em;
  max-width:22ch;
}
.sec-title .st-line{display:block;overflow:hidden}
.sec-title .st-line-in{display:block}
.note{font-size:.83rem;color:var(--fog);max-width:78ch;margin-top:1.4rem}

/* ---------- Услуги (аккордеон) ---------- */
.services{margin-top:4rem;border-top:1px solid var(--line)}
.service{border-bottom:1px solid var(--line)}
.service-head{
  width:100%;background:none;border:0;color:var(--ice);text-align:left;
  display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:2rem;
  padding:2.4rem 0;transition:padding .35s var(--ease);
}
.service-head:hover .service-name{color:var(--pulse);text-shadow:0 0 22px rgba(95,212,255,.45)}
.service-num{
  font-family:var(--disp);font-weight:400;font-size:.85rem;color:var(--fog);
  min-width:2.4rem;
}
.service-name{
  font-family:var(--disp);font-weight:600;text-transform:uppercase;
  font-size:clamp(1.15rem,3vw,2.1rem);line-height:1.1;
  transition:color .3s,text-shadow .3s;
}
.service-tag{font-size:.78rem;color:var(--fog);letter-spacing:.06em;text-align:right}
.service-plus{position:relative;width:20px;height:20px;flex-shrink:0}
.service-plus::before,.service-plus::after{
  content:'';position:absolute;top:50%;left:50%;background:var(--pulse);
  transition:transform .4s var(--ease);box-shadow:0 0 8px rgba(95,212,255,.6);
}
.service-plus::before{width:20px;height:1.5px;transform:translate(-50%,-50%)}
.service-plus::after{width:1.5px;height:20px;transform:translate(-50%,-50%)}
.service.is-open .service-plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.service-body{height:0;overflow:hidden}
.service-body-in{padding:0 0 2.6rem}

.svc{
  display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:2.4rem;
  padding:1.5rem 0;border-top:1px solid rgba(150,180,220,.07);
  transition:background .3s;
}
.svc:hover{background:linear-gradient(90deg,rgba(95,212,255,.045),transparent 70%)}
.svc-info h4{font-family:var(--disp);font-weight:600;font-size:.98rem;margin-bottom:.5rem}
.svc-info p{font-size:.88rem;color:var(--fog);max-width:62ch}
.svc-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;white-space:nowrap}
.svc-price{
  font-family:var(--disp);font-weight:600;font-size:1.02rem;
  background:linear-gradient(120deg,var(--pulse),var(--ion));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.svc-term{font-size:.76rem;color:var(--fog);letter-spacing:.05em}
/* полировка 2026-07-24: кнопка «Заказать» сливалась с тёмным фоном (прозрачная,
   тусклая рамка) — теперь неоновая заливка --pulse с тёмным текстом (контраст
   к фону и текста к заливке > 3:1 WCAG), как fin-btn в статьях v1 */
.svc-order{
  background:var(--pulse);border:1px solid var(--pulse);border-radius:99px;color:var(--void);
  font-size:.78rem;font-weight:700;padding:.6rem 1.5rem;white-space:nowrap;
  box-shadow:0 0 16px rgba(95,212,255,.28);
  transition:border-color .3s,box-shadow .3s,background .3s,transform .3s;
}
.svc-order:hover{background:var(--ice);border-color:var(--ice);box-shadow:var(--glow);transform:translateY(-2px)}

/* ---------- Цифры ---------- */
.stats-sec{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:
    radial-gradient(60% 120% at 20% 0%,rgba(95,212,255,.06),transparent 60%),
    radial-gradient(50% 120% at 85% 100%,rgba(139,124,246,.07),transparent 60%),
    var(--panel);
  padding:5.5rem 0;
}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:3rem}
.stat b{
  display:block;font-family:var(--disp);font-weight:800;
  font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1;
  margin-bottom:1rem;white-space:nowrap;
  text-shadow:0 0 30px rgba(95,212,255,.3);
}
.stat i{font-style:normal;font-size:.85rem;color:var(--fog);display:block;max-width:26ch}

/* ---------- Идея ---------- */
.idea-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem;margin-top:4rem}
.idea-card{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:18px;padding:2.6rem 2.4rem;
  position:relative;overflow:hidden;
  transition:border-color .35s,transform .35s;
}
.idea-card::before{
  content:'';position:absolute;inset:0;opacity:0;transition:opacity .4s;
  background:radial-gradient(80% 90% at 50% 0%,rgba(95,212,255,.09),transparent 70%);
  pointer-events:none;
}
.idea-card:hover{border-color:rgba(95,212,255,.35)}
.idea-card:hover::before{opacity:1}
.idea-card h3{
  font-family:var(--disp);font-weight:600;font-size:1.12rem;margin-bottom:1.1rem;
  color:var(--pulse);
}
.idea-card p{font-size:.92rem;color:var(--fog)}

/* ---------- Обо мне ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.35fr;gap:5rem;align-items:center;margin-top:1rem}
.about-sign{
  aspect-ratio:4/5;border-radius:20px;position:relative;
  background:
    radial-gradient(70% 60% at 50% 40%,rgba(95,212,255,.14),transparent 70%),
    radial-gradient(70% 60% at 60% 80%,rgba(139,124,246,.16),transparent 70%),
    var(--panel-2);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.about-sign::before{
  content:'';position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(95,212,255,.3);
  box-shadow:inset 0 0 60px rgba(95,212,255,.12),0 0 60px rgba(95,212,255,.10);
  animation:sign-spin 14s linear infinite;
  border-top-color:var(--pulse);
}
@keyframes sign-spin{to{transform:rotate(360deg)}}
.about-sign span{
  font-family:var(--disp);font-weight:800;font-size:clamp(3rem,7vw,5.5rem);
  background:linear-gradient(140deg,var(--ice) 30%,var(--pulse));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;position:relative;
}

/* ---------- «ЕА» → фото (раскрутка инициалов, затем проявление портрета) ---------- */
.about-sign{perspective:900px}
.about-sign .sign-initials{
  position:relative;z-index:2;display:block;
  transform-style:preserve-3d;backface-visibility:hidden;
  will-change:transform,opacity;
}
.about-sign .sign-photo{
  position:absolute;inset:0;z-index:3;margin:0;display:block;
  opacity:0;visibility:hidden;will-change:opacity,transform,filter;
}
.about-sign .sign-photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 20%;
  display:block;filter:saturate(.93) contrast(1.04);
}
/* виньетка, чтобы портрет сел в тёмную палитру v1 */
.about-sign .sign-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(78% 66% at 50% 32%,transparent 52%,rgba(6,10,20,.5)),
    linear-gradient(180deg,transparent 60%,rgba(6,10,20,.45));
}
/* кольцо крутится как в оригинале (sign-spin 14s) — не ускоряем */
/* фолбэк: без GSAP или при prefers-reduced-motion — сразу фото */
.about-sign.no-fx .sign-initials{opacity:0}
.about-sign.no-fx .sign-photo{opacity:1;visibility:visible}
.about-text p{margin-top:1.5rem;color:var(--fog);max-width:62ch}
.about-stats{display:flex;gap:3.5rem;margin-top:3rem;flex-wrap:wrap}
.about-stats b{
  display:block;font-family:var(--disp);font-weight:800;font-size:2rem;line-height:1;
  margin-bottom:.6rem;white-space:nowrap;text-shadow:0 0 26px rgba(95,212,255,.3);
}
.about-stats i{font-style:normal;font-size:.8rem;color:var(--fog)}

/* ---------- Кейсы/отзывы placeholder ---------- */
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:3.4rem}
.ph-grid-2{grid-template-columns:repeat(2,1fr)}
.ph-card{
  border:1px dashed rgba(150,180,220,.22);border-radius:18px;
  min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  color:var(--fog);font-size:.9rem;text-align:center;padding:2rem;
  transition:border-color .35s,color .35s;
}
.ph-card:hover{border-color:rgba(95,212,255,.45);color:var(--ice)}
.ph-num{font-family:var(--disp);font-weight:400;font-size:1.5rem;color:var(--pulse);opacity:.75}

/* ---------- Этапы ---------- */
.epigraph{
  margin-top:1.6rem;font-style:italic;color:var(--fog);max-width:60ch;font-size:.95rem;
  border-left:2px solid var(--pulse);padding-left:1.4rem;
}
.steps{margin-top:4rem;display:flex;flex-direction:column}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:2.6rem;
  padding:2.8rem 0;border-top:1px solid var(--line);
}
.step:last-child{border-bottom:1px solid var(--line)}
.step-num{
  font-family:var(--disp);font-weight:800;font-size:clamp(1.8rem,4vw,3rem);line-height:1;
  background:linear-gradient(180deg,var(--pulse),var(--ion));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  min-width:2ch;
}
.step-body h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;margin-bottom:.9rem}
.step-body p{color:var(--fog);max-width:74ch;font-size:.94rem}

/* ---------- Контакт ---------- */
.contact{
  background:
    radial-gradient(70% 100% at 15% 20%,rgba(95,212,255,.06),transparent 60%),
    radial-gradient(60% 100% at 90% 90%,rgba(139,124,246,.08),transparent 60%);
}
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:start}
.contact-info p{margin-top:1.4rem;color:var(--fog);max-width:44ch}
.contact-direct{display:flex;flex-direction:column;gap:.9rem;margin-top:2.4rem}
.contact-direct a{
  font-family:var(--disp);font-weight:600;font-size:1.02rem;width:fit-content;
  transition:color .3s,text-shadow .3s;
}
.contact-direct a:hover{color:var(--pulse);text-shadow:0 0 20px rgba(95,212,255,.5)}

.form{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:20px;padding:2.6rem;
  display:flex;flex-direction:column;gap:1.2rem;
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field input,.field textarea{
  width:100%;background:rgba(5,7,12,.6);border:1px solid var(--line);border-radius:12px;
  color:var(--ice);font-family:var(--body);font-size:.92rem;padding:1rem 1.2rem;
  transition:border-color .3s,box-shadow .3s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:var(--fog)}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--pulse);box-shadow:0 0 0 3px rgba(95,212,255,.12);
}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.78rem;color:var(--fog);cursor:pointer}
.consent input{margin-top:.2rem;accent-color:var(--pulse)}
.form-submit{margin-top:.4rem;justify-content:center}
.form .note{margin-top:0}

/* ---------- Футер ---------- */
.footer{border-top:1px solid var(--line);padding:6rem 0 3rem;background:rgba(5,7,12,.85)}
.footer-cta{
  display:flex;align-items:center;justify-content:space-between;gap:3rem;
  padding-bottom:4.5rem;flex-wrap:wrap;
}
.footer-cta h2{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.6rem,4.6vw,3.4rem);line-height:1.1;max-width:14ch;
}
.footer-cta h2 .st-line{display:block;overflow:hidden}
.footer-cta h2 .st-line-in{display:block}
.ring-btn{
  width:150px;height:150px;border-radius:50%;flex-shrink:0;
  border:1px solid var(--pulse);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--disp);font-weight:600;font-size:.8rem;line-height:1.4;
  box-shadow:var(--glow);
  transition:background .35s,box-shadow .35s,color .35s;
  position:relative;
}
.ring-btn:hover{background:rgba(95,212,255,.1);box-shadow:0 0 40px rgba(95,212,255,.5),0 0 110px rgba(139,124,246,.25)}
.footer-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:3rem;
  border-top:1px solid var(--line);padding-top:3.4rem;align-items:start;}
.col-title{
  font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--pulse);
  margin-bottom:1.3rem;
}
.footer-col a{display:block;color:var(--fog);font-size:.88rem;padding:.28rem 0;transition:color .25s}
.footer-col a:hover{color:var(--ice)}
.soc-cols{display:flex;gap:2.6rem;flex-wrap:wrap}
.footer-bottom{
  margin-top:4rem;padding-top:1.8rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.72rem;color:var(--fog);
}

/* ---------- data-reveal базовое состояние ---------- */
.js [data-reveal]{opacity:0;transform:translateY(36px)}
.js .sec-title[data-split],.js .footer-cta h2[data-split]{visibility:hidden}
.js .sec-title[data-split].st-ready,.js .footer-cta h2[data-split].st-ready{visibility:visible}

/* ---------- Адаптив ---------- */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(2,1fr);gap:2.4rem}
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .about-sign{max-width:340px}
  .contact-grid{grid-template-columns:1fr;gap:3.4rem}
  .ph-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .section{padding:5.5rem 0}
  .nav{display:none}
  .burger{display:flex}
  .hero-title{max-width:none}
  .idea-grid{grid-template-columns:1fr}
  .ph-grid,.ph-grid-2{grid-template-columns:1fr}
  .service-head{grid-template-columns:auto 1fr auto;gap:1.1rem;padding:1.8rem 0}
  .service-tag{display:none}
  /* sweep24 (директива 2026-07-24): мобильный порядок карточки услуги —
     цена (градиент, слева) → срок (слева, СВОЕЙ строкой НАД кнопкой) →
     кнопка «Заказать» (справа, строкой ниже). Прошлый вариант «срок и кнопка
     на одной линии» отменён пользователем. */
  .svc{grid-template-columns:minmax(0,1fr) auto;gap:.55rem .8rem;align-items:center}
  .svc-info{grid-column:1/-1}
  .svc-meta{display:contents}
  .svc-price{grid-column:1/-1;grid-row:2;justify-self:start}
  .svc-term{grid-column:1/-1;grid-row:3;justify-self:start}
  .svc-order{width:fit-content;grid-column:1/-1;grid-row:4;justify-self:end;margin-top:.35rem}
  .form{padding:1.8rem}
  .form-row{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:2rem}
  .step{grid-template-columns:1fr;gap:1rem;padding:2.2rem 0}
  .footer-grid{grid-template-columns:1fr;gap:2.4rem}
  .footer-cta{justify-content:center;text-align:center}
  .footer-cta h2{max-width:none}
  .footer-bottom{flex-direction:column}
  .marquee-track{animation-duration:18s}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .sec-title[data-split],.js .footer-cta h2[data-split]{visibility:visible}
  .marquee-track{animation:none}
}

/* ==== Защита контента (protect.js companion) ==== */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable],
a[href^="tel:"], a[href^="mailto:"],
.contact-direct a, .contact-row {
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
}
img, video { -webkit-user-drag: none; }

/* CTA в шапке — как остальные пункты меню (подчёркивание вместо рамки) */
.nav .btn-contact{color:var(--fog)!important;border:0;border-radius:0;padding:0;background:none!important;box-shadow:none!important}
.nav .btn-contact:hover{color:var(--ice)!important}
.nav .btn-contact::after{content:'';position:absolute;left:0;bottom:-5px;height:1px;width:0;background:var(--pulse);transition:width .35s var(--ease)}
.nav .btn-contact:hover::after{width:100%}

/* ============================================================
   Кнопка звука (.sound-toggle) — неоновый эквалайзер в шапке.
   Состояние .on ставит движок /v1/js/variant-sound.js.
   ============================================================ */
.header-in{justify-content:flex-start;gap:1.3rem}
.nav{margin-left:auto}
.sound-toggle{
  width:42px;height:42px;border-radius:50%;flex-shrink:0;
  background:none;border:1px solid var(--line);
  display:inline-flex;align-items:flex-end;justify-content:center;gap:3px;
  padding:0 0 14px;
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.sound-toggle span{
  display:block;width:2px;height:4px;border-radius:2px;
  background:var(--fog);opacity:.8;
  transition:background .3s,height .3s,opacity .3s;
}
.sound-toggle:hover{border-color:var(--pulse);box-shadow:var(--glow);background:rgba(95,212,255,.06)}
.sound-toggle:hover span{background:var(--ice)}
.sound-toggle.on{border-color:rgba(95,212,255,.55);box-shadow:0 0 18px rgba(95,212,255,.28)}
.sound-toggle.on span{
  background:linear-gradient(180deg,var(--pulse),var(--ion));opacity:1;
  animation:eq-bounce 1.05s ease-in-out infinite;
  box-shadow:0 0 6px rgba(95,212,255,.6);
}
.sound-toggle.on span:nth-child(1){animation-delay:-.15s}
.sound-toggle.on span:nth-child(2){animation-delay:-.55s}
.sound-toggle.on span:nth-child(3){animation-delay:-.9s}
.sound-toggle.on span:nth-child(4){animation-delay:-.35s}
@keyframes eq-bounce{0%,100%{height:5px}50%{height:14px}}
@media (max-width:768px){
  .sound-toggle{margin-left:auto;width:38px;height:38px;padding-bottom:12px}
}

/* ============================================================
   Подстраницы v1 (бриф / договор / политика / cookie)
   ============================================================ */
.page-main{position:relative;z-index:1;padding:9.5rem 0 6rem}
.page-head{margin-bottom:3rem}
.doc-wrap{width:min(900px,92vw);margin:0 auto}
.doc-card{
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:20px;
  padding:clamp(1.5rem,4.5vw,3.2rem);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
}
.doc-body{font-size:.92rem;line-height:1.7;color:rgba(233,239,246,.82)}
.doc-body h1{
  font-family:var(--disp);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.5rem);line-height:1.3;text-align:center;
  margin-bottom:.5rem;color:var(--ice);
}
.doc-body .doc-sub{text-align:center;color:var(--fog);font-size:.8rem;margin-bottom:2rem}
.doc-body h2{
  font-family:var(--disp);font-weight:600;font-size:1rem;
  margin:2rem 0 .8rem;color:var(--pulse);
}
.doc-body h4{
  font-family:var(--disp);font-weight:600;font-size:.95rem;
  margin:1.9rem 0 .7rem;color:var(--pulse);
}
.doc-body p{margin-bottom:.65rem;overflow-wrap:anywhere;word-break:break-word;max-width:100%;text-align:justify;text-align-last:left}
.doc-body ul{margin:.3rem 0 .9rem 1.3rem}
.doc-body li{margin-bottom:.35rem}
.doc-body a{color:var(--pulse);text-decoration:underline;overflow-wrap:anywhere}
.ph{
  background:rgba(95,212,255,.12);color:var(--pulse);
  /* правый padding подсветки визуально отрывал следующий за плейсхолдером знак
     препинания («неоном ,» на dogovor.html) — компенсируем отрицательным
     margin: подсветка остаётся той же ширины, запятая встаёт вплотную */
  border-radius:4px;padding:0 .3em;margin-right:-.3em;font-weight:600;
  overflow-wrap:anywhere;word-break:break-word;max-width:100%;
}
.doc-note{
  border:1px solid rgba(95,212,255,.35);background:rgba(95,212,255,.06);
  border-radius:12px;padding:1rem 1.2rem;font-size:.85rem;margin-bottom:2rem;
  color:rgba(233,239,246,.85);text-align:justify;
}
/* подпись сторон: аккуратный перенос без выхода за край (2026-07-22 wf) */
.doc-sign{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;text-align:left!important;text-align-last:left!important}
.doc-sign span.mp{white-space:nowrap;opacity:.85}
.doc-download{display:flex;justify-content:center;margin:1.2rem 0 2rem}
.doc-download .btn-primary{gap:.55rem}
.legal-toc{display:flex;gap:1rem;flex-wrap:wrap;margin:0 0 2.2rem}
.legal-toc a{
  font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.04em;
  border:1px solid var(--line);border-radius:99px;padding:.6rem 1.4rem;
  color:var(--ice);transition:border-color .3s,box-shadow .3s,background .3s;
}
.legal-toc a:hover{border-color:var(--pulse);box-shadow:var(--glow);background:rgba(95,212,255,.06)}
.legal-sec{scroll-margin-top:6.5rem}
.legal-sec + .legal-sec{margin-top:3.5rem}
@media print{
  .header,.mnav,.footer,.doc-note,.doc-download,#gl-bg,.sound-toggle{display:none!important}
  body{background:#fff;color:#111}
  .doc-card{box-shadow:none;border:0;padding:0;background:none}
  .doc-body{color:#111}
  .ph{background:none;color:#111}
}

/* футер: колонка «Документы» (4 колонки на десктопе) */
.footer-grid{grid-template-columns:1.1fr 1.6fr 1fr 1fr}
@media (max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:768px){.footer-grid{grid-template-columns:1fr}}

/* CTA «Заполнить бриф» в контактах */
.contact-brif-cta{margin-top:1.8rem;display:inline-flex}

/* тост отправки форм (EMXForms.showToast) */
.emx-toast{
  position:fixed;left:50%;bottom:2rem;transform:translate(-50%,20px);
  display:flex;gap:.7rem;align-items:center;
  background:linear-gradient(160deg,var(--panel-2),var(--panel));
  border:1px solid rgba(95,212,255,.4);border-radius:14px;
  padding:1rem 1.4rem;color:var(--ice);font-size:.9rem;
  max-width:min(92vw,480px);z-index:300;
  opacity:0;transition:opacity .4s,transform .4s;box-shadow:var(--glow);
}
.emx-toast.show{opacity:1;transform:translate(-50%,0)}
.emx-toast-ico{color:var(--pulse);display:flex;flex-shrink:0}

/* ховер-превью услуги: карточка с ценой у курсора (неон v1) */
.svc-preview{position:fixed;top:0;left:0;z-index:90;pointer-events:none;
  background:rgba(10,14,20,.92);color:var(--ice);border:1px solid var(--pulse);
  border-radius:14px;padding:1.1rem 1.4rem;min-width:230px;
  display:flex;flex-direction:column;gap:.3rem;opacity:0;transform:scale(.9);
  transition:opacity .2s,transform .25s;box-shadow:0 0 34px rgba(95,212,255,.28);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.svc-preview.on{opacity:1}
.svc-preview-label{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.svc-preview-price{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--pulse)}
.svc-preview-term{font-size:.75rem;color:var(--fog)}
@media (hover:none),(max-width:900px){.svc-preview{display:none}}

/* контраст кнопки скачивания DOCX */
.doc-download .btn-primary{color:#06121c!important;font-weight:800;text-decoration:none!important;text-shadow:none}

/* кнопка брифа в CTA-блоке подвала: своя группа справа, не ломаем базовый flex */
.footer-cta .footer-brif-btn{align-self:center;max-width:100%;flex-shrink:1}
@media(max-width:700px){.footer-cta .footer-brif-btn{width:100%;justify-content:center}}

/* чат в палитре v1: immersive dark (Void #05070C · Pulse #5FD4FF · Ion #8B7CF6).
   Один общий виджет (/v1/css/chat-widget.css) читает эти --chat-* переменные. */
:root #ai-chat{
  --chat-bg:#0B0F17;
  --chat-text:#E9EFF6;
  --chat-muted:#7C8794;
  --chat-accent:#5FD4FF;
  --chat-accent-2:#8B7CF6;
  --chat-accent-text:#05070C;
  --chat-bubble-in:#111A28;
  --chat-bubble-in-text:#E9EFF6;
  --chat-bubble-in-border:rgba(139,124,246,.28);
  --chat-bubble-out:#5FD4FF;
  --chat-bubble-out-text:#05070C;
  --chat-border:rgba(150,180,220,.16);
  --chat-head-bg:#05070C;
  --chat-head-text:#E9EFF6;
  --chat-input-bg:#0E1420;
  --chat-input-area-bg:#0B0F17;
  --chat-online:#5FD4FF;
  --chat-radius:16px;
  --chat-bubble-radius:13px;
  --chat-cta-bg:#5FD4FF;
  --chat-shadow:0 24px 70px rgba(0,0,0,.6), 0 0 42px rgba(95,212,255,.14);
  --chat-fab-shadow:0 0 24px rgba(95,212,255,.45);
}
#ai-chat .chat-fab{background:#0d1a24;border:1px solid #5fd4ff;color:#5fd4ff}

/* фикс CTA-блока подвала: заголовок не должен налезать на кольцевую кнопку */
.footer-cta{display:flex;align-items:center;justify-content:space-between;gap:2.5rem;flex-wrap:wrap;position:relative}
.footer-cta h2{font-size:clamp(1.8rem,4.6vw,3.6rem)!important;line-height:1.12;max-width:16ch;overflow-wrap:break-word;margin:0}
.footer-cta .ring-btn{flex-shrink:0}
@media(max-width:700px){.footer-cta{justify-content:center;text-align:center}}

/* страховка: заголовок CTA всегда уступает место кнопке */
.footer-cta h2{flex:1 1 0;min-width:0}

/* CTA: заголовок чуть правее, увеличенный зазор до кнопки */
@media(min-width:701px){.footer-cta{gap:3.5rem}.footer-cta h2{margin-left:3.5rem}}

/* корень наложения: где-то стоит nowrap — разрешаем перенос строк заголовка */
.footer-cta h2{white-space:normal!important}

/* ---------- Модалка заказа услуги ---------- */
.order-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.order-modal[hidden]{display:none}
.order-backdrop{
  position:absolute;inset:0;background:rgba(3,5,10,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .45s var(--ease);
}
.order-modal.is-open .order-backdrop{opacity:1}
.order-dialog{
  position:relative;width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:
    radial-gradient(80% 50% at 50% 0%,rgba(95,212,255,.10),transparent 70%),
    radial-gradient(70% 50% at 100% 100%,rgba(139,124,246,.12),transparent 70%),
    var(--panel);
  border:1px solid var(--line);border-radius:22px;
  padding:2.4rem 2.2rem 2rem;
  box-shadow:0 30px 90px rgba(0,0,0,.6),var(--glow);
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.order-modal.is-open .order-dialog{opacity:1;transform:none}
.order-close{
  position:absolute;top:1.1rem;right:1.1rem;width:38px;height:38px;border-radius:50%;
  background:rgba(5,7,12,.6);border:1px solid var(--line);cursor:pointer;
  transition:border-color .3s,transform .3s;
}
.order-close::before,.order-close::after{
  content:'';position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:var(--ice);
}
.order-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.order-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.order-close:hover{border-color:var(--pulse);transform:rotate(90deg)}
.order-head{margin-bottom:1.6rem}
.order-title{
  font-family:var(--disp);font-weight:800;font-size:clamp(1.4rem,3.4vw,1.9rem);
  line-height:1.15;margin:.5rem 0 0;
}
.order-svc{
  margin-top:1rem;padding:.85rem 1.1rem;border-radius:12px;
  background:rgba(95,212,255,.07);border:1px solid rgba(95,212,255,.22);
  font-size:.9rem;color:var(--ice);line-height:1.4;
}
.order-svc b{display:block;font-family:var(--disp);font-weight:700;font-size:.95rem;margin-bottom:.15rem}
.order-svc i{font-style:normal;color:var(--fog);font-size:.8rem}
.order-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.order-form .field{margin-bottom:1rem}
.order-form .consent{margin-bottom:1.2rem}
body.order-locked{overflow:hidden}
@media(max-width:600px){
  .order-dialog{padding:2rem 1.4rem 1.6rem;border-radius:18px}
  .order-form .form-row{grid-template-columns:1fr}
}

/* ---------- Курсор над чат-виджетом ----------
   Сайт прячет нативный курсор (cursor:none) и рисует свой, но тот лежит
   ниже панели чата (z-index 150 против 9800) — над виджетом курсора не видно
   вообще, и чат кажется нерабочим. Возвращаем нативный курсор внутри чата. */
/* кольцо-курсор над кнопкой «Заказать» — уходит в сторону и сжимается,
   чтобы не накрывать кнопку (смещение задаёт JS, размер — здесь) */
.cursor-ring.is-aside{width:22px;height:22px;border-color:rgba(95,212,255,.55);background:transparent;opacity:.55}

/* описания услуг: перебиваем тусклый #5b5d61, протёкший из общего chat-widget.css;
   делаем ярче описаний этапов (--fog) для читаемости, по просьбе — «чуть ярче» */
.svc .svc-info p{color:#9BA7B6}

/* ================= ФИКСЫ ЗАМЕЧАНИЙ 2026-07-21 (v1, адаптив сохранён) ================= */
/* A1-3/A1-4: при открытом мобильном меню — скрыть звук шапки (крестик-бургер остаётся),
   держать шапку на месте (не прятать при скролле), заблокировать скролл фона (без дёрганья) */
body.mnav-open{overflow:hidden}
body.mnav-open .header{transform:none !important}
body.mnav-open .sound-toggle{opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
/* ПРАВКА ВЛАДЕЛЬЦА 12.08.2026: в шапке открытого бургер-оверлея было пусто —
   один крестик. Лого ERMAXAGENCY остаётся на месте слева от крестика (шапка
   z-index:100 лежит выше оверлея .mnav z-index:90, поэтому лого читается
   поверх затемнения и работает как выход на главную). */
body.mnav-open .logo{opacity:1;pointer-events:auto;position:relative;z-index:130}
/* A1-4: плавнее анимация открытия/закрытия меню */
.mnav{transition:opacity .5s var(--ease),visibility .5s var(--ease),transform .55s var(--ease)}

@media (max-width:768px){
  /* A1-1: кнопки «Заказать» к правому краю строки услуги */
  .svc-order{justify-self:end;margin-left:auto}
  /* A1-2: «Давайте работать вместе» — без переносов частей слов (keep-all + подгон шрифта) */
  .footer-cta h2{overflow-wrap:normal !important;word-break:keep-all !important;hyphens:none !important;
    font-size:clamp(1.5rem,7.2vw,2.3rem) !important;max-width:none}
  /* A1-5: hero-CTA ближе к правому краю (удобнее большому пальцу) */
  .hero-cta-row{justify-content:flex-end}
}

/* ================= КАП «≤3 строки» для заголовков/подзаголовков (2026-07-22) =================
   Требование: каждый заголовок и подзаголовок ≤3 строк на 1440 / 768 / 390 (все страницы).
   Правится ТОЛЬКО типографика (font-size через clamp, max-width, text-wrap:balance,
   line-height подзаголовка на узких экранах). Дизайн, раскладка, секции, WebGL и анимации
   не тронуты. Значения подобраны замерами Playwright на всех трёх брейкпоинтах.
   Остальные заголовки (.sec-title, .footer-cta h2, doc h1/h2/h4, brif h2) уже ≤3 строк —
   их не меняем. Единственные превышавшие: hero-title и hero-sub на index. */

/* Hero H1: исходный max-width:16ch держал ~16 симв/строку → 4–5 строк на всех ширинах.
   Смягчаем кап до 18ch и слегка уменьшаем кегль clamp'ом → ровно 3 строки везде.
   На ≤768 сохраняем исходное поведение (заголовок во всю ширину контейнера). */
.hero-title{font-size:clamp(1.35rem,4.6vw,4.2rem);max-width:18ch;text-wrap:balance}
@media (max-width:768px){ .hero-title{max-width:none} }

/* Hero-подзаголовок: балансируем строки; на узких экранах чуть уменьшаем кегль и интерлиньяж,
   чтобы уложиться в 3 строки (текст также минимально сокращён в HTML с сохранением смысла). */
.hero-sub{text-wrap:balance}
@media (max-width:640px){ .hero-sub{font-size:.9rem;line-height:1.5} }
/* v1: «Три направления…» — в 2 строки (2026-07-22) */
#uslugi .sec-title{ font-size:clamp(1.5rem,3.6vw,3rem) !important; max-width:28ch !important; text-wrap:balance !important; }

/* Реквизиты в футере (2026-07-22) — адаптив 2 кол → 1 на мобилке */
.footer-info{ border-top:1px solid rgba(128,128,128,.28); margin-top:1.6rem; padding-top:1.4rem; }
.footer-info .fi-name{ font-weight:600; margin:0 0 .8rem; font-size:.95rem; }
.footer-info .fi-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 2.2rem; font-size:.83rem; line-height:1.5; opacity:.82; }
.footer-info .fi-list li{ margin:0; }
.footer-info .fi-list b{ font-weight:600; opacity:.95; }
@media (max-width:640px){ .footer-info .fi-list{ grid-template-columns:1fr; } }

/* футер-реквизиты: компактная одна строка (2026-07-22) */
.footer-info{ border-top:1px solid rgba(128,128,128,.22) !important; margin-top:1.1rem !important; padding-top:.9rem !important; }
.footer-info p{ margin:0 !important; font-size:.76rem !important; line-height:1.55 !important; opacity:.68 !important; max-width:none !important; }
.footer-info b{ font-weight:600 !important; opacity:.95 !important; }

/* футер: короткий копирайт без гигантского отступа (2026-07-22 wf) */
.footer-info + .footer-bottom{ margin-top:1.4rem !important; padding-top:1.1rem !important; }

/* Hero-подзаголовок wf: длинный, жирнее, вторая фраза акцентом (2026-07-22) */
.hero-sub--bold{
  max-width:58ch;
  color:var(--ice);
  font-weight:600;
  opacity:.94;
  text-wrap:balance;
}
.hero-sub--bold .hero-sub-accent{
  display:inline;
  color:var(--pulse);
  font-weight:700;
}
@media (max-width:640px){ .hero-sub--bold{ font-size:.94rem; line-height:1.55; } }

/* v1 mobile: «ИИ-автоматизация» в одну строку (2026-07-22 wf) */
@media (max-width:640px){
  .service-name{ white-space:nowrap; font-size:clamp(1rem,4.4vw,1.35rem); letter-spacing:-.01em; }
  .service-head{ gap:.9rem; }
}
@media (max-width:360px){
  .service-name{ font-size:4.2vw; }
}
@media (max-width:820px){ .hero-cta-row{ justify-content:center !important; } }

/* --- Соцсети: 2 столбца × 5 (soc-2x5) — добавлен TikTok, 10 ссылок --- */
.soc-2x5{display:grid;grid-template-columns:1fr;gap:.4rem;align-content:start;}
.soc-2x5 a{ white-space:nowrap; margin-bottom:0; }
@media (max-width:560px){ .soc-2x5{ gap:.35rem 1.1rem; } }
@media (max-width:360px){ .soc-2x5{ gap:.3rem .7rem; } }

/* ==== D7 (briffix): landscape-телефон / узкий десктоп ====
   Полный nav v1 (7 пунктов + RU|EN) вписывается только от ~970px:
   на 844×390 он вылезал за край, sound-toggle и переключатель были
   недостижимы. До 980px уходим в burger/mnav (как v2 на 860px). */
@media (max-width:980px){
  .nav{display:none}
  .burger{display:flex}
}
/* Низкий вьюпорт (телефон в landscape): полноэкранное меню не вмещало
   все пункты по вертикали и не скроллилось — ужимаем и даём скролл. */
@media (max-height:520px){
  .mnav{justify-content:flex-start;overflow-y:auto;padding-top:4.2rem;padding-bottom:1.6rem;gap:.9rem}
  .mnav a{font-size:1.15rem}
  .mnav-brand{margin-bottom:.4rem}
}

/* sweep24 (директива 2026-07-24): заголовок футер-CTA («Давайте работать вместе» /
   «Let's work together») на ≥1024px — строго ОДНОЙ строкой: снят потолок 16ch,
   флюидный кегль гарантирует влезание (RU длиннее — свой коэффициент), EN — свой.
   Мобильные (<1024) — прежнее поведение (перенос допустим, без расползания). */
@media (min-width:1024px){
  .footer-cta h2{max-width:none;white-space:nowrap;font-size:clamp(1.8rem,3.4vw,50px)!important}
  html[lang="en"] .footer-cta h2{font-size:clamp(1.8rem,4.3vw,3.6rem)!important}
}

/* ============================================================
   ЭТАП 5 (2026-07-25): каталог услуг вынесен на /uslugi/.
   Первый экран — две кнопки + вторичная ссылка + микротекст;
   на главной остаётся компактный анонс трёх направлений.
   ============================================================ */
.hero-cta-row.h5-actions{ align-items:center; gap:1rem; margin-top:2.2rem; }
.h5-btn2{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--disp);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  color:var(--ice);background:transparent;border:1px solid rgba(150,180,220,.34);
  border-radius:99px;padding:1.05rem 2.1rem;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.h5-btn2:hover{ border-color:var(--pulse); background:rgba(95,212,255,.08); box-shadow:0 0 24px rgba(95,212,255,.22); }
.h5-link{
  font-size:.86rem;color:var(--fog);text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;transition:color .25s;
}
.h5-link:hover{ color:var(--pulse); }
.h5-micro{ margin-top:1rem;font-size:.8rem;color:var(--fog);max-width:50ch; }

.h5-dirs{ display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:3rem; }
.h5-dir{
  display:flex;flex-direction:column;gap:.6rem;
  border:1px solid var(--line);border-radius:20px;padding:1.7rem;background:var(--panel);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s;
}
.h5-dir:hover{ transform:translateY(-6px);border-color:rgba(95,212,255,.42);box-shadow:0 0 32px rgba(95,212,255,.16); }
.h5-dir-num{ font-family:var(--disp);font-size:.8rem;font-weight:800;color:var(--pulse);letter-spacing:.1em; }
.h5-dir-name{ font-family:var(--disp);font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--ice);text-transform:uppercase;letter-spacing:-.005em; }
.h5-dir-desc{ font-size:.88rem;color:var(--fog);line-height:1.6;flex:1; }
.h5-dir-go{ margin-top:.3rem;font-size:.8rem;font-weight:600;color:var(--pulse);letter-spacing:.04em;margin-top:auto;align-self:flex-end;}
.h5-allrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.4rem;margin-top:2.4rem;
  padding-top:1.6rem;border-top:1px solid var(--line);
}
.h5-allnote{ font-size:.9rem;color:var(--fog);margin:0; margin-right:auto;}
.h5-allbtn{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:600;font-size:.8rem;letter-spacing:.04em;
  color:var(--void);background:linear-gradient(120deg,var(--pulse),#9BE8FF);
  border-radius:99px;padding:.95rem 1.9rem;box-shadow:var(--glow);
  transition:box-shadow .3s,filter .3s;
}
.h5-allbtn:hover{ box-shadow:0 0 34px rgba(95,212,255,.55);filter:brightness(1.06); }
@media (max-width:860px){
  .hero-cta-row.h5-actions{ gap:.7rem;margin-top:1.6rem; }
  .hero-cta-row.h5-actions .btn-primary,.hero-cta-row.h5-actions .h5-btn2{ padding:.85rem 1.4rem;font-size:.76rem; }
  .h5-micro{ margin-top:.8rem;font-size:.75rem; }
  .h5-allbtn{ margin-left:0; }
}

/* --- этап 5: телефон в альбомной ориентации (844×390) — обе кнопки без скролла --- */
@media (orientation:landscape) and (max-height:500px){
  .hero{ min-height:100svh; }
  .hero-in{ padding-top:0 !important; }
  .hero-eyebrow{ font-size:.66rem !important; margin-bottom:.4rem; }
  .hero-title{ font-size:clamp(1.4rem,3.6vw,2rem) !important; margin-top:.4rem !important; }
  .hero-sub{ margin-top:.7rem !important; font-size:.84rem !important; max-width:56ch; }
  .hero-cta-row.h5-actions{ margin-top:.8rem !important; gap:.5rem .7rem; }
  .hero-cta-row.h5-actions .btn-primary,.hero-cta-row.h5-actions .h5-btn2{ padding:.6rem 1.2rem !important; font-size:.72rem !important; }
  .h5-micro{ margin-top:.45rem !important; font-size:.7rem !important; }
  .hero-scroll-hint{ display:none !important; }
}

/* ==================== ЕДИНАЯ СЕТКА КОНТЕНТА (2026-07-26) ====================
   Эталон взят с главной v1: width:min(1240px, 92vw)
   -> 1920:340  1680:220  1440:100  1280:60.8  1024:41  834:33.4  768:30.7  390:15.6
   Обоснование: ~/ai-ops/plans/services-research/research_container_width.md
   ============================================================================ */
:root{
  --grid-max:1240px;
  --grid-fluid:92vw;
  --grid-measure:80ch;
}
.container,
.wrap,
.brif-wrap,
.doc-wrap,
.svc-container,
.al-container,
.art-container{
  width:min(var(--grid-max),var(--grid-fluid)) !important;
  max-width:min(var(--grid-max),var(--grid-fluid)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box !important;
}
.svc-page,.al-pagewrap,.art-pagewrap,.page-main,.page-wrap{
  max-width:none !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
.doc-card{max-width:900px !important;margin-left:0 !important;margin-right:auto !important;}
/* статья: колонка текста 720px + сайдбар 280px = 1064px; держим блок
   левым краем на сетке, без растягивания сайдбара к дальнему краю */
@media (min-width:1100px){.art-layout{max-width:1080px !important;margin-right:auto !important;}}
/* 3-line-guard (<=400px): заголовок первого экрана и заголовок юр. документа
   не должны превышать 3 строки. */
@media (max-width:400px){
  .hero-title{font-size:clamp(.95rem,4.4vw,1.05rem) !important;line-height:1.12 !important;text-wrap:balance;}
}
@media (max-width:430px){
  .doc-body h1{font-size:clamp(.75rem,3.4vw,.95rem) !important;line-height:1.24 !important;letter-spacing:0 !important;text-wrap:balance;}
  .art-title{font-size:clamp(.9rem,4.4vw,1.05rem) !important;line-height:1.2 !important;text-wrap:balance;}
}

/* Подвал: колонка — обычный столбик ссылок. Разбиение длинного списка
   на два столбца включает geo.js классом is-2col (см. ниже): auto-fill
   рвал короткие колонки на планшете, потому и убран. */
.footer-col { display: block; }
.footer-col .col-title { display: block; }
.footer-col .soc-2x5 { display: block; }
.footer-col a { display: block; width: max-content; max-width: 100%; }
/* Подвал: длинный список ссылок раскладывается на два столбца.
   Класс is-2col ставит geo.js по числу ВИДИМЫХ ссылок — часть их скрыта
   по гео, и на голом CSS колонка с двумя оставшимися ссылками всё равно
   делилась надвое. Заголовок колонки растянут на всю ширину, ссылка
   не разрывается между столбцами. */
.footer-col.is-2col,
.footer-col .is-2col { display: block !important; column-count: 2; column-gap: 1.2rem; }
.footer-col .soc-2x5.is-2col { display: block !important; }
.footer-col.is-2col > .col-title { column-span: all; }
.footer-col a { break-inside: avoid; }


/* Мобильный ряд кнопок каталога: русские подписи длиннее английских и
   раньше срывались в столбик — на телефоне обе кнопки делят ширину поровну
   и стоят рядом, как на английской версии. Подпись-счётчик уходит на свою
   строку сверху. */
@media (max-width:560px){
  .h5-allrow{ gap:.6rem; }
  .h5-allnote{ flex:1 1 100%; margin-right:0; }
  .h5-allbtn{ flex:1 1 0; min-width:0; justify-content:center;
    padding:.8rem .4rem; font-size:.7rem !important; letter-spacing:0 !important;
    white-space:nowrap; }
}
@media (max-width:350px){
  .h5-allbtn{ font-size:calc(.7rem - .06rem); padding:.7rem .3rem; }
}

/* Мобильное меню в структуре v2: левый нумерованный список с разделителями
   и контактный блок внизу. Номера и .mnav-foot добавляет geo.js (mnav-v2);
   шрифты и цвета — родные для сайта, здесь только раскладка. */
.mnav.mnav-v2{ align-items:stretch; text-align:left; justify-content:flex-start;
  padding:5.2rem 8vw 2.4rem; overflow-y:auto; gap:0; }
.mnav.mnav-v2 > a{ display:flex; align-items:baseline; gap:1rem; width:100%;
  margin:0; padding:.9rem 0; font-size:1.45rem;
  border-bottom:1px solid rgba(128,128,128,.28); }
.mnav.mnav-v2 > a > i{ font-style:normal; font-size:.72rem; font-weight:600;
  opacity:.55; min-width:1.7em; letter-spacing:.05em; }
.mnav.mnav-v2 .mnav-brand{ display:none; }
.mnav.mnav-v2 .mnav-foot{ margin-top:2rem; display:flex; flex-direction:column;
  gap:.6rem; }
.mnav.mnav-v2 .mnav-foot a{ font-size:.92rem; opacity:.78; padding:0; border:0;
  margin:0; width:auto; display:inline-flex; }
.mnav.mnav-v2 .mnav-foot a[hidden]{ display:none; }
.mnav.mnav-v2 .emx-lang-sw{ margin-top:1.3rem; justify-content:flex-start; }
/* Невысокие экраны: меню обязано помещаться целиком, без прокрутки вслепую */
@media (max-height:920px){
  .mnav.mnav-v2{ padding-top:4.3rem; }
  .mnav.mnav-v2 > a{ font-size:1.14rem; padding:.6rem 0; }
  .mnav.mnav-v2 .mnav-foot{ margin-top:1.1rem; gap:.45rem; }
  .mnav.mnav-v2 .mnav-foot a{ font-size:.84rem; }
  .mnav.mnav-v2 .emx-lang-sw{ margin-top:.85rem; }
}
@media (max-height:680px){
  .mnav.mnav-v2 > a{ font-size:1.02rem; padding:.48rem 0; }
}
/* Ландшафт телефона: пункты в два столбца, контакты в строку */
@media (max-height:520px) and (orientation:landscape){
  .mnav.mnav-v2{ display:grid; grid-template-columns:1fr 1fr;
    column-gap:2.2rem; align-content:start; padding-top:3.4rem; }
  .mnav.mnav-v2 > a{ font-size:.95rem; padding:.42rem 0; }
  .mnav.mnav-v2 .mnav-foot{ grid-column:1/-1; flex-flow:row wrap;
    gap:.4rem 1.2rem; margin-top:.9rem; }
  .mnav.mnav-v2 .emx-lang-sw{ grid-column:1/-1; margin-top:.6rem; }
  .mnav.mnav-v2 .mnav-close{ grid-column:1/-1; }
}

/* Тема формы заказа (order.js): тёмный неон v1 — глубокий фон, циановый
   акцент, дисплейный заголовок. Раскладку держит order.js, здесь палитра. */
:root{
  --or-veil:rgba(3,5,10,.72);
  --or-bg:#0b0e15; --or-ink:#e8eef5; --or-mut:#7C8794;
  --or-border:1px solid rgba(95,212,255,.22); --or-radius:16px;
  --or-shadow:0 30px 90px rgba(0,0,0,.6),0 0 40px rgba(95,212,255,.08);
  --or-head-font:var(--disp); --or-x-bg:rgba(255,255,255,.07);
  --or-label:#9fb2c4; --or-field:rgba(255,255,255,.045);
  --or-line:rgba(150,180,220,.2); --or-field-radius:10px; --or-ph:#5d6b7a;
  --or-accent:var(--pulse); --or-bad:#ff6470;
  --or-btn:linear-gradient(120deg,var(--pulse),#9BE8FF); --or-btn-ink:#05070C;
  --or-btn-radius:99px; --or-btn-font:var(--disp);
  --or-toast-bg:#0b0e15; --or-toast-ink:#e8eef5;
}

/* Мобильный ряд кнопок шапки услуг/предложений («Заказать» + «Рассчитать
   стоимость» / «Посмотреть услуги и цены»): русские подписи длиннее
   английских и срывались в столбик — на телефоне обе кнопки делят ширину
   и стоят рядом, как на английской версии. */
/* ПРАВКА ВЛАДЕЛЬЦА 12.08.2026: flex-basis был auto — кнопки делили строку
   пропорционально длине подписи, и «Заказать» выходила заметно уже соседа.
   flex:1 1 0 даёт ровные 50/50 при любой длине текста; равную высоту держит
   line-height в шаблонах (у <button> UA-стиль ставил line-height:normal,
   у <a> наследовался 1.6 — отсюда разная высота пилюль на всех ширинах). */
@media (max-width:560px){
  /* align-items с !important: инлайновый <style> шаблона идёт в <head> ПОСЛЕ
     ссылки на style.css и перебивал бы правило равной специфичностью.
     stretch нужен, чтобы кнопка с длинной подписью в две строки («Посмотреть
     услуги и цены») не делала соседку ниже себя. */
  .svc-cta{ gap:.55rem; width:100%; align-items:stretch !important; }
  /* кегль флюидный, отступы ужаты: «Рассчитать стоимость» (14.6em дисплейным
     Unbounded) не влезала в половину строки на 360–390px и срывалась во вторую
     строку. Фиксированный .68rem не влезал ровно на пару пикселей. */
  .svc-cta .btn-main{ flex:1 1 0; min-width:0; display:inline-flex;
    align-items:center; justify-content:center; text-align:center;
    padding:.8rem .3rem !important; font-size:clamp(.6rem,2.75vw,.68rem) !important;
    letter-spacing:0 !important; white-space:normal; }
}

/* ============================================================================
   ПАКЕТ ПРАВОК ПО ФИДБЭКУ ВЛАДЕЛЬЦА И ДИЗАЙНЕРА (31.07.2026)
   Пункты брифа BRIEF-MAIN-SITES.md: П2 звук · П3 safe-area шапки · П4 меню
   в одну строку · П5 ритм карточек · П7 стрелки полей · П8 центровка чипов ·
   П9 бегущая строка · П10 гео-чип без эмодзи.
   ============================================================================ */

/* ---- П2: звук убран полностью. Кнопка снята из разметки; правило —
        страховка на случай, если её вернёт сторонний скрипт. ---- */
.sound-toggle{ display:none !important; }
/* Правый край шапки на мобильных держала именно кнопка звука
   (.sound-toggle{margin-left:auto}). Без неё бургер прилипал к логотипу —
   возвращаем прижим вправо тому элементу, который в этой ширине виден:
   гео-чипу (561–980px) или самому бургеру (≤560px, чип скрыт). */
@media (max-width:980px){
  .header-in > .emx-geo-chip-mob{ margin-left:auto; }
  .header-in > .nav + .burger{ margin-left:auto; }   /* гео-чипа нет вовсе */
}
@media (max-width:560px){
  .header-in > .burger{ margin-left:auto; }
}

/* ---- П3: Apple-планшеты и встроенные браузеры (iPadOS / Telegram).
   Корень: плавающая панель встроенного браузера сдвигает слой вёрстки вниз,
   а прокрутка идёт от верха экрана — position:fixed;top:0 отсчитывается от
   низа панели, и над шапкой открывается «зазор», сквозь который просвечивает
   контент. Лечение: viewport-fit=cover (в разметке) + высота шапки через
   env(safe-area-inset-top) + НЕПРОЗРАЧНЫЙ щит ::before над шапкой. ---- */
html,body{ overscroll-behavior-y:none; }

.header{ padding-top:env(safe-area-inset-top,0px); }
.header::before{
  content:''; position:absolute; left:0; right:0;
  top:calc(-50vh - 2px); height:calc(50vh + env(safe-area-inset-top,0px) + 2px);
  background:var(--void); pointer-events:none;
  opacity:0; transition:opacity .35s var(--ease);
}
/* Шапка появилась с фоном (скролл вверх / прокручено) — щит тоже непрозрачный,
   контент физически не может просвечивать в зазоре над плашкой. */
.header.is-scrolled{ background:rgba(5,7,12,.97); }
.header.is-scrolled::before{ opacity:1; }
@supports not (backdrop-filter:blur(1px)){
  .header.is-scrolled{ background:#05070C; }
}
/* Мобильное меню и подвал — не заезжают под вырез и под системную полосу */
.mnav{
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  padding-left:max(8vw,env(safe-area-inset-left,0px));
  padding-right:max(8vw,env(safe-area-inset-right,0px));
  overscroll-behavior:contain;
}
.mnav.mnav-v2{
  padding-top:calc(5.2rem + env(safe-area-inset-top,0px));
  padding-bottom:calc(2.4rem + env(safe-area-inset-bottom,0px));
  padding-left:max(8vw,env(safe-area-inset-left,0px));
  padding-right:max(8vw,env(safe-area-inset-right,0px));
}
/* padding-top меню не должен быть меньше высоты фиксированной шапки (76px до
   980px): иначе первый пункт и гео-чип уезжают ПОД шапку — на телефоне в
   ландшафте (844×390) «01 Услуги» читался сквозь строку с лого и крестиком.
   Замечено при проверке правки лого в бургер-оверлее 12.08.2026. */
@media (max-height:920px){ .mnav.mnav-v2{ padding-top:calc(4.9rem + env(safe-area-inset-top,0px)); } }
@media (max-height:520px) and (orientation:landscape){
  .mnav.mnav-v2{ padding-top:calc(4.9rem + env(safe-area-inset-top,0px)); }
}
.footer{ padding-bottom:calc(3rem + env(safe-area-inset-bottom,0px)); }
/* Боковые вырезы в ландшафте: контент не уезжает под «чёлку». На устройствах
   без выреза env() = 0 — сетка (см. «ЕДИНАЯ СЕТКА КОНТЕНТА») не меняется. */
.header-in{
  padding-left:env(safe-area-inset-left,0px);
  padding-right:env(safe-area-inset-right,0px);
}
.container,.wrap,.brif-wrap,.doc-wrap,.svc-container,.al-container,.art-container{
  padding-left:env(safe-area-inset-left,0px) !important;
  padding-right:env(safe-area-inset-right,0px) !important;
}

/* ---- П11 (побочная находка на приёмке): на 1050–1150px подвал раздвигал
   страницу вправо (горизонтальная прокрутка ~140px). Причина: колонка
   «Документы» с column-count:2 задавала треку 1fr минимум по min-content
   (≈447px), и сетка переставала помещаться. Лечение: треки могут ужиматься
   (min-width:0), а число колонок в подвале считается по доступной ширине
   (column-width), а не жёстко «две». ---- */
.footer-grid > *{ min-width:0; }
.footer-col.is-2col,
.footer-col .is-2col{ column-width:8.5rem; }   /* + column-count:2 выше = «не больше
   двух колонок, и только если каждой хватает ширины»: на телефоне и планшете
   подвал по-прежнему в два столбца, на узком десктопе — в один. */

/* ---- П4: пункты меню НИКОГДА не переносятся на две строки.
   Ширины подобраны так, чтобы полный ряд (7 пунктов + кнопка + гео-чип +
   RU|EN) влезал от 981px — ниже работает бургер. ---- */
.nav a,.mnav a,.emx-lang-sw,.emx-lang-sw a,.emx-geo-chip{ white-space:nowrap; }
.nav{ flex-wrap:nowrap; min-width:0; }
.header-in{ gap:1rem; }
@media (max-width:1440px){
  .nav{ gap:1.35rem; }
  .nav a{ font-size:.82rem; }
  .btn-contact{ padding:.5rem 1.05rem; }
}
@media (max-width:1240px){
  .nav{ gap:.95rem; }
  .nav a{ font-size:.76rem; }
  .btn-contact{ padding:.46rem .85rem; }
  .header .emx-geo-chip{ font-size:.7rem; }
  .header .emx-lang-sw{ font-size:.72rem; }
}
@media (max-width:1080px){
  .header-in{ gap:.6rem; }
  .nav{ gap:.7rem; }
  .nav a{ font-size:.71rem; }
  .btn-contact{ padding:.42rem .7rem; }
  .header .emx-geo-chip{ font-size:.66rem; }
  .header .emx-geo-chip .emx-geo-chip-car{ display:none; }
  .header .emx-lang-sw{ font-size:.68rem; gap:.3em; }
}

/* ---- П5: единый вертикальный ритм карточек пакетов и услуг.
   Было: у .pk-btn объявлен padding-top:1.4rem, но следующий за ним
   padding-шорткат его обнулял — кнопка вставала вплотную к блоку
   «Как считается выгода». Разводим через отступ предыдущего элемента,
   чтобы margin-top:auto (прижим кнопки к низу) продолжал работать. ---- */
.pkg-card > *:has(+ .pk-btn){ margin-bottom:1.5rem; }
.pkg-card .pk-basis{ margin-top:1.05rem; }
.pkg-card .pk-basis p{ margin-top:.6rem; }
.pkg-card .pk-btn{ margin-top:auto; } /* cardfix2: низ прижат, контент компактно сверху */
@supports not selector(:has(*)){
  .pkg-card .pk-btn{ margin-top:1.5rem; }
}
/* карточки услуг: раскрывающийся блок «что входит» и кнопка «Заказать»
   в том же ритме, что и пакеты — ничего не липнет к тексту */
.svc-card .sc-btn{ padding-top:1.35rem; margin-top:0; } /* cardfix2: прижимает .sc-bottom */
.svc-card *:has(+ .sc-btn){ margin-bottom:.35rem; }
.svc-card .sc-more[open]{ padding-bottom:.25rem; }

/* ---- П7: тёмные системные стрелки на тёмном фоне не видны.
   Свои глифы у select убраны, вместо них светлый шеврон в цвет темы;
   у числовых полей сняты спиннеры. Клик/тап по строке работает как раньше. ---- */
select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235FD4FF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.2 8 10.2 12 6.2'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right .75rem center !important;
  background-size:15px 15px !important;
  padding-right:2.2rem !important;
}
select::-ms-expand{ display:none; }
input[type=number]{ -moz-appearance:textfield; appearance:textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; appearance:none; margin:0; }

/* ---- П8: боксы вариантов в брифе — текст по центру ячейки.
   В строке чипы растягиваются по высоте самого высокого (align-items:stretch),
   и однословный вариант «прилипал» к верхнему краю своей ячейки. ---- */
.chips .chip{
  display:flex; align-items:center; justify-content:center;
  text-align:center; text-wrap:balance;
}

/* ---- П9: бегущая строка на телефоне была слишком крупной ---- */
@media (max-width:768px){
  .marquee{ padding:.95rem 0; }
  .marquee-track span{ font-size:.72rem; letter-spacing:.11em; }
}
@media (max-width:430px){
  .marquee{ padding:.8rem 0; }
  .marquee-track span{ font-size:.63rem; letter-spacing:.09em; }
}
@media (max-width:360px){
  .marquee-track span{ font-size:.58rem; letter-spacing:.07em; }
}

/* ---- П10: у гео-чипа была красная эмодзи-булавка 📍 — выбивалась из
   цветовой темы. Меняем на тонкий монохромный SVG-пин в цвет текста.
   Автоопределение гео и выбор страны по клику не трогаем. ---- */
.emx-geo-chip > span[aria-hidden="true"]:not(.emx-geo-chip-car):not([class]){
  font-size:0 !important; line-height:0; color:transparent;
  display:inline-block; width:.72em; height:.9em; flex:0 0 auto;
  background-color:currentColor; opacity:.8;
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center/contain;
}
@supports not ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .emx-geo-chip > span[aria-hidden="true"]:not(.emx-geo-chip-car):not([class]){ display:none !important; }
}

/* ============================================================================
   П12 — iOS 26 Safari «Liquid Glass» + ПОСТОЯННО ЗАКРЕПЛЁННАЯ ШАПКА
   (фидбэк владельца + тест на iPhone/iPad, 06.08.2026)

   Симптом (кадры IMG_8619): в iOS 26 адресная строка и нижний тулбар Safari
   стали ПОЛУПРОЗРАЧНЫМИ и лежат ПОВЕРХ страницы. Контент проезжает под ними
   и читается сквозь плашку. Плюс шапка сайта пряталась при скролле вниз
   (.is-hidden) и, возвращаясь при скролле вверх, показывала текст насквозь.

   Что делает Safari 26 (по документации Apple и разборам сообщества):
   • <meta name="theme-color"> БОЛЬШЕ НЕ ИСПОЛЬЗУЕТСЯ для окраски тулбаров;
   • вместо этого браузер СЭМПЛИРУЕТ background-color / backdrop-filter
     У ЭЛЕМЕНТОВ position:fixed|sticky, прижатых к краю вьюпорта
     (≤4px от верха / ≤3px от низа, ширина ≥80%, высота ≥3px);
   • псевдоэлементы и absolute-потомки НЕ сэмплируются — фон обязан быть
     объявлен на самом fixed-элементе;
   • прозрачный фон корня (html) на iOS 26 может «падать» в белый.

   Отсюда лечение ниже: непрозрачный корень + всегда непрозрачная закреплённая
   шапка (она же донор цвета для верхнего тулбара) + fixed-подложка #gl-bg как
   донор для нижнего тулбара + отступы env(safe-area-inset-*) + svh/dvh.
   ============================================================================ */

/* ---- 12.1 Корень непрозрачен: тулбарам всегда есть что сэмплировать,
        и никакой белой полосы под «стеклом». ---- */
html{ background-color:var(--void); }
body{ background-color:var(--void); }

/* ---- 12.2 Шапка ЗАКРЕПЛЕНА ВСЕГДА: и вниз, и вверх, на телефоне, планшете
        и десктопе. Автоскрытие снято и в JS (app.js / subpage.js), правило
        ниже — страховка на случай, если класс кто-то повесит. ---- */
.header{ position:fixed; top:0; left:0; right:0; }
.header.is-hidden{ transform:none !important; }

/* ---- 12.3 Шапка НЕ ПРОСВЕЧИВАЕТ. Фон объявлен на самом fixed-элементе
        (иначе Safari 26 его не увидит) — 94% непрозрачности + blur:
        текст под шапкой физически не читается, а верхний тулбар браузера
        окрашивается в цвет сайта вместо «стеклянного» контента. ---- */
.header{
  background-color:rgba(5,7,12,.94);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--line);
}
/* Как только под шапку может заехать контент (скролл > 40px) — фон становится
   ПОЛНОСТЬЮ непрозрачным. Проверено скриншотами: при alpha .98 буквы заголовка
   всё ещё различимы призраком, при alpha 1 — нет вообще. */
.header.is-scrolled{
  background-color:#05070C;
  -webkit-backdrop-filter:saturate(150%) blur(18px);
  backdrop-filter:saturate(150%) blur(18px);
  border-bottom-color:var(--line);
}
/* Без backdrop-filter (старые движки, режим экономии) — сплошная заливка. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .header,.header.is-scrolled{ background-color:#05070C; }
}
/* Щит над шапкой (см. П3) теперь включён ВСЕГДА, а не только при скролле:
   зазор между верхом экрана и шапкой во встроенных браузерах и под
   «стеклянной» адресной строкой не может просвечивать контентом. */
.header::before{ opacity:1 !important; background:var(--void); }

/* ---- 12.4 Верхняя safe-area. Шапка уже растёт на env(safe-area-inset-top)
        (см. П3) — ровно на столько же опускаем поток страницы, чтобы первый
        экран не заезжал под вырез/статус-бар. На устройствах без выреза
        и в обычном Safari env() = 0 → вёрстка не меняется вообще. ---- */
body{ padding-top:env(safe-area-inset-top,0px); }
.hero{ min-height:calc(100svh - env(safe-area-inset-top,0px)); }
/* Якорные переходы (#hero, #contacts…) не прячут заголовок под шапку. */
html{ scroll-padding-top:calc(4.8rem + env(safe-area-inset-top,0px)); }

/* ---- 12.5 Нижняя safe-area: плавающие элементы не уезжают под нижний
        тулбар Safari и под «домашнюю» полосу. ---- */
.chat-fab{ bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important; }
.chat-panel{
  bottom:calc(22px + env(safe-area-inset-bottom,0px)) !important;
  height:min(540px, calc(100dvh - 60px - env(safe-area-inset-bottom,0px))) !important;
}
@media (max-width:900px){
  .chat-fab{ bottom:calc(14px + env(safe-area-inset-bottom,0px)) !important; }
  .chat-panel{ bottom:calc(8px + env(safe-area-inset-bottom,0px)) !important; }
}
.emx-toast{ bottom:calc(2rem + env(safe-area-inset-bottom,0px)); }
/* cookie-баннер рисуется из consent.js — перекрываем его inline-стиль */
.emx-cb{ bottom:calc(16px + env(safe-area-inset-bottom,0px)) !important; }
@media (max-width:560px){
  .emx-cb{ bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important; }
}

/* ---- 12.6 Донор цвета для НИЖНЕГО тулбара. #gl-bg — единственный
        fixed-элемент на всю высоту вьюпорта (position:fixed;inset:0),
        то есть он прижат и к низу тоже. Объявленный на нём background-color
        Safari 26 берёт как цвет нижней «стеклянной» плашки, и та перестаёт
        показывать проезжающий под ней контент. Визуально ничего не меняется:
        WebGL-канвас рисует поверх того же самого цвета. ---- */
#gl-bg{ background-color:var(--void); }

/* ---- 12.7 Динамическая высота вьюпорта. В iOS 26 видимая область скачет
        при сворачивании адресной строки, поэтому «экранные» блоки считаем
        в svh/dvh, а не в vh. ВАЖНО: у fixed-подложек (#gl-bg, .loader, .mnav)
        высоту задаёт inset:0 — она специально тянется ПОД тулбары, иначе
        Safari нечего сэмплировать у нижнего края. Их не трогаем. ---- */
.mnav{ max-height:100dvh; overflow-y:auto; }

/* ---- 12.8a Закрытое мобильное меню не должно «отравлять» цвет тулбаров.
        .mnav — fixed на весь экран и в закрытом виде держится на opacity:0;
        Safari 26 читает background-color и backdrop-filter ДАЖЕ у невидимых
        fixed-элементов. Фон у него наш же тёмный (безвредно), а вот blur
        включаем только когда меню реально открыто. ---- */
.mnav{ -webkit-backdrop-filter:none; backdrop-filter:none; }
.mnav.is-open{ -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); }
/* Приёмка 06.08: при alpha .96 сквозь открытое меню призраком читались
   заголовки страницы. Открытое меню — полностью непрозрачное. */
.mnav.is-open{ background-color:#05070C; }

/* ---- 12.8 Резина прокрутки: без «оттяжки» страницы за край экрана
        (иначе под шапкой на миг открывается полоса контента). ---- */
html,body{ overscroll-behavior-y:none; }

/* ---- 12.9 Ширины и переносы заголовков П12 НЕ ТРОГАЕТ: высота шапки и
        сетка контента прежние, env(safe-area-inset-*) на устройствах без
        выреза равен 0. Раскладка строк заголовков проверена скриншотами
        на 390 / 834 / 1440 (RU и EN) — переносов «по одному слову в строке»
        нет ни на главной, ни на внутренних. ---- */

/* finalfix 2026-08-07: на узких экранах выключка по ширине даёт «реки» пробелов — переключаемся на левый флаг */
@media(max-width:480px){
  .doc-body p,.doc-body li,.doc-note{text-align:left;text-justify:auto}
}

/* ---------- ПЛАВНЫЕ РАСКРЫВАШКИ <details> (js/details-accordion.js) ----------
   Анимируется height обёртки .dtl-in (её ставит JS): 0 ↔ измеренные px,
   после раскрытия height:auto. Так же сделан аккордеон направлений в app.js.
   grid-template-rows 0fr→1fr НЕ используем: Chrome не интерполирует обратный
   переход 1fr→0fr и схлопывает рывком (замер 12.08.2026, см. JS-файл).
   Класс .dtl появляется только когда JS отработал, поэтому без JS
   <details> остаётся штатным и полностью рабочим.
   Длительность синхронизирована с DUR в details-accordion.js. */
.dtl > .dtl-in{
  overflow:hidden;
  transition:height var(--dtl-dur,.42s) cubic-bezier(.4,0,.2,1);
}
/* стрелка/плюсик у summary поворачивается в такт с раскрытием */
.dtl > summary{cursor:pointer;transition:color .2s ease}
.dtl > summary::marker,.dtl > summary::-webkit-details-marker{color:var(--pulse)}
@media (prefers-reduced-motion:reduce){
  .dtl{transition:none}
}

/* ==================== ПРАВКА ВЛАДЕЛЬЦА 13.08.2026 (фото 2) ====================
   Первый экран главной на телефоне.
   1) ЗАГОЛОВОК — В ДВЕ СТРОКИ. 3-line-guard (см. выше) держал кегль 1.05rem,
      и «Помогу вам и вашему бизнесу идти в ногу со временем» ложилось в ТРИ
      строки, причём вторая и третья не доходили до правого края — половина
      ширины пустовала. Замер на 390: при 15px строк ровно две (33.6px вместо
      56.4px), подпись остаётся крупнее подзаголовка.
   2) ПОДЗАГОЛОВОК — ШИРЕ КОЛОНКА, ПО ЛЕВОМУ КРАЮ. Ширину съедал не max-width,
      а text-wrap:balance: браузер уравнивал строки и обрывал их посреди
      колонки. Меняем на pretty — строки идут во всю ширину, выключка левая.
   3) КНОПКА — ПО ЦЕНТРУ И ЧУТЬ ШИРЕ: ряд уже центрирован, добавляем кнопке
      ширину (86% колонки) и внутренние поля. */
@media (max-width:430px){
  .hero-title{
    font-size:clamp(.82rem,3.85vw,.94rem) !important;
    line-height:1.12 !important;letter-spacing:-.01em !important;text-wrap:balance;
  }
  .hero-sub,.hero-sub--bold{
    text-wrap:pretty !important;max-width:none !important;text-align:left !important;
  }
  .hero-cta-row.h5-actions{justify-content:center !important}
  .hero-cta-row.h5-actions .btn-primary{
    width:86%;max-width:340px;justify-content:center;
    padding:.78rem 1.3rem !important;font-size:.78rem !important;
  }
}

/* ============================================================================
   fix27 (2026-08-27, по скриншотам владельца с Android Chrome ~390px)
   1) Блоки цифр (.stats на главной и .about-stats в «Обо мне») на телефоне
      шли одной колонкой, описания были обрезаны до 26ch (~60% ширины) —
      справа зияла пустота. Делаем ДВА равных столбца, описание — на всю
      ширину ячейки. На альбомном телефоне — 4 и 3 в ряд соответственно.
   2) Лишняя пустота между блоком «100%» и секцией «ПОРТФОЛИО» на телефоне:
      складывались нижний паддинг секции «Обо мне» и верхний паддинг «Кейсов»
      (5.5rem + 5.5rem) плюс отступ .about-stats. Сжимаем на мобильном.
   3) Фильтр-чипсы статей (.al-chips, инлайн-стили в сгенерированных
      articles/**.html) на телефоне рвались 3+1+1+1. Ставим сетку 2 колонки
      (на альбоме 3), текст по центру, nowrap. Селектор с тегом (nav.al-chips)
      — чтобы перебить инлайн-<style> страницы без правки HTML/шаблонов.
   Планшет/десктоп (>600px портрет) НЕ трогаем.
   ========================================================================== */
@media (max-width:600px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.1rem 1.2rem}
  .stat b{font-size:clamp(1.45rem,7.2vw,2rem);margin-bottom:.5rem}
  .stat i{max-width:none;font-size:.78rem;line-height:1.45}

  .about-stats{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.6rem 1.2rem;margin-top:2.2rem;
  }
  /* нечётный последний блок занимает всю строку — справа не остаётся пустоты */
  .about-stats>div:last-child:nth-child(odd){grid-column:1/-1}
  .about-stats b{font-size:1.6rem;margin-bottom:.4rem}
  .about-stats i{display:block;font-size:.76rem;line-height:1.4}

  /* пустота снизу блока цифр «Обо мне» перед «Портфолио» */
  #obo-mne{padding-bottom:3rem}
  #keysy{padding-top:3.2rem}

  /* чипсы-фильтры статей */
  nav.al-chips{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.5rem;margin-bottom:1.8rem;
  }
  nav.al-chips a{
    display:block;text-align:center;white-space:nowrap;
    padding:.55rem .6rem;font-size:.68rem;letter-spacing:.02em;
    overflow:hidden;text-overflow:ellipsis;
  }
  nav.al-chips a small{margin-left:.25em}
  /* нечётный последний чип занимает всю строку — ряд не выглядит рваным */
  nav.al-chips a:last-child:nth-child(odd){grid-column:1/-1}
}
/* альбомный телефон (низкая высота): плотнее в ряд */
@media (max-width:1024px) and (max-height:500px) and (orientation:landscape){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
  .stat i{max-width:none}
  .about-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
  .about-stats i{display:block}
  nav.al-chips{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;
  }
  nav.al-chips a{
    display:block;text-align:center;white-space:nowrap;
    padding:.5rem .7rem;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;
  }
  nav.al-chips a:last-child:nth-child(odd){grid-column:auto}
}