/* =========================================================================
   ООО «АИ Системы» — основной стиль
   Структура:
     1. Токены дизайн-системы
     2. База и сброс
     3. Раскладка (контейнер, секции, примитивы stack / cluster / grid)
     4. Компоненты (кнопки, поверхности, метки, чипы, заголовок секции)
     5. Шапка и мобильное меню
     6. Секции страницы
     7. Движение (появление, hover, reduced motion)
     8. Адаптив
   Новые стили пишем через токены, без «магических» чисел.
   ========================================================================= */

/* 1. ТОКЕНЫ ---------------------------------------------------------------- */
:root{
  /* Фон */
  --bg-0:#020617;
  --bg-1:#050616;
  --bg-2:#0b1020;

  /* Поверхности (карточки, панели, вложенные элементы) */
  --surface-1:rgba(10,18,40,.55);   /* основная карточка */
  --surface-2:rgba(15,23,42,.62);   /* плотная панель */
  --surface-inset:rgba(2,6,23,.50); /* элемент внутри карточки */
  --surface-solid:rgba(10,18,40,.82);
  --surface-overlay:rgba(2,6,23,.92);

  /* Текст */
  --text:#f6f7fb;
  --text-2:rgba(255,255,255,.88);
  --muted:#a7adbf;
  --muted-2:rgba(167,173,191,.78);

  /* Границы */
  --border-subtle:rgba(148,163,184,.16);
  --border:rgba(148,163,184,.22);
  --border-strong:rgba(148,163,184,.45);
  --border-hover:rgba(255,255,255,.34);
  --border-inset:rgba(31,41,55,1);

  /* Акценты */
  --accent:#f44fa6;
  --accent-2:#ff8a3c;
  --accent-grad:linear-gradient(135deg, var(--accent), var(--accent-2));
  --accent-soft:rgba(244,79,166,.16);
  --accent-soft-2:rgba(255,138,60,.14);
  --glow-pink:rgba(244,79,166,.18);
  --glow-orange:rgba(255,138,60,.16);
  --glow-blue:rgba(94,120,255,.15);
  --focus-ring:0 0 0 3px rgba(244,79,166,.45);

  /* Отступы: шкала 4px */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:48px;
  --space-10:64px;
  --space-11:80px;

  /* Типографика */
  --font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Text", "Inter", Roboto, sans-serif;
  --fs-2xs:11px;
  --fs-xs:12px;
  --fs-sm:13px;
  --fs-md:15px;
  --fs-lg:18px;
  --fs-xl:clamp(22px, 1.6vw + 14px, 28px);   /* заголовок секции */
  --fs-display:clamp(30px, 4.2vw, 44px);     /* крупный заголовок блока */
  --fs-hero:clamp(34px, 3.6vw + 12px, 56px); /* h1 первого экрана */
  --fs-lead:clamp(16px, .35vw + 14.5px, 19px); /* вводный абзац */
  --fs-h2:clamp(30px, 2.2vw + 16px, 48px);    /* заголовок переработанной секции */
  --lh-tight:1.1;
  --lh-snug:1.25;
  --lh-body:1.55;
  --tracking-tight:-.02em;
  --tracking-caps:.14em;

  /* Раскладка */
  --container:1160px;
  --gutter:clamp(16px, 3vw, 24px);
  --section-gap:clamp(52px, 6vw, 80px);
  --header-h:58px;
  --header-offset:96px; /* для якорей под липкой шапкой */

  /* Радиусы */
  --r-xs:12px;
  --r-sm:16px;
  --r-md:20px;
  --r-lg:24px;
  --r-xl:28px;
  --r-pill:999px;

  /* Тени */
  --shadow-sm:0 12px 32px rgba(0,0,0,.40);
  --shadow-md:0 18px 48px rgba(0,0,0,.50);
  --shadow-lg:0 24px 72px rgba(0,0,0,.58);
  --shadow-hover:0 26px 80px rgba(0,0,0,.62);

  /* Движение */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --dur-fast:160ms;
  --dur-base:240ms;
  --dur-slow:600ms;
  --lift:-2px;

  /* Слои */
  --z-header:60;
  --z-menu:80;
}

/* 2. БАЗА ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-offset);
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-family:var(--font-sans);
  color:var(--text);
  line-height:1.5;
  background:
    radial-gradient(900px 700px at 10% 0%, rgba(94,120,255,.18), transparent 55%),
    radial-gradient(900px 700px at 90% 10%, rgba(244,79,166,.22), transparent 50%),
    radial-gradient(900px 700px at 70% 95%, rgba(255,138,60,.18), transparent 55%),
    linear-gradient(180deg, var(--bg-0), #000 75%);
  background-color:var(--bg-0);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }
button{ font:inherit; color:inherit; }
ul{ list-style:none; }
::selection{ background:rgba(244,79,166,.28); }

:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.skip-link{
  position:absolute; left:var(--space-4); top:-100px; z-index:100;
  padding:var(--space-2) var(--space-4);
  border-radius:var(--r-pill);
  background:var(--surface-overlay);
  border:1px solid var(--border-strong);
  font-size:var(--fs-sm);
}
.skip-link:focus{ top:var(--space-4); }

/* Лёгкая сетка на фоне */
.bg-grid{
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(to right, rgba(148,163,184,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148,163,184,.10) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(circle at 50% 10%, #000, rgba(0,0,0,.25) 55%, transparent 78%);
  mask-image:radial-gradient(circle at 50% 10%, #000, rgba(0,0,0,.25) 55%, transparent 78%);
  z-index:0;
}

/* 3. РАСКЛАДКА ------------------------------------------------------------- */
.wrapper{
  position:relative;
  z-index:1;
  max-width:calc(var(--container) + var(--gutter) * 2);
  margin:0 auto;
  padding:18px var(--gutter) var(--space-10);
}
main{ padding-top:26px; }
section{ margin-bottom:var(--section-gap); }


/* 4. КОМПОНЕНТЫ ------------------------------------------------------------ */

/* Кнопки. .btn-primary / .btn-ghost — действующие имена,
   .btn .btn--primary / .btn--ghost — эквивалент для новых блоков. */
.btn, .btn-primary, .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2);
  min-height:40px;
  padding:9px 16px;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:var(--fs-sm);
  font-weight:650;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.btn--primary, .btn-primary{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:var(--accent-grad);
  box-shadow:var(--shadow-sm);
}
.btn--primary::after, .btn-primary::after{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22), transparent 70%);
  transform:translateX(-60%) rotate(8deg);
  opacity:0;
  transition:transform .55s var(--ease-out), opacity .35s var(--ease-out);
  pointer-events:none;
}
.btn--primary:hover, .btn-primary:hover{
  transform:translateY(var(--lift));
  box-shadow:var(--shadow-md);
}
.btn--primary:hover::after, .btn-primary:hover::after{
  opacity:1;
  transform:translateX(35%) rotate(8deg);
}
.btn--ghost, .btn-ghost{
  color:var(--text-2);
  background:var(--surface-solid);
  border-color:var(--border-strong);
  font-weight:550;
}
.btn--ghost:hover, .btn-ghost:hover{
  transform:translateY(var(--lift));
  border-color:rgba(255,255,255,.72);
  background:rgba(10,18,40,.92);
}
.btn:active, .btn-primary:active, .btn-ghost:active{ transform:translateY(0) scale(.99); }
.btn--sm{ min-height:40px; padding:8px 16px; font-size:var(--fs-sm); }
.btn--lg{ min-height:52px; padding:12px 26px; font-size:var(--fs-md); }
.btn-arrow{ width:18px; height:18px; flex:0 0 auto; transition:transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow{ transform:translateX(3px); }

/* Круглая иконка-кнопка (бургер, закрыть) */
.icon-btn{
  width:40px;
  height:40px;
  flex:0 0 auto;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(15,23,42,.18);
  color:rgba(255,255,255,.92);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.icon-btn:hover{ transform:translateY(-1px); background:rgba(15,23,42,.28); border-color:rgba(255,255,255,.35); }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn--dark{ background:rgba(15,23,42,.60); border-color:var(--border); }
.icon-btn--dark:hover{ background:var(--accent-soft); border-color:rgba(244,79,166,.35); }



/* 5. ШАПКА ----------------------------------------------------------------- */
/* Плавающая стеклянная панель. При прокрутке (.is-scrolled, ставит JS) меняются
   только фон, граница и тень — высота не меняется, контент под ней не прыгает. */
.site-header{
  position:sticky;
  top:12px;
  z-index:var(--z-header);
  padding-top:8px;
}
.nav{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--space-4);
  min-height:var(--header-h);
  padding:8px 8px 8px 14px;
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(9,11,28,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  transition:
    background-color var(--dur-slow) var(--ease-out),
    border-color var(--dur-slow) var(--ease-out),
    box-shadow var(--dur-slow) var(--ease-out);
}
/* Тонкая фирменная линия снизу — проявляется при прокрутке */
.nav::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-1px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,79,166,.6), rgba(255,138,60,.6), transparent);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
.site-header.is-scrolled .nav{
  background:rgba(7,8,22,.8);
  border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.45);
}
.site-header.is-scrolled .nav::after{ opacity:1; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{ background:rgba(9,11,28,.94); }
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  border-radius:var(--r-pill);
}
.logo-img{
  width:36px; height:36px; flex:0 0 auto;
  border-radius:var(--r-pill);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 4px rgba(244,79,166,.06), 0 6px 18px rgba(0,0,0,.4);
  transition:box-shadow var(--dur-base) var(--ease-out);
}
.logo:hover .logo-img{ box-shadow:0 0 0 4px rgba(244,79,166,.14), 0 6px 18px rgba(0,0,0,.4); }
.logo-img img{ width:100%; height:100%; object-fit:cover; }
.logo-text{ min-width:0; }
.logo-title, .logo-sub{ display:block; white-space:nowrap; }
.logo-title{
  font-size:14px;
  font-weight:750;
  letter-spacing:.08em;
  line-height:var(--lh-tight);
}
.logo-sub{
  margin-top:3px;
  font-size:var(--fs-2xs);
  color:var(--muted-2);
  letter-spacing:.02em;
}

.site-nav{ justify-self:center; min-width:0; }
.site-nav ul{
  display:flex;
  gap:2px;
  align-items:center;
  white-space:nowrap;
}
.site-nav a{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:var(--r-pill);
  font-size:14px;
  color:rgba(236,238,248,.68);
  transition:color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
/* Индикатор активного раздела */
.site-nav a::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:14px;
  height:2px;
  margin-left:-7px;
  border-radius:2px;
  background:var(--accent-grad);
  transform:scaleX(0);
  transition:transform var(--dur-base) var(--ease-out);
}
.site-nav a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.site-nav a.is-active{ color:#fff; }
.site-nav a.is-active::after{ transform:scaleX(1); }

.nav-cta{ display:flex; align-items:center; gap:var(--space-2); justify-self:end; }
.nav-cta .btn--primary{ gap:7px; }
.nav-cta .btn--primary svg{ width:16px; height:16px; flex:0 0 auto; }
.nav-toggle{ display:none; }

@media (max-width: 1279px){
  .logo-sub, .nav-cta-long{ display:none; }
}
@media (max-width: 980px){
  .site-nav{ display:none; }
  .nav{ grid-template-columns:minmax(0,1fr) auto; }
  .nav-toggle{ display:inline-flex; }
}
/* Узкие телефоны: кнопка Telegram — только иконка, название компании остаётся */
@media (max-width: 420px){
  .nav{ gap:var(--space-2); padding:8px 8px 8px 10px; }
  .nav-cta .nav-cta-text{ display:none; }
  .nav-cta .btn--primary{ width:40px; min-height:40px; padding:0; }
}
@media (max-width: 339px){
  .logo-title{ font-size:13px; letter-spacing:.05em; }
}

/* Мобильное меню */
.mobile-menu{
  position:fixed;
  inset:0;
  z-index:var(--z-menu);
  background:rgba(2,6,23,.78);
  padding:var(--space-4);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}
.mobile-menu.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--dur-base) var(--ease-out), visibility 0s;
}
.mobile-panel{
  width:100%;
  max-width:520px;
  max-height:calc(100dvh - var(--space-7));
  overflow-y:auto;
  border-radius:var(--r-md);
  border:1px solid rgba(148,163,184,.28);
  background:var(--surface-overlay);
  box-shadow:var(--shadow-lg);
  padding:14px;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transform:translateY(-8px);
  transition:transform var(--dur-base) var(--ease-out);
}
.mobile-menu.is-open .mobile-panel{ transform:none; }
.mobile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:2px 2px 10px;
}
.mobile-title{
  font-size:var(--fs-xs);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--muted);
}
.mobile-links{ display:flex; flex-direction:column; gap:var(--space-2); padding-top:6px; }
.mobile-links a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
  padding:12px;
  border-radius:var(--r-sm);
  background:var(--surface-solid);
  border:1px solid var(--border-inset);
  color:rgba(255,255,255,.92);
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.mobile-links a:hover{ border-color:var(--border-strong); }
.mobile-links a.is-active{ border-color:rgba(244,79,166,.45); background:rgba(244,79,166,.08); }
.mobile-links a span{ color:var(--muted-2); font-size:var(--fs-xs); text-align:right; }
.mobile-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--space-3); }
.mobile-actions > *{ flex:1 1 140px; }

/* 6. СЕКЦИИ ---------------------------------------------------------------- */

/* HERO */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  align-items:center;
  gap:clamp(40px, 5vw, 80px);
  padding:clamp(40px, 7vw, 104px) 0 clamp(24px, 4vw, 48px);
  margin-bottom:var(--section-gap);
}
/* Мягкое свечение за композицией */
.hero-glow{
  position:absolute;
  z-index:-1;
  top:50%;
  right:0;
  width:min(640px, 60%);
  aspect-ratio:1;
  transform:translateY(-50%);
  background:
    radial-gradient(closest-side, rgba(244,79,166,.20), transparent 70%),
    radial-gradient(closest-side at 65% 70%, rgba(255,138,60,.16), transparent 70%);
  filter:blur(20px);
  pointer-events:none;
}

.hero-copy{ min-width:0; }
.hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--space-6);
  padding:6px 14px 6px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:var(--fs-xs);
  letter-spacing:.02em;
}
.hero-eyebrow-dot{
  position:relative;
  width:8px; height:8px; flex:0 0 auto;
  border-radius:50%;
  background:var(--accent-grad);
}
.hero-eyebrow-dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid rgba(244,79,166,.5);
  animation:hero-ping 3.2s var(--ease-out) 1.6s infinite;
}
.hero-title{
  font-size:var(--fs-hero);
  font-weight:700;
  line-height:1.04;
  letter-spacing:-.03em;
  text-wrap:balance;
  margin-bottom:var(--space-6);
}
.hero-accent{
  background:linear-gradient(95deg, #ff6fb7 0%, #ff8a3c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero-lead{
  max-width:34em;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:rgba(222,226,238,.72);
  text-wrap:pretty;
  margin-bottom:var(--space-7);
}
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); }
.hero-note{
  margin-top:var(--space-5);
  font-size:var(--fs-sm);
  color:var(--muted-2);
}
.hero-note a{
  color:var(--text-2);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);
  text-underline-offset:3px;
  transition:text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.hero-note a:hover{ color:#fff; text-decoration-color:var(--accent); }

/* Последовательное появление: style="--i:N" задаёт порядок */
.hero-seq{
  animation:hero-rise .8s var(--ease-out) both;
  animation-delay:calc(var(--i, 0) * 90ms + 60ms);
}

/* --- Композиция: каналы → ИИ → CRM/процессы -------------------------------
   Сцена 520×580: SVG-линии и HTML-карточки используют одни координаты
   (карточки позиционируются в % от сцены), поэтому совпадают на любой ширине.
   Размеры внутри карточек — в cqi, чтобы всё масштабировалось вместе со сценой. */
.hero-visual{ position:relative; min-width:0; }
.hv-stage{
  position:relative;
  width:100%;
  max-width:520px;
  margin-inline:auto;
  aspect-ratio:520 / 580;
  container-type:inline-size;
}
.hv-links{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.hv-path{ fill:none; stroke:rgba(255,255,255,.08); stroke-width:1.5; }
.hv-path-glow{
  fill:none;
  stroke:url(#hv-grad);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
  opacity:.75;
  animation:hv-draw 1.1s var(--ease-in-out) forwards;
  animation-delay:var(--d, 900ms);
}
.hv-tick{ stroke:rgba(255,255,255,.14); stroke-width:1; stroke-dasharray:3 4; }
.hv-packet{ fill:#ffd9c2; filter:drop-shadow(0 0 4px rgba(255,138,60,.9)); }

.hv-node{
  position:absolute;
  translate:calc(var(--px, 0) * var(--depth, 8) * 1px) calc(var(--py, 0) * var(--depth, 8) * 1px);
  transition:translate .8s var(--ease-out);
  animation:hv-in .8s var(--ease-out) both;
  animation-delay:var(--d, 400ms);
}
.hv-node--tg{  left:0;     top:0;     width:45.4%; height:20.7%; --depth:10; --d:380ms; }
.hv-node--max{ left:54.6%; top:0;     width:45.4%; height:20.7%; --depth:10; --d:480ms; }
.hv-node--core{ left:37.3%; top:38.6%; width:25.4%; aspect-ratio:1; --depth:4; --d:640ms; }
.hv-node--crm{ left:0;     top:79.3%; width:45.4%; height:20.7%; --depth:14; --d:800ms; }
.hv-node--ops{ left:54.6%; top:79.3%; width:45.4%; height:20.7%; --depth:14; --d:900ms; }
.hv-node--tag-l{ left:0;  top:50%; --depth:6; --d:760ms; }
.hv-node--tag-r{ right:0; top:50%; --depth:6; --d:760ms; }

.hv-card{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3cqi;
  overflow:hidden;
  border-radius:3.4cqi;
  border:1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(12,14,34,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 50px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  animation:hv-float 9s ease-in-out infinite alternate;
  animation-delay:var(--fd, 0s);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.hv-card:hover{
  border-color:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(244,79,166,.12);
}
.hv-node--max .hv-card{ --fd:-3s; }
.hv-node--crm .hv-card{ --fd:-5s; }
.hv-node--ops .hv-card{ --fd:-7s; }

.hv-card-head{ display:flex; align-items:center; gap:2cqi; }
.hv-ico{
  display:grid;
  place-items:center;
  width:6.4cqi; height:6.4cqi;
  flex:0 0 auto;
  border-radius:1.8cqi;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.9);
}
.hv-ico svg{ width:55%; height:55%; }
.hv-card-title{ font-size:2.8cqi; font-weight:650; color:#fff; letter-spacing:-.01em; }
.hv-badge{
  margin-left:auto;
  padding:.5cqi 1.6cqi;
  border-radius:var(--r-pill);
  font-size:2cqi;
  color:#ffa3cf;
  background:rgba(244,79,166,.12);
  border:1px solid rgba(244,79,166,.2);
}
.hv-badge--warm{ color:#ffbb8a; background:rgba(255,138,60,.12); border-color:rgba(255,138,60,.22); }

.hv-chat{ display:flex; flex-direction:column; gap:1.4cqi; }
.hv-bubble{
  display:block;
  height:2.6cqi;
  width:72%;
  border-radius:1.3cqi 1.3cqi 1.3cqi .4cqi;
  background:rgba(255,255,255,.08);
}
.hv-bubble--short{ width:48%; }
.hv-bubble--out{
  margin-left:auto;
  width:56%;
  border-radius:1.3cqi 1.3cqi .4cqi 1.3cqi;
  background:linear-gradient(90deg, rgba(244,79,166,.38), rgba(255,138,60,.32));
}

.hv-stages{ display:flex; gap:1cqi; }
.hv-stage-chip{
  flex:1 1 0;
  min-width:0;
  padding:1cqi .6cqi;
  border-radius:var(--r-pill);
  font-size:1.95cqi;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted-2);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
}
.hv-stage-chip.is-active{
  color:#fff;
  background:linear-gradient(90deg, rgba(244,79,166,.28), rgba(255,138,60,.24));
  border-color:rgba(255,138,60,.35);
}

.hv-checks{ display:flex; flex-direction:column; gap:1.2cqi; }
.hv-check{
  display:flex;
  align-items:center;
  gap:1.4cqi;
  font-size:2.1cqi;
  color:var(--text-2);
  white-space:nowrap;
  animation:hv-check-in .6s var(--ease-out) both;
  animation-delay:var(--d, 1.6s);
}
.hv-check-ico{
  display:grid;
  place-items:center;
  width:3.2cqi; height:3.2cqi;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent-grad);
  color:#fff;
}
.hv-check-ico svg{ width:62%; height:62%; }

/* Ядро ИИ */
.hv-core{ position:relative; width:100%; height:100%; display:grid; place-items:center; }
.hv-core-halo{
  position:absolute;
  inset:-38%;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(244,79,166,.34), rgba(255,138,60,.12) 55%, transparent 75%);
  animation:hv-breathe 6s ease-in-out infinite alternate;
}
.hv-core-track{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.14);
}
.hv-core-ring{
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0 55%, rgba(244,79,166,.9) 78%, rgba(255,138,60,.95) 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation:hv-spin 16s linear infinite;
}
.hv-core-orb{
  position:relative;
  width:64%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:radial-gradient(circle at 32% 26%, #ffd9bf 0, #ff9a55 18%, #f44fa6 52%, #3a2474 100%);
  box-shadow:0 0 36px rgba(244,79,166,.45), inset 0 -1.6cqi 3.6cqi rgba(20,6,40,.5), inset 0 .6cqi 1.2cqi rgba(255,255,255,.35);
  font-size:4.6cqi;
  font-weight:800;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:0 1px 8px rgba(60,10,60,.45);
}

.hv-tag{
  display:inline-flex;
  align-items:center;
  gap:1.2cqi;
  translate:0 -50%;
  padding:1.2cqi 2cqi;
  border-radius:var(--r-pill);
  font-size:2.15cqi;
  color:var(--text-2);
  white-space:nowrap;
  background:rgba(12,14,34,.82);
  border:1px solid rgba(255,255,255,.1);
}
.hv-tag::before{
  content:"";
  width:1.3cqi; height:1.3cqi;
  border-radius:50%;
  background:var(--accent-grad);
}

/* Упрощённая схема для телефонов */
.hero-flow{
  display:none;
  grid-template-columns:minmax(0,1fr) minmax(12px,.5fr) minmax(0,1fr) minmax(12px,.5fr) minmax(0,1fr);
  align-items:start;
  padding:var(--space-5) var(--space-3);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01)), rgba(12,14,34,.6);
}
.hf-node{ display:flex; flex-direction:column; align-items:center; gap:var(--space-2); text-align:center; }
.hf-ico, .hf-orb{
  display:grid;
  place-items:center;
  width:48px; height:48px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
}
.hf-ico svg{ width:22px; height:22px; }
.hf-orb{
  border-radius:50%;
  border:0;
  background:radial-gradient(circle at 32% 26%, #ffd9bf 0, #ff9a55 18%, #f44fa6 52%, #3a2474 100%);
  box-shadow:0 0 24px rgba(244,79,166,.45);
  font-weight:800;
  font-size:15px;
}
.hf-label{ font-size:var(--fs-2xs); line-height:1.35; color:var(--muted); }
.hf-line{
  position:relative;
  align-self:start;
  margin-top:24px;
  height:1px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
}
.hf-line::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent, #ff8a3c, transparent);
  transform:translateX(-100%);
  animation:hf-pulse 3.6s var(--ease-in-out) 1.2s infinite;
}
.hf-line + .hf-node + .hf-line::after{ animation-delay:2s; }

/* Пауза декоративной анимации, когда Hero вне экрана (ставит JS) */
.hero-visual.is-paused *,
.hero-visual.is-paused *::before,
.hero-visual.is-paused *::after{ animation-play-state:paused; }

@keyframes hero-rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes hero-ping{ 0%{ opacity:.8; transform:scale(.6); } 70%,100%{ opacity:0; transform:scale(1.8); } }
@keyframes hv-check-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
@keyframes hv-in{ from{ opacity:0; scale:.94; } to{ opacity:1; scale:1; } }
@keyframes hv-draw{ to{ stroke-dashoffset:0; } }
@keyframes hv-float{ from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
@keyframes hv-spin{ to{ transform:rotate(1turn); } }
@keyframes hv-breathe{ from{ opacity:.7; transform:scale(.96); } to{ opacity:1; transform:scale(1.04); } }
@keyframes hf-pulse{ 0%{ transform:translateX(-100%); } 60%,100%{ transform:translateX(100%); } }

@media (max-width: 999px){
  .hero{ grid-template-columns:1fr; padding-top:clamp(32px, 6vw, 64px); }
  .hero-copy{ max-width:680px; }
  .hero-glow{ top:auto; bottom:-10%; right:50%; transform:translateX(50%); }
}
@media (max-width: 400px){
  .hero-eyebrow-extra{ display:none; }
}
@media (max-width: 640px){
  .hero{ gap:var(--space-8); padding-bottom:0; }
  .hero-eyebrow{ margin-bottom:var(--space-5); }
  .hero-title{ margin-bottom:var(--space-5); }
  .hero-lead{ margin-bottom:var(--space-6); }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hv-stage{ display:none; }
  .hero-flow{ display:grid; }
}

@media (prefers-reduced-motion: reduce){
  .hero-seq, .hv-node, .hv-check{ animation:none !important; opacity:1; }
  .hv-path-glow{ animation:none !important; stroke-dashoffset:0; }
  .hv-packets, .hero-eyebrow-dot::after, .hf-line::after{ display:none; }
  .hv-card, .hv-core-ring, .hv-core-halo{ animation:none !important; }
  .hv-node{ translate:none; }
}

/* SERVICES --------------------------------------------------------------- */
/* Bento: 4 колонки. Два ключевых направления — по 2 колонки,
   четыре стандартных — по одной. Ниже 1100px — 2 колонки, ниже 640px — одна. */
.services{ position:relative; }
.services-head, .block-head{ max-width:760px; margin-bottom:clamp(32px, 4vw, 56px); }
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--space-5);
  padding:6px 14px 6px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-size:var(--fs-xs);
  letter-spacing:.02em;
}
.eyebrow-dot{ width:8px; height:8px; flex:0 0 auto; border-radius:50%; background:var(--accent-grad); }
.services-title, .block-title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  text-wrap:balance;
  margin-bottom:var(--space-5);
}
.services-lead, .block-lead{
  max-width:38em;
  font-size:var(--fs-lead);
  line-height:1.6;
  color:rgba(222,226,238,.72);
  text-wrap:pretty;
}

/* Витрина услуг: 3×2 / 2×3 / 1×6. Сверху у каждой карточки — полоса с
   иллюстрацией в едином «чертёжном» стиле (тонкие линии, узлы, один градиентный
   маршрут), ниже — заголовок, описание и ссылка. subgrid выравнивает строки ряда. */
.svc-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--space-5);
}
.svc{
  --mx:50%;
  --my:0%;
  --art-h:clamp(150px, 11vw + 20px, 184px);
  --pad:clamp(24px, 2.2vw, 32px);
  --gx:50%;   /* положение свечения в полосе иллюстрации */
  --gy:40%;
  --gi:.16;   /* интенсивность свечения */
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-row:span 4;
  grid-template-rows:subgrid;
  row-gap:0;
  align-content:start;
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)), rgba(10,12,30,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.3);
  transition:
    translate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
/* Индивидуальное положение и сила свечения — единая палитра, разный характер */
.svc--bots{ --gx:50%; --gy:50%; --gi:.26; }
.svc--ai  { --gx:82%; --gy:50%; --gi:.28; }
.svc--auto{ --gx:86%; --gy:58%; --gi:.24; }
.svc--crm { --gx:50%; --gy:50%; --gi:.22; }
.svc--web { --gx:76%; --gy:74%; --gi:.24; }
.svc--soft{ --gx:50%; --gy:68%; --gi:.28; }

/* Подсветка за курсором и тонкая линия по верхней грани */
.svc::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(360px circle at var(--mx) var(--my), rgba(244,79,166,.1), transparent 60%);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
.svc::after{
  content:"";
  position:absolute;
  top:0;
  left:14%;
  right:14%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,79,166,.8), rgba(255,138,60,.8), transparent);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
  pointer-events:none;
}
.svc:hover{
  translate:0 -3px;
  border-color:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 28px 70px rgba(0,0,0,.42);
}
.svc:hover::before, .svc:hover::after{ opacity:1; }

/* Полоса иллюстрации */
.svc-art{
  position:relative;
  height:var(--art-h);
  padding:10px var(--pad) 6px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 16px 16px,
    linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  -webkit-mask-image:linear-gradient(#000 70%, rgba(0,0,0,.85));
  mask-image:linear-gradient(#000 70%, rgba(0,0,0,.85));
}
/* Свечение — отдельный слой, на hover меняется только opacity */
.svc-art::before,
.svc-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.svc-art::before{
  background:
    radial-gradient(45% 70% at var(--gx) var(--gy), rgba(244,79,166,var(--gi)), transparent 70%),
    radial-gradient(35% 60% at calc(100% - var(--gx)) calc(100% - var(--gy) * .5), rgba(255,138,60,calc(var(--gi) * .55)), transparent 70%);
}
.svc-art::after{
  background:radial-gradient(40% 60% at var(--gx) var(--gy), rgba(255,138,60,.14), transparent 70%);
  opacity:0;
}
.svc:hover .svc-art::after{ opacity:1; }
.sv{ position:relative; z-index:1; display:block; width:100%; height:100%; overflow:visible; }

/* Общий язык иллюстраций */
.sv .ln{ stroke:rgba(255,255,255,.13); stroke-width:1; }
.sv .ln-2{ stroke:rgba(255,255,255,.32); stroke-width:1.25; stroke-linecap:round; }
.sv .dash{ stroke-dasharray:3 5; }
.sv .nd{ fill:#0c0e24; stroke:rgba(255,255,255,.26); stroke-width:1.25; }
.sv .nd-dim{ fill:rgba(12,14,36,.6); stroke:rgba(255,255,255,.12); }
.sv .dash-nd{ stroke-dasharray:4 4; }
.sv .nd-acc{ stroke:url(#sv-grad); stroke-width:1.6; }
.sv .acc{ stroke:url(#sv-grad); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.sv .fill-acc{ fill:url(#sv-grad); }
.sv .glyph{ stroke:rgba(255,255,255,.88); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.sv .dot{ fill:rgba(255,255,255,.32); }
.sv .blk{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.12); stroke-width:1; }
.sv .bar{ fill:rgba(255,255,255,.16); }
.sv .sv-glow{ filter:drop-shadow(0 0 10px rgba(244,79,166,.55)); }
.sv .cube .face-l{ fill:rgba(255,255,255,.035); stroke:rgba(255,255,255,.2); stroke-width:1; stroke-linejoin:round; }
.sv .cube .face-r{ fill:rgba(255,255,255,.015); stroke:rgba(255,255,255,.2); stroke-width:1; stroke-linejoin:round; }
.sv .cube .top{ fill:rgba(255,255,255,.07); stroke:rgba(255,255,255,.3); stroke-width:1; stroke-linejoin:round; }
.sv .cube-acc .face-l, .sv .cube-acc .face-r{ fill:#0f0f28; stroke:url(#sv-grad); stroke-width:1.4; }
.sv .cube-acc .top-acc{ fill:rgba(244,79,166,.22); stroke:url(#sv-grad); stroke-width:1.4; }

/* Световой сигнал: короткий штрих бежит по маршруту (stroke-dashoffset).
   Один раз после появления карточки (у каждой своя задержка --sig-d) и повторно на hover. */
.sv .sig{
  stroke:#ffe2cf;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:.1 1.2;
  stroke-dashoffset:.1;
  filter:drop-shadow(0 0 4px rgba(255,138,60,.95));
}
.js .svc.is-visible .sig{ animation:sv-run 1.5s var(--ease-in-out) var(--sig-d, 1s) both; }
.js .svc.is-visible .sig-2{ animation-delay:calc(var(--sig-d, 1s) + .45s); }
.js .svc.is-visible:hover .sig,
html:not(.js) .svc:hover .sig{ animation:sv-run 1.5s var(--ease-in-out) .1s infinite; }
.js .svc.is-visible:hover .sig-2,
html:not(.js) .svc:hover .sig-2{ animation-delay:.6s; }

/* Проявление основных соединений при появлении карточки */
.js .svc.reveal .sv-draw{ stroke-dasharray:1; }
.js .svc.reveal:not(.is-visible) .sv-draw{ stroke-dashoffset:1; }
.js .svc.is-visible .sv-draw{ animation:sv-draw 1s var(--ease-out) .35s both; }
.js .svc.is-visible .sv-load{ animation:sv-grow .9s var(--ease-out) .9s both; }

/* Индивидуальная реакция одного элемента на hover */
.sv .sv-hover{ transform-box:fill-box; transform-origin:center; transition:transform var(--dur-slow) var(--ease-out); }
.sv .sv-load{ transform-box:fill-box; transform-origin:left center; }
.svc:hover .sv-pop{ transform:scale(1.08); }
.svc:hover .sv-lift{ transform:translateY(-5px); }
.svc:hover .sv-float{ transform:translateY(-6px); }
.svc:hover .sv-back{ transform:translate(8px, -5px); }
.svc:hover .sv-front{ transform:translate(-5px, -4px); }

@keyframes sv-run{ from{ stroke-dashoffset:.1; } to{ stroke-dashoffset:-1.05; } }
@keyframes sv-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes sv-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

/* Текстовая часть */
.svc-title{
  padding:var(--space-6) var(--pad) 0;
  margin-bottom:var(--space-3);
  font-size:clamp(21px, .5vw + 16.5px, 24px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.svc-text{
  padding:0 var(--pad);
  margin-bottom:var(--space-5);
  font-size:clamp(15px, .15vw + 14px, 16px);
  line-height:1.6;
  color:rgba(222,226,238,.7);
  text-wrap:pretty;
}
.svc-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:end;
  justify-self:start;
  margin:0 var(--pad) var(--pad);
  padding:6px 0;
  font-size:var(--fs-md);
  font-weight:600;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.svc-link:hover{ border-color:var(--accent-2); color:#ffd3b8; }
.svc-link:hover .btn-arrow{ transform:translateX(3px); }

/* Заключительная панель — отдельно от сетки услуг */
.svc-cta{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-6);
  margin-top:clamp(40px, 5vw, 64px);
  padding:clamp(28px, 3.4vw, 48px);
  border-radius:var(--r-xl);
  border:1px solid rgba(244,79,166,.22);
  background:
    radial-gradient(60% 140% at 0% 50%, rgba(244,79,166,.16), transparent 70%),
    radial-gradient(50% 140% at 100% 50%, rgba(255,138,60,.12), transparent 70%),
    rgba(12,14,34,.7);
}
.svc-cta-title{ font-size:clamp(22px, 1vw + 15px, 28px); font-weight:700; letter-spacing:-.02em; margin-bottom:var(--space-2); }
.svc-cta-text{ font-size:clamp(15px, .15vw + 14px, 16px); color:rgba(222,226,238,.72); }
.svc-cta .btn{ flex:0 0 auto; }

@media (max-width: 1023px){
  .svc-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--space-4); }
}
/* Телефон: полоса иллюстрации ниже, второстепенные детали скрыты */
@media (max-width: 640px){
  .svc-grid{ grid-template-columns:1fr; }
  .svc{ --art-h:140px; }
  .svc-art{ padding:4px 0 2px; }
  .sv .sv-extra{ display:none; }
  .svc-title{ padding-top:var(--space-5); }
  .svc-text{ margin-bottom:var(--space-4); }
  .svc-cta{ flex-direction:column; align-items:stretch; padding:var(--space-6); }
  .svc-cta .btn{ width:100%; padding-inline:var(--space-4); white-space:nowrap; }
}
@media (prefers-reduced-motion: reduce){
  .svc:hover{ translate:none; }
  .sv .sig{ display:none; }
  .svc:hover .sv-hover{ transform:none; }
  .js .svc.reveal .sv-draw{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .js .svc.is-visible .sv-load{ animation:none; }
}

/* WHY -------------------------------------------------------------------- */
/* Спокойный блок: вступление слева (липкое на десктопе), справа 2×2 карточки
   без стеклянной заливки — только тонкая граница, SVG-знак и типографика. */
.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.why{
  display:grid;
  grid-template-columns:minmax(0, 5fr) minmax(0, 7fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:start;
}
.why-intro{ position:sticky; top:calc(var(--header-offset) + var(--space-6)); margin-bottom:0; }
.why-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-4);
}
.why-card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  padding:clamp(24px, 2.4vw, 32px);
  border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.015);
  transition:
    translate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.why-card:hover{
  translate:0 -2px;
  border-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}
.why-index{
  position:absolute;
  top:clamp(24px, 2.4vw, 32px);
  right:clamp(24px, 2.4vw, 32px);
  font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;
  letter-spacing:.08em;
  color:rgba(255,255,255,.3);
}
.why-glyph{ width:48px; height:48px; margin-bottom:var(--space-3); overflow:visible; }
.why-g-base{ stroke:rgba(255,255,255,.32); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.why-g-soft{ stroke:rgba(255,255,255,.14); }
.why-g-fill{ fill:var(--bg-0); }
.why-acc{
  stroke:url(#why-grad);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  transform-box:fill-box;
  transform-origin:center;
  transition:transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.why-glyph--goal .why-acc{ fill:url(#why-grad); stroke:none; }
.why-acc--line{ transform-origin:left center; transform:scaleX(.55); }
.why-card:hover .why-glyph--goal .why-acc{ transform:scale(1.35); }
.why-card:hover .why-glyph--arch .why-acc{ transform:translateY(-3px); }
.why-card:hover .why-acc--line{ transform:scaleX(1); }
.why-card:hover .why-acc--arrow{ transform:translate(2px, -2px); }
.why-card-title{
  font-size:clamp(17px, .4vw + 15px, 20px);
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.015em;
  padding-right:28px;
}
.why-card-text{ font-size:var(--fs-md); line-height:1.6; color:rgba(222,226,238,.66); }

/* Карточки с .reveal: переходы появления (opacity/transform) + hover (translate и др.).
   Hover-подъём сделан через translate, чтобы не конфликтовать с transform появления. */
.js .svc.reveal, .js .why-card.reveal{
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    translate var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

/* PROCESS ---------------------------------------------------------------- */
/* Таймлайн: линия и заполнение позиционирует JS по маркерам первого и последнего
   этапа (--tl-start / --tl-length). Заполнение — transform: scale по --tl-progress.
   Без JS и при reduced motion линия заполнена, все этапы отмечены. */
.process-cta{ margin-top:clamp(40px, 5vw, 64px); }
.timeline{
  --tl-gap:clamp(20px, 3vw, 40px);
  --tl-marker:26px;
  --tl-progress:1;
  position:relative;
}
.js .timeline{ --tl-progress:0; }
.tl-steps{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--tl-gap);
  list-style:none;
}
.tl-track{
  position:absolute;
  top:calc(var(--tl-marker) / 2 - 1px);
  left:var(--tl-start, calc(var(--tl-marker) / 2));
  width:var(--tl-length, calc(75% + var(--tl-gap) * .25 - var(--tl-marker)));
  height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.08);
}
.tl-fill{
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:var(--accent-grad);
  box-shadow:0 0 12px rgba(244,79,166,.45);
  transform-origin:left center;
  transform:scaleX(var(--tl-progress));
  transition:transform .25s linear;
}
.tl-step{ position:relative; min-width:0; padding-top:calc(var(--tl-marker) + var(--space-6)); }
.tl-marker{
  position:absolute;
  top:0;
  left:0;
  width:var(--tl-marker);
  height:var(--tl-marker);
  border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  background:var(--bg-0);
  transition:border-color var(--dur-slow) var(--ease-out);
}
.tl-marker::before,
.tl-marker::after{
  content:"";
  position:absolute;
  border-radius:50%;
  transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.tl-marker::after{
  inset:7px;
  background:var(--accent-grad);
  opacity:.2;
  transform:scale(.7);
}
.tl-marker::before{
  inset:-6px;
  background:radial-gradient(closest-side, rgba(244,79,166,.35), transparent);
  opacity:0;
}
.tl-num{
  display:block;
  margin-bottom:var(--space-3);
  font-size:clamp(40px, 2.4vw + 18px, 56px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg, #fff 0%, rgba(255,255,255,.55) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  opacity:.28;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.tl-title{
  font-size:clamp(18px, .5vw + 15px, 21px);
  font-weight:650;
  line-height:1.3;
  letter-spacing:-.015em;
  margin-bottom:var(--space-3);
}
.tl-text{ font-size:var(--fs-md); line-height:1.6; color:rgba(222,226,238,.66); margin-bottom:var(--space-4); }
.tl-keys{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; }
.tl-keys li{
  padding:3px 10px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-2xs);
  color:var(--muted);
  white-space:nowrap;
}

/* Этап «достигнут»: класс ставит JS по мере заполнения линии; без JS — сразу */
.tl-step.is-reached .tl-marker,
html:not(.js) .tl-marker{ border-color:rgba(255,138,60,.6); }
.tl-step.is-reached .tl-marker::after,
html:not(.js) .tl-marker::after{ opacity:1; transform:none; }
.tl-step.is-reached .tl-marker::before,
html:not(.js) .tl-marker::before{ opacity:1; }
.tl-step.is-reached .tl-num,
html:not(.js) .tl-num{ opacity:1; }

.process-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--space-2) var(--space-4);
  padding-top:var(--space-6);
  border-top:1px solid rgba(255,255,255,.07);
}
.process-cta-text{ font-size:var(--fs-lead); color:var(--text); font-weight:600; }
.text-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  font-size:var(--fs-md);
  font-weight:600;
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.text-link:hover{ border-color:var(--accent-2); color:#ffd3b8; }
.text-link:hover .btn-arrow{ transform:translateX(3px); }

@media (max-width: 1023px){
  .why{ grid-template-columns:1fr; }
  .why-intro{ position:static; }
}
/* Вертикальный таймлайн */
@media (max-width: 899px){
  .tl-steps{ grid-template-columns:1fr; gap:var(--space-8); }
  .tl-step{ padding-top:0; padding-left:calc(var(--tl-marker) + var(--space-5)); }
  .tl-track{
    top:var(--tl-start, calc(var(--tl-marker) / 2));
    left:calc(var(--tl-marker) / 2 - 1px);
    width:2px;
    height:var(--tl-length, calc(100% - 160px));
  }
  .tl-fill{ transform-origin:center top; transform:scaleY(var(--tl-progress)); }
  .tl-num{ font-size:clamp(34px, 4vw + 20px, 44px); margin-bottom:var(--space-2); margin-top:-4px; }
}
@media (max-width: 640px){
  .why-list{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .why-card:hover{ translate:none; }
  .why-card:hover .why-acc{ transform:none; }
  .why-card:hover .why-acc--line{ transform:scaleX(.55); }
  .tl-fill{ transition:none; }
}

/* APPS ------------------------------------------------------------------- */
/* Слева — текст и возможности, справа — сцена из двух смартфонов.
   Смартфоны и интерфейсы — чистый CSS: размеры интерфейса в cqi телефона,
   поэтому экран масштабируется вместе с устройством без искажений. */
.apps{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
  align-items:center;
  gap:clamp(40px, 5vw, 88px);
}
.apps-copy{ min-width:0; }
.apps-copy .block-head{ margin-bottom:var(--space-7); }
.apps-caps{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--space-6) var(--space-7);
  margin-bottom:var(--space-8);
}
.apps-cap{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-top:var(--space-4);
  border-top:1px solid rgba(255,255,255,.08);
}
.apps-cap-ico{
  display:grid;
  place-items:center;
  width:38px; height:38px;
  flex:0 0 auto;
  border-radius:12px;
  color:#ffc3de;
  background:rgba(244,79,166,.08);
  border:1px solid rgba(244,79,166,.28);
}
.apps-cap-ico svg{ width:20px; height:20px; }
.apps-cap-title{ font-size:16px; font-weight:650; line-height:1.3; letter-spacing:-.01em; margin-bottom:4px; }
.apps-cap-text{ font-size:15px; line-height:1.5; color:rgba(222,226,238,.66); }

/* Сцена */
.apps-stage{
  --px:0;
  --py:0;
  position:relative;
  width:100%;
  max-width:620px;
  justify-self:end;
  aspect-ratio:600 / 620;
  container-type:inline-size;
}
.apps-glow{
  position:absolute;
  inset:4% 0 2% 2%;
  background:
    radial-gradient(48% 46% at 38% 48%, rgba(244,79,166,.42), transparent 72%),
    radial-gradient(42% 40% at 72% 62%, rgba(255,138,60,.3), transparent 72%);
  filter:blur(28px);
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
  mask-image:radial-gradient(closest-side, #000 55%, transparent 100%);
  opacity:.8;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.apps-stage:hover .apps-glow{ opacity:1; }
.apps-ring{
  position:absolute;
  left:50%;
  top:50%;
  width:88%;
  aspect-ratio:1;
  translate:-50% -50%;
  border-radius:50%;
  border:1px dashed rgba(255,255,255,.08);
}
.apps-ring--inner{ width:62%; border:1px solid rgba(244,79,166,.12); }

/* Смартфон */
.phone{
  --depth:10;
  position:absolute;
  aspect-ratio:9 / 19;
  border-radius:15% / 7.1%;
  background:linear-gradient(150deg, #3a3a52 0%, #14141f 20%, #0a0a14 62%, #25253a 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 0 0 3px #07070e,
    0 50px 90px -20px rgba(0,0,0,.75),
    0 20px 40px rgba(0,0,0,.45);
  translate:
    calc(var(--px) * var(--depth) * 1px + var(--hx, 0px))
    calc(var(--py) * var(--depth) * 1px + var(--hy, 0px));
  transition:translate .9s var(--ease-out);
}
/* Боковые кнопки */
.phone::before{
  content:"";
  position:absolute;
  left:-1.1%;
  top:21%;
  width:1.3%;
  height:8%;
  border-radius:2px;
  background:#2c2c40;
}
.phone--client{ left:7%;  top:11%; width:42%; z-index:2; --depth:14; }
.phone--work  { left:47%; top:3%;  width:37%; z-index:1; --depth:7; }
.apps-stage:hover .phone--client{ --hx:-6px; --hy:-6px; }
.apps-stage:hover .phone--work{ --hx:6px; --hy:4px; }

.phone-screen{
  position:absolute;
  inset:2.1% 4.4%;
  overflow:hidden;
  border-radius:11.5% / 5.45%;
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(244,79,166,.18), transparent 60%),
    #0a0b1c;
  container-type:inline-size;
}
.phone--work .phone-screen{
  background:
    radial-gradient(120% 50% at 70% 0%, rgba(255,138,60,.14), transparent 60%),
    #0b0b1a;
}
/* Затемнение заднего устройства — глубина */
.phone--work .phone-screen::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(180deg, transparent 40%, rgba(5,5,14,.35));
  pointer-events:none;
}
.phone-screen::after{
  content:"";
  position:absolute;
  left:34cqi;
  bottom:1.6cqi;
  width:32cqi;
  height:1.2cqi;
  border-radius:99px;
  background:rgba(255,255,255,.45);
}
.phone-island{
  position:absolute;
  z-index:2;
  top:2.4cqi;
  left:36cqi;
  width:28cqi;
  height:7.5cqi;
  border-radius:99px;
  background:#000;
}

/* Интерфейс */
.ui{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  gap:5cqi;
  padding:3cqi 6cqi 22cqi;
  font-size:4.2cqi;
  line-height:1.25;
  color:#fff;
}
.ui-status{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:7.5cqi;
  margin-top:2cqi;
  padding:0 3cqi;
  font-size:3.8cqi;
  font-weight:600;
}
.ui-status-icons{ display:flex; gap:1cqi; align-items:flex-end; }
.ui-status-icons i{ width:1.4cqi; height:2cqi; border-radius:1px; background:#fff; }
.ui-status-icons i:nth-child(2){ height:2.8cqi; }
.ui-status-icons i:nth-child(3){ width:5cqi; height:2.6cqi; border-radius:1cqi; }
.ui-row{ display:flex; justify-content:space-between; align-items:center; }
.ui-row--head{ margin-top:1cqi; }
.ui-h{ display:block; font-size:7.4cqi; font-weight:700; letter-spacing:-.02em; }
.ui-sub{ display:block; font-size:3.8cqi; color:rgba(255,255,255,.55); }
.ui-avatar{
  width:11cqi; height:11cqi; border-radius:50%;
  background:linear-gradient(135deg, #ff9ac9, #ff8a3c);
  box-shadow:0 0 0 .8cqi rgba(255,255,255,.08);
}
.ui-line{ display:block; width:72%; height:2.6cqi; border-radius:2cqi; background:rgba(255,255,255,.14); }
.ui-line--m{ width:56%; }
.ui-line--s{ width:38%; background:rgba(255,255,255,.09); }

/* Клиентское приложение */
.ui-hero{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:3cqi;
  padding:5cqi;
  border-radius:6cqi;
  background:linear-gradient(135deg, #f44fa6, #ff8a3c);
  box-shadow:0 3cqi 9cqi rgba(244,79,166,.38);
}
.ui-hero-title{ display:block; font-size:5cqi; font-weight:700; }
.ui-hero-sub{ display:block; margin-top:1cqi; font-size:3.8cqi; color:rgba(255,255,255,.85); }
.ui-hero-go{
  display:grid; place-items:center;
  width:9cqi; height:9cqi; flex:0 0 auto;
  border-radius:50%;
  background:rgba(255,255,255,.22);
}
.ui-hero-go svg{ width:60%; height:60%; }
.ui-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:3cqi; }
.ui-tile{
  display:flex;
  flex-direction:column;
  gap:2.4cqi;
  padding:4cqi;
  border-radius:5cqi;
  font-size:3.9cqi;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);
}
.ui-tile i{
  display:grid; place-items:center;
  width:9cqi; height:9cqi;
  border-radius:3cqi;
  color:#ffb3d8;
  background:rgba(244,79,166,.14);
}
.ui-tile i svg{ width:58%; height:58%; }
.ui-list{ display:flex; flex-direction:column; gap:2.8cqi; }
.ui-item{ display:flex; align-items:center; gap:3cqi; }
.ui-promo{ display:grid; grid-template-columns:1.3fr 1fr; gap:3cqi; }
.ui-promo-card{
  display:flex; flex-direction:column; justify-content:flex-end; gap:2cqi;
  height:20cqi; padding:3.6cqi;
  border-radius:5cqi;
  background:linear-gradient(160deg, rgba(244,79,166,.22), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.07);
}
.ui-promo-card--alt{ background:linear-gradient(160deg, rgba(255,138,60,.2), rgba(255,255,255,.03)); }
.ui-promo-card .ui-line{ width:80%; }
.ui-promo-card .ui-line--s{ width:50%; }
.ui-item i{ width:6cqi; height:6cqi; flex:0 0 auto; border-radius:50%; background:rgba(255,138,60,.28); }

/* Рабочее приложение */
.ui-bell{
  position:relative;
  display:grid; place-items:center;
  width:9cqi; height:9cqi;
  border-radius:50%;
  color:rgba(255,255,255,.85);
  background:rgba(255,255,255,.07);
}
.ui-bell svg{ width:55%; height:55%; }
.ui-bell b{
  position:absolute; top:1cqi; right:1cqi;
  width:2.4cqi; height:2.4cqi; border-radius:50%;
  background:#ff8a3c; box-shadow:0 0 2cqi rgba(255,138,60,.9);
}
.ui-tabs{ display:flex; gap:1.4cqi; padding:1.2cqi; border-radius:99px; background:rgba(255,255,255,.05); }
.ui-tabs span{ flex:1; padding:1.6cqi 0; border-radius:99px; text-align:center; font-size:3.6cqi; color:rgba(255,255,255,.6); }
.ui-tabs .is-on{ color:#fff; background:linear-gradient(135deg, rgba(244,79,166,.7), rgba(255,138,60,.6)); }
.ui-task{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2.2cqi;
  padding:4cqi;
  border-radius:5cqi;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.ui-task--done{ opacity:.55; }
.ui-chip{ align-self:flex-start; padding:.8cqi 2.6cqi; border-radius:99px; font-size:3.2cqi; font-weight:600; }
.ui-chip--work{ color:#ffba8e; background:rgba(255,138,60,.18); }
.ui-chip--new{ color:#ffa4d2; background:rgba(244,79,166,.18); }
.ui-chip--done{ color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); }
.ui-avatars{ position:absolute; top:4cqi; right:4cqi; display:flex; }
.ui-avatars i{
  width:5.6cqi; height:5.6cqi; margin-left:-1.6cqi; border-radius:50%;
  background:linear-gradient(135deg, #ffb3d8, #ff8a3c);
  box-shadow:0 0 0 .6cqi #121226;
}
.ui-avatars i + i{ background:linear-gradient(135deg, #9aa3c7, #5b6590); }
.ui-panel{
  display:flex;
  flex-direction:column;
  gap:2.6cqi;
  padding:4cqi;
  border-radius:5cqi;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);
}
.ui-bar{ display:block; height:2.6cqi; border-radius:2cqi; background:rgba(255,255,255,.08); overflow:hidden; }
.ui-bar i{
  display:block; height:100%; width:100%;
  border-radius:inherit;
  background:linear-gradient(90deg, #f44fa6, #ff8a3c);
  transform-origin:left center;
  transform:scaleX(var(--w));
}

.ui-nav{
  position:absolute;
  left:6cqi; right:6cqi; bottom:5cqi;
  z-index:2;
  display:flex;
  justify-content:space-around;
  align-items:center;
  height:13cqi;
  border-radius:7cqi;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}
.ui-nav i{ width:5cqi; height:5cqi; border-radius:50%; background:rgba(255,255,255,.26); }
.ui-nav .is-on{ width:12cqi; border-radius:99px; background:linear-gradient(90deg, #f44fa6, #ff8a3c); }

/* Всплывающее уведомление */
.apps-toast{
  position:absolute;
  z-index:3;
  left:40%;
  top:71%;
  display:flex;
  align-items:center;
  gap:2.2cqi;
  max-width:52%;
  padding:2.2cqi 3.2cqi 2.2cqi 2.2cqi;
  border-radius:3.4cqi;
  background:rgba(16,16,34,.86);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 44px rgba(0,0,0,.5), 0 0 0 1px rgba(244,79,166,.08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  translate:calc(var(--px) * 18px) calc(var(--py) * 18px);
  transition:translate .9s var(--ease-out);
}
.apps-toast-ico{
  display:grid; place-items:center;
  width:6.4cqi; height:6.4cqi; flex:0 0 auto;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg, #f44fa6, #ff8a3c);
}
.apps-toast-ico svg{ width:55%; height:55%; }
.apps-toast-title{ display:block; font-size:clamp(12px, 2.3cqi, 14px); font-weight:650; white-space:nowrap; }
.apps-toast-sub{ display:block; margin-top:2px; font-size:clamp(11px, 1.95cqi, 12.5px); color:rgba(222,226,238,.62); white-space:nowrap; }

/* Появление: устройства по очереди, затем детали интерфейса и уведомление.
   Скрытые начальные состояния — только при JS; без JS всё видно сразу. */
.js .apps-stage.reveal:not(.is-visible) .phone,
.js .apps-stage.reveal:not(.is-visible) .apps-toast{ opacity:0; }
.js .apps-stage.is-visible .phone--work{ animation:phone-in-back 1.1s var(--ease-out) .1s both; }
.js .apps-stage.is-visible .phone--client{ animation:phone-in-front 1.1s var(--ease-out) .35s both; }
.js .apps-stage.is-visible .apps-toast{ animation:toast-in .7s var(--ease-out) 1.45s both; }
.js .apps-stage.is-visible .ui-hero{ animation:ui-pop .6s var(--ease-out) .95s both; }
.js .apps-stage.is-visible .ui-tile{ animation:ui-pop .5s var(--ease-out) both; }
.js .apps-stage.is-visible .ui-tile:nth-child(1){ animation-delay:1.05s; }
.js .apps-stage.is-visible .ui-tile:nth-child(2){ animation-delay:1.12s; }
.js .apps-stage.is-visible .ui-tile:nth-child(3){ animation-delay:1.19s; }
.js .apps-stage.is-visible .ui-tile:nth-child(4){ animation-delay:1.26s; }
.js .apps-stage.is-visible .ui-bar i{ animation:ui-grow 1.1s var(--ease-out) .9s both; }

@keyframes phone-in-front{ from{ opacity:0; transform:translateY(36px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes phone-in-back{ from{ opacity:0; transform:translate(24px, 28px) scale(.97); } to{ opacity:1; transform:none; } }
@keyframes toast-in{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes ui-pop{ from{ opacity:0; transform:translateY(3cqi); } to{ opacity:1; transform:none; } }
@keyframes ui-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(var(--w)); } }

@media (max-width: 1023px){
  .apps{ grid-template-columns:1fr; gap:var(--space-9); }
  .apps-copy{ max-width:720px; }
  .apps-stage{ max-width:560px; margin-inline:auto; }
}
/* Телефон: устройства крупнее, кольца и уведомление упрощены */
@media (max-width: 640px){
  .apps{ gap:var(--space-7); }
  .apps-caps{ grid-template-columns:1fr; gap:var(--space-4); margin-bottom:var(--space-7); }
  .apps-cta .btn{ width:100%; }
  .apps-stage{ aspect-ratio:600 / 640; }
  .phone--client{ left:3%; top:3%; width:48%; }
  .phone--work{ left:51%; top:1%; width:43%; }
  .apps-ring{ display:none; }
  .apps-toast{ left:auto; right:0; top:auto; bottom:4%; max-width:70%; padding:8px 12px 8px 8px; border-radius:14px; gap:8px; }
  .apps-toast-ico{ width:26px; height:26px; }
  .apps-toast-sub{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .apps-stage .phone, .apps-stage .apps-toast, .apps-stage .ui-hero,
  .apps-stage .ui-tile, .apps-stage .ui-bar i{ animation:none !important; opacity:1; }
  .phone, .apps-toast{ translate:none !important; }
  .apps-stage:hover .phone--client, .apps-stage:hover .phone--work{ --hx:0px; --hy:0px; }
}

/* ABOUT ------------------------------------------------------------------ */
/* Editorial: текст — главный элемент. Справа — стопка из четырёх слоёв цифровой
   системы на общей оси (изометрия через rotateX/rotateZ без перспективы, поэтому
   положение слоёв и подписей вычисляется точно: сдвиг слоя = --z в cqi). */
.about{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(0, 5fr);
  align-items:center;
  gap:clamp(40px, 6vw, 96px);
}
.about-copy{ min-width:0; }
.about-title{
  font-size:var(--fs-h2);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.03em;
  margin-bottom:var(--space-5);
}
.about-statement{
  max-width:17em;
  margin-bottom:var(--space-7);
  font-size:clamp(24px, 1.5vw + 15px, 34px);
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.025em;
  text-wrap:balance;
  background:linear-gradient(95deg, #ff7ab8 0%, #ff9a55 60%, #ffc59e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.about-text{ max-width:36em; }
.about-text p{
  font-size:clamp(16px, .2vw + 15px, 17px);
  line-height:1.7;
  color:rgba(222,226,238,.74);
  text-wrap:pretty;
}
.about-text p + p{ margin-top:var(--space-4); }

/* Графика */
.about-visual{ min-width:0; margin:0; }
.about-stack{
  position:relative;
  width:100%;
  aspect-ratio:1 / .78;
  container-type:inline-size;
}
.about-glow{
  position:absolute;
  left:8%; right:22%; top:8%; bottom:4%;
  background:
    radial-gradient(50% 45% at 50% 30%, rgba(244,79,166,.28), transparent 72%),
    radial-gradient(45% 40% at 50% 75%, rgba(255,138,60,.18), transparent 72%);
  filter:blur(26px);
  -webkit-mask-image:radial-gradient(closest-side, #000 55%, transparent);
  mask-image:radial-gradient(closest-side, #000 55%, transparent);
  opacity:.8;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.about-visual:hover .about-glow{ opacity:1; }

.plate{
  --cx:38%;
  --cy:50%;
  position:absolute;
  left:var(--cx);
  top:var(--cy);
  width:40cqi;
  aspect-ratio:1;
  border-radius:12%;
  border:1px solid rgba(255,255,255,.14);
  background-color:rgba(12,14,34,.86);
  box-shadow:1.4cqi 1.4cqi 0 rgba(4,4,12,.55), 0 0 0 1px rgba(0,0,0,.2);
  transform:translate(-50%, -50%) translateY(calc(var(--z) * -1cqi)) rotateX(60deg) rotateZ(-45deg);
  translate:0 0;
  transition:translate .8s var(--ease-out);
}
/* Данные: точечная сетка */
.plate--data{
  background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.5px);
  background-size:3.2cqi 3.2cqi;
  background-position:center;
}
/* Интеграции: линии связей */
.plate--int{
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
  background-size:25% 25%;
  background-position:center;
}
/* Логика и ИИ: модули */
.plate--logic::before,
.plate--logic::after{
  content:"";
  position:absolute;
  border-radius:18%;
}
.plate--logic::before{ left:16%; top:16%; width:34%; height:34%; border:1px solid rgba(244,79,166,.55); }
.plate--logic::after{ left:56%; top:56%; width:28%; height:28%; background:linear-gradient(135deg, rgba(244,79,166,.55), rgba(255,138,60,.45)); }
/* Интерфейсы: верхний слой с фирменной рамкой */
.plate--ui{
  border:1.5px solid transparent;
  background:
    linear-gradient(rgba(22,16,42,.95), rgba(22,16,42,.95)) padding-box,
    linear-gradient(135deg, #f44fa6, #ff8a3c) border-box;
  box-shadow:1.4cqi 1.4cqi 0 rgba(4,4,12,.55), 0 0 5cqi rgba(244,79,166,.3);
}
.plate--ui::before,
.plate--ui::after{ content:""; position:absolute; border-radius:14%; }
.plate--ui::before{ left:14%; top:14%; width:56%; height:38%; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.04); }
.plate--ui::after{ left:14%; top:62%; width:34%; height:12%; border-radius:99px; background:linear-gradient(90deg, #f44fa6, #ff8a3c); }

/* Ось, объединяющая слои */
.about-axis{
  position:absolute;
  left:38%;
  top:12%;
  bottom:14%;
  width:1px;
  z-index:5;
  background:linear-gradient(180deg, transparent, rgba(244,79,166,.55) 20%, rgba(255,138,60,.5) 80%, transparent);
  opacity:.8;
}
.about-axis i{
  position:absolute;
  left:-2px;
  bottom:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#ffe2cf;
  box-shadow:0 0 10px 2px rgba(255,138,60,.9);
  opacity:0;
}

/* Подписи слоёв — на уровне правой вершины своего слоя */
.about-label{
  position:absolute;
  z-index:6;
  left:67%;
  top:calc(50% - var(--z) * 1cqi);
  padding-left:4.4cqi;
  font-size:clamp(12px, 3cqi, 14px);
  color:rgba(222,226,238,.72);
  white-space:nowrap;
  translate:0 -50%;
  transition:translate .8s var(--ease-out), color var(--dur-base) var(--ease-out);
}
.about-label::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:3.2cqi;
  height:1px;
  background:rgba(255,255,255,.3);
}
.about-label--acc{ color:#fff; }
.about-label--acc::before{ background:linear-gradient(90deg, #f44fa6, #ff8a3c); }

/* Наведение: слои мягко раздвигаются вдоль оси */
.about-visual:hover .plate{ translate:0 calc(var(--spread) * -1cqi); }
.about-visual:hover .about-label{ translate:0 calc(-50% + var(--spread) * -1cqi); }

/* Принцип */
.about-principle{
  position:relative;
  margin-top:var(--space-6);
  padding-left:var(--space-5);
}
.about-principle::before{
  content:"";
  position:absolute;
  left:0; top:4px; bottom:4px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg, #f44fa6, #ff8a3c);
}
.about-principle-title{
  display:block;
  margin-bottom:var(--space-2);
  font-size:clamp(18px, .5vw + 15px, 21px);
  font-weight:650;
  line-height:1.35;
  letter-spacing:-.015em;
  color:#fff;
}
.about-principle-text{ display:block; font-size:15px; line-height:1.6; color:rgba(222,226,238,.66); }

/* Появление: слои приходят сверху и снизу и собираются в стопку, затем подписи,
   затем по оси один раз пробегает сигнал. fill-mode backwards — после анимации
   действуют обычные стили, поэтому наведение работает. Без JS всё видно сразу. */
.js .about-visual.reveal:not(.is-visible) .plate,
.js .about-visual.reveal:not(.is-visible) .about-label{ opacity:0; }
.js .about-visual.is-visible .plate{
  animation:plate-in 1s var(--ease-out) backwards;
  animation-delay:calc(.25s + var(--i) * .12s);
}
.js .about-visual.is-visible .about-label{
  animation:label-in .6s var(--ease-out) backwards;
  animation-delay:calc(.85s + var(--i) * .08s);
}
.js .about-visual.is-visible .about-axis i{ animation:axis-run 1.6s var(--ease-in-out) 1.5s both; }

@keyframes plate-in{ from{ opacity:0; translate:0 calc(var(--spread) * -8cqi); } to{ opacity:1; translate:0 0; } }
@keyframes label-in{ from{ opacity:0; translate:-6px -50%; } to{ opacity:1; translate:0 -50%; } }
@keyframes axis-run{
  0%{ opacity:0; transform:translateY(0); }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translateY(-60cqi); }
}

@media (max-width: 1023px){
  .about{ grid-template-columns:1fr; gap:var(--space-8); }
  .about-copy{ max-width:720px; }
  .about-visual{ width:100%; max-width:520px; }
}
@media (max-width: 640px){
  .about-statement{ margin-bottom:var(--space-6); }
  .about-stack{ aspect-ratio:1 / .74; }
  .plate{ --cx:36%; width:42cqi; }
  .about-axis{ left:36%; }
  .about-label{ left:66%; }
}
@media (prefers-reduced-motion: reduce){
  .js .about-visual .plate, .js .about-visual .about-label, .js .about-visual .about-axis i{ animation:none !important; }
  .about-visual:hover .plate{ translate:0 0; }
  .about-visual:hover .about-label{ translate:0 -50%; }
}

/* CONTACTS --------------------------------------------------------------- */
/* Финал страницы: широкая тёмная панель, крупная типографика по центру,
   снизу — «горизонт»: мягкое свечение и тонкая светящаяся линия. */
.contacts{ margin-bottom:clamp(48px, 6vw, 80px); }
.contact-final{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:clamp(56px, 8vw, 120px) clamp(20px, 5vw, 80px) clamp(112px, 10vw, 136px);
  border-radius:var(--r-xl);
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(70% 55% at 50% 118%, rgba(244,79,166,.34), transparent 70%),
    radial-gradient(45% 40% at 72% 112%, rgba(255,138,60,.26), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    rgba(10,11,28,.8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 40px 90px rgba(0,0,0,.4);
  text-align:center;
}
/* Точечная сетка, гаснущая к краям */
.contact-final::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 22px 22px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
  mask-image:radial-gradient(60% 70% at 50% 45%, #000, transparent 80%);
}
/* Дополнительный тёплый свет на hover — меняется только opacity */
.contact-final::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(55% 45% at 50% 110%, rgba(255,138,60,.18), transparent 70%);
  opacity:0;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.contact-final:hover::after{ opacity:1; }

/* Горизонт */
.contact-horizon{
  position:absolute;
  z-index:-1;
  left:50%;
  top:calc(100% - var(--horizon-gap, 64px));
  width:170%;
  aspect-ratio:1;
  translate:-50% 0;
  border-radius:50%;
  border-top:1px solid rgba(255,190,150,.55);
  box-shadow:0 -1px 24px rgba(244,79,166,.35), inset 0 18px 60px -30px rgba(255,138,60,.35);
  -webkit-mask-image:linear-gradient(90deg, transparent 12%, #000 38%, #000 62%, transparent 88%);
  mask-image:linear-gradient(90deg, transparent 12%, #000 38%, #000 62%, transparent 88%);
}
.contact-horizon i{
  position:absolute;
  left:50%;
  top:-2px;
  width:18%;
  height:3px;
  margin-left:-9%;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, #ffe2cf, transparent);
  filter:blur(.5px);
  opacity:.9;
}

.contact-inner{ position:relative; max-width:760px; margin-inline:auto; }
.contact-inner .eyebrow{ margin-bottom:var(--space-6); }
.contact-title{
  margin-bottom:var(--space-5);
  font-size:clamp(34px, 3.4vw + 16px, 64px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.contact-lead{
  max-width:34em;
  margin:0 auto var(--space-8);
  font-size:var(--fs-lead);
  line-height:1.6;
  color:rgba(222,226,238,.74);
  text-wrap:pretty;
}
.contact-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3);
  margin-bottom:var(--space-8);
}
.btn-ico{ width:18px; height:18px; flex:0 0 auto; }
.contact-details{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--space-3) var(--space-8);
}
.contact-detail{ display:flex; align-items:baseline; gap:10px; min-width:0; }
.contact-detail dt{
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  color:var(--muted-2);
}
.contact-detail dd{ min-width:0; font-size:var(--fs-md); overflow-wrap:anywhere; }
.contact-detail a{
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.2);
  transition:border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.contact-detail a:hover{ color:#ffd3b8; border-color:var(--accent-2); }

/* Горизонт один раз «разворачивается» при появлении панели */
.js .contact-final.is-visible .contact-horizon i{ animation:horizon-in 1.4s var(--ease-out) .5s both; }
@keyframes horizon-in{ from{ opacity:0; transform:scaleX(.2); } to{ opacity:.9; transform:none; } }

/* FOOTER ----------------------------------------------------------------- */
.site-footer{
  position:relative;
  padding-top:clamp(40px, 5vw, 56px);
  border-top:1px solid rgba(255,255,255,.07);
  color:var(--muted);
}
.site-footer::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:120px;
  height:1px;
  background:linear-gradient(90deg, #f44fa6, #ff8a3c);
}
.footer-top{
  display:grid;
  grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
  gap:var(--space-8);
  padding-bottom:clamp(32px, 4vw, 48px);
}
.footer-logo{ display:inline-flex; align-items:center; gap:10px; margin-bottom:var(--space-4); border-radius:var(--r-pill); }
.footer-logo-text{ font-size:14px; font-weight:750; letter-spacing:.08em; color:var(--text); }
.footer-about{ max-width:30em; font-size:var(--fs-md); line-height:1.6; color:rgba(222,226,238,.62); }
.footer-heading{
  margin-bottom:var(--space-4);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:var(--tracking-caps);
  color:var(--muted-2);
}
.footer-links{ display:grid; gap:10px; }
.footer-links a{
  font-size:var(--fs-md);
  color:rgba(236,238,248,.82);
  overflow-wrap:anywhere;
  transition:color var(--dur-base) var(--ease-out);
}
.footer-links a:hover{ color:#fff; }
.footer-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2) var(--space-6);
  padding:var(--space-5) 0 var(--space-2);
  border-top:1px solid rgba(255,255,255,.06);
  font-size:var(--fs-sm);
  line-height:1.5;
  color:rgba(222,226,238,.56);
}
.footer-req{ font-variant-numeric:tabular-nums; }
.footer-policy{
  color:rgba(236,238,248,.78);
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.25);
  text-underline-offset:3px;
  transition:color var(--dur-base) var(--ease-out), text-decoration-color var(--dur-base) var(--ease-out);
}
.footer-policy:hover{ color:#fff; text-decoration-color:var(--accent-2); }

@media (max-width: 860px){
  .footer-top{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .footer-brand{ grid-column:1 / -1; }
}
@media (max-width: 640px){
  .contact-final{ --horizon-gap:44px; padding:48px 20px 104px; border-radius:var(--r-lg); }
  .contact-inner .eyebrow{ margin-bottom:var(--space-5); }
  .contact-lead{ margin-bottom:var(--space-7); }
  .contact-actions{ flex-direction:column; align-items:stretch; margin-bottom:var(--space-7); }
  .contact-details{ flex-direction:column; align-items:center; }
  .contact-horizon{ width:300%; }
  .footer-top{ gap:var(--space-7); }
  .footer-legal{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 400px){
  .footer-top{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){
  .js .contact-final .contact-horizon i{ animation:none !important; }
}

/* COOKIE CONSENT --------------------------------------------------------- */
/* Плавающая панель снизу справа (кнопки первого экрана — слева, поэтому не перекрываются).
   Не затемняет страницу и не блокирует прокрутку. Высота ограничена экраном,
   при нехватке места содержимое прокручивается внутри панели.
   Кнопки «Отклонить» и «Принять» оформлены одинаково — ни одна не выделена. */
.cookie{
  --cookie-gap:24px;
  position:fixed;
  z-index:70;
  right:max(var(--cookie-gap), env(safe-area-inset-right));
  bottom:max(var(--cookie-gap), env(safe-area-inset-bottom));
  width:min(380px, calc(100vw - var(--cookie-gap) * 2));
  max-height:calc(100vh - var(--cookie-gap) * 2);
  max-height:calc(100dvh - var(--cookie-gap) - max(var(--cookie-gap), env(safe-area-inset-bottom)));
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:20px;
  border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.1);
  background:rgba(12,13,32,.84);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px rgba(0,0,0,.5);
  opacity:0;
  transform:translateX(24px);
  transition:opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.cookie[hidden]{ display:none; }
.cookie.is-open{ opacity:1; transform:none; }
.cookie::before{
  content:"";
  position:absolute;
  top:0;
  left:20px;
  right:20px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(244,79,166,.8), rgba(255,138,60,.8), transparent);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cookie{ background:rgba(12,13,32,.97); }
}
.cookie-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.cookie-ico{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  flex:0 0 auto;
  border-radius:12px;
  border:1px solid transparent;
  background:
    linear-gradient(180deg, rgba(26,20,48,.96), rgba(14,14,34,.96)) padding-box,
    linear-gradient(140deg, rgba(244,79,166,.75), rgba(255,138,60,.5)) border-box;
  color:#ffc9a8;
}
.cookie-ico svg{ width:22px; height:22px; }
.cookie-title{ font-size:16px; font-weight:650; letter-spacing:-.01em; color:#fff; }
.cookie-text{ font-size:14px; line-height:1.55; color:rgba(222,226,238,.78); }
.cookie-text a{
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(255,255,255,.3);
  text-underline-offset:3px;
  transition:text-decoration-color var(--dur-base) var(--ease-out);
}
.cookie-text a:hover{ text-decoration-color:var(--accent-2); }
.cookie-note{ margin-top:8px; font-size:13px; line-height:1.5; color:var(--muted-2); }
.cookie-status{ margin-top:8px; font-size:13px; color:#ffc9a8; }
.cookie-actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.cookie-btn{
  min-height:44px;
  padding:10px 16px;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.cookie-btn:hover{ border-color:rgba(255,138,60,.6); background:rgba(255,255,255,.09); }
.cookie-btn:active{ transform:scale(.98); }
.cookie-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-pill); }

/* Ссылка «Настройки cookie» в футере — выглядит как соседняя ссылка на политику */
.footer-legal-links{ display:inline-flex; flex-wrap:wrap; gap:6px 20px; }
.footer-cookie{ padding:0; border:0; background:none; font:inherit; cursor:pointer; }
html:not(.js) .footer-cookie{ display:none; }

/* Телефон: на всю ширину и компактнее; пояснение о категориях — в политике по ссылке */
@media (max-width: 480px){
  .cookie{
    --cookie-gap:12px;
    left:max(12px, env(safe-area-inset-left));
    right:max(12px, env(safe-area-inset-right));
    width:auto;
    padding:14px 16px 16px;
    transform:translateY(16px);
  }
  .cookie-head{ margin-bottom:8px; }
  .cookie-ico{ width:34px; height:34px; border-radius:10px; }
  .cookie-ico svg{ width:19px; height:19px; }
  .cookie-title{ font-size:15px; }
  .cookie-text{ font-size:13.5px; line-height:1.5; }
  .cookie-note{ display:none; }
  .cookie-actions{ margin-top:12px; }
}
/* Невысокие окна (телефон в горизонтальной ориентации): компактная панель,
   чтобы кнопки выбора помещались без прокрутки */
@media (max-height: 520px){
  .cookie{ --cookie-gap:12px; padding:12px 16px 14px; }
  .cookie-head{ margin-bottom:6px; }
  .cookie-ico{ width:30px; height:30px; border-radius:9px; }
  .cookie-ico svg{ width:17px; height:17px; }
  .cookie-title{ font-size:15px; }
  .cookie-text{ font-size:13.5px; line-height:1.45; }
  .cookie-note{ display:none; }
  .cookie-actions{ margin-top:10px; }
  .cookie-btn{ min-height:40px; padding:8px 14px; }
}
@media (prefers-reduced-motion: reduce){
  .cookie{ transition:none; transform:none; }
}

/* 7. ДВИЖЕНИЕ -------------------------------------------------------------- */

/* Появление при прокрутке.
   Скрываем только когда JS доступен (класс .js ставится в <head>),
   поэтому без JS контент всегда виден. Задержка: style="--reveal-delay:120ms". */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:
    opacity var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-slow) var(--ease-out) var(--reveal-delay, 0ms);
}
.js .reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
  }
  .js .reveal{ opacity:1; transform:none; }
  .btn--primary::after, .btn-primary::after{ display:none; }
  .btn:hover, .btn-primary:hover, .btn-ghost:hover,
  .site-nav a:hover, .icon-btn:hover{ transform:none; }
}

/* 8. АДАПТИВ --------------------------------------------------------------- */
/* Адаптив секций описан рядом с их стилями. */