/* Макет «Резервный доступ»: тревожная плашка, переключатель «не работает →
   работает», таблица сравнения и блок запасных каналов.

   Стили описывают только структуру этого макета. Палитру задают темы через те же
   переменные (--bg, --card, --line, --text, --muted, --accent, --green), поэтому
   любой из наших дизайнов работает и здесь. */

:root{
  --bg:#0a0f1e;
  --card:rgba(255,255,255,.045);
  --line:rgba(130,160,255,.14);
  --text:#eef2fb;
  --muted:#9aa6c4;
  --accent:#3b82f6;
  --accent2:#8ab4ff;
  --accent-hover:#2f6fe0;
  --green:#34d399;
  --red:#f43f5e;
  --amber:#fbbf24;
}

*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; background:var(--bg); }
body{
  background:transparent;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 20px; position:relative; z-index:1; }
h1,h2,h3{ line-height:1.15; font-weight:850; letter-spacing:-.02em; }
.muted{ color:var(--muted); }

/* Фон: тёмный градиент со звёздами. Тема может его переопределить. */
#space{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background:
    radial-gradient(1200px 700px at 82% -6%, rgba(244,63,94,.16), transparent 60%),
    radial-gradient(900px 520px at 10% 4%, rgba(59,130,246,.20), transparent 55%),
    linear-gradient(180deg, #0b1226 0%, var(--bg) 45%, #070a14 100%);
}
#space .stars{
  position:absolute;
  inset:0;
  opacity:.65;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 20%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 66% 12%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.3px 1.3px at 40% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.8px 1.8px at 85% 40%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 12% 52%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 55% 66%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.3px 1.3px at 30% 78%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.6px 1.6px at 78% 86%, rgba(255,255,255,.5), transparent);
}

/* Тревожная плашка сверху */
.alert-bar{
  background:linear-gradient(90deg, rgba(244,63,94,.22), rgba(244,63,94,.08));
  border-bottom:1px solid rgba(244,63,94,.35);
  padding:10px 0;
  font-size:13.5px;
  font-weight:650;
}
.alert-bar .wrap{
  display:flex; align-items:center; justify-content:center;
  gap:9px; text-align:center; flex-wrap:wrap;
}
.alert-dot{
  width:8px; height:8px; border-radius:999px; background:var(--red); flex-shrink:0;
  box-shadow:0 0 0 0 rgba(244,63,94,.7);
  animation:pulse-red 1.8s infinite;
}
@keyframes pulse-red{
  0%  { box-shadow:0 0 0 0 rgba(244,63,94,.6); }
  70% { box-shadow:0 0 0 8px rgba(244,63,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(244,63,94,0); }
}

header{ padding:22px 0 0; }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:850; font-size:18px; }
.brand-mark{ width:34px; height:34px; border-radius:10px; display:block; flex-shrink:0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  border:0; border-radius:14px; padding:14px 26px;
  font-size:15.5px; font-weight:750; cursor:pointer; font-family:inherit;
  transition:transform .12s, box-shadow .2s; white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{
  background:linear-gradient(100deg, var(--accent), #6aa0ff);
  color:#fff;
  box-shadow:0 10px 30px rgba(59,130,246,.42);
}
.btn-primary:hover{ box-shadow:0 16px 44px rgba(59,130,246,.58); transform:translateY(-2px); }
.btn-lg{ padding:18px 34px; font-size:17.5px; }
.btn-ghost{ background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text); }
.btn-ghost:hover{ background:rgba(255,255,255,.11); }

/* Первый экран */
.hero{ padding:56px 0 30px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:750; color:#fda4af;
  background:rgba(244,63,94,.14); border:1px solid rgba(244,63,94,.36);
  padding:8px 16px; border-radius:999px;
}
.hero h1{ font-size:clamp(30px,5.4vw,54px); margin:22px auto 0; max-width:820px; }
.hero h1 .bad{
  color:#fda4af; text-decoration:line-through;
  text-decoration-thickness:3px; text-decoration-color:rgba(244,63,94,.7);
}
.hero h1 .grad{
  background:linear-gradient(100deg, #eaf1ff 10%, var(--accent2) 55%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{ color:var(--muted); font-size:clamp(15px,1.9vw,18.5px); max-width:620px; margin:18px auto 0; }
.hero-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }
.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:26px; color:var(--muted); font-size:13px; }
.trust span{ display:flex; align-items:center; gap:7px; }
.dot-g{ width:7px; height:7px; border-radius:999px; background:var(--green); flex-shrink:0; box-shadow:0 0 8px var(--green); }

/* Переключатель «не работает → работает» */
.switch-card{
  max-width:640px; margin:44px auto 0;
  background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:26px 22px;
}
.switch-row{ display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; }
.node{ flex:1; min-width:170px; border-radius:16px; padding:16px; text-align:left; position:relative; }
.node.dead{ background:rgba(244,63,94,.08); border:1px solid rgba(244,63,94,.28); opacity:.75; }
.node.dead .tag{ background:rgba(244,63,94,.18); color:#fda4af; border:1px solid rgba(244,63,94,.4); }
.node.dead .name{ text-decoration:line-through; color:#c9a3a8; }
.node.live{ background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.32); }
.node.live .tag{ background:rgba(52,211,153,.18); color:#6ee7b7; border:1px solid rgba(52,211,153,.4); }
.tag{
  display:inline-block; font-size:10.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
  padding:3px 9px; border-radius:999px; margin-bottom:8px;
}
.name{ font-weight:800; font-size:15px; }
.sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.arrow{ font-size:22px; color:var(--accent2); flex-shrink:0; }
@media (max-width:560px){ .arrow{ transform:rotate(90deg); } }

.section{ padding:64px 0; position:relative; z-index:1; }
.section h2{ font-size:clamp(24px,3.4vw,34px); text-align:center; }
.section .lead{ color:var(--muted); text-align:center; max-width:560px; margin:12px auto 0; }

/* Таблица сравнения */
.cmp{
  margin-top:40px; border:1px solid var(--line); border-radius:20px;
  overflow:hidden; background:var(--card);
}
.cmp-row{ display:grid; grid-template-columns:1.6fr 1fr 1fr; align-items:center; }
.cmp-row + .cmp-row{ border-top:1px solid var(--line); }
.cmp-row.head{
  background:rgba(255,255,255,.03); font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
.cmp-cell{ padding:16px 18px; font-size:14px; }
.cmp-row.head .cmp-cell{ padding:13px 18px; }
.cmp-cell.label{ font-weight:650; }
.cmp-cell.us{ background:rgba(59,130,246,.07); font-weight:700; }
.cmp-row.head .cmp-cell.us{ color:var(--accent2); }
.ok{ color:var(--green); font-weight:800; }
.no{ color:var(--red); font-weight:800; }
@media (max-width:640px){
  .cmp-row{ grid-template-columns:1.3fr .85fr .85fr; }
  .cmp-cell{ padding:12px 10px; font-size:12.5px; }
}

/* Запасные каналы */
.mirrors{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px; }
@media (max-width:800px){ .mirrors{ grid-template-columns:1fr; } }
.mirror{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  padding:22px; text-align:center; transition:border-color .18s, transform .18s;
}
.mirror:hover{ border-color:rgba(120,160,255,.35); transform:translateY(-3px); }
.mirror .ic{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center;
  margin:0 auto 14px; font-size:22px;
  background:linear-gradient(135deg, var(--accent), #6aa0ff);
  box-shadow:0 8px 22px rgba(59,130,246,.4);
}
.mirror h3{ font-size:16px; }
.mirror p{ color:var(--muted); font-size:13px; margin-top:6px; }

/* Финальный призыв */
.cta-final{ text-align:center; padding:70px 0 90px; }
.cta-card{
  max-width:640px; margin:0 auto;
  background:linear-gradient(160deg, rgba(59,130,246,.14), rgba(20,25,40,.5));
  border:1px solid rgba(120,160,255,.3); border-radius:26px; padding:44px 30px;
}
.cta-card h2{ font-size:clamp(24px,3.6vw,32px); }
.cta-card .lead{ margin-top:10px; }
.link-fallback{ margin-top:18px; font-size:12.5px; color:var(--muted); word-break:break-all; }
.link-fallback b{ color:var(--accent2); font-weight:700; }

footer{ padding:28px 0 40px; text-align:center; color:var(--muted); font-size:12.5px; }

@media (prefers-reduced-motion: reduce){
  .alert-dot{ animation:none; }
  .btn-primary:hover, .mirror:hover{ transform:none; }
}

/* Экономный режим — то же, что в landing.css: на слабых телефонах движение
   выключается целиком, оформление остаётся. Признак ставит landing.js. */
html[data-lite] *,
html[data-lite] *::before,
html[data-lite] *::after{
  animation:none !important;
  transition:none !important;
}
html[data-lite] *{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-lite]{ --rk-cursor:0; }