/* =====================================================================
   CyberX theme polish v9
   Единая палитра, типографика и размеры для всего сайта.
   Файл подключается после style.css в base.html.
===================================================================== */

:root{
  --font-main: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;

  --bg:#050507;
  --bg-2:#09090d;
  --surface:#111116;
  --surface-2:#17171f;
  --surface-3:#1d1d27;
  --card:#121219;
  --card-2:#181822;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.14);
  --line-red:rgba(255,0,51,.38);
  --text:#f5f5f8;
  --text-soft:rgba(245,245,248,.82);
  --muted:rgba(245,245,248,.58);
  --muted-2:rgba(245,245,248,.42);
  --red:#ff0033;
  --red-2:#d9002b;
  --red-dark:#87001c;
  --white:#fff;

  --radius-sm:14px;
  --radius:22px;
  --radius-lg:30px;
  --shadow-card:0 22px 70px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-card-hover:0 30px 90px rgba(0,0,0,.44), 0 0 42px rgba(255,0,51,.18), inset 0 1px 0 rgba(255,255,255,.08);
  --glow-red:0 0 28px rgba(255,0,51,.42);
  --ease:cubic-bezier(.22,.61,.36,1);

  --fs-xxs:.72rem;
  --fs-xs:.78rem;
  --fs-sm:.9rem;
  --fs-base:1rem;
  --fs-md:1.08rem;
  --fs-lg:1.22rem;
  --fs-xl:1.55rem;
  --fs-2xl:clamp(2rem,4vw,3.6rem);
  --fs-3xl:clamp(2.7rem,6.2vw,5.8rem);
}

*{
  box-sizing:border-box;
}

html{
  font-size:16px;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  font-family:var(--font-body) !important;
  font-size:var(--fs-base);
  line-height:1.65;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 82% 4%, rgba(255,0,51,.16), transparent 62%),
    radial-gradient(760px 460px at 0% 40%, rgba(255,255,255,.035), transparent 68%),
    linear-gradient(180deg, var(--bg), #030304 58%, var(--bg));
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.72), transparent 78%);
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0, rgba(255,255,255,.055), transparent 30%);
  opacity:.65;
}

::selection{
  color:#fff;
  background:rgba(255,0,51,.72);
}

h1,h2,h3,h4,h5,h6,
.brand,
.btn,
.nav-links a,
.eyebrow,
.kicker,
.hero-kicker,
.section-head h2,
.card h3,
.stat .num,
.stat .lbl,
.price,
.tag,
.badge,
.flash,
.cookie-consent b{
  font-family:var(--font-display) !important;
  letter-spacing:-.025em;
}

p,li,a,input,textarea,select,button,small,label,span{
  font-family:inherit;
}

p,
.card p,
.section-head p,
.footer p,
.form-help,
.lead{
  color:var(--muted);
  line-height:1.72;
}

a{
  color:inherit;
}

.container{
  width:min(1180px, calc(100% - 32px));
}

.section{
  padding:clamp(72px, 8vw, 116px) 0;
}

.section-head{
  margin-bottom:clamp(30px, 4vw, 52px);
}

.section-head h2,
.page-title,
.hero h1{
  color:var(--text);
  line-height:.98;
  text-wrap:balance;
}

.section-head h2,
.page-title{
  font-size:var(--fs-2xl);
  font-weight:800;
}

.hero h1{
  font-size:var(--fs-3xl);
  font-weight:800;
}

.section-head p,
.hero p{
  max-width:760px;
  font-size:clamp(1rem, 1.25vw, 1.12rem);
}

.hero-kicker,
.eyebrow,
.tag,
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--red);
  text-transform:uppercase;
  font-weight:800;
  font-size:var(--fs-xs);
  letter-spacing:.12em !important;
}

.header{
  background:rgba(5,5,7,.78);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(18px);
}

.brand{
  font-weight:800;
  color:var(--text);
  letter-spacing:-.04em;
}

.brand b,
.accent{
  color:var(--red);
  text-shadow:0 0 24px rgba(255,0,51,.44);
}

.nav-links a{
  font-size:var(--fs-xs);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em !important;
  color:var(--muted);
  transition:color .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease);
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--text);
}

.card,
.config-card,
.peripheral-card,
.game-card,
.review-card,
.promo-card,
.contact-card,
.form-card,
.cabinet-card,
.admin-card,
.stat,
.flip-card__face{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:
    radial-gradient(420px 220px at 100% 0, rgba(255,0,51,.11), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    var(--surface);
  box-shadow:var(--shadow-card);
}

.card:hover,
.config-card:hover,
.peripheral-card:hover,
.game-card:hover,
.review-card:hover,
.promo-card:hover,
.contact-card:hover,
.form-card:hover,
.cabinet-card:hover,
.admin-card:hover{
  border-color:rgba(255,0,51,.32);
  box-shadow:var(--shadow-card-hover);
}

.card h3,
.config-card h3,
.peripheral-card h3,
.game-card h3,
.review-card h3,
.promo-card h3,
.contact-card h3,
.form-card h3{
  font-size:clamp(1.15rem, 1.7vw, 1.55rem);
  line-height:1.12;
  font-weight:800;
  margin:0 0 12px;
}

.btn,
button.btn,
a.btn{
  min-height:46px;
  border-radius:14px;
  font-size:var(--fs-xs);
  line-height:1;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.055em !important;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
}

.btn:hover,
button.btn:hover,
a.btn:hover{
  transform:translateY(-2px);
}

.btn-primary{
  color:#fff;
  border-color:rgba(255,0,51,.85);
  background:linear-gradient(135deg, var(--red), var(--red-2));
  box-shadow:0 0 0 rgba(255,0,51,0);
}

.btn-primary:hover{
  box-shadow:0 16px 42px rgba(255,0,51,.34), inset 0 1px 0 rgba(255,255,255,.18);
}

.btn-ghost,
.btn-white{
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.055);
  color:var(--text);
}

.btn-ghost:hover,
.btn-white:hover{
  border-color:var(--line-red);
  background:rgba(255,0,51,.10);
  box-shadow:0 14px 34px rgba(255,0,51,.16);
}

input,textarea,select{
  border:1px solid var(--line-2) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.055) !important;
  color:var(--text) !important;
  font-size:var(--fs-sm) !important;
  transition:border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

input:focus,textarea:focus,select:focus{
  outline:none;
  border-color:rgba(255,0,51,.7) !important;
  background:rgba(255,255,255,.075) !important;
  box-shadow:0 0 0 4px rgba(255,0,51,.12) !important;
}

label{
  color:var(--text-soft);
  font-size:var(--fs-sm);
  font-weight:700;
}

.table,
table{
  border-color:var(--line) !important;
}

thead,
th{
  font-family:var(--font-display) !important;
  color:var(--text);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.07em;
}

td{
  color:var(--muted);
}

.flash{
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-card);
}

.cookie-consent{
  border:1px solid var(--line-2);
  border-radius:var(--radius);
  background:
    radial-gradient(300px 140px at 100% 0, rgba(255,0,51,.18), transparent 70%),
    rgba(17,17,22,.92);
  box-shadow:0 22px 70px rgba(0,0,0,.45), 0 0 34px rgba(255,0,51,.12);
  backdrop-filter:blur(18px);
}

.cookie-consent b{
  font-size:var(--fs-sm);
  color:var(--text);
  letter-spacing:.02em;
}

.cookie-consent p{
  margin:.35rem 0 0;
  font-size:var(--fs-sm);
}

.footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(540px 240px at 100% 0, rgba(255,0,51,.09), transparent 70%),
    rgba(5,5,7,.96);
}

.footer h4{
  margin-bottom:14px;
  font-size:var(--fs-sm);
  color:var(--text);
  text-transform:uppercase;
  letter-spacing:.08em;
}

.footer a{
  color:var(--muted);
  font-size:var(--fs-sm);
  transition:color .2s var(--ease), transform .2s var(--ease);
}

.footer a:hover{
  color:var(--text);
  transform:translateX(2px);
}

.footer-text{
  color:var(--muted);
  margin-top:14px;
  max-width:300px;
  font-size:var(--fs-sm);
}

.socials--single a{
  display:grid;
  place-items:center;
}

/* На случай если в старом base.html остались Telegram/Discord. */
footer a[href*="t.me"],
footer a[href*="telegram"],
footer a[href*="discord"],
.footer a[href*="t.me"],
.footer a[href*="telegram"],
.footer a[href*="discord"],
.site-footer a[href*="t.me"],
.site-footer a[href*="telegram"],
.site-footer a[href*="discord"]{
  display:none !important;
}

.footer-bottom{
  color:var(--muted-2);
  font-size:var(--fs-xs);
}

@media (max-width: 780px){
  html{ font-size:15px; }

  .container{
    width:min(100% - 24px, 1180px);
  }

  .section{
    padding:60px 0;
  }

  .btn,
  button.btn,
  a.btn{
    min-height:44px;
    font-size:.74rem;
  }
}

/* =====================================================================
   v10 — компактная типографика и защита от вылезания текста
   Шрифт стал чуть меньше, строки плотнее, длинные элементы аккуратно переносятся.
===================================================================== */
:root{
  --fs-xxs:.66rem;
  --fs-xs:.72rem;
  --fs-sm:.82rem;
  --fs-base:.93rem;
  --fs-md:.99rem;
  --fs-lg:1.08rem;
  --fs-xl:1.32rem;
  --fs-2xl:clamp(1.62rem, 3.2vw, 2.85rem);
  --fs-3xl:clamp(2.05rem, 5.2vw, 4.65rem);
}

html{
  font-size:15px;
}

body{
  font-size:var(--fs-base);
  line-height:1.58;
}

body,
.card,
.config-card,
.peripheral-card,
.game-card,
.review-card,
.promo-card,
.contact-card,
.form-card,
.cabinet-card,
.admin-card,
.stat,
.flip-card__face,
.footer,
.header,
.legal-card,
.legal-nav{
  overflow-wrap:anywhere;
  word-break:normal;
}

.container,
.card,
.config-card,
.peripheral-card,
.game-card,
.review-card,
.promo-card,
.contact-card,
.form-card,
.cabinet-card,
.admin-card,
.stat,
.flip-card__face,
.nav,
.nav-links,
.footer-grid > *,
.cookie-consent > *{
  min-width:0;
}

p,
.card p,
.section-head p,
.footer p,
.form-help,
.lead{
  line-height:1.6;
}

.section{
  padding:clamp(62px, 7vw, 100px) 0;
}

.section-head{
  margin-bottom:clamp(24px, 3.4vw, 42px);
}

.section-head h2,
.page-title{
  font-size:var(--fs-2xl);
  line-height:1.02;
  letter-spacing:-.045em;
}

.hero h1{
  font-size:var(--fs-3xl);
  line-height:1;
  letter-spacing:-.055em;
}

.section-head p,
.hero p{
  max-width:720px;
  font-size:clamp(.9rem, 1.05vw, 1rem);
  line-height:1.62;
}

.hero-kicker,
.eyebrow,
.tag,
.badge{
  font-size:var(--fs-xxs);
  letter-spacing:.105em !important;
}

.brand{
  font-size:clamp(1rem, 1.5vw, 1.25rem);
}

.nav-links a{
  font-size:var(--fs-xxs);
  letter-spacing:.05em !important;
}

.card h3,
.config-card h3,
.peripheral-card h3,
.game-card h3,
.review-card h3,
.promo-card h3,
.contact-card h3,
.form-card h3{
  font-size:clamp(1rem, 1.35vw, 1.28rem);
  line-height:1.16;
  margin-bottom:10px;
}

.btn,
button.btn,
a.btn{
  min-height:42px;
  padding-left:16px;
  padding-right:16px;
  font-size:var(--fs-xxs);
  letter-spacing:.045em !important;
}

.btn-sm,
a.btn-sm,
button.btn-sm{
  min-height:36px;
  padding-left:12px;
  padding-right:12px;
  font-size:.68rem;
}

input,textarea,select{
  font-size:var(--fs-sm) !important;
}

label{
  font-size:var(--fs-sm);
}

thead,
th{
  font-size:var(--fs-xxs);
}

td{
  font-size:var(--fs-sm);
}

.cookie-consent b,
.cookie-consent p,
.footer h4,
.footer a,
.footer-text{
  font-size:var(--fs-sm);
}

.footer-bottom{
  font-size:var(--fs-xxs);
}

@media (max-width: 980px){
  html{ font-size:14.5px; }

  .nav-links a{
    font-size:.68rem;
  }
}

@media (max-width: 780px){
  html{ font-size:14px; }

  .section{
    padding:54px 0;
  }

  .btn,
  button.btn,
  a.btn{
    min-height:40px;
    font-size:.68rem;
  }
}


/* ===== v22 oval header ===== */
.header{
  position:sticky;
  top:0;
  z-index:120;
  background:transparent;
  border:0;
  backdrop-filter:none;
  padding:18px 0 0;
}

.nav.nav-oval{
  display:flex;
  align-items:center;
  gap:12px;
}

.nav-pill{
  display:inline-flex;
  align-items:center;
  min-height:54px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(16,18,22,.78);
  backdrop-filter:blur(16px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.nav-pill--icon{
  width:54px;
  min-width:54px;
  justify-content:center;
  padding:0;
  color:var(--text);
  background:rgba(17,19,22,.88);
}

.nav-pill--brand{
  padding:0 22px;
  justify-content:center;
  white-space:nowrap;
}

.nav-pill--links{
  flex:1;
  justify-content:center;
  gap:6px;
  padding:8px;
  overflow:hidden;
}

.nav-pill--actions{
  gap:8px;
  padding:8px;
  margin-left:auto;
}

.nav-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  white-space:nowrap;
}

.nav-links a:hover,
.nav-links a.active{
  color:var(--text);
  background:rgba(255,255,255,.06);
}

.nav-actions .btn{
  border-radius:999px;
}

.burger{
  border:0;
  cursor:pointer;
  font-size:1rem;
  transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.burger:hover{
  transform:translateY(-1px);
  border-color:rgba(255,0,51,.26);
}

body > main:first-of-type{
  padding-top:18px;
}

@media (max-width: 1180px){
  .nav.nav-oval{
    flex-wrap:wrap;
    justify-content:center;
  }

  .nav-pill--links{
    order:4;
    width:100%;
    flex:0 0 100%;
    justify-content:flex-start;
    overflow:auto hidden;
    scrollbar-width:none;
  }

  .nav-pill--links::-webkit-scrollbar{
    display:none;
  }

  .nav-pill--actions{
    margin-left:0;
  }
}

@media (max-width: 760px){
  .header{
    padding-top:14px;
  }

  .nav.nav-oval{
    gap:10px;
  }

  .nav-pill{
    min-height:48px;
  }

  .nav-pill--icon{
    width:48px;
    min-width:48px;
  }

  .nav-pill--brand{
    flex:1;
    min-width:0;
  }

  .nav-pill--actions{
    width:100%;
    justify-content:center;
  }

  .nav-pill--actions .btn{
    flex:1;
    justify-content:center;
  }

  .nav-links a{
    min-height:34px;
    padding:0 12px;
  }

  body > main:first-of-type{
    padding-top:12px;
  }
}


/* ===== v23 header cleanup + smoother cards ===== */

/* Убираем отдельную кнопку меню из шапки */
.nav-pill--icon,
.header .burger.nav-pill--icon{
  display:none !important;
}

/* Шапка остаётся аккуратной: логотип слева, меню по центру, вход справа */
.nav.nav-oval{
  justify-content:space-between;
}

/* Чтобы текст в навигации и маленьких заголовках не ломался некрасиво */
.nav-pill,
.nav-links a,
.btn,
.brand,
.step-card h3,
.about-step h3,
.how-card h3,
.process-card h3{
  white-space:nowrap;
}

/* Исправление карточки "Зарегистрируйся": держим заголовок в одну строку */
.step-card h3,
.about-step h3,
.how-card h3,
.process-card h3{
  font-size:clamp(.98rem, 1.15vw, 1.18rem) !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
  max-width:100%;
  overflow-wrap:normal;
  word-break:normal;
}

/* Если карточки шагов узкие — делаем чуть компактнее внутренние отступы */
.step-card,
.about-step,
.how-card,
.process-card{
  overflow:hidden;
}

/* Более плавные карточки статистики "40+ / 24/7 / 5 / 12 000+" */
.stat,
.stats-card,
.about-stat,
.club-stat{
  border-radius:28px !important;
  background:
    radial-gradient(220px 130px at 78% 16%, rgba(255,0,51,.16), transparent 62%),
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(16,17,22,.88) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:
    0 18px 46px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.055) !important;
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    border-color .55s cubic-bezier(.16,1,.3,1),
    box-shadow .55s cubic-bezier(.16,1,.3,1),
    background .55s cubic-bezier(.16,1,.3,1) !important;
  will-change:transform;
}

.stat:hover,
.stats-card:hover,
.about-stat:hover,
.club-stat:hover{
  transform:translateY(-8px) scale(1.012);
  border-color:rgba(255,0,51,.28) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    0 0 42px rgba(255,0,51,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Мягкий блик без резких углов */
.stat::before,
.stats-card::before,
.about-stat::before,
.club-stat::before{
  border-radius:inherit;
}

/* Числа в статистике чуть компактнее и ровнее */
.stat h3,
.stat strong,
.stats-card h3,
.about-stat h3,
.club-stat h3{
  letter-spacing:-.06em !important;
  line-height:.95 !important;
}

/* На небольших экранах меню остаётся в одну горизонтальную строку со скроллом */
@media (max-width: 1180px){
  .nav-pill--links{
    flex-wrap:nowrap;
  }

  .nav-links a{
    flex:0 0 auto;
  }
}

@media (max-width: 760px){
  .nav.nav-oval{
    justify-content:center;
  }

  .nav-pill--brand{
    flex:0 1 auto;
  }

  .step-card h3,
  .about-step h3,
  .how-card h3,
  .process-card h3{
    font-size:1rem !important;
  }
}


/* ===== v24 fallback: keep step titles on one line ===== */
.start-step-card h3{
  white-space:nowrap !important;
  word-break:keep-all !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  font-size:clamp(.86rem, .98vw, 1.03rem) !important;
  line-height:1.08 !important;
}


/* v50: hide footer subtitle text */
.footer .footer-text,.footer-text{display:none!important;}