/* ==========================================================================
   ONDER — modern visual layer
   Подключается ПОСЛЕ styles.css. Откат: удалить из index.html две строки между
   <!-- MODERN-LAYER:START --> и <!-- MODERN-LAYER:END --> (этот файл и modern.js).
   Базовые стили (styles.css) не изменены.
   ========================================================================== */

:root{
  --r-card:22px;
  --sh-1:0 1px 2px rgba(12,51,70,.06),0 8px 24px -12px rgba(12,51,70,.18);
  --sh-2:0 2px 4px rgba(12,51,70,.06),0 22px 44px -18px rgba(12,51,70,.32);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- Типографика ------------------------------------------------------- */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:rgba(53,196,214,.35);color:inherit}
h2{letter-spacing:-.02em}
section h2::after{content:"";display:block;width:44px;height:4px;margin-top:14px;border-radius:4px;background:linear-gradient(90deg,var(--volt),var(--volt-deep))}
.ts-panel h2::after,.reg-band h2::after,.reg-band h3::after,.about-top h2::after,.co-head h2::after{display:none}
.co-head h2::after{display:block}

/* ---- Шапка: «стекло» -------------------------------------------------- */
header{transition:background .3s,box-shadow .3s}
header.scrolled{background:color-mix(in srgb,var(--grid) 84%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.07),0 12px 30px -18px rgba(6,25,35,.6)}
nav a{position:relative;padding:4px 0}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;border-radius:2px;background:var(--volt);transition:right .28s var(--ease)}
nav a:hover::after,nav a:focus-visible::after{right:0}

/* ---- Hero ------------------------------------------------------------- */
.hero{border-radius:0 0 44px 44px;background:
  radial-gradient(900px 520px at 78% 8%,rgba(53,196,214,.20),transparent 62%),
  radial-gradient(700px 420px at 8% 100%,rgba(26,143,161,.22),transparent 60%),
  var(--grid)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.3px);background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 85%);mask-image:linear-gradient(180deg,#000 0%,transparent 85%)}
.hero-grid h1{letter-spacing:-.02em}

/* ---- Кнопки ----------------------------------------------------------- */
.btn{background:linear-gradient(135deg,#55d9e9 0%,var(--volt) 55%,#2aaec2 100%);box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 24px -12px rgba(26,143,161,.8);transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{background:linear-gradient(135deg,#66e0ee 0%,#44ccdd 55%,#33b9cd 100%);transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 16px 30px -12px rgba(26,143,161,.9)}
.btn:active{transform:translateY(0)}
.btn.ghost,.ord-send{box-shadow:none}
.btn.ghost:hover{background:rgba(53,196,214,.12);transform:translateY(-2px)}

/* ---- Карточки: единый радиус, мягкие тени, подъём при наведении ------- */
.svc,.sphere,.st,.perks2 li,.vac-card,.member,.q,.post,.ent,.reg-card,.entity,.hotline,.cc-chip{border-radius:var(--r-card)}
.svc,.st,.perks2 li,.vac-card,.member,.ent{transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.svc,.st,.perks2 li,.ent,.vac-card{box-shadow:var(--sh-1)}
.svc:hover,.st:hover,.perks2 li:hover,.ent:hover,.vac-card:hover,.member:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.post{box-shadow:var(--sh-1);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.post:hover{box-shadow:var(--sh-2)}
.alt .svc,.alt .post{background:var(--paper)}

/* Цифры «О компании» — градиентные */
.about-facts dt{background:linear-gradient(120deg,var(--ink) 20%,var(--volt-deep) 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Фото команды — аккуратнее при наведении */
.team .ava{box-shadow:0 8px 22px -12px rgba(12,51,70,.35);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.team>div:hover .ava{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 32px -14px rgba(12,51,70,.45)}

/* Бегущие логотипы: мягкие края, пауза при наведении */
.marq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq:hover .marq-track{animation-play-state:paused}

/* Секции с серым фоном — лёгкий градиент вместо плоской заливки */
.alt{background:linear-gradient(180deg,var(--paper-2),color-mix(in srgb,var(--paper-2) 60%,var(--paper)))}

/* Полоса прокрутки */
html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--volt-deep) 55%,transparent) transparent}