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

html, body { margin: 0; padding: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  -webkit-tap-highlight-color: transparent;
}

* { touch-action: manipulation; }

@media (max-width: 480px) {
  html { font-size: 14px; }
}

body {
  font-family: var(--font-body);
  line-height: var(--lh-base);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Grid sutil de 40px no fundo — quebra a flatness */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(to right, rgba(30, 41, 59, 0.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 41, 59, 0.45) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  opacity: 0.5;
  mask-image: radial-gradient(ellipse at top, rgba(0,0,0,0.7), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top, rgba(0,0,0,0.7), transparent 75%);
}

/* Ruído SVG sutil em cima — 2% opacidade */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

main, header, footer { position: relative; z-index: 1; }

a {
  color: inherit;
  text-decoration: none;
}

a:hover { color: var(--text); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

img, svg { display: block; max-width: 100%; }

::selection {
  background: var(--accent);
  color: var(--bg);
}

/* Scrollbar discreta no tema escuro */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
  padding-left: max(var(--s-6), env(safe-area-inset-left));
  padding-right: max(var(--s-6), env(safe-area-inset-right));
}

@media (max-width: 640px) {
  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}