/* ukved.ru — первый экран главной, стандарт k3 (DESIGN.md §1.1). 2026-08-21.
   Файл, а не style-блок в теле: модуль cssinliner переваривает инлайновые style-блоки
   и засасывает в них разметку страницы — замер 21.08 дал блок на 137 КБ и
   порванный документ. Внешний CSS он обрабатывает штатно. */
.lpx-hero,.lpx-hero *{box-sizing:border-box}
.lpx-hero{font-family:'Inter','Open Sans',system-ui,sans-serif;line-height:1.6;color:#0F1629;-webkit-font-smoothing:antialiased}

/* ═══════════════════════════════════════════════════════════
   ukved.ru — HERO главной, версия 2 (2026-08-21)
   Дизайн: k3 (DESIGN.md). Классы префикс lpx-*, значения — ЛИТЕРАЛЫ
   (§6.1 и §6.2 DESIGN.md: cssinliner теряет :root, .btn/.card
   коллизятся с Aspro). Инлайн-<script> нет — режет WAF (§6.5).
   ═══════════════════════════════════════════════════════════ */

.lpx-wrap{max-width:1160px;margin-inline:auto;padding-inline:24px}

/* ─── сигнатура 1: aurora-mesh фон ─────────────────────────── */
.lpx-mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lpx-mesh::before{content:'';position:absolute;width:700px;height:700px;top:-120px;left:-80px;
  background:radial-gradient(ellipse at 40% 40%,rgba(55,97,233,.18) 0%,transparent 70%);
  border-radius:50%;animation:lpxFloatA 14s ease-in-out infinite alternate}
.lpx-mesh::after{content:'';position:absolute;width:540px;height:540px;top:60px;right:-60px;
  background:radial-gradient(ellipse at 60% 40%,rgba(108,60,247,.14) 0%,transparent 70%);
  border-radius:50%;animation:lpxFloatB 18s ease-in-out infinite alternate}
.lpx-mesh-teal{position:absolute;width:380px;height:380px;bottom:-60px;left:50%;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(14,165,199,.12) 0%,transparent 70%);
  border-radius:50%;animation:lpxFloatC 22s ease-in-out infinite alternate}
@keyframes lpxFloatA{to{transform:translate(60px,40px) scale(1.1)}}
@keyframes lpxFloatB{to{transform:translate(-50px,60px) scale(1.08)}}
@keyframes lpxFloatC{to{transform:translateX(-50%) translateY(-40px) scale(1.12)}}
@keyframes lpxPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ─── hero ─────────────────────────────────────────────────── */
.lpx-hero{position:relative;padding-block:56px 48px;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,#F0F4FF 0%,#F8F9FC 55%,#F2F8FB 100%)}
.lpx-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:center}

.lpx-eyebrow{display:inline-flex;align-items:center;gap:7px;background:rgba(55,97,233,.08);
  border:1px solid rgba(55,97,233,.18);color:#2A4BB8;font-size:.75rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:20px}
.lpx-eyebrow-dot{width:6px;height:6px;border-radius:50%;background:#3761E9;animation:lpxPulse 2s ease-in-out infinite}

.lpx-h1{font-family:'Plus Jakarta Sans','Montserrat',system-ui,sans-serif;font-size:clamp(2.2rem,4.5vw,3.4rem);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;color:#0F1629;margin-bottom:18px}
.lpx-h1 em{font-style:normal;background:linear-gradient(130deg,#3761E9 0%,#6C3CF7 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.lpx-sub{font-size:1.125rem;color:#5A6280;max-width:480px;margin-bottom:32px;line-height:1.65}

.lpx-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.lpx-btn-primary{display:inline-flex;align-items:center;gap:7px;
  background:linear-gradient(135deg,#FA6127 0%,#E84E10 100%);color:#fff;font-weight:700;font-size:1.1875rem;
  padding:12px 26px;border-radius:10px;box-shadow:0 4px 16px rgba(250,97,39,.35);
  border:none;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;min-height:46px}
.lpx-btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(250,97,39,.4)}
.lpx-btn-phone{display:inline-flex;align-items:center;gap:8px;background:#FFFFFF;color:#0F1629;
  font-weight:600;font-size:.9375rem;padding:13px 22px;border-radius:10px;border:1px solid rgba(55,97,233,.12);
  box-shadow:0 1px 3px rgba(15,22,41,.06),0 1px 2px rgba(15,22,41,.04);cursor:pointer;text-decoration:none;
  transition:box-shadow .15s,transform .15s;min-height:46px}
.lpx-btn-phone:hover{box-shadow:0 4px 16px rgba(15,22,41,.08);transform:translateY(-1px)}
.lpx-btn-phone svg{color:#FA6127;flex-shrink:0}
.lpx-btn-primary:focus-visible,.lpx-btn-phone:focus-visible{outline:2px solid #3761E9;outline-offset:2px}

/* ─── задача №3: почему тут полезнее ───────────────────────── */
.lpx-status{display:flex;flex-wrap:wrap;gap:18px;font-size:.8125rem;color:#5A6280}
.lpx-status-item{display:flex;align-items:center;gap:6px}
.lpx-status-item::before{content:'';display:block;width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg,#0EA5C7,#3761E9);flex-shrink:0}

/* ─── сигнатура 2: glass-панель = задача №2 (зачем читать дальше) ── */
.lpx-panel{position:relative;z-index:1;background:rgba(255,255,255,.75);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:28px;
  box-shadow:0 2px 1px rgba(255,255,255,.8) inset,0 20px 60px rgba(55,97,233,.12),0 4px 16px rgba(15,22,41,.06)}
.lpx-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.lpx-dots{display:flex;gap:6px}
.lpx-dot{width:10px;height:10px;border-radius:50%}
.lpx-dot-r{background:#FF5F57}.lpx-dot-y{background:#FFBD2E}.lpx-dot-g{background:#28C840}
.lpx-badge{font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0B7186;
  background:rgba(14,165,199,.1);border:1px solid rgba(14,165,199,.2);padding:3px 9px;border-radius:20px}
.lpx-metric{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}
.lpx-metric-label{font-size:.75rem;font-weight:500;color:#666E88;letter-spacing:.04em;text-transform:uppercase}
.lpx-metric-value{font-family:'Plus Jakarta Sans','Montserrat',system-ui,sans-serif;font-size:2.1rem;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#3761E9,#6C3CF7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.lpx-metric-sub{font-size:.8125rem;color:#5A6280}
.lpx-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.lpx-row{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#F8F9FC;
  border-radius:10px;padding:11px 14px;font-size:.8125rem;text-decoration:none;color:inherit;
  border:1px solid transparent;transition:border-color .15s,transform .15s;min-height:44px}
.lpx-row:hover{border-color:rgba(55,97,233,.18);transform:translateY(-1px)}
.lpx-row:focus-visible{outline:2px solid #3761E9;outline-offset:2px}
.lpx-row-label{color:#5A6280;font-weight:500}
.lpx-row-val{font-weight:700;color:#0F1629;white-space:nowrap;font-variant-numeric:tabular-nums}
.lpx-uptime{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600;color:#12784A;
  background:rgba(40,200,100,.08);border:1px solid rgba(40,200,100,.15);border-radius:8px;padding:8px 12px}
.lpx-uptime-dot{width:8px;height:8px;border-radius:50%;background:#18A058;animation:lpxPulse 2s ease-in-out infinite;flex-shrink:0}

/* ─── адаптив ──────────────────────────────────────────────── */
@media (max-width:960px){
  .lpx-hero-inner{grid-template-columns:1fr;gap:36px}
  .lpx-panel{max-width:460px}
  .lpx-hero{padding-block:40px 36px}
  .lpx-h1{font-size:2rem}
  .lpx-sub{font-size:1rem;max-width:none}
}
@media (max-width:480px){
  .lpx-status{gap:10px 16px;font-size:.78rem}
  .lpx-ctas{gap:10px}
  .lpx-btn-primary,.lpx-btn-phone{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .lpx-mesh::before,.lpx-mesh::after,.lpx-mesh-teal,.lpx-eyebrow-dot,.lpx-uptime-dot{animation:none}
  .lpx-btn-primary,.lpx-btn-phone,.lpx-row{transition:none}
}

/* ═══════════════════════════════════════════════════════════
   Значения AA — часть СТАНДАРТА k3 с 21.08.2026 (DESIGN.md §1.1),
   не локальная правка: #2A4BB8 (blue-ink) · #0B7186 (teal-ink) ·
   #12784A (green-ink) · #666E88 (light) · кнопка 1.1875rem.
   Оранжевый бренда #FA6127 НЕ менялся — порог опущен кеглем.
   Замер: 56 комбинаций k3, провалов 0.
   ═══════════════════════════════════════════════════════════ */

.lpx-hero a{text-decoration:none}
.lpx-hero p,.lpx-hero h1{margin:0}
