/* ISKRA digital — адаптив ВЕРХНЕЙ части главной: шапка, первый экран (#top / .hero) и блок «Что мы меняем в бизнесе» (#directions).
   Подключается в <head> последним. ПК 1280–1920 не трогаем: всё ниже — только внутри @media (max-width:1279/1023/767)
   и @media (hover:none); без медиа — лишь элементы, которых на ПК нет (бургер, «Связаться» в меню, запасная картинка 3D).
   Брейкпоинты:
     ≤1279 — планшет и малый ноут: поток вместо абсолютной раскладки, поля 32, без масштаба --k (он только с 1280);
       1024–1279 — планшет-альбом: меню строкой в шапке, поля 40, текст ≥ 14, больше колонок (блок «1024–1279» ниже);
       ≤1023 — бургер-меню;
     ≤767  — телефон (база 390, проверка 360/375/430): поля 16; 3D-блок в две колонки — слева вертикальный список экранов,
             справа телефон и 2–3 виджета на экран (места и выбор — phone.js, PLACE_M и data-m).
   Нижнюю часть страницы (кейсы, «Как работаем», финал, подвал, попапы) адаптирует отдельный файл. */

/* ===== Элементы, которых на ПК нет ===== */
.hdr__burger,.hdr__menu-cta{display:none}
/* «Ещё N» в списке карточки услуги — только на телефоне (≤767), см. directions.js */
.svc__more-i{display:none}
/* нет WebGL — вместо 3D статичная картинка телефона (phone.js добавляет .nogl); проценты = область VIEW в phone.js */
.phone3d .nogl{position:absolute;left:30.278%;top:0;width:39.444%;height:100%;object-fit:contain;z-index:2}

/* ==========================================================================
   ≤1279 — масштаб --k продолжает работать ниже 1280 (раньше body держал min-width:1280 и давал горизонтальный скролл)
   ========================================================================== */
@media (max-width:1279px){
  body{min-width:0}
}

/* ==========================================================================
   ≤1279 (было ≤1023) — планшет и телефон: общий каркас; уточнения для 1024–1279 — в блоке ниже
   ========================================================================== */
@media (max-width:1279px){
  .hero,#directions{--k:1}            /* масштаб ПК здесь не нужен — раскладка в потоке */
  .hero,#directions{--pad:32px}

  /* ---------- каркас первого экрана ---------- */
  .hero{height:auto;overflow:clip}
  .hero__frame{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;transform:none;padding-bottom:56px}
  .hero__line{top:64px}
  /* свет из макета — за телефоном (сама картинка та же, переехала в фон сцены 3D, см. .hero__phone::before) */
  .hero__bg{display:none}
  .outline--a{left:-150px;top:-90px;transform:scale(.62);transform-origin:0 0}
  .outline--b{left:auto;right:-430px;top:120px;transform:rotate(-41.56deg) scale(.62)}

  /* ---------- шапка: логотип + «Связаться» + бургер ---------- */
  .hdr{position:relative;inset:auto;height:64px;display:flex;align-items:center;gap:12px;padding:0 var(--pad)}
  .hdr__logo{position:relative;left:auto;top:auto;width:72px;height:17px;z-index:2}
  .hdr__logo svg{width:72px;height:17px}
  .hdr__cta{position:static;margin-left:auto;width:auto;height:40px;padding:0 18px 0 20px;font-size:12px}
  .hdr__burger{position:relative;z-index:2;display:grid;place-items:center;width:44px;height:44px;flex:none;border:0;border-radius:50%;
    background:rgba(255,255,255,.07);color:var(--c-white);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .hdr__burger i{position:absolute;left:14px;width:16px;height:1.6px;border-radius:2px;background:currentColor;
    transition:transform var(--t-med) var(--ease),top var(--t-med) var(--ease)}
  .hdr__burger i:nth-child(1){top:17.5px}
  .hdr__burger i:nth-child(2){top:24.5px}
  html.is-menu .hdr__burger{background:rgba(255,255,255,.12)}
  html.is-menu .hdr__burger i:nth-child(1){top:21px;transform:rotate(45deg)}
  html.is-menu .hdr__burger i:nth-child(2){top:21px;transform:rotate(-45deg)}

  /* меню — полноэкранная стеклянная панель (бургер и логотип остаются поверх) */
  html.is-menu{overflow:hidden}
  html.is-menu .hero{z-index:100}
  .hdr__nav{position:fixed;inset:0;left:0;top:0;height:auto;z-index:1;display:flex;flex-direction:column;justify-content:center;gap:4px;
    padding:96px var(--pad) max(32px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
    background:radial-gradient(70% 45% at 85% 8%,rgba(251,208,128,.13),transparent 70%),
               radial-gradient(70% 45% at 10% 100%,rgba(128,225,166,.11),transparent 70%),rgba(4,5,8,.78);
    -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3);
    opacity:0;visibility:hidden;transition:opacity var(--t-med) ease,visibility 0s var(--t-med)}
  html.is-menu .hdr__nav{opacity:1;visibility:visible;transition:opacity var(--t-med) ease}
  .hdr__nav .nav-link,.hdr__nav .nav-link:nth-child(n){position:relative;left:auto;top:auto;display:flex;align-items:center;min-height:56px;
    font:400 36px/1.1 var(--f-display);color:var(--c-white);
    opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .5s var(--ease),color var(--t-fast) ease}
  .hdr__nav .nav-link[aria-current="page"]{color:var(--t-40)}
  .hdr__nav .nav-link::after{display:none}
  .hdr__menu-cta{display:inline-flex;margin-top:28px;width:100%;opacity:0;transform:translateY(12px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
  .hdr__menu-cta .btn__text{width:auto;flex:1}
  html.is-menu .hdr__nav > *,html.is-menu .hdr__nav .nav-link:nth-child(n){opacity:1;transform:none}
  html.is-menu .hdr__nav > :nth-child(2){transition-delay:40ms}
  html.is-menu .hdr__nav > :nth-child(3){transition-delay:80ms}
  html.is-menu .hdr__nav > :nth-child(4){transition-delay:120ms}
  html.is-menu .hdr__nav > :nth-child(5){transition-delay:160ms}
  html.is-menu .hdr__nav > :nth-child(6){transition-delay:200ms}

  /* ---------- первый экран: сетка ---------- */
  .hero main{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);column-gap:24px;align-items:start;
    padding:40px var(--pad) 0}
  .intro{position:relative;inset:auto;grid-column:1;grid-row:1;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
  .intro > *{position:relative;left:auto;top:auto}
  .intro__title{grid-column:1 / -1;width:auto;font-size:60px;line-height:57px}
  .intro__coin{grid-column:1;margin-top:22px;width:40px;height:49px}
  .intro__coin img{width:40px;height:49px}
  .intro__coin-glow{left:2px;top:9px;width:36px;height:36px}
  .intro__lead{grid-column:2;margin-top:22px;width:auto;max-width:300px;font-size:16px;line-height:25px}
  .intro__cta{grid-column:1 / -1;margin-top:28px;justify-self:start}
  .intro__note{grid-column:1 / -1;margin-top:12px;width:auto;font-size:13px;line-height:19px}

  /* плашка «делаем: / чтобы:» — статичная высота (4 строки задач всегда), карусель не двигает страницу */
  .plate{position:relative;left:auto;top:auto;grid-column:2;grid-row:1;width:auto;height:auto;padding:24px 24px 22px}
  .plate__service{height:34px;margin-top:6px}
  .plate__name{font-size:40px;line-height:34px}
  .plate__label--why{margin-top:20px}
  .plate__tasks{margin-top:8px;height:auto}
  .plate__tasks li{font-size:22px;line-height:26px;height:26px;overflow:visible}
  .plate__tasks li + li{margin-top:10px}
  .plate__cases{position:relative;right:auto;top:auto;display:flex;width:fit-content;min-height:44px;margin:12px 0 -10px auto}

  /* 3D-телефон: сцена 1152×720 (как на ПК), по центру, поля сцены над и под телефоном компенсируем отрицательными отступами.
     Свет из макета — фоном самой сцены, чтобы всегда стоять за телефоном. */
  .hero__phone{--sw:1152px;position:relative;left:auto;top:auto;grid-column:1 / -1;grid-row:2;
    width:var(--sw);height:calc(var(--sw) * .625);margin:calc(var(--sw) * -.048) calc((100% - var(--sw)) / 2) calc(var(--sw) * -.009)}
  .hero__phone::before{content:"";position:absolute;left:50%;top:50%;width:calc(var(--sw) * 1.25);height:calc(var(--sw) * .94);z-index:0;pointer-events:none;
    transform:translate(-50%,-44%);
    background:url(../img/hero-bg.jpg) center/100% 100% no-repeat;
    background-image:image-set(url(../img/hero-bg.avif) type("image/avif"),url(../img/hero-bg.webp) type("image/webp"),url(../img/hero-bg.jpg) type("image/jpeg"));
    -webkit-mask:radial-gradient(50% 50% at 50% 50%,#000 55%,transparent 100%);mask:radial-gradient(50% 50% at 50% 50%,#000 55%,transparent 100%)}

  /* полоска экранов */
  .screens{position:relative;left:auto;top:auto;grid-column:1 / -1;grid-row:3;justify-self:center;width:100%;max-width:428px;height:auto}
  .screens__seg{height:30px;font-size:9px}

  /* карточки выгод: 3 колонки, заголовок над текстом */
  .benefits{position:relative;left:auto;top:auto;grid-column:1 / -1;grid-row:4;width:auto;height:auto;margin-top:24px;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .benefits li,.benefits li:nth-child(n){margin:0;min-width:0}
  .benefit{height:100%;padding:24px 22px 26px}
  .benefit__title,.benefits li:nth-child(n) .benefit__title{position:relative;left:auto;top:auto;width:auto;white-space:normal;font-size:28px;line-height:30px}
  .benefit__text,.benefits li:nth-child(n) .benefit__text{position:relative;left:auto;top:auto;width:auto;margin-top:12px;font-size:14px;line-height:22px;color:rgba(255,255,255,.82)}
  .benefit__text br{display:none}          /* перед каждым <br> в разметке стоит пробел — слова не слипаются */

  /* ---------- #directions ---------- */
  .dirs{padding:64px 0 80px}
  .dirs__in{width:auto;padding:0 var(--pad);zoom:1}
  .dirs__in::before{inset:220px 0 0}
  .dirs__head{height:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
  .dirs__title{width:auto;font-size:52px;line-height:52px}
  .dirs__lead{position:relative;left:auto;top:auto;grid-column:1;width:auto;margin-top:16px;font-size:16px;line-height:26px}
  .dirs__pick{position:relative;right:auto;top:auto;grid-column:2;grid-row:1 / 3}

  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;margin-top:100px}
  .svc:nth-child(n+4){margin-top:0}
  .svc:nth-child(n+3){margin-top:100px}
  .svc{padding:0 24px 24px}
  .svc__offer{min-height:44px;padding:0 12px}
  .svc__cases{min-height:52px}

  .dirs__cta{margin-top:56px;gap:24px;padding:28px}
  .dirs__cta-q{font-size:28px;line-height:30px}
  .dirs__cta .btn{flex:none}
}

/* ==========================================================================
   1024–1279 — планшет-альбом / малый ноут (решение владельца 2026-11-05: вместо уменьшенной ПК-версии — планшетная раскладка).
   База — правила ≤1279 выше; здесь: меню строкой в шапке (без бургера), поля 40, текст ≥ 14, заголовки блоков 48, услуги в 3 колонки.
   3D-блок — как на ПК (телефон, места виджетов PLACE из phone.js, полоска экранов), сцена пропорционально под ширину.
   ========================================================================== */
@media (min-width:1024px) and (max-width:1279px){
  .hero,#directions{--pad:40px}

  /* шапка: логотип — меню по центру — «Связаться» */
  .hdr{height:72px}
  .hero__line{top:72px}
  .hdr__burger,.hdr__menu-cta{display:none}
  .hdr__nav{position:absolute;inset:auto;left:50%;top:0;height:72px;z-index:2;flex-direction:row;align-items:center;justify-content:center;gap:36px;
    padding:0;overflow:visible;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateX(-50%);
    opacity:1;visibility:visible;transition:none}
  .hdr__nav .nav-link,.hdr__nav .nav-link:nth-child(n){min-height:44px;font:500 15px/1 var(--f-text);opacity:1;transform:none;
    transition:color var(--t-fast) ease,text-shadow var(--t-med) ease}
  .hdr__nav .nav-link[aria-current="page"]{color:var(--t-40)}
  .hdr__nav .nav-link::after{display:block;bottom:8px}
  .hdr__cta{height:44px;padding:0 20px 0 22px;font-size:14px}

  /* первый экран */
  .hero main{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:40px;padding-top:56px}
  .intro__title{font-size:clamp(64px,6.2vw,76px);line-height:.95}
  .intro__lead{max-width:360px;font-size:17px;line-height:26px}
  .intro__note{font-size:14px;line-height:20px}
  /* большие кнопки: подпись 15 в одну-две строки вместо 13 */
  .btn--lg{width:auto;min-width:272px;gap:20px;font-size:15px;line-height:19px}
  .btn--lg .btn__text{width:auto;max-width:210px}
  .plate{padding:28px 28px 24px}
  .plate__label{font-size:14px;line-height:20px}
  /* 3D: сцена как на ПК (1152×720 при 1440 — 80 % ширины макета), под ширину окна */
  .hero__phone{--sw:min(1152px,calc(100vw - 2 * var(--pad)))}
  /* полоска экранов — крупнее, подписи читаемые */
  .screens{max-width:660px;margin-top:8px}
  .screens__seg{height:40px;font-size:13px;padding:0 12px}
  .benefits{margin-top:32px;gap:20px}
  .benefit{padding:28px 26px 30px}
  .benefit__text,.benefits li:nth-child(n) .benefit__text{font-size:15px;line-height:23px}

  /* #directions: услуги в 3 колонки */
  .dirs{padding:80px 0 96px}
  .dirs__title{font-size:48px;line-height:50px}
  .dirs__lead{font-size:17px;line-height:27px}
  .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
  .svc:nth-child(n+3){margin-top:0}
  .svc:nth-child(n+4){margin-top:100px}
  .svc{padding:0 22px 24px}
  .svc__title{text-wrap:balance}          /* «ИИ-боты и чат-боты» не рвётся на дефисе «чат-/боты» */
  .svc__value{font-size:15px;line-height:23px}
  .svc__list li{font-size:14px;line-height:21px}
  .svc__cases-l,.svc__offer{font-size:14px}
  .btn__count{min-width:20px;height:18px;font-size:13px}
  .dirs__cta{padding:32px 36px}
  .dirs__cta-q{font-size:32px;line-height:34px}
  .dirs__cta-t{font-size:16px;line-height:25px}
}

/* ==========================================================================
   ≤767 — телефон (база 390)
   ========================================================================== */
@media (max-width:767px){
  .hero,#directions{--pad:16px}

  .hero__frame{padding-bottom:40px}
  .hdr__cta{display:none}                 /* «Связаться» — в меню */
  .hdr__burger{margin-left:auto}
  .hdr__nav .nav-link,.hdr__nav .nav-link:nth-child(n){font-size:34px;min-height:54px}
  .outline--a{left:-120px;top:-70px;transform:scale(.5)}
  .outline--b{right:-420px;top:auto;bottom:520px;transform:rotate(-41.56deg) scale(.5)}

  /* порядок: заголовок → CTA → 3D-блок (слева список экранов, справа телефон с виджетами) → плашка → выгоды */
  .hero main{--lc:clamp(96px,26vw,110px);display:grid;grid-template-columns:var(--lc) minmax(0,1fr);column-gap:10px;row-gap:0;
    align-items:start;padding-top:32px}
  .intro{grid-column:1 / -1;grid-row:1}
  .screens{grid-column:1;grid-row:2}
  .hero__phone{grid-column:2;grid-row:2}
  .plate{grid-column:1 / -1;grid-row:3}
  .benefits{grid-column:1 / -1;grid-row:4}

  .intro__title{font-size:42px;line-height:43px}
  .intro__coin{margin-top:20px;width:36px;height:44px}
  .intro__coin img{width:36px;height:44px}
  .intro__coin-glow{top:8px;width:32px;height:32px}
  .intro__lead{margin-top:20px;max-width:none;font-size:16px;line-height:24px}
  .intro__cta{width:100%;height:56px;margin-top:28px;padding-left:24px}
  .intro__cta .btn__text{width:auto;flex:1;font-size:15px}
  .intro__cta .btn__circle{width:44px;height:44px}
  .intro__note{margin-top:14px;text-align:center;font-size:13px;line-height:20px}

  /* 3D: сцена 148vw (390 → 577), телефон ≈ 158×308 у левого края правой колонки; поля сцены вокруг корпуса
     срезаны отрицательными отступами (доли — рамка корпуса PB из phone.js: слева .3646, сверху .0747, снизу .0165 ширины сцены) */
  .hero__phone{--sw:min(148vw,680px);justify-self:start;
    margin:calc(var(--sw) * -.0747 + 40px) 0 calc(var(--sw) * -.0165 + 8px) calc(var(--sw) * -.3646 + 2px)}
  /* свет — только вокруг телефона, не под плашкой (иначе жёлтое слово в плашке теряется на жёлтом) */
  .hero__phone::before{width:calc(var(--sw) * 1.15);height:calc(var(--sw) * .8);transform:translate(-50%,-47%);
    -webkit-mask:radial-gradient(closest-side,#000 40%,transparent 100%);mask:radial-gradient(closest-side,#000 40%,transparent 100%)}
  /* виджеты: показываются только выбранные для телефона (data-m), крупнее кегль; масштаб карточек — PLACE_M в phone.js (≤ .68, меньше на узких окнах) */
  .phone3d .fc:not([data-m]){display:none}
  .phone3d .fc{padding:15px 16px;border-radius:24px;white-space:nowrap;font-size:16px;line-height:1.28}
  /* строки текста не переносятся; если значок и текст не встают в ряд — значок (и чип) уходит строкой выше/ниже, а не текст ломается по словам */
  .phone3d .fc .row{gap:12px;flex-wrap:wrap;row-gap:10px}
  .phone3d .fc .lbl,.phone3d .fc .sub{font-size:14.5px;line-height:1.3}
  .phone3d .fc .ttl{font-size:16.5px;line-height:1.25}
  .phone3d .fc .big{font-size:40px}
  .phone3d .fc .chip{height:26px;padding:0 10px;border-radius:13px;font-size:15px}
  .phone3d .fc .time{font-size:15px}
  .phone3d .fc .ic,.phone3d .fc .ava{width:36px;height:36px}
  .phone3d .fc .ic svg{width:19px;height:19px}
  .phone3d .fc .ava{font-size:15px}
  .phone3d .fc .bars{height:56px}
  .phone3d .fc .row>.dot:last-child{display:none} /* точка-статус в конце строки на узкой карточке вылезает за край — декор, на телефоне скрыт */

  /* список экранов: вертикальная колонка слева, у пункта — вертикальная дорожка прогресса, текущий — градиентом */
  .screens{--seg-c:rgba(255,255,255,.62);align-self:center;margin-top:40px;display:flex;flex-direction:column;gap:2px;
    width:auto;max-width:none;height:auto;padding:4px;border-radius:16px}
  .screens__seg{flex:none;height:36px;padding:0 4px 0 15px;gap:0;justify-content:center;border-radius:12px;
    font:500 11.5px/1.2 var(--f-text);white-space:nowrap;color:var(--seg-c)}
  .screens__lbl{overflow:visible;text-overflow:clip}
  .screens__track{position:absolute;left:7px;top:9px;bottom:9px;width:2px;height:auto;align-self:auto}
  .screens__track i{transform-origin:50% 0;transform:scaleY(var(--f,0))}
  .screens__seg.is-on{background:rgba(255,255,255,.07)}
  .screens__seg.is-on .screens__lbl{color:transparent;background:var(--g-word);-webkit-background-clip:text;background-clip:text}

  .plate{margin-top:48px;padding:24px 22px 22px}
  .plate__name{font-size:38px;line-height:32px}
  .plate__service{height:32px}
  .plate__tasks li{font-size:21px;line-height:25px;height:25px}
  .plate__tasks li + li{margin-top:12px}
  .plate__label{font-size:14px;line-height:20px}

  .benefits{margin-top:16px;grid-template-columns:1fr;gap:16px}
  .benefit{padding:24px 22px 26px}
  .benefit__title,.benefits li:nth-child(n) .benefit__title{font-size:28px;line-height:30px}
  .benefit__title br{display:none}
  .benefit__text,.benefits li:nth-child(n) .benefit__text{margin-top:10px;font-size:15px;line-height:1.5}

  /* ---------- #directions ---------- */
  .dirs{padding:56px 0 64px}
  .dirs__head{display:flex;flex-direction:column;align-items:stretch}
  .dirs__title{font-size:34px;line-height:35px}
  .dirs__lead{margin-top:12px;font-size:15px;line-height:24px}
  .dirs__pick{width:100%;margin-top:22px;justify-content:center}

  .svc-grid{grid-template-columns:1fr;margin-top:88px}
  .svc:nth-child(n+2){margin-top:88px}
  .svc{padding:0 20px 20px}
  .svc__icon{left:-10px;top:-64px}
  .svc__top{height:90px}
  .svc__title{font-size:30px;line-height:31px}
  .svc__value{font-size:15px;line-height:24px}
  .svc__list li{font-size:14px;line-height:22px}
  .svc__list li::before{top:14px}
  .svc__foot{margin-top:22px;gap:8px;align-items:stretch}
  .svc__cases{width:100%;min-height:52px}
  .svc__offer{width:100%;justify-content:center;min-height:48px;font-size:14px;border-radius:var(--r-pill);background:rgba(251,208,128,.06)}

  .dirs__cta{flex-direction:column;align-items:stretch;gap:22px;margin-top:48px;padding:24px 20px}
  .dirs__cta-q{font-size:26px;line-height:28px}
  .dirs__cta-t{font-size:15px;line-height:24px}
  .dirs__cta .btn{width:100%}
  .dirs__cta .btn .btn__text{width:auto;flex:1}
}

/* ==========================================================================
   ≤767 — «больше воздуха, проще»: ритм блоков 80–96, поля карточек 20–24, текст 1.45–1.5, кнопки 52–56 во всю ширину,
   декор и второстепенные подписи скрыты (из разметки ничего не удалено)
   ========================================================================== */
@media (max-width:767px){
  .outline{display:none}                  /* тонкие контурные линии фона — шум на узком экране */
  .hero__frame{padding-bottom:48px}
  .intro__note{color:rgba(255,255,255,.5)}

  /* #directions: заголовок → текст → кнопка с бо́льшими зазорами */
  .dirs{padding:40px 0 88px}
  .dirs__lead{margin-top:16px;font-size:16px;line-height:1.5}
  .dirs__pick{margin-top:28px;min-height:52px}
  .svc{padding:0 22px 24px}
  .svc__num{display:none}                 /* порядковый номер карточки — декор */
  .svc__value{margin-top:16px;font-size:16px;line-height:1.5}
  .svc__list{margin-top:18px}
  .svc__list li{padding:8px 0 8px 22px;font-size:15px;line-height:1.45}
  .svc__list li::before{top:16px}
  /* список — 2 пункта, остальные по «Ещё N» */
  .svc:not(.is-open) .svc__list li:nth-child(n+3):not(.svc__more-i){display:none}
  .svc__more-i{display:block;padding:4px 0 0!important}
  .svc__more-i::before{display:none}
  .svc__more{display:inline-flex;align-items:center;min-height:40px;padding:0;border:0;background:none;cursor:pointer;
    font:500 14px/1 var(--f-text);color:rgba(251,208,128,.85);-webkit-tap-highlight-color:transparent}
  .svc__more::after{content:"";width:6px;height:6px;margin:-3px 0 0 10px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform var(--t-med) var(--ease)}
  .svc.is-open .svc__more::after{margin-top:3px;transform:rotate(-135deg)}
  .svc__foot{margin-top:24px;gap:12px}
  .svc__cases{min-height:54px}
  .svc__offer{min-height:52px;font-size:15px}

  .dirs__cta{gap:24px;margin-top:72px;padding:28px 22px 24px}
  .dirs__cta-t{line-height:1.5}
  .dirs__cta .btn{height:56px}
}

/* узкие телефоны (360–374): подписи списка экранов чуть мельче, чтобы «CRM-система» помещалась в строку */
@media (max-width:374px){
  .screens__seg{padding-left:14px;font-size:10.5px}
  .screens__track{left:6px}
}

/* ===== Тач: без ховеров (sticky hover после тапа) — только верхняя часть ===== */
@media (hover:none){
  .hdr__logo:hover{filter:none}
  .btn--primary:hover::before{opacity:0}
  .btn--sm:hover,.btn--md:hover,.btn--lg:hover{box-shadow:none}
  .btn--lg:hover .btn__circle{background:rgba(255,255,255,.3)}
  .btn--lg:hover .btn__circle svg,.btn--sm:hover .btn__arr,.btn--md:hover .btn__arr{animation:none;transform:none}
  .plate:hover{--g-glass-stroke:linear-gradient(140deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.44) 100%)}
  .plate__cases:hover{color:rgba(251,208,128,.6);text-shadow:none}
  .plate__cases:hover svg{transform:none}
  .screens__seg:hover{color:var(--seg-c,rgba(255,255,255,.45));background:transparent}
  .screens__seg.is-on:hover{color:var(--c-white);background:rgba(255,255,255,.06)}
  .screens__seg:hover .screens__track{background:rgba(255,255,255,.12)}
  .svc:hover{transform:none;box-shadow:none;background-color:var(--glass-plate)}
  .svc:hover::after{opacity:0}
  .svc:hover::before{opacity:1}
  .svc:hover .svc__spot{opacity:0}
  .svc:hover .svc__num{color:var(--t-30)}
  .svc:hover .svc__list li{color:rgba(255,255,255,.6)}
  .svc__offer:hover{color:rgba(251,208,128,.6);text-shadow:none}
  .svc__offer:hover svg,.svc__cases:hover .btn__arr{transform:none}
  #directions .btn--ghost:hover{color:rgba(255,255,255,.74);background:rgba(255,255,255,.07);box-shadow:none}
  .hdr__nav .nav-link:hover{text-shadow:none}
}

@media (prefers-reduced-motion:reduce){
  .hdr__nav,.hdr__nav > *,.hdr__burger i,.screens__seg,.screens__lbl{transition:none!important}
}