/* Simple responsive template CSS */
:root{
  --primary:#0b5d9f;
  --muted:#666;
  --bg:#f7f7f7;
  --card:#fff;
}
*{box-sizing:border-box}
body{font-family:Inter, Arial, sans-serif;margin:0;background:var(--bg);color:#222;line-height:1.5}
.header{background:linear-gradient(90deg,var(--primary),#064a7a);color:#fff;padding:14px 20px;position:sticky;top:0;z-index:40}
.header .container{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:48px}
.nav{display:flex;gap:12px}
.nav a{color:#fff;text-decoration:none;padding:8px;border-radius:6px}
.nav a:hover{background:rgba(255,255,255,0.08)}
.hero{max-width:1100px;margin:28px auto;padding:20px;display:grid;grid-template-columns:1fr 380px;gap:20px}
.hero .lead{background:var(--card);padding:24px;border-radius:12px;box-shadow:0 6px 18px rgba(10,10,10,0.06)}
.hero img{width:100%;border-radius:12px;display:block}
.services{max-width:1100px;margin:18px auto;padding:20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.card{background:var(--card);padding:16px;border-radius:10px;box-shadow:0 6px 18px rgba(10,10,10,0.05)}
.card img{width:100%;border-radius:8px}
.about, .contact{max-width:1100px;margin:18px auto;padding:20px}
.footer{background:#0b2f47;color:#dceaf6;padding:18px}
.footer .container{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
.floating{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:10px;z-index:60}
.floating a{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:var(--primary);color:#fff;text-decoration:none;box-shadow:0 8px 20px rgba(10,10,10,0.12)}
.fab-top{right:18px;bottom:90px}
.grid-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:880px){
  .hero{grid-template-columns:1fr; padding:12px}
  .grid-row{grid-template-columns:1fr}
  .nav{display:none}
}
.product-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.product{cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;align-items:center;justify-content:center;padding:20px;z-index:80}
.modal .content{background:#fff;padding:18px;border-radius:8px;max-width:900px;width:100%;max-height:90vh;overflow:auto}
.sr-only{position:absolute;left:-10000px}