/* Marca · Empresa Inquebrável.
   Base do sistema de palco do fernandojr.net (tokens, botões, eyebrow, ilha,
   entrada por scroll) vestida com o verde e a Geist da LP do workshop. */

:root {
  --ground: #03140c; --surface: #0a2619; --stage: #071d13; --stage-raised: #0d2a1d;
  --ink: #eef7f1; --ink-muted: #9dbcab; --ink-dim: #86a595;
  --stage-fg: #fff; --stage-muted: #a9c6b6;
  --line: #ffffff14; --line-strong: #24473a; --stage-line: #ffffff1f;
  --brand: #2fd08a; --brand-hover: #5be0a5; --brand-text: #4fe0a0; --stage-accent: #7ae9b8; --on-brand: #02110a;
  --brand-soft: #2fd08a26; --brand-glow: #2fd08a33;
  --font-display: Geist, system-ui, sans-serif;
  --font-body: Geist, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px;
  --ring: 0 0 0 1px #ffffff14; --lift: 0 24px 60px -35px #000;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink-muted); font: 400 16px/1.75 var(--font-body); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--ink); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
b { font-weight: 600; color: var(--ink); }
em { font-style: normal; color: var(--brand-text); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }
.ico { width: 16px; height: 16px; flex: none; }

/* entrada por scroll: só esconde se o JS rodou (html.js) */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); font: 600 15px/1 var(--font-body); cursor: pointer; transition: background-color .15s ease-out, scale .15s ease-out; }
.btn:active { scale: .97; }
.btn .ico { transition: translate .2s ease-out; }
.btn:hover .ico { translate: 2px 0; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: inset 0 1px 0 #ffffff40, 0 10px 28px -12px var(--brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-outline { background: transparent; color: var(--stage-fg); box-shadow: inset 0 0 0 1px #ffffff47; }
.btn-outline:hover { background: #ffffff14; }
.btn-sm { min-height: 40px; padding: 0 18px; font-size: 14px; white-space: nowrap; }

.eyebrow { display: block; margin: 0 0 14px; font: 600 12px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-text); }

.island-stage { background: var(--stage); box-shadow: inset 0 0 0 1px var(--stage-line); }
.island-stage :is(h1, h2, h3), .island-stage b { color: var(--stage-fg); }
.island-stage p { color: var(--stage-muted); }
.island-stage em, .island-stage .eyebrow { color: var(--stage-accent); }