:root {
  --bg:#0a0a0a;--panel:#111214;--soft:#17181b;--accent:#e11d48;--text:#e5e7eb;--muted:#9ca3af;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin: 0;
  background: linear-gradient(135deg, #0f0c29bb, #302b63bb, #24243ebb),
              url("https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  line-height: 1.6;
}
a{color:var(--accent); text-decoration:none}

.container{max-width:1100px; margin:0 auto; padding:0 20px}

header{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:#0b0b0db3; border-bottom:1px solid #1f1f22;
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent)}
.nav a{padding:8px 12px;border-radius:10px}
.nav a:hover{background:#1a1b1f}

.hero{padding:60px 0;text-align:center}
h1{font-size:44px;line-height:1.2}
h1 span{color:var(--accent)}

.eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:14px;margin-bottom:16px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}

.card{
  background:linear-gradient(180deg,#141519,#0f1013);
  border:1px solid #1c1d22;
  border-radius:var(--radius);
  box-shadow:0 12px 30px #000a;
  overflow:hidden;
  transition:.2s;
}
.card:hover{transform:translateY(-4px)}

.card .thumb {
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
}

.card .content {padding:16px}
.card h3{margin:0 0 8px;font-size:20px}
.card p{color:#cbd5e1;margin:0 0 12px}

.btn{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:linear-gradient(90deg,#ef4444,#e11d48);
  color:white;
  font-weight:600;
  text-align:center;
  transition:all .2s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px #e11d4860}

footer.site{padding:20px 0;text-align:center;color:#9aa2b2;border-top:1px solid #1a1b20;margin-top:40px}
