:root{
  --primary:#0D47A1;
  --primary-700:#0B3C8A;
  --accent:#FF6F00;
  --bg:#FFFFFF;
  --muted:#F5F7FB;
  --text:#0F172A;
  --subtext:#475569;
  --ring: rgba(13,71,161,0.25);
  --radius: 16px;
  --shadow: 0 10px 25px rgba(2,6,23,0.08), 0 2px 8px rgba(2,6,23,0.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text); background:var(--bg); line-height:1.6;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.1rem; border-radius:999px; font-weight:600;
  border:1px solid transparent; box-shadow:var(--shadow); transition:all .2s ease;
}
.btn-primary{ background:var(--accent); color:white}
.btn-primary:hover{ transform:translateY(-1px)}
.btn-outline{ background:white; border-color:#e5e7eb}
.btn-outline:hover{ border-color:#cbd5e1}
.badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .7rem; font-size:.8rem; border-radius:999px; background:#EEF2FF; color:#3730A3; border:1px solid #E0E7FF}
.header{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.7); backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid #eef2f7;
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.logo{ display:flex; align-items:center; gap:.6rem; font-weight:800; letter-spacing:.3px}
.logo .mark{ width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,var(--primary),#1E88E5); box-shadow: var(--shadow); display:grid; place-items:center; color:white; font-size:18px}
.nav-links{ display:flex; gap:1rem}
.nav-links a{ padding:.6rem .9rem; border-radius:999px; font-weight:600; color:#1f2937}
.nav-cta{ display:flex; align-items:center; gap:.6rem}
.mobile-toggle{ display:none; border:none; background:transparent; font-size:1.5rem}
@media(max-width:900px){
  .nav-links{ display:none}
  .mobile-toggle{ display:block}
}

/* Mobile menu */
.mobile-menu{ display:none; position:absolute; top:64px; left:0; right:0; background:white; border-bottom:1px solid #eef2f7}
.mobile-menu a{ display:block; padding:14px 20px; border-top:1px solid #f1f5f9; font-weight:600}

/* Hero */
.hero{ position:relative; overflow:hidden}
.hero .inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; padding:64px 0}
.hero .card{
  background:white; border-radius:var(--radius); padding:22px; box-shadow:var(--shadow); border:1px solid #eef2f7
}
.hero h1{ font-size:clamp(28px,4vw,44px); line-height:1.15; margin:10px 0 8px}
.hero p{ color:var(--subtext); margin:0 0 18px}
.hero-actions{ display:flex; gap:.8rem; flex-wrap:wrap}
.hero .trust{ display:flex; gap:1rem; margin-top:14px; flex-wrap:wrap}
.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:14px}
.kpis .k{ background:var(--muted); border:1px solid #e6ebf2; border-radius:12px; padding:12px; text-align:center}
.k .n{ font-weight:800; font-size:1.3rem}
@media(max-width:900px){
  .hero .inner{ grid-template-columns:1fr}
}

/* Sections */
.section{ padding:56px 0}
.section h2{ font-size:clamp(22px,3vw,34px); margin:0 0 14px}
.section p.lead{ color:var(--subtext); margin:0 0 24px}
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{
  background:white; border-radius:16px; border:1px solid #eef2f7; box-shadow:var(--shadow); padding:18px; transition:transform .15s ease;
}
.card:hover{ transform:translateY(-3px)}
@media(max-width:900px){
  .cards{ grid-template-columns:1fr}
}

.icon{ width:24px; height:24px}

/* Why choose us list */
.list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.list .item{ display:flex; gap:.7rem; align-items:flex-start; background:var(--muted); border:1px solid #e6ebf2; padding:12px; border-radius:12px}
@media(max-width:900px){ .list{ grid-template-columns:1fr}}

/* Reviews */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.quote{ background:white; border:1px solid #eef2f7; border-radius:14px; padding:16px; box-shadow:var(--shadow)}
.quote .stars{ letter-spacing:2px}
@media(max-width:900px){ .reviews{ grid-template-columns:1fr}}

/* Gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.gallery img{ border-radius:12px; border:1px solid #e6ebf2}
@media(max-width:900px){ .gallery{ grid-template-columns:repeat(2,1fr)}}

/* Contact */
.contact{
  display:grid; grid-template-columns:1.1fr .9fr; gap:18px
}
.map, iframe{ width:100%; height:100%; min-height:300px; border:0; border-radius:14px}
.form{
  background:white; border:1px solid #eef2f7; border-radius:14px; box-shadow:var(--shadow); padding:18px
}
.input{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.input input, .input textarea{
  padding:12px 14px; border:1px solid #e5eaf2; border-radius:12px; font:inherit; outline:none
}
.input input:focus, .input textarea:focus{ border-color:var(--primary); box-shadow:0 0 0 4px var(--ring)}
.form .actions{ display:flex; gap:.8rem; flex-wrap:wrap}

.footer{ background:#0b1220; color:#cbd5e1; padding:32px 0; margin-top:40px}
.footer a{ color:#e2e8f0}
.small{ font-size:.9rem; color:#64748b}