/* === MARS VPN FINAL PREMIUM DESIGN === */

:root {
  --bg-1: #060511;
  --bg-2: #130b2d;
  --bg-3: #26105b;

  --orange: #ff8a00;
  --orange-2: #ff4d1d;
  --gold: #ffd166;
  --violet: #7b4dff;
  --cyan: #38d8ff;

  --text: #ffffff;
  --muted: rgba(255,255,255,.72);
  --soft: rgba(255,255,255,.12);
  --border: rgba(255,255,255,.18);

  --card: rgba(255,255,255,.095);
  --shadow: 0 28px 90px rgba(0,0,0,.50);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 !important;
  min-height: 100% !important;
  color: var(--text) !important;
  font-family: "Manrope", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #060511 !important;
  overflow-x: hidden !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,138,0,.28), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(56,216,255,.22), transparent 30%),
    radial-gradient(circle at 50% 88%, rgba(123,77,255,.38), transparent 42%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 48%, var(--bg-3) 100%) !important;
}

body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .48 !important;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.48) 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.18) 1px, transparent 1.8px),
    linear-gradient(120deg, transparent 0 46%, rgba(255,255,255,.06) 50%, transparent 54% 100%) !important;
  background-size: 64px 64px, 124px 124px, 100% 100% !important;
  background-position: 0 0, 32px 42px, 0 0 !important;
  animation: marsStars 22s linear infinite !important;
}

@keyframes marsStars {
  0% { background-position: 0 0, 32px 42px, 0 0; }
  100% { background-position: 64px 64px, 156px 166px, 0 0; }
}

.page,
.wrapper,
.container,
main,
.subscription-page {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 820px) !important;
  margin: 0 auto !important;
  padding: 44px 16px 92px !important;
  text-align: center !important;
}

.logo,
.brand,
.header-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 auto 34px !important;
  text-transform: uppercase !important;
}

.logo img,
.brand img,
.header-logo img {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 24px rgba(255,138,0,.62)) !important;
  animation: marsFloat 4.6s ease-in-out infinite !important;
}

@keyframes marsFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.logo span,
.brand span,
.header-logo span {
  font-family: "Unbounded", "Manrope", sans-serif !important;
  font-size: clamp(32px, 7.8vw, 58px) !important;
  line-height: .95 !important;
  font-weight: 900 !important;
  letter-spacing: -.045em !important;
  color: #fff !important;
  text-shadow: 0 0 28px rgba(123,77,255,.50) !important;
}

.logo span:last-child,
.brand span:last-child,
.header-logo span:last-child,
.orange,
.accent,
h1 span,
h1 strong {
  color: var(--orange) !important;
  text-shadow: 0 0 24px rgba(255,138,0,.62) !important;
}

h1 {
  margin: 0 auto 22px !important;
  max-width: 760px !important;
  font-family: "Unbounded", "Manrope", sans-serif !important;
  font-size: clamp(38px, 8.7vw, 70px) !important;
  line-height: .98 !important;
  font-weight: 900 !important;
  letter-spacing: -.065em !important;
  color: #fff !important;
  text-align: center !important;
  text-wrap: balance !important;
  text-shadow: 0 8px 36px rgba(0,0,0,.58) !important;
}

h2 {
  margin: 0 0 18px !important;
  font-family: "Unbounded", "Manrope", sans-serif !important;
  font-size: clamp(28px, 6.5vw, 46px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -.052em !important;
  color: #fff !important;
  text-wrap: balance !important;
}

h3 {
  font-family: "Unbounded", "Manrope", sans-serif !important;
  font-size: clamp(22px, 5vw, 34px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.04em !important;
}

p,
.subtitle,
.description {
  max-width: 700px !important;
  margin: 0 auto 32px !important;
  color: var(--muted) !important;
  font-size: clamp(17px, 4.3vw, 24px) !important;
  line-height: 1.48 !important;
  font-weight: 700 !important;
  letter-spacing: -.018em !important;
  text-wrap: balance !important;
}

.card,
.subscription-card,
.trial-card,
.panel,
.block,
.secondary-card,
.bot-card,
.support-card,
.info-card {
  position: relative !important;
  overflow: hidden !important;
  margin: 26px auto !important;
  padding: 34px 22px !important;
  border-radius: 36px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.145), rgba(255,255,255,.055)),
    radial-gradient(circle at 50% 0%, rgba(255,138,0,.15), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(56,216,255,.12), transparent 38%) !important;
  border: 1px solid var(--border) !important;
  box-shadow:
    var(--shadow),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.card::before,
.subscription-card::before,
.trial-card::before,
.panel::before,
.block::before,
.secondary-card::before,
.bot-card::before,
.support-card::before,
.info-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,.10) 18%, transparent 36%),
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.10), transparent 28%) !important;
  transform: translateX(-120%) !important;
  animation: marsSoftShine 6.4s ease-in-out infinite !important;
}

@keyframes marsSoftShine {
  0%,45% { transform: translateX(-120%); opacity: 0; }
  55% { opacity: .95; }
  80%,100% { transform: translateX(120%); opacity: 0; }
}

.card > *,
.subscription-card > *,
.trial-card > *,
.panel > *,
.block > *,
.secondary-card > *,
.bot-card > *,
.support-card > *,
.info-card > * {
  position: relative !important;
  z-index: 2 !important;
}

.app-icon,
.rocket-icon,
.icon-box {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 34px !important;
  background:
    linear-gradient(145deg, rgba(255,138,0,.23), rgba(123,77,255,.18)),
    rgba(255,255,255,.075) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 18px 48px rgba(0,0,0,.36),
    0 0 38px rgba(255,138,0,.28) !important;
  animation: marsFloat 4.6s ease-in-out infinite !important;
}

.app-icon img,
.rocket-icon img,
.icon-box img {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
}

button,
.btn,
.button,
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 90px !important;
  border: 0 !important;
  border-radius: 30px !important;
  padding: 22px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: linear-gradient(135deg, var(--orange-2) 0%, var(--orange) 50%, var(--gold) 100%) !important;
  color: #fff !important;
  text-decoration: none !important;
  text-align: center !important;
  font-family: "Unbounded", "Manrope", sans-serif !important;
  font-size: clamp(18px, 4.8vw, 30px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -.04em !important;
  text-transform: none !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.28) !important;
  box-shadow:
    0 20px 52px rgba(255,117,24,.35),
    0 0 0 1px rgba(255,255,255,.16) inset !important;
  cursor: pointer !important;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease !important;
}

button::before,
.btn::before,
.button::before,
.main-btn::before,
.primary-btn::before,
.subscribe-btn::before,
.telegram-btn::before,
.support-btn::before,
a.btn::before,
a.button::before {
  content: "" !important;
  position: absolute !important;
  top: -40% !important;
  bottom: -40% !important;
  left: -48% !important;
  width: 38% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent) !important;
  transform: rotate(18deg) !important;
  animation: marsButtonShine 3.4s ease-in-out infinite !important;
}

@keyframes marsButtonShine {
  0% { left: -55%; opacity: 0; }
  25% { opacity: .85; }
  55% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

button:hover,
.btn:hover,
.button:hover,
.main-btn:hover,
.primary-btn:hover,
.subscribe-btn:hover,
.telegram-btn:hover,
.support-btn:hover {
  transform: translateY(-3px) !important;
  filter: saturate(1.08) brightness(1.05) !important;
  box-shadow:
    0 26px 70px rgba(255,117,24,.48),
    0 0 0 1px rgba(255,255,255,.22) inset !important;
}

.telegram-btn,
.support-btn {
  background: linear-gradient(135deg, #4b6bff 0%, var(--violet) 48%, var(--cyan) 100%) !important;
  box-shadow:
    0 20px 54px rgba(90,92,255,.34),
    0 0 0 1px rgba(255,255,255,.16) inset !important;
}

.note,
.limit,
.small-text,
.hint {
  margin: 20px auto 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: clamp(14px, 3.8vw, 19px) !important;
  line-height: 1.42 !important;
  font-weight: 650 !important;
  letter-spacing: -.012em !important;
}

input,
textarea,
select {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-size: 16px !important;
  font-weight: 650 !important;
}

b,
strong {
  font-weight: 900 !important;
}

@media (max-width: 520px) {
  .page,
  .wrapper,
  .container,
  main,
  .subscription-page {
    padding: 36px 14px 84px !important;
  }

  .logo,
  .brand,
  .header-logo {
    margin-bottom: 28px !important;
  }

  .logo img,
  .brand img,
  .header-logo img {
    width: 54px !important;
    height: 54px !important;
  }

  .logo span,
  .brand span,
  .header-logo span {
    font-size: clamp(30px, 8.4vw, 44px) !important;
  }

  h1 {
    font-size: clamp(34px, 9.3vw, 52px) !important;
    letter-spacing: -.07em !important;
  }

  h2 {
    font-size: clamp(25px, 7.2vw, 38px) !important;
  }

  p,
  .subtitle,
  .description {
    font-size: clamp(16px, 4.55vw, 20px) !important;
    line-height: 1.44 !important;
  }

  .card,
  .subscription-card,
  .trial-card,
  .panel,
  .block,
  .secondary-card,
  .bot-card,
  .support-card,
  .info-card {
    padding: 28px 17px !important;
    border-radius: 30px !important;
  }

  button,
  .btn,
  .button,
  .main-btn,
  .primary-btn,
  .subscribe-btn,
  .telegram-btn,
  .support-btn,
  a.btn,
  a.button {
    min-height: 82px !important;
    border-radius: 25px !important;
    padding: 19px 18px !important;
    font-size: clamp(16px, 4.75vw, 22px) !important;
  }

  .app-icon,
  .rocket-icon,
  .icon-box {
    width: 106px !important;
    height: 106px !important;
    border-radius: 28px !important;
  }
}

/* === MARS VPN BUTTON TYPOGRAPHY FIX === */

button,
.btn,
.button,
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button,
a[class*="btn"],
a[class*="button"] {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-size: clamp(18px, 4.4vw, 26px) !important;
  line-height: 1.22 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  text-transform: none !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
  text-wrap: balance !important;
}

button *,
.btn *,
.button *,
.main-btn *,
.primary-btn *,
.subscribe-btn *,
.telegram-btn *,
.support-btn *,
a.btn *,
a.button *,
a[class*="btn"] *,
a[class*="button"] * {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-weight: 850 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
}

@media (max-width: 520px) {
  button,
  .btn,
  .button,
  .main-btn,
  .primary-btn,
  .subscribe-btn,
  .telegram-btn,
  .support-btn,
  a.btn,
  a.button,
  a[class*="btn"],
  a[class*="button"] {
    font-size: clamp(16px, 4.45vw, 20px) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.02em !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* === MARS VPN ALL BUTTON FONT SIZE NORMALIZATION === */

/* Все кнопки */
button,
.btn,
.button,
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button,
a[class*="btn"],
a[class*="button"] {
  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-size: clamp(17px, 4vw, 24px) !important;
  line-height: 1.18 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Маленькие кнопки выбора системы */
.os-btn,
.platform-btn,
.system-btn,
.tab,
.tabs button,
.platforms button,
.platform-buttons button,
.os-buttons button,
.system-buttons button,
button[data-os],
button[data-platform],
[data-os],
[data-platform] {
  min-height: 92px !important;
  height: 92px !important;
  padding: 12px 10px !important;

  font-family: "Manrope", "Inter", system-ui, sans-serif !important;
  font-size: clamp(18px, 3.6vw, 26px) !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Текст внутри кнопок выбора системы */
.os-btn *,
.platform-btn *,
.system-btn *,
.tab *,
.tabs button *,
.platforms button *,
.platform-buttons button *,
.os-buttons button *,
.system-buttons button *,
button[data-os] *,
button[data-platform] *,
[data-os] *,
[data-platform] * {
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Если кнопки выбора системы лежат в сетке — сделать колонки шире и ровнее */
.tabs,
.platforms,
.platform-buttons,
.os-buttons,
.system-buttons {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

/* Кнопки с длинным текстом */
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button {
  font-size: clamp(18px, 4.2vw, 26px) !important;
  line-height: 1.2 !important;
}

/* Мобильная версия */
@media (max-width: 520px) {
  button,
  .btn,
  .button,
  .main-btn,
  .primary-btn,
  .subscribe-btn,
  .telegram-btn,
  .support-btn,
  a.btn,
  a.button,
  a[class*="btn"],
  a[class*="button"] {
    font-size: clamp(15px, 4.1vw, 19px) !important;
    line-height: 1.18 !important;
  }

  .tabs,
  .platforms,
  .platform-buttons,
  .os-buttons,
  .system-buttons {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .os-btn,
  .platform-btn,
  .system-btn,
  .tab,
  .tabs button,
  .platforms button,
  .platform-buttons button,
  .os-buttons button,
  .system-buttons button,
  button[data-os],
  button[data-platform],
  [data-os],
  [data-platform] {
    min-height: 72px !important;
    height: 72px !important;
    padding: 8px 5px !important;
    font-size: clamp(13px, 3.45vw, 16px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.045em !important;
  }
}

/* === MARS VPN COMPACT BUTTON FONT FINAL === */

/* Все кнопки — компактный читаемый шрифт */
button,
.btn,
.button,
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button,
a[class*="btn"],
a[class*="button"] {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-size: clamp(14px, 3.4vw, 21px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Весь текст внутри кнопок */
button *,
.btn *,
.button *,
.main-btn *,
.primary-btn *,
.subscribe-btn *,
.telegram-btn *,
.support-btn *,
a.btn *,
a.button *,
a[class*="btn"] *,
a[class*="button"] * {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  white-space: inherit !important;
  word-break: inherit !important;
  overflow-wrap: inherit !important;
  hyphens: none !important;
}

/* Кнопки выбора системы: iOS / Android / macOS / Windows */
.os-btn,
.platform-btn,
.system-btn,
.tab,
.tabs button,
.platforms button,
.platform-buttons button,
.os-buttons button,
.system-buttons button,
button[data-os],
button[data-platform],
[data-os],
[data-platform] {
  font-family: "Inter", "Manrope", system-ui, sans-serif !important;
  font-size: clamp(13px, 2.8vw, 19px) !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;

  min-height: 78px !important;
  height: 78px !important;
  padding: 8px 6px !important;

  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Длинные CTA-кнопки */
.main-btn,
.primary-btn,
.subscribe-btn,
.telegram-btn,
.support-btn,
a.btn,
a.button {
  font-size: clamp(15px, 3.6vw, 22px) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}

/* Очень маленькие экраны */
@media (max-width: 520px) {
  button,
  .btn,
  .button,
  .main-btn,
  .primary-btn,
  .subscribe-btn,
  .telegram-btn,
  .support-btn,
  a.btn,
  a.button,
  a[class*="btn"],
  a[class*="button"] {
    font-size: clamp(13px, 3.65vw, 17px) !important;
    line-height: 1.18 !important;
  }

  .os-btn,
  .platform-btn,
  .system-btn,
  .tab,
  .tabs button,
  .platforms button,
  .platform-buttons button,
  .os-buttons button,
  .system-buttons button,
  button[data-os],
  button[data-platform],
  [data-os],
  [data-platform] {
    min-height: 64px !important;
    height: 64px !important;
    padding: 6px 4px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    line-height: 1.05 !important;
  }
}

/* === MARS VPN EXTRA COMPACT SYSTEM BUTTONS === */

/* Сетка систем */
.tabs,
.platforms,
.platform-buttons,
.os-buttons,
.system-buttons {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

/* Все маленькие кнопки выбора системы */
.os-btn,
.platform-btn,
.system-btn,
.tab,
.tabs button,
.platforms button,
.platform-buttons button,
.os-buttons button,
.system-buttons button,
button[data-os],
button[data-platform],
[data-os],
[data-platform] {
  min-width: 0 !important;
  min-height: 58px !important;
  height: 58px !important;
  padding: 4px 3px !important;

  font-family: Arial, "Inter", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* Текст внутри маленьких кнопок */
.os-btn *,
.platform-btn *,
.system-btn *,
.tab *,
.tabs button *,
.platforms button *,
.platform-buttons button *,
.os-buttons button *,
.system-buttons button *,
button[data-os] *,
button[data-platform] *,
[data-os] *,
[data-platform] * {
  font-family: Arial, "Inter", system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

/* На мобильных ещё компактнее */
@media (max-width: 520px) {
  .tabs,
  .platforms,
  .platform-buttons,
  .os-buttons,
  .system-buttons {
    gap: 6px !important;
  }

  .os-btn,
  .platform-btn,
  .system-btn,
  .tab,
  .tabs button,
  .platforms button,
  .platform-buttons button,
  .os-buttons button,
  .system-buttons button,
  button[data-os],
  button[data-platform],
  [data-os],
  [data-platform] {
    min-height: 54px !important;
    height: 54px !important;
    padding: 3px 2px !important;
    font-size: 11.5px !important;
    letter-spacing: -0.045em !important;
  }

  .os-btn *,
  .platform-btn *,
  .system-btn *,
  .tab *,
  .tabs button *,
  .platforms button *,
  .platform-buttons button *,
  .os-buttons button *,
  .system-buttons button *,
  button[data-os] *,
  button[data-platform] *,
  [data-os] *,
  [data-platform] * {
    font-size: 11.5px !important;
    letter-spacing: -0.045em !important;
  }
}