:root {
  --bg: #0d1018;
  --panel: #151a26;
  --panel-2: #1b2231;
  --text: #edf1f8;
  --muted: #aeb8cb;
  --line: #2b3244;
  --accent: #8b5cf6;
  --accent-2: #5eead4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, #0b0e15 0%, #121827 100%);
  line-height: 1.6;
}
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.narrow { width: min(760px, 100%); margin: 0 auto; }
.site-header, .site-footer { border-bottom: 1px solid var(--line); background: rgba(10,12,19,.88); backdrop-filter: blur(10px); }
.site-footer { border-top: 1px solid var(--line); border-bottom: 0; margin-top: 56px; }
.header-inner, .footer-inner { display:flex; align-items:center; justify-content:space-between; padding: 16px 0; gap: 20px; }
.brand { color: var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px; }
.brand span { color: var(--accent-2); }
.nav { display:flex; gap:18px; }
.nav a, .site-footer a { color: var(--muted); text-decoration:none; }
.hero { padding: 72px 0 56px; }
.hero-grid { display:grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items:start; }
.eyebrow { color: var(--accent-2); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); line-height:1.05; margin: 8px 0 20px; }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 16px; }
h3 { margin: 0 0 10px; }
.lede { color: var(--muted); font-size: 1.12rem; max-width: 60ch; }
.lede.small { font-size: 1rem; }
.hero-actions, .form-actions, .center { display:flex; gap: 14px; align-items:center; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 20px; border-radius: 12px; text-decoration:none; border:1px solid var(--line);
  cursor:pointer; font-weight:700; transition: .2s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--accent), #6d28d9); color: white; border-color: transparent; }
.btn-secondary { background: transparent; color: var(--text); }
.btn-small { padding: 9px 14px; font-size: .92rem; }
.btn:hover { transform: translateY(-1px); }
.hero-card, .card, .form-card, .band-block {
  background: rgba(21,26,38,.92); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.hero-card { padding: 24px; display:grid; gap: 16px; }
.stat { padding: 14px 0; border-bottom: 1px solid var(--line); }
.stat:last-child { border-bottom: 0; }
.stat strong { display:block; font-size: 1.25rem; }
.stat span { color: var(--muted); }
.section { padding: 56px 0; }
.section.alt { background: rgba(15,18,28,.45); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
blockquote {
  margin: 28px 0 0; padding: 22px 24px; border-left: 4px solid var(--accent-2); background: rgba(139,92,246,.08);
  border-radius: 0 14px 14px 0; font-size: 1.15rem; color: #f5f7fb;
}
.cards-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { padding: 22px; }
.form-wrap { width:min(920px, calc(100% - 32px)); }
.tss-form { display:grid; gap: 20px; }
.form-card { padding: 22px; }
.grid-2 { display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
label { display:grid; gap: 8px; color: var(--muted); font-size: .95rem; }
input, select, textarea {
  width:100%; padding: 12px 14px; border-radius: 12px; border:1px solid var(--line); background: var(--panel-2); color: var(--text);
  font: inherit;
}
textarea { resize: vertical; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom: 14px; }
.band-block { padding: 18px; margin-top: 14px; }
.remove-link { margin-top: 10px; background: none; border: 0; color: #fda4af; cursor:pointer; padding: 0; }
.center-block { text-align:center; padding-top: 80px; }
.success-msg { margin-top: 18px; color: var(--accent-2); }
.error-msg { margin-top: 18px; color: #fca5a5; }
@media (max-width: 860px) {
  .hero-grid, .cards-3, .grid-2 { grid-template-columns: 1fr; }
  .header-inner, .footer-inner, .section-head { flex-direction: column; align-items:flex-start; }
}