/* =========================================================================
   Primeserv — Landing institucional (HTML/CSS/JS puro)
   Convertido da versão React/TanStack do Lovable, fiel ao design original.
   ========================================================================= */

/* ---------- Tokens da marca ---------- */
:root {
  --navy: oklch(0.22 0.07 264);
  --navy-deep: oklch(0.17 0.05 265);
  --blue: oklch(0.39 0.11 258);
  --magenta: oklch(0.58 0.22 8);
  --cream: oklch(0.972 0.004 95);
  --ink: oklch(0.26 0.03 255);
  --muted: oklch(0.55 0.02 255);

  --bg: var(--cream);
  --fg: var(--ink);
  --card: oklch(0.995 0.002 95 / 0.92);
  --primary-fg: oklch(0.985 0.004 95);
  --muted-bg: oklch(0.95 0.008 250);
  --border: oklch(0.9 0.01 255 / 0.9);

  --radius: 1rem;
  --shadow-card: 0 20px 60px -36px rgba(7, 26, 61, 0.24);
  --shadow-soft: 0 20px 60px -34px rgba(7, 26, 61, 0.2);
  --shadow-dark: 0 24px 80px -42px rgba(7, 26, 61, 0.72);

  --font-display: "Sora", system-ui, -apple-system, sans-serif;
  --font-sans: "Manrope", system-ui, -apple-system, sans-serif;

  --maxw: 80rem;
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border);
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, color-mix(in oklab, var(--magenta) 10%, transparent) 0%, transparent 28%),
    radial-gradient(circle at left 20%, color-mix(in oklab, var(--blue) 8%, transparent) 0%, transparent 24%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  letter-spacing: 0;
  line-height: 1.1;
}

img {
  display: block;
  max-width: 100%;
}

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

button {
  font: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

strong { color: var(--navy); font-weight: 700; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.section {
  padding: 6rem 1rem;
}
.section-tight { padding: 0 1rem 2.5rem; }

@media (min-width: 768px) {
  .section { padding: 8rem 1.5rem; }
  .section-tight { padding: 0 1.5rem 2.5rem; }
}
@media (min-width: 1024px) {
  .section { padding-inline: 2rem; }
  .section-tight { padding-inline: 2rem; }
}

.kicker {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--magenta);
}
.kicker-soft { color: oklch(0.985 0.004 95 / 0.6); }

/* ---------- Animação de entrada (scroll reveal) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 1rem 1rem 0;
  animation: drop-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 768px) { .site-header { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .site-header { padding-inline: 2rem; } }

.header-bar {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 60px -28px rgba(7, 26, 61, 0.25);
  backdrop-filter: blur(20px);
}
@media (min-width: 640px) { .header-bar { padding: 1rem 1.5rem; } }

.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.8rem;
  background: linear-gradient(140deg, var(--navy), var(--blue));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 10px 24px -12px rgba(7, 26, 61, 0.6);
}
.brand-mark::after { content: ""; }
.brand-word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  color: var(--navy);
}
.brand-word b { color: var(--magenta); font-weight: 800; }

/* Logo em imagem (logomarca oficial) com fallback em texto */
.brand-img { height: 2.5rem; width: auto; }
.site-footer .brand-img { height: 2.25rem; }
.brand-fallback { display: none; align-items: center; gap: 0.5rem; }
.brand-img.is-missing { display: none; }
.brand-img.is-missing ~ .brand-fallback { display: inline-flex; }

.nav-desktop {
  display: none;
  align-items: center;
  gap: 2rem;
}
.nav-desktop a {
  font-size: 0.875rem;
  font-weight: 600;
  color: oklch(0.22 0.07 264 / 0.82);
  transition: color 0.3s;
}
.nav-desktop a:hover { color: var(--magenta); }

.header-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.btn-nav {
  display: none;
  align-items: center;
  border-radius: 0.85rem;
  background: var(--navy);
  color: var(--primary-fg);
  padding: 0.75rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.btn-nav:hover {
  transform: translateY(-2px);
  background: var(--navy-deep);
  box-shadow: 0 18px 34px -20px rgba(7, 26, 61, 0.9);
}

.menu-toggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 0.85rem;
  padding: 0.5rem;
  color: var(--navy);
}
.menu-toggle .icon-close { display: none; }
.menu-toggle.is-open .icon-menu { display: none; }
.menu-toggle.is-open .icon-close { display: block; }

.nav-mobile {
  max-width: var(--maxw);
  margin: 0.5rem auto 0;
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 1.4rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 60px -28px rgba(7, 26, 61, 0.25);
  backdrop-filter: blur(20px);
}
.nav-mobile.is-open { display: flex; }
.nav-mobile a {
  border-radius: 0.85rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  transition: background 0.2s;
}
.nav-mobile a:hover { background: var(--muted-bg); }
.nav-mobile .btn-nav-mobile {
  margin-top: 0.5rem;
  text-align: center;
  background: var(--navy);
  color: var(--primary-fg);
  font-weight: 700;
  font-size: 0.875rem;
}

@media (min-width: 768px) { .btn-nav { display: inline-flex; } }
@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .menu-toggle { display: none; }
  .nav-mobile { display: none !important; }
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  padding: 7rem 1rem 2rem;
}
@media (min-width: 768px) { .hero { padding: 8rem 1.5rem 2rem; } }
@media (min-width: 1024px) { .hero { padding: 9rem 2rem 3rem; } }

.hero-orb {
  pointer-events: none;
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
}
.hero-orb-top {
  top: 7rem; right: -4rem; height: 14rem; width: 14rem;
  background: color-mix(in oklab, var(--magenta) 14%, transparent);
}
.hero-orb-side {
  top: 22rem; left: -6rem; height: 18rem; width: 18rem;
  background: color-mix(in oklab, var(--blue) 12%, transparent);
}

.hero-inner {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .hero-inner { gap: 2rem; } }

.hero-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 7fr 5fr; gap: 2rem; min-height: 720px; }
}

.hero-panel-main {
  position: relative;
  overflow: hidden;
  border-radius: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 2.5rem 1.5rem;
  box-shadow: 0 22px 70px -34px rgba(7, 26, 61, 0.28);
  backdrop-filter: blur(6px);
  animation: fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 768px) { .hero-panel-main { padding: 3.5rem 2.5rem; } }
@media (min-width: 1280px) { .hero-panel-main { padding: 3.5rem 3.5rem; } }

.hero-panel-main::before {
  content: "";
  position: absolute;
  right: 0; top: 0;
  height: 13rem; width: 13rem;
  border-radius: 9999px;
  background: color-mix(in oklab, var(--magenta) 6%, transparent);
  filter: blur(48px);
}

.chip {
  position: relative;
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: rgba(247, 247, 245, 0.72);
  border-radius: 9999px;
  padding: 0.45rem 1rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--navy);
}
@media (min-width: 768px) { .chip { font-size: 0.6875rem; } }
.chip-dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 9999px;
  background: var(--magenta);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.hero-title {
  position: relative;
  margin-top: 2rem;
  max-width: 56rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.hero-title .accent { color: var(--magenta); }
@media (min-width: 640px) { .hero-title { font-size: 3rem; } }
@media (min-width: 768px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 1280px) { .hero-title { font-size: 4.5rem; } }

.hero-lead {
  position: relative;
  margin-top: 1.75rem;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.65;
  color: oklch(0.26 0.03 255 / 0.72);
}
@media (min-width: 768px) { .hero-lead { font-size: 1.125rem; } }
@media (min-width: 1024px) { .hero-lead { font-size: 1.25rem; } }

.hero-actions {
  position: relative;
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.85rem;
  background: var(--navy);
  color: var(--primary-fg);
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--navy-deep);
  box-shadow: 0 20px 36px -22px rgba(7, 26, 61, 0.9);
}
.btn-primary svg { transition: transform 0.3s; }
.btn-primary:hover svg { transform: translateX(4px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--navy);
  padding: 1rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  transition: transform 0.3s, border-color 0.3s, background 0.3s;
}
.btn-secondary:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--magenta) 35%, transparent);
  background: var(--card);
}

.hero-trust-items {
  position: relative;
  margin-top: 3rem;
  display: grid;
  gap: 1rem;
  border-top: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  padding-top: 2rem;
}
@media (min-width: 768px) { .hero-trust-items { grid-template-columns: repeat(3, 1fr); } }
.hero-trust-items span {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: oklch(0.22 0.07 264 / 0.5);
}

/* Hero visual column */
.hero-visual {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) {
  .hero-visual { grid-template-rows: minmax(0, 1fr) 220px; }
}

.hero-visual-card {
  position: relative;
  overflow: hidden;
  border-radius: 2.25rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  min-height: 340px;
  background: var(--navy);
  box-shadow: 0 26px 80px -36px rgba(7, 26, 61, 0.55);
}
@media (min-width: 768px) { .hero-visual-card { min-height: 420px; } }
@media (min-width: 1024px) { .hero-visual-card { min-height: 520px; } }
.hero-visual-card img {
  height: 100%; width: 100%;
  object-fit: cover;
  object-position: right;
}
.hero-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy), color-mix(in oklab, var(--navy) 16%, transparent) 45%, transparent);
}
.hero-image-copy {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 768px) { .hero-image-copy { padding: 2rem; } }
.hero-image-kicker {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(0.985 0.004 95 / 0.64);
}
.hero-image-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--primary-fg);
}
@media (min-width: 768px) { .hero-image-title { font-size: 1.5rem; } }

.hero-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.hero-mini-card {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 768px) { .hero-mini-card { padding: 2rem; } }
.hero-mini-card.blue {
  background: var(--blue);
  color: var(--primary-fg);
  border-color: transparent;
}
.hero-mini-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .hero-mini-value { font-size: 3rem; } }
.hero-mini-value.magenta { color: var(--magenta); }
.hero-mini-label {
  margin-top: 0.5rem;
  max-width: 12rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: oklch(0.26 0.03 255 / 0.62);
}
.hero-mini-card.blue .hero-mini-label { color: oklch(0.985 0.004 95 / 0.72); }
.hero-mini-icon {
  position: absolute;
  right: 1.25rem; top: 1.25rem;
  width: 2.5rem; height: 2.5rem;
  color: oklch(0.985 0.004 95 / 0.16);
}

/* Hero trust band */
.hero-trust-band {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 1.8rem;
  border: 1px solid color-mix(in oklab, var(--navy) 8%, transparent);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 20px 70px -40px rgba(7, 26, 61, 0.28);
  animation: fade-up 0.8s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (min-width: 1024px) {
  .hero-trust-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    padding: 1.75rem 2.25rem;
  }
}
.hero-trust-copy { display: flex; align-items: flex-start; gap: 1rem; }
@media (min-width: 1024px) { .hero-trust-copy { max-width: 28rem; } }
.hero-trust-icon {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex-shrink: 0;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--magenta) 10%, transparent);
  color: var(--magenta);
}
.hero-trust-kicker {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--magenta);
}
.hero-trust-title {
  margin-top: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--navy);
}
.hero-trust-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid color-mix(in oklab, var(--navy) 8%, transparent);
  padding-top: 1.25rem;
}
@media (min-width: 1024px) {
  .hero-trust-metrics {
    border-top: none;
    border-left: 1px solid color-mix(in oklab, var(--navy) 8%, transparent);
    padding-top: 0;
    padding-left: 2.25rem;
  }
}
.hero-trust-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(0.22 0.07 264 / 0.7);
}
.hero-trust-metric-dot {
  width: 0.375rem; height: 0.375rem;
  border-radius: 9999px;
  background: var(--magenta);
}

/* Hero showcase row */
.hero-showcase {
  display: grid;
  gap: 1.5rem;
  margin-top: 0.5rem;
}
@media (min-width: 1024px) { .hero-showcase { grid-template-columns: 1.15fr 0.85fr; } }

.showcase-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
}
@media (min-width: 768px) { .showcase-panel { padding: 2rem; } }
.showcase-panel.dark {
  background: var(--navy);
  color: var(--primary-fg);
  border-color: transparent;
}
.showcase-title {
  margin-top: 0.75rem;
  max-width: 36rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--navy);
}
@media (min-width: 640px) { .showcase-title { font-size: 1.875rem; } }
@media (min-width: 1024px) { .showcase-title { font-size: 2.25rem; } }
.showcase-image-shell { overflow: hidden; border-radius: 1.4rem; }
.showcase-image {
  height: 320px; width: 100%;
  object-fit: cover;
  transition: transform 0.7s;
}
.showcase-image:hover { transform: scale(1.03); }
.showcase-stack { display: grid; gap: 1.5rem; }
.metric-line { margin-bottom: 1rem; height: 1px; width: 3.5rem; background: color-mix(in oklab, var(--magenta) 70%, transparent); }
.showcase-stat {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-fg);
}
@media (min-width: 768px) { .showcase-stat { font-size: 1.875rem; } }
.showcase-copy {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: oklch(0.985 0.004 95 / 0.76);
}
@media (min-width: 768px) { .showcase-copy { font-size: 1rem; } }

/* =========================================================================
   STATS BAR
   ========================================================================= */
.stats-shell {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border-radius: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--border);
  box-shadow: 0 20px 56px -40px rgba(7, 26, 61, 0.25);
}
@media (min-width: 768px) { .stats-shell { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .stats-shell { grid-template-columns: repeat(4, 1fr); } }
.stats-item { background: var(--navy); padding: 2rem 1.5rem; }
@media (min-width: 768px) { .stats-item { padding: 2.5rem 2rem; } }
.stats-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--primary-fg);
}
@media (min-width: 768px) { .stats-value { font-size: 3rem; } }
.stats-label {
  margin-top: 0.5rem;
  max-width: 20rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.985 0.004 95 / 0.62);
}

/* =========================================================================
   Painéis e cards reutilizáveis
   ========================================================================= */
.section-panel {
  border-radius: 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 20px 60px -36px rgba(7, 26, 61, 0.22);
}
@media (min-width: 768px) { .section-panel { padding: 2.5rem; } }
.section-panel.dark {
  border-color: transparent;
  background: var(--navy);
  color: var(--primary-fg);
  box-shadow: var(--shadow-dark);
}

.section-image-panel {
  position: relative;
  overflow: hidden;
  border-radius: 2.2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--navy);
  box-shadow: 0 24px 80px -42px rgba(7, 26, 61, 0.55);
}
.section-image-panel img { height: 100%; width: 100%; object-fit: cover; }
.section-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--navy), color-mix(in oklab, var(--navy) 16%, transparent) 45%, transparent);
}
.section-image-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.25rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
  color: oklch(0.985 0.004 95 / 0.84);
}
@media (min-width: 768px) { .section-image-caption { padding: 1.5rem 2rem; } }

.section-heading {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
}
@media (min-width: 768px) { .section-heading { font-size: 3rem; } }
.section-panel.dark .section-heading { color: var(--primary-fg); }
.section-lead {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: oklch(0.26 0.03 255 / 0.75);
}
.section-panel.dark .section-lead { color: oklch(0.985 0.004 95 / 0.74); }

.icon-wrap {
  display: inline-grid;
  place-items: center;
  width: 3rem; height: 3rem;
  margin-bottom: 1.25rem;
  border-radius: 1rem;
  background: color-mix(in oklab, var(--magenta) 10%, transparent);
  color: var(--magenta);
}

.detail-card {
  border-radius: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 16px 50px -36px rgba(7, 26, 61, 0.28);
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.about-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .about-grid { grid-template-columns: 0.98fr 1.02fr; gap: 2rem; } }
.about-prose {
  margin-top: 2rem;
  max-width: 42rem;
  display: grid;
  gap: 1.25rem;
  font-size: 1.125rem;
  line-height: 1.7;
  color: oklch(0.26 0.03 255 / 0.76);
}
.about-visual { display: grid; gap: 1.5rem; }
.about-image { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .about-image { aspect-ratio: 1.4 / 1; min-height: 360px; } }
.about-pillars { display: grid; gap: 1rem; }
@media (min-width: 768px) { .about-pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar-title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}
.pillar-copy {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.72);
}

/* =========================================================================
   SOLUTIONS / WHY US (cards)
   ========================================================================= */
.bg-muted { background: color-mix(in oklab, var(--muted-bg) 35%, transparent); }

.section-header-row {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .section-header-row { flex-direction: row; align-items: flex-end; } }
.section-header-row .heading-block { max-width: 48rem; }
.section-header-heading {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--navy);
  text-wrap: balance;
}
@media (min-width: 768px) { .section-header-heading { font-size: 3rem; } }
.section-header-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  transition: color 0.3s;
}
.section-header-link:hover { color: var(--magenta); }

.cards-grid {
  max-width: var(--maxw);
  margin: 3rem auto 0;
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 768px) { .cards-grid.cols-2-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .cards-grid.cols-2-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .cards-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .cards-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.solution-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  height: 100%;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.75rem;
  box-shadow: 0 18px 54px -38px rgba(7, 26, 61, 0.26);
  transition: transform 0.3s, box-shadow 0.3s;
}
.solution-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 70px -38px rgba(7, 26, 61, 0.32);
}
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.card-index {
  font-family: var(--font-display);
  font-size: 1.875rem;
  font-weight: 800;
  color: oklch(0.22 0.07 264 / 0.16);
}
.solution-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
}
.solution-card p {
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.72);
}

.whyus-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.detail-card .icon-wrap { margin-bottom: 1.25rem; }
.detail-card h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}
.detail-card p {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.72);
}

/* =========================================================================
   TIMELINE
   ========================================================================= */
.timeline-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .timeline-grid { grid-template-columns: 0.9fr 1.1fr; gap: 2rem; } }
.timeline-shell { display: grid; gap: 1rem; }
.timeline-card {
  border-radius: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 18px 52px -38px rgba(7, 26, 61, 0.24);
}
@media (min-width: 768px) { .timeline-card { padding: 2rem; } }
.timeline-card.highlight {
  border-color: color-mix(in oklab, var(--magenta) 30%, transparent);
  background: var(--navy);
  color: var(--primary-fg);
}
.timeline-year {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--magenta);
}
.timeline-copy {
  margin-top: 0.75rem;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.74);
}
.timeline-card.highlight .timeline-copy { color: oklch(0.985 0.004 95 / 0.82); }

/* =========================================================================
   PRESENCE
   ========================================================================= */
.presence-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .presence-grid { grid-template-columns: 0.95fr 1.05fr; gap: 2rem; } }
.presence-flag { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--magenta); }
.presence-list { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.presence-item { border-left: 2px solid var(--magenta); padding-left: 1rem; }
.presence-item-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
}
.presence-item-copy {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.72);
}
.presence-image { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .presence-image { aspect-ratio: auto; min-height: 520px; } }
.presence-floating {
  position: absolute;
  bottom: 1.5rem; right: 1.5rem;
  max-width: 220px;
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: oklch(0.22 0.07 264 / 0.84);
  padding: 1rem 1.25rem;
  box-shadow: 0 20px 60px -34px rgba(7, 26, 61, 0.54);
  backdrop-filter: blur(20px);
}
.presence-floating-value {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--primary-fg);
}
.presence-floating-label {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: oklch(0.985 0.004 95 / 0.7);
}

/* =========================================================================
   SECURITY
   ========================================================================= */
.security-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .security-grid { grid-template-columns: 0.92fr 1.08fr; gap: 2rem; } }
.executive-note {
  margin-top: 2.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-radius: 1.6rem;
  border: 1px solid var(--border);
  background: rgba(247, 247, 245, 0.72);
  padding: 1.25rem;
}
.executive-note svg { margin-top: 0.25rem; flex-shrink: 0; color: var(--magenta); }
.executive-note p {
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.78);
}
.security-cards { display: grid; gap: 1rem; }
@media (min-width: 640px) { .security-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .security-cards { grid-template-columns: repeat(3, 1fr); } }
.security-card {
  border-radius: 1.8rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  padding: 1.5rem;
  box-shadow: 0 16px 50px -36px rgba(7, 26, 61, 0.22);
  transition: transform 0.3s;
}
.security-card:hover { transform: translateY(-4px); }
.security-card h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--navy);
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-head { max-width: 48rem; margin-inline: auto; text-align: center; }
.faq-list { max-width: 52rem; margin: 3rem auto 0; display: grid; gap: 1rem; }
.faq-item {
  border-radius: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: var(--card);
  box-shadow: 0 16px 50px -36px rgba(7, 26, 61, 0.22);
  overflow: hidden;
}
.faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--navy);
  transition: color 0.25s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::marker { content: ""; }
.faq-q:hover { color: var(--magenta); }
.faq-q:focus-visible { outline: 2px solid var(--magenta); outline-offset: 2px; border-radius: 0.5rem; }
.faq-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--magenta);
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 1.5rem 1.4rem; }
.faq-a p {
  max-width: 46rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: oklch(0.26 0.03 255 / 0.74);
}
@media (min-width: 768px) {
  .faq-q { padding: 1.5rem 1.85rem; font-size: 1.125rem; }
  .faq-a { padding: 0 1.85rem 1.6rem; }
}

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid {
  max-width: var(--maxw);
  margin-inline: auto;
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 0.92fr 1.08fr; gap: 2rem; } }
.contact-info-list { margin-top: 2.5rem; display: grid; gap: 1.25rem; font-size: 0.875rem; color: oklch(0.985 0.004 95 / 0.8); }
.contact-info-list li { display: flex; align-items: flex-start; gap: 0.75rem; }
.contact-info-list svg { margin-top: 0.125rem; flex-shrink: 0; color: var(--magenta); }
.contact-info-list .label-strong { font-weight: 600; color: var(--primary-fg); }
.contact-info-list .label-dim { color: oklch(0.985 0.004 95 / 0.6); }
.contact-info-list a:hover { color: var(--magenta); }

.contact-form { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .contact-form { grid-template-columns: repeat(2, 1fr); } }
.field-full { grid-column: 1 / -1; }
.contact-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: oklch(0.22 0.07 264 / 0.5);
}
.contact-label .req { color: var(--magenta); }
.contact-input,
.contact-textarea {
  margin-top: 0.75rem;
  width: 100%;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.contact-textarea { min-height: 150px; resize: none; }
.contact-input::placeholder,
.contact-textarea::placeholder { color: oklch(0.26 0.03 255 / 0.3); }
.contact-input:focus,
.contact-textarea:focus {
  border-color: color-mix(in oklab, var(--magenta) 45%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--magenta) 10%, transparent);
}
.contact-submit-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.contact-disclaimer {
  max-width: 28rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.55);
}

/* Honeypot — fora da tela, invisível para humanos */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Mensagem de status do formulário */
.form-status {
  grid-column: 1 / -1;
  display: none;
  border-radius: 1rem;
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
}
.form-status.is-visible { display: block; }
.form-status.is-success {
  background: color-mix(in oklab, var(--blue) 12%, transparent);
  color: var(--navy);
  border: 1px solid color-mix(in oklab, var(--blue) 30%, transparent);
}
.form-status.is-error {
  background: color-mix(in oklab, var(--magenta) 10%, transparent);
  color: var(--magenta);
  border: 1px solid color-mix(in oklab, var(--magenta) 30%, transparent);
}

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 3rem 1rem;
}
@media (min-width: 768px) { .site-footer { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .site-footer { padding-inline: 2rem; } }
.footer-top {
  max-width: var(--maxw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) { .footer-top { flex-direction: row; align-items: flex-end; justify-content: space-between; } }
.footer-about {
  margin-top: 1rem;
  max-width: 24rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: oklch(0.26 0.03 255 / 0.62);
}
.footer-side { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) { .footer-side { align-items: flex-end; } }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.26 0.03 255 / 0.68);
}
.footer-nav a:hover { color: var(--magenta); }
.footer-social {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 0.85rem;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--navy);
  transition: transform 0.3s, border-color 0.3s, color 0.3s;
}
.footer-social:hover { transform: translateY(-2px); border-color: var(--magenta); color: var(--magenta); }
.footer-legal {
  max-width: var(--maxw);
  margin: 2.5rem auto 0;
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  font-size: 0.75rem;
  color: oklch(0.26 0.03 255 / 0.48);
}
.footer-legal a { color: inherit; font-weight: 600; transition: color 0.25s; }
.footer-legal a:hover { color: var(--magenta); }

/* ---------- Acessibilidade: movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Sem movimento: o ícone do FAQ aplica o estado aberto/fechado instantaneamente
     (evita ficar "preso" no quadro inicial da transição) */
  .faq-icon { transition: none !important; }
}