/* =====================================================================
   ОКСИТЕЛЬ — home-upgrade.css
   Усиление ГЛАВНОЙ страницы. Подключается ТОЛЬКО на / (body.upg-home).
   Аддитивный слой поверх общего style.css: общий стиль не меняется,
   /vozduh/ и /pay/ не затрагиваются. Без внешних библиотек и шрифтов.
   Уважает prefers-reduced-motion (см. блок в конце).
   Неймспейс: .hu-* (home upgrade).
   ===================================================================== */

/* ---------- Полоса прогресса чтения ---------- */
.hu-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan),var(--c-green),var(--c-yellow));
  box-shadow:0 1px 8px rgba(14,143,214,.55);
  transition:width .12s linear; will-change:width;
}

/* ---------- Живой градиентный фон hero + глубина ---------- */
.upg-home .hero{ position:relative; isolation:isolate; }
.upg-home .hero::before{
  content:""; position:absolute; inset:-12% -6% -4% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(46% 42% at 16% 22%, rgba(52,182,230,.20), transparent 62%),
    radial-gradient(42% 38% at 86% 12%, rgba(252,194,28,.18), transparent 62%),
    radial-gradient(48% 44% at 72% 84%, rgba(124,194,67,.18), transparent 62%);
  animation:huWash 19s ease-in-out infinite alternate;
}
@keyframes huWash{ from{ transform:translate3d(0,0,0) scale(1);} to{ transform:translate3d(0,-16px,0) scale(1.05);} }

/* ---------- Слой анимированных потоков воздуха (SVG вставляет JS) ---------- */
.hu-airflow{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.7; }
.hu-airflow path{ fill:none; stroke-linecap:round; stroke-dasharray:9 16; animation:huFlow 3.6s linear infinite; }
.hu-airflow path:nth-child(2){ animation-duration:4.6s; }
.hu-airflow path:nth-child(3){ animation-duration:5.4s; }
@keyframes huFlow{ to{ stroke-dashoffset:-100; } }

/* ---------- Пузырьки в hero/постере (создаёт JS) ---------- */
.hu-bubble{
  position:absolute; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle at 32% 28%, #fff 0%, rgba(255,255,255,.35) 55%, rgba(52,182,230,.20) 100%);
  box-shadow:inset 0 0 6px rgba(255,255,255,.75), 0 4px 12px rgba(14,143,214,.18);
  animation:huRise linear infinite;
}
@keyframes huRise{
  0%{ transform:translateY(24px) scale(.85); opacity:0; }
  12%{ opacity:.95; }
  100%{ transform:translateY(-188px) scale(1); opacity:0; }
}

/* ---------- Постер hero: halo за лого-марком + мягкое свечение ---------- */
.upg-home .poster{ position:relative; }
.upg-home .poster::after{
  content:""; position:absolute; left:50%; top:24px; width:230px; height:230px;
  transform:translateX(-50%); border-radius:50%; z-index:0; pointer-events:none;
  background:conic-gradient(from 0deg, rgba(255,255,255,.0), rgba(255,255,255,.55), rgba(52,182,230,.0), rgba(252,194,28,.4), rgba(255,255,255,0));
  filter:blur(8px); opacity:.55; animation:huSpin 22s linear infinite;
}
@keyframes huSpin{ to{ transform:translateX(-50%) rotate(360deg);} }
.upg-home .poster__logo{ position:relative; z-index:2; }

/* ---------- Метрики со счётчиками (живые цифры) ---------- */
.hu-metrics{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; }
.hu-metric{
  flex:1 1 150px; min-width:140px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.74); border:1px solid var(--c-border);
  box-shadow:var(--sh-sm); backdrop-filter:saturate(150%) blur(4px);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hu-metric:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); }
.hu-metric b{ display:block; font-family:var(--font-head); font-size:26px; line-height:1; color:var(--c-blue-ink); }
.hu-metric b .kk-counter{ color:var(--c-blue); }
.hu-metric span{ display:block; margin-top:6px; font-size:13px; font-weight:700; color:var(--c-text-muted); }
.hu-metric--green b{ color:var(--c-green-deep);} .hu-metric--green b .kk-counter{ color:var(--c-green-deep);}
.hu-metric--yellow b{ color:var(--c-yellow-deep);} .hu-metric--yellow b .kk-counter{ color:var(--c-yellow-deep);}

/* ---------- Постерные карточки услуг: акцент-бар + hover + блик ---------- */
.upg-home .service{ position:relative; overflow:hidden; transition:transform .32s var(--ease), box-shadow .32s var(--ease); }
.upg-home .service::after{
  content:""; position:absolute; left:0; top:0; height:5px; width:100%;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan));
  transform:scaleX(.18); transform-origin:left; transition:transform .45s var(--ease);
}
.upg-home .service--green::after{ background:linear-gradient(90deg,var(--c-green),#9AD45F); }
.upg-home .service--yellow::after{ background:linear-gradient(90deg,var(--c-yellow),#FFD86A); }
.upg-home .service:hover,.upg-home .service:focus-within{ transform:translateY(-9px); box-shadow:var(--sh-lg); }
.upg-home .service:hover::after,.upg-home .service:focus-within::after{ transform:scaleX(1); }
.upg-home .service > .icon-badge{ transition:transform .32s var(--ease); }
.upg-home .service:hover > .icon-badge{ transform:translateY(-3px) rotate(-6deg) scale(1.06); }
.upg-home .service::before{
  content:""; position:absolute; top:0; left:-65%; width:42%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg); opacity:0;
}
.upg-home .service:hover::before{ animation:huSheen .85s ease; }
@keyframes huSheen{ 0%{ left:-65%; opacity:0;} 25%{ opacity:1;} 100%{ left:135%; opacity:0;} }

/* ---------- Медиа-карточки и карточки доверия: мягкий подъём ---------- */
.upg-home .media-card,.upg-home .trust-card{ transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.upg-home .media-card:hover,.upg-home .trust-card:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.upg-home .trust-card{ position:relative; overflow:hidden; }
.upg-home .trust-card::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:3px; transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--c-blue),var(--c-green)); transition:transform .4s var(--ease);
}
.upg-home .trust-card:hover::before{ transform:scaleX(1); }

/* ---------- Усиление финального CTA: пульсирующее свечение ---------- */
.upg-home .cta-band{ position:relative; }
.upg-home .cta-band::after{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:0; pointer-events:none;
  box-shadow:0 0 0 0 rgba(252,194,28,.0); animation:huGlow 3.2s ease-in-out infinite;
}
.upg-home .cta-band__inner{ position:relative; z-index:1; }
@keyframes huGlow{
  0%,100%{ box-shadow:0 0 38px 2px rgba(52,182,230,.28), 0 0 0 0 rgba(252,194,28,.18) inset; }
  50%{ box-shadow:0 0 64px 10px rgba(252,194,28,.36), 0 0 0 0 rgba(52,182,230,.18) inset; }
}

/* ---------- Адаптив ---------- */
@media (max-width:560px){
  .hu-metric{ flex:1 1 100%; }
  .upg-home .poster::after{ width:170px; height:170px; }
}

/* ---------- Hero: вторичный путь «Для учреждения» ---------- */
.upg-home .hero__actions .btn--ghost-on-light{
  background:rgba(255,255,255,.0); color:var(--c-blue-deep); border:2px solid var(--c-blue);
}
.upg-home .hero__actions .btn--ghost-on-light:hover{ background:rgba(14,143,214,.08); }

/* ---------- Блок «Выберите нужное действие» (роутер аудитории) ---------- */
.hu-router{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.hu-route{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  padding:26px 22px 24px; border-radius:var(--r-lg); background:#fff;
  border:1px solid var(--c-border); box-shadow:var(--sh-sm);
  transition:transform .32s var(--ease), box-shadow .32s var(--ease);
}
.hu-route::after{
  content:""; position:absolute; left:0; top:0; height:6px; width:100%;
  background:linear-gradient(90deg,var(--c-blue),var(--c-cyan)); transform:scaleX(.2);
  transform-origin:left; transition:transform .45s var(--ease);
}
.hu-route--inst::after{ background:linear-gradient(90deg,var(--c-green),#9AD45F); }
.hu-route--learn::after{ background:linear-gradient(90deg,var(--c-yellow),#FFD86A); }
.hu-route:hover{ transform:translateY(-8px); box-shadow:var(--sh-lg); }
.hu-route:hover::after{ transform:scaleX(1); }
.hu-route__ico{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--c-cyan),var(--c-blue)); box-shadow:var(--sh-blue); margin-bottom:14px;
}
.hu-route--inst .hu-route__ico{ background:linear-gradient(135deg,#9AD45F,var(--c-green-deep)); box-shadow:var(--sh-green); }
.hu-route--learn .hu-route__ico{ background:linear-gradient(135deg,#FFD34D,var(--c-yellow-deep)); box-shadow:var(--sh-yellow); color:#5a3d00; }
.hu-route__ico svg{ width:28px; height:28px; }
.hu-route__eyebrow{ font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--c-text-muted); }
.hu-route__title{ font-family:var(--font-head); font-size:21px; line-height:1.2; color:var(--c-blue-ink); margin:4px 0 8px; }
.hu-route__text{ flex:1; font-size:14px; color:var(--c-text-muted); margin:0 0 16px; }
.hu-route .btn{ align-self:flex-start; }
@media (max-width:860px){ .hu-router{ grid-template-columns:1fr; } }

/* ---------- Уважение prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hu-progress{ transition:none; }
  .upg-home .hero::before{ animation:none; }
  .hu-airflow path{ animation:none; }
  .hu-bubble{ display:none !important; }
  .upg-home .poster::after{ animation:none; }
  .upg-home .service::before{ animation:none !important; }
  .upg-home .cta-band::after{ animation:none; box-shadow:0 0 40px 2px rgba(52,182,230,.22); }
  .upg-home .service,.upg-home .media-card,.upg-home .trust-card,.hu-metric,.hu-route{ transition:none; }
}