:root {
  --ink: #15171a;
  --mute: #6f747b;
  --bg: #f1f2f3;
  --font: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px clamp(16px, 4vw, 48px);
}
.logo { font-weight: 700; font-size: 18px; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.logo span { color: var(--mute); font-weight: 500; margin-left: 2px; }
.nav nav { display: flex; gap: 28px; }
.nav nav a { color: var(--ink); text-decoration: none; font-size: 14px; opacity: .7; transition: opacity .2s; }
.nav nav a:hover { opacity: 1; }

/* Cabeçalho: 500vh de rolagem; o palco fica preso na tela */
.cine { position: relative; height: 500vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.wall {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, #fff 0%, #eceef0 38%, #cfd3d8 38.2%, #dfe2e5 60%, #f6f7f8 100%);
  transition: none;
}
#clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.scene {
  position: absolute; left: clamp(20px, 6vw, 96px); top: 50%;
  transform: translateY(-50%); max-width: 44ch;
  opacity: 0; will-change: opacity, transform; pointer-events: none;
}
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 18px; }
h1, .scene h2 { font-weight: 700; letter-spacing: -.035em; line-height: 1.02; }
h1 { font-size: clamp(44px, 7.2vw, 112px); }
.scene h2 { font-size: clamp(34px, 4.6vw, 72px); }
.lead { margin-top: 22px; color: var(--mute); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.5; max-width: 34ch; }
.mark { font-size: clamp(48px, 8vw, 128px); font-weight: 700; letter-spacing: -.045em; color: #c8cbd0; }
.s2 .eyebrow { margin: 10px 0 0 6px; }

.hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--mute);
}
.bar { position: absolute; right: clamp(16px, 3vw, 40px); top: 50%; height: 120px; width: 2px; margin-top: -60px; background: #0000001a; border-radius: 2px; }
.bar i { display: block; width: 100%; height: 0; background: var(--ink); border-radius: 2px; }

.block { padding: 18vh clamp(20px, 6vw, 96px); min-height: 70vh; }
.block h2 { font-size: clamp(32px, 5vw, 72px); letter-spacing: -.035em; max-width: 18ch; line-height: 1.04; }
.block p { margin-top: 24px; color: var(--mute); font-size: 18px; }
.block.alt { background: #e6e8ea; }

@media (max-width: 720px) {
  .scene { top: 22%; transform: none; }
  .bar { display: none; }
  .wall { background: linear-gradient(160deg, #fff 0%, #e9ebed 45%, #d3d6da 45.2%, #eef0f1 100%); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }