/* ==========================================================================
   Conforseg — Landing Page
   Arquivo standalone: index.html + style.css + script.js
   ========================================================================== */

:root {
  --navy-950: #0a1120;
  --navy-900: #0f172a;
  --navy-800: #1e293b;
  --navy-700: #334155;
  --brand: #1e3a8a;
  --brand-600: #1d4ed8;
  --brand-tint: rgba(30, 58, 138, 0.07);
  --brand-tint-strong: rgba(30, 58, 138, 0.14);
  --ink: #0f172a;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --success: #10b981;
  --success-tint: rgba(16, 185, 129, 0.12);
  --warning: #f59e0b;
  --warning-tint: rgba(245, 158, 11, 0.12);
  --danger: #ef4444;
  --info: #3b82f6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px -10px rgba(15, 23, 42, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(15, 23, 42, 0.28);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --container: 1160px;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.icon { width: 20px; height: 20px; flex-shrink: 0; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 26px; height: 26px; }

/* ---------- type ---------- */
.eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-600);
  margin-bottom: 14px;
  display: block;
}
h2.section-title {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  max-width: 640px;
}
.section-lede {
  font-size: 17px;
  color: var(--slate-600);
  max-width: 560px;
  margin-top: 14px;
}
.section-head {
  margin-bottom: 56px;
}
.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.section-head.center .section-title,
.section-head.center .section-lede { margin-left: auto; margin-right: auto; }

section { padding: 96px 0; }
@media (max-width: 720px) {
  section { padding: 64px 0; }
  .section-head { margin-bottom: 40px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.btn-primary:hover { background: var(--brand-600); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-ghost:hover { border-color: var(--navy-900); background: var(--surface-alt); }
.btn-on-dark {
  background: #fff;
  color: var(--navy-900);
}
.btn-on-dark:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-ghost-on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.btn-ghost-on-dark:hover { border-color: rgba(255, 255, 255, 0.6); }
.btn-block { width: 100%; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: 76px;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), height 220ms var(--ease);
}
.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  border-bottom-color: var(--border);
  height: 68px;
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy-900);
  letter-spacing: -0.01em;
}
.brand .icon-lg { color: var(--brand); }
.brand-logo { height: 34px; width: auto; flex-shrink: 0; }
.brand span { display: inline-block; }
.brand-seg { color: #459f19; }
.brand-light { color: #fff; }
.brand-light .brand-logo { height: 32px; }
.icon-xs { width: 12px; height: 12px; flex-shrink: 0; }

section[id] { scroll-margin-top: 84px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--slate-600);
  transition: color 160ms var(--ease);
}
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: 6px;
  color: var(--ink);
}

.mobile-menu {
  position: fixed;
  inset: 68px 0 0 0;
  background: #fff;
  z-index: 99;
  padding: 28px 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a {
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.mobile-menu .btn { margin-top: 20px; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-ghost { display: none; }
  .nav-toggle { display: inline-flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  padding: 168px 0 96px;
  position: relative;
}
.hero .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--navy-900);
}
.hero-copy .section-lede {
  font-size: 18px;
  margin-top: 22px;
  max-width: 480px;
}
.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.hero-modules {
  display: flex;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.module-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  border: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate-500);
}
.module-chip .icon-sm { width: 14px; height: 14px; color: var(--slate-400); }

.hero-visual {
  position: relative;
  opacity: 1;
}
.js-anim .hero-visual {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 760ms var(--ease) 220ms forwards;
}
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* product mockup frame */
.mockup {
  background: var(--navy-900);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--navy-800);
}
.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 16px;
  background: var(--navy-950);
}
.mockup-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--navy-700); }
.mockup-body { display: flex; min-height: 300px; }
.mockup-side {
  width: 56px;
  background: var(--navy-950);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  border-right: 1px solid var(--navy-800);
}
.mockup-side .dot {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--slate-400);
}
.mockup-side .dot.active { background: var(--brand-tint-strong); color: #7fa1ff; }
.mockup-main { flex: 1; padding: 20px; background: var(--navy-900); }
.mockup-title { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.mockup-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.mockup-stat {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 12px;
}
.mockup-stat b {
  display: block;
  color: #fff;
  font-size: 19px;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mockup-stat span { color: var(--slate-400); font-size: 11px; }
.mockup-list {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
}
.mockup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--navy-700);
  font-size: 12px;
  color: var(--slate-400);
}
.mockup-row:last-child { border-bottom: none; }
.mockup-row .tag {
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
}
.tag-ok { background: var(--success-tint); color: #34d399; }
.tag-warn { background: var(--warning-tint); color: #fbbf24; }

.floating-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.floating-badge .icon-sm { color: var(--success); }
.badge-1 { top: -18px; right: 12px; }
.badge-2 { bottom: -16px; left: -18px; }
@media (max-width: 560px) {
  .floating-badge { font-size: 12px; padding: 8px 12px; }
  .badge-1 { right: -6px; }
  .badge-2 { left: -6px; }
}

@media (max-width: 960px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero { padding: 140px 0 72px; }
  .hero-visual { max-width: 460px; margin: 0 auto; }
}

/* ==========================================================================
   Problema (antes / depois)
   ========================================================================== */
.problem-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
}
.problem-col h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--slate-500);
  margin-bottom: 20px;
}
.problem-col.before h3 { color: var(--slate-500); }
.problem-col.after h3 { color: var(--brand-600); }
.problem-list { display: flex; flex-direction: column; gap: 16px; }
.problem-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  padding: 4px 0;
}
.before .problem-item { color: var(--slate-500); }
.before .problem-item .icon-sm { color: var(--slate-400); margin-top: 2px; }
.after .problem-item { color: var(--ink); font-weight: 500; }
.after .problem-item .icon-sm { color: var(--success); margin-top: 2px; }
.problem-divider {
  width: 1px;
  background: var(--border);
}
@media (max-width: 800px) {
  .problem-columns { grid-template-columns: 1fr; }
  .problem-divider { display: none; }
}

/* ==========================================================================
   Funcionalidades (linhas, sem cards idênticos)
   ========================================================================== */
.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
}
.feature-row {
  display: flex;
  gap: 16px;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
}
.features-grid .feature-row:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--border); }
.features-grid .feature-row:nth-child(even) { padding-left: 32px; }
.feature-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--brand-tint);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.feature-row h4 { font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.feature-row p { font-size: 14.5px; color: var(--slate-600); }

@media (max-width: 760px) {
  .features-grid { grid-template-columns: 1fr; }
  .features-grid .feature-row:nth-child(odd) { padding-right: 0; border-right: none; }
  .features-grid .feature-row:nth-child(even) { padding-left: 0; }
}

/* ==========================================================================
   Visão do sistema (mockup grande anotado)
   ========================================================================== */
.showcase { background: var(--surface-alt); }
.showcase-frame {
  position: relative;
  max-width: 920px;
  margin: 0 auto;
}
.showcase .mockup { border-radius: var(--radius-xl); }
.showcase-annotation {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}
.showcase-annotation .dot-mini { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.ann-1 { top: 8%; left: -6%; }
.ann-2 { top: 42%; right: -8%; }
.ann-3 { bottom: 6%; left: -4%; }
@media (max-width: 900px) {
  .showcase-annotation { position: static; margin: 10px auto 0; width: fit-content; }
}

/* ==========================================================================
   Como funciona (stepper)
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 21px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--border);
}
.step {
  position: relative;
  padding-right: 24px;
}
.step-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 15px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}
.step h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--slate-600); }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps::before { display: none; }
}

/* ==========================================================================
   Benefícios
   ========================================================================== */
.benefits .container { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; }
.benefit-item { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.benefit-item .icon-sm { color: var(--success); margin-top: 3px; }
@media (max-width: 860px) {
  .benefits .container { grid-template-columns: 1fr; gap: 32px; }
  .benefits-list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Portal do colaborador
   ========================================================================== */
.portal .container {
  display: grid;
  grid-template-columns: 0.8fr 1fr;
  gap: 56px;
  align-items: center;
}
.portal-visual { display: flex; justify-content: center; }
.phone {
  width: 240px;
  border-radius: 30px;
  border: 8px solid var(--navy-900);
  background: var(--navy-900);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.phone-screen { background: var(--surface-alt); min-height: 420px; padding: 16px 12px; }
.phone-head { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.phone-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phone-card span { font-size: 11.5px; color: var(--slate-600); }
.phone-card .tag { font-size: 10px; padding: 2px 7px; border-radius: 999px; }

.portal-list { display: flex; flex-direction: column; gap: 20px; margin-top: 28px; }
.portal-list li { display: flex; gap: 12px; font-size: 15px; }
.portal-list .icon-sm { color: var(--brand); margin-top: 3px; }

@media (max-width: 860px) {
  .portal .container { grid-template-columns: 1fr; }
  .portal-visual { order: -1; }
}

/* ==========================================================================
   Segurança (banda sóbria)
   ========================================================================== */
.security {
  background: var(--navy-900);
  color: #fff;
}
.security .section-title { color: #fff; }
.security .section-lede { color: rgba(255, 255, 255, 0.62); }
.security-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 56px;
}
.security-head .section-title,
.security-head .section-lede { margin-left: 0; }
.compliance-seal {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 108px;
  color: rgba(255, 255, 255, 0.35);
}
.compliance-seal svg { width: 92px; height: 92px; }
.compliance-seal span {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
}
@media (max-width: 760px) {
  .security-head { flex-direction: column; text-align: center; gap: 24px; }
  .security-head .section-title,
  .security-head .section-lede { margin-left: auto; margin-right: auto; }
}
.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.security-item {
  background: var(--navy-900);
  padding: 28px 26px;
}
.security-item .icon { color: #93c5fd; margin-bottom: 14px; }
.security-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.security-item p { font-size: 13.5px; color: rgba(255, 255, 255, 0.6); }
@media (max-width: 760px) {
  .security-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Planos
   ========================================================================== */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
.plan-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
}
.plan-card.is-featured {
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
  position: relative;
}
.plan-flag {
  position: absolute;
  top: -13px;
  left: 28px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
}
.plan-name { font-size: 18px; font-weight: 700; }
.plan-desc { font-size: 14px; color: var(--slate-600); margin-top: 6px; min-height: 42px; }
.plan-price { font-size: 15px; font-weight: 600; color: var(--slate-500); margin: 20px 0 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.plan-features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
.plan-features li { display: flex; gap: 9px; font-size: 14px; align-items: flex-start; }
.plan-features .icon-sm { color: var(--success); margin-top: 3px; }

@media (max-width: 900px) {
  .plans-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

.compare-hint { display: none; }
.compare-wrap {
  position: relative;
  margin-top: 64px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
@media (max-width: 760px) {
  .compare-hint {
    display: block;
    font-size: 13px;
    color: var(--slate-500);
    margin-top: 40px;
    margin-bottom: -8px;
  }
  .compare-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, var(--surface));
    pointer-events: none;
  }
}
table.compare th, table.compare td {
  padding: 14px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
table.compare th:first-child, table.compare td:first-child { text-align: left; color: var(--ink); font-weight: 500; }
table.compare thead th { font-weight: 700; color: var(--ink); padding-top: 0; }
table.compare .yes { color: var(--success); }
table.compare .no { color: var(--slate-400); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 760px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.faq-q .icon-sm { color: var(--slate-500); transition: transform 220ms var(--ease); flex-shrink: 0; }
.faq-item.is-open .faq-q .icon-sm { transform: rotate(180deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 260ms var(--ease);
}
.faq-a p { padding: 0 4px 22px; font-size: 14.5px; color: var(--slate-600); max-width: 640px; }

/* ==========================================================================
   CTA final
   ========================================================================== */
.cta-final {
  background: var(--navy-900);
  background-image: radial-gradient(600px 300px at 85% 0%, rgba(59, 130, 246, 0.18), transparent 60%);
  color: #fff;
  text-align: center;
}
.cta-final h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); font-weight: 700; letter-spacing: -0.01em; }
.cta-final p { color: rgba(255, 255, 255, 0.66); font-size: 17px; max-width: 560px; margin: 18px auto 0; }
.cta-final .hero-ctas { justify-content: center; margin-top: 34px; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.6);
  padding: 64px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand .brand { color: #fff; }
.footer-brand p { margin-top: 14px; font-size: 14px; max-width: 260px; line-height: 1.6; }
.footer-col h5 { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; transition: color 160ms var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  flex-wrap: wrap;
  gap: 12px;
}
@media (max-width: 760px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Modal de demonstração
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.modal-close {
  position: absolute;
  top: 18px; right: 18px;
  background: none;
  border: none;
  color: var(--slate-500);
  padding: 4px;
}
.modal h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.modal p.modal-lede { font-size: 14px; color: var(--slate-600); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input {
  width: 100%;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-size: 14.5px;
  font-family: inherit;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint-strong);
}
.form-success {
  display: none;
  text-align: center;
  padding: 16px 0 4px;
}
.form-success.is-visible { display: block; }
.form-success .icon { color: var(--success); margin: 0 auto 14px; width: 40px; height: 40px; }
.form-success h4 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.form-success p { font-size: 14px; color: var(--slate-600); }

/* ==========================================================================
   Conforseg Premium — camada visual (identidade preservada)
   navy/azul = tecnologia e confiança · verde = accent SST · sem neon
   ========================================================================== */

:root {
  --sst: #3fa614;
  --sst-tint: rgba(63, 166, 20, 0.12);
  --brand-deep: #0b2a5b;
  --glow-blue: rgba(59, 130, 246, 0.16);
  --glow-green: rgba(63, 166, 20, 0.1);
  --reveal-dist: 18px;
}

/* ---------- continuidade entre seções ---------- */
.problem {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
}
#funcionalidades { background: var(--surface); }
.flow {
  background:
    radial-gradient(700px 260px at 50% 0%, rgba(30, 58, 138, 0.06), transparent 65%),
    var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
#como-funciona { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%); }
#planos { background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%); }

/* ==========================================================================
   Hero — profundidade por camadas + dashboard vivo (discreto)
   ========================================================================== */
.hero {
  background:
    radial-gradient(900px 480px at 78% 8%, rgba(30, 58, 138, 0.09), transparent 60%),
    radial-gradient(560px 380px at 8% 90%, rgba(63, 166, 20, 0.06), transparent 60%),
    var(--surface);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(30, 58, 138, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 58, 138, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(760px 480px at 60% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(760px 480px at 60% 30%, #000 30%, transparent 75%);
  pointer-events: none;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translate3d(var(--hx, 0px), var(--hy, 0px), 0);
  transition: transform 240ms ease-out;
  will-change: transform;
}
.glow { position: absolute; border-radius: 50%; filter: blur(70px); }
.glow-a {
  width: 480px; height: 300px; right: 6%; top: 4%;
  background: var(--glow-blue);
}
.glow-b {
  width: 340px; height: 220px; left: -4%; bottom: 0%;
  background: var(--glow-green);
}
.hero-net {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  color: rgba(30, 58, 138, 0.14);
  opacity: 0.55;
}
.hero .container { position: relative; z-index: 1; }

/* entrada do copy (mesma técnica do .hero-visual existente) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
/* sem JS: visível; com JS (.js-anim): entrada animada */
.hero-copy > * { opacity: 1; }
.js-anim .hero-copy > * { opacity: 0; animation: fadeUp 700ms var(--ease) forwards; }
.hero-copy h1 { animation-delay: 60ms; }
.hero-copy .section-lede { animation-delay: 150ms; }
.hero-copy .hero-ctas { animation-delay: 240ms; }
.hero-copy .hero-modules { animation-delay: 330ms; }

/* badges flutuantes — lentos e sutis */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.badge-1 { animation: floatY 6s ease-in-out 1.2s infinite; }
.badge-2 { animation: floatY 7s ease-in-out 2s infinite; }

/* dashboard: detalhes vivos */
.mockup {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(127, 161, 255, 0.08), 0 0 44px -18px rgba(59, 130, 246, 0.35);
}
.mockup-title { display: flex; align-items: center; gap: 8px; }
.mockup-sync {
  margin-left: auto;
  font-size: 10.5px; font-weight: 500;
  color: var(--slate-400);
  border: 1px solid var(--navy-700);
  border-radius: 999px;
  padding: 2px 9px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: softPing 2.6s ease-out infinite;
}
@keyframes softPing {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.row-progress { flex-wrap: wrap; row-gap: 8px; }
.row-progress .progress {
  flex: 1 1 100%;
  height: 4px; border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
  overflow: hidden;
}
.progress-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--warning), #fbbf24);
  animation: fillBar 1.8s var(--ease) 0.9s forwards;
}
@keyframes fillBar { to { width: 65%; } }
.row-pulse > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pulse-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fbbf24; flex-shrink: 0;
  animation: softPingAmber 2.8s ease-out 1.4s infinite;
}
@keyframes softPingAmber {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.55); }
  70% { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
}
.tag-ok { display: inline-flex; align-items: center; gap: 4px; }
.check-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: drawCheck 0.5s var(--ease) 1.4s forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }

/* ==========================================================================
   Reveal system (ativado via JS — sem JS tudo visível)
   ========================================================================== */
.js-anim .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-dist)) scale(0.995);
  filter: blur(2px);
  transition:
    opacity 680ms var(--ease),
    transform 680ms var(--ease),
    filter 680ms var(--ease);
  will-change: opacity, transform;
}
.js-anim .reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ==========================================================================
   Fluxo temático — Colaborador → … → Assinatura
   ========================================================================== */
.flow-track { position: relative; max-width: 1080px; margin: 0 auto; }
.flow-line {
  position: absolute;
  top: 27px; left: 5%; right: 5%;
  height: 2px; border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.flow-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-600), var(--sst));
  transition: width 1.4s var(--ease) 0.35s;
}
.flow-track.is-active .flow-fill { width: 100%; }
.flow-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 12px;
}
/* nó-módulo: NR-1 em destaque discreto no ecossistema */
.flow-node-module .flow-dot { color: var(--sst); border-color: var(--sst); }
.flow-track.is-active .flow-node-module .flow-dot {
  box-shadow: var(--shadow-sm), 0 0 0 4px var(--sst-tint);
}
.js-anim .flow-node {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(0.35s + var(--i, 0) * 0.18s);
}
.js-anim .flow-track.is-active .flow-node { opacity: 1; transform: translateY(0); }
.flow-node { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-dot {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  color: var(--brand);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  box-shadow: var(--shadow-sm);
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.flow-track.is-active .flow-dot { border-color: var(--brand-600); }
.flow-node:last-child .flow-dot { color: var(--sst); border-color: var(--sst); }
.flow-node:hover .flow-dot { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.flow-card { margin-top: 14px; }
.flow-card b { display: block; font-size: 14.5px; }
.flow-card span { font-size: 12.5px; color: var(--slate-500); }
@media (max-width: 1020px) {
  .flow-line { display: none; }
  .flow-nodes { grid-template-columns: repeat(4, 1fr); gap: 24px 12px; }
}
@media (max-width: 640px) {
  .flow-nodes { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Funcionalidades — microinterações por função (hover sutil)
   ========================================================================== */
.feature-row { border-radius: var(--radius-md); transition: background 200ms var(--ease), transform 200ms var(--ease); }
.feature-row:hover { background: var(--surface-alt); transform: translateX(3px); }
.feature-icon { transition: transform 220ms var(--ease), background 220ms var(--ease), color 220ms var(--ease); overflow: hidden; position: relative; }
.feature-row:hover .feature-icon { transform: scale(1.06); background: var(--brand-tint-strong); }
/* documentos: deslize */
.features-grid .feature-row:nth-child(2):hover .feature-icon { transform: translateY(-2px) scale(1.06); }
/* exames: pulso de confirmação */
.features-grid .feature-row:nth-child(3):hover .feature-icon { color: var(--sst); }
/* treinamentos: preenchimento */
.features-grid .feature-row:nth-child(4) .feature-icon::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: var(--sst); transition: width 350ms var(--ease);
}
.features-grid .feature-row:nth-child(4):hover .feature-icon::after { width: 100%; }
/* EPIs + assinaturas: realce verde discreto */
.features-grid .feature-row:nth-child(5):hover .feature-icon,
.features-grid .feature-row:nth-child(6):hover .feature-icon { color: var(--sst); }

/* ==========================================================================
   Showcase premium
   ========================================================================== */
.showcase-frame .mockup {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(30, 58, 138, 0.1), 0 0 60px -24px rgba(30, 58, 138, 0.35);
}
.showcase-annotation { gap: 8px; }
.showcase-annotation .dot-mini { position: relative; }
.showcase-annotation .dot-mini::after {
  content: ""; position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-600);
  opacity: 0;
  animation: annPing 2.6s ease-out infinite;
}
.showcase-annotation:nth-of-type(2) .dot-mini::after { animation-delay: 0.9s; }
.showcase-annotation:nth-of-type(3) .dot-mini::after { animation-delay: 1.7s; }
@keyframes annPing {
  0% { transform: scale(0.5); opacity: 0.7; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* ==========================================================================
   Portal — presença + floats auxiliares
   ========================================================================== */
.portal-visual { position: relative; }
.phone { position: relative; animation: floatY 8s ease-in-out 1s infinite; }
.phone::before {
  content: "";
  position: absolute; top: 10px; left: 50%;
  width: 84px; height: 20px;
  transform: translateX(-50%);
  background: var(--navy-900);
  border-radius: 999px;
  z-index: 2;
}
.phone-screen { padding-top: 40px; }
.portal-float {
  position: absolute;
  display: flex; align-items: center; gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  font-size: 13px; font-weight: 600; color: var(--ink);
  z-index: 2;
}
.portal-float .icon-sm { color: var(--sst); }
.pf-1 { top: 2%; left: -6%; animation: floatY 6.5s ease-in-out 0.6s infinite; }
.pf-2 { bottom: 4%; right: -4%; animation: floatY 7.5s ease-in-out 1.8s infinite; }
.pf-2 .icon-sm { color: var(--brand-600); }
@media (max-width: 1100px) {
  .pf-1 { left: -2%; }
  .pf-2 { right: -2%; }
}
@media (max-width: 560px) {
  .portal-float { font-size: 12px; padding: 8px 12px; }
  .pf-1 { left: 0; }
  .pf-2 { right: 0; }
}

/* ==========================================================================
   Segurança + CTA — marca d'água sóbria
   ========================================================================== */
.security { position: relative; overflow: hidden; }
.security::before {
  content: "";
  position: absolute; right: -60px; top: -60px;
  width: 340px; height: 340px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.05' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 8.7 8 10 4.6-1.3 8-5 8-10V5l-8-3Z'/%3E%3C/svg%3E") no-repeat center / contain;
  pointer-events: none;
}
.security-item { transition: background 200ms var(--ease); }
.security-item:hover { background: rgba(255, 255, 255, 0.025); }
.cta-final {
  position: relative; overflow: hidden;
  background-image:
    radial-gradient(600px 300px at 85% 0%, rgba(59, 130, 246, 0.18), transparent 60%),
    radial-gradient(420px 220px at 10% 100%, rgba(63, 166, 20, 0.1), transparent 60%);
}

/* ==========================================================================
   Planos — destaque sóbrio no recomendado
   ========================================================================== */
.plan-card { transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease); }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.plan-card.is-featured {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(150deg, var(--brand-600), var(--sst)) border-box;
  box-shadow: var(--shadow-md), 0 16px 44px -20px rgba(30, 58, 138, 0.4);
}
@media (min-width: 901px) {
  .plan-card.is-featured { transform: scale(1.02); }
  .plan-card.is-featured:hover { transform: scale(1.02) translateY(-3px); }
}

/* ==========================================================================
   FAQ — estado ativo claro (comportamento intacto)
   ========================================================================== */
.faq-item { border-radius: var(--radius-sm); transition: background 200ms var(--ease); }
.faq-item.is-open { background: var(--surface-alt); }
.faq-item.is-open .faq-q { color: var(--brand); }
.faq-q:hover { color: var(--brand); }

/* ==========================================================================
   Microinterações globais
   ========================================================================== */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 2px; border-radius: 999px;
  background: var(--brand-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.btn:active { transform: translateY(0) scale(0.98); }
.module-chip { transition: color 180ms var(--ease); }
.module-chip:hover { color: var(--brand-600); }
.module-chip:hover .icon-sm { color: var(--brand-600); }
.floating-badge { transition: box-shadow 200ms var(--ease); }
.floating-badge:hover { box-shadow: var(--shadow-lg); }
.modal-brand { margin-bottom: 14px; }
.modal-brand img { height: 28px; width: auto; }

/* ==========================================================================
   Acessibilidade — reduz animação sem quebrar conteúdo
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *,
  .badge-1, .badge-2,
  .phone, .portal-float,
  .progress-fill, .check-path,
  .live-dot, .pulse-dot,
  .showcase-annotation .dot-mini::after {
    animation: none !important;
  }
  .hero-copy > * { opacity: 1 !important; }
  .progress-fill { width: 65% !important; }
  .check-path { stroke-dashoffset: 0 !important; }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js-anim .flow-node { opacity: 1 !important; transform: none !important; }
  .js-anim .flow-fill { width: 100% !important; transition: none !important; }
  .hero-bg { transform: none !important; }
}

/* ==========================================================================
   Responsivo — composição por breakpoint, não só redução
   ========================================================================== */
@media (max-width: 960px) {
  .hero-net { opacity: 0.3; }
  .glow-a { right: -20%; }
}
@media (max-width: 720px) {
  .hero { padding: 128px 0 64px; }
  .hero-ctas .btn { flex: 1 1 100%; }
  .mockup-sync { display: none; }
  .showcase-annotation { font-size: 12px; }
  .plans-grid { gap: 26px; }
}
@media (max-width: 600px) {
  /* 390px: marca + CTA + hamburger não cabem juntos — CTA vive no menu mobile */
  .nav-actions .btn-primary { display: none; }
  .navbar .container { gap: 12px; }
  .brand { font-size: 17px; flex-shrink: 0; }
}

/* ==========================================================================
   Recursos — agrupamento plataforma + teaser do módulo
   ========================================================================== */
.feat-group-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--slate-500);
  margin-bottom: 24px;
}
.feat-nr1 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--sst);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms var(--ease);
}
.feat-nr1:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--sst); }
.feat-nr1-badge {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}
.feat-nr1-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.feat-nr1-text b { font-size: 15.5px; }
.feat-nr1-text span span { font-size: 14px; color: var(--slate-600); }
.feat-nr1 .icon { color: var(--brand-600); transition: transform 200ms var(--ease); }
.feat-nr1:hover .icon { transform: translateX(4px); }

/* ==========================================================================
   Módulo NR-1 — identidade própria dentro do mesmo ecossistema
   navy/azul base · verde como cor do módulo · sem neon
   ========================================================================== */
.nr1 {
  background:
    radial-gradient(760px 300px at 50% 0%, rgba(30, 58, 138, 0.07), transparent 65%),
    linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.nr1-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 32px;
  align-items: stretch;
  margin-top: 8px;
}

/* mockup do módulo: mesmo shell, identificação exclusiva */
.nr1-mock .mockup {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(30, 58, 138, 0.1), 0 0 60px -24px rgba(63, 166, 20, 0.3);
}
.mockup-module {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #bbf7d0;
  background: rgba(63, 166, 20, 0.18);
  border: 1px solid rgba(63, 166, 20, 0.45);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.mockup-bar { gap: 6px; }
.mockup-bar .mockup-module {
  width: auto;
  height: auto;
  border-radius: 999px;
  background: rgba(63, 166, 20, 0.18);
}
.live-dot-green { background: #4ade80; }
.mockup-caption {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--slate-500);
  text-align: center;
}
/* microanimações do mockup disparam ao entrar na viewport (.inview via JS) */
/* sem JS: estado final visível; com JS (.js-anim): anima a partir do zero */
.nr1-mock .fill-nr1 { width: 82%; animation: none; }
.js-anim .nr1-mock .fill-nr1 { width: 0; animation: none; }
.nr1-mock.inview .fill-nr1 { animation: fillBarNR1 1.8s var(--ease) 0.25s forwards; }
@keyframes fillBarNR1 { to { width: 82%; } }
.nr1-mock .check-path-nr1 { stroke-dasharray: 24; stroke-dashoffset: 0; }
.js-anim .nr1-mock .check-path-nr1 { stroke-dashoffset: 24; }
.nr1-mock.inview .check-path-nr1 { animation: drawCheck 0.5s var(--ease) 0.9s forwards; }

/* card canal de denúncia (claro, contrastando com o mockup dark) */
.nr1-denuncia {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
}
.nr1-denuncia h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 20px; }
.nr1-den-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-alt);
  overflow: hidden;
}
.nr1-den-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}
.nr1-kv { margin: 0; padding: 6px 16px 12px; }
.nr1-kv > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13.5px;
}
.nr1-kv > div:last-child { border-bottom: none; }
.nr1-kv dt { color: var(--slate-500); font-weight: 500; }
.nr1-kv dd { margin: 0; font-weight: 600; text-align: right; }
.nr1-note { margin-top: 16px; font-size: 13.5px; color: var(--slate-600); }

/* pipe da IA: questionários → … → plano de ação */
.nr1-pipe { max-width: 1020px; margin: 72px auto 0; text-align: center; }
.nr1-pipe-title { font-size: 15px; font-weight: 600; color: var(--slate-600); margin-bottom: 34px; }
.nr1-pipe-track { position: relative; }
.nr1-pipe-line {
  position: absolute;
  top: 27px; left: 9%; right: 9%;
  height: 2px; border-radius: 999px;
  background: var(--border-strong);
  overflow: hidden;
}
.nr1-pipe-fill {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-600), var(--sst));
  transition: width 1.4s var(--ease) 0.35s;
}
.nr1-pipe.is-active .nr1-pipe-fill { width: 100%; }
.nr1-pipe-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.js-anim .nr1-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
  transition-delay: calc(0.35s + var(--i, 0) * 0.2s);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.js-anim .nr1-pipe.is-active .nr1-step { opacity: 1; transform: translateY(0); }
.nr1-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.flow-dot-ai { color: #fff !important; background: var(--sst) !important; border-color: var(--sst) !important; }
.nr1-pipe.is-active .flow-dot-ai { box-shadow: var(--shadow-sm), 0 0 0 5px var(--sst-tint); }

/* integração: módulo específico, plataforma completa */
.nr1-int { max-width: 820px; margin: 72px auto 0; text-align: center; }
.nr1-int h3 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.01em; }
.nr1-int p { margin-top: 12px; font-size: 15.5px; color: var(--slate-600); }
.nr1-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 26px;
}
.nr1-pills > span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--slate-600);
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 15px;
}
.nr1-pills > span.is-module {
  color: #fff;
  background: var(--brand);
  border-color: var(--brand);
}
.nr1-pills .nr1-arrow { border: none; background: none; padding: 0 1px; color: var(--slate-400); }

/* checklist + CTA */
.nr1-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 28px;
  max-width: 1020px;
  margin: 60px auto 0;
  list-style: none;
}
.nr1-benefit { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; font-weight: 500; }
.nr1-benefit .icon-sm { color: var(--sst); margin-top: 3px; flex-shrink: 0; }
.nr1-cta { margin-top: 44px; text-align: center; }

/* ---------- responsivo NR-1 ---------- */
@media (max-width: 960px) {
  .nr1-grid { grid-template-columns: 1fr; }
  .nr1-list { grid-template-columns: repeat(2, 1fr); }
  .nr1-pipe { margin-top: 56px; }
  .nr1-pipe-line { display: none; }
  .nr1-pipe-nodes { grid-template-columns: repeat(5, 1fr); gap: 20px 8px; }
}
@media (max-width: 720px) {
  .nr1-list { grid-template-columns: 1fr; gap: 14px; margin-top: 44px; }
  .nr1-int { margin-top: 56px; }
  .nr1-pipe-nodes { grid-template-columns: repeat(2, 1fr); gap: 26px 12px; }
  .nr1-denuncia { padding: 24px 20px; }
  .feat-nr1 { flex-wrap: wrap; }
}

/* ---------- reduced-motion NR-1 ---------- */
@media (prefers-reduced-motion: reduce) {
  .nr1-mock .fill-nr1 { animation: none !important; width: 82% !important; }
  .nr1-mock .check-path-nr1 { animation: none !important; stroke-dashoffset: 0 !important; }
  .js-anim .nr1-step { opacity: 1 !important; transform: none !important; }
  .js-anim .nr1-pipe-fill { width: 100% !important; transition: none !important; }
}