/* Тема «Ракета» — фирменный дизайн: яркий, контрастный, футуристичный.
   Подключается после landing.css и переопределяет оформление целиком: палитру,
   типографику, форму карточек, кнопки и ритм секций. Разметка общая, поэтому
   тему можно включить на любой странице.

   Движение — только медленный сдвиг градиентов и лёгкое свечение, всё на
   composited-свойствах. Отключается системной настройкой «уменьшить движение». */

:root{
  --bg:#070b1a;
  --bg-soft:#0a1024;
  --card:#0e1530;
  --line:rgba(140,170,255,.16);
  --text:#f4f7ff;
  --muted:#a9b6d8;
  --accent:#4f7bff;
  --accent-hover:#3f6bf0;
  --green:#23e5c0;
  --violet:#a35cff;
  --gold:#ffd166;
  --radius:20px;
}

/* ── фон: широкие цветные пятна и тонкая сетка ────────────────────────── */
body{
  background:
    radial-gradient(1200px 700px at 78% -10%, rgba(79,123,255,.30), transparent 60%),
    radial-gradient(900px 600px at 8% 6%, rgba(163,92,255,.24), transparent 62%),
    radial-gradient(800px 520px at 60% 105%, rgba(35,229,192,.18), transparent 64%),
    var(--bg);
  background-attachment:fixed;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(140,170,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,170,255,.05) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(circle at 50% 20%, #000 0%, #000 45%, transparent 85%);
}
header, main, footer{ position:relative; z-index:1; }

/* ── типографика ──────────────────────────────────────────────────────── */
h1{
  font-size:clamp(34px, 6vw, 64px);
  line-height:1.06;
  letter-spacing:-.035em;
  background:linear-gradient(104deg, #ffffff 8%, #cfe0ff 42%, #7cf0dc 78%, #ffd166 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:rk-shift 18s ease-in-out infinite;
}
@keyframes rk-shift{
  0%, 100%{ background-position:0% center; }
  50%     { background-position:100% center; }
}
h2{
  font-size:clamp(26px, 3.6vw, 40px);
  letter-spacing:-.025em;
  position:relative;
  padding-top:18px;
}
/* Над каждым заголовком — короткий фирменный штрих вместо скучного отступа */
h2::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:52px;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--violet) 55%, var(--green));
}
.center h2::before{ left:50%; transform:translateX(-50%); }
h3{ font-size:18px; letter-spacing:-.01em; }
.lead{ font-size:clamp(16px, 2vw, 19px); max-width:660px; }

/* ── шапка ────────────────────────────────────────────────────────────── */
header{
  background:rgba(7,11,26,.72);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.brand{ font-size:18px; letter-spacing:-.01em; }
.brand-mark{
  filter:drop-shadow(0 4px 16px rgba(79,123,255,.75));
  animation:rk-hover 5s ease-in-out infinite;
}
@keyframes rk-hover{
  0%, 100%{ transform:translateY(0); }
  50%     { transform:translateY(-3px); }
}
.nav-links a{ font-weight:600; }
.nav-links a:hover{ color:var(--text); }

/* ── кнопки: градиент, свечение и блик при наведении ──────────────────── */
.btn{
  border-radius:14px;
  font-weight:700;
  letter-spacing:.005em;
  position:relative;
  overflow:hidden;
}
.btn-primary{
  background:linear-gradient(115deg, #4f7bff 0%, #7b5cff 45%, #23e5c0 115%);
  background-size:180% auto;
  box-shadow:
    0 10px 30px -12px rgba(79,123,255,.9),
    inset 0 1px 0 rgba(255,255,255,.3);
  transition:background-position .35s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  background-position:90% center;
  transform:translateY(-2px);
  box-shadow:
    0 18px 40px -14px rgba(123,92,255,1),
    inset 0 1px 0 rgba(255,255,255,.4);
}
/* Блик пробегает по кнопке — только при наведении, чтобы не мельтешил */
.btn-primary::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:40%;
  left:-60%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-18deg);
}
.btn-primary:hover::after{ animation:rk-sheen .75s ease-out; }
@keyframes rk-sheen{ to{ left:120%; } }

.btn-ghost{
  background:rgba(140,170,255,.08);
  border:1px solid var(--line);
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ background:rgba(140,170,255,.16); border-color:rgba(140,170,255,.4); }

/* ── первый экран ─────────────────────────────────────────────────────── */
.hero{ padding:104px 0 76px; }
.hero::before{ width:520px; height:520px; background:rgba(163,92,255,.26); top:-190px; left:-140px; }
.hero::after{ width:460px; height:460px; background:rgba(35,229,192,.20); bottom:-200px; right:-130px; }
.trust{ gap:22px; font-size:14px; }
.trust span{ font-weight:600; }
.dot{
  width:8px; height:8px;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(35,229,192,.14), 0 0 14px rgba(35,229,192,.9);
}

/* ── карточки: градиентная кромка вместо простой рамки ────────────────── */
.card, .tariff, details{
  /* Два фона: внутренний по padding-box, градиентная рамка по border-box */
  background:
    linear-gradient(180deg, rgba(20,28,60,.94), rgba(10,15,36,.94)) padding-box,
    linear-gradient(150deg, rgba(79,123,255,.55), rgba(163,92,255,.28) 45%, rgba(35,229,192,.4)) border-box;
  border:1px solid transparent;
  border-radius:var(--radius);
}
.card{ transition:transform .18s ease, box-shadow .22s ease; }
.card:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 60px -34px rgba(79,123,255,.95);
}
.ico{
  width:46px; height:46px;
  border-radius:14px;
  font-size:20px;
  background:linear-gradient(145deg, rgba(79,123,255,.3), rgba(163,92,255,.22));
  color:#dbe6ff;
  box-shadow:inset 0 0 0 1px rgba(140,170,255,.25), 0 8px 20px -12px rgba(79,123,255,.9);
}
.ico.green{
  background:linear-gradient(145deg, rgba(35,229,192,.3), rgba(79,123,255,.18));
  color:#9ff5e4;
  box-shadow:inset 0 0 0 1px rgba(35,229,192,.3), 0 8px 20px -12px rgba(35,229,192,.9);
}
.step-n{
  width:34px; height:34px;
  border-radius:11px;
  font-size:15px;
  background:linear-gradient(145deg, var(--accent), var(--violet));
  box-shadow:0 10px 22px -12px rgba(123,92,255,1);
}

/* ── тарифы ───────────────────────────────────────────────────────────── */
.tariff{ padding:28px 24px; }
.tariff .price{
  font-size:38px;
  letter-spacing:-.03em;
  background:linear-gradient(100deg, #ffffff, #bcd2ff 60%, #7cf0dc);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tariff.best{
  background:
    linear-gradient(180deg, rgba(28,38,80,.96), rgba(12,18,42,.96)) padding-box,
    linear-gradient(140deg, #4f7bff, #a35cff 50%, #23e5c0) border-box;
  border:1.5px solid transparent;
  box-shadow:0 30px 70px -40px rgba(123,92,255,1);
}
.badge{
  background:linear-gradient(110deg, var(--accent), var(--violet));
  box-shadow:0 8px 20px -10px rgba(123,92,255,1);
  letter-spacing:.02em;
  padding:5px 14px;
}
.badge-disc{ background:linear-gradient(110deg, var(--green), var(--accent)); color:#04231d; }
.tariff .days{ text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700; }

/* ── вопросы ──────────────────────────────────────────────────────────── */
details{ padding:18px 20px; }
details summary{ font-size:16px; }
details summary::after{ color:var(--accent); font-size:22px; }
details[open]{
  background:
    linear-gradient(180deg, rgba(26,36,76,.96), rgba(12,18,42,.96)) padding-box,
    linear-gradient(150deg, rgba(79,123,255,.7), rgba(35,229,192,.5)) border-box;
}

/* ── призыв и подвал ──────────────────────────────────────────────────── */
.cta-band{
  border-radius:28px;
  padding:56px 32px;
  background:
    radial-gradient(760px 260px at 50% 0%, rgba(123,92,255,.35), transparent 70%),
    linear-gradient(160deg, rgba(24,32,70,.95), rgba(9,13,32,.95)) padding-box,
    linear-gradient(120deg, #4f7bff, #a35cff 55%, #23e5c0) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 90px -60px rgba(123,92,255,1);
}
.cta-band h2::before{ left:50%; transform:translateX(-50%); }

.seo{ background:rgba(6,9,22,.8); border-top:1px solid var(--line); }
.seo-body h2{ padding-top:0; }
.seo-body h2::before{ display:none; }
.links a{
  background:rgba(140,170,255,.09);
  border-color:var(--line);
  font-weight:600;
}
.links a:hover{ background:rgba(140,170,255,.18); color:var(--text); }
footer{ border-top:1px solid var(--line); background:rgba(6,9,22,.6); }

/* ── чередование секций: мягкая подсветка вместо плоской заливки ──────── */
.section[style*="bg-soft"]{
  background:
    radial-gradient(900px 400px at 50% 0%, rgba(79,123,255,.10), transparent 70%),
    var(--bg-soft) !important;
}

@media (max-width:640px){
  .hero{ padding:72px 0 56px; }
  .cta-band{ padding:40px 22px; }
}

@media (prefers-reduced-motion: reduce){
  h1, .brand-mark{ animation:none; }
  .card, .btn-primary{ transition:none; }
  .card:hover, .btn-primary:hover{ transform:none; }
  .btn-primary:hover::after{ animation:none; }
}