
:root{
  --blue:#0ea5e9; /* sky-500 */
  --blue-deep:#0c4a6e; /* sky-900 */
  --gold:#f59e0b; /* amber-500 */
  --bg:#0b1220; /* dark navy for hero bg overlay */
  --text:#0f172a; /* slate-900 */
  --muted:#475569; /* slate-600 */
  --card:#ffffff;
  --radius:18px;
  --shadow:0 10px 25px rgb(2 8 23 / 10%);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:#fff;scroll-behavior:smooth}
.container{max-width:1100px;margin:0 auto;padding:0 1rem}
img{max-width:100%;height:auto;display:block}

.site-header{
  position:sticky;top:0;background:#fff;border-bottom:1px solid #e2e8f0;z-index:50
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;gap:1rem}
.brand img{width:200px;height:auto}
.menu{display:flex;gap:1rem;align-items:center}
.menu a{color:var(--text);text-decoration:none;padding:.6rem .8rem;border-radius:10px}
.menu a:hover{background:#f8fafc}
.btn{display:inline-block;padding:.8rem 1rem;border-radius:12px;text-decoration:none;border:1px solid transparent;box-shadow:var(--shadow);font-weight:600}
.btn-primary{background:var(--blue);color:white;border-color:var(--blue)}
.btn-primary:hover{filter:brightness(.95)}
.btn-outline{background:white;border-color:#e2e8f0;color:var(--text)}
.btn-outline:hover{background:#f8fafc}

.nav-toggle{display:none}
.hamburger{display:none;font-size:1.5rem;cursor:pointer}

.hero{
  background: radial-gradient(1200px 300px at 50% -100px, #e0f2fe 0%, transparent 70%);
  padding:5rem 0 3rem 0;text-align:center
}
.hero h1{font-size:clamp(2rem, 3.5vw, 3rem);line-height:1.1;margin:0 0 1rem 0}
.hero .accent{color:var(--blue-deep)}
.hero p{color:var(--muted);font-size:1.1rem;max-width:750px;margin:0 auto 1.5rem auto}
.cta-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.section{padding:3rem 0}
.section-alt{background:#f8fafc}
.lead{color:var(--muted)}

.pill-list{display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:1rem 0 2rem 0;list-style:none}
.pill-list li{background:#e0f2fe;color:#075985;padding:.4rem .7rem;border-radius:999px}

.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);border:1px solid #e2e8f0;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}
.card h3{margin-top:0}

.badges{display:flex;gap:.5rem;flex-wrap:wrap}
.badge{background:#fff7ed;color:#7c2d12;border:1px solid #fed7aa;padding:.35rem .6rem;border-radius:999px;font-weight:600}

.checklist{list-style:none;padding:0;margin:1rem 0 0 0}
.checklist li{padding-left:1.8rem;position:relative;margin:.6rem 0}
.checklist li::before{content:'✓';position:absolute;left:.4rem;top:.1rem;color:var(--gold);font-weight:900}

.two-col{display:grid;grid-template-columns:1.3fr .7fr;gap:1.5rem}
.highlights{background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow)}

.contact-form{margin-top:1rem}
.contact-form .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.contact-form label{display:flex;flex-direction:column;gap:.4rem;font-weight:600}
.contact-form input, .contact-form textarea, .contact-form select{
  padding:.8rem;border-radius:10px;border:1px solid #cbd5e1;font:inherit
}
.contact-form .full{grid-column:1 / -1}
.hidden{display:none}
.contact-direct{color:var(--muted);margin-top:.5rem}

.site-footer{background:#0b1220;color:#e2e8f0;padding:2rem 0;margin-top:2rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.site-footer a{color:#e2e8f0}

@media (max-width: 900px){
  .card-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .menu{display:none;flex-direction:column;align-items:flex-start;background:#fff;position:absolute;right:1rem;top:64px;border:1px solid #e2e8f0;border-radius:12px;padding:.5rem;box-shadow:var(--shadow)}
  .nav-toggle:checked ~ .menu{display:flex}
  .hamburger{display:block}
  .card-grid{grid-template-columns:1fr}
  .contact-form .grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}


.hero-media{margin:1rem auto 0 auto;max-width:900px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow)}
.hero-media img{width:100%;height:auto;display:block}
.card img{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:.6rem}
.brand img{width:200px !important;height:auto}
