/* SantoBot IA - Design System (Fan Page)
   Acessível (WCAG 2.2) e responsivo, com foco em contraste e tipografia legível.
   Cores seguem variáveis CSS para fácil customização.
*/
:root{
  --sb-primary:#1E88E5;      /* azul confiança */
  --sb-primary-600:#1976D2;
  --sb-accent:#0EA5E9;       /* ciano de destaque */
  --sb-bg:#0B1220;           /* fundo escuro elegante */
  --sb-surface:#111827;      /* cards/headers */
  --sb-muted:#6B7280;
  --sb-text:#F9FAFB;
  --sb-text-invert:#0B1220;
  --sb-ok:#10B981;
  --sb-warn:#F59E0B;
  --sb-danger:#EF4444;
  --sb-ring: 2px solid rgba(14,165,233,.45);
}
@media (prefers-color-scheme: light){
  :root{
    --sb-bg:#F3F4F6;
    --sb-surface:#FFFFFF;
    --sb-text:#111827;
    --sb-text-invert:#FFFFFF;
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji", "Segoe UI Symbol";
  color:var(--sb-text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(30,136,229,.25), transparent 60%),
              radial-gradient(1000px 600px at 110% 10%, rgba(14,165,233,.20), transparent 60%),
              var(--sb-bg);
  line-height:1.6;
}

.container{max-width:1100px; margin:0 auto; padding:0 1.25rem}

a{color:var(--sb-accent); text-decoration:none}
a:focus{outline: var(--sb-ring)}

header.nav{
  position:sticky; top:0; z-index:50;
  background: rgba(17,24,39,.75);
  backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav .inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0}
.brand{display:flex; align-items:center; gap:.7rem; font-weight:800; letter-spacing:.2px}
.brand .logo{width:36px; height:36px; display:grid; place-items:center; border-radius:9px;
  background: linear-gradient(135deg, var(--sb-primary), var(--sb-accent));
  box-shadow: 0 8px 30px rgba(30,136,229,.35);
}
.brand span{font-size:1.05rem}
.menu{display:flex; gap:.9rem; align-items:center; flex-wrap:wrap}
.menu a{color:var(--sb-text); opacity:.9; padding:.45rem .65rem; border-radius:10px}
.menu a:hover{background:rgba(255,255,255,.06)}
.cta{background:linear-gradient(135deg, var(--sb-primary), var(--sb-accent)); color:var(--sb-text-invert) !important;
  padding:.6rem .95rem; border-radius:12px; font-weight:700; box-shadow: 0 10px 24px rgba(14,165,233,.28)}
.cta:hover{filter:brightness(1.08)}

.hero{padding:4.5rem 0 3rem}
.hero .grid{display:grid; grid-template-columns: 1.2fr .9fr; gap:2rem; align-items:center}
.hero h1{font-size: clamp(2rem, 2.4rem + 1vw, 3rem); line-height:1.15; margin:.2rem 0 .6rem}
.hero p{font-size:1.1rem; color:var(--sb-muted); max-width:58ch}
.badges{display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0 1.25rem}
.badges span{font-size:.85rem; color:var(--sb-text); background:rgba(255,255,255,.06); padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.08)}

.card{
  background: var(--sb-surface);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:1.25rem;
  box-shadow: 0 8px 50px rgba(2, 8, 23, .35);
}
.section{padding:3.2rem 0}
.section h2{font-size:1.6rem; margin:0 0 1rem}
.grid-3{display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem}

.kpis{display:flex; gap:1rem; flex-wrap:wrap}
.kpis .kpi{flex:1; min-width:200px; padding:1rem; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.kpi strong{font-size:1.5rem; display:block}

.features .card h3{margin:.2rem 0 .4rem}
.features .card p{color:var(--sb-muted)}

.usecases li{margin:.3rem 0}

.testimonials blockquote{margin:0; font-size:1.05rem}
.testimonials cite{display:block; margin-top:.6rem; color:var(--sb-muted)}

footer{padding:2.2rem 0; border-top:1px solid rgba(255,255,255,.06); background: rgba(17,24,39,.6)}
footer .cols{display:grid; grid-template-columns: 1.6fr 1fr 1fr; gap:1rem}
footer small{color:var(--sb-muted)}

/* Cookie banner */
.cookie-banner{
  position: fixed; left: 16px; right:16px; bottom: 16px; z-index:100;
  background: var(--sb-surface); color:var(--sb-text);
  border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:1rem;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
  display:none;
}
.cookie-banner.show{display:block}
.cookie-actions{display:flex; gap:.6rem; margin-top:.7rem; flex-wrap:wrap}
.btn{padding:.55rem .9rem; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--sb-text); font-weight:600}
.btn:hover{background:rgba(255,255,255,.08)}
.btn.primary{background:linear-gradient(135deg, var(--sb-primary), var(--sb-accent)); border:none; color:var(--sb-text-invert)}
.btn.danger{background: rgba(239,68,68,.12); color:#fecaca; border-color: rgba(239,68,68,.25)}
.btn.ghost{background:transparent}

/* Utilities */
.center{display:grid; place-items:center}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace}
.tag{display:inline-block; padding:.15rem .5rem; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); font-size:.8rem}

/* Responsividade */
@media (max-width: 900px){
  .hero .grid{grid-template-columns: 1fr}
  .grid-3{grid-template-columns: 1fr}
  .grid-2{grid-template-columns: 1fr}
  footer .cols{grid-template-columns: 1fr}
}