/* ISKRA digital — правки первого экрана (подключён после main.css и phone.css).
   1) градиентный текст не обрезается снизу (глобально, все блоки);
   2) карточки выгод некликабельны — без ховеров;
   3) полоска-прогресс экранов 3D-телефона;
   4) загрузка без «появления на глазах»: экран-заставка, затем весь первый экран сразу. */

/* ===== 1. Градиентный текст: фон не должен быть меньше глифов =====
   Причина обрезки: при background-clip:text градиент рисуется только в пределах рамки элемента.
   У блочных градиентных заголовков высота = line-height (у RG Book он меньше кегля: 50/38, 30/32, 32/32, 44/46),
   поэтому низ букв (у, р, д, хвосты) выходил за рамку и срезался. Ещё сильнее — у «CRM-системы» в плашке:
   span внутри inline-flex становится блоком высотой 38 при кегле 50.
   Фикс: расширяем область фона внутренними отступами и тут же гасим их отрицательными внешними —
   рамка рисования больше, раскладка и вид прежние. Для строчных span отступы на строку не влияют. */
:root{--gt-pad:.3em}
.grad-text,
.benefit__title--a,.benefit__title--c,
.svc__title,
.cases__sum,
.fthanks__h{padding-block:var(--gt-pad);margin-block:calc(-1 * var(--gt-pad))}
/* у этих свои внешние отступы — сохраняем их */
.cases__sum{margin:calc(4px - var(--gt-pad)) 0 calc(-1 * var(--gt-pad)) 10px}
.fthanks__h{margin-top:calc(24px - var(--gt-pad))}
/* название услуги в плашке: span — флекс-элемент; анимация карусели идёт на родителе, ему тоже не резать */
.plate__service,.plate__name{overflow:visible}

/* ===== 2. Карточки выгод: некликабельны — без курсора-указателя и ховеров ===== */
.benefit{cursor:default;transition:none}
.benefit:hover{background:var(--glass-card);transform:none;box-shadow:none}
.benefit::before,.benefit:hover::before{opacity:0}

/* ===== 3. Телефон чуть выше + полоска-прогресс экранов под ним ===== */
.hero__phone{top:70px} /* телефон крупнее (phone.js FILL) — сцена выше, корпус 156…771 при 1440 */
.screens{position:absolute;left:506px;top:782px;width:428px;height:34px;z-index:5; /* в 1,5 раза меньше прежней 640×50, по центру под телефоном */
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:3px;padding:3px;
  border-radius:var(--r-pill);background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.screens::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--g-glass-stroke);opacity:.55;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.screens[hidden]{display:none}
.screens__seg{position:relative;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0;height:28px;padding:0 9px;
  border:0;border-radius:var(--r-pill);background:transparent;cursor:pointer;color:rgba(255,255,255,.45);
  font:500 8px/10px var(--f-text);text-align:left;white-space:nowrap;
  transition:color var(--t-fast) ease,background-color var(--t-med) ease}
.screens__lbl{overflow:hidden;text-overflow:ellipsis}
.screens__track{position:relative;display:block;align-self:stretch;width:100%;height:2px;border-radius:1px;background:rgba(255,255,255,.12);overflow:hidden;
  transition:background-color var(--t-med) ease}
.screens__track i{position:absolute;inset:0;border-radius:inherit;background:var(--g-btn);transform-origin:0 50%;transform:scaleX(var(--f,0))}
.screens__seg.is-done .screens__track i{--f:1;opacity:.45}
.screens__seg.is-on{color:var(--c-white);background:rgba(255,255,255,.06)}
.screens__seg.is-on .screens__track i{box-shadow:0 0 7px rgba(226,194,120,.6)}
.screens__seg:hover{color:rgba(255,255,255,.85);background:rgba(255,255,255,.07)}
.screens__seg:hover .screens__track{background:rgba(255,255,255,.2)}
.screens__seg:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px;border-radius:var(--r-pill)}
@media (prefers-reduced-motion:reduce){.screens__seg,.screens__track{transition:none}}

/* ===== 4. Загрузка: заставка, пока не готовы шрифты, фон и первый кадр 3D =====
   html.is-boot ставит скрипт в <head> (без JS заставки нет). Снимает hero.js, когда всё готово,
   или по страховке через 6 с. Если скрипты не загрузились вовсе — заставка уходит сама (анимация на 7 с). */
.boot{display:none}
html.is-boot .boot{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--c-bg);
  animation:boot-safety .5s ease 7s forwards}
html.is-boot.is-booted .boot{opacity:0;visibility:hidden;transition:opacity .6s var(--ease-io),visibility 0s .6s;animation:none}
.boot__in{position:relative;display:grid;justify-items:center;gap:22px;opacity:0;animation:boot-in .5s var(--ease) .35s forwards}
.boot__in::before{content:"";position:absolute;left:50%;top:50%;width:220px;height:220px;margin:-130px 0 0 -110px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(251,208,128,.16),rgba(128,225,166,.06) 60%,transparent);pointer-events:none}
.boot__logo{position:relative;width:120px;height:28px}
.boot__bar{position:relative;width:96px;height:2px;border-radius:2px;background:rgba(255,255,255,.1);overflow:hidden}
.boot__bar::after{content:"";position:absolute;inset:0;width:40%;border-radius:inherit;background:var(--g-btn);animation:boot-run 1.1s var(--ease-io) infinite}
@keyframes boot-in{to{opacity:1}}
@keyframes boot-run{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes boot-safety{to{opacity:0;visibility:hidden}}
/* пока идёт заставка, 3D не делает своё плавное проявление — кадр уже готов к моменту открытия */
html.is-boot:not(.is-booted) .phone3d .gl{transition:none}
@media (prefers-reduced-motion:reduce){.boot__in{animation-duration:.01ms}.boot__bar::after{animation:none;width:100%;opacity:.5}}