/* ============================================================
   PTNL Rating — Главная5 · ПРЕМИУМ ТЁМНАЯ ТЕМА
   Грузится ПОСЛЕ home.css + home3d-acts.css.
   Цель: убрать молочную засветку, дать глубину, дорогое стекло,
   контраст и «кинематографичный» фон. Анимации — в home5.js (GSAP/Lenis).
   ============================================================ */

:root{
  /* чуть глубже базового навизного ink — даёт настоящий контраст */
  --bg:#050E16;
  --ink-deep:#040B12;
  --glass-1:rgba(14,30,46,.55);
  --glass-2:rgba(16,34,52,.72);
  --hair:rgba(154,170,196,.14);
  --hair-2:rgba(154,170,196,.26);
  --edge-top:rgba(232,240,250,.10);   /* верхний световой кант стекла */
  --halo-accent:0 0 0 1px rgba(239,78,53,.45),0 18px 60px -12px rgba(239,78,53,.45);
  --sh-soft:0 22px 60px -24px rgba(0,0,0,.75);
  --sh-card:0 18px 50px -28px rgba(0,0,0,.8),0 2px 8px -2px rgba(0,0,0,.4);
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-quint:cubic-bezier(.22,1,.36,1);
  /* z-scale (semantic) */
  --z-bgfx:-1; --z-content:1; --z-header:80; --z-mmenu:79; --z-progress:90; --z-tweaks:120;
}

/* ---------- глубокий кинематографичный фон поверх 3D, под контентом ---------- */
#bgfx{position:fixed;inset:0;z-index:var(--z-bgfx);pointer-events:none}
#bgfx::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 82% -8%, rgba(38,86,126,.42), transparent 58%),
    radial-gradient(90% 80% at -8% 14%, rgba(16,42,64,.5), transparent 55%),
    radial-gradient(70% 60% at 50% 116%, rgba(239,78,53,.10), transparent 60%);
  mix-blend-mode:screen}
/* виньетка — собирает внимание к центру, гасит края */
#bgfx::after{content:"";position:absolute;inset:0;
  background:radial-gradient(135% 120% at 50% 38%, transparent 52%, rgba(3,9,15,.55) 86%, rgba(2,6,11,.82) 100%)}
/* тонкая data-сетка с радиальной маской — «не обои» */
.bgfx-grid{position:fixed;inset:0;z-index:var(--z-bgfx);pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(154,170,196,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154,170,196,.05) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 60% 28%, #000 0%, transparent 62%);
  mask-image:radial-gradient(circle at 60% 28%, #000 0%, transparent 62%)}
/* очень лёгкое зерно — премиальная текстура, не шум */
.bgfx-grain{position:fixed;inset:0;z-index:var(--z-bgfx);pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}

body{background:var(--bg)}

/* кастомный скролл-трек — мелочь, но «дорого» */
*{scrollbar-width:thin;scrollbar-color:rgba(154,170,196,.35) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(154,170,196,.28);border-radius:99px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(154,170,196,.5);background-clip:content-box}

/* фокус-кольцо — единый, акцентный, доступный */
:where(a,button,input,[tabindex]):focus-visible{outline:2px solid var(--accent-500);outline-offset:3px;border-radius:8px}

/* ---------- типографика: чуть просторнее и точнее ---------- */
.h-display{letter-spacing:-.045em;text-wrap:balance;}
.h2{text-wrap:balance}
.lede{text-wrap:pretty}
.hero h1{margin-bottom:26px}

/* ============================================================
   REVEAL / MOTION START-STATES
   Контент виден по умолчанию. Стартовые «скрытые» состояния
   включаются ТОЛЬКО когда html.anim (ставит inline-скрипт),
   и снимаются в home5.js (или фолбэком при сбое GSAP).
   ============================================================ */
.reveal{opacity:1;transform:none}            /* перекрываем home.css opacity:0 */
html.anim .reveal{opacity:0}
/* Анимации для Hero удалены, элементы остаются видимыми сразу */
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line-in{display:block;will-change:transform}

/* ============================================================
   HEADER — премиальный, со стеклом и тонкой нижней линией-светом
   ============================================================ */
.hdr.scrolled{background:rgba(5,14,22,.6)!important;backdrop-filter:blur(22px) saturate(1.2);
  border-bottom:1px solid var(--hair)}
.hdr.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(239,78,53,.5),rgba(79,195,208,.4),transparent);opacity:.7}
.logo .ic{background:linear-gradient(150deg,#fff,#E8EBF7);box-shadow:0 6px 18px -6px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.6)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:1px;
  background:var(--accent-500);transform:scaleX(0);transform-origin:left;transition:transform .32s var(--e-expo);opacity:.85}
.nav a:hover::after{transform:scaleX(1)}

/* ============================================================
   BUTTONS — sheen sweep + магнитная подача
   ============================================================ */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primary{background:linear-gradient(180deg,#F2624A,var(--accent-500));
  box-shadow:0 10px 34px -8px rgba(239,78,53,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-primary:hover{background:linear-gradient(180deg,#F2624A,var(--accent-600));box-shadow:var(--halo-accent)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 50%,transparent 80%);
  transform:translateX(-120%);transition:transform .7s var(--e-expo)}
.btn:hover::before{transform:translateX(120%)}
.btn-ghost{background:rgba(232,240,250,.04);border-color:var(--hair-2);backdrop-filter:blur(8px)}
.btn-ghost:hover{background:rgba(232,240,250,.08);border-color:var(--slate-400)}

/* ============================================================
   ГЛУБОКОЕ СТЕКЛО — карточки/панели с верхним кантом и тенью
   ============================================================ */
.card,.aud,.step,.ps-before,.cat-scales .sc,.kpi,.dpanel{
  background:var(--glass-1)!important;
  border:1px solid var(--hair)!important;
  box-shadow:var(--sh-card);
  backdrop-filter:blur(16px) saturate(1.15)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.15)!important}
/* верхний световой кант (liquid glass) */
.card::after,.aud::after,.step::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--edge-top),transparent 32%);opacity:.8;mix-blend-mode:screen}
.card:hover,.aud:hover{transform:translateY(-6px);border-color:var(--hair-2)!important;
  background:var(--glass-2)!important;box-shadow:0 30px 70px -30px rgba(0,0,0,.85),var(--sh-card)}
.step:hover{background:var(--glass-2)!important}

/* мягкое акцентное «дыхание» под наведённой карточкой-фичей */
.feat::before{content:"";position:absolute;left:50%;top:-40%;width:160%;height:120%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(239,78,53,.16),transparent 70%);
  opacity:0;transition:opacity .4s var(--e-expo);pointer-events:none}
.feat:hover::before{opacity:1}
.feat .ic{background:rgba(232,240,250,.05);border-color:var(--hair-2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.feat:hover .ic{background:rgba(239,78,53,.14);border-color:rgba(239,78,53,.45);
  box-shadow:0 0 0 1px rgba(239,78,53,.3),0 8px 24px -8px rgba(239,78,53,.5)}

/* ============================================================
   HERO — крупнее, со «стейджем»-рамкой и парящими ридаутами
   ============================================================ */
.hero{padding-top:102px}
.hero-badge{background:rgba(8,20,32,.6)!important;border-color:var(--hair-2);box-shadow:var(--sh-soft)}
.hero-badge .tag{box-shadow:0 4px 14px -4px rgba(239,78,53,.6)}
.hstat{position:relative;padding-left:18px}
.hstat::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--accent-500),rgba(79,195,208,.6))}
.hstat .n{font-size:34px}
.hero-stage::before{content:"";position:absolute;inset:6%;border-radius:50%;
  border:1px solid var(--hair);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%);mask:radial-gradient(circle,transparent 58%,#000 60%);
  animation:spin 48s linear infinite}
.hero-stage::after{inset:14% 10%!important}
@keyframes spin{to{transform:rotate(360deg)}}
.glass-readout{background:rgba(7,18,30,.66)!important;border-color:var(--hair-2)!important;
  box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.06);will-change:transform}
.glass-readout .val .up{text-shadow:0 0 14px rgba(46,158,107,.6)}

/* ============================================================
   TRUST — настоящая бегущая строка (marquee)
   ============================================================ */
.trust{overflow:hidden;background:rgba(7,17,27,.5)!important;border-color:var(--hair)}
.trust-row{flex-wrap:nowrap;justify-content:flex-start;width:max-content;gap:0;
  animation:marquee 34s linear infinite;will-change:transform}
.trust:hover .trust-row{animation-play-state:paused}
.trust-row .t-lab{padding:0 40px;flex:0 0 auto}
.trust-row .t-item{padding:0 40px;flex:0 0 auto;position:relative;color:var(--slate-400);opacity:.85;transition:color .3s,opacity .3s}
.trust-row .t-item::before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;
  background:var(--slate-500);transform:translateY(-50%)}
.trust-row .t-item:hover{color:var(--text);opacity:1}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ============================================================
   PROBLEM / SOLUTION — «после» приподнят и подсвечен
   ============================================================ */
.ps-after{background:linear-gradient(158deg,rgba(26,70,105,.42),rgba(8,22,31,.34))!important;
  border:1px solid var(--hair-2)!important;box-shadow:0 30px 80px -34px rgba(0,0,0,.85),0 0 0 1px rgba(79,195,208,.12)}
.ps-after::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(80% 60% at 80% 0%, rgba(79,195,208,.14), transparent 60%)}
.ps-li .v{color:var(--accent-500);font-weight:700;
  text-shadow:0 0 12px rgba(239,78,53,.5)}

/* ============================================================
   STEPS — светящийся коннектор-канал между шагами
   ============================================================ */
.step .si{background:rgba(232,240,250,.05);border-color:var(--hair-2);color:var(--d-cyan);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.step .conn{height:2px;background:linear-gradient(90deg,var(--accent-500),rgba(79,195,208,.7));opacity:.7;
  box-shadow:0 0 10px rgba(239,78,53,.5)}
.step .sn{font-size:13px;color:var(--accent-500);text-shadow:0 0 12px rgba(239,78,53,.4)}

/* ============================================================
   DASHBOARD — плотнее, дороже, с акцентами данных
   ============================================================ */
.dash{background:linear-gradient(165deg,rgba(14,34,52,.72),rgba(6,16,26,.66))!important;
  border:1px solid var(--hair-2)!important;box-shadow:0 40px 100px -40px rgba(0,0,0,.9);
  backdrop-filter:blur(24px) saturate(1.2)!important}
.dash::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,var(--edge-top),transparent 18%);opacity:.7;mix-blend-mode:screen}
.dash-tabs{background:rgba(6,16,26,.55)!important;border-color:var(--hair)}
.dash-tabs button.on{box-shadow:0 8px 22px -8px rgba(239,78,53,.6)}
.bar-col .fill{box-shadow:0 0 18px -2px rgba(79,195,208,.5)}
.bar-col:nth-child(2) .fill{box-shadow:0 0 18px -2px rgba(239,78,53,.55)}
.kpi .v{font-size:28px}
.kpi .spark{background:linear-gradient(90deg,var(--d-cyan),transparent);box-shadow:0 0 10px rgba(79,195,208,.5)}

/* ============================================================
   CATEGORIES — стеклянная витрина с акцентным бейджем
   ============================================================ */
.cat-switch button.on{box-shadow:0 10px 28px -10px rgba(239,78,53,.6)}
.cat-visual{border-color:var(--hair-2);box-shadow:var(--sh-soft)}
.cat-visual .patbg{opacity:.7;filter:saturate(1.1) contrast(1.05)}
.cat-visual::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 120%, rgba(5,14,22,.8), transparent 60%)}
.cat-badge{background:rgba(6,16,26,.62)!important;border-color:var(--hair-2)!important;
  box-shadow:var(--sh-soft),inset 0 1px 0 rgba(255,255,255,.06)}
.cat-scales .sc .fill{box-shadow:0 0 12px -2px rgba(79,195,208,.5)}

/* ============================================================
   GOVERNANCE / CTA / FOOTER
   ============================================================ */
.gov-li .gi{background:rgba(232,240,250,.05);border-color:var(--hair-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.gov-visual{border-color:var(--hair-2);box-shadow:var(--sh-soft)}
/* усиленный скрим под левым текстом governance — кристалл Акта III смещён вправо,
   но яркие бары не должны просвечивать сквозь текст */
#governance .gov-grid > div:first-child::before{
  inset:-40px -70px -40px -60px!important;
  background:radial-gradient(80% 88% at 24% 50%, rgba(5,12,20,.92), rgba(5,12,20,.6) 52%, transparent 82%)!important}

.cta{background:linear-gradient(158deg,rgba(26,70,105,.5),rgba(6,16,26,.66))!important;
  border:1px solid var(--hair-2)!important;box-shadow:0 50px 120px -50px rgba(0,0,0,.9)}
.cta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, rgba(239,78,53,.14), transparent 60%)}
.cta .patbg{opacity:.1}
.cta-form input:focus{box-shadow:0 0 0 3px rgba(239,78,53,.22)}

footer{background:linear-gradient(180deg,rgba(5,14,22,0),rgba(4,11,18,.9))!important;border-top-color:var(--hair)}

/* ============================================================
   SCROLL PROGRESS — оставляем филамент home3d-acts.css, усиливаем
   ============================================================ */
#sprog{height:2px;box-shadow:0 0 16px rgba(239,78,53,.7)}

/* ============================================================
   ОТЗЫВЧИВОСТЬ / REDUCED MOTION
   ============================================================ */
@media(max-width:1000px){.hero{padding-top:150px}}
/* на узких экранах убираем primary из шапки (демо есть в мобильном меню),
   чтобы логотип не переносился и шапка дышала */
@media(max-width:560px){ .hdr-cta .btn-primary{display:none} }
/* мобайл: 3D-кластер ближе к центру — усиливаем скрим под текстом героя */
@media(max-width:760px){
  .hero-copy::before{background:radial-gradient(92% 64% at 42% 44%, rgba(5,12,20,.92), rgba(5,12,20,.5) 56%, transparent 82%)!important}
}
@media(prefers-reduced-motion:reduce){
  .hero-stage::before,.trust-row{animation:none!important}
  .reveal,[data-rv],.line-in,.hero-stage{opacity:1!important;transform:none!important}
  .btn::before{display:none}
}