/* =====================================================================
   GeniaDarc Platform - Design System
   Paleta original inspirada em confianca institucional (navy + gold),
   sem copiar identidade visual de terceiros.
   ===================================================================== */

:root {
  /* Cores */
  --gd-navy-950: #0b1524;
  --gd-navy-900: #0f1e33;
  --gd-navy-800: #16294a;
  --gd-navy-700: #1f3a63;
  --gd-gold-500: #b68a3d;
  --gd-gold-400: #cca55b;
  --gd-gold-100: #f4e9d6;
  --gd-ivory-50: #faf8f4;
  --gd-ivory-100: #f3efe6;
  --gd-ink-900: #171512;
  --gd-ink-700: #423d35;
  --gd-ink-500: #6b6459;
  --gd-white: #ffffff;
  --gd-red-600: #9a2b2b;
  --gd-line: rgba(23, 21, 18, 0.08);

  /* Tipografia */
  --gd-font-display: "Fraunces", "Georgia", serif;
  --gd-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Espacamento (escala 4/8) */
  --gd-space-1: 0.25rem;
  --gd-space-2: 0.5rem;
  --gd-space-3: 0.75rem;
  --gd-space-4: 1rem;
  --gd-space-6: 1.5rem;
  --gd-space-8: 2rem;
  --gd-space-12: 3rem;
  --gd-space-16: 4rem;
  --gd-space-24: 6rem;

  /* Raios e sombras */
  --gd-radius-sm: 6px;
  --gd-radius-md: 14px;
  --gd-radius-lg: 24px;
  --gd-shadow-sm: 0 2px 8px rgba(11, 21, 36, 0.06);
  --gd-shadow-md: 0 12px 32px rgba(11, 21, 36, 0.10);
  --gd-shadow-lg: 0 24px 64px rgba(11, 21, 36, 0.16);

  /* Transicoes */
  --gd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gd-speed-fast: 180ms;
  --gd-speed-base: 320ms;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--gd-font-body);
  color: var(--gd-ink-900);
  background: var(--gd-ivory-50);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

h1, h2, h3, h4 {
  font-family: var(--gd-font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--gd-space-4);
  color: var(--gd-navy-900);
}

h1 { font-size: clamp(2.25rem, 4vw, 3.5rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; }

p { margin: 0 0 var(--gd-space-4); color: var(--gd-ink-700); }

a { color: var(--gd-navy-800); text-decoration: none; }

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

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gd-space-6);
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gd-gold-500);
  margin-bottom: var(--gd-space-3);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gd-navy-900);
  color: var(--gd-white);
  padding: var(--gd-space-3) var(--gd-space-4);
  z-index: 999;
}
.skip-link:focus { left: var(--gd-space-4); top: var(--gd-space-4); }

/* Botoes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gd-space-2);
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--gd-speed-fast) var(--gd-ease), box-shadow var(--gd-speed-fast) var(--gd-ease), background var(--gd-speed-fast) var(--gd-ease);
}
.btn--primary {
  background: var(--gd-navy-900);
  color: var(--gd-white);
  box-shadow: var(--gd-shadow-sm);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: var(--gd-shadow-md); background: var(--gd-navy-800); }
.btn--secondary {
  background: var(--gd-gold-500);
  color: var(--gd-white);
}
.btn--secondary:hover { background: var(--gd-gold-400); }
.btn--ghost {
  background: transparent;
  color: var(--gd-navy-900);
  border-color: var(--gd-line);
}
.btn--ghost:hover { background: var(--gd-ivory-100); }
.btn--small { padding: 0.6rem 1.1rem; font-size: 0.85rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gd-space-2);
  font-weight: 600;
  color: var(--gd-navy-800);
}
.link-arrow::after { content: "\2192"; transition: transform var(--gd-speed-fast) var(--gd-ease); }
a:hover .link-arrow::after, .link-arrow:hover::after { transform: translateX(4px); }

.section { padding: var(--gd-space-24) 0; }
@media (max-width: 768px) {
  .section { padding: var(--gd-space-16) 0; }
}

/* Reveal on scroll (progressive enhancement, sem dependencias) */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 640ms var(--gd-ease), transform 640ms var(--gd-ease);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }