* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Arial, Helvetica, sans-serif; color: #1f2937; background: #f8fafc; line-height: 1.6; }
.navbar { max-width: 1100px; margin: auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
header { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
.logo { font-size: 1.35rem; font-weight: 800; color: #111827; text-decoration: none; }
.nav-links { display: flex; gap: 24px; flex-wrap: wrap; }
.nav-links a { color: #4b5563; text-decoration: none; font-weight: 600; }
.nav-links a:hover, .nav-links a.active { color: #2563eb; }
.hero { min-height: 68vh; display: flex; align-items: center; padding: 80px 24px; background: linear-gradient(135deg, #eff6ff, #f8fafc); }
.hero > div { max-width: 1100px; width: 100%; margin: auto; }
.eyebrow { color: #2563eb; font-weight: 800; letter-spacing: .12em; font-size: .82rem; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.05; margin: 12px 0 20px; color: #111827; }
h2 { font-size: 2rem; color: #111827; }
.hero-text { max-width: 650px; font-size: 1.2rem; color: #4b5563; }
.buttons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.button { display: inline-block; padding: 12px 20px; border-radius: 8px; text-decoration: none; font-weight: 700; border: 0; cursor: pointer; font-size: 1rem; }
.primary { background: #2563eb; color: #fff; }
.primary:hover { background: #1d4ed8; }
.secondary { background: #fff; color: #2563eb; border: 1px solid #bfdbfe; }
.section { max-width: 1100px; margin: auto; padding: 70px 24px; }
.narrow { max-width: 850px; min-height: 65vh; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 30px; }
.card { background: #fff; padding: 26px; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,.04); }
.card h3 { margin-top: 0; color: #111827; }
.contact-form { margin-top: 30px; display: grid; gap: 18px; }
.contact-form label { display: grid; gap: 7px; font-weight: 700; }
input, textarea { width: 100%; padding: 12px; border: 1px solid #d1d5db; border-radius: 7px; font: inherit; }
textarea { resize: vertical; }
.note { color: #6b7280; font-size: .9rem; }
footer { text-align: center; padding: 25px; background: #111827; color: #d1d5db; }
footer p { margin: 0; }
@media (max-width: 650px) { .navbar { align-items: flex-start; flex-direction: column; } .nav-links { gap: 14px; } .hero { padding: 60px 20px; } }