:root{
  --text:#ffffff;
  --bg:#080616;

  --violet:#7a41ff;
  --cyan:#59d6ff;
  --gold:#ffda74;

  /* путь как у тебя */
  --hero-bg:url("img/hero-bg.jpg");

  /* базовая ширина и отступы */
  --container: 1520px;
  --padX: 64px;
  --topbarH: 92px; /* высота шапки (site-header) */

  /* -20% коэффициент */
  --k: .8;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:"Exo 2", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

.page{ min-height:100vh; }

/* =========================================================
   SITE HEADER (меню как в старом файле)
   ========================================================= */
.site-header{
  position:fixed;
  left:0; right:0; top:0;
  z-index:60;
  padding:12px 0;
}

.site-header__inner{
  width:min(var(--container), calc(100vw - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:18px;

  padding:10px 18px;
  border-radius:18px;

  background: linear-gradient(180deg, rgba(20, 10, 45, .55), rgba(10, 6, 24, .28));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

/* brand */
.brand-link{
  display:flex;
  flex-direction:column;
  gap:2px;
  text-decoration:none;
  color:#fff;
  line-height:1.05;
  min-width: 220px;
}

.brand-logo-mini{
  display:none; /* если хочешь кружок/иконку — скажи, добавлю */
}

.brand-text-main{
  font-weight:900;
  letter-spacing:.2px;
  font-size:16px;
}

.brand-text-tagline{
  font-weight:700;
  opacity:.75;
  font-size:12px;
}

/* nav */
.site-nav{
  margin:0 auto;
}

.site-nav__menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:14px;
}

.site-nav__menu > li{
  position:relative;
}

.site-nav__menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  color:rgba(255,255,255,.90);
  font-weight:900;
  letter-spacing:.9px;
  font-size:14px;
  padding:8px 14px;
  border-radius:14px;
  text-transform:uppercase;

  background:transparent;
  border:1px solid transparent;
  white-space:nowrap;
}

.site-nav__menu a:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.10);
}

/* dropdown */
.site-nav__dropdown > a.has-sub::after{
  content:"▾";
  margin-left:8px;
  font-weight:900;
  opacity:.75;
  transform: translateY(-1px);
}

.site-nav__submenu{
  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 260px;

  list-style:none;
  margin:0;
  padding:10px;

  border-radius:16px;
  background: rgba(18, 12, 32, .92);
  border:1px solid rgba(180, 120, 255, .22);
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);

  display:none;
}

.site-nav__submenu li a{
  width:100%;
  justify-content:flex-start;
  text-transform:none;
  letter-spacing:.2px;
  font-weight:800;
  font-size:13px;
  padding:10px 12px;
  border-radius:12px;
}

.site-nav__dropdown:hover .site-nav__submenu{
  display:block;
}

/* actions button */
.site-header__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.btn-pill{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;

  height:44px;
  padding:0 16px;
  border-radius:14px;
  text-decoration:none;

  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  color:#fff;
  white-space:nowrap;
}

.btn-pill--primary{
  background: linear-gradient(180deg, rgba(120,70,255,.95), rgba(60,40,220,.80));
  border-color: rgba(180,140,255,.55);
  box-shadow: 0 14px 30px rgba(80,40,200,.32);
}

.btn-pill__title{
  font-weight:900;
  letter-spacing:.4px;
  font-size:13px;
  text-transform:uppercase;
}

.btn-pill__note{
  font-weight:800;
  font-size:11px;
  opacity:.82;
}

/* burger */
.burger{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  padding:0;
}

.burger span{
  display:block;
  width:18px;
  height:2px;
  background: rgba(255,255,255,.92);
  margin:4px auto;
  border-radius:2px;
  opacity:.9;
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh;
  padding-top: var(--topbarH);
}

.hero__bg{
  position:absolute;
  inset:0;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  filter: saturate(1.05) contrast(1.05);
}

.hero__vignette{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(900px 520px at 70% 30%, rgba(255,190,120,.16), transparent 60%),
    radial-gradient(900px 520px at 18% 72%, rgba(140,80,255,.28), transparent 65%),
    linear-gradient(180deg, rgba(5,3,12,.22), rgba(5,3,12,.65));
}

.hero__content{
  position:relative;
  width:min(var(--container), 100vw);
  margin:0 auto;
  padding: calc(58px * var(--k)) var(--padX) calc(26px * var(--k));

  display:grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(80px * var(--k));
  row-gap: calc(18px * var(--k));
  align-items:start;
}

/* LEFT */
.hero__left{
  max-width: calc(860px * var(--k));
}

.title-row{
  display:flex;
  gap: calc(22px * var(--k));
  align-items:center;
  margin-bottom: calc(16px * var(--k));
}

.logo{
  width: calc(148px * var(--k));
  height: calc(148px * var(--k));
  flex:0 0 auto;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

/* name */
.server-name{
  position:relative;
  font-size: clamp(34px, 4.2vw, calc(64px * var(--k)));
  font-weight:900;
  letter-spacing:.2px;
  line-height:1;
  text-transform:lowercase;

  color:#03eafa;
  -webkit-text-stroke: 8px rgba(0,0,0,.35);
  text-shadow:
    0 10px 40px rgba(0,0,0,.55),
    0 0 30px rgba(255, 90, 252, 0.30);
}

.server-name::after{
  content: attr(data-name);
  position:absolute;
  inset:0;
  color:#ffffff;
  -webkit-text-stroke: 0;
  opacity:.28;
  pointer-events:none;
}

.headline{
  margin: calc(16px * var(--k)) 0 calc(12px * var(--k));
  font-size: clamp(40px, 5.2vw, calc(68px * var(--k)));
  line-height:1.0;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 16px 45px rgba(0,0,0,.55);
}

.headline span{
  display:block;
  margin-top: calc(12px * var(--k));
  color:var(--cyan);
  text-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 26px rgba(242, 98, 255, 0.82);
}

.lead{
  margin:0;
  font-size: calc(18px * var(--k));
  line-height:1.55;
  color:rgba(255,255,255,.82);
  text-shadow:0 10px 40px rgba(0,0,0,.55);
}

.lead b{ color:rgba(140,220,255,.95); font-weight:900; }

.lead::before{
  content:"";
  display:block;
  width: calc(520px * var(--k));
  max-width:100%;
  height:2px;
  margin: calc(14px * var(--k)) 0;
  background:linear-gradient(90deg, rgba(140,220,255,.35), rgba(140,220,255,0));
  opacity:.75;
}

/* stats */
.stats{
  display:flex;
  gap: calc(14px * var(--k));
  align-items:center;
  margin-top: calc(18px * var(--k));
  flex-wrap:wrap;
}

.pill{
  display:flex;
  gap:10px;
  align-items:center;
  padding: calc(12px * var(--k)) calc(16px * var(--k));
  border-radius: calc(16px * var(--k));
  background:linear-gradient(180deg, rgba(40,22,78,.55), rgba(18,10,40,.30));
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

.pill__dot{
  width:10px; height:10px; border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,.25) 45%, transparent 70%),
    linear-gradient(90deg, var(--cyan), var(--violet));
  box-shadow: 0 0 14px rgba(120,190,255,.35);
}

.pill__big{ font-weight:900; font-size: calc(18px * var(--k)); }
.pill__small{ font-weight:800; font-size: calc(14px * var(--k)); opacity:.85; }
.pill--flat .pill__small{ display:none; }

/* =========================================================
   TOPS (онлайн/голоса)
   ========================================================= */
.tops{
  margin-top: calc(18px * var(--k));
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(14px * var(--k));
  max-width: calc(720px * var(--k));
}

.tops__card{
  border-radius: calc(18px * var(--k));
  padding: calc(14px * var(--k));
  background: linear-gradient(180deg, rgba(40,22,78,.55), rgba(18,10,40,.28));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  overflow:hidden;
}

.tops__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: calc(10px * var(--k));
}

.tops__title{
  font-weight: 900;
  letter-spacing: .3px;
  font-size: calc(14px * var(--k));
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
}

.tops__hint{
  font-weight: 800;
  font-size: calc(12px * var(--k));
  opacity: .7;
}

.tops__list{
  display:flex;
  flex-direction:column;
  gap: calc(10px * var(--k));
}

.tops__empty{
  display:none;
  font-size: calc(13px * var(--k));
  opacity: .75;
  padding: calc(8px * var(--k)) 0;
}

.top-player{
  display:flex;
  align-items:center;
  gap: calc(10px * var(--k));
  text-decoration:none;
  color:#fff;

  padding: calc(10px * var(--k)) calc(10px * var(--k));
  border-radius: calc(14px * var(--k));

  background: rgba(10, 8, 18, .28);
  border: 1px solid rgba(180, 120, 255, .16);
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}

.top-player:hover{
  transform: translateY(-1px);
  border-color: rgba(200, 150, 255, .30);
  background: rgba(18, 12, 32, .40);
}

.top-player__avatar-wrap{
  width: calc(42px * var(--k));
  height: calc(42px * var(--k));
  border-radius: calc(12px * var(--k));
  padding: calc(3px * var(--k));

  background: linear-gradient(180deg, rgba(120,70,255,.40), rgba(20,10,45,.20));
  border: 1px solid rgba(180,140,255,.35);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  flex: 0 0 auto;
}

.top-player__avatar-inner{
  width:100%;
  height:100%;
  border-radius: calc(10px * var(--k));
  background: rgba(0,0,0,.25);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.top-player__avatar-inner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering: pixelated;
}

.top-player__name{
  font-weight: 900;
  letter-spacing:.2px;
  font-size: calc(14px * var(--k));
  opacity:.95;

  min-width: 0;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.top-player__meta{
  font-weight: 900;
  font-size: calc(13px * var(--k));
  opacity: .85;
  flex: 0 0 auto;
  padding-left: calc(8px * var(--k));
}

/* =========================================================
   RIGHT: wipe в НИЖНЕМ ПРАВОМ УГЛУ реально
   (без absolute на hero__right — чтобы не ломать layout)
   ========================================================= */
.hero__right{
  position:relative;
  min-height: calc(520px * var(--k));
}

/* сам блок крепим к низу/право ВНУТРИ правой колонки */
.wipe{
  position:absolute;
  right: 0;
  bottom: 0;

  width: calc(560px * var(--k));
  max-width: 46vw;

  text-align:left;
  padding-left: 18px;
}

.wipe__topline{
  position:absolute;
  left:0;
  top:6px;
  width: calc(420px * var(--k));
  height:2px;
  background:linear-gradient(90deg, rgba(255,218,116,.55), rgba(255,218,116,0));
  opacity:.55;
}

.wipe__meta{
  color:rgba(21, 255, 0, 0.88);
  font-weight:900;
  letter-spacing:.4px;
  font-size: calc(18px * var(--k));
  margin-bottom: calc(8px * var(--k));
}

.wipe__title{
  color:rgba(254, 81, 165, 0.94);
  font-weight:900;
  font-size: clamp(20px, 2.6vw, calc(32px * var(--k)));
  line-height:1.05;
  text-shadow:0 16px 40px rgba(0,0,0,.55);
}

.wipe__midline{
  width: calc(520px * var(--k));
  max-width:100%;
  height:2px;
  margin: calc(12px * var(--k)) 0 calc(10px * var(--k));
  background:linear-gradient(90deg, rgba(255,218,116,.40), rgba(255,218,116,0));
  opacity:.55;
}

.wipe__desc{
  color:rgba(255,255,255,.80);
  font-size: calc(16px * var(--k));
  line-height:1.55;
  text-shadow:0 10px 35px rgba(0,0,0,.55);
}

.wipe__btn{
  margin-top: calc(14px * var(--k));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: calc(44px * var(--k));
  padding:0 calc(22px * var(--k));
  border-radius: calc(14px * var(--k));
  text-decoration:none;
  font-weight:900;
  letter-spacing:.6px;
  color:#fff;

  background:linear-gradient(180deg, rgba(40,22,78,.60), rgba(18,10,40,.35));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
  box-shadow:0 18px 50px rgba(0,0,0,.40);
}

/* =========================================================
   CTA
   ========================================================= */
.hero__cta{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  margin-top: calc(22px * var(--k));
  padding-bottom: calc(28px * var(--k));
  position:relative;
  z-index:10;
}

.cta{
  position:relative;
  width: calc(420px * var(--k));
  padding: calc(10px * var(--k));
  border-radius: calc(20px * var(--k));
  text-decoration:none;

  display:inline-flex;
  justify-content:center;
  align-items:center;

  border:2px solid rgba(170,205,255,.85);
  background:rgba(28,22,70,.45);
  box-shadow:0 22px 90px rgba(90,60,220,.35);
  backdrop-filter: blur(12px);
}

.cta::before{
  content:"";
  position:absolute;
  inset: calc(-10px * var(--k));
  border-radius: calc(26px * var(--k));
  background: radial-gradient(420px 140px at 50% 65%, rgba(150,120,255,.35), transparent 65%);
  filter: blur(14px);
  opacity:.9;
  z-index:0;
}

.cta__inner{
  position:relative;
  z-index:1;
  width:100%;
  text-align:center;

  padding: calc(16px * var(--k)) calc(18px * var(--k));
  border-radius: calc(14px * var(--k));

  background: linear-gradient(180deg, rgba(90,70,255,.30), rgba(16,18,55,.55));
  border: 2px solid rgba(200,225,255,.35);

  font-size: calc(30px * var(--k));
  font-weight:900;
  letter-spacing:1px;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.cta__inner::before,
.cta__inner::after{
  content:"×";
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size: calc(22px * var(--k));
  font-weight:900;
  color:rgba(160,190,255,.55);
  text-shadow:0 0 16px rgba(120,170,255,.25);
}

.cta__inner::before{ left: calc(18px * var(--k)); }
.cta__inner::after{ right: calc(18px * var(--k)); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1200px){
  :root{ --padX:20px; --topbarH:88px; }

  .site-nav{ display:none; }
  .burger{ display:inline-flex; align-items:center; justify-content:center; }

  /* открытое меню (бургер) */
  .site-header--menu-open .site-nav{
    display:block;
    width:100%;
    margin: 10px 0 0;
  }

  .site-header--menu-open .site-nav__menu{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:10px;
    border-radius:16px;
    background: rgba(18, 12, 32, .92);
    border:1px solid rgba(180, 120, 255, .22);
    box-shadow:0 24px 80px rgba(0,0,0,.55);
  }

  .site-header--menu-open .site-nav__submenu{
    position:static;
    display:block;
    margin-top:8px;
    min-width:0;
  }

  .hero__content{
    grid-template-columns: 1fr;
    row-gap:18px;
    padding: 28px var(--padX) 24px;
  }

  .tops{
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  /* wipe возвращаем в поток, чтобы не перекрывал CTA */
  .hero__right{ min-height:auto; }
  .wipe{
    position:static;
    width:100%;
    max-width:100%;
    padding-left:0;
    margin-top: 18px;
  }
  .wipe__topline{ display:none; }
}

/* если экран очень низкий */
@media (max-height: 820px){
  .hero__content{ padding-top: calc(34px * var(--k)); }
}
/* =========================================================
   CTA MODAL
   ========================================================= */
.cta-modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.cta-modal--open{ display: block; }

.cta-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(6px);
}

.cta-modal__dialog{
  position: relative;
  width: min(560px, calc(100vw - 28px));
  max-height: min(82vh, 760px);
  overflow: auto;

  margin: 78px auto;
  border-radius: 18px;
  padding: 18px;

  background: rgba(18, 12, 32, .92);
  border: 1px solid rgba(180, 120, 255, .28);
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  isolation: isolate;
}

.cta-modal__close{
  position:absolute;
  right: 12px;
  top: 12px;

  width: 38px;
  height: 38px;
  border-radius: 12px;

  border: 1px solid rgba(180, 120, 255, .25);
  background: rgba(10, 8, 18, .45);
  color: #fff;

  cursor: pointer;
  font-size: 24px;
  line-height: 36px;
  text-align: center;

  transition: transform .15s ease, border-color .15s ease;
}

.cta-modal__close:hover{
  transform: translateY(-1px);
  border-color: rgba(200, 150, 255, .55);
}

.cta-modal__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;

  background: rgba(10, 8, 18, .35);
  border: 1px solid rgba(180, 120, 255, .18);

  font-weight: 900;
  letter-spacing: .2px;
  font-size: 13px;
  opacity: .95;
}

.cta-modal__dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 140, 220, .95);
  box-shadow: 0 0 18px rgba(255, 140, 220, .65);
}

.cta-modal__title{
  margin: 14px 0 8px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.cta-modal__text{
  margin: 0 0 14px 0;
  opacity: .9;
  line-height: 1.45;
}

.cta-modal__actions{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.cta-modal__btn{
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;

  font-weight: 900;
  letter-spacing: .4px;
  color:#fff;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);

  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.cta-modal__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(200,150,255,.35);
  background: rgba(26, 18, 48, .55);
}

.cta-modal__btn--primary{
  background: linear-gradient(180deg, rgba(120,70,255,.95), rgba(60,40,220,.80));
  border-color: rgba(180,140,255,.55);
  box-shadow: 0 14px 30px rgba(80,40,200,.32);
}

.cta-modal__note{
  margin-top: 12px;
  font-size: 13px;
  opacity: .85;
  text-align: center;
}

.cta-modal__note a{
  color: rgba(140,220,255,.95);
  font-weight: 900;
  text-decoration: none;
}

.cta-modal__note a:hover{
  text-decoration: underline;
}
/* =========================
   MOBILE FIX (phones)
   ========================= */

@media (max-width: 980px){
  :root{
    --padX: 16px;
    --topbarH: 76px;
    --k: 1; /* на телефоне не уменьшаем через коэффициент */
  }

  /* HERO layout */
  .hero__content{
    width: 100%;
    padding: 22px var(--padX) 18px;
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 16px;
  }

  /* left */
  .hero__left{ max-width: 100%; }

  .title-row{
    gap: 14px;
    margin-bottom: 10px;
  }

  .logo{
    width: 86px;
    height: 86px;
  }

  .server-name{
    font-size: clamp(28px, 7vw, 44px);
    -webkit-text-stroke: 6px rgba(0,0,0,.35);
  }

  .headline{
    font-size: clamp(34px, 9vw, 48px);
    margin: 10px 0 8px;
  }
  .headline span{ margin-top: 8px; }

  .lead{
    font-size: 15px;
    line-height: 1.45;
  }
  .lead::before{
    width: 100%;
    margin: 12px 0;
  }

  .stats{
    gap: 10px;
    margin-top: 14px;
  }
  .pill{
    padding: 10px 12px;
    border-radius: 14px;
  }
  .pill__big{ font-size: 16px; }
  .pill__small{ font-size: 13px; }

  /* TOPS: в одну колонку */
  .tops{
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .tops__card{
    padding: 12px;
    border-radius: 16px;
  }

  /* RIGHT wipe: возвращаем в поток (никаких absolute) */
  .hero__right{
    position: static;
    min-height: auto;
    display: block;
  }
  .wipe{
    position: relative;
    right: auto;
    bottom: auto;

    width: 100%;
    max-width: 100%;
    padding-left: 0;
    margin-top: 6px;
  }
  .wipe__topline{ display:none; }
  .wipe__midline{ width: 100%; }

  /* CTA */
  .hero__cta{
    margin-top: 14px;
    padding-bottom: 18px;
  }
  .cta{
    width: 100%;
    max-width: 520px;
  }
  .cta__inner{
    font-size: 22px;
    padding: 14px 16px;
  }
  .cta__inner::before,
  .cta__inner::after{
    display:none; /* на телефоне чтобы не “жало” по краям */
  }
}

/* =========================
   HEADER / BURGER (phones)
   ========================= */

@media (max-width: 980px){
  /* скрываем меню по умолчанию */
  .site-nav{
    position: fixed;
    left: 14px;
    right: 14px;
    top: calc(var(--topbarH) + 10px);
    z-index: 999;

    display: none;
    padding: 14px;
    border-radius: 18px;

    background: rgba(18, 12, 32, .92);
    border: 1px solid rgba(180, 120, 255, .28);
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
  }

  .site-header--menu-open .site-nav{ display:block; }

  .site-nav__menu{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
  }

  .site-nav__menu > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 12px 12px;
    border-radius: 14px;
    text-decoration: none;

    color: rgba(255,255,255,.92);
    font-weight: 800;
    letter-spacing: .3px;

    background: rgba(10, 8, 18, .28);
    border: 1px solid rgba(180, 120, 255, .16);
  }

  /* dropdown: показываем подпункты аккуратно */
  .site-nav__submenu{
    margin: 8px 0 0 0;
    padding: 8px;
    border-radius: 14px;

    background: rgba(10, 8, 18, .24);
    border: 1px solid rgba(180, 120, 255, .12);

    display: grid;
    gap: 8px;
  }
  .site-nav__submenu a{
    display:block;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration:none;

    color: rgba(255,255,255,.88);
    font-weight: 700;

    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
  }

  /* кнопка скачать и бургер */
  .site-header__actions{
    display:none; /* чтобы не раздувало шапку */
  }
  .burger{
    display:inline-flex;
  }
}

/* =========================
   CTA MODAL (phones)
   ========================= */
@media (max-width: 980px){
  .cta-modal__dialog{
    width: min(520px, calc(100vw - 20px));
    margin: 16px auto;
    border-radius: 16px;
    padding: 14px;
  }

  .cta-modal__title{ font-size: 18px; }
  .cta-modal__text{ font-size: 14px; }

  .cta-modal__actions{
    display: grid;
    gap: 10px;
  }

  .cta-modal__btn{
    width: 100%;
    justify-content: center;
  }
}