/* AgoExpress — vermelho e branco, montra amigável de rua e mercado */
:root {
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Poppins", "DM Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --wm-font: "Poppins", "DM Sans", system-ui, sans-serif;
  --wm-ls: -0.045em;

  --bg: #ffffff;
  --bg-2: #fff1ee;
  --surface: #ffffff;
  --surface-2: #fff6f4;
  --line: #f1d9d4;
  --grid: rgba(217, 45, 32, .06);
  --text: #2a1512;
  --muted: #76574f;
  --accent: #d92d20;
  --accent-hi: #b42318;
  --accent-ink: #ffffff;
  --ok: #167a46;
  --warn: #a8610a;
  --bad: #d92d20;
  --header-bg: rgba(255, 255, 255, .94);
  --panel-shadow: 0 34px 60px -30px rgba(80, 8, 2, .55);
  --ring: rgba(217, 45, 32, .22);
  --rad-btn: 99px;
  --rad-in: 12px;
  --rad-panel: 24px;
}
.wordmark { font-weight: 700; }
.wordmark i { font-weight: 500; }
.tagline, .section h2, .cta h2 { font-weight: 600; letter-spacing: -0.03em; }
.feat h3, .steps h3 { font-weight: 600; }
.mark { color: var(--text); }
.seg { border-radius: 99px; }
.seg button { border-radius: 99px; }
.btn-sm { padding: .4rem .9rem; }

/* herói em vermelho, com a demonstração em branco por cima */
.hero { background: var(--accent); }
.hero::before {
  -webkit-mask-image: none; mask-image: none;
  background-image: radial-gradient(rgba(255, 255, 255, .17) 1.6px, transparent 1.8px);
  background-size: 24px 24px;
}
.hero-copy { color: #fff; }
.hero-copy .wordmark i { color: #ffd2cc; }
.hero-copy .lead { color: rgba(255, 255, 255, .9); }
.hero-copy .btn-primary { background: #fff; color: var(--accent); border-color: #fff; }
.hero-copy .btn-primary:hover { background: #ffe9e6; border-color: #ffe9e6; }
.hero-copy .btn:not(.btn-primary) { color: #fff; border-color: rgba(255, 255, 255, .6); }
.hero-copy .btn:not(.btn-primary):hover { border-color: #fff; }

.section { background: #fff; }
.feat > div { border-top: 2px solid var(--line); }
.steps li { border-top: 2px solid var(--line); }
.steps li::before { width: 100%; background: var(--accent); }
.cta { background: var(--bg-2); }
.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"); }
.browser { border-radius: 16px; }
.prod { border-radius: 14px; }