@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Space Grotesk'; src:url('fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

@font-face{ font-family:'Inter'; src:url('fonts/Inter-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

@font-face{ font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'JetBrains Mono'; src:url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

:root{
  --ink: #0B1220;
  --panel: #121D30;
  --panel-2: #16233A;
  --line: #263551;
  --line-soft: #1C2A44;
  --paper: #EEF1F6;
  --paper-line: #C9D0DE;
  --gold: #E8A13D;
  --gold-soft: #4A3A1E;
  --teal: #2FBFA6;
  --teal-soft: #163B36;
  --text: #EDEFF5;
  --text-muted: #93A0BC;
  --text-dim: #5C6786;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ background:var(--ink); }
body{
  font-family:var(--font-body); color:var(--text); -webkit-font-smoothing:antialiased;
  /* impede que iOS/Android inflem o texto sozinhos e quebrem o layout */
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}

/* layout em tela: centraliza as paginas e da um respiro visual entre elas.
   No print/PDF (@page abaixo) isso nao tem efeito. */
@media screen{
  body{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 0; }
  .page{ box-shadow:0 20px 60px rgba(0,0,0,0.35); }
}

@page{ size:210mm 297mm; margin:0; }

.page{
  width:210mm;
  height:297mm;
  position:relative;
  background:var(--ink);
  overflow:hidden;
  page-break-after:always;
  padding:16mm 16mm 14mm 16mm;
  display:flex;
  flex-direction:column;
}
.page:last-child{ page-break-after:auto; }

/* faint blueprint dot grid */
.page::before{
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.055) 1px, transparent 1px);
  background-size: 9mm 9mm;
  pointer-events:none;
}

/* corner registration marks */
.reg{ position:absolute; width:7mm; height:7mm; pointer-events:none; opacity:.55; }
.reg::before,.reg::after{ content:''; position:absolute; background:var(--text-dim); }
.reg::before{ left:50%; top:0; bottom:0; width:1px; transform:translateX(-50%); }
.reg::after{ top:50%; left:0; right:0; height:1px; transform:translateY(-50%); }
.reg.tl{ top:8mm; left:8mm; }
.reg.tr{ top:8mm; right:8mm; }
.reg.bl{ bottom:8mm; left:8mm; }
.reg.br{ bottom:8mm; right:8mm; }

/* ===== running header ===== */
.pagehead{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:5mm; margin-bottom:8mm;
  border-bottom:1px solid var(--line);
  position:relative; z-index:2;
}
.eyebrow{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); display:flex; align-items:center; gap:6px;
}
.eyebrow::before{ content:''; width:6px; height:6px; background:var(--teal); display:inline-block; }
.pageindex{
  font-family:var(--font-mono); font-size:12.5px; color:var(--text-dim); letter-spacing:.08em;
}
.brandmark-mini{
  font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:.02em; color:var(--text-muted);
}

/* ===== typography helpers ===== */
h1.h-hero{ font-family:var(--font-display); font-weight:700; font-size:42.5px; line-height:1.12; letter-spacing:-.01em; color:var(--text); }
h2.h-page{ font-family:var(--font-display); font-weight:700; font-size:32.5px; line-height:1.16; letter-spacing:-.01em; color:var(--text); margin-bottom:4mm; }
p.lead{ font-family:var(--font-body); font-size:16px; line-height:1.65; color:var(--text-muted); max-width:145mm; }
p.body-sm{ font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--text-muted); }

.tag{
  display:inline-block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-soft); background:rgba(232,161,61,0.08);
  padding:2.6px 7px; border-radius:2px;
}

/* ===== CTA ribbon (persistent) ===== */
.cta-ribbon{
  margin-top:auto;
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--line); background:var(--panel);
  padding:5mm 6mm; gap:6mm;
}
.cta-ribbon .msg{ font-family:var(--font-body); font-size:14.5px; color:var(--text); }
.cta-ribbon .msg b{ color:var(--gold); font-weight:600; }
.cta-btn{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); text-decoration:none;
  padding:6.5px 12px; white-space:nowrap; display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--gold);
}
.cta-btn .arrow{ font-family:var(--font-mono); }
.cta-btn.ghost{ background:transparent; color:var(--gold); }

.footer-note{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-dim);
  margin-top:4mm; position:relative; z-index:2;
}