/* ==========================
   🎨 ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ
   ========================== */
:root {
  --primary: #06b6d4;             /* Основной акцентный цвет (голубой) */
  --primary-hover: #0ea5e9;       /* Акцентный цвет при наведении */
  --bg: #0f172a;                  /* Основной фон страницы (тёмный) */
  --bg-light: #1e293b;            /* Более светлый фон (для карточек) */
  --text: #f1f5f9;                /* Основной цвет текста */
  --muted: #94a3b8;               /* Приглушённый текст (подписи, второстепенное) */
  --border: #334155;              /* Цвет границ */
  --radius: 10px;                 /* Радиус скругления углов */
  --shadow: 0 4px 12px rgba(0,0,0,0.3); /* Общая тень для карточек */
  --transition: all 0.2s ease;    /* Стандартная анимация для hover */
  --font-heading: 'Inter', system-ui, sans-serif; /* Шрифт заголовков */
  --font-body: 'Inter', system-ui, sans-serif;    /* Шрифт основного текста */
}

/* ==========================
   🔧 БАЗОВЫЕ СБРОСЫ
   ========================== */
* {
  margin: 0;                      /* убираем внешние отступы */
  padding: 0;                     /* убираем внутренние отступы */
  box-sizing: border-box;          /* чтобы padding и border входили в размеры */
}

body {
  font-family: var(--font-body);   /* общий шрифт текста */
  background: var(--bg);           /* тёмный фон */
  color: var(--text);              /* светлый текст */
  line-height: 1.5;                /* межстрочный интервал */
  -webkit-font-smoothing: antialiased; /* сглаживание шрифтов */
  padding: 0 1rem;                 /* небольшой отступ слева/справа */
}

.app {
  display: flex;
  flex-direction: column;          /* вертикальная колонка */
  min-height: 100vh;               /* высота = весь экран */
  width: 100%;                     /* ширина 100% */
}

/* ==========================
   🔝 HEADER (шапка)
   ========================== */
.header {
  width: 100%;
  text-align: center;
  margin-bottom: 0.5rem; /* небольшой отступ к следующему контенту */
}

.header h1 {
  font-size: 2.2rem;       /* размер, чтобы было заметно, но компактно */
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #06b6d4;          /* основной синий */
  text-shadow:
    0 0 2px rgba(6,182,212,0.6),
    0 0 5px rgba(6,182,212,0.4); /* лёгкое свечение */
  margin-bottom: 0.2rem;    /* минимальный отступ к описанию */
  transition: transform 0.2s ease, text-shadow 0.2s ease;
}

.header h1:hover {
  transform: scale(1.03);
  text-shadow:
    0 0 6px rgba(6,182,212,0.7),
    0 0 10px rgba(6,182,212,0.5);
}


/* ==========================
   📦 ОБЩИЙ КОНТЕЙНЕР
   ========================== */
.content-wrapper {
  max-width: 1000px;               /* ограничение ширины */
  width: 100%;                     /* растягивается на всю доступную ширину */
  margin: 0 auto;                  /* выравнивание по центру */
  padding: 0 20rem;                /* огромные боковые отступы */
  display: flex;
  flex-direction: column;          /* элементы идут колонкой */
  gap: 1.5rem;                     /* расстояние между блоками */
}

/* ==========================
   ✅ СПИСОК ПРЕИМУЩЕСТВ VPN
   ========================== */
.vpn-benefits {
  width: 100%;
  padding: 2rem;                   /* большие внутренние отступы */
  margin-bottom: 0.9rem;           /* отступ до след. блока */
  background: var(--bg-light);     /* светлый фон */
  border: 1px solid var(--border); /* рамка */
  border-radius: var(--radius);    /* скругление */
  box-shadow: var(--shadow);       /* тень */
  color: var(--muted);             /* серый текст */
  font-size: 1.1rem;
  display: grid;                   /* сетка для элементов */
  gap: 0.6rem;                     /* расстояние между пунктами */
  list-style: none;                /* убираем маркеры списка */
}

a {
  color: var(--primary);       /* основной цвет ссылки */
  text-decoration: none;       /* убираем подчеркивание */
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-hover); /* подсветка при наведении */
}

.vpn-benefits li {
  position: relative;              /* чтобы разместить "✔" через ::before */
  padding-left: 1.4rem;            /* место под иконку */
}

.vpn-benefits li::before {
  content: "✔";                    /* галочка */
  position: absolute;
  left: 0; top: 0;                 /* позиция слева */
  color: var(--primary);           /* голубая */
  font-size: 0.9rem;
  line-height: 1.2;
}

/* ==========================
   🧩 ОСНОВНАЯ СЕТКА (тарифы + оплата)
   ========================== */
.main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* две колонки */
  gap: 0.9rem;                     /* расстояние между ними */
  width: 100%;
  margin-bottom: 0.9rem;           /* отступ до футера */
}

/* ==========================
   📂 СЕКЦИИ (тарифы и оплата)
   ========================== */
.plans-section,
.payment-section {
  background: var(--bg-light);     /* светлый фон */
  border-radius: var(--radius);    /* скруглённые углы */
  padding: 1rem;                   /* внутренние отступы */
  border: 1px solid var(--border); /* рамка */
  box-shadow: var(--shadow);       /* тень */
  display: flex;
  flex-direction: column;          /* элементы идут колонкой */
  justify-content: flex-start;
}

.section-title {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 1rem;
}

/* ==========================
   💳 ТАРИФНЫЕ ПЛАНЫ
   ========================== */
.plans {
  display: grid;
  gap: 0.8rem;                     /* расстояние между тарифами */
}

.plan {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem 0.7rem;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  justify-content: center;  /* центрируем по горизонтали */
  align-items: center;      /* по вертикали */
  gap: 0.4rem;              /* расстояние между названием и ценой */
  text-align: center;

  /* лёгкое постоянное свечение */
  box-shadow: 0 5px 8px rgba(6,182,212,0.15);
}

.plan h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--primary)
}

.price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  margin: 0;
}

.plan:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 6px 15px rgba(6,182,212,0.25); /* усиленное свечение при наведении */
}

.plan.selected {
  border: 2px solid var(--primary);       /* яркая, но не кричащая рамка */
  background: var(--bg-light);             /* фон такой же, как у других, но с легким выделением */
  box-shadow: 0 4px 12px rgba(6,182,212,0.25); /* мягкая тень */
  transform: translateY(-1px);             /* немного выше остальных */
}

.plan.selected h3,
.plan.selected .price {
  color: var(--primary);                  /* текст и цена выделены голубым */
}

.plan .price::before {
  content: "/";               /* добавляем разделитель после цены */
  margin: 0 0.3rem;           /* отступ слева и справа */
  color: var(--muted);        /* можно серым сделать */
}


/* ==========================
   📝 ФОРМА ОПЛАТЫ
   ========================== */
.payment-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;                     /* расстояние между полями */
  flex: 1;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;                     /* расстояние между label и input */
}

.form-group label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--muted);
}

input {
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  transition: var(--transition);
}

input:focus {
  outline: none;                   /* убираем стандартную обводку */
  border-color: var(--primary);    /* голубая рамка */
  box-shadow: 0 0 0 1px rgba(6,182,212,0.3); /* свечение */
}

.selected-plan {
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
  font-weight: 600;
  color: var(--primary);
  background: rgba(6,182,212,0.05); /* лёгкий голубой фон */
}

/* ==========================
   🔘 КНОПКИ
   ========================== */
.actions {
  display: flex;
  gap: 0.5rem;                     /* расстояние между кнопками */
  flex-wrap: wrap;                 /* перенос на новую строку если не влезают */
}

.btn {
  flex: 1;                         /* равномерное распределение */
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius);
  border: none;
  background: var(--primary);
  color: #0f172a;                  /* тёмный текст на голубом фоне */
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn:hover {
  background: var(--primary-hover);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

.status {
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  margin-top: auto;
}

/* ==========================
   📑 FOOTER
   ========================== */
.footer {
  width: 100%;
  text-align: center;
  padding: 1rem;
  background: #111827;             /* чуть темнее чем остальной фон */
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

/* ==========================
   📱 АДАПТИВНОСТЬ
   ========================== */
@media(max-width:1024px) {
  .main-grid {
    grid-template-columns:1fr;     /* одна колонка вместо двух */
  }
}

@media(max-width:600px) {
  .header h1 { font-size:1.5rem; } /* уменьшаем заголовок */
  .header .lead { font-size:0.85rem; }
  .section-title { font-size:1.2rem; }
  .btn { flex: 100%; }             /* кнопки на всю ширину */

  .vpn-benefits {
    max-width:100%;
    font-size:1rem;
    padding:0.8rem;
  }
  .plan { padding:0.8rem; }
  .payment-form { gap:0.6rem; }
}



/* ==========================
   🔹 Блок WireGuard — как VPN benefits, но без галочек
   ========================== */

.wireguard-info,
.wireguard-steps {
  width: 100%;                     /* растягиваем на всю ширину */
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;                   /* совпадает с vpn-benefits */
  color: var(--muted);
  font-size: 1.1rem;               /* совпадает с vpn-benefits */
  line-height: 1.4;
  display: grid;                    /* содержимое как сетка */
  gap: 0.6rem;                      /* расстояние между пунктами */
}

/* Заголовки внутри колонок */
.wireguard-info .section-title,
.wireguard-steps .section-title {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
  text-align: center;
  color: var(--text);
}

/* Списки с точками */
.wireguard-info ul,
.wireguard-steps ul,
.wireguard-steps ol {
  list-style: disc;                 /* обычные bullets вместо галочек */
  padding-left: 1.5rem;             /* отступ слева */
  margin: 0 0 1rem 0;               /* отступ снизу */
    text-align: left;
}

.wireguard-info ul li,
.wireguard-steps li {
  position: static;                 /* убираем absolute */
  padding-left: 0;                  /* нет дополнительного отступа для иконки */
  margin-bottom: 0.6rem;            /* промежуток между пунктами */
  font-size: 1.1rem;                /* совпадает с текстом VPN benefits */
  line-height: 1.4;
}

.wireguard-steps li::before {
  content: none;                    /* убираем галочки */
}

/* Ссылки */
.wireguard-steps a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.wireguard-steps a:hover {
  color: var(--primary-hover);
}

/* ==========================
   Мобильные устройства
   ========================== */
   @media(max-width:600px) {
  .content-wrapper {
    padding: 0 1rem; /* как у body, чтобы блоки не выходили за экран */
  }

  .wireguard-section.main-grid {
    grid-template-columns: 1fr; /* одна колонка */
    gap: 0.6rem;                /* как vpn-benefits */
    width: 100%;
  }

  .wireguard-info,
  .wireguard-steps {
    padding: 0.8rem;      /* внутренние отступы */
    font-size: 0.85rem;   /* размер текста */
    line-height: 1.3;     /* межстрочный интервал */
    max-width: 100%;      /* ширина 100% */
    margin: 0;            /* сбросить внешние отступы */
    display: block;       /* убрать grid у блока, чтобы не растягивался */
  }
}


/* ==========================
   📱 АДАПТИВНОСТЬ
   ========================== */

/* Таблетки и узкие десктопы */
@media(max-width:1024px) {
  .main-grid {
    grid-template-columns: 1fr;  /* одна колонка */
  }
}

/* Мобильные устройства */
@media(max-width:600px) {
  /* === Шапка === */
  .header {
    padding: 0.6rem 0.4rem;
    margin-bottom: 0.8rem;
  }
  .header h1 {
    font-size: 1.8rem;
  }
  .header .lead {
    font-size: 0.85rem;
    line-height: 1.3;
  }

  /* === Общий контейнер === */
  .content-wrapper {
    padding: 0 0.05rem;   /* убираем огромные боковые отступы */
    gap: 1rem;         /* уменьшаем расстояние между блоками */
  }

  /* === VPN benefits и WireGuard === */
  .vpn-benefits,
  .wireguard-info,
  .wireguard-steps {
    padding: 0.8rem;    /* уменьшенные внутренние отступы */
    font-size: 0.85rem; /* уменьшенный текст */
    line-height: 1.3;   /* плотный межстрочный интервал */
    max-width: 100%;
    margin: 0;
    display: block;     /* убрать grid, чтобы блоки не растягивались */
    gap: 0.4rem;        /* расстояние между элементами */
  }

  /* Списки внутри блоков */
  .vpn-benefits li,
  .wireguard-info ul li,
  .wireguard-steps li {
    font-size: 0.85rem;
    line-height: 1.3;
    padding-left: 1.2rem; /* небольшой отступ под галочку/пункт */
    margin-bottom: 0.3rem;   /* уменьшаем отступ между пунктами */
    padding-left: 0rem;      /* меньшее расстояние слева под галочку/точку */
  }

  /* === Основная сетка (тарифы + оплата) === */
  .main-grid {
    grid-template-columns: 1fr; /* одна колонка */
    gap: 0.8rem;                /* расстояние между блоками */
  }

  /* === Тарифные планы === */
  .plan {
    padding: 0.8rem;
  }
  .plan h3 {
    font-size: 1rem;
  }
  .price {
    font-size: 1rem;
  }

  /* === Форма оплаты === */
  .payment-form {
    gap: 0.6rem;
  }

  /* === Кнопки === */
  .btn {
    flex: 100%; /* кнопки на всю ширину */
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
  }

  /* === Секции === */
  .plans-section,
  .payment-section {
    padding: 0.8rem;
  }

  /* === Заголовки секций === */
  .section-title {
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
  }

  /* === WireGuard списки без галочек === */
  .wireguard-info ul,
  .wireguard-steps ul,
  .wireguard-steps ol {
    padding-left: 1.2rem;
  }
}

@media (max-width: 600px) {
  /* ==========================
     СЕТКА ТАРИФОВ
     ========================== */
  .plans {
    display: flex;               /* делаем flex, чтобы карточки шли колонкой */
    flex-direction: column;
    gap: 0.6rem;                 /* расстояние между тарифами */
  }

  .plan,
  .plan.selected {
    display: flex;
    flex-direction: row;
    justify-content: center;      /* по центру горизонтально */
    align-items: center;          /* по центру вертикально */
    padding: 0.8rem 1rem;
    font-size: 1rem;
    gap: 0.3rem;                  /* расстояние между названием и ценой */
    text-align: center;
    color: var(--primary);        /* весь текст синим */
  }

  /* Заголовки и цены */
  .plan h3,
  .plan .price,
  .plan.selected h3,
  .plan.selected .price {
    margin: 0;
    white-space: nowrap;           /* текст в одну строку */
  }

  /* Подсветка выбранного плана */
  .plan.selected {
    box-shadow: 0 4px 25px rgba(6,182,212,0.25);
    background: linear-gradient(180deg,#1e293b,#0f172a);
  }

  /* ==========================
     ФОРМА ОПЛАТЫ
     ========================== */
  .payment-form {
    gap: 0.5rem;                 /* меньше расстояния между полями */
  }

  .payment-form input,
  .selected-plan {
    font-size: 1rem;           /* текст под размер экрана */
    padding: 0.5rem 0.8rem;      /* компактные поля */
  }

  .actions {
    flex-direction: column;      /* кнопки одна под другой */
    gap: 0.5rem;
  }

  .btn {
    width: 100%;                 /* кнопки во всю ширину */
    padding: 0.8rem 1.2rem;
    font-size: 0.9rem;
  }
}





.lead {
  width: 100%;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2rem;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.4;
  text-align: center;
  margin-bottom: 0.6rem;

  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
  transition: all 0.3s ease;
}

.lead a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.lead a:hover {
  color: var(--primary-hover);
}

/* Мобильная адаптация */
@media (max-width: 600px) {
  .lead {
    padding: 1rem;
    font-size: 0.95rem;
    line-height: 1.3;
  }
}