:root{ --brand:#0b5fa5; --brand-2:#0e79d6; --accent:#19b768; --dark:#0f172a; --muted:#6b7280; --bg:#f7fafc; --card:#ffffff; }
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;color:#0f172a;background:var(--bg)}
a{color:inherit;text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Sticky top bar */
.topbar{position:sticky;top:0;z-index:60;background:#0b1f36;color:#e5eef8;border-bottom:1px solid rgba(255,255,255,.12)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0}
.topbar .small{font-size:13px;opacity:.95}
.topbar .btn{padding:8px 12px;border-radius:999px;font-weight:800}
.topbar .btn.call{background:var(--accent);color:#fff;border:1px solid rgba(0,0,0,.05)}

/* Header */
header{position:sticky;top:40px;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb;backdrop-filter:saturate(140%) blur(8px)}
nav[aria-label=Primary]{display:flex;align-items:center;justify-content:space-between;padding:10px 0;flex-wrap:wrap;gap:12px}
.logo{display:flex;gap:10px;align-items:center;min-width:220px}
.logo img{height:46px;width:auto;border-radius:6px;display:block}
.logo h1{font-size:18px;margin:0;line-height:1}
.nav-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:10px 14px;font-weight:700;border:1px solid transparent;cursor:pointer;transition:transform .02s, box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--brand);color:#fff}
.btn.accent{background:var(--accent);color:#fff}
.btn.outline{border:1px solid #cbd5e1;background:#fff;color:var(--brand)}

/* Cities dropdown */
.menu{position:relative}
.menu > a{border:1px solid #cbd5e1;background:#fff;color:#0b5fa5;border-radius:12px;padding:10px 14px;display:inline-flex;align-items:center;gap:6px}
.dropdown{position:absolute;top:110%;left:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.08);padding:12px;display:none;min-width:260px}
.menu:focus-within .dropdown, .menu:hover .dropdown{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dropdown a{padding:8px 10px;border-radius:10px}
.dropdown a:hover{background:#f3f6fb}

/* Hero with photo background */
.hero{position:relative;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(135deg, rgba(11,95,165,.85), rgba(14,121,214,.85)),
  url("https://images.unsplash.com/photo-1605840215359-5f8f6da8d80c?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat;
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.2fr 1fr;gap:28px;padding:48px 0}
.hero h2{font-size:42px;line-height:1.1;margin:8px 0 10px}
.hero p{opacity:.96}
.hero .card{background:#0b1f36;border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:18px;color:#e5eef8}
.badge{display:inline-block;background:rgba(255,255,255,.16);color:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}

/* Sections */
.section-title{font-size:28px;margin:0 0 10px}
.card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:18px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.citychips{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.citychips a{border:1px solid #cbd5e1;border-radius:999px;padding:8px 12px;display:inline-block;background:#fff;color:#0b5fa5;font-weight:600}

/* Trust bar */
.trust{background:#0b1f36;color:#e5eef8}
.trust .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 0}
.trust .pill{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:10px 14px;border-radius:999px;font-weight:700}

/* Icons */
.icon{font-size:22px}

/* FAQ */
.faq .q{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:12px 14px;border-radius:12px;border:1px solid #e5e7eb;margin-bottom:8px;background:#fff}
.faq .a{display:none;padding:12px 14px;border-left:3px solid var(--brand);background:#f8fbff;border-radius:0 0 12px 12px;margin:-8px 0 8px 0}
.faq .q[aria-expanded="true"] + .a{display:block}

/* Footer */
footer{background:#061427;color:#aab8cc}
footer .grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;padding:28px 0}
footer h4{margin:0 0 10px;color:#e5eef8}
.copyright{border-top:1px solid #0b1f36;padding:12px 0;font-size:14px}

/* Floating call button */
.callbar{position:fixed;bottom:14px;right:14px;background:var(--accent);color:#fff;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.2);z-index:100}
.callbar a{display:inline-block;padding:12px 16px;font-weight:800}

/* --- Animations --- */
@keyframes fadeUp { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }
.reveal { opacity:0; transform: translateY(14px); }
.reveal.show { opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease; }
.hero .reveal-in { opacity:0; transform: translateY(14px); animation: fadeUp .7s ease forwards; }
.hero .reveal-in.delay-1 { animation-delay: .12s; }
.hero .reveal-in.delay-2 { animation-delay: .24s; }
.hero .reveal-in.delay-3 { animation-delay: .36s; }

@media (max-width:980px){
  header{top:48px}
  .hero .wrap{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .dropdown{grid-template-columns:1fr}
}
@media (max-width:520px){
  .cards{grid-template-columns:1fr}
  .hero h2{font-size:32px}
}