/* ==== BTG — Gray/Black/Red theme v1.0.4 (wider columns, no banner lines) ==== */
:root{
  --bg: #0b0b0b;
  --panel: rgba(255,255,255,0.045);
  --border: rgba(255,255,255,0.10);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --accent: #ef4444;   /* red */
  --accent-2: #b91c1c; /* dark red */
  --glow: 0 0 24px rgba(239,68,68,.18);
}

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

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 700px at 80% -10%, rgba(239,68,68,.08), transparent 60%),
    radial-gradient(900px 700px at 20% 110%, rgba(0,0,0,.35), transparent 60%),
    var(--bg);
  line-height:1.6;
}

/* subtle background texture */
.bg-grid::before{
  content:""; position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:48px 48px; opacity:.35; pointer-events:none; z-index:-2;
}
.noise{position:fixed; inset:0; opacity:.15; mix-blend-mode:soft-light; z-index:-1; pointer-events:none;}

/* ── Layout ───────────────────────────────────────────────────── */
.container{
  max-width: clamp(980px, 86vw, 1320px);  /* шире, но адаптивно */
  margin:0 auto;
  padding:0 20px;
}
.flex{display:flex} .between{justify-content:space-between} .center-y{align-items:center}
.muted{color:var(--muted)}

/* ── Header / Nav ─────────────────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(10,10,10,0.75), rgba(10,10,10,0.35));
  border-bottom: 0 !important;   /* убираем линию над баннером */
  box-shadow: none !important;
}
.brand{gap:10px; text-decoration:none; color:var(--text)}
.brand-logo{
  font-family: Orbitron, Inter, sans-serif;
  letter-spacing:.5px; font-weight:800; font-size:20px;
  padding:8px 10px; border-radius:10px;
  background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(255,255,255,.02));
  border:1px solid var(--border);
}
.brand-sub{opacity:.75; font-weight:600}

.nav{display:flex; gap:14px}
.nav-link{
  position:relative;
  padding:10px 14px; border-radius:12px;
  text-decoration:none; color:var(--text);
  border:1px solid var(--border);
  background:var(--panel);
  transition: all .25s ease;
}
.nav-link:hover{ transform:translateY(-1px); box-shadow: var(--glow); border-color: rgba(239,68,68,.45); }
.nav-toggle{display:none}

.online{ padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:var(--panel) }
.badge-glow{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 20px rgba(239,68,68,.12) }

/* ── Global banner ────────────────────────────────────────────── */
.top-banner{ background: transparent !important; border: 0 !important; box-shadow: none !important; }
.top-banner::before, .top-banner::after{ content:none !important; }
.top-banner .container{ border:0 !important; box-shadow:none !important; }
.top-banner .banner-link img{
  display:block; width:100%; height:auto; max-height:90px; object-fit:cover;
  border-radius:12px; border:1px solid var(--border); /* поставь 0 если рамка не нужна */
  margin:12px 0;
}
.top-banner + .hero, .top-banner + .section{ border-top: 0 !important; }

/* ── Hero ─────────────────────────────────────────────────────── */
.hero{ padding:72px 0 28px }
.hero .title{
  font-family: Orbitron, Inter, sans-serif;
  font-size:44px; letter-spacing:.5px; line-height:1.1;
  margin:0 0 12px; text-shadow: 0 0 22px rgba(239,68,68,.25);
}
.lead{font-size:18px; color:var(--muted); max-width:780px}

.actions{display:flex; gap:14px; margin-top:26px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 18px; border-radius:14px; font-weight:700;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  text-decoration:none; transition:all .25s ease; cursor:pointer;
}
.btn-primary{ background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.08)); box-shadow: var(--glow); border-color: rgba(239,68,68,.35) }
.btn:hover{ transform:translateY(-1px); box-shadow:var(--glow); border-color: rgba(239,68,68,.45) }

/* ── Cards / Grid (шире колонки) ──────────────────────────────── */
.grid{display:grid; gap:20px}
.grid.cols-3{ grid-template-columns: repeat(3, minmax(360px, 1fr)); } /* было 1fr; сделали шире */
@media (max-width:1200px){ .grid.cols-3{ grid-template-columns: repeat(2, minmax(360px, 1fr)); } }
@media (max-width:760px){ .grid.cols-3{ grid-template-columns: 1fr; } }

.card{
  padding:20px; border-radius:18px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  backdrop-filter: blur(8px);
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow: var(--glow) }

.section{ padding:40px 0 }

/* формы и текстовые поля заполняют карточку */
.card form textarea{
  width:100%;
  min-height:220px;
  background:#0f0f0f;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  resize:vertical;
}
.card form input[type="text"],
.card form input[type="number"]{
  background:#0f0f0f;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:7px 10px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.site-footer{
  margin-top:60px; padding:24px 0;
  border-top:1px solid var(--border);
  background:linear-gradient(180deg, rgba(10,10,10,0.2), rgba(10,10,10,0.35));
}
.site-footer a{ color:var(--text); text-decoration:none; opacity:.85; margin-left:14px }
.site-footer a:hover{ opacity:1 }

/* ── Reveal animation ─────────────────────────────────────────── */
.reveal{ opacity:0; transform: translateY(12px); transition: all .6s ease }
.reveal.in{ opacity:1; transform:none }

/* ── Mobile nav ───────────────────────────────────────────────── */
@media (max-width:900px){
  .nav{
    display:none; position:absolute; right:20px; top:64px;
    flex-direction:column; background:var(--panel);
    padding:12px; border-radius:14px; border:1px solid var(--border);
  }
  .nav-toggle{
    display:block; width:38px; height:38px;
    border-radius:10px; border:1px solid var(--border);
    background:var(--panel); position:relative;
  }
  .nav-toggle::before,.nav-toggle::after{
    content:""; position:absolute; left:9px; right:9px;
    height:2px; background:#fff; transition:.25s;
  }
  .nav-toggle::before{ top:12px } .nav-toggle::after{ top:22px }
  .nav.open{ display:flex }
}