/* Тема «Космос» — звёздное небо с параллаксом, туманности и редкая комета.
   Подключается после landing.css и меняет только оформление.

   Анимации сделаны на background-position и transform: браузер считает их на
   видеокарте, поэтому прокрутка не дёргается. Всё движение выключается, если
   в системе включено «уменьшить движение». */

:root{
  --bg:#04060f;
  --bg-soft:#070b18;
  --card:#0b1020;
  --line:rgba(150,180,255,.14);
  --text:#eef2ff;
  --muted:#98a4c8;
  --accent:#4b7bff;
  --accent-hover:#3d6ae8;
  --green:#3fe0a6;
  --radius:18px;
}

body{
  background:
    radial-gradient(900px 520px at 78% -6%, rgba(75,123,255,.20), transparent 62%),
    radial-gradient(760px 460px at 10% 14%, rgba(160,80,255,.16), transparent 64%),
    radial-gradient(620px 420px at 50% 106%, rgba(63,224,166,.12), transparent 66%),
    var(--bg);
}

/* Два слоя звёзд с разной плотностью и скоростью — так появляется глубина */
body::before,
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body::before{
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.4px 1.4px at 68% 8%,  rgba(210,225,255,.85), transparent),
    radial-gradient(1.8px 1.8px at 34% 62%, rgba(255,255,255,.9),  transparent),
    radial-gradient(1.3px 1.3px at 82% 44%, rgba(190,215,255,.8),  transparent),
    radial-gradient(1.5px 1.5px at 52% 86%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 92% 74%, rgba(200,220,255,.75), transparent);
  background-size:620px 620px;
  animation:cosmos-near 150s linear infinite;
}
body::after{
  background-image:
    radial-gradient(1px 1px at 26% 34%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 74% 22%, rgba(190,210,255,.5), transparent),
    radial-gradient(1px 1px at 46% 72%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 8% 88%,  rgba(180,205,255,.45), transparent),
    radial-gradient(1px 1px at 88% 58%, rgba(255,255,255,.5),  transparent);
  background-size:340px 340px;
  animation:cosmos-far 320s linear infinite;
  opacity:.7;
}
@keyframes cosmos-near{ to{ background-position:620px 620px; } }
@keyframes cosmos-far{  to{ background-position:-340px 340px; } }

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

/* Комета: пролетает по диагонали раз в полминуты, остальное время её нет */
.hero{ overflow:hidden; }
.hero::before{
  content:'';
  position:absolute;
  top:12%;
  left:-14%;
  width:190px;
  height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95));
  border-radius:2px;
  filter:drop-shadow(0 0 7px rgba(150,190,255,.95));
  opacity:0;
  animation:comet 34s ease-in infinite;
  z-index:0;
}
@keyframes comet{
  0%, 88%   { transform:translate3d(0,0,0) rotate(18deg); opacity:0; }
  90%       { opacity:.95; }
  100%      { transform:translate3d(135vw, 46vh, 0) rotate(18deg); opacity:0; }
}
.hero::after{
  width:420px; height:420px;
  background:rgba(75,123,255,.20);
  bottom:-180px; right:-120px;
}

/* Логотип-ракета чуть покачивается — знак живой, но не отвлекает */
.brand-mark{
  animation:rocket-float 6s ease-in-out infinite;
  filter:drop-shadow(0 4px 12px rgba(75,123,255,.55));
}
@keyframes rocket-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-3px) rotate(-3deg); }
}

header{ background:rgba(4,6,15,.78); border-bottom:1px solid var(--line); }

h1{
  background:linear-gradient(100deg, #ffffff 10%, #b9cdff 48%, #7ef0c8 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Карточки — «иллюминаторы»: тёмное стекло с холодной подсветкой сверху */
.card, .tariff, details{
  background:linear-gradient(180deg, rgba(16,22,44,.94), rgba(8,11,24,.94));
  border:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.card::after, .tariff::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(120% 60% at 50% -20%, rgba(120,160,255,.16), transparent 70%);
  pointer-events:none;
}
.card:hover{ border-color:rgba(150,180,255,.32); }
.ico{ background:rgba(75,123,255,.2); color:#c3d5ff; }
.ico.green{ background:rgba(63,224,166,.18); color:#8bf0cd; }
.step-n{ background:linear-gradient(140deg,#4b7bff,#9b5cff); }

.btn-primary{
  background:linear-gradient(120deg,#4b7bff,#7b5cff 60%,#3fe0a6);
  box-shadow:0 10px 30px -14px rgba(75,123,255,.9);
}
.btn-primary:hover{ background:linear-gradient(120deg,#5b89ff,#8b6cff 60%,#52e8b4); }
.btn-ghost{ background:rgba(150,180,255,.08); border:1px solid var(--line); }

.dot{ background:var(--green); box-shadow:0 0 10px rgba(63,224,166,.75); }
.tariff.best{ border-color:rgba(75,123,255,.55); }
.badge{ background:linear-gradient(120deg,#4b7bff,#9b5cff); }
.badge-disc{ background:linear-gradient(120deg,#3fe0a6,#4b7bff); color:#052018; }

.cta-band{
  background:
    radial-gradient(680px 240px at 50% 0%, rgba(75,123,255,.24), transparent 70%),
    linear-gradient(160deg, rgba(16,22,44,.92), rgba(6,9,20,.92));
  border:1px solid var(--line);
}
.seo{ background:rgba(5,7,16,.78); border-top:1px solid var(--line); }
.links a{ background:rgba(150,180,255,.08); border-color:var(--line); }
footer{ border-top:1px solid var(--line); }

@media (prefers-reduced-motion: reduce){
  body::before, body::after, .hero::before, .brand-mark{ animation:none; }
  .hero::before{ opacity:0; }
}