*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  interpolate-size: allow-keywords;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--c-night);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* overflow do body propaga para a viewport e não corta; main corta os brilhos decorativos */
main { overflow-x: clip; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

:focus-visible { outline: 3px solid var(--c-gold); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--c-gold-light); color: var(--c-night); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 300;
  padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  background: var(--c-night); color: var(--c-ivory);
  transition: top var(--dur-fast);
}
.skip:focus { top: 1rem; }

.icon {
  width: 1.25em; height: 1.25em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Fundos estáticos por seção (sem JS / reduced motion). Com .has-motion o body anima a cor. */
[data-bg="cream"] { background: var(--c-cream); }
[data-bg="sand"] { background: var(--c-sand); }
[data-bg="ivory"] { background: var(--c-ivory); }
[data-bg="night"] { background: var(--c-night); }
.has-motion [data-bg]:not([data-bg="night"]) { background: transparent; }

.container { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.container--narrow { --maxw: 44rem; }
.section { position: relative; padding-block: clamp(5rem, 12vw, 9rem); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-gold-deep);
}
.eyebrow::before { content: ""; width: 1.75em; height: 1px; background: linear-gradient(90deg, transparent, currentColor); }
.eyebrow--light { color: var(--c-gold-light); }

.h2 {
  margin-top: 0.75rem;
  font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: 500;
  line-height: 1.08; letter-spacing: -0.01em; text-wrap: balance;
}
.h2--light { color: var(--c-ivory); }

.lead {
  max-width: 38ch; margin-top: 1.25rem;
  font-size: var(--fs-lg); line-height: 1.5; color: var(--c-ink-muted); text-wrap: pretty;
}
.lead--light { color: rgb(255 251 244 / 0.8); }

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cta-row--center { justify-content: center; }

.btn {
  --btn-bg: var(--c-night);
  --btn-fg: var(--c-ivory);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 3.25rem; padding: 0.9rem 1.6rem;
  border: 0; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
  cursor: pointer; box-shadow: var(--shadow-warm);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition:
    transform var(--dur-fast) var(--ease-out-expo),
    translate var(--dur) var(--ease-out-expo),
    box-shadow var(--dur) var(--ease-out-expo);
}
.btn:hover { box-shadow: var(--shadow-glow); }
.btn:active { transform: scale(0.97); }
.btn--ghost {
  --btn-bg: rgb(255 251 244 / 0.6);
  --btn-fg: var(--c-night);
  --btn-bg: rgb(255 251 244 / 0.9);
  box-shadow: inset 0 0 0 1.5px rgb(27 42 65 / 0.18);
}
.btn--gold { --btn-bg: var(--grad-gold); --btn-fg: var(--c-night); }
.btn--lg { min-height: 3.75rem; padding-inline: 2rem; font-size: var(--fs-base); }
@media (max-width: 30rem) {
  .cta-row .btn { flex: 1 1 100%; }
}

.social-link {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 3rem; margin-top: 1.5rem;
  font-weight: 600; text-decoration: none; color: var(--c-night);
  background: linear-gradient(currentColor 0 0) 0 100% / 0 1px no-repeat;
  transition: background-size var(--dur) var(--ease-out-expo);
}
.social-link:hover { background-size: 100% 1px; }
.social-link--small { margin-top: 0.25rem; font-size: var(--fs-sm); }