/* ==========================================================================
   Мега.ру — style.css  ·  HIGH-TECH BLUEPRINT REDESIGN
   Тёмная тема по умолчанию + светлая через [data-theme="light"] (как MyNUC.ru).
   Сохранены: синяя сетка-подложка с затуханием, семейство Magistral C.
   ========================================================================== */

/* ---------- Фирменный шрифт Magistral C ---------- */
@font-face { font-family:'Magistral C'; src:url('/fonts/MagistralC-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Magistral C'; src:url('/fonts/MagistralC-Medium.ttf')  format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Magistral C'; src:url('/fonts/MagistralC-Bold.ttf')    format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Magistral C'; src:url('/fonts/MagistralC-Black.ttf')   format('truetype'); font-weight:900; font-style:normal; font-display:swap; }

/* ====================== ДИЗАЙН-ТОКЕНЫ ====================== */
:root {
  /* ТЁМНАЯ ТЕМА (по умолчанию) */
  --c-bg:#0b1f42; --c-bg-2:#0a1c3b; --c-surface:#11274f; --c-surface-2:#0e2147;
  --c-ink:#f5f9ff; --c-ink-2:#c4d4ed; --c-ink-3:#8ea4c5;
  --c-line:rgba(110,160,230,.16); --c-line-2:rgba(110,160,230,.09);
  --c-primary:#0b4a8f; --c-primary-2:#08376b; --c-primary-soft:rgba(11,74,143,.10);
  --c-accent:#d8a23a; --c-ok:#2bd07a; --c-danger:#ff5d5d;
  --c-grid:rgba(90,140,230,.07); --c-grid-glow:rgba(90,140,230,.06);
  --sh-card:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --r-sm:3px; --r-md:6px; --r-lg:10px; --container:1280px; --gap:24px;
  --font:'Magistral C','Segoe UI',system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.4,0,.2,1);
}
[data-theme="light"] {
  --c-bg:#eef2f8; --c-bg-2:#e7edf6; --c-surface:#ffffff; --c-surface-2:#f4f7fc;
  --c-ink:#0c1726; --c-ink-2:#3f5168; --c-ink-3:#7286a0;
  --c-line:rgba(20,50,100,.14); --c-line-2:rgba(20,50,100,.08);
  --c-primary:#0b4a8f; --c-primary-2:#08376b; --c-primary-soft:rgba(11,74,143,.10);
  --c-accent:#b07d14; --c-grid:rgba(11,74,143,.045); --c-grid-glow:rgba(11,74,143,.04);
  --sh-card:0 1px 2px rgba(16,32,46,.06), 0 10px 28px -16px rgba(16,32,46,.18);
}

/* ====================== RESET / БАЗА ====================== */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; background:var(--c-bg); scroll-behavior:smooth; }
/* тёмная тема = насыщенный синий градиент на весь экран (как hero на скрине), а не near-black */
html[data-theme="dark"] { background:radial-gradient(ellipse 120% 85% at 50% -8%, #1c4a90 0%, #102b5c 42%, #0a1d3e 100%) fixed; }
body {
  margin:0; position:relative; font-family:var(--font); font-weight:400; font-size:16px; line-height:1.65;
  color:var(--c-ink); background:transparent;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; transition:background .4s var(--ease-io), color .4s var(--ease-io);
}


/* фирменная сетка убрана — фон всей страницы теперь задают кольца снизу (body::after). */
body::before { display:none; }
/* ЕДИНЫЙ слой колец, ПРИВЯЗАННЫЙ К ФУТЕРУ через JS (см. script.js, секция «подложка колец»).
   Фиксирован на экране; центр (--src-x/--src-y) JS держит на центре кольца футера в реальных px,
   прозрачность (--src-op) растёт по мере приближения футера. Кольца всегда исходят из футера и
   доходят до шапки на ЛЮБОЙ прокрутке; вдали от футера слой гаснет (герой/середина чистые).
   Шаг --r1 дышит в синхрон с футером. */
/* два источника на ЛЕВОМ и ПРАВОМ краях, по ЦЕНТРУ высоты — кольца идут от боков внутрь.
   Маска = пересечение: (левый+правый край, центр прозрачен) × (средняя полоса по высоте, верх/низ гаснут).
   → центр, шапка и самый низ чистые; кольца только по бокам на середине. */
body::after {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(45% 55% at 0% 50%, rgba(63,138,255,.10), transparent 72%),
    radial-gradient(45% 55% at 100% 50%, rgba(63,138,255,.10), transparent 72%),
    repeating-radial-gradient(circle at 0% 50%, transparent 0 calc(var(--r1) - 1px), rgba(63,138,255,.10) calc(var(--r1) - 1px) var(--r1)),
    repeating-radial-gradient(circle at 100% 50%, transparent 0 calc(var(--r2) - 1px), rgba(63,138,255,.10) calc(var(--r2) - 1px) var(--r2));
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 26%, transparent 45%, transparent 55%, #000 74%, #000 100%);
          mask-image:linear-gradient(to right, #000 0%, #000 26%, transparent 45%, transparent 55%, #000 74%, #000 100%);
  animation:ringBreath 14s ease-in-out infinite;
}
[data-theme="light"] body::after {
  background:
    radial-gradient(45% 55% at 0% 50%, rgba(11,74,143,.09), transparent 72%),
    radial-gradient(45% 55% at 100% 50%, rgba(11,74,143,.09), transparent 72%),
    repeating-radial-gradient(circle at 0% 50%, transparent 0 calc(var(--r1) - 1px), rgba(11,74,143,.09) calc(var(--r1) - 1px) var(--r1)),
    repeating-radial-gradient(circle at 100% 50%, transparent 0 calc(var(--r2) - 1px), rgba(11,74,143,.09) calc(var(--r2) - 1px) var(--r2));
}

/* ====================== КОНТЕЙНЕРЫ / СЕКЦИИ ====================== */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
.container-narrow { max-width:860px; }
.section { padding:88px 0; position:relative; }
.section-title { font-size:30px; font-weight:700; letter-spacing:-.01em; margin:0 0 10px; }
.section-subtitle { font-size:15px; color:var(--c-ink-2); max-width:680px; margin:0 0 40px; }
.kicker, .hero-kicker {
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--c-primary);
}
.kicker::before, .hero-kicker::before { content:''; width:20px; height:1px; background:var(--c-primary); opacity:.7; }
/* в тёмной теме мелкие navy-акценты текстом — светлые (navy на тёмном не читается).
   Кнопки (заливка) и логотип остаются navy — их не трогаем. */
[data-theme="dark"] .kicker, [data-theme="dark"] .hero-kicker,
[data-theme="dark"] .service-tag,
[data-theme="dark"] .service-link,
[data-theme="dark"] .seo-text h3 { color:#ffffff; }
[data-theme="dark"] .kicker::before, [data-theme="dark"] .hero-kicker::before { background:#ffffff; }
h1,h2,h3,h4 { margin:0 0 .5em; line-height:1.2; color:var(--c-ink); font-weight:700; letter-spacing:-.01em; }
a { color:var(--c-primary); text-decoration:none; transition:color .2s var(--ease-io); }
a:hover { color:var(--c-ink); }

/* ====================== КНОПКИ ====================== */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border:1px solid var(--c-line); border-radius:var(--r-md); background:transparent;
  color:var(--c-ink); font-family:inherit; font-size:14px; font-weight:500; line-height:1; cursor:pointer;
  transition:all .22s var(--ease-io); overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.10), transparent); transition:transform .6s var(--ease-io);
}
.btn:hover::after { transform:translateX(120%); }
.btn-primary { border-color:var(--c-primary); color:#fff; background:var(--c-primary); }
.btn-primary:hover { border-color:var(--c-primary-2); color:#fff; background:var(--c-primary-2); box-shadow:0 0 0 4px var(--c-primary-soft), 0 10px 28px -8px var(--c-primary); transform:translateY(-2px); }
.btn-ghost:hover { border-color:var(--c-primary); color:var(--c-primary); transform:translateY(-2px); }
.btn-sm { padding:9px 15px; font-size:13px; }
.btn-block { width:100%; }

/* ====================== ШАПКА ====================== */
.site-header {
  position:sticky; top:0; z-index:100;
  --r1:40px; --r2:55px; --ringc:#3f8aff;
  background:
    /* центральный фильтр — приглушает кольца за навигацией (текст чище), к краям прозрачнеет → там кольца видны */
    linear-gradient(to right, transparent 0%, transparent 18%, color-mix(in srgb, var(--c-bg) 78%, transparent) 33%, color-mix(in srgb, var(--c-bg) 78%, transparent) 67%, transparent 82%, transparent 100%),
    repeating-radial-gradient(circle at 0% 50vh, transparent 0 calc(var(--r1) - 1px), color-mix(in srgb, var(--ringc) 12%, transparent) calc(var(--r1) - 1px) var(--r1)),
    repeating-radial-gradient(circle at 100% 50vh, transparent 0 calc(var(--r2) - 1px), color-mix(in srgb, var(--ringc) 12%, transparent) calc(var(--r2) - 1px) var(--r2)),
    linear-gradient(180deg, color-mix(in srgb, var(--c-bg) 72%, transparent), color-mix(in srgb, var(--c-bg-2) 62%, transparent));
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
          backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--c-line);
  animation:ringBreath 14s ease-in-out infinite;
}
[data-theme="light"] .site-header { --ringc:#0b4a8f; }
/* Шапка непрозрачная → прокручиваемый текст исчезает под ней; кольца — её фоном из тех же источников
   (0%/100% 50vh), что и боковой слой body::after = продолжение боковых колец, совпадает на любой прокрутке. */
.header-inner { display:flex; align-items:center; gap:28px; height:64px; position:relative; z-index:1; }
.brand { display:inline-flex; align-items:center; gap:11px; font-weight:700; }
.brand-text { font-size:21px; color:var(--c-ink); letter-spacing:-.02em; }
.brand-text b { color:var(--c-primary); font-weight:700; }
.main-nav { display:flex; align-items:center; gap:6px; margin-left:8px; }
.nav-link { position:relative; padding:9px 13px; font-size:14px; font-weight:500; color:var(--c-ink-2); background:none; border:none; font-family:inherit; cursor:pointer; transition:color .2s var(--ease-io); }
.nav-link::after { content:''; position:absolute; left:13px; right:13px; bottom:4px; height:1px; background:var(--c-primary); transform:scaleX(0); transform-origin:left; transition:transform .25s var(--ease-out); }
.nav-link:hover, .nav-link.is-active { color:var(--c-ink); }
.nav-link:hover::after, .nav-link.is-active::after { transform:scaleX(1); }
.nav-dropdown { position:relative; }
.nav-menu { position:absolute; top:calc(100% + 10px); left:0; min-width:260px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-card); padding:8px; opacity:0; visibility:hidden; transform:translateY(-8px); transition:all .2s var(--ease-io); z-index:50; }
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-menu a { display:block; padding:9px 12px; border-radius:var(--r-sm); color:var(--c-ink-2); font-size:14px; }
.nav-menu a:hover { background:var(--c-primary-soft); color:var(--c-primary); }
.header-contacts { display:flex; align-items:center; gap:16px; margin-left:auto; }
.header-phone { font-weight:700; font-size:16px; color:var(--c-ink); white-space:nowrap; }
.header-phone:hover { color:var(--c-primary); }
.theme-toggle { width:38px; height:38px; display:grid; place-items:center; cursor:pointer; border:1px solid var(--c-line); border-radius:var(--r-md); background:transparent; color:var(--c-ink-2); transition:all .2s var(--ease-io); }
.theme-toggle:hover { color:var(--c-primary); border-color:var(--c-primary); }
/* солнышко (тёмная тема) — оранжевое */
[data-theme="dark"] .theme-toggle { color:#f59e0b; }
[data-theme="dark"] .theme-toggle:hover { color:#f59e0b; border-color:#f59e0b; }
.theme-toggle svg { width:18px; height:18px; }
.burger { display:none; width:42px; height:42px; flex-direction:column; gap:5px; justify-content:center; align-items:center; background:none; border:1px solid var(--c-line); border-radius:var(--r-md); cursor:pointer; }
.burger span { width:18px; height:2px; background:var(--c-ink); transition:.25s var(--ease-io); }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ====================== ЛОГОТИП «инженерный хаб» ====================== */
.lg { display:block; flex:0 0 auto; overflow:visible; }
.lg-net { transform-box:fill-box; transform-origin:50% 50%; transition:transform .55s var(--ease-out); }
.lg-ring { stroke:var(--c-line); stroke-width:1.2; }
.lg-line { stroke:var(--c-primary); stroke-width:1.4; opacity:.5; stroke-dasharray:3 5; }
.lg-node { fill:var(--c-primary); transform-box:fill-box; transform-origin:50% 50%; }
.lg-hub  { fill:var(--c-primary); stroke:var(--c-bg); stroke-width:1.5; filter:drop-shadow(0 0 3px var(--c-primary-soft)); }
.brand:hover .lg-net  { transform:rotate(15deg); }
.brand:hover .lg-line { opacity:.95; animation:lgFlow .9s linear infinite; }
.brand:hover .lg-hub  { filter:drop-shadow(0 0 7px var(--c-primary)); }
.brand:hover .lg-node { animation:lgGlow 1.1s var(--ease-io) infinite; }
.brand:hover .lg-node:nth-child(7){animation-delay:0s} .brand:hover .lg-node:nth-child(8){animation-delay:.12s}
.brand:hover .lg-node:nth-child(9){animation-delay:.24s} .brand:hover .lg-node:nth-child(10){animation-delay:.36s}
.brand:hover .lg-node:nth-child(11){animation-delay:.48s}
@keyframes lgFlow { to { stroke-dashoffset:-16; } }
@keyframes lgGlow { 0%,100%{transform:scale(1);filter:none} 50%{transform:scale(1.5);filter:drop-shadow(0 0 5px var(--c-primary))} }

/* ====================== HERO ====================== */
.hero { padding:84px 0 72px; position:relative; }
.hero-grid { display:grid; grid-template-columns:1.45fr .9fr; gap:48px; align-items:center; }
.hero-title { font-size:clamp(30px,4vw,46px); font-weight:700; line-height:1.08; letter-spacing:-.02em; margin:18px 0; }
.hero-title b { color:var(--c-primary); }
.hero-lead { font-size:16.5px; color:var(--c-ink-2); max-width:560px; line-height:1.7; }
.hero-actions { display:flex; gap:14px; margin:30px 0 36px; flex-wrap:wrap; }
.hero-trust { list-style:none; display:flex; gap:38px; padding:24px 0 0; margin:0; border-top:1px solid var(--c-line); }
.hero-trust li { display:flex; flex-direction:column; gap:4px; }
.hero-trust strong { font-size:26px; font-weight:700; color:var(--c-ink); letter-spacing:-.02em; }
.hero-trust span { font-size:12.5px; color:var(--c-ink-3); }
.hero-card { position:relative; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--sh-card); }
.hero-card::before, .hero-card::after { content:''; position:absolute; width:14px; height:14px; border:1.5px solid var(--c-primary); opacity:.5; }
.hero-card::before { top:-1px; left:-1px; border-right:0; border-bottom:0; }
.hero-card::after  { bottom:-1px; right:-1px; border-left:0; border-top:0; }
.hero-card-title { font-size:18px; margin-bottom:18px; }

/* ====================== ФОРМЫ ====================== */
.field { display:block; margin-bottom:14px; }
.field > span { display:block; font-size:13px; font-weight:500; color:var(--c-ink-2); margin-bottom:6px; }
.field input, .field select, .calc-form input, .calc-form select {
  width:100%; padding:12px 14px; font-family:inherit; font-size:15px; color:var(--c-ink);
  background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:var(--r-md); transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder { color:var(--c-ink-3); }
.field input:focus, .field select:focus, .calc-form input:focus, .calc-form select:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-soft); }
.field input.is-invalid { border-color:var(--c-danger); box-shadow:0 0 0 3px rgba(255,93,93,.15); }
.form-note { font-size:12.5px; color:var(--c-ink-3); margin:10px 0 0; text-align:center; }
.field-opt { color:var(--c-ink-3); font-weight:400; font-size:.92em; }
.form-success { color:var(--c-ok); font-weight:500; text-align:center; padding:14px; }
.form-error { color:var(--c-danger); font-weight:500; text-align:center; padding:10px 0 0; }
.hp { position:absolute!important; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
/* Согласие 152-ФЗ */
.consent { display:flex; align-items:flex-start; gap:9px; margin:4px 0 14px; font-size:12.5px; color:var(--c-ink-3); line-height:1.5; }
.consent input { margin-top:2px; width:15px; height:15px; accent-color:var(--c-primary); flex:0 0 auto; }
.consent.is-invalid, .consent.is-invalid a { color:var(--c-danger); }

/* ====================== КАРТОЧКИ ====================== */
.grid { display:grid; gap:var(--gap); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.feature-card, .service-card {
  position:relative; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:26px; overflow:hidden;
  transition:transform .4s var(--ease-out), border-color .25s var(--ease-io), box-shadow .25s var(--ease-io);
}
.feature-card::before, .service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--c-primary), transparent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease-out); opacity:.8; }
.feature-card:hover, .service-card:hover { transform:translateY(-5px); border-color:var(--c-primary); box-shadow:0 0 0 1px var(--c-primary-soft), 0 18px 40px -18px var(--c-primary); }
.feature-card:hover::before, .service-card:hover::before { transform:scaleX(1); }
.feature-card h3, .service-card h3 { font-size:17px; margin:14px 0 8px; }
.feature-card p, .service-card p { font-size:14px; color:var(--c-ink-2); line-height:1.6; }
.feature-ico { font-size:24px; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--c-line); border-radius:var(--r-md); background:var(--c-surface-2); }
.service-tag { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--c-primary); background:var(--c-primary-soft); border:1px solid rgba(59,130,246,.3); padding:4px 9px; border-radius:var(--r-sm); margin-bottom:6px; }
.service-link { display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:14px; margin-top:12px; color:var(--c-primary); }
.service-link:hover { gap:10px; color:var(--c-ink); }
.service-card--accent { border-color:rgba(59,130,246,.35); }
.service-card--cta { display:flex; flex-direction:column; justify-content:center; background:var(--c-surface-2); }

/* ====================== КАЛЬКУЛЯТОР ====================== */
.calc-wrap { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.calc-form { background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:26px; }
.calc-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.calc-sections { border:1px solid var(--c-line); border-radius:var(--r-md); padding:14px 16px; margin:6px 0 18px; }
.calc-sections legend { font-size:13px; font-weight:500; color:var(--c-ink-2); padding:0 6px; }
.check { display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; color:var(--c-ink-2); cursor:pointer; }
.check input { accent-color:var(--c-primary); width:16px; height:16px; }
.calc-result { background:var(--c-surface-2); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:26px; position:relative; min-height:100%; }
.calc-result-title { font-size:15px; color:var(--c-ink-3); letter-spacing:.04em; text-transform:uppercase; margin-bottom:18px; }
.calc-placeholder { color:var(--c-ink-3); font-size:14px; }
.calc-figure { display:flex; align-items:baseline; gap:8px; margin-bottom:16px; }
.calc-figure .num { font-size:42px; font-weight:700; color:var(--c-primary); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.calc-figure .unit { font-size:13px; color:var(--c-ink-2); }
.calc-line { display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--c-line-2); font-size:14px; color:var(--c-ink-2); }
.calc-line span:last-child { color:var(--c-ink); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.calc-total { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:18px; padding-top:16px; border-top:1px solid var(--c-line); }
.calc-total .lbl { font-size:13px; color:var(--c-ink-2); }
.calc-total .val { font-size:26px; font-weight:700; color:var(--c-ink); font-variant-numeric:tabular-nums; }
.calc-lead { margin-top:22px; padding-top:20px; border-top:1px dashed var(--c-line); }
.calc-lead-text { font-size:14px; color:var(--c-ink-2); margin-bottom:12px; }
.calc-disclaimer { font-size:12px; color:var(--c-ink-3); margin-top:18px; max-width:760px; }

/* ====================== SEO-ТЕКСТ ====================== */
.seo-text { border-top:1px solid var(--c-line); }
.seo-text h2 { font-size:28px; margin-bottom:22px; }
.seo-text h3 { font-size:19px; margin:34px 0 12px; color:var(--c-primary); }
.seo-text p { font-size:16px; color:var(--c-ink-2); line-height:1.8; text-align:justify; hyphens:none; -webkit-hyphens:none; }
.seo-text strong { color:var(--c-ink); }

/* ====================== СТРАНИЦЫ УСЛУГ ====================== */
.page-hero { padding:54px 0 30px; border-bottom:1px solid var(--c-line); }
.breadcrumbs { font-size:13px; color:var(--c-ink-3); display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.breadcrumbs span { opacity:.5; }
.page-hero h1 { font-size:clamp(26px,3.4vw,38px); }
.page-hero .lead { font-size:16px; color:var(--c-ink-2); max-width:760px; }
.service-layout { display:grid; grid-template-columns:1fr 320px; gap:48px; align-items:start; }
.service-aside { position:sticky; top:88px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--sh-card); }
.service-aside h4 { font-size:16px; }
.service-aside ul.checklist { list-style:none; padding:0; margin:14px 0 18px; }
.service-aside ul.checklist li { position:relative; padding:6px 0 6px 26px; font-size:14px; color:var(--c-ink-2); }
.service-aside ul.checklist li::before { content:''; position:absolute; left:0; top:11px; width:12px; height:7px; border-left:2px solid var(--c-primary); border-bottom:2px solid var(--c-primary); transform:rotate(-45deg); }

/* ====================== FAQ (нативный details, без JS) ====================== */
.faq h2 { font-size:24px; margin-bottom:18px; }
.faq-item { border:1px solid var(--c-line); border-radius:10px; background:var(--c-surface); margin-bottom:10px; overflow:hidden; transition:border-color .2s var(--ease-io); }
.faq-item[open] { border-color:color-mix(in srgb, var(--c-primary) 40%, var(--c-line)); }
.faq-item summary { cursor:pointer; list-style:none; padding:15px 18px; font-weight:600; font-size:15.5px; color:var(--c-ink); display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; color:var(--c-primary); font-size:22px; font-weight:300; line-height:1; flex:0 0 auto; transition:transform .2s var(--ease-io); }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:var(--c-primary); }
.faq-item > p { margin:0; padding:0 18px 16px; color:var(--c-ink-2); font-size:14.5px; line-height:1.72; }

/* ====================== ФУТЕР ====================== */
/* анимируемый шаг колец (дыхание) */
@property --r1 { syntax:'<length>'; inherits:false; initial-value:40px; }
@property --r2 { syntax:'<length>'; inherits:false; initial-value:55px; }
.site-footer { position:relative; overflow:hidden; isolation:isolate;
  border-top:1px solid var(--c-line); margin-top:40px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c-bg-2) 60%, transparent), color-mix(in srgb, var(--c-bg) 50%, transparent)); }
/* сияние — поднимается снизу; синхронно шапке */
.site-footer::before { content:''; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 150% at 24% 100%, rgba(0,87,255,.5), transparent 72%),
    radial-gradient(38% 140% at 80% 110%, rgba(0,180,255,.3), transparent 72%),
    radial-gradient(44% 150% at 58% 130%, rgba(0,120,255,.45), transparent 72%);
  filter:blur(50px) saturate(1.15);
  -webkit-mask-image:radial-gradient(130% 115% at 50% 120%, #000 55%, transparent 88%);
          mask-image:radial-gradient(130% 115% at 50% 120%, #000 55%, transparent 88%);
  animation:auroraDriftA 40s ease-in-out infinite; will-change:transform; }
.site-footer::after { content:''; position:absolute; inset:-15%; z-index:0; pointer-events:none;
  background:
    radial-gradient(44% 150% at 12% 120%, rgba(0,64,204,.4), transparent 72%),
    radial-gradient(34% 140% at 92% 110%, rgba(56,189,248,.28), transparent 72%);
  filter:blur(56px) saturate(1.1);
  -webkit-mask-image:radial-gradient(130% 115% at 50% 120%, #000 55%, transparent 88%);
          mask-image:radial-gradient(130% 115% at 50% 120%, #000 55%, transparent 88%);
  animation:auroraDriftB 48s ease-in-out infinite; will-change:transform; }
/* ОБЩИЕ keyframes (шапка+футер) → кольца дышат и сияние плывёт синхронно сверху и снизу */
@keyframes ringBreath { 0%,100%{ --r1:40px; --r2:55px } 50%{ --r1:47px; --r2:63px } }
@keyframes auroraDriftA { 0%,100%{ transform:translate(-4%,-2%) } 50%{ transform:translate(4%,3%) } }
@keyframes auroraDriftB { 0%,100%{ transform:translate(4%,2%) } 50%{ transform:translate(-4%,-3%) } }
[data-theme="light"] .site-footer { --ring:#0b4a8f; }
[data-theme="light"] .site-footer::before { opacity:.65; }
[data-theme="light"] .site-footer::after  { opacity:.65; }
@media (prefers-reduced-motion: reduce){ .site-footer, .site-footer::before, .site-footer::after, .site-header, .site-header::before, .site-header::after{ animation:none } }
.footer-grid, .footer-bottom { position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:36px; padding:56px 0 40px; }
.footer-brand p { color:var(--c-ink-3); font-size:14px; margin-top:14px; max-width:300px; }
.footer-col h4 { font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--c-ink-3); margin-bottom:16px; }
.footer-col ul { list-style:none; padding:0; margin:0; }
.footer-col li { margin-bottom:10px; }
.footer-col a:not(.btn) { color:var(--c-ink-2); font-size:14px; }
.footer-col a:not(.btn):hover { color:var(--c-primary); }
.footer-contacts a:not(.btn) { display:block; }
.footer-phone { color:var(--c-ink)!important; font-size:19px; font-weight:700; margin-bottom:6px; }
.footer-email { color:var(--c-ink-2)!important; margin-bottom:16px; }
.footer-bottom { border-top:1px solid var(--c-line); padding:20px 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:var(--c-ink-3); flex-wrap:wrap; }
.footer-bottom-inner a { color:var(--c-ink-3); transition:color .2s var(--ease-io); }
.footer-bottom-inner a:hover { color:var(--c-ink); }

/* ====================== COOKIE-БАННЕР ====================== */
#cookie-banner { position:fixed; left:50%; bottom:18px; transform:translate(-50%,160%); z-index:9000; width:min(960px,calc(100% - 32px)); display:flex; align-items:center; gap:18px; background:var(--c-surface); border:1px solid var(--c-line); border-radius:var(--r-md); box-shadow:var(--sh-card); padding:14px 18px; transition:transform .5s var(--ease-out); }
#cookie-banner.is-visible { transform:translate(-50%,0); }
#cookie-banner p { margin:0; font-size:13px; color:var(--c-ink-2); flex:1; }
@media(max-width:600px){ #cookie-banner{ flex-direction:column; align-items:stretch; text-align:center; } }


/* ====================== reduced-motion ====================== */
@media (prefers-reduced-motion:reduce) {
  body::after, .btn::after { animation:none; }
  .brand:hover .lg-net, .brand:hover .lg-line, .brand:hover .lg-node { animation:none; transform:none; }
}

/* ====================== АДАПТИВ ====================== */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:32px; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .calc-wrap, .service-layout{ grid-template-columns:1fr; }
  .service-aside{ position:static; }
}
@media (max-width:768px){
  .main-nav{ position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--c-surface); border-bottom:1px solid var(--c-line); padding:8px; transform:translateY(-130%); transition:transform .3s var(--ease-io); }
  .main-nav.is-open{ transform:translateY(0); }
  .nav-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding:0 0 0 12px; }
  .burger{ display:flex; }
  .grid-3,.grid-4{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .hero-trust{ flex-wrap:wrap; gap:20px; }
  .section{ padding:60px 0; }
}
@media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } }

/* доп. мобильная адаптация */
@media (max-width:768px){
  .header-contacts .btn-primary{ display:none; }   /* CTA в шапке прячем — он есть в контенте/калькуляторе */
  .header-inner{ gap:14px; }
  .hero{ padding:56px 0 48px; }
  .hero-title{ font-size:clamp(26px,7.5vw,34px); }
  .section-title{ font-size:24px; }
  .calc-row{ grid-template-columns:1fr; }
  .hero-card{ padding:22px; }
  .page-hero h1{ font-size:clamp(24px,6.5vw,30px); }
}
@media (max-width:400px){
  .container{ padding:0 18px; }
  .header-phone{ display:none; }     /* совсем узкий экран — телефон есть в футере и калькуляторе */
  .hero-trust{ gap:16px; }
  .hero-trust strong{ font-size:22px; }
}