/* Design system */
:root{
  --bg: #0b0f17;
  --bg-alt: #0f1420;
  --card: #121929;
  --text: #e6edf6;
  --muted: #9fb0cc;
  --primary: #5b7cfa;
  --primary-600: #4967e6;
  --accent: #36d7b7;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
  /* Gradients base para manter conformidade visual */
  --bg-grad: linear-gradient(180deg, var(--bg), var(--bg-alt));
  --alt-grad: linear-gradient(180deg, #0b1220, #0f1420);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:linear-gradient(180deg,var(--bg),var(--bg-alt));color:var(--text)}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* Header */
.site-header{position:sticky;top:0;backdrop-filter:saturate(140%) blur(8px);background:rgba(11,15,23,.6);border-bottom:1px solid rgba(255,255,255,.06);z-index:100}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600}
.brand .logo{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),#7aa2ff);color:white;font-size:14px}
.brand-name{letter-spacing:.2px}
.nav-toggle{display:none;background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.12);padding:.45rem .7rem;border-radius:.6rem}
.nav-list{display:flex;gap:1rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--muted)}
.nav-list a:hover{color:var(--text)}

/* Hero */
.hero{padding:6rem 0 3rem;border-bottom:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero-text h1{font-size:clamp(1.8rem,3.3vw,3rem);line-height:1.1;margin:0 0 1rem}
.kicker{display:inline-block;margin-bottom:.6rem;color:var(--accent);font-weight:700;letter-spacing:.3px;text-transform:uppercase;font-size:.8rem}
.hero-text p{color:var(--muted);max-width:60ch}
.hero-cta{margin-top:1.25rem;display:flex;gap:.75rem;flex-wrap:wrap}
.hero-badges{margin:1rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.hero-badges li{border:1px solid rgba(255,255,255,.12);color:var(--muted);padding:.4rem .6rem;border-radius:.6rem;font-size:.85rem}
.hero-art{position:relative}
.hero-art .orb{position:absolute;inset:auto -20% -20% auto;width:420px;height:420px;border-radius:50%;filter:blur(50px);background:radial-gradient(circle at 30% 30%,rgba(91,124,250,.6),transparent 60%),radial-gradient(circle at 60% 70%,rgba(54,215,183,.5),transparent 60%)}
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1rem}
.section .card h3{margin-top:.2rem}
.section .card p{margin-top:.35rem;color:var(--muted)}
.shadow{box-shadow:var(--shadow)}
.hero-art .card{position:relative;z-index:2;margin:1rem 0}

/* Sections */
.section{padding:4rem 0;scroll-margin-top:88px}
.section.alt{background:var(--alt-grad)}
.section h2{font-size:1.7rem;margin:0 0 .5rem}
.section-lead{color:var(--muted);margin:0 0 2rem}
.section .grid.cards{row-gap:1.25rem}

/* Grid */
.grid{display:grid;gap:1rem}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cards{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
.grid.locations{align-items:stretch}
.grid.pricing{align-items:stretch}
.grid.cards > .card{height:100%;display:flex;flex-direction:column}
.grid.locations{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}

.bullets{margin:.5rem 0 0;padding-left:1.1rem;color:var(--muted)}
.bullets li{margin:.25rem 0}

.price{display:flex;flex-direction:column;height:100%}
.price .price-tag{font-size:1.3rem;color:#fff;font-weight:700}
.price .btn-block{margin-top:auto}
.price.featured{border-color:rgba(91,124,250,.6);box-shadow:0 0 0 1px rgba(91,124,250,.4)}

/* Contact */
.contact{display:grid;gap:1rem}
.contact label{display:grid;gap:.4rem;color:var(--muted)}
input,textarea{background:rgba(255,255,255,.03);color:var(--text);border:1px solid rgba(255,255,255,.12);border-radius:.6rem;padding:.7rem .8rem}
input:focus,textarea:focus{outline:2px solid var(--primary-600);border-color:transparent}
.actions{display:flex;gap:.75rem;flex-wrap:wrap}
.note{color:var(--muted);font-size:.9rem}
.actions .btn svg{display:block}

/* Blink utility (used sparingly) */
@keyframes blink {
  0%,49%{opacity:1}
  50%,100%{opacity:.35}
}
.blink{animation:blink 1.2s step-start infinite}
@media (prefers-reduced-motion: reduce){
  .blink{animation:none}
}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:.75rem 1rem;line-height:1;font-weight:600;color:#fff;background:transparent}
.btn:hover{border-color:rgba(255,255,255,.28)}
.btn-small{padding:.45rem .8rem;font-weight:600}
.btn-primary{background:linear-gradient(135deg,var(--primary),#7aa2ff);border-color:transparent}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);padding:2rem 0;background:#0b0f17}
.footer-inner{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.footer-links{list-style:none;margin:0;padding:0;display:flex;gap:1rem}
.legal{color:var(--muted);max-width:80ch}

/* --- Status page styles --- */
.status-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  background: var(--card);
}

.status-banner{ gap:16px; justify-content:space-between; flex-wrap:wrap }
.status-banner .status-text h1{ margin:0 0 .25rem; font-size:1.25rem }
.status-banner .status-text p{ margin:0; }
.status-banner .status-actions{ margin-left:auto }

.status-indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.05) inset;
}
.status-indicator.ok { background: #16a34a; }
.status-indicator.warn { background: #f59e0b; }
.status-indicator.down { background: #ef4444; }

.status-card .status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.status-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 1.1rem 1.2rem;
}
.status-card .status-row h3 {
  margin: 0;
  font-size: 1rem;
}
.status-card .status-row .muted {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--muted);
}

/* status flags */
.status-row { position: relative; }
.status-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.status-flag { display: inline-flex; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); }
.status-flag img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pill { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.ok { background: #22c55e; }
.pill.warn { background: #f59e0b; }
.pill.down { background: #ef4444; }

.status-card .metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.status-card .metrics > div{ background: transparent; padding: 0; border: 0; }
.status-card .metrics .label { display: block; font-size: 0.75rem; color: var(--muted); }
.status-card .metrics .value { font-weight: 600; }
.status-card .metrics .value.ok { color: #22c55e; }
.status-card .metrics .value.warn { color: #f59e0b; }
.status-card .metrics .value.down { color: #ef4444; }

.history-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}
.history-col { text-align: center; }
.history-bar {
  width: 100%;
  height: 40px;
  border-radius: 6px;
  background: var(--muted);
  opacity: 0.7;
}
.history-bar.ok { background: linear-gradient(180deg, #22c55e, #16a34a); opacity: 1; }
.history-bar.warn { background: linear-gradient(180deg, #f59e0b, #d97706); opacity: 1; }
.history-bar.down { background: linear-gradient(180deg, #ef4444, #dc2626); opacity: 1; }
.history-date { margin-top: 6px; font-size: 0.75rem; color: var(--muted); }

/* Status subheads and component grid tweaks */
.subhead{margin:1rem 0 .75rem;font-size:1rem;color:var(--muted);font-weight:700;letter-spacing:.2px}
.subhead + .grid{margin-top:.25rem}
.component-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 960px){
  .component-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .component-grid{grid-template-columns:1fr}
}

/* Responsive */
@media (max-width: 1200px){
  .grid.locations{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 960px){
  .hero-inner{grid-template-columns:1fr}
  .grid.cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.locations{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 720px){
  .nav-toggle{display:inline-flex}
  .nav-list{display:none;position:absolute;right:1.25rem;top:68px;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:.8rem;padding:.5rem;flex-direction:column;min-width:220px}
  .nav-list.open{display:flex}
  .grid.cards,.grid.pricing{grid-template-columns:1fr}
}

/* Section-specific fix: manter os cards dentro do background da seção Serviços */
#servicos{background:var(--alt-grad);padding-bottom:5rem}

/* Section themes (conformidade): usar gradiente alternativo apenas onde necessário */
#bots{ background: var(--alt-grad); }
#servicos{ background: var(--alt-grad); }
#seguranca{ background: var(--alt-grad); }
#localizacao{ background: var(--alt-grad); padding-bottom:5rem; }
#contato{ background: transparent; }

/* Segurança: padding extra para acomodar sombras dos cards */
#seguranca{padding-bottom:5rem}

/* Locations */
.location .flag{height:28px;margin-bottom:.5rem}
.location .flag img{height:100%;width:auto;border-radius:4px;display:block;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.location h3{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 .4rem}

/* Status page background conformance */
.status-page{ background: var(--bg-grad); }
.status-page .section{ background: transparent; }
.status-page #components{ background: var(--alt-grad); }
.status-page #history{ background: var(--alt-grad); }
.status-page main{ background: transparent; }
/* Status components conformance: keep card shadows inside the section */
.status-page #components{ position: relative; overflow: hidden; padding-bottom: 5rem; }
.status-page #components .component-grid{ row-gap: 1.25rem; }