/* ====== SafetyBot — общий стиль (тёмная тема + космические линии) ====== */

:root{
  --bg-0:#0b0e20;         /* низ фона */
  --bg-1:#0f1226;         /* верх фона */
  --text:#e8e9f1;
  --muted:#a8abbd;
  --primary:#6d7cff;
  --accent:#b084ff;
  --card:rgba(255,255,255,.04);
  --card-strong:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.08);
  --ok:#2ecc71;
  --warn:#f1c40f;
  --bad:#e74c3c;
  --shadow:0 8px 28px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}

body{
  margin:0;
  color:var(--text);
  font:16px/1.6 Inter,system-ui,Roboto,Segoe UI,Arial,"Apple Color Emoji","Segoe UI Emoji",sans-serif;
  background:none;                 /* фон перенесён на #bg-layer */
  background-color:var(--bg-0);    /* запасной цвет под градиентом */
  overflow-x:hidden;
}

/* ====== Фиксированные фоновые слои ====== */

/* Градиенты: фиксированный слой, без background-attachment:fixed */
#bg-layer{
  position:fixed; inset:-1px;      /* маленький overscan убирает швы */
  z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(109,124,255,.12) 0%, rgba(176,132,255,.06) 26%, rgba(15,18,38,0) 80%),
    radial-gradient(900px 520px at 10% 20%, rgba(176,132,255,.09) 0%, rgba(15,18,38,0) 70%),
    /* более мягкий линейный градиент с промежуточными стопами */
    linear-gradient(
      180deg,
      #0f1226 0%,
      #0f1226 22%,
      #0d1023 45%,
      #0c0f22 70%,
      #0b0e20 100%
    );
  transform: translateZ(0);         /* переносим в композицию GPU */
  will-change: transform;
}

/* Лёгкий «шум» для борьбы с бэндингом */
#bg-noise{
  position:fixed; inset:-1px;
  z-index:-1; pointer-events:none;
  opacity:.05;                      /* 3–6% подбирается по вкусу */
  mix-blend-mode: soft-light;       /* мягко «растворяет» ступеньки */
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='100%%' height='100%%' filter='url(#n)' opacity='0.6'/>\
  </svg>");
  background-repeat: repeat;
  image-rendering: pixelated;
}

/* Canvas со звёздами и линиями — поверх градиента и шума, но под контентом */
#sb-bg{
  position:fixed;
  top:-1px; left:-1px; right:-1px; bottom:-1px; /* overscan 1px */
  z-index:0;
  pointer-events:none;
}

/* На iOS дополнительно принудительно отключаем fixed-attachment, если вдруг где-то остался */
@supports (-webkit-touch-callout: none) {
  html, body { background-attachment: scroll !important; }
}

/* ====== Сетка макета ====== */
.wrap{width:min(1200px, 100% - 40px); margin:0 auto; padding:56px 0}
.hero{padding:92px 0 48px}
.grid{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  box-shadow:var(--shadow);
  backdrop-filter:saturate(1.1) blur(4px);
}
.card h3{margin:0 0 8px 0}
.muted{color:var(--muted)}

/* ====== Таблицы ====== */
.table{width:100%; border-collapse:collapse}
.table th,.table td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left}
.table th{font-weight:600; color:#cfd3ff}

/* ====== Шапка/навигация ====== */
.header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px) saturate(1.1);
  background:linear-gradient(180deg, rgba(15,18,38,.9) 0%, rgba(15,18,38,.6) 60%, rgba(15,18,38,0) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header .inner{display:flex; align-items:center; gap:20px; height:64px}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; font-weight:700}
.logo img{display:block}
.nav{margin-left:auto; display:flex; align-items:center; gap:16px}
.nav a{color:#cfd3ff; text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.nav a.active{color:#fff}
.badge{font-size:12px; padding:2px 6px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--border)}

/* ====== Кнопки ====== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 18px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(109,124,255,.25), rgba(109,124,255,.15));
  color:#fff; text-decoration:none; font-weight:600; box-shadow:var(--shadow);
  transition:transform .08s ease, filter .2s ease;
}
.btn.small{padding:8px 12px; font-size:14px; border-radius:10px}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05)}
.btn.secondary{background:rgba(255,255,255,.06)}
.btn.ghost{background:transparent; border-color:var(--border)}

/* ====== Футер ====== */
.footer{padding:24px 0 40px; color:var(--muted); border-top:1px solid rgba(255,255,255,.06)}
.footer nav{display:flex; gap:16px}
.footer a{color:#cfd3ff; text-decoration:none}

/* ====== Заголовки и текст ====== */
h1{font-size:48px; line-height:1.1; margin:0 0 16px}
h2{font-size:28px; margin:28px 0 12px}
.lead{font-size:18px; color:#dfe3ff; max-width:820px}
.kpis{display:flex; gap:16px; flex-wrap:wrap}
.kpi{padding:10px 14px; border-radius:12px; background:var(--card-strong); border:1px solid var(--border)}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Плавные появления */
.reveal{opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Формы */
.input, select{
  width:100%; padding:10px 12px; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid var(--border); color:#fff;
}
.switch{display:flex; align-items:center; gap:8px}
.switch input{width:18px; height:18px}

/* Респонсив */
@media (max-width:720px){
  h1{font-size:36px}
  .header .inner{height:58px}
}