/* ВЫШКА · ЖИВАЯ СИСТЕМА (vyshka-life.css) — единый цветовой закон + пульсация
   Подключается на всех сервисах. Всё аддитивно, ничего не ломает вёрстку.
   Уважает prefers-reduced-motion. Версия: 20260828-life1 */

:root{
  --vy-bg:#f6f8fc; --vy-surface:#ffffff; --vy-ink:#0f172a; --vy-mut:#5b6b83;
  --vy-accent:#1a56db; --vy-accent-2:#0ea86a; --vy-warn:#f59e0b; --vy-danger:#e11d48;
  --vy-live:#12b76a;
}
html{scroll-behavior:smooth}
body{position:relative}
/* дыхание фона: медленный живой градиент позади всего контента */
body::before{
  content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 32% at 18% 12%, rgba(26,86,219,.075), transparent 60%),
    radial-gradient(34% 30% at 84% 22%, rgba(14,168,106,.06), transparent 60%),
    radial-gradient(40% 36% at 50% 95%, rgba(26,86,219,.05), transparent 65%);
  animation:vy-breathe 16s ease-in-out infinite;
}
@keyframes vy-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%{transform:translate3d(1.5%,-1.5%,0) scale(1.06);opacity:1}
}
/* живое свечение ссылок-кнопок и карточек */
a[class*="btn"]:not([disabled]),button[class*="btn"]:not([disabled]),.btn,.button{
  transition:transform .18s ease,box-shadow .25s ease,filter .18s ease;
}
a[class*="btn"]:hover:not([disabled]),button[class*="btn"]:hover:not([disabled]),.btn:hover,.button:hover{
  transform:translateY(-1px);
}
.card,.svc,.pos,article{transition:transform .2s ease,box-shadow .25s ease}
.card:hover,.svc:hover,article:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(15,23,42,.09)}
/* пульс живых бейджей/тегов */
.tag,.badge,.st,[class*="live" i],[class*="LIVE"]{position:relative}
.tag::before,.badge::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--vy-live);margin-right:6px;vertical-align:1px;
  box-shadow:0 0 0 0 rgba(18,183,106,.55);animation:vy-pulse 2.2s ease-out infinite}
@keyframes vy-pulse{
  0%{box-shadow:0 0 0 0 rgba(18,183,106,.5)}
  70%{box-shadow:0 0 0 8px rgba(18,183,106,0)}
  100%{box-shadow:0 0 0 0 rgba(18,183,106,0)}
}
/* аврора-заголовки: градиент, который медленно переливается */
h1 span[data-vy-accent],h1 em,.vy-accent-text{
  background:linear-gradient(100deg,#1a56db,#0ea86a,#1a56db);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:vy-flow 9s ease-in-out infinite;
}
@keyframes vy-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
/* появление блоков при прокрутке (класс вешает vyshka-life.js) */
.vy-reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.vy-reveal.vy-in{opacity:1;transform:none}
/* чип «система жива» — рисует vyshka-life.js */
#vy-life-chip{position:fixed;left:14px;bottom:14px;z-index:2147482000;display:flex;gap:8px;align-items:center;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);border:1px solid #e6ebf3;border-radius:999px;
  padding:7px 13px;font:600 12.5px/1 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--vy-ink);
  text-decoration:none;box-shadow:0 8px 24px rgba(15,23,42,.12);transition:transform .18s ease}
#vy-life-chip:hover{transform:translateY(-2px)}
#vy-life-chip .vy-dot{width:8px;height:8px;border-radius:50%;background:var(--vy-live);
  box-shadow:0 0 0 0 rgba(18,183,106,.5);animation:vy-pulse 2.2s ease-out infinite}
@media(max-width:560px){#vy-life-chip{left:10px;bottom:10px;padding:6px 10px;font-size:11.5px}}
/* уважение к reduced-motion */
@media(prefers-reduced-motion:reduce){
  body::before{animation:none}
  .vy-reveal{opacity:1;transform:none;transition:none}
  .tag::before,.badge::before,#vy-life-chip .vy-dot{animation:none}
  h1 span[data-vy-accent],h1 em,.vy-accent-text{animation:none}
}

/* === LIFE v2: игровая подача (game juice) === */
/* прогресс-бар прокрутки — игровой прогресс уровня */
#vy-scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:2147483000;
  background:linear-gradient(90deg,#1a56db,#0ea86a);border-radius:0 3px 3px 0;
  box-shadow:0 0 12px rgba(26,86,219,.55);transition:width .08s linear}
/* нажатие кнопки — тактильный отклик */
a[class*="btn"]:active,button[class*="btn"]:active,.btn:active,.button:active{transform:scale(.965)}
/* 3D-наклон и свечение карточек при наведении */
.card:hover,.svc:hover,article:hover{transform:translateY(-4px) perspective(700px) rotateX(1.2deg)}
.card,.svc,article{will-change:transform}
/* искры при клике (рисует vyshka-life.js) */
.vy-spark{position:fixed;z-index:2147482999;width:7px;height:7px;border-radius:50%;pointer-events:none;
  animation:vy-spark .55s ease-out forwards}
@keyframes vy-spark{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}
}
/* живое градиентное кольцо на главных кнопках */
.btn-primary-glow{position:relative}
.btn-primary-glow::after{content:"";position:absolute;inset:-3px;border-radius:inherit;
  background:conic-gradient(from var(--vy-a,0deg),#1a56db,#0ea86a,#1a56db);
  z-index:-1;filter:blur(6px);opacity:.5;animation:vy-spin 6s linear infinite}
@property --vy-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes vy-spin{to{--vy-a:360deg}}
/* поля ввода: живой фокус */
input:focus,textarea:focus,select:focus{border-color:#1a56db !important;box-shadow:0 0 0 3px rgba(26,86,219,.18) !important}
@media(prefers-reduced-motion:reduce){
  #vy-scrollbar,.vy-spark,.btn-primary-glow::after{display:none}
  a[class*="btn"]:active,button[class*="btn"]:active,.btn:active{transform:none}
}

/* === LIFE v3: eco-nav современный (аддитивный оверрайд) === */
.eco-nav{background:#fff;border-bottom:1px solid #e6ebf3}
.eco-nav-in{gap:10px;padding:8px 16px}
.eco-brand{font-size:12px;letter-spacing:.14em;background:linear-gradient(90deg,#1a56db,#0ea86a);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.eco-links{gap:2px;flex-wrap:wrap}
.eco-lnk{font-size:13.5px;padding:8px 13px;border-radius:9px;color:#33415c;font-weight:500;
  transition:background .15s ease,color .15s ease}
.eco-lnk:hover{background:#e8effc;color:#1a56db}
.eco-lnk.eco-cur,.eco-cur{background:#1a56db;color:#fff;font-weight:700;box-shadow:0 2px 8px rgba(26,86,219,.3)}
@media(max-width:760px){
  .eco-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;padding-bottom:2px}
  .eco-links::-webkit-scrollbar{display:none}
  .eco-lnk{white-space:nowrap;padding:7px 11px;font-size:12.5px}
  .eco-brand{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.eco-lnk{transition:none}}

/* ============================================
   LIFE v5 — ПРЕМИУМ ВИЗУАЛ
   Glassmorphism + градиенты + микрополировка
   ============================================ */

/* Премиум-скроллбар */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:#f0f3f8}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1a56db,#0ea86a);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#1a56db}

/* Выделение текста — брендовое */
::selection{background:rgba(26,86,219,.15);color:#0f172a}

/* Улучшенная типографика — жирные заголовки с градиентом */
h1,h2,h3{letter-spacing:-.02em;line-height:1.15}
h1{font-weight:800}
h2{font-weight:700}

/* Стеклянные карточки */
.card,.svc,article,.pcard,.lcard,.stat-card{
  background:rgba(255,255,255,.82) !important;
  backdrop-filter:blur(12px) saturate(1.4);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);
  border:1px solid rgba(255,255,255,.6) !important;
  box-shadow:0 4px 24px rgba(15,23,42,.06),0 1px 3px rgba(15,23,42,.04) !important;
  border-radius:16px !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease !important;
}
.card:hover,.svc:hover,.pcard:hover{
  transform:translateY(-6px) scale(1.01) !important;
  box-shadow:0 20px 50px rgba(26,86,219,.12),0 4px 12px rgba(15,23,42,.06) !important;
  border-color:rgba(26,86,219,.15) !important;
}

/* Премиум-кнопки — градиент + свечение */
.btn[class*="primary"],.btn-primary,[class*="cta"]{
  background:linear-gradient(135deg,#1a56db 0%,#3b82f6 100%) !important;
  border:none !important;
  box-shadow:0 4px 14px rgba(26,86,219,.3),inset 0 1px 0 rgba(255,255,255,.2) !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  position:relative;
  overflow:hidden;
}
.btn[class*="primary"]:hover,.btn-primary:hover{
  background:linear-gradient(135deg,#1e4fb8 0%,#2563eb 100%) !important;
  box-shadow:0 6px 20px rgba(26,86,219,.4),inset 0 1px 0 rgba(255,255,255,.25) !important;
  transform:translateY(-2px) scale(1.02);
}
.btn[class*="primary"]:active,.btn-primary:active{
  transform:translateY(0) scale(.98) !important;
  box-shadow:0 2px 8px rgba(26,86,219,.3) !important;
}

/* Секундные кнопки — чистый контур */
[class*="secondary"],.btn[class*="ghost"],.btn-ghost{
  background:transparent !important;
  border:1.5px solid #d1d9e6 !important;
  font-weight:600 !important;
  transition:all .2s ease !important;
}
[class*="secondary"]:hover,.btn-ghost:hover{
  border-color:#1a56db !important;
  color:#1a56db !important;
  background:rgba(26,86,219,.04) !important;
}

/* Инпуты — премиум */
input,textarea,select{
  border-radius:12px !important;
  transition:border-color .2s,box-shadow .2s !important;
}
input:focus,textarea:focus,select:focus{
  border-color:#1a56db !important;
  box-shadow:0 0 0 4px rgba(26,86,219,.1),0 1px 3px rgba(15,23,42,.05) !important;
}

/* Секции — дыхание */
section{position:relative}
section:not(:first-of-type)::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:60px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,#1a56db,#0ea86a);
  opacity:0;transition:opacity .3s ease;
}
section:hover::before{opacity:.6}

/* Футер — премиум */
footer{
  background:linear-gradient(180deg,transparent,rgba(246,248,252,.8)) !important;
  border-top:1px solid #e6ebf3;
}

/* Навигация — стеклянная */
nav,.nav,[class*="header"],[class*="nav"]{
  backdrop-filter:blur(16px) saturate(1.6) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.6) !important;
  background:rgba(255,255,255,.88) !important;
  border-bottom:1px solid rgba(230,235,243,.8) !important;
}

/* Числа — моноширинный для табличных данных */
.mono,.price,.stat,[data-price]{font-variant-numeric:tabular-nums}

/* Ссылки — плавное подчёркивание снизу вверх */
a{position:relative;text-decoration:none}
a:not([class*="btn"]):not([class*="button"]):hover{color:#1a56db}

/* Изображения — плавная загрузка */
img{transition:opacity .3s ease}
img[data-src]{opacity:0;transition:opacity .4s ease}
img[data-src].loaded{opacity:1}

/* Бейджи и теги — стеклянные */
.tag,.badge,[class*="badge"],[class*="tag"]{
  border-radius:999px !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}

/* Таблицы — полосатые с ховером */
table tbody tr{transition:background .15s ease}
table tbody tr:hover{background:rgba(26,86,219,.03)}

/* Аватары — кольцо бренда */
.avatar,[class*="avatar"],[class*="av"]{
  border:2.5px solid rgba(26,86,219,.25) !important;
  transition:border-color .2s ease;
}
.avatar:hover,[class*="av"]:hover{border-color:#1a56db !important}

/* Адаптив — уменьшить анимации на слабых устройствах */
@media(max-width:480px){
  .card,.svc,article{border-radius:12px !important}
}

@media(prefers-contrast:more){
  .card,.svc,article{border:1.5px solid #0f172a !important}
  body::before{display:none !important}
}