@charset "UTF-8";
/* ===== BASE: tokens, reset, tipografia, fundo ===== */
/* Conceito: painel de carro à noite, azul elétrico sobre preto, acento muda com a temperatura. */
:root {
  --bg: #02050d;
  --bg-2: #060d1f;
  --blue: #1e6bff;
  --cyan: #38b6ff;
  --green: #22c243;
  --green-dark: #0d8a28;
  --text: #eaf2ff;
  --muted: #9bb0d3;
  --card: rgba(9, 22, 56, 0.6);
  --line: rgba(56, 130, 255, 0.38);
  --red: #e5322d;

  /* mudam em tempo real com o controle de temperatura (JS) */
  --accent: hsl(210 100% 60%);
  --accent-soft: hsl(210 100% 60% / 0.35);

  --font-display: 'Exo 2', 'Segoe UI', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', sans-serif;

  --header-h: 84px;
  --radius: 18px;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: auto; overflow-x: hidden; overflow-x: clip; max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.5;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

body::before { /* faixa sob a barra do sistema no celular */
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: #02050d;
  z-index: 200;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.icon { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fundo azul profundo com brilhos */
.page-glow {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 40% at 85% 0%, rgba(30, 107, 255, 0.22), transparent 70%),
    radial-gradient(50% 35% at 0% 55%, rgba(30, 107, 255, 0.14), transparent 70%),
    radial-gradient(60% 40% at 100% 100%, rgba(56, 182, 255, 0.12), transparent 70%),
    var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}