/* ============================================================
   БАЗА – новый дизайн (Rick VPN) для всех страниц
   ============================================================ */
:root {
  --bg: #101010;
  --surface: #0b0b0c;
  --text: #e3e3e3;
  --text-60: rgba(227, 227, 227, 0.6);
  --text-50: rgba(227, 227, 227, 0.5);
  --line: rgba(255, 255, 255, 0.05);

  --blue-900: #003dd8;
  --blue-700: #0062f6;
  --blue-600: #00519d;
  --blue-500: #0086f3;
  --blue-400: #57a5ff;
  --blue-300: #51aff8;
  --blue-200: #5eb7ff;
  --blue-100: #b7e3ff;
  --navy: #071019;
  --navy-text: #224a6b;

  --radius-card: 12px;
  --radius-pill: 12px;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --container: 1280px;
  --gutter: 20px;

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; margin: 0; }

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ============================================================
   Общие компоненты
   ============================================================ */
.eyebrow {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--text);
}

/* Заголовки секций */
.section__head {
  max-width: 718px;
  margin: 0 auto 64px;
  text-align: center;
}
.section__head .eyebrow {
  margin-bottom: 12px;
}
.section__title {
  font-family: "Inter", var(--font);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
.section__desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-60);
}

/* Единые высоты интерактивных контролов — кнопки и инпуты в одну линию. */
:root { --control-h: 44px; --control-h-sm: 34px; --control-h-lg: 52px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--control-h);
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  background-clip: padding-box;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

.btn--ghost {
  padding: 0 20px;
  color: var(--text);
  background-color: transparent;
  border-color: var(--line);
}
.btn--ghost:hover {
  background-color: rgba(227, 227, 227, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

.btn--primary {
  color: #fff;
  background-color: var(--blue-500);
}
.btn--primary:hover {
  background-color: var(--blue-700);
}

.btn--light {
  color: var(--navy-text);
  background-color: var(--text);
}
.btn--light:hover {
  background-color: #fff;
}

.btn--dark {
  color: var(--text);
  background-color: var(--navy);
}
.btn--dark:hover {
  background-color: #0d2038;
}

.btn--lg { font-size: 16px; padding: 0 24px; min-height: var(--control-h-lg); }
.btn--lg.btn--ghost { padding: 0 24px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-60);
  background: rgba(227, 227, 227, 0.05);
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; flex: none; }
.badge--blue {
  color: var(--blue-300);
  background: rgba(81, 175, 248, 0.05);
}

/* Секция серверов/нод (лендинг) */
.countries {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.countries .container { position: relative; z-index: 1; }

.node-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}
.node-card {
  display: flex;
  flex: 0 1 148px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 18px 12px;
  border-radius: var(--radius-card);
  background: rgba(227, 227, 227, 0.03);
  border: 1px solid var(--line);
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.node-card:hover {
  background: rgba(227, 227, 227, 0.06);
  border-color: rgba(81, 175, 248, 0.25);
  transform: translateY(-2px);
}
.node-card__flag {
  width: 32px;
  height: 24px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}
.node-card__country { font-size: 14px; font-weight: 500; color: var(--text); }
.node-card__status { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.node-card__status-text { font-size: 12px; color: var(--text-60); font-variant-numeric: tabular-nums; }
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
  flex-shrink: 0;
}
.status-dot--off {
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.15);
}

/* ============================================================
   Навигация (новая)
   ============================================================ */
.navbar {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 100;
  width: min(1320px, calc(100% - 40px));
  transform: translateX(-50%);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(11, 11, 12, 0.6);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.navbar:hover {
  background: rgba(11, 11, 12, 0.75);
  box-shadow: 0 12px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.navbar__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 24px;
  min-height: 60px;
}
.navbar__brand {
  justify-self: start;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  transition: color .2s ease;
  position: relative;
}
.navbar__brand::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 12px;
  width: 30px;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .3s ease;
}
.navbar__brand:hover::after {
  opacity: 1;
}
.navbar__nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.navbar__link {
  position: relative;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-60);
  border-radius: 8px;
  transition: all .25s ease;
  text-decoration: none;
}
.navbar__link::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: var(--blue-500);
  border-radius: 2px;
  transition: width .3s ease;
}
.navbar__link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.navbar__link:hover::before {
  width: 70%;
}
.navbar__link:active {
  transform: scale(0.96);
}
.navbar__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}
.navbar__actions .btn {
  padding: 10px 18px;
  min-width: auto;
  font-size: 14px;
}
.navbar__burger {
  display: none;
  justify-self: end;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .2s ease;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.04);
}
.navbar__burger:hover {
  background: rgba(255,255,255,0.08);
}
.navbar__burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform .3s ease, opacity .3s ease, width .3s ease;
  transform-origin: center;
}
.navbar.is-open .navbar__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 22px;
}
.navbar.is-open .navbar__burger span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.navbar.is-open .navbar__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 22px;
}

/* ============================================================
   Герой и декоративные элементы (главная)
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.hero__art {
  position: absolute;
  left: 50%;
  bottom: -60px;
  width: 1920px;
  height: 1080px;
  transform: translateX(-50%) scale(0.9);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 0;
}
/* Внутри .hero__art все элементы (Рик, руки, "горизонт") расположены
   абсолютными пикселями относительно исходного холста 1920×1080 — чтобы
   вся композиция сжималась как единое целое, масштабировать нужно именно
   transform: scale (это влияет на потомков), а не width/aspect-ratio
   (это на них не влияет). Ступени ниже — запасной вариант для браузеров
   без trig-функций CSS (см. @supports ниже, который даёт плавный масштаб).
   bottom:-60px сдвигает картинку ниже (часть нижнего края уходит за
   overflow:hidden у .hero). */
@media (max-width: 1600px) { .hero__art { transform: translateX(-50%) scale(0.69); } }
@media (max-width: 1280px) { .hero__art { transform: translateX(-50%) scale(0.55); } }
@media (max-width: 1024px) { .hero__art { transform: translateX(-50%) scale(0.46); } }
/* Запасные ступени по высоте — только для планшета/десктопа (>820px),
   чтобы не влиять на мобильную фиксированную композицию ниже. */
@media (min-width: 821px) and (max-height: 750px) { .hero__art { transform: translateX(-50%) scale(0.34); } }
@media (min-width: 821px) and (max-height: 640px) { .hero__art { transform: translateX(-50%) scale(0.26); } }
@media (min-width: 821px) and (max-height: 520px) { .hero__art { transform: translateX(-50%) scale(0.18); } }

/* --- Мобильные (≤820px): фиксированный размер картинки, привязка к блоку с текстом ---
   Никаких vw/vh/tan — композиция одного размера на любом экране. Масштаб подобран
   так, чтобы руки «обрамляли» текстовый блок (как на ПК), а портал крупно
   лежал за заголовком; центрируется по .hero (высота = высота .hero__content). */
@media (max-width: 820px) {
  .hero__art {
    top: 30%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.2);
    transform-origin: center;
  }
}
@supports (width: tan(atan2(1px, 1px))) {
  /* min(...) ограничивает масштаб сразу с двух сторон: по ширине (не даёт
     картинке стать крупнее исходных 1920px на широких экранах) и по
     высоте (не даёт ей стать выше ~55% высоты вьюпорта — иначе на
     невысоких окнах она не помещается и обрезается сверху .hero). */
  .hero__art { transform: translateX(-50%) scale(min(0.9, tan(atan2(100vw, 1920px)), tan(atan2(55vh, 1080px)))); }
  /* Мобильные: тот же фиксированный масштаб, что и в фолбэке. */
  @media (max-width: 820px) {
    .hero__art { transform: translate(-50%, -50%) scale(0.2); }
  }
}
.hero__rick {
  position: absolute;
  left: -44px;
  top: -464px;
  width: 2008px;
  height: 2008px;
  background: url("../img/rick-portal.png") center / 100% 100% no-repeat;
  opacity: 0.5;
  filter: brightness(0.42) saturate(1.1);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.25) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.25) 100%);
}
.hero__hand {
  position: absolute;
  background-image: url("../img/rick-portal.png");
  background-repeat: no-repeat;
  background-size: 2008px 2008px;
  filter: brightness(0.95);
}
.hero__hand--left {
  left: 34px;
  top: 92px;
  width: 393px;
  height: 648px;
  background-position: -78px -556px;
  clip-path: path("M179.36 624.62 C149.19 582.12 120.49 542.37 82.86 489.62 C68.79 469.9 58.63 460.28 46.86 439.12 C19.28 389.54 7.41 354.68 11.86 298.12 C15.24 255.03 42.32 236.1 46.86 193.12 C53.52 129.89 -30.16 81.84 11.86 34.12 C38.67 3.67 71.01 -5.03 110.86 2.62 C150 10.13 167.96 33.65 190.36 66.62 C214.74 102.51 187.62 145.12 220.36 173.62 C250.08 199.49 286.25 171.75 319.36 193.12 C362.45 220.92 377.65 257.5 381.86 308.62 C384.69 343.12 366.55 361.04 364.86 395.62 C362.21 449.71 406.32 480.69 389.36 532.12 C376.07 572.39 356.09 593.94 319.36 615.12 C271.88 642.49 209.52 667.12 179.36 624.62 Z");
}
.hero__hand--right {
  left: 1498px;
  top: 103px;
  width: 334px;
  height: 642px;
  background-size: 1936px 1936px;
  background-position: -1487px -546px;
  transform: scale(1.0372);
  transform-origin: top left;
  clip-path: path("M56.46 372.56 C39.59 416.58 -9.16 457.1 1.51 516.2 C17.92 607.09 137.14 677.56 212.16 623.7 C232.78 608.89 241.02 595.8 254.1 574.05 C280.95 529.36 254.95 488.24 281.57 443.42 C296.96 417.5 333.63 423.33 332.67 385.57 C331.7 347.81 335.68 308.51 332.67 259.28 C330.33 221.1 324.26 200.1 322.06 161.91 C319.59 118.87 343.31 89.03 322.06 51.52 C306.85 24.66 291.82 5.74 261.33 0.91 C228.7 -4.25 208.49 13.23 184.2 35.62 C138.79 77.48 193.44 143.44 153.83 190.83 C116.02 236.09 35.02 193.85 14.53 249.16 C-3.16 296.88 73.33 328.53 56.46 372.56 Z");
}
.hero__horizon {
  position: absolute;
  left: -312px;
  top: 528px;
  width: 2544px;
  height: 1104px;
  border-radius: 50%;
  background: var(--bg);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 220px 20px 140px;
  text-align: center;
}
.hero__cta { max-width: 720px; margin: 0 auto; }
.hero__cta .eyebrow { margin-bottom: 12px; }
.hero__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 64px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 24px;
}
.hero__title-line { display: block; white-space: nowrap; }
.hero__title-line--1 {
  background: linear-gradient(90deg, rgba(227,227,227,0.5) 0%, #e3e3e3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__title-line--2 {
  background: linear-gradient(90deg, #e3e3e3 0%, rgba(227,227,227,0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero__desc {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-60);
  margin-bottom: 48px;
}
.hero__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
}

/* ============================================================
   Секция design (фичи, тарифы, фон)
   ============================================================ */
.design {
  position: relative;
  padding: 48px 0 128px;
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.design > .section { position: relative; z-index: 2; }
.section + .section { margin-top: 160px; }
/* Якорный переход не должен прятать заголовок секции под фикс. навбар. */
.section[id] { scroll-margin-top: 104px; }

.design__bg {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 0;
  width: 1920px;
  height: 1172px;
  transform: translateX(-50%);
  background: url("../img/bg-figma.jpg") center / 1920px 1172px no-repeat;
  mix-blend-mode: color-dodge;
  /* Нижняя треть исходной картинки — фургон, силуэт и изогнутая линия
     дороги — не должна быть видна: раньше её закрывал контент секций,
     но после сокращения отступов между ними в этом месте образовался
     пустой промежуток, и картинка стала "протекать" туда. Плавно гасим
     фон к прозрачности заранее, чтобы это не зависело от точной высоты
     контента над ним. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 65%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 65%);
  pointer-events: none;
}
/* ============================================================
   Фичи (блок "Почему мы")
   ============================================================ */
.features {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(81, 175, 248, 0.25);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.feature__pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border-radius: var(--radius-card);
  background: rgba(227,227,227,0.03);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.feature__pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(ellipse at 50% 0%, rgba(183,227,255,0.35), rgba(0,134,243,0.1) 60%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.feature__icon { width: 20px; height: 20px; flex: none; color: var(--text); }
.feature__image {
  position: relative;
  aspect-ratio: 270 / 331;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--bg);
  border: 4px solid var(--bg);
  overflow: hidden;
  box-shadow:
    inset 0 0 56px rgba(0,61,216,0.22),
    inset 0 0 32px rgba(87,165,255,0.14);
}
.feature__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}
.feature__line { height: 2px; background: var(--line); }
.feature__text {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-50);
  text-align: center;
}

/* ============================================================
   Тарифы
   ============================================================ */
/* Разделитель между секциями — простая линия с мягким свечением в центре,
   вместо предыдущей SVG-дуги (много итераций, не смотрелось хорошо и
   наезжало на заголовок). Полностью адаптивна: проценты, никаких
   фикс-пиксельных кривых. */
.section-divider {
  position: relative;
  width: min(560px, 70%);
  height: 1px;
  margin: 0 auto 56px;
  background: linear-gradient(90deg, transparent 0%, rgba(79,168,245,0.55) 50%, transparent 100%);
}
.section-divider::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #7fc9e8;
  box-shadow: 0 0 10px 3px rgba(79,168,245,0.55), 0 0 28px 8px rgba(79,168,245,0.2);
}
.plans__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: end;
}
.plan {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface);
  isolation: isolate;
  transition: transform .25s ease;
}
.plan:hover { transform: translateY(-4px); }
.plan__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 36px;
  padding: 36px;
}
.plan__art {
  position: absolute;
  z-index: 0;
  right: -70px;
  top: -16px;
  width: 576px;
  height: 576px;
  max-width: none;
  object-fit: contain;
  opacity: 0.2;
  filter: brightness(0.85);
  pointer-events: none;
}
.plan--featured {
  background: radial-gradient(140% 100% at 100% 40%, var(--blue-100) 0%, var(--blue-500) 25%, var(--blue-600) 50%, var(--surface) 100%);
  box-shadow: 0 0 128px rgba(0,134,243,0.1);
}
.plan--featured .plan__art {
  width: 717px;
  height: 717px;
  right: -275px;
  top: -28px;
  opacity: 0.3;
  filter: none;
}
.plan:last-child .plan__art {
  width: 550px;
  height: 550px;
  right: -200px;
  top: 45px;
  opacity: 0.15;
}
.plan__texture { z-index: 1; opacity: .08; }
.plan__text, .plan__cta {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.plan__cta { gap: 24px; }
.plan__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
}
.plan__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
}
.plan__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 24px;
  list-style: disc;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.plan__list li { padding-left: 2px; }
.plan__list li::marker { font-size: 12px; }
.plan__price {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
.plan__amount {
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
}
.plan__period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
.plan__per { text-transform: uppercase; }
.plan__monthly { color: var(--text-50); text-transform: uppercase; }
.plan__cta .btn { align-self: flex-start; min-width: 150px; }

/* ============================================================
   Финальный CTA
   ============================================================ */
.final__card {
  position: relative;
  overflow: hidden;
  padding: 48px;
  border-radius: var(--radius-card);
  background: var(--surface);
  min-height: 342px;
  isolation: isolate;
}
.final__art {
  position: absolute;
  z-index: 0;
  left: 439px;
  top: -290px;
  width: 1176px;
  height: 1176px;
  max-width: none;
  transform: rotate(4.47deg);
  transform-origin: top left;
  pointer-events: none;
}
.final__content {
  position: relative;
  z-index: 1;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.final__title {
  font-size: 36px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.final__desc {
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text-60);
}
.final__buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 12px;
}
.final__buttons .btn--primary { min-width: 150px; }

/* ============================================================
   Футер
   ============================================================ */
.footer {
  position: relative;
  background: var(--surface);
  border-top: 2px solid var(--line);
  overflow: hidden;
}
.footer__art {
  position: absolute;
  z-index: 0;
  left: calc(50% - 402px);
  top: 225px;
  width: 839px;
  height: 839px;
  max-width: none;
  transform: rotate(178.72deg);
  pointer-events: none;
}
.footer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 32px;
  row-gap: 24px;
  padding-top: 96px;
  padding-bottom: 96px;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 58px;
  flex: 1 1 320px;
  max-width: 415px;
}
.footer__logo {
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.footer__copy,
.footer__about {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-60);
}
.footer__copy { line-height: 1; }
.footer__about { max-width: 470px; }
.footer__col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 24px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-60);
}
.footer__col a { white-space: nowrap; transition: color .2s ease; }
.footer__col a:hover { color: var(--text); }
.footer__link-btn {
  align-self: flex-start;
  color: var(--text-60);
  white-space: nowrap;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease;
}
.footer__link-btn:hover { color: var(--text); }

/* ============================================================
   Адаптивность главной
   ============================================================ */
@media (max-width: 1200px) {
  .features { grid-template-columns: repeat(2, 1fr); }
  .plans__grid { grid-template-columns: repeat(3, 1fr); }
  .plan__body { padding: 28px; }
}
@media (max-width: 1024px) {
  .section + .section { margin-top: 110px; }
  .plans__grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .plan--featured { order: -1; }
  .hero__title { font-size: 56px; }
  .final__art { left: auto; right: -420px; }
  .footer__brand { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 820px) {
  .navbar__inner {
    grid-template-columns: 1fr auto;
    row-gap: 0;
    align-content: center;
    align-items: center;
    padding: 8px 12px;
  }
  .navbar__burger {
    display: flex;
    grid-row: 1;
    grid-column: 2;
    align-self: center;
  }
  .navbar__brand { grid-row: 1; grid-column: 1; align-self: center; }

  /* Выпадающее меню: одна колонка на всю ширину навбара,
     единые отступы у ссылок и кнопок. */
  .navbar__nav,
  .navbar__actions {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 4px;
    transition: max-height .3s ease, opacity .2s ease, padding .3s ease, margin .3s ease;
  }
  .navbar__nav .navbar__link {
    display: block;
    padding: 12px 14px;
    font-size: 16px;
    border-radius: 10px;
    color: var(--text-70);
  }
  .navbar__nav .navbar__link:hover,
  .navbar__nav .navbar__link.is-active {
    background: rgba(255,255,255,0.05);
    color: var(--text);
  }
  .navbar__nav .navbar__link::before { display: none; }
  .navbar__actions .btn {
    width: 100%;
    justify-content: center;
    padding: 12px 16px;
    font-size: 15px;
  }
  .navbar.is-open {
    border-radius: 12px;
    background: rgba(11, 11, 12, 0.92);
  }
  .navbar.is-open .navbar__nav {
    max-height: 320px;
    opacity: 1;
    padding: 10px 4px 4px;
  }
  .navbar.is-open .navbar__actions {
    max-height: 200px;
    opacity: 1;
    padding: 8px 4px 10px;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }

  /* На мобильных выравниваем контент по верху, а не по центру —
     иначе flex align-items:center отодвигает блок от навбара вниз. */
  .hero { align-items: flex-start; min-height: auto; }
  .hero__content { padding: 96px 24px 60px; }
  .hero__title { font-size: 44px; }
  .hero__title-line { white-space: normal; }
  .hero__desc { font-size: 18px; margin-bottom: 36px; }
  .btn--lg { font-size: 17px; }

  .design { padding-top: 40px; }
  .section__title { font-size: 30px; }
  .section__desc { font-size: 18px; }
  .section__desc br { display: none; }

  /* --- Картинки главной под мобильный экран --- */
  /* Фичи «Почему мы»: 2 в ряд, картинка альбомная, а не почти на весь экран */
  .features { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; margin: 0 auto; }
  .feature { padding: 14px; gap: 12px; }
  .feature__image { aspect-ratio: 4 / 3; padding: 6px; border-width: 3px; }
  .feature__pill { font-size: 12px; padding: 8px 10px; white-space: normal; line-height: 1.25; }
  .feature__text { font-size: 13px; }
  .feature__line { display: none; }
  /* Фоновый паттерн секции рассчитан на широкий экран — на мобильных
     он только шумит и лезет color-dodge-свечением на текст. Убираем. */
  .design__bg { display: none; }
  /* Декоративные порталы — компактнее */
  .plan__art,
  .plan--featured .plan__art,
  .plan:last-child .plan__art { width: 360px; height: 360px; right: -140px; top: -10px; }
  .final__card { padding: 32px; }
  .final__content { max-width: 100%; }
  .final__art { left: auto; right: -300px; top: -90px; width: 660px; height: 660px; opacity: .55; transform-origin: center; }
  .footer__art { left: calc(50% - 260px); top: auto; bottom: -360px; width: 520px; height: 520px; }
  .final__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, var(--surface) 0%, rgba(11,11,12,0.9) 55%, rgba(11,11,12,0.35) 100%);
    pointer-events: none;
  }
  .final__content { z-index: 2; }

  /* --- Футер: сетка вместо колонки-стопки --- */
  .footer__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
    row-gap: 36px;
    padding-top: 56px;
    padding-bottom: 180px;
  }
  .footer__brand {
    grid-column: 1 / -1;
    max-width: 100%;
    gap: 18px;
  }
  .footer__about { max-width: 100%; }
  .footer__about br { display: none; }
  .footer__col { gap: 14px; }
  .footer__col a,
  .footer__link-btn { white-space: normal; }
}
@media (max-width: 480px) {
  .hero__content { padding: 88px 16px 52px; }
  .hero__title { font-size: 36px; }
  /* Кнопки героя — в одну строку, по содержимому, не шире контента */
  .hero__buttons { flex-wrap: nowrap; gap: 10px; justify-content: center; max-width: 100%; }
  .hero__buttons .btn { flex: 0 1 auto; min-width: 0; padding: 0 16px; font-size: 13px; white-space: nowrap; }
  .plan__title-row { flex-wrap: wrap; }
  .plan__body { padding: 24px; }
  .final__buttons { gap: 12px; }
  /* Узкий экран: фичи сеткой 2×2, компактные карточки */
  .features { grid-template-columns: 1fr 1fr; max-width: 440px; gap: 10px; }
  .feature { padding: 9px; gap: 8px; }
  .feature__image { aspect-ratio: 4 / 3; padding: 4px; border-width: 3px; }
  .feature__pill { font-size: 11px; padding: 6px 6px; gap: 4px; white-space: normal; line-height: 1.2; letter-spacing: 0; min-height: 40px; }
  .feature__icon { width: 13px; height: 13px; }
  .feature__text { font-size: 11.5px; line-height: 1.35; }
  .feature__line { display: none; }
  .final__art { right: -260px; width: 560px; height: 560px; }
  .footer__art { left: calc(50% - 220px); bottom: -320px; width: 440px; height: 440px; }
  /* Совсем узкий экран — футер в одну колонку */
  .footer__inner { grid-template-columns: 1fr; row-gap: 28px; padding-bottom: 160px; }
}

/* ============================================================
   СОВМЕСТИМОСТЬ СО СТАРЫМИ СТРАНИЦАМИ (личный кабинет, админка)
   ============================================================ */

/* Карточки */
.card {
  background: var(--surface);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  transition: transform .25s ease;
}
.card:hover { transform: translateY(-2px); }
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-header h2 { font-size: 20px; font-weight: 600; }

/* Боковое меню */
.app-layout {
  display: flex;
  min-height: 100vh;
  padding-top: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  z-index: 10;
  flex-shrink: 0;
}
.sidebar a {
  padding: 10px 16px;
  border-radius: var(--radius-card);
  color: var(--text-60);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.sidebar a:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.sidebar a.active {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.sidebar a.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 24px;
  background: var(--blue-500);
  border-radius: 0 4px 4px 0;
}
.sidebar svg { width: 18px; height: 18px; flex-shrink: 0; }
.main-content {
  flex: 1;
  margin-left: 220px;
  padding: 32px;
  max-width: calc(1024px + 220px);
}
.main-content h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 24px;
}

/* Таблицы */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.admin-table th {
  color: var(--text-60);
  font-weight: 500;
  font-size: 13px;
}
.admin-table td { font-size: 14px; }
.admin-table tr.clickable { cursor: pointer; }
.admin-table tr.clickable:hover td {
  background: rgba(255,255,255,0.04);
}

/* Бейджи статусов (старые) */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.badge-green { background: rgba(16,185,129,0.15); color: #10b981; }
.badge-red { background: rgba(239,68,68,0.15); color: #ef4444; }
.badge-yellow { background: rgba(234,179,8,0.15); color: #eab308; }
.badge-orange { background: rgba(251,146,60,0.15); color: #fb923c; }
.badge-gray { background: rgba(255,255,255,0.05); color: var(--text-60); }

/* Метрики */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 16px;
}
.metric {
  text-align: center;
  padding: 16px;
  background: rgba(255,255,255,0.02);
  border-radius: var(--radius-card);
}
.metric-value {
  font-size: 32px;
  font-weight: 700;
}
.metric-label {
  color: var(--text-60);
  font-size: 13px;
  margin-top: 4px;
}

/* Модальные окна */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  color: var(--text);
}
.modal-content h2 { margin-bottom: 20px; }
.modal-content h3 { margin: 16px 0 8px; }
.modal-content p { color: var(--text-60); font-size: 14px; line-height: 1.6; }
.close {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  font-weight: 300;
  color: var(--text-60);
  cursor: pointer;
}
.close:hover { color: var(--text); }
.modal-content ul {
  padding-left: 20px;
  list-style: disc;
}
.modal-content li { margin-bottom: 6px; }

/* Пустые состояния */
.empty-state {
  text-align: center;
  padding: 32px 0;
}
.empty-state h3 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--text-60); margin-bottom: 20px; }

/* Прогресс-бар */
.progress-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8px;
}
.progress-bar .fill {
  height: 100%;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--blue-500), var(--blue-300));
  width: 0%;
  transition: width .8s ease;
}

/* Мобильная навигация */
.mobile-nav {
  display: none;
}
@media (max-width: 768px) {
  .sidebar { display: none !important; }
  .app-layout { flex-direction: column; padding-top: 0; }
  .main-content {
    margin-left: 0;
    padding: 24px 16px 80px;
    max-width: 100%;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(11,11,12,0.9);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mobile-nav-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;
    padding: 8px 6px 6px;
    max-width: 520px;
    margin: 0 auto;
  }
  .mobile-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-50);
    text-decoration: none;
    font-weight: 500;
    padding: 6px 0 2px;
    position: relative;
    transition: color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  /* Пилюля-подсветка за иконкой активного пункта */
  .mobile-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 46px;
    height: 28px;
    border-radius: 999px;
    background: transparent;
    transform: translateX(-50%) scale(0.7);
    transition: background 0.18s ease, transform 0.18s ease;
    z-index: 0;
  }
  .mobile-nav-item .mobile-nav-icon {
    width: 22px;
    height: 22px;
    position: relative;
    z-index: 1;
    color: currentColor;
    transition: transform 0.18s ease;
  }
  .mobile-nav-item span {
    position: relative;
    z-index: 1;
    max-width: 100%;
    font-size: 9.5px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mobile-nav-item:active .mobile-nav-icon { transform: scale(0.88); }
  .mobile-nav-item.active { color: var(--blue-300); }
  .mobile-nav-item.active::before {
    background: rgba(96,165,250,0.16);
    transform: translateX(-50%) scale(1);
  }
  .mobile-nav-item .nav-badge {
    position: absolute;
    top: 1px;
    right: calc(50% - 22px);
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    border-radius: 999px;
    z-index: 2;
  }
}

/* Формы (логин, регистрация) */
.form-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 100px 20px 40px;
  background: var(--bg);
}
.form-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.form-card h1 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
}
.form-card p {
  color: var(--text-60);
  margin-bottom: 24px;
}
.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 16px;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 15px;
  margin-bottom: 16px;
  outline: none;
  transition: border-color .2s;
}
.input:focus { border-color: var(--blue-500); }
textarea.input { height: auto; padding: 12px 16px; }
.error-message {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  padding: 12px;
  border-radius: var(--radius-card);
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 16px;
}
.form-footer {
  text-align: center;
  margin-top: 16px;
  color: var(--text-60);
  font-size: 14px;
}
.form-footer a { color: var(--blue-300); text-decoration: none; }
.form-footer a:hover { text-decoration: underline; }

/* Кнопки (переопределение старых классов) */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--blue-500);
  border: 2px solid transparent;
  box-shadow: 0 0 16px rgba(0, 134, 243, 0.1);
  transition: background-color .2s ease, box-shadow .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary:hover {
  border-color: var(--blue-500);
  background-image: radial-gradient(120% 160% at 50% -30%, var(--blue-100) 0%, var(--blue-500) 40%, var(--blue-600) 75%, var(--surface) 100%);
  box-shadow: 0 0 24px rgba(0, 134, 243, 0.35), inset 0 0 4px rgba(0, 156, 255, 0.1);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  background-color: rgba(227,227,227,0.05);
  border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover {
  color: var(--blue-200);
  background-color: rgba(0, 134, 243, 0.25);
  border-color: var(--blue-500);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
}
/* Полноширинная кнопка: остаётся flex (иначе display:block ломает
   вертикальное центрирование текста при min-height и line-height:1). */
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 14px 32px; font-size: 16px; }
.btn-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  color: rgba(239,68,68,0.8);
  background: transparent;
  border: 1px solid rgba(239,68,68,0.3);
  transition: all .2s ease;
  cursor: pointer;
  text-decoration: none;
}
.btn-logout:hover {
  background: rgba(239,68,68,0.1);
}

/* Старые стили навигации (для совместимости) */
.navbar .navbar__brand { font-size: 16px; font-weight: 500; }
.navbar .nav-link {
  padding: 10px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 100px;
  transition: color .2s ease;
}
.navbar .nav-link:hover { color: var(--blue-200); }

/* ============================================================
   СТЕКЛЯННЫЕ КАРТОЧКИ (glassmorphism) для внутренних страниц
   ============================================================ */

/* Основной класс стеклянной карточки – переопределяем .card */
.card {
  background: rgba(11, 11, 12, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform .25s ease, box-shadow .25s ease;
}

.glass-light {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-content {
  background: rgba(11, 11, 12, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   Уменьшенные размеры только для главной страницы (отдаление на 10%)
   ============================================================ */
body.landing-page .container {
    max-width: 1152px;
    padding: 0 18px;
}

body.landing-page .hero__content {
    padding: 200px 18px 126px;
}

body.landing-page .hero__title {
    font-size: 58px;
}

body.landing-page .hero__desc {
    font-size: 18px;
    margin-bottom: 43px;
}

body.landing-page .design {
    padding: 43px 0 115px;
}

body.landing-page .section__title {
    font-size: 32px;
}

body.landing-page .section__desc {
    font-size: 18px;
}

body.landing-page .plan__body {
    padding: 32px;
}

body.landing-page .plan__title {
    font-size: 32px;
}

body.landing-page .plan__amount {
    font-size: 32px;
}

body.landing-page .final__card {
    padding: 43px;
    min-height: 308px;
}

body.landing-page .final__title {
    font-size: 32px;
}

body.landing-page .final__desc {
    font-size: 18px;
}

body.landing-page .footer__inner {
    padding-top: 86px;
    padding-bottom: 86px;
}

body.landing-page .footer__logo {
    font-size: 32px;
}

@media (max-width: 1200px) {
    body.landing-page .container {
        max-width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 820px) {
    body.landing-page .hero__content {
        padding: 96px 24px 60px;
    }
    body.landing-page .design {
        padding-top: 40px;
    }
    body.landing-page .hero__title {
        font-size: 44px;
    }
    body.landing-page .hero__desc {
        font-size: 18px;
        margin-bottom: 36px;
    }
    body.landing-page .section__title {
        font-size: 30px;
    }
    body.landing-page .section__desc {
        font-size: 18px;
    }
    body.landing-page .plan__body {
        padding: 24px;
    }
    body.landing-page .final__card {
        padding: 32px;
        min-height: auto;
    }
    body.landing-page .footer__inner {
        padding-top: 56px;
        padding-bottom: 180px;
    }
}

@media (max-width: 480px) {
    body.landing-page .hero__content {
        padding: 88px 16px 52px;
    }
    body.landing-page .hero__title {
        font-size: 36px;
    }
}

/* ============================================================
   КАСТОМНЫЙ СКРОЛЛ – стилистика Rick VPN
   ============================================================ */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0062f6, #0086f3);
  border-radius: 10px;
  transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #1a96ff, #0062f6);
}
* {
  scrollbar-width: thin;
  scrollbar-color: #0086f3 rgba(255, 255, 255, 0.02);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* ============================================================
   ЛИЧНЫЙ КАБИНЕТ И АДМИН-ПАНЕЛЬ 2.0
   Единая дизайн-система для /dashboard, /admin и всех внутренних
   страниц: новый sidebar с профилем, топбар, карточки метрик,
   таблицы, статус-пилюли, формы, алерты, вкладки, пагинация.
   ============================================================ */

/* ---- App shell: sidebar ---- */
.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
}
.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 248px;
  height: 100vh;
  height: 100dvh;
  background: rgba(11, 11, 12, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  z-index: 20;
  flex-shrink: 0;
  overflow-y: auto;
}
.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px 16px;
  flex-shrink: 0;
}
.app-sidebar__mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue-300), var(--blue-700));
  box-shadow: 0 0 16px rgba(0, 134, 243, 0.35);
}
.app-sidebar__name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.app-sidebar__nav {
  flex: 1;
  padding: 4px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-nav-label {
  padding: 14px 12px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-50);
}
.app-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--text-60);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: background-color .15s ease, color .15s ease;
}
.app-nav-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--blue-500, #0086f3);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.app-nav-link:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.app-nav-link.is-active {
  color: var(--text);
  background: rgba(0,134,243,0.1);
}
.app-nav-link.is-active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--blue-500);
  border-radius: 0 4px 4px 0;
}
.app-nav-link--admin { color: var(--blue-300); }
.app-nav-link--admin:hover { color: var(--blue-200); }
.app-nav-link--danger { color: rgba(239,68,68,0.75); }
.app-nav-link--danger:hover { color: #ef4444; background: rgba(239,68,68,0.08); }
.app-sidebar__footer {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.app-sidebar__user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}
.app-sidebar__logout {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: rgba(239,68,68,0.7);
  transition: color .15s ease, background-color .15s ease;
}
.app-sidebar__logout:hover { color: #ef4444; background: rgba(239,68,68,0.1); }
.app-sidebar__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-300);
  background: rgba(81,175,248,0.12);
  text-transform: uppercase;
}
.app-sidebar__user-email {
  flex: 1;
  font-size: 12.5px;
  color: var(--text-60);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ---- App shell: main area + topbar ---- */
.app-main {
  flex: 1;
  min-width: 0;
  margin-left: 248px;
  padding: 32px 36px 48px;
  max-width: 1180px;
}
.app-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.app-topbar__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.app-topbar__desc {
  color: var(--text-60);
  font-size: 14px;
  margin-top: 4px;
}
.app-topbar__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- Stat cards ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.stat-card {
  background: rgba(11,11,12,0.65);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stat-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.stat-card__icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-300);
  background: rgba(0,134,243,0.12);
}
.stat-card__icon svg { width: 17px; height: 17px; }
.stat-card__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.stat-card__label {
  font-size: 13px;
  color: var(--text-60);
}

/* ---- Section card header ---- */
.section-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.section-card__head h2 {
  font-size: 17px;
  font-weight: 600;
}
.section-card__head .hint {
  font-size: 13px;
  color: var(--text-60);
}

/* ---- Tables v2 ---- */
.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 560px;
}
.data-table thead th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-50);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.data-table tr.clickable { cursor: pointer; }
.data-table .cell-muted { color: var(--text-60); }
.data-table .cell-mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.data-table .cell-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.table-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-60);
  font-size: 14px;
}

/* ---- Filter bar ---- */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}
.filter-bar .input,
.filter-bar select.input {
  margin-bottom: 0;
  width: auto;
  min-width: 150px;
  font-size: 14px;
}
/* В тулбаре фильтров кнопки той же высоты, что и поля (не мельче). */
.filter-bar .btn--sm { min-height: var(--control-h); padding: 0 16px; font-size: 14px; }

/* ---- Status pills ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill--success { color: #10b981; background: rgba(16,185,129,0.12); }
.pill--danger  { color: #ef4444; background: rgba(239,68,68,0.12); }
.pill--warning { color: #eab308; background: rgba(234,179,8,0.12); }
.pill--info    { color: var(--blue-300); background: rgba(81,175,248,0.12); }
.pill--muted   { color: var(--text-60); background: rgba(255,255,255,0.05); }
.pill--muted::before { display: none; }

/* ---- Forms v2 ---- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-field { margin-bottom: 16px; }
.form-field:last-child { margin-bottom: 0; }
.form-field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-60);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.form-field .input,
.form-field textarea.input,
.form-field select.input {
  margin-bottom: 0;
}
textarea.input {
  resize: vertical;
  min-height: 110px;
  font-family: inherit;
  line-height: 1.5;
}
select.input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}
/* Список вариантов у нативного select: на Windows он рисуется системной темой,
   поэтому явно задаём тёмный фон и светлый текст, иначе пункты «белым по белому». */
select.input option,
select.input optgroup,
.input option {
  background-color: #16161b;
  color: var(--text);
}
select.input option:disabled { color: var(--text-50); }
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-60);
  font-size: 14px;
  margin-bottom: 16px;
  cursor: pointer;
}
.checkbox-row input { width: 16px; height: 16px; accent-color: var(--blue-500); }

.toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle .toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 100px;
  transition: background-color .2s ease;
  pointer-events: none;
}
.toggle .toggle-track::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
}
.toggle input:checked + .toggle-track { background: var(--blue-500); }
.toggle input:checked + .toggle-track::before { transform: translateX(16px); }

/* ---- Alerts ---- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 16px;
  border-radius: var(--radius-card);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert--success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); color: #10b981; }
.alert--danger  { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; }
.alert--info    { background: rgba(81,175,248,0.1); border: 1px solid rgba(81,175,248,0.2); color: var(--blue-300); }

/* ---- Copy field ---- */
.copy-field {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.copy-field .input {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-60);
}
.copy-field button { flex-shrink: 0; }

/* ---- Tabs ---- */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
}
.tabs a {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-60);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease;
}
.tabs a:hover { color: var(--text); }
.tabs a.is-active { color: var(--text); border-color: var(--blue-500); }

/* ---- Pagination v2 ---- */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-60);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.pagination a:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.pagination .is-current { background: var(--blue-500); color: #fff; font-weight: 600; }

/* ---- Empty state v2 ---- */
.empty-state-v2 {
  text-align: center;
  padding: 48px 24px;
}
.empty-state-v2__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-50);
}
.empty-state-v2__icon svg { width: 24px; height: 24px; }
.empty-state-v2 h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.empty-state-v2 p { color: var(--text-60); font-size: 13.5px; margin-bottom: 18px; }

/* ---- Small / icon buttons ---- */
.btn--sm { min-height: var(--control-h-sm); padding: 0 13px; font-size: 13px; }
.btn--icon { width: 36px; height: 36px; min-height: 0; padding: 0; border-radius: 10px; }
.btn--icon.btn--sm { width: var(--control-h-sm); height: var(--control-h-sm); }
.btn--icon svg { width: 15px; height: 15px; }

/* Компактный инпут/селект для инлайновых форм: одна высота с .btn--sm. */
.input--sm {
  width: auto;
  height: var(--control-h-sm);
  padding: 0 11px;
  font-size: 13px;
  margin-bottom: 0;
  border-radius: 9px;
}
select.input--sm { padding-right: 30px; background-position: right 9px center; background-size: 15px; }

/* Ряд «поле + кнопка», label сверху, выравнивание по нижнему краю. */
.form-inline { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.form-inline .form-field { margin-bottom: 0; }
.form-inline .form-field label { margin-bottom: 4px; }
.form-inline--center { align-items: center; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Кнопка отправки формы: отступ сверху/снизу, чтобы не липла к карточкам. */
.form-actions { margin: 22px 0 28px; }
.form-actions .btn-block { min-height: 48px; font-size: 15px; }

/* Поле выбора файла — под тёмную тему, вровень с кнопкой рядом. */
.input--file {
  width: auto;
  max-width: 100%;
  height: var(--control-h);
  padding: 6px 10px;
  margin-bottom: 0;
  font-size: 13px;
  color: var(--text-60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.input--file::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s ease;
}
.input--file::file-selector-button:hover { background: rgba(255,255,255,0.12); }
.btn--danger-outline {
  color: rgba(239,68,68,0.85);
  background: rgba(239,68,68,0.06);
}
.btn--danger-outline:hover {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

/* ---- Chat components (используются в /support и /admin/support) ---- */
.chat-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 220px);
  min-height: 420px;
  background: rgba(11,11,12,0.65);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.chat-shell__messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat-msg { display: flex; gap: 10px; align-items: flex-start; max-width: 82%; }
.chat-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 16px; /* опустить на уровень пузыря, а не строки с именем/временем */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,0.12);
}
.chat-msg__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-msg.is-support .chat-msg__avatar { background: linear-gradient(135deg, #8b5cf6, #6366f1); }
.chat-msg__body { min-width: 0; }
.chat-msg__meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 3px; }
.chat-msg.is-mine .chat-msg__meta { flex-direction: row-reverse; }
.chat-msg__sender { font-size: 12.5px; font-weight: 600; color: var(--text-60); }
.chat-msg.is-support .chat-msg__sender { color: var(--blue-300); }
.chat-msg__time { font-size: 11px; color: var(--text-50); }
.chat-msg__bubble {
  padding: 10px 13px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}
.chat-msg.is-support .chat-msg__bubble { background: rgba(0,134,243,0.08); border-color: rgba(0,134,243,0.15); }
.chat-shell__composer {
  display: flex;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.chat-shell__composer .input { flex: 1; margin-bottom: 0; }
.chat-empty { margin: auto; text-align: center; color: var(--text-60); padding: 40px 20px; }

/* ---- Adaptive: app shell ---- */
@media (max-width: 768px) {
  .app-sidebar { display: none !important; }
  .app-shell { flex-direction: column; }
  .app-main {
    margin-left: 0;
    padding: 24px 16px 88px;
    max-width: 100%;
  }
  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .chat-shell { height: calc(100vh - 260px); }
}
@media (max-width: 420px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   АНИМАЦИИ ЛИЧНОГО КАБИНЕТА И АДМИН-ПАНЕЛИ
   ============================================================ */
@keyframes appFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes appFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes appScaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes appPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}
@keyframes appSpin {
  to { transform: rotate(360deg); }
}
@keyframes appSlideInRight {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Плавное появление контента при заходе на страницу кабинета/админки */
.app-main > .app-topbar,
.app-main > .stat-grid,
.app-main > .card,
.app-main > .alert,
.app-main > .filter-bar,
.app-main > .tabs {
  animation: appFadeUp .5s cubic-bezier(.22,.61,.36,1) both;
}
.app-main > .app-topbar { animation-delay: 0ms; }
.app-main > .stat-grid   { animation-delay: 40ms; }
.app-main > .alert       { animation-delay: 40ms; }
.app-main > .tabs        { animation-delay: 60ms; }
.app-main > .filter-bar  { animation-delay: 80ms; }
.app-main > .card:nth-of-type(1) { animation-delay: 100ms; }
.app-main > .card:nth-of-type(2) { animation-delay: 160ms; }
.app-main > .card:nth-of-type(3) { animation-delay: 220ms; }
.app-main > .card:nth-of-type(4) { animation-delay: 280ms; }
.app-main > .card:nth-of-type(n+5) { animation-delay: 320ms; }

/* Карточки метрик — лёгкий отдельный каскад */
.stat-grid .stat-card {
  animation: appFadeUp .45s cubic-bezier(.22,.61,.36,1) both;
}
.stat-grid .stat-card:nth-child(1) { animation-delay: 60ms; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 110ms; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 160ms; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 210ms; }
.stat-grid .stat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0,134,243,0.25);
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.stat-card { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }

.app-nav-link { position: relative; overflow: hidden; }

/* Строки таблиц — тонкий каскад + плавная подсветка при наведении уже есть */
.data-table tbody tr {
  animation: appFadeIn .35s ease both;
}
.data-table tbody tr:nth-child(n+9) { animation: none; }

/* Модально стилизованные страницы (детали транзакции, результат оплаты) */
.modal-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
}
.modal-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 900px 500px at 50% 0%, rgba(0,98,246,0.10) 0%, transparent 60%);
  pointer-events: none;
}
.modal-page-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: rgba(11,11,12,0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: appScaleIn .35s cubic-bezier(.22,.61,.36,1) both;
}
.modal-page-card__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-60);
  background: rgba(255,255,255,0.05);
  transition: background-color .15s ease, color .15s ease;
}
.modal-page-card__close:hover { background: rgba(255,255,255,0.1); color: var(--text); }
.modal-page-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-page-card__icon svg { width: 28px; height: 28px; }
.modal-page-card__icon--success { background: rgba(16,185,129,0.12); color: #10b981; }
.modal-page-card__icon--danger  { background: rgba(239,68,68,0.12); color: #ef4444; }
.modal-page-card__icon--info    { background: rgba(81,175,248,0.12); color: var(--blue-300); }
.modal-page-card__title {
  font-size: 21px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 6px;
}
.modal-page-card__desc {
  font-size: 14px;
  color: var(--text-60);
  text-align: center;
  line-height: 1.5;
  margin-bottom: 24px;
}
.modal-page-card__actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.modal-page-card__actions .btn { width: 100%; }

/* Модальные окна (JS .modal) — плавное появление содержимого */
.modal[style*="flex"] .modal-content {
  animation: appScaleIn .25s cubic-bezier(.22,.61,.36,1) both;
}

/* Тост-уведомления (используются в app.js) */
#toast {
  animation: appSlideInRight .25s cubic-bezier(.22,.61,.36,1) both;
}

/* Индикатор загрузки на кнопках форм (переключается app.js при отправке) */
.btn.is-submitting {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: .85;
}
.btn.is-submitting::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: appSpin .6s linear infinite;
}
.btn--ghost.is-submitting::after,
.btn--danger-outline.is-submitting::after {
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .app-main > .app-topbar,
  .app-main > .stat-grid,
  .app-main > .card,
  .app-main > .alert,
  .app-main > .filter-bar,
  .app-main > .tabs,
  .stat-grid .stat-card,
  .app-sidebar,
  .data-table tbody tr,
  .modal-page-card,
  .modal[style*="flex"] .modal-content,
  #toast {
    animation: none !important;
  }
}

/* ============ Дневной график трафика ============ */
.traffic-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 130px;
  padding-top: 12px;
}
.traffic-chart__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}
.traffic-chart__fill {
  width: 100%;
  max-width: 28px;
  min-height: 3px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, var(--blue-400) 0%, var(--blue-700) 100%);
  transition: height 0.5s ease;
}
.traffic-chart__gb {
  font-size: 10px;
  color: var(--text-40, rgba(255,255,255,0.4));
  margin-top: 6px;
}
.traffic-chart__label {
  font-size: 11px;
  color: var(--text-60);
  margin-top: 2px;
}

/* ============ Устройства / пауза подписки ============ */
.device-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.device-summary__count {
  font-size: 22px;
  font-weight: 600;
}
.pause-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pause-form select,
.pause-form .input {
  width: auto;
  margin-bottom: 0;
}

/* ============ Чекаут: выбор тарифа (общий для /register и /payment) ============ */
.checkout-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-plan {
  position: relative;
  display: block;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: rgba(227,227,227,0.03);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.checkout-plan:hover { background: rgba(227,227,227,0.05); }
.checkout-plan.is-selected { border-color: var(--blue-500); background: rgba(0,134,243,0.08); }
.checkout-plan__check {
  position: absolute; top: 12px; right: 12px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent;
}
.checkout-plan.is-selected .checkout-plan__check {
  border-color: var(--blue-500);
  background: var(--blue-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 12px;
}
.checkout-plan__duration { font-size: 13px; color: var(--text-60); margin-bottom: 8px; padding-right: 24px; }
.checkout-plan__price { font-size: 22px; font-weight: 700; line-height: 1; }
.checkout-plan__sub { font-size: 12px; color: var(--text-60); margin-top: 4px; }

.checkout-recur {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0,134,243,0.08);
  border: 1px solid rgba(0,134,243,0.25);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-70, #c9c9c9);
}
.checkout-recur b { color: var(--text); }

.checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: rgba(227,227,227,0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
}
.checkout-total__label { color: var(--text-60); font-size: 14px; }
.checkout-total__price { font-size: 22px; font-weight: 700; }

@media (max-width: 420px) { .checkout-plan-grid { grid-template-columns: 1fr; } }

/* ============ FAQ ============ */
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-item__q {
  cursor: pointer;
  font-weight: 600;
  font-size: 14.5px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: "+";
  color: var(--text-60);
  font-size: 18px;
  transition: transform 0.2s ease;
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a {
  color: var(--text-60);
  font-size: 14px;
  line-height: 1.6;
  margin-top: 10px;
}

/* ============================================================
   Страницы авторизации (login/register/forgot/reset/verify)
   ============================================================ */
.auth-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 108px 24px 32px; /* верхний отступ — под плавающий .navbar */
  background: var(--bg);
}
.auth-page .bg-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 560px at 50% -8%, rgba(0,134,243,0.18) 0%, rgba(0,98,246,0.07) 45%, transparent 75%),
    radial-gradient(ellipse 640px 480px at 100% 100%, rgba(0,98,246,0.08) 0%, transparent 60%);
}
.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  padding: 40px 36px;
  text-align: center;
}
.auth-card__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  border-radius: var(--radius-card);
  background: radial-gradient(120% 120% at 30% 20%, var(--blue-300) 0%, var(--blue-600) 100%);
  box-shadow: 0 8px 24px rgba(0,134,243,0.3);
  color: #fff;
}
.auth-card__mark svg { width: 22px; height: 22px; }
.auth-card .logo {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text);
}
.auth-card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.auth-card .subtitle {
  color: var(--text-60);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 28px;
}
.auth-card .message {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  padding: 12px 14px;
  border-radius: var(--radius-card);
  color: #10b981;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: left;
}
.auth-card .error-message {
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  padding: 12px 14px;
  border-radius: var(--radius-card);
  color: #ef4444;
  font-size: 14px;
  margin-bottom: 16px;
  text-align: left;
}
.auth-card form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-card .input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: var(--radius-card);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.auth-card .btn { min-height: 48px; }
.auth-card .input::placeholder { color: var(--text-50); }
.auth-card .input:focus {
  border-color: var(--blue-500);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(0,134,243,0.16);
}
.auth-card .code-input {
  letter-spacing: 8px;
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
.auth-card .code-input::placeholder {
  letter-spacing: 2px;
  font-size: 16px;
  font-weight: 400;
  color: var(--text-60);
  opacity: 0.5;
}
.auth-card .checkbox-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-60);
  text-align: left;
}
.auth-card .checkbox-wrap input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--blue-500);
}
.auth-card .checkbox-wrap a,
.auth-card .checkbox-wrap button {
  color: var(--blue-300);
}
.auth-card .checkbox-wrap a:hover,
.auth-card .checkbox-wrap button:hover {
  text-decoration: underline;
}
.auth-card .btn { width: 100%; margin-top: 2px; }
.auth-card .footer-links {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-60);
}
.auth-card .footer-links a {
  color: var(--blue-300);
  text-decoration: none;
  transition: color .2s ease;
}
.auth-card .footer-links a:hover {
  color: var(--blue-200);
  text-decoration: underline;
}