/* Piloto — vermelho e branco, arestas vivas e velocidade */
:root {
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Archivo", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wm-font: "Archivo", system-ui, sans-serif;
  --wm-ls: -0.04em;

  --bg: #ffffff;
  --bg-2: #fdeeee;
  --surface: #ffffff;
  --surface-2: #f6f1f1;
  --line: #e8dada;
  --grid: rgba(200, 16, 46, .06);
  --text: #171012;
  --muted: #655658;
  --accent: #c8102e;
  --accent-hi: #a20c25;
  --accent-ink: #ffffff;
  --ok: #1b7f45;
  --warn: #a8480a;
  --bad: #c8102e;
  --route-manual: #171012;
  --header-bg: rgba(255, 255, 255, .94);
  --panel-shadow: 10px 10px 0 var(--accent);
  --ring: rgba(200, 16, 46, .22);
  --rad-btn: 2px;
  --rad-in: 2px;
  --rad-panel: 4px;
}
.wordmark { font-weight: 800; font-style: italic; }
.wordmark i { font-weight: 500; font-style: normal; }
.tagline { font-weight: 800; letter-spacing: -0.025em; }
.section h2, .cta h2 { font-weight: 800; letter-spacing: -0.03em; }
.feat h3, .steps h3 { font-weight: 700; }
.btn { font-weight: 600; }
.btn-primary { font-weight: 700; }
.mark { color: var(--text); }

/* faixas de velocidade atrás da demonstração */
.hero::before {
  -webkit-mask-image: none; mask-image: none;
  background-image:
    linear-gradient(115deg, transparent 0 58%, var(--accent) 58% 59.2%, transparent 59.2% 60.6%, var(--accent) 60.6% 61.4%, transparent 61.4% 62.4%, var(--accent) 62.4% 62.8%, transparent 62.8%),
    linear-gradient(115deg, #fff 0 58%, var(--bg-2) 58%);
  background-size: auto;
}
.panel { border: 2px solid var(--text); }
.panel-head { background: var(--text); color: #fff; border-bottom: 0; }
.panel-head b { color: #ff8da0; }
.map { border-color: var(--text); background: #fff; }
.street { stroke: #eadede; }
.street.main { stroke: #dcc5c5; }
.seg { border-color: var(--text); background: #fff; border-radius: 3px; }
.seg button { border-radius: 2px; }
.stat { border-radius: 2px; border-color: var(--line); background: #fff; }
.stat b { color: var(--text); }
.stat.gain { border-color: var(--accent); }
.stat.gain b { color: var(--accent); }
.steps li::before { background: var(--accent); width: 100%; height: 3px; top: -3px; }
.steps li { border-top: 3px solid var(--line); }
.feat > div { border-top: 3px solid var(--text); }
.cta { background: var(--accent); border-top: 0; }
.cta h2, .cta p { color: #fff; }
.cta .btn-primary { background: #fff; color: var(--accent); border-color: #fff; }
.cta .btn-primary:hover { background: #ffe9ec; border-color: #ffe9ec; }
.cta .btn:not(.btn-primary) { color: #fff; border-color: rgba(255, 255, 255, .6); }
.cta .btn:not(.btn-primary):hover { border-color: #fff; }
.checks li.ok::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4 4.6-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }