/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body { scroll-behavior: smooth; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; padding: 0; }
::selection { background: var(--orange); color: #fff; }

h1, h2, h3, h4 {
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 700;
  text-wrap: balance;
}
/* Flipahaus (marca/impacto) reservado para os grandes títulos de destaque —
   é uma fonte de peso único, então não herda font-weight das demais. */
h1, .hero h1, .section-head h2, .cta-banner h2, .page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ---------- Layout helpers ---------- */
.wrap { width: min(100% - var(--gutter)*2, var(--maxw)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h1,.section--ink h2,.section--ink h3 { color: #fff; }

/* Blueprint texture background (industrial atmosphere) */
.blueprint {
  background-image:
    linear-gradient(rgba(22,58,158,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22,58,158,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.blueprint--dark {
  background-image:
    linear-gradient(rgba(90,149,230,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,149,230,.09) 1px, transparent 1px);
  background-size: 34px 34px;
}

.section-head { max-width: 62ch; margin-bottom: clamp(2rem,4vw,3.4rem); }
.section-head h2 { font-size: var(--step-3); margin-top: .8rem; }
.section-head p { margin-top: 1rem; color: var(--muted); font-size: var(--step-1); }
.section--ink .section-head p { color: var(--slate-300); }