/* =========================================================
   NODE DATA  ·  DESIGN TOKENS
   govtech para o WhatsApp · estética turn.io
   verde-floresta + laranja · DM Sans bold
   ========================================================= */

:root {
  /* ---------- VERDE (marca / hero / WhatsApp) ---------- */
  --green-950: #062417;  /* quase preto esverdeado */
  --green-900: #0a3922;  /* verde-floresta  ·  hero, footer, texto título */
  --green-800: #0d4a2c;
  --green-700: #12633b;
  --green-600: #1b8a52;
  --green-500: #25b366;  /* verde médio */
  --green-400: #3ecf7f;  /* verde vivo  ·  palavra-destaque no hero */
  --green-300: #6fe0a0;
  --green-200: #a7e8c4;  /* menta  ·  texto secundário sobre verde */
  --green-100: #d4f3e2;
  --green-50:  #eafaf1;

  /* ---------- LARANJA (CTA / destaque de ação) ---------- */
  --orange-700: #c73f1e;
  --orange-600: #e74e27;  /* hover do CTA */
  --orange-500: #ff643b;  /* CTA principal */
  --orange-300: #ff9d80;
  --orange-100: #ffe2d8;

  /* ---------- PAPEL & TINTA ---------- */
  --paper-0:   #ffffff;  /* fundo principal das seções claras */
  --paper-1:   #f4f6f3;  /* cinza-esverdeado claro  ·  bandas/cards */
  --paper-2:   #e9ede8;  /* banda mais marcada */
  --paper-3:   #dfe4dd;  /* borda forte / divisor */

  --ink:       #0a3922;  /* verde-floresta  ·  títulos sobre claro */
  --ink-2:     #20342a;  /* corpo escuro */
  --ink-3:     #4a5b51;  /* texto secundário */
  --ink-4:     #7d8a82;  /* texto auxiliar */
  --ink-5:     #aab4ac;  /* placeholder, disabled */

  --line:      rgba(10,57,34,0.12);   /* borda padrão */
  --line-2:    rgba(10,57,34,0.22);   /* borda forte */
  --line-soft: rgba(10,57,34,0.06);

  /* sobre fundo verde escuro */
  --on-green:        #ffffff;
  --on-green-soft:   #c6e8d3;          /* menta suave  ·  parágrafos no hero */
  --on-green-muted:  rgba(255,255,255,0.62);
  --line-on-green:   rgba(255,255,255,0.16);

  /* ---------- MARCA (alias p/ compat. de componentes) ---------- */
  --brand-50:  var(--green-50);
  --brand-100: var(--green-100);
  --brand-200: var(--green-200);
  --brand-300: var(--green-400);
  --brand-400: var(--green-500);
  --brand-500: var(--green-600);
  --brand-600: var(--green-700);
  --brand-700: var(--green-800);
  --brand-800: var(--green-900);
  --brand-900: var(--green-950);
  --brand-grad: linear-gradient(135deg, #25b366 0%, #0a3922 100%);

  /* ---------- ACCENT (alias terroso → laranja CTA) ---------- */
  --clay-50:   var(--orange-100);
  --clay-100:  var(--orange-100);
  --clay-300:  var(--orange-300);
  --clay-500:  var(--orange-500);
  --clay-700:  var(--orange-700);
  --clay-900:  #5e1c0c;

  /* ---------- FEEDBACK (semântico) ---------- */
  --ok:        #1b8a52;
  --ok-soft:   #d4f3e2;
  --warn:      #a9721a;
  --warn-soft: #f2e4c7;
  --alert:     #c73f1e;
  --alert-soft:#ffe2d8;
  --info:      #12633b;
  --info-soft: #d4f3e2;

  /* ---------- TIPOGRAFIA  ·  DM Sans em tudo ---------- */
  --font-sans:      'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-display:   'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* aliases: páginas internas referenciam serif/editorial  ·  caem em DM Sans */
  --font-serif:     'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-editorial: 'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Escala  ·  títulos grandes e pesados (turn.io) */
  --fs-eyebrow:   12px;
  --fs-xs:        12px;
  --fs-sm:        13px;
  --fs-base:      15px;
  --fs-body:      16px;
  --fs-lg:        18px;
  --fs-xl:        22px;
  --fs-2xl:       28px;
  --fs-3xl:       36px;
  --fs-4xl:       52px;   /* H2 */
  --fs-5xl:       64px;   /* H1 página interna */
  --fs-display:   84px;   /* hero */

  --lh-tight:     1.04;
  --lh-snug:      1.14;
  --lh-normal:    1.5;
  --lh-relaxed:   1.65;

  /* ---------- ESPAÇO & RAIO ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 56px; --sp-10: 72px; --sp-11: 96px; --sp-12: 128px;

  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-1: 0 1px 0 rgba(10,57,34,0.04);
  --shadow-2: 0 2px 10px rgba(10,57,34,0.06), 0 1px 0 rgba(10,57,34,0.04);
  --shadow-3: 0 16px 40px rgba(10,57,34,0.10), 0 2px 8px rgba(10,57,34,0.06);
  --shadow-4: 0 36px 90px rgba(6,36,23,0.22), 0 6px 14px rgba(6,36,23,0.10);

  /* ---------- LAYOUT ---------- */
  --page-max: 1200px;
  --page-x:   48px;
}

/* ---------- ELEMENTOS BASE ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper-0);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--fs-5xl); }
h2 { font-size: var(--fs-4xl); }
h3 { font-size: var(--fs-3xl); }
h4 { font-size: var(--fs-2xl); }

p { margin: 0; }

a { color: var(--green-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

code, pre { font-family: var(--font-mono); font-size: 13px; }

::selection { background: var(--green-200); color: var(--ink); }

/* ---------- LENIS  ·  smooth scroll (inércia) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* scrollbar sóbria */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }

/* utilitário: eyebrow (rótulo de seção, caps) */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green-600);
}

/* utilitário: regra fina */
.hairline { border: 0; height: 1px; background: var(--line); margin: 0; }

/* utilitário: tag/pill */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: var(--r-pill);
  background: var(--green-50); color: var(--green-800);
  border: 1px solid var(--green-100);
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 0.01em;
}

/* =========================================================
   MOVIMENTO  ·  scroll reveal
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .reveal[data-dir="up"]    { transform: translateY(30px); }
  .reveal[data-dir="down"]  { transform: translateY(-30px); }
  .reveal[data-dir="left"]  { transform: translateX(-46px); }
  .reveal[data-dir="right"] { transform: translateX(46px); }
  .reveal[data-dir="scale"] { transform: scale(0.96); }
  .reveal.is-visible        { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* entrada de load do hero (acima da dobra  ·  sem IntersectionObserver) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes nd-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  .nd-hero h1        { animation: nd-rise 0.8s cubic-bezier(0.16,1,0.3,1) both; }
  .nd-hero h1 + p    { animation: nd-rise 0.8s 0.08s cubic-bezier(0.16,1,0.3,1) both; }
  .nd-hero-mock      { animation: nd-rise 0.9s 0.16s cubic-bezier(0.16,1,0.3,1) both; }
}

/* =========================================================
   MICRO-INTERAÇÕES  ·  hover
   ========================================================= */
.nd-btn {
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background 0.15s ease, color 0.15s ease, border-color 0.15s ease, filter 0.15s ease;
}
.nd-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .nd-btn:hover  { transform: translateY(-1px); }
  .nd-btn:active { transform: translateY(0); }
  .nd-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); border-color: var(--line-2); }
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 980px) {
  :root { --page-x: 24px; }
  .nd-hero-grid  { grid-template-columns: 1fr !important; gap: 48px !important; }
  .nd-grid-2     { grid-template-columns: 1fr !important; gap: 40px !important; }
  .nd-grid-3     { grid-template-columns: 1fr !important; }
  .nd-grid-4     { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; }
  .nd-features   { grid-template-columns: 1fr !important; }
  .nd-compare    { grid-template-columns: 1fr !important; gap: 24px !important; }
  .nd-grid-logos { grid-template-columns: repeat(3, 1fr) !important; }
  .nd-techlogos  { justify-content: center !important; column-gap: 44px !important; }
  .nd-stats      { grid-template-columns: repeat(3, 1fr) !important; }
  .nd-footer-grid{ grid-template-columns: 1fr 1fr !important; gap: 40px !important; }
  .nd-section    { padding-left: 24px !important; padding-right: 24px !important; }
  .nd-section-pad{ padding-top: 80px !important; padding-bottom: 80px !important; }
  .nd-cell-r       { border-right: none !important; }
  .nd-timeline-deco{ display: none !important; }
  .nd-lgpd-grid    { grid-template-columns: 1fr !important; gap: 20px !important; }
}
@media (max-width: 600px) {
  .nd-stats       { grid-template-columns: 1fr !important; }
  .nd-grid-4      { grid-template-columns: 1fr !important; }
  .nd-form-grid   { grid-template-columns: 1fr !important; }
  .nd-footer-grid { grid-template-columns: 1fr !important; }
  .nd-grid-logos  { grid-template-columns: repeat(2, 1fr) !important; }
  .nd-nav-links   { display: none !important; }
  .nd-nav-contact { display: none !important; }
  .nd-nav         { padding-left: 16px !important; padding-right: 16px !important; }
  .nd-hero        { padding-left: 20px !important; padding-right: 20px !important; }
}