/* ============================================================
   Mr. Duck — Design tokens
   Paleta, escala fluida, tipografia, movimento
   ============================================================ */

:root {
  /* --- Cor --- */
  --color-bg: #070808;
  --color-bg-soft: #0B0D0D;
  --color-surface: #111414;
  --color-surface-elevated: #181C1C;

  --color-primary: #E6FF00;
  --color-primary-hover: #D4EB00;
  --color-primary-pressed: #BDD200;
  --color-primary-soft: rgba(230, 255, 0, 0.10);
  --color-primary-border: rgba(230, 255, 0, 0.24);
  --color-primary-glow: rgba(230, 255, 0, 0.16);

  --color-text: #F7F8F5;
  --color-text-secondary: #B2B8B3;
  --color-text-muted: #737A75;

  --color-border: rgba(255, 255, 255, 0.10);
  --color-border-strong: rgba(255, 255, 255, 0.16);

  --color-success: #92F59B;
  --color-error: #FF7272;

  /* --- Tipografia --- */
  --font-sans:
    "Manrope",
    "Inter Variable",
    "Inter",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --font-body:    clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --font-small:   clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
  --font-eyebrow: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
  --font-h3:      clamp(1.375rem, 1.1667rem + 0.9259vw, 2rem);
  --font-h2:      clamp(2rem, 1.3333rem + 2.963vw, 4rem);
  --font-h1:      clamp(2.5rem, 1.5833rem + 4.0741vw, 5.25rem);

  /* --- Espaço --- */
  --section-space: clamp(5rem, 3.3333rem + 7.4074vw, 10rem);
  --page-gutter:   clamp(1.25rem, 0.3333rem + 4.0741vw, 4rem);
  --card-padding:  clamp(1.25rem, 0.9167rem + 1.4815vw, 2.25rem);
  --grid-gap:      clamp(1rem, 0.6667rem + 1.4815vw, 2rem);
  --radius-card:   clamp(0.875rem, 0.6667rem + 0.9259vw, 1.5rem);
  --radius-sm: 10px;
  --radius-pill: 999px;

  --container: 1280px;

  /* --- Movimento --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-panel: 320ms;
  --dur-section: 420ms;
  --dur-dialog: 460ms;

  /* --- Sombra --- */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 40px -24px rgba(0,0,0,0.9);
  --shadow-elevated: 0 1px 0 rgba(255,255,255,0.05) inset, 0 32px 70px -30px rgba(0,0,0,0.95);

  --header-h: 72px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* Rede de segurança: um ícone sem dimensão declarada jamais deve ocupar a
   largura inteira do container caso alguma regra de tamanho não se aplique.
   O sprite (width="0") fica de fora por já ter o atributo. */
svg:not([width]) { width: 1.25em; height: 1.25em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--color-primary); color: var(--color-bg); }

/* ============================================================
   Tipografia base
   ============================================================ */
h1, h2, h3 {
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
h1 { font-size: var(--font-h1); letter-spacing: -0.055em; line-height: 0.98; }
h2 { font-size: var(--font-h2); letter-spacing: -0.045em; line-height: 1.0; }
h3 { font-size: var(--font-h3); letter-spacing: -0.035em; line-height: 1.12; font-weight: 700; }

.lead {
  font-size: clamp(1.0625rem, 0.9792rem + 0.3704vw, 1.3125rem);
  line-height: 1.55;
  color: var(--color-text-secondary);
  text-wrap: pretty;
}
p { text-wrap: pretty; }

.accent { color: var(--color-primary); }
.muted { color: var(--color-text-muted); }
.secondary { color: var(--color-text-secondary); }

/* ============================================================
   Layout
   ============================================================ */
.container {
  width: min(100% - 2 * var(--page-gutter), var(--container));
  margin-inline: auto;
}
.section { padding-block: var(--section-space); position: relative; }
.section--tight { padding-block: calc(var(--section-space) * 0.62); }
.section-head { max-width: 62ch; }
.section-head > * + * { margin-top: 1rem; }

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--font-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
  flex: none;
}

.stack-sm > * + * { margin-top: 0.5rem; }
.stack > * + * { margin-top: 1rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 200;
  background: var(--color-primary);
  color: var(--color-bg);
  font-weight: 700;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
  transition: transform var(--dur-micro) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ============================================================
   Padrões de fundo (CSS puro)
   ============================================================ */
.bg-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(230,255,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,255,0,0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 22% 18%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 22% 18%, #000 0%, transparent 62%);
  opacity: 0.85;
}
.bg-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 75%);
  mask-image: radial-gradient(90% 70% at 50% 40%, #000 0%, transparent 75%);
}
.bg-radial-cta {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(230,255,0,0.16), transparent 45%);
}

.rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  border: 0;
  margin: 0;
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}