/* ============================================================
   mimo.VPN — Слой сайта поверх дизайн-системы "Liquid Ember"
   site.css · Кнопки, плашки и эффекты, которых нет в базовых файлах
   Подключать ПОСЛЕ tokens/glass/animations/components:
     <link rel="stylesheet" href="tokens.css">
     <link rel="stylesheet" href="glass.css">
     <link rel="stylesheet" href="animations.css">
     <link rel="stylesheet" href="components.css">
     <link rel="stylesheet" href="site.css">
   ============================================================ */

/* ---------- База ---------- */

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  background: var(--night-950);
  color: var(--text-primary);
  font-family: var(--font-sans);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: rgba(226, 122, 88, 0.35);
  color: var(--text-on-ember);
}

/* Сайт-контейнер (шире мобильного приложения, та же сетка отступов) */
.site-container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--screen-pad-x);
}

/* Единый радиус всех стеклянных карточек */
.lg {
  border-radius: var(--radius-lg);
}

/* Вложенные плитки (внутри карточек) — чуть меньше, единообразно */
.tile {
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

/* ---------- Типографика секций ---------- */

.h-display {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.h-section {
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.lead {
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ---------- Фон-аврора на весь сайт (как в приложении) ---------- */

.site-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.site-bg .aurora-root {
  position: absolute;
}

/* Контент поверх фона */
.site-content {
  position: relative;
  z-index: var(--z-content);
}

/* ---------- Кнопка питания (hero / зажигание) ---------- */

/* Иконка по центру корпуса */
.pw-body {
  display: grid;
  place-items: center;
}

/* Зажжённое состояние заметнее — дышит свечением дизайн-системы.
   На телефонах бесконечные анимации огромных блюров убивают FPS —
   там статичное яркое свечение вместо «дыхания». */
.hero-cta .pw-body[data-lit="true"] {
  animation: ember-breathe var(--loop-breathe) ease-in-out infinite;
}
@media (pointer: coarse), (max-width: 768px) {
  .hero-cta .pw-body[data-lit="true"] {
    animation: none;
    box-shadow:
      0 0 70px rgba(226, 122, 88, 0.6),
      0 0 140px rgba(212, 98, 61, 0.35),
      inset 0 1.5px 0 rgba(255, 228, 214, 0.5);
  }
  .hero-cta .pw-halo-pulse[data-lit="true"] {
    animation: none;
    opacity: 0.6;
  }
  /* Аврора на телефонах — статичная (беречь GPU) */
  .site-bg .aurora-blob {
    animation: none !important;
  }
}

/* Финальный кадр хиро: подложка-скрим и усиленное свечение, чтобы кнопка
   и текст читались поверх живого видео */
.hero-payoff::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    58% 52% at 50% 52%,
    rgba(11, 9, 8, 0.72) 0%,
    rgba(11, 9, 8, 0.38) 55%,
    transparent 100%
  );
  pointer-events: none;
}
.hero-payoff > * {
  position: relative;
}
.hero-cta .pw-halo[data-lit="true"] {
  opacity: 1;
  transform: scale(1.2);
}
.hero-cta .pw-body[data-lit="true"] {
  box-shadow:
    0 0 90px rgba(226, 122, 88, 0.6),
    0 0 180px rgba(212, 98, 61, 0.38),
    inset 0 1.5px 0 rgba(255, 228, 214, 0.5),
    inset 0 -12px 24px rgba(120, 40, 20, 0.28);
}

/* ---------- Карточка тарифа ---------- */

.plan-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition:
    transform var(--dur-base) var(--ease-ios),
    box-shadow var(--dur-base) var(--ease-ios),
    border-color var(--dur-base) var(--ease-ios);
}
/* Наведение: карточка приподнимается, растёт и подсвечивается */
.plan-card:hover {
  transform: translateY(-6px) scale(1.02);
  z-index: 1;
  border-color: rgba(236, 157, 131, 0.4);
  box-shadow:
    var(--glass-shadow),
    0 0 32px rgba(212, 98, 61, 0.22),
    var(--inner-top-light);
}
.plan-card.lg--ember:hover {
  box-shadow:
    var(--ember-glow-lg),
    inset 0 1px 0 rgba(255, 220, 205, 0.35);
}

/* Ленточка на углу карточки («популярно», «лучшая цена») */
.plan-ribbon {
  position: absolute;
  top: 32px;
  right: -40px;
  z-index: 2;
  width: 210px;
  transform: rotate(45deg);
  text-align: center;
  padding: 6px 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-on-ember);
  background: linear-gradient(180deg, var(--ember-300), var(--ember-500));
  box-shadow:
    0 4px 14px rgba(212, 98, 61, 0.45),
    inset 0 1px 0 rgba(255, 235, 220, 0.55);
}
/* Карточка с ленточкой: чуть больше воздуха сверху */
.plan-card:has(.plan-ribbon) {
  padding-top: calc(var(--space-5) + 14px);
}

/* ---------- Прочее ---------- */

/* QR на стекле — светлая подложка обязательна для сканера */
.qr-plate {
  border-radius: var(--radius-md);
  background: #f4efea;
  padding: 10px;
  display: inline-block;
  line-height: 0;
}

/* Аккуратный скролл для горизонтальных лент */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}