:root{
  --bg: #0b0f1a;
  --accent1: #ff4f3f;
  --accent2: #6b32ff;
  --white: #ffffff;
  --muted: #aeb6d1;
}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,Arial,Helvetica,sans-serif;background:var(--bg);color:var(--white);}
.nav{display:flex;justify-content:space-between;align-items:center;padding:18px 36px}
.brand{display:flex;align-items:center;gap:12px}
.logo-img{width:54px;height:54px;border-radius:10px}
.brand-name{font-weight:800;font-size:20px}
.nav-links a{margin-left:18px;color:var(--white);text-decoration:none;font-weight:700;opacity:0.9}
.hero{display:flex;align-items:center;gap:36px;padding:28px 36px;background:linear-gradient(90deg, rgba(255,79,63,0.06), rgba(107,50,255,0.06));border-bottom:1px solid rgba(255,255,255,0.03)}
.hero-img{width:360px;border-radius:20px;box-shadow:0 30px 80px rgba(19,12,35,0.6)}
.hero-text{max-width:720px}
.hero-text h1{font-size:48px;margin:0 0 12px 0}
.hero-text p{color:var(--muted);font-size:18px;margin:0 0 18px}
.cta .btn{padding:12px 18px;border-radius:12px;text-decoration:none;font-weight:800;margin-right:12px;background:var(--white);color:#07070a}
.cta .btn.primary{background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;box-shadow:0 12px 30px rgba(107,50,255,0.12)}
.main{display:grid;grid-template-columns:1fr 360px;gap:24px;max-width:1100px;margin:28px auto;padding:0 18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card h2, .card h3{margin:0 0 12px 0;color:var(--white)}
.card p, .card li{color:var(--muted);line-height:1.6}
.side{padding-right:12px}
.full{grid-column:1/-1;text-align:center}
.social{display:inline-block;background:linear-gradient(90deg,var(--accent1),var(--accent2));padding:10px 16px;border-radius:10px;color:#fff;font-weight:800;margin-right:10px;text-decoration:none}
.foot{padding:20px;text-align:center;color:var(--muted)}
@media (max-width:900px){
  .hero{flex-direction:column; text-align:center}
  .hero-img{width:80%;max-width:420px}
  .main{grid-template-columns:1fr;padding:0 12px}
}