/* Storm . base: tokens da identidade Storm Azul, reset e componentes */
:root {
  --nevoa: #EEF2F7; --ceu: #9DBCE6; --raio: #1A63F0; --tempestade: #1A4B9B; --marinho: #0B2A5B; --abismo: #06142B; --chumbo: #5B6A80;
  --bg: #06142B; --bg-2: #081831; --surface: #0C1E3B; --surface-2: #0F2447;
  --line: #1C3256; --line-strong: #2A4268;
  --ink: #EEF2F7; --ink-2: #C9D6E8; --muted: #9AA8BD;
  --accent: #4C8DFF; --accent-soft: rgba(76, 141, 255, .12);
  --success: #4CC9A0; --danger: #FF8A80; --warning: #F0B45A; --warning-soft: #2E2414;
  --light-bg: #EEF2F7; --light-ink: #06142B; --light-ink-2: #3B4A63; --light-line: #D5DDE8; --light-accent: #1556D6;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-text: 'Instrument Sans', system-ui, sans-serif;
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-pill: 999px;
  --container: 1180px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: 160ms; --t-ui: 240ms; --t-enter: 600ms;
  --z-header: 40; --z-modal: 100;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }
[hidden] { display: none !important; }
::selection { background: var(--raio); color: #fff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--raio); color: #fff; padding: 10px 16px; border-radius: var(--r-sm); font-weight: 600; transition: top var(--t-fast); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }

/* Tipografia */
.display, h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); letter-spacing: -.02em; line-height: 1.2; }
h1 em, h2 em, h3 em { font-style: normal; color: var(--ceu); }
p { text-wrap: pretty; }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.muted { color: var(--muted); }

.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.eyebrow::before { content: ""; width: 32px; height: 2px; background: currentColor; border-radius: 2px; }

/* Seções */
.section { position: relative; padding: 96px 0; }
@media (min-width: 1024px) { .section { padding: 128px 0; } }
.section-head { display: grid; gap: 20px; margin-bottom: 56px; max-width: 760px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section.light { background: var(--light-bg); color: var(--light-ink); }
.section.light .lead, .section.light p { color: var(--light-ink-2); }
.section.light .eyebrow { color: var(--light-accent); }
.section.light h2 em, .section.light h3 em { color: var(--light-accent); }
.section.deep { background: var(--bg-2); }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--r-md); font-weight: 600; font-size: 1rem; letter-spacing: .005em; transition: background-color var(--t-fast) ease-out, transform var(--t-ui) var(--ease-out), border-color var(--t-fast); touch-action: manipulation; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--t-ui) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--raio); color: #fff; }
.btn-primary:hover { background: #1556D6; }
.btn-ghost { border: 1px solid var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--surface); border-color: var(--accent); }
.btn-lg { min-height: 60px; padding: 0 32px; font-size: 1.06rem; }

/* Ícones e chips */
.icon { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ibox { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--accent-soft); border: 1px solid rgba(76,141,255,.25); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.section.light .ibox { background: #DCE6F5; border-color: #C3D4EE; color: var(--light-accent); }
.chip { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 14px; background: rgba(12,30,59,.6); }
.chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(76,201,160,.15); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 32px; transition: border-color var(--t-ui), transform var(--t-ui) var(--ease-out); }
.card:hover { border-color: var(--line-strong); }
.section.light .card { background: #fff; border-color: var(--light-line); }

/* Grade de fundo */
.grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(157,188,230,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(157,188,230,.05) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%); }

/* Motion: revelar ao rolar */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}