/* =========================================================================
   Data 2 Business — identidade visual D2B aplicada à web
   Paleta: dark near-black, azul brand (#4a90d9/#63b3ed), gradiente azul escuro→claro,
   Montserrat (display/labels) + Archivo (corpo), labels uppercase com letter-spacing.
   SEM roxo — 100% azul conforme brand.py da skill agent-platform-deck.
   ========================================================================= */

:root {
  --bg-deep: #0d0d13;
  --bg: #0d0d14;
  --surface: rgba(255, 255, 255, 0.025);
  --surface-2: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.07);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);

  --text: #e2e8f0;
  --text-2: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.45);
  --text-dim: rgba(255, 255, 255, 0.25);

  /* brand azul — extraído de brand.py */
  --blue:       #4a90d9;   /* brand fill primário */
  --blue-light: #63b3ed;   /* texto / realce */
  --blue-soft:  #6ba0d3;   /* secundário / links */
  --teal:       #68d391;
  --orange:     #f6ad55;
  --red:        #fc8181;

  /* gradiente assinatura: azul escuro → azul claro (igual progress bar do app) */
  --grad: linear-gradient(100deg, #2b6cb0, #63b3ed);
  --grad-deep: linear-gradient(135deg, #2b6cb0 0%, #4a90d9 50%, #63b3ed 100%);

  --radius: 6px;
  --radius-card: 12px;
  --maxw: 1120px;

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* atmosfera de fundo — glows azul */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(620px 520px at 78% -8%,  rgba(74, 144, 217, 0.15), transparent 60%),
    radial-gradient(560px 500px at 8%  12%,  rgba(99, 179, 237, 0.09), transparent 55%);
  pointer-events: none;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ===================== tipografia ===================== */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--blue-light);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--blue-light);
  opacity: 0.6;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; line-height: 1.08; }

.gradient-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===================== nav ===================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease;
}
.nav.scrolled {
  background: rgba(13, 13, 19, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}

/* logo maior — proporcional ao site */
.nav__logo img { height: 56px; display: block; }

.nav__links { display: flex; align-items: center; gap: 30px; }
.nav__links a {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--blue-light); }

/* ===================== botões ===================== */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.6px;
  padding: 10px 20px;
  border-radius: var(--radius);
  border: 1px solid;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
  background: none;
}
.btn-blue {
  border-color: rgba(74, 144, 217, 0.38);
  background: rgba(74, 144, 217, 0.12);
  color: var(--blue-light);
}
.btn-blue:hover { background: rgba(74, 144, 217, 0.22); border-color: rgba(74, 144, 217, 0.55); }
.btn-grad {
  border-color: transparent;
  background: var(--grad-deep);
  color: #fff;
  font-weight: 700;
}
.btn-grad:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-ghost { border-color: var(--border-strong); color: var(--text-2); }
.btn-ghost:hover { border-color: rgba(74, 144, 217, 0.4); color: var(--blue-light); }
.btn--lg { padding: 14px 28px; font-size: 13px; }
.nav__cta { display: inline-flex; }

/* ===================== hero ===================== */
.hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  padding: 120px 0 56px;
  overflow: hidden;
}
#constellation {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.5;
}
/* .hero is a flex container, so .wrap becomes a flex item and shrinks to fit
   its content instead of filling the row. Without this it never reaches
   --maxw, and `margin: 0 auto` then centres a too-narrow box — so the hero
   drifts right of every section below it, by an amount that depends on how
   long the copy happens to be. It looked fine in English only because that
   copy is wide enough to hit the cap. */
.hero .wrap { width: 100%; }
.hero__inner { max-width: 1120px; }
.hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.7rem);
  letter-spacing: -1.5px;
  margin: 22px 0 24px;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--text-2);
  max-width: 620px;
  margin-bottom: 36px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__stats {
  display: flex; flex-wrap: wrap; gap: 44px;
  margin-top: 48px; padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  white-space: nowrap;
}
.stat__label { font-size: 15px; color: var(--text-muted); margin-top: 4px; }

/* ===================== seções ===================== */
.section { padding: 80px 0; position: relative; }
.section__head { max-width: 720px; margin-bottom: 56px; }
.section__head h2 {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  letter-spacing: -0.8px;
  margin: 16px 0 18px;
}
.section__head p { color: var(--text-2); font-size: 1.05rem; }

/* ===================== pilares (overview) ===================== */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}
.pillar:hover {
  border-color: rgba(74, 144, 217, 0.35);
  background: var(--surface-2);
  transform: translateY(-3px);
}
.pillar__icon {
  width: 40px; height: 40px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(74, 144, 217, 0.12);
  border: 1px solid rgba(74, 144, 217, 0.3);
  margin-bottom: 16px;
}
.pillar__icon svg { width: 20px; height: 20px; stroke: var(--blue-light); }
.pillar h3 { font-size: 1.12rem; font-weight: 600; margin-bottom: 9px; }
.pillar p { font-size: 0.93rem; color: var(--text-muted); }

/* ===================== AI-First faixa ===================== */
.aifirst {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px;
  background:
    linear-gradient(135deg, rgba(43, 108, 176, 0.1), rgba(99, 179, 237, 0.05)),
    var(--surface);
  overflow: hidden;
}
.aifirst::after {
  content: "";
  position: absolute;
  right: -80px; top: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(74, 144, 217, 0.18), transparent 65%);
  pointer-events: none;
}
.aifirst h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); letter-spacing: -0.5px; margin: 14px 0 16px; max-width: 760px; }
.aifirst p { color: var(--text-2); max-width: 720px; font-size: 1.04rem; }

/* ===================== services ===================== */
.services { display: flex; flex-direction: column; gap: 14px; }
.service {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 28px;
  align-items: center;
  padding: 30px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.service:hover { border-color: rgba(74, 144, 217, 0.32); background: var(--surface-2); }
.service__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.service__body h3 { font-size: 1.3rem; font-weight: 600; margin-bottom: 7px; }
.service__body p { color: var(--text-muted); font-size: 0.97rem; max-width: 640px; }
.service__tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.tag {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 8px;
  background: rgba(74, 144, 217, 0.1);
  border: 1px solid rgba(74, 144, 217, 0.28);
  color: var(--blue-light);
}
.service__layer {
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}
/* camada de agentes — destaque azul brand */
.service--agents {
  border-color: rgba(74, 144, 217, 0.38);
  background: linear-gradient(120deg, rgba(43, 108, 176, 0.1), rgba(99, 179, 237, 0.05)), var(--surface);
}
.service--agents .service__layer { color: var(--blue-light); }

/* ===================== contato ===================== */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
.contact__intro h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); letter-spacing: -0.8px; margin: 16px 0 18px; }
.contact__intro p { color: var(--text-2); margin-bottom: 28px; }
.contact__meta { display: flex; flex-direction: column; gap: 14px; }
.contact__meta-item { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; color: var(--text-2); }
.contact__meta-item svg { width: 17px; height: 17px; stroke: var(--blue-light); flex: none; }

.form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 34px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.field input, .field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px; color: var(--text);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-dim); }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(74, 144, 217, 0.55);
  background: rgba(74, 144, 217, 0.05);
}
.field textarea { resize: vertical; min-height: 120px; }
.field.invalid input, .field.invalid textarea { border-color: rgba(245, 101, 101, 0.55); }
.field__err { display: none; font-size: 11px; color: #fc8181; margin-top: 6px; }
.field.invalid .field__err { display: block; }
.form button[type="submit"] { width: 100%; justify-content: center; margin-top: 6px; }
.form__status { font-size: 13px; margin-top: 14px; min-height: 18px; }
.form__status.ok { color: var(--teal); }
.form__status.err { color: #fc8181; }

.spin {
  width: 13px; height: 13px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===================== footer ===================== */
.footer {
  border-top: 1px solid var(--border-subtle);
  padding: 40px 0;
  margin-top: 40px;
}
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.footer img { height: 32px; opacity: 0.9; }
/* --text-dim (0.25) reads at ~2.2:1 here — below WCAG AA for body text. */
.footer p { font-size: 12px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.3px; }
/* Discreet link to the other language edition. 0.72 white on --bg reads ~9:1. */
.footer__lang { color: rgba(255, 255, 255, 0.72); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.22); padding-bottom: 1px; }
.footer__lang:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.6); }

/* ===================== reveal on scroll ===================== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ===================== responsivo ===================== */
@media (max-width: 900px) {
  .pillars { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 36px; }
  .service { grid-template-columns: 56px 1fr; }
  .service__layer { grid-column: 2; }
  .nav__links { display: none; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 20px; }
  .nav { padding: 12px 20px; }
  .nav__logo img { height: 34px; }
  .section { padding: 80px 0; }
  .aifirst { padding: 32px 24px; }
  .form { padding: 26px 22px; }
  .hero__stats { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001ms !important; }
}