/* Тема «За курсором» — ракета летит следом за указателем мыши и разворачивается
   по направлению движения.

   Само движение делает landing.js: он включается только при --rk-cursor: 1,
   то есть ровно на этой теме. На телефонах курсора нет, поэтому там ракета не
   создаётся — проверка есть в скрипте. */

:root{
  --bg:#04060f;
  --bg-soft:#070b18;
  --card:#0b1122;
  --line:rgba(145,180,255,.15);
  --text:#eef3ff;
  --muted:#9aa8cc;
  --accent:#4d80ff;
  --accent-hover:#3d6eea;
  --green:#35e0ad;
  --radius:18px;

  /* Флаг для landing.js: включает ракету, летящую за курсором */
  --rk-cursor:1;
}

body{
  background:
    radial-gradient(1000px 600px at 76% -8%, rgba(77,128,255,.24), transparent 62%),
    radial-gradient(820px 520px at 12% 10%, rgba(150,90,255,.16), transparent 64%),
    var(--bg);
}

/* Звёздное поле, мимо которого летает ракета */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 24%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.3px 1.3px at 68% 14%, rgba(205,225,255,.8), transparent),
    radial-gradient(1.7px 1.7px at 34% 68%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.2px 1.2px at 84% 52%, rgba(190,215,255,.75), transparent),
    radial-gradient(1.4px 1.4px at 56% 88%, rgba(255,255,255,.8), transparent);
  background-size:600px 600px;
  animation:cursor-stars 190s linear infinite;
}
@keyframes cursor-stars{ to{ background-position:600px -600px; } }

/* Сама ракета. Элемент создаёт скрипт, стили — здесь: так тема остаётся
   самодостаточной, а скрипт не знает про оформление. */
.rk-cursor-rocket{
  position:fixed;
  left:0;
  top:0;
  width:38px;
  height:38px;
  margin:-19px 0 0 -19px;   /* центрируем относительно точки курсора */
  z-index:9;
  pointer-events:none;      /* не мешает кликать по кнопкам и ссылкам */
  will-change:transform;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='fl' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd166'/%3E%3Cstop offset='1' stop-color='%23ff6b35' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M24 4c5 5.4 7.6 11.6 7.6 18.6 0 3-.5 5.9-1.4 8.6H17.8c-.9-2.7-1.4-5.6-1.4-8.6C16.4 15.6 19 9.4 24 4z' fill='%23eef3ff'/%3E%3Ccircle cx='24' cy='18' r='3.4' fill='%234d80ff'/%3E%3Cpath d='M16.4 24.6l-5.2 6.6 5.2-1.2zM31.6 24.6l5.2 6.6-5.2-1.2z' fill='%23ff7a3d'/%3E%3Cpath d='M20 31.2h8l-4 12z' fill='url(%23fl)'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 10px rgba(120,170,255,.7));
}

header, main, footer{ position:relative; z-index:1; }
header{ background:rgba(4,6,15,.8); border-bottom:1px solid var(--line); }
.brand-mark{ filter:drop-shadow(0 4px 14px rgba(77,128,255,.6)); }

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

.card, .tariff, details{
  background:linear-gradient(180deg, rgba(16,23,45,.94), rgba(7,11,24,.94));
  border:1px solid var(--line);
}
.card:hover{ border-color:rgba(145,180,255,.34); box-shadow:0 20px 44px -30px rgba(77,128,255,.9); }
.ico{ background:rgba(77,128,255,.2); color:#c6d6ff; }
.ico.green{ background:rgba(53,224,173,.18); color:#8bf0d0; }
.step-n{ background:linear-gradient(140deg,#4d80ff,#8a5cff); }

.btn-primary{
  background:linear-gradient(120deg,#4d80ff,#7f5cff 58%,#35e0ad);
  box-shadow:0 10px 30px -14px rgba(77,128,255,.9);
}
.btn-ghost{ background:rgba(145,180,255,.08); border:1px solid var(--line); }
.dot{ background:var(--green); box-shadow:0 0 10px rgba(53,224,173,.8); }
.tariff.best{ border-color:rgba(77,128,255,.55); }
.badge{ background:linear-gradient(120deg,#4d80ff,#8a5cff); }
.badge-disc{ background:linear-gradient(120deg,#35e0ad,#4d80ff); color:#03231a; }

.cta-band{
  background:
    radial-gradient(680px 240px at 50% 0%, rgba(77,128,255,.24), transparent 70%),
    linear-gradient(160deg, rgba(16,23,45,.92), rgba(5,8,18,.92));
  border:1px solid var(--line);
}
.seo{ background:rgba(4,6,15,.82); border-top:1px solid var(--line); }
.links a{ background:rgba(145,180,255,.08); border-color:var(--line); }
footer{ border-top:1px solid var(--line); }

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
  /* Ракету убираем совсем: без движения она была бы просто пятном под курсором */
  .rk-cursor-rocket{ display:none; }
}