:root{
  --bg:#0a1e40; --bg-2:#091632; --bg-3:#0a0f1f;
  --panel:#0e1117; --text:#e8ecf2; --muted:#b0b3b8;
  --accent:#00c2ff; --portaria:#00e0c6; --alarmes:#C1121F; --modulo:#6ad8ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 600px at 50% -10%, rgba(0,194,255,.15), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 40%, var(--bg-3) 100%);
  color:var(--text);
  font:400 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img, svg{max-width:100%; height:auto; display:block}
.container{max-width:1200px; padding:0 20px; margin:0 auto}
.header{position:sticky; top:0; z-index:40; backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(10,15,31,.9), rgba(10,15,31,.6));
  border-bottom:1px solid rgba(255,255,255,.05);
}
.navbar{display:flex; align-items:center; gap:18px; min-height:64px}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.4px}
.brand .logo{width:34px; height:34px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #6ad8ff, #0066ff 60%, #001a40 90%);
  box-shadow:0 0 18px rgba(0,194,255,.45), inset 0 0 12px rgba(0,194,255,.35);
}
.nav{display:flex; gap:10px; margin-left:auto; align-items:center}
.toggle{display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 10px; cursor:pointer; user-select:none; font-weight:600; background:rgba(255,255,255,.05)}
.toggle span{opacity:.9}
.nav .btn{padding:10px 14px; border-radius:10px; background:var(--accent); color:#00111b; font-weight:700}
.nav .btn:hover{filter:brightness(1.05)}
.hero{position:relative; overflow:hidden; padding:24px 0}
.heromudeiaqui .hero-img{border-radius:18px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset}
.hero h1{font-size:clamp(28px,6vw,56px); margin:12px 0 10px; text-align:center}
.hero p{margin:0 auto 18px; max-width:760px; text-align:center; color:var(--muted)}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 16px; border-radius:12px; border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  color:var(--text); font-weight:600}
.btn-primary{background:linear-gradient(180deg, var(--accent), #33d2ff); color:#00111b; border:none}
.btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.15)}
.section{padding:48px 0}
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.grid-4{display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:18px;
  position:relative; overflow:hidden}
.card .icon{width:52px; height:52px; margin-bottom:8px; opacity:.97}
.badge{display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; letter-spacing:.3px; opacity:.9}
.breadcrumb{font-size:14px; color:var(--muted); margin:14px 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb .sep{margin:0 6px; opacity:.6}
.footer{padding:40px 0; color:#cfd6df; border-top:1px solid rgba(255,255,255,.06)}
.footer small{opacity:.8}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

.hero-img img {
  display: block;
  margin: 0 auto;   /* centraliza horizontalmente */
}



/* Cores nas caixas (fundo), não na fonte */
.card.alarm{ background:linear-gradient(180deg, rgba(239,68,68,.20), rgba(239,68,68,.08)) }
.card.condo{ background:linear-gradient(180deg, rgba(59,130,246,.20), rgba(59,130,246,.08)) }
.card.auto{  background:linear-gradient(180deg, rgba(34,197,94,.20), rgba(34,197,94,.08)) }
.badge.alarm{ background:var(--alarm) } .badge.condo{ background:var(--condo) } .badge.auto{ background:var(--auto) }