@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Montserrat',sans-serif}
body{line-height:1.6;color:#333;background:#f9fafb}
header{background:#0f172a;color:#fff;padding:20px}
nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
nav a{color:#fff;margin:0 12px;text-decoration:none;font-weight:600;font-size:1rem}
nav a:hover{color:#ff9800}
.hero{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;padding:80px 20px;text-align:center}
.hero h1{font-size:2.8rem;margin-bottom:20px}
.hero p{font-size:1.2rem;margin-bottom:30px}
.cta{background:#ff9800;color:#000;padding:14px 28px;border-radius:30px;text-decoration:none;font-weight:700}
.container{max-width:1200px;margin:auto;padding:40px 20px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px}
.card{background:#fff;padding:30px;border-radius:15px;box-shadow:0 8px 24px rgba(0,0,0,0.08);transition:all 0.3s ease}
.card:hover{transform:translateY(-5px);box-shadow:0 12px 32px rgba(0,0,0,0.12)}
footer{background:#0f172a;color:#fff;text-align:center;padding:30px;margin-top:40px}
form input, form textarea{width:100%;padding:12px;margin:10px 0;border:1px solid #ccc;border-radius:8px}
form button{width:100%;padding:14px;background:#2563eb;color:#fff;border:none;border-radius:10px;font-weight:700;cursor:pointer}
form button:hover{background:#1d4ed8}
@media(max-width:768px){.hero h1{font-size:2rem};nav{flex-direction:column;align-items:flex-start};.grid{grid-template-columns:1fr}}