/* ====== Base (paleta ciano, fonte Sora) ====== */
:root{
  --bg: #0b1220;              /* fundo geral escuro */
  --card: #0f172a;            /* cartões */
  --text: #0b1220;            /* texto escuro p/ header claro */
  --text-invert: #e5e7eb;     /* texto claro */
  --muted: #6b7280;           /* cinza médio */
  --primary: #06B6D4;         /* ciano principal */
  --primary-strong: #0891B2;  /* ciano hover */
  --wa: #25D366;              /* WhatsApp */
  --accent: #22D3EE;          /* ciano claro */
  --shadow: 0 10px 30px rgba(0,0,0,.2);
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0; font-family: 'Sora', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, Noto Sans;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7fb 50%, #0b1220 100%);
  color: var(--text-invert);
}
img{ max-width:100%; display:block }
a{ color: var(--primary-strong); text-decoration: none }
.container{ width:min(1100px, 92%); margin:0 auto }

/* ====== Header (claro com sombra ao rolar) ====== */
.header{ position: sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:14px 0; transition: background .2s ease, box-shadow .2s ease }
.header .brand__logo{ height: 42px; width: auto }
.header .nav{ display:flex; gap:16px; align-items:center }
.header a{ color:#0b1220 }
.header .split-cta{ display:flex; gap:10px; flex-wrap:wrap }

.header::before{ content:''; position:absolute; inset:0; z-index:-1; backdrop-filter: saturate(140%) blur(8px) }
body.header-light .header{ background: rgba(255,255,255,.88); box-shadow: 0 1px 0 rgba(0,0,0,.06) }
body.is-scrolled .header{ background: rgba(255,255,255,.98); box-shadow: 0 10px 30px rgba(0,0,0,.08) }

/* ====== Hero ====== */
.hero{ display:grid; grid-template-columns: 1.2fr 1fr; align-items:center; gap:40px; padding:40px 0 10px; color:#0b1220 }
.hero__text h1{ font-size: clamp(28px, 4vw, 44px); line-height:1.1; margin: 0 0 12px }
.hero__text p{ color: #334155; font-size: clamp(16px, 2.3vw, 18px) }
.highlight{ color: var(--primary) }
.cta{ display:flex; gap:12px; margin-top:18px; flex-wrap: wrap }
.hero__media{ display:flex; justify-content:center }
.dashboard-card{
  background: radial-gradient(1200px 500px at 50% -40%, rgba(34,211,238,.18), transparent 60%), #ffffff;
  border: 1px solid rgba(2,132,199,.15); border-radius: 16px; padding: 22px; box-shadow: var(--shadow);
  display:grid; grid-template-columns: repeat(3,1fr); gap:14px; min-width: 320px;
}
.kpi{ background: rgba(2,132,199,.08); border-radius: 12px; padding: 14px; text-align:center; color:#0b1220 }
.kpi span{ color: #64748b; font-size:12px; text-transform: uppercase; letter-spacing: .12em }
.kpi strong{ display:block; font-size: 22px; margin-top: 6px }

/* ====== Sections ====== */
.section{ padding: 56px 0 }
.section h2{ font-size: clamp(22px, 3vw, 32px); margin:0 0 16px; color:#0b1220 }
.section--alt{ background: linear-gradient(180deg, rgba(34,211,238,.06), transparent) }
.cards{ grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap:16px }
.card{ background: #ffffff; border:1px solid rgba(2,132,199,.12); border-radius: 14px; padding:16px; transition: transform .2s ease, border-color .2s ease; color:#0b1220 }
.card:hover{ transform: translateY(-3px); border-color: rgba(2,132,199,.35) }
.list{ color: #334155; line-height:1.8 }
.cols{ display:grid; grid-template-columns: 1fr 1fr; gap:24px }
.contact-cards{ display:grid; grid-template-columns: repeat( auto-fit, minmax(220px, 1fr)); gap:14px }
.contact{ background: #ffffff; border:1px solid rgba(2,132,199,.12); border-radius: 12px; padding:14px; color:#0b1220 }

/* ====== Footer (escuro) ====== */
.footer{ border-top:1px solid rgba(148,163,184,.12); margin-top: 32px; background: #0b1220; color: var(--text-invert) }
.footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; flex-wrap: wrap }
.footer__nav{ display:flex; gap:16px }
.footer a{ color: #e2e8f0 }

/* ====== Buttons ====== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:10px 14px; border-radius:10px; font-weight:600; border:1px solid transparent; cursor:pointer }
.btn--primary{ background: var(--primary); color:#041117; border-color: rgba(0,0,0,.05) }
.btn--primary:hover{ background: var(--primary-strong) }
.btn--ghost{ background: transparent; color:#0b1220; border-color: rgba(2,132,199,.3) }
.btn--ghost:hover{ border-color: rgba(2,132,199,.6) }
.btn--whatsapp{ background: var(--wa); color: #052011 }
.btn--whatsapp.btn--outline{ background: transparent; color:#0b1220; border:1px solid rgba(37,211,102,.55) }
.btn--whatsapp.btn--outline:hover{ background: rgba(16,185,129,.08) }
.btn--lg{ padding: 14px 18px; font-size: 16px }

/* ====== FAB menu ====== */
.fab-group{ position: fixed; right: 18px; bottom: 18px; display:flex; flex-direction: column; align-items:flex-end; gap:8px }
.fab{ width: 56px; height: 56px; border-radius: 999px; border:none; cursor: pointer; display:flex; align-items:center; justify-content:center; background: #08131a; box-shadow: var(--shadow); position: relative }
.fab__badge{ position: absolute; right: 64px; white-space: nowrap; background: #05232b; border: 1px solid rgba(34,211,238,.35); color: #cffafe; padding:6px 10px; border-radius: 8px; font-size: 13px; opacity:.95; transform: translateX(8px) }
.fab-menu{ display:none; background: #ffffff; border:1px solid rgba(2,132,199,.18); border-radius: 12px; padding:8px; box-shadow: var(--shadow); margin-bottom: 6px }
.fab-menu.open{ display:flex; flex-direction: column; gap:6px }
.fab-option{ background:#0EA5E9; color:white; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; font-weight:600 }
.fab-option:nth-child(2){ background:#06B6D4 }
.fab-option:hover{ filter: brightness(1.05) }

/* ====== Responsive ====== */
@media (max-width: 880px){
  .hero{ grid-template-columns: 1fr; padding-top: 20px }
  .hero__media{ order: -1 }
  .cols{ grid-template-columns: 1fr }
  .header .split-cta{ display:none }
}

/* ====== Legal page ====== */
.legal{ color:#0b1220 }
.legal h1, .legal h2{ color:#0b1220 }