/* Тёмная тема лендинга HIT VPN — под цвета логотипа.
   Список классов собран из самого index.html, а не на глаз: покрыты все,
   которые реально задают цвет. Прошлая попытка провалилась именно потому,
   что пропустила полупрозрачные варианты (tw-text-dark-600/60) и свои
   классы карточек — текст оставался тёмным на тёмном. */

:root {
  --hit-bg: #04091c;
  --hit-surface: #0a1330;
  --hit-surface-2: #0c1636;
  --hit-text: #e6ecfb;
  --hit-muted: #93a6cc;
  --hit-blue: #2f6fe8;
  --hit-blue-bright: #4a9bff;
  --hit-glow: #72b7ff;
  --hit-border: rgba(125, 170, 255, 0.16);
}

html,
body {
  background-color: var(--hit-bg) !important;
  color: var(--hit-text) !important;
}

body {
  background-image:
    radial-gradient(900px 460px at 50% -10%, rgba(47, 111, 232, 0.18), transparent 62%),
    radial-gradient(640px 380px at 100% 12%, rgba(74, 155, 255, 0.09), transparent 70%) !important;
  background-attachment: fixed !important;
}

/* ── Поверхности ── */
.tw-bg-white,
.tw-bg-light-400 {
  background-color: var(--hit-surface) !important;
  border: 1px solid var(--hit-border);
}

.tw-bg-white\/5 {
  background-color: rgba(125, 170, 255, 0.05) !important;
}

/* Класс с произвольным значением rgba(20,20,43,.12) — берём по подстроке,
   иначе пришлось бы экранировать скобки и запятые. */
[class*="tw-bg-[rgba"] {
  background-color: var(--hit-surface-2) !important;
}

/* ── Текст ── */
.tw-text-dark-600,
.tw-text-dark-700,
.tw-text-dark-800 {
  color: var(--hit-text) !important;
}

/* Именно эти полупрозрачные варианты и стали невидимыми в прошлый раз */
.tw-text-dark-600\/60,
.tw-text-dark-600\/70,
.tw-text-secondary-900 {
  color: var(--hit-muted) !important;
}

.tw-fill-dark-600\/60,
.tw-fill-secondary-900 {
  fill: var(--hit-muted) !important;
}

/* ── Акценты ── */
.tw-bg-primary-600 {
  background-color: var(--hit-blue) !important;
}

.tw-fill-primary-600 {
  fill: var(--hit-glow) !important;
}

/* ── Границы ── */
.tw-border-dark-600\/10,
.tw-border-dark-600\/20,
.tw-border-secondary-500,
[class*="tw-border-[rgba"] {
  border-color: var(--hit-border) !important;
}

/* ── Карточка «Как подключиться»: свой класс со светлым градиентом ── */
.vpn-instructions-card {
  background: linear-gradient(160deg, #0a1330 0%, #0c1636 50%, #0e1b3e 100%) !important;
  border: 1px solid var(--hit-border) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45) !important;
}

.vpn-instructions-card,
.vpn-instructions-card * {
  color: var(--hit-text) !important;
}

.vpn-instruction-step {
  background: rgba(125, 170, 255, 0.06) !important;
  border-color: var(--hit-border) !important;
}

/* ── Поля ввода ── */
input,
textarea,
select {
  background-color: var(--hit-surface-2) !important;
  color: var(--hit-text) !important;
  border-color: var(--hit-border) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--hit-muted) !important;
}

/* ── Таблица сравнения: строки читаемы, шапка выделена ── */
table {
  color: var(--hit-text) !important;
}

th {
  background-color: var(--hit-surface-2) !important;
  color: var(--hit-text) !important;
}

td,
th {
  border-color: var(--hit-border) !important;
}

/* Разделители */
hr {
  border-color: var(--hit-border) !important;
}

/* ── Блок «Пройди регистрацию и получи пробный период» ──
   Цвет текста там задан инлайном (#0f172a) — перебиваем !important,
   иначе он сливается с тёмным фоном. */
.trial-cta-text {
  color: var(--hit-text) !important;
}

.trial-cta-block {
  background: rgba(125, 170, 255, 0.06) !important;
  border-color: var(--hit-border) !important;
}

/* ── Плашка «Один VPN сразу на 2 устройства» ──
   Была светлым градиентом (инлайн + tw-from/to с произвольным значением). */
[class*="tw-from-[#eef7ff]"] {
  background: linear-gradient(135deg, #0a1330 0%, #0e1b3e 100%) !important;
  border-color: rgba(114, 183, 255, 0.35) !important;
}

[class*="tw-from-[#eef7ff]"] * {
  color: var(--hit-glow) !important;
}