/* style.css - shared site styles */
:root{
  --bg:#0f1720;
  --card:#0e1114;
  --muted:#9aa4ad;
  --accent:#c41e2b;
  --glass: rgba(255,255,255,0.03);
  --maxwidth:1100px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg),#050507);color:#e6eef6}
a{color:inherit;text-decoration:none}
.container{max-width:var(--maxwidth);margin:0 auto;padding:28px}
header{backdrop-filter: blur(6px);position:sticky;top:12px;z-index:60}
.navbar{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#8b0f12);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;box-shadow:0 6px 18px rgba(196,30,43,0.12)}
nav ul{display:flex;gap:18px;align-items:center;margin:0;padding:0;list-style:none}
nav a{padding:8px 12px;border-radius:8px;color:var(--muted);font-weight:600}
nav a:hover{color:#fff;background:var(--glass)}
.cta{background:linear-gradient(90deg,var(--accent),#b11b25);padding:8px 14px;border-radius:10px;font-weight:700}

/* hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:center;padding:48px 0}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:28px;border-radius:16px}
h1{font-size:34px;margin:0 0 10px 0;line-height:1.03}
p.lead{color:var(--muted);margin:0 0 18px}
.features{display:flex;gap:12px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,0.02);padding:8px 12px;border-radius:999px;font-weight:600;color:#fff}

/* services */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:18px}
.card{background:var(--card);padding:18px;border-radius:12px}
.card h3{margin:0 0 8px}
.muted{color:var(--muted);font-size:15px}

/* Who we serve */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.who .chip{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;text-align:center}

/* reasons */
.reasons{display:flex;gap:14px;margin-top:18px}
.reason{flex:1;padding:20px;border-radius:12px;background:linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01))}

/* contact */
.contact-box{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
form .full{grid-column:1/-1}
input,textarea,select{background:#071014;border:1px solid rgba(255,255,255,0.03);padding:12px;border-radius:10px;color:#e6eef6}
button.btn{grid-column:1/-1;padding:12px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent),#b11b25);font-weight:700}

footer{margin-top:36px;padding:18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02))}

/* mobile */
.mobile-toggle{display:none}
@media (max-width:880px){
  .hero{grid-template-columns:1fr;}
  .grid{grid-template-columns:1fr}
  .who{grid-template-columns:repeat(2,1fr)}
  nav ul{display:none}
  .mobile-toggle{display:block}
  header{padding:12px}
}

/* small */
@media (max-width:480px){h1{font-size:28px}}
.legal{color:var(--muted);font-size:13px}
