/* assets/bg.css — фон прямо на body, оверлей поверх
   Пути от этой папки: assets/images/bg/*.jpg  */

html, body { height: 100%; margin: 0; }
body {
  background: #0b0f19;
  position: relative;
}

header, main, footer { position: relative; z-index: 1; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55));
  z-index: 0;
}

/* Привязка фоновых фото к страницам — фон на самом body */
body.index        { background: url('images/bg/index-bg.jpg')        center/cover fixed no-repeat; }
body.services     { background: url('images/bg/services-bg.jpg')     center/cover fixed no-repeat; }
body.publications { background: url('images/bg/publications-bg.jpg') center/cover fixed no-repeat; }
body.contacts     { background: url('images/bg/contacts-bg.jpg')     center/cover fixed no-repeat; }

body.energy       { background: url('images/bg/energy-bg.jpg')       center/cover fixed no-repeat; }
body.fsa-triz     { background: url('images/bg/fsa-triz-bg.jpg')     center/cover fixed no-repeat; }
body.lab          { background: url('images/bg/lab-bg.jpg')          center/cover fixed no-repeat; }

/* Полупрозрачные карточки */
.card  { background: rgba(17,24,39,.82); backdrop-filter: blur(3px); border-radius: 18px; }
header { background: rgba(10,14,32,.75); backdrop-filter: blur(6px); }
footer { background: rgba(10,14,32,.55); }

/* === bg.css — patch v4: per-page tuning (яркость/кадрирование) === */

/* Главная */
body.index{ background-position:center 35%; }
body.index::after{
  background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.52));
}

/* Направления */
body.services{ background-position:center 30%; }
body.services::after{
  background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.62));
}

/* Публикации */
body.publications{ background-position:center 40%; }
body.publications::after{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}

/* Контакты */
body.contacts{ background-position:center 45%; }
body.contacts::after{
  background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.60));
}

/* Энергетический инжиниринг */
body.energy{ background-position:55% center; }
body.energy::after{
  background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45));
}

/* ФСА / ТРИЗ */
body.fsa-triz{ background-position:center 5%; }
body.fsa-triz::after{
  background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.70));
}

/* Лаборатория */
body.lab{ background-position:center 35%; }
body.lab::after{
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.52));
}

/* Мобильная подстройка кадра */
@media (max-width: 768px){
  body.index{ background-position:60% center; }
  body.services{ background-position:center 20%; }
  body.energy{ background-position:65% center; }
}

/* Чуть поддержим читабельность заголовков */
h1, h2, h3{ text-shadow:0 2px 10px rgba(0,0,0,.4); }



/* === bg.css — tuning pack === */

/* Главная: немного выше горизонт, умеренное затемнение */
body.index{ background-position:center 35%; }
body.index::after{ background:linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.52)); }

/* Направления: подтянуть фокус к верхней трети, усилить читабельность */
body.services{ background-position:center 30%; }
body.services::after{ background:linear-gradient(180deg, rgba(0,0,0,.40), rgba(0,0,0,.62)); }

/* Публикации: самый тёмный (много белых листов на фоне) */
body.publications{ background-position:center 40%; }
body.publications::after{ background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75)); }

/* Контакты: лонг-экспозиция, чуть спокойнее по затемнению */
body.contacts{ background-position:center 45%; }
body.contacts::after{ background:linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.60)); }

/* Энергетика: сместить фокус вправо, чтобы заголовок не «наезжал» на башню */
body.energy{ background-position:55% center; }
body.energy::after{ background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.45)); }

/* ФСА/ТРИЗ: стикеры «шумные», делаем темнее для контраста текста */
body.fsa-triz{ background-position:center 35%; }
body.fsa-triz::after{ background:linear-gradient(180deg, rgba(0,0,0,.50), rgba(0,0,0,.70)); }

/* Лаборатория: умеренно, холодные тона сами помогают */
body.lab{ background-position:center 35%; }
body.lab::after{ background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.52)); }

/* На мобильных немного меняем кадр */
@media (max-width: 768px){
  body.index{ background-position:60% center; }
  body.services{ background-position:center 22%; }
  body.energy{ background-position:65% center; }
}

  body.site-footer{
  margin:24px auto 0; padding:14px 16px; text-align:center;
  color:#9ca3af;
  background: rgba(10,14,32,.55);
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}

  body .site-footer{
  position: fixed !important;   /* всегда внизу экрана */
  left: 0; right: 0; bottom: 0;
  text-align: center;           /* центрируем текст */
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); /* iOS safe area */
  color: #9ca3af;
  background: rgba(10,14,32,.55);
  border-top: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  z-index: 100;                 /* поверх затемнения фона */
}

/* Steps ribbon */
.steps{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 10px}
.step{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid rgba(255,255,255,.22);
  border-radius:999px;background:rgba(255,255,255,.04);
  font-size:13px;opacity:.95
}
.step .ico{width:16px;height:16px;color:#c7d2fe;opacity:.9}
.sep{color:#9ca3af;opacity:.9}

/* Главная: больше «подушки» под sticky-footer */
body.index main{ padding-bottom: 130px !important; }

/* Чуть больше отступ снизу у финального CTA, чтобы не прилипал к футеру */
body.index .cta-panel{ margin: 18px 0 40px !important; }

/* ==== Steps 2.0 — яркие шаги процесса ==== */
:root{
  /* Палитра шагов (мультицвет) */
  --s1:#06b6d4; --s1d:#0891b2;  /* cyan */
  --s2:#0ea5e9; --s2d:#0284c7;  /* sky  */
  --s3:#3b82f6; --s3d:#1d4ed8;  /* blue */
  --s4:#6366f1; --s4d:#4f46e5;  /* indigo */
  --s5:#8b5cf6; --s5d:#7c3aed;  /* violet */
  --stepsText:#eef2ff;          /* почти белый */
}

.steps{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:10px;
  margin:14px 0 10px;
}
.steps .arrow{align-self:center; color:#9ca3af; opacity:.95; font-weight:700}

.step{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:9999px;
  color:var(--stepsText); font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:.18s transform ease, .18s box-shadow ease, .18s filter ease;
  backdrop-filter:saturate(1.1);
}
.step:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(0,0,0,.28) }
.step .num{
  width:22px; height:22px; border-radius:9999px; display:inline-grid; place-items:center;
  font-size:12px; line-height:1; color:var(--stepsText);
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.35);
}

/* Мультицветные фоны по шагам */
.step.s1{ background:linear-gradient(135deg, var(--s1), var(--s1d)); }
.step.s2{ background:linear-gradient(135deg, var(--s2), var(--s2d)); }
.step.s3{ background:linear-gradient(135deg, var(--s3), var(--s3d)); }
.step.s4{ background:linear-gradient(135deg, var(--s4), var(--s4d)); }
.step.s5{ background:linear-gradient(135deg, var(--s5), var(--s5d)); }

/* Однотонный вариант (включается классом .steps--single на ul) */
.steps--single .step{
  background:linear-gradient(135deg, #22d3ee, #3b82f6);
}

/* Яркая кнопка рядом со steps */
.btn-primary{
  display:inline-block; padding:12px 16px;
  border:none; border-radius:12px; color:#081129; font-weight:700;
  background:linear-gradient(135deg, #22d3ee, #3b82f6);
  box-shadow:0 10px 24px rgba(34,211,238,.18), inset 0 0 0 1px rgba(255,255,255,.22);
  transition:.18s transform ease, .18s box-shadow ease, .18s filter ease;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 14px 30px rgba(34,211,238,.26) }

/* ==== Flow graph (приглушённый) ==== */
.flow{ margin:12px 0 6px }
.flow svg{ width:100%; height:auto; display:block }
.flow .lbl{
  font: 14px/1.3 Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  fill:#cbd5e1;        /* мягкий светло-серый */
  text-anchor: start;  /* для вертикальной версии */
}
.flow-h .lbl{ text-anchor: middle } /* горизонтальная — подписи под кругами */

/* Переключение версий */
.flow .flow-h{ display:block }
.flow .flow-v{ display:none }
@media (max-width: 720px){
  .flow .flow-h{ display:none }
  .flow .flow-v{ display:block }
}

/* Чуть компактнее общий отступ у hero после замены "кнопок" на граф */
.hero .cta{ margin-top: 6px }

/* Contact strip (адрес + телефон) */
.contact-strip{
  margin: 12px 0 24px;
  background: rgba(17,24,39,.82);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:14px 16px;
}
.contact-strip .grid{
  display:grid; grid-template-columns:2fr 1fr; gap:16px; align-items:flex-start;
}
@media (max-width: 720px){ .contact-strip .grid{grid-template-columns:1fr} }
.contact-strip h3{margin:0 0 6px 0; font-size:16px}
.contact-strip address{font-style:normal; color:#9ca3af; line-height:1.6; margin:0}
.contact-strip a{white-space:nowrap}

/* Language switcher (плавающий, ненавязчивый) */
.lang-switch{
  position:fixed; top:12px; right:12px; z-index:200;
  display:flex; gap:6px; background:rgba(10,14,32,.55);
  border:1px solid rgba(255,255,255,.12); border-radius:9999px;
  padding:6px 8px; backdrop-filter: blur(6px);
}
.lang-switch button{
  font-size:12px; line-height:1; padding:6px 8px; cursor:pointer;
  color:#e5e7eb; background:transparent; border:1px solid rgba(255,255,255,.2);
  border-radius:9999px;
}
.lang-switch button.active{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35) }
@media (max-width:600px){ .lang-switch{ top:8px; right:8px } .lang-switch button{ padding:5px 7px; font-size:11px } }

.item.fsa-triz{
  background-image:url('assets/images/cards/fsa-triz-card_16x9.jpg');
  background-size:cover;
  background-position:center;
}