:root{
  --primary:#0c0c0c;
  --secondary:#7e838b;
  --bg:#f3f4f6;
}
*{box-sizing:border-box}
body{margin:0;font-family:'Segoe UI',Arial,Helvetica,sans-serif;background:var(--bg);color:#111827}
header{background:linear-gradient(90deg,var(--primary),var(--secondary));color:#fff;padding:18px 40px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:40;box-shadow:0 10px 30px rgba(0,0,0,.12)}
nav a{color:#fff;margin-left:16px;text-decoration:none;font-weight:600}
nav a:hover{text-decoration:underline}
.hero{padding:50px 40px;background:linear-gradient(120deg,var(--secondary),var(--primary));color:#fff}
.container{padding:45px 40px;max-width:1150px;margin:auto}
.card{background:#fff;border-radius:20px;box-shadow:0 25px 50px rgba(0,0,0,.08);padding:22px;transition:.3s}
.card:hover{transform:translateY(-4px)}
img.rounded{border-radius:18px;width:100%}
.section-title{font-size:28px;font-weight:700}
footer{background:#020617;color:#cbd5f5;text-align:center;padding:22px}
button{background:var(--secondary);color:#fff;border:none;padding:12px 20px;border-radius:14px}