:root{
  --blue:#0b4ea2;
  --green:#21a041;
  --muted:#6b7280;
  --radius:12px;
}
*{box-sizing:border-box}
body{font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#0f172a; background:#fff; -webkit-font-smoothing:antialiased}
.container{max-width:1100px; margin:0 auto; padding:24px}
.site-header{border-bottom:1px solid #eef2f7; background:#fff; position:sticky; top:0; z-index:50}
.site-header .container{display:flex; align-items:center; gap:16px}
.logo{height:64px}
.nav{margin-left:auto; display:flex; gap:16px; align-items:center}
.nav a{color:var(--muted); text-decoration:none; font-weight:600}
.hero{display:flex; align-items:center; gap:32px; padding:48px 24px}
.hero-content{flex:1}
.hero-image img{max-width:320px; width:100%; height:auto; display:block}
h1{font-size:34px; margin:0 0 8px; color:var(--blue)}
.lead{color:var(--muted); font-size:18px}
.cta{display:inline-block; margin-top:16px; background:var(--green); color:white; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:700}
.card{background:#fff; border-radius:var(--radius); box-shadow:0 6px 18px rgba(11,78,162,0.06); padding:24px; margin-top:24px}
.service-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin-top:16px}
.service{background:linear-gradient(180deg, rgba(11,78,162,0.03), rgba(33,160,65,0.01)); border-radius:10px; padding:16px}
.service h3{margin:0 0 8px; color:var(--blue)}

.contact-form{display:grid; gap:12px; max-width:700px}
.contact-form label{font-weight:600}
.contact-form input, .contact-form textarea{padding:10px; border:1px solid #e5e7eb; border-radius:8px; font-size:15px}
.btn{background:var(--blue); color:white; border:none; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer}
.contact-email{margin-top:12px; color:var(--muted)}

.site-footer{border-top:1px solid #f1f5f9; margin-top:32px; padding:16px 0; background:#fff; color:var(--muted)}
.small{font-size:13px; color:var(--muted)}

@media(max-width:800px){
  .hero{flex-direction:column; text-align:center}
  .nav{display:none}
  .logo{height:56px}
}