/* Ever Designer · Landing page
   Base: reset, tipografia e layout. Classes herdadas do Design System v1.0
   (design-system/index.html) — mesmos nomes e regras. Só lê tokens. */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-24); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
p, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
::selection { background: var(--color-primary); color: var(--color-white); }
.lucide {
  width: var(--icon-md); height: var(--icon-md); flex: none;
  fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: var(--z-tooltip);
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible { transform: none; }

/* Textura de grão sobre a página inteira — quase imperceptível, quebra o preto chapado */
body::after {
  content: ""; position: fixed; inset: 0; z-index: var(--z-overlay); pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Type ---------- */
.h1, .h2, .h3, .h4, .display, .statement {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }
.display { font-size: var(--fs-logo-md); letter-spacing: var(--ls-display); line-height: var(--lh-display); }
.statement { font-size: var(--fs-h1); }
:is(.h1, .h2, .h3, .h4, .display, .statement) b { font-weight: var(--fw-bold); }
:is(.h1, .h2, .display, .statement) mark { background: none; color: inherit; font-weight: var(--fw-bold); box-shadow: inset 0 -0.12em 0 var(--color-primary); }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); }
.muted { color: var(--color-text-secondary); }
.dim { color: var(--color-text-muted); }
.label {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.caption { font-size: var(--fs-caption); line-height: var(--lh-body-sm); color: var(--color-text-muted); }
.spec { font-size: var(--fs-caption); line-height: var(--lh-body-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.prose { display: flex; flex-direction: column; gap: var(--space-5); max-width: var(--text-max); color: var(--color-text-secondary); }
.prose .lead { color: var(--color-text-primary); font-size: var(--fs-body-lg); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  gap: var(--gutter);
}
.grid > * { grid-column: 1 / -1; min-width: 0; }
@media (min-width: 768px) {
  .grid > .t-2 { grid-column: span 2; }
  .grid > .t-3 { grid-column: span 3; }
  .grid > .t-4 { grid-column: span 4; }
  .grid > .t-5 { grid-column: span 5; }
  .grid > .t-6 { grid-column: span 6; }
  .grid > .t-8 { grid-column: span 8; }
}
@media (min-width: 1024px) {
  .grid > .d-3 { grid-column: span 3; --span: 3; }
  .grid > .d-4 { grid-column: span 4; --span: 4; }
  .grid > .d-5 { grid-column: span 5; --span: 5; }
  .grid > .d-6 { grid-column: span 6; --span: 6; }
  .grid > .d-7 { grid-column: span 7; --span: 7; }
  .grid > .d-8 { grid-column: span 8; --span: 8; }
  .grid > .d-9 { grid-column: span 9; --span: 9; }
  .grid > .d-12 { grid-column: span 12; --span: 12; }
  /* Início de coluna explícito para assimetrias */
  .grid > .ds-4 { grid-column: 4 / span var(--span, 1); }
  .grid > .ds-5 { grid-column: 5 / span var(--span, 1); }
  .grid > .ds-6 { grid-column: 6 / span var(--span, 1); }
  .grid > .ds-7 { grid-column: 7 / span var(--span, 1); }
  .grid > .ds-8 { grid-column: 8 / span var(--span, 1); }
  .grid > .ds-9 { grid-column: 9 / span var(--span, 1); }
}
.stack { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-8); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.row--lg { gap: var(--space-6); }

.section { position: relative; padding-block: var(--section-space); }
.section > .container { position: relative; }

/* ---------- Motion ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-4));
  transition:
    opacity calc(var(--dur-slow) * 2) var(--ease-standard),
    transform calc(var(--dur-slow) * 2) var(--ease-standard);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}