/* ---------- Цвета и базовые настройки ---------- */
:root{
  --purple:#67188c;
  --purple-2:#9b4dff;
  --black:#0a0a0a;
  --panel:#141016;
  --panel-2:#191322;
  --border:rgba(255,255,255,.08);
  --text:#eee;
  --muted:#bdbdbd;
  --glow:0 10px 30px rgba(155,77,255,.35);
  --radius:18px;
  --blur-amount:8px; /* силу блюра меняем через класс .is-blurred на body */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--black);
  color: var(--text);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  overflow-x:hidden;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- Фон с градиентами и шумом ---------- */
#bg{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(155,77,255,.20), transparent 60%),
    linear-gradient(180deg, #0e0a12 0%, #0a0a0a 60%);
}
/* Локальный блюр за карточкой */
.card{
  position:relative;
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

/* Псевдоэлемент занимает площадь карточки и блюрит только то, что сзади */
.card::before{
  content:"";
  position:absolute;
  inset:-6px;                 /* чуть больше, чтобы блюр выглядел мягче по краям */
  z-index:0;                  /* ниже содержимого карточки */
  backdrop-filter: blur(var(--blur-amount));
  -webkit-backdrop-filter: blur(var(--blur-amount));
  opacity:0;
  transition: opacity .18s ease;
  pointer-events:none;
}

/* При наведении включаем блюр и масштаб карточки */
.card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(155,77,255,.5);
  box-shadow: var(--glow);
}
.card:hover::before{ opacity:1; }

/* Контент внутри карточки должен быть выше блюра */
.card__media, .card__body { position: relative; z-index: 1; }


/* ---------- Шапка ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; gap:12px;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand__logo{width:36px; height:36px; border-radius:10px; box-shadow: var(--glow)}
.brand__name{font-weight:700; letter-spacing:.3px}

.discord-btn{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff; font-weight:600;
  background:linear-gradient(135deg,var(--purple),var(--purple-2));
  padding:10px 14px; border-radius:14px; box-shadow: var(--glow);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.discord-btn img{width:22px; height:22px}
.discord-btn:hover{ transform: translateY(-2px); box-shadow:0 14px 34px rgba(155,77,255,.45); filter:saturate(1.1)}

/* ---------- Хиро-блок ---------- */
.hero{padding:40px 0 10px}
.hero h1{font-size:40px; line-height:1.15; margin:10px 0 14px}
.hero .lead{font-size:18px; color:var(--text); margin:0 0 8px}
.hero .meta{color:var(--muted); margin:0}

/* ---------- Карточки общего назначения ---------- */
.cards{padding:26px 0}
.card{
  background: linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 0 0 0 rgba(0,0,0,0);
  overflow:hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  position:relative;
}
.card:hover{
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(155,77,255,.5);
  box-shadow: var(--glow);
}
.card__media{
  width:100%;
  aspect-ratio: 16/9;                  /* одинаковый размер всех изображений */
  background:#0b0b0d;
}
.card__media img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.card__body{padding:16px 16px 18px}
.card__body h3{margin:0 0 6px; font-size:18px}
.card__body p{margin:0; color:#d7d3dd}

/* ---------- Карточка-действие (ссылка) ---------- */
.card--action{
  display:grid; grid-template-columns:120px 1fr; gap:0; text-decoration:none; color:inherit;
  align-items:stretch;
}
@media (max-width:640px){ .card--action{ grid-template-columns:1fr } }
.card--action .card__media{ aspect-ratio:auto; width:100%; height:100%; display:grid; place-items:center; padding:14px }
.card--action .card__media img{ width:64px; height:64px; object-fit:contain }

/* ---------- Секции серверов ---------- */
.servers{padding:22px 0 34px}
.servers h2{margin:0 0 16px; font-size:24px}
.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:980px){ .grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

/* ---------- Футер ---------- */
.site-footer{padding:26px 0; color:#bcb7c7; border-top:1px solid var(--border); margin-top:20px}
.site-footer p{margin:0; text-align:center}

/* ---------- Эффект блюра фона при наведении на карточки ---------- */
.card:hover ~ .card,
.grid:hover .card{ /* просто лёгкий акцент на наведённую */
  /* (оставлено для будущих игрищ с контрастом) */
}
.servers h2 {
  text-align: center;
  font-size: 2rem;
  color: #b36bff;
  margin-bottom: 2rem;
}

.card__body h3 {
  color: #c88fff;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.card__body code {
  background: rgba(255,255,255,0.05);
  border-radius: 5px;
  padding: 2px 6px;
  color: #fff;
}

.card__body p {
  color: #d0cce0;
  line-height: 1.5;
}