/* Politica de Privacidade — Zulti
   CSS extraido do HTML inline em 21/09/2026.
   Motivo: o conteudo comecava aos 244 KB do arquivo e analisadores
   automaticos (verificacao de marca do Google) truncavam antes do texto.
   O visual e identico ao anterior. */

/* ── bloco 1 (extraido do inline) ── */
@font-face {
  font-family: 'Lexend';
  src: url('/zulti_assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype-variations'),
       url('/zulti_assets/fonts/Lexend-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/zulti_assets/fonts/JetBrainsMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/zulti_assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/zulti_assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── bloco 2 (extraido do inline) ── */
:root {
    --azul:           #3E3CF9;
    --azul-deep:      #2A1FB8;
    --azul-glow:      rgba(62, 60, 249, 0.32);
    --azulescuro:     #180636;
    --violeta:        #0B0220;
    --menta:          #7EE5DD;
    --menta-soft:     rgba(126, 229, 221, 0.14);
    --papel:          #F7F7FB;
    --papel-2:        #FFFFFF;
    --grafite:        #1A1A2E;
    --cinza:          #6B6B85;
    --cinza-2:        #9B9BB3;

    --text-1:         #FFFFFF;
    --text-2:         #C3C0DC;
    --text-3:         #847FAC;
    --text-4:         #5B5780;
    --border:         rgba(255, 255, 255, 0.08);
    --border-2:       rgba(255, 255, 255, 0.16);
    --border-3:       rgba(255, 255, 255, 0.28);
    --border-light:   rgba(24, 6, 54, 0.08);

    --gradiente:      linear-gradient(135deg, #7EE5DD 0%, #3E3CF9 60%, #2A1FB8 100%);
    --gradiente-soft: linear-gradient(135deg, rgba(126,229,221,0.20) 0%, rgba(62,60,249,0.30) 100%);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; background: var(--azulescuro); }
  body {
    background: var(--azulescuro); color: var(--text-1);
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 15px; line-height: 1.55;
    font-feature-settings: "tnum"; -webkit-font-smoothing: antialiased;
    overflow-x: hidden; position: relative;
  }
  .container { max-width: 1240px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
  @media (max-width: 720px) { .container { padding: 0 20px; } }
  .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: -0.01em; }

  /* ─────────────────────────────── TOP NAV ─────────────────────────────── */
  header.topnav {
    border-bottom: 1px solid var(--border);
    background: rgba(24, 6, 54, 0.65);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    position: sticky; top: 0; z-index: 50;
  }
  .nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .brand-logo { height: 26px; width: auto; }
  a:has(.brand-logo) { display: inline-flex; align-items: center; transition: opacity 0.2s; }
  a:has(.brand-logo):hover { opacity: 0.75; }
  .nav-mid { display: flex; gap: 4px; list-style: none; }
  /* Nav simple (sem dropdown) */
  .nav-simple > a {
    display: inline-flex; align-items: center;
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 14px; font-weight: 400;
    color: var(--text-2);
    text-decoration: none;
    padding: 8px 0;
    transition: color 0.2s;
  }
  .nav-simple > a:hover { color: var(--text-1); }
  .nav-simple.active > a { color: var(--menta); }

  .nav-mid li a {
    padding: 8px 14px; color: var(--text-2); font-size: 14px; font-weight: 400;
    border-radius: 8px; transition: color 0.15s, background 0.15s;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
  }
  .nav-mid li a:hover { color: var(--text-1); background: rgba(255,255,255,0.04); }
  .nav-mid li.active a { color: var(--menta); background: rgba(126,229,221,0.08); }

  /* ───── Dropdown menu (estilo Vercel) ───── */
  .nav-mid li.has-dropdown { position: relative; }
  .nav-mid li.has-dropdown > a .chevron {
    width: 10px; height: 10px; transition: transform 0.25s ease; opacity: 0.6;
  }
  .nav-mid li.has-dropdown:hover > a .chevron,
  .nav-mid li.has-dropdown:focus-within > a .chevron {
    transform: rotate(180deg); opacity: 1;
  }
  .nav-dropdown {
    position: absolute; top: calc(100% + 6px); left: -8px;
    min-width: 360px;
    background: linear-gradient(180deg, #1A0840 0%, var(--azulescuro) 100%);
    border: 1px solid var(--border-2); border-radius: 12px; padding: 8px;
    box-shadow: 0 24px 60px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset;
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, visibility 0.22s, transform 0.22s ease;
    z-index: 100;
  }
  .nav-mid li.has-dropdown::after {
    content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px;
  }
  .nav-mid li.has-dropdown:hover .nav-dropdown,
  .nav-mid li.has-dropdown:focus-within .nav-dropdown {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-dd-card {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 11px 14px; border-radius: 8px; text-decoration: none;
    transition: background 0.15s ease;
  }
  .nav-dd-card:hover { background: rgba(126, 229, 221, 0.06); }
  .nav-dd-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(126, 229, 221, 0.08);
    border: 1px solid rgba(126, 229, 221, 0.18);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--menta);
    transition: background 0.15s ease, border-color 0.15s ease;
  }
  .nav-dd-icon svg { width: 18px; height: 18px; }
  .nav-dd-card:hover .nav-dd-icon {
    background: rgba(126, 229, 221, 0.16);
    border-color: rgba(126, 229, 221, 0.35);
  }
  .nav-dd-content { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .nav-dd-title {
    font-size: 14px; color: var(--text-1); font-weight: 500;
    letter-spacing: -0.01em; line-height: 1.25;
    transition: color 0.15s ease;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .nav-dd-card:hover .nav-dd-title { color: var(--menta); }
  .nav-dd-title .nav-dd-new {
    font-family: 'JetBrains Mono', monospace; font-size: 9px;
    background: rgba(126,229,221,0.16); color: var(--menta);
    padding: 2px 6px; border-radius: 3px;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .nav-dd-desc {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--text-3); letter-spacing: 0.02em; line-height: 1.4;
  }
  .nav-right { display: flex; align-items: center; gap: 6px; }
  .btn-cta {
    padding: 9px 18px; background: #fff; color: #180636; font-size: 14px;
    border-radius: 8px; font-weight: 500; cursor: pointer; transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .btn-cta:hover { background: #fff; box-shadow: 0 10px 26px -10px rgba(126,229,221,0.5), 0 0 0 3px rgba(126,229,221,0.08); transform: translateY(-1px); }
  @media (max-width: 880px) { .nav-mid { display: none; } }

  /* ─────────────────────────────── HERO ─────────────────────────────── */
  .hero { padding: 56px 0 64px; position: relative; overflow: visible; }
  .hero .container { overflow: visible; }
  .hero .hero-grid { overflow: visible; }
  .hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse 70% 60% at 85% -5%, rgba(126,229,221,0.18), transparent 65%),
      radial-gradient(ellipse 50% 40% at 15% 10%, rgba(62,60,249,0.18), transparent 65%);
  }
  /* Linha diagonal do background removida na Cloud — conflito visual */

  /* Grid lines técnico — cobre área do diagrama, fade gradual antes das bordas */
  .hero-grid-overlay { display: none; }
  .hero-visual::before { content: none; }

  .breadcrumb {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--text-3); text-transform: uppercase; letter-spacing: 0.10em;
    margin-bottom: 18px; position: relative; z-index: 1;
  }
  .breadcrumb a { color: var(--text-3); text-decoration: none; transition: color 0.15s; }
  .breadcrumb a:hover { color: var(--menta); }
  .breadcrumb .sep { color: var(--text-4); }
  .breadcrumb .current { color: var(--menta); }

  .hero-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center;
    position: relative; z-index: 1;
  }
  @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

  .studio-mark {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 6px 14px 6px 8px;
    border: 1px solid var(--border-2);
    border-radius: 999px;
    margin-bottom: 28px;
    background: rgba(126, 229, 221, 0.05);
  }
  .studio-mark .icn {
    width: 22px; height: 22px;
    background: var(--gradiente);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Lexend', sans-serif; font-weight: 700; color: white; font-size: 11px;
  }
  .studio-mark span { font-size: 13px; color: var(--text-1); font-weight: 500; }
  .studio-mark .badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--menta); padding: 0 6px; border-left: 1px solid var(--border-2); margin-left: 4px; }

  h1.hero-h {
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.08; letter-spacing: -0.03em; font-weight: 600;
    margin-bottom: 22px;
    max-width: 560px;
  }
  h1.hero-h .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  h1.hero-h .muted { color: var(--text-3); font-weight: 300; }

  .hero-sub {
    font-size: 18px; line-height: 1.55; color: var(--text-2);
    max-width: 560px; margin-bottom: 36px; font-weight: 300;
  }
  .hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 40px; }
  .cta-primary {
    padding: 13px 22px; background: var(--azul); color: var(--text-1); font-size: 14.5px; font-weight: 500;
    border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
    transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    border: 1px solid var(--azul);
  }
  .cta-primary:hover { background: var(--azul-deep); border-color: var(--azul-deep); box-shadow: 0 12px 30px -10px var(--azul-glow); transform: translateY(-1px); }
  .cta-secondary {
    padding: 13px 22px; background: transparent; color: var(--text-1); font-size: 14.5px;
    border: 1px solid var(--border-3); border-radius: 9px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 9px;
    transition: background 0.18s, border 0.18s, color 0.18s;
  }
  .cta-secondary:hover { background: rgba(255,255,255,0.04); border-color: var(--menta); color: var(--menta); }
  .cta-arrow { transition: transform 0.18s ease; }
  .cta-primary:hover .cta-arrow, .cta-secondary:hover .cta-arrow { transform: translateX(3px); }

  .hero-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-4);
    letter-spacing: 0.06em;
    border-top: 1px solid var(--border);
    padding-top: 20px; margin-top: 36px;
    display: flex; gap: 48px; flex-wrap: wrap; align-items: center;
    position: relative; z-index: 1;
  }
  .hero-meta span strong { color: var(--menta); font-weight: 500; }
  @media (max-width: 720px) { .hero-meta { gap: 16px; } }

  /* hero visual — Mapa de infraestrutura com escudos (Cibersegurança) */
  .hero-visual {
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible; position: relative;
    display: flex; flex-direction: column; align-items: stretch;
    padding: 0;
  }
  /* Dot pattern foi substituído pelo .hero-grid-overlay que cobre a hero inteira sem corte */

  /* Halo da cloud agora vem do filter SVG aplicado em cloud-shape — sem div HTML separado */

  /* Glows ambient removidos — não fazem sentido pro Console de Conformidade (não tem cloud nem rack atrás). */
  .infra-svg {
    width: 100%; height: 100%; display: block;
    position: relative; z-index: 1;
  }

  /* Linhas de conexão entre nós */
  .infra-svg .conn {
    stroke: rgba(126,229,221,0.28);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    animation: infra-conn-flow 6s linear infinite;
  }
  @keyframes infra-conn-flow {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -32; }
  }

  /* Partículas de tráfego viajando pelas linhas */
  .infra-svg .traffic {
    fill: var(--menta);
    filter: drop-shadow(0 0 4px rgba(126,229,221,0.7));
    opacity: 0;
  }
  .infra-svg .traffic.t-1 { animation: traffic-down-1 5s linear infinite; }
  .infra-svg .traffic.t-2 { animation: traffic-down-2 5s linear infinite 1.5s; }
  .infra-svg .traffic.t-3 { animation: traffic-down-3 5s linear infinite 3s; }

  @keyframes traffic-down-1 {
    0%   { opacity: 0; transform: translate(0, 0); }
    5%   { opacity: 1; }
    /* Cloud → Firewall */
    25%  { opacity: 1; transform: translate(0, 70px); }
    /* Firewall → Switch */
    50%  { opacity: 1; transform: translate(0, 155px); }
    /* Switch → EP esquerda */
    75%  { opacity: 1; transform: translate(-85px, 245px); }
    80%  { opacity: 0; transform: translate(-85px, 245px); }
    100% { opacity: 0; }
  }
  @keyframes traffic-down-2 {
    0%, 5% { opacity: 0; transform: translate(0, 0); }
    8%   { opacity: 1; }
    /* Já começa no Firewall, vai pro Switch */
    35%  { opacity: 1; transform: translate(0, 85px); }
    /* Switch → EP centro */
    65%  { opacity: 1; transform: translate(0, 185px); }
    70%  { opacity: 0; }
    100% { opacity: 0; }
  }
  @keyframes traffic-down-3 {
    0%, 5% { opacity: 0; transform: translate(0, 0); }
    8%   { opacity: 1; }
    /* Já começa no Switch */
    50%  { opacity: 1; transform: translate(85px, 70px); }
    /* Vai pra Server */
    55%  { opacity: 1; transform: translate(-115px, -20px); }
    60%  { opacity: 0; }
    100% { opacity: 0; }
  }

  /* Nós base */
  .infra-svg .node text.node-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    fill: var(--text-3);
    letter-spacing: 0.12em;
  }
  .infra-svg .node-firewall .node-bg {
    animation: fw-pulse 3s ease-in-out infinite;
  }
  @keyframes fw-pulse {
    0%, 100% { stroke: rgba(126,229,221,0.55); filter: drop-shadow(0 0 6px rgba(126,229,221,0.3)); }
    50%      { stroke: rgba(126,229,221,0.95); filter: drop-shadow(0 0 14px rgba(126,229,221,0.7)); }
  }

  /* Escudo orbital — pulse leve constante */
  .infra-svg .orbit-shield {
    transform-origin: center;
    transform-box: fill-box;
    animation: shield-pulse 2.5s ease-in-out infinite;
  }
  .infra-svg .orbit-shield.small { animation-duration: 3.5s; }
  .infra-svg .node-server .orbit-shield { animation-delay: 0.6s; }
  .infra-svg .ep-1 .orbit-shield { animation-delay: 0s; }
  .infra-svg .ep-2 .orbit-shield { animation-delay: 1.2s; }
  .infra-svg .ep-3 .orbit-shield { animation-delay: 2.0s; }
  @keyframes shield-pulse {
    0%, 100% { opacity: 0.8; }
    50%      { opacity: 1; filter: drop-shadow(0 0 5px rgba(126,229,221,0.6)); }
  }

  /* Pessoas (camada de conscientização) com pulse sutil */
  .infra-svg .human {
    animation: human-pulse 4s ease-in-out infinite;
  }
  .infra-svg .ep-2 .human { animation-delay: 1.5s; }
  .infra-svg .ep-3 .human { animation-delay: 3s; }
  @keyframes human-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
  }

  /* Ameaças vermelhas descendo da Internet */
  .infra-svg .threat {
    fill: #FF6464;
    filter: drop-shadow(0 0 5px rgba(255,100,100,0.8));
    opacity: 0;
    animation: threat-fall 5s ease-in infinite;
  }
  .infra-svg .threat.th-2 { animation-delay: 1.2s; animation-duration: 4.5s; }
  .infra-svg .threat.th-3 { animation-delay: 2.4s; animation-duration: 5.2s; }
  .infra-svg .threat.th-4 { animation-delay: 3.6s; animation-duration: 4.8s; }
  .infra-svg .threat.th-5 { animation-delay: 4.8s; animation-duration: 5.5s; }

  /* Ameaça padrão: para no firewall */
  @keyframes threat-fall {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    10%  { opacity: 1; transform: translate(0, 10px) scale(1); }
    /* Chega no firewall (y=140 do cloud y=55 = 85px de queda) */
    35%  { opacity: 1; transform: translate(0, 75px) scale(1); }
    /* Bate no escudo do firewall, vira cinza, some */
    40%  { opacity: 0.7; transform: translate(0, 80px) scale(1.3); fill: #888; }
    45%  { opacity: 0; transform: translate(0, 80px) scale(0); }
    100% { opacity: 0; }
  }

  /* Algumas ameaças passam o firewall e chegam ao switch */
  .infra-svg .threat.threat-deep { animation-name: threat-fall-deep; }
  @keyframes threat-fall-deep {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    10%  { opacity: 1; transform: translate(0, 10px) scale(1); }
    /* Atravessa firewall (não para totalmente) */
    35%  { opacity: 0.85; transform: translate(0, 80px) scale(1); }
    /* Chega no switch (165px de queda) */
    55%  { opacity: 0.85; transform: translate(0, 165px) scale(1); }
    /* Switch direciona pra endpoint, vai pra direita */
    70%  { opacity: 0.85; transform: translate(85px, 240px) scale(1); }
    /* EDR do endpoint neutraliza */
    75%  { opacity: 1; transform: translate(85px, 245px) scale(1.4); fill: #888; }
    80%  { opacity: 0; transform: translate(85px, 245px) scale(0); }
    100% { opacity: 0; }
  }

  /* Raras chegam ao servidor */
  .infra-svg .threat.threat-deeper { animation-name: threat-fall-deeper; }
  @keyframes threat-fall-deeper {
    0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
    10%  { opacity: 1; transform: translate(0, 10px) scale(1); }
    35%  { opacity: 0.85; transform: translate(0, 80px) scale(1); }
    55%  { opacity: 0.85; transform: translate(0, 165px) scale(1); }
    65%  { opacity: 0.85; transform: translate(-115px, 165px) scale(1); }
    72%  { opacity: 1; transform: translate(-115px, 165px) scale(1.5); fill: #888; }
    77%  { opacity: 0; transform: translate(-115px, 165px) scale(0); }
    100% { opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .infra-svg .threat, .infra-svg .traffic, .infra-svg .conn,
    .infra-svg .orbit-shield, .infra-svg .human, .infra-svg .node-firewall .node-bg {
      animation: none;
    }
  }

  /* ═══════════════════════════════════════════════════════════════════════
     CSS do honeycomb — preservado mas DEAD CODE
     Os seletores (.honeycomb-svg, .hex, etc.) não existem no HTML atual
     (o SVG do honeycomb está dentro de um <!-- comment -->), então estas
     regras não se aplicam a nada. Pra reativar: descomentar o SVG no HTML.
     ═══════════════════════════════════════════════════════════════════════ */

  .honeycomb-svg {
    width: 100%; height: 100%; display: block;
  }

  /* Hexágonos base — calmo, com sutil glow */
  .honeycomb-svg .hex {
    fill: rgba(126,229,221,0.06);
    stroke: rgba(126,229,221,0.32);
    stroke-width: 1.2;
    transition: fill 0.4s, stroke 0.4s;
    transform-origin: center;
    transform-box: fill-box;
  }
  .honeycomb-svg .hex-ring1 {
    fill: rgba(126,229,221,0.08);
    stroke: rgba(126,229,221,0.38);
  }
  .honeycomb-svg .hex-center {
    fill: rgba(126,229,221,0.14);
    stroke: rgba(126,229,221,0.55);
    stroke-width: 1.6;
    filter: drop-shadow(0 0 12px rgba(126,229,221,0.45));
    animation: hex-center-pulse 4s ease-in-out infinite;
  }
  @keyframes hex-center-pulse {
    0%, 100% { fill: rgba(126,229,221,0.14); filter: drop-shadow(0 0 10px rgba(126,229,221,0.4)); }
    50%      { fill: rgba(126,229,221,0.22); filter: drop-shadow(0 0 18px rgba(126,229,221,0.7)); }
  }

  /* Hex em scan ativo — pulse menta constante (staggered) */
  .honeycomb-svg .hex-scan {
    animation: hex-scan-pulse 3s ease-in-out infinite;
  }
  .honeycomb-svg .hex-scan:nth-of-type(6)  { animation-delay: 0s; }
  .honeycomb-svg .hex-scan:nth-of-type(11) { animation-delay: 1s; }
  .honeycomb-svg .hex-scan:nth-of-type(12) { animation-delay: 2s; }
  .honeycomb-svg .hex-scan:nth-of-type(16) { animation-delay: 0.5s; }
  @keyframes hex-scan-pulse {
    0%, 100% { fill: rgba(126,229,221,0.08); stroke: rgba(126,229,221,0.38); }
    50%      { fill: rgba(126,229,221,0.32); stroke: rgba(126,229,221,0.85);
              filter: drop-shadow(0 0 8px rgba(126,229,221,0.55)); }
  }

  /* Hex com alerta ocasional — pulse vermelho rápido e curto, com pausa longa */
  .honeycomb-svg .hex-alert {
    animation: hex-alert-pulse 8s ease-out infinite;
  }
  .honeycomb-svg .hex-alert:nth-of-type(4)  { animation-delay: 1.5s; }
  .honeycomb-svg .hex-alert:nth-of-type(9)  { animation-delay: 4.5s; }
  .honeycomb-svg .hex-alert:nth-of-type(15) { animation-delay: 7s; }
  @keyframes hex-alert-pulse {
    0%   { fill: rgba(126,229,221,0.08); stroke: rgba(126,229,221,0.38); }
    /* Ameaça detectada — pulse vermelho rápido */
    3%   { fill: rgba(255,100,100,0.35); stroke: rgba(255,100,100,0.9);
           filter: drop-shadow(0 0 12px rgba(255,100,100,0.7)); }
    8%   { fill: rgba(255,160,80,0.30); stroke: rgba(255,160,80,0.85);
           filter: drop-shadow(0 0 10px rgba(255,160,80,0.6)); }
    /* Neutralizada — volta pra menta brilhando */
    13%  { fill: rgba(126,229,221,0.32); stroke: rgba(126,229,221,0.85);
           filter: drop-shadow(0 0 10px rgba(126,229,221,0.6)); }
    20%, 100% { fill: rgba(126,229,221,0.08); stroke: rgba(126,229,221,0.38); }
  }

  /* Ícone do escudo central (Proteção de Dados) */
  .honeycomb-svg .hc-core-icon {
    animation: hc-core-icon-pulse 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
  }
  @keyframes hc-core-icon-pulse {
    0%, 100% { opacity: 0.95; }
    50%      { opacity: 1; }
  }

  /* Live counter — pílula no rodapé do diagrama */
  .shield-counter {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    background: rgba(11, 2, 32, 0.85);
    border: 1px solid var(--linha-forte);
    border-radius: 999px;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--text-2); letter-spacing: 0.08em;
    box-shadow: 0 12px 32px -12px rgba(0,0,0,0.6);
    align-self: center; margin-top: 40px;
    white-space: nowrap;
    z-index: 2;
  }
  .shield-counter .num {
    font-weight: 600; margin-right: 4px;
  }
  .shield-counter .pulse-dot {
    display: inline-block; width: 7px; height: 7px;
    background: #51d685; border-radius: 50%;
    box-shadow: 0 0 8px #51d685;
    animation: livePulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
  }
  @keyframes tk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  @media (prefers-reduced-motion: reduce) {
    .shield-svg .threat, .shield-svg .endpoint, .shield-svg .core-circle, .shield-svg .scan-line { animation: none; }
  }

  /* ─────────────────────────────── ARGUMENTS ─────────────────────────────── */
  .args {
    background: var(--papel); color: var(--grafite);
    padding: 96px 0; position: relative;
    margin-top: 32px;
  }
  .args::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(62,60,249,0.06) 0.7px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }
  .args-head { max-width: 760px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .eyebrow-light {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--menta); text-transform: uppercase; letter-spacing: 0.22em;
    margin-bottom: 18px; font-weight: 500;
  }
  .eyebrow-light::before, .eyebrow-light::after {
    content: ""; width: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126,229,221,0.6));
  }
  .eyebrow-light::after { background: linear-gradient(90deg, rgba(126,229,221,0.6), transparent); }
  .eyebrow-light.center { justify-content: center; }
  .args-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 16px;
  }
  .args-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .args-sub { font-size: 16px; line-height: 1.55; color: var(--cinza); font-weight: 300; max-width: 640px; margin: 0 auto; }

  .args-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
    position: relative; z-index: 1;
  }
  @media (max-width: 760px) { .args-grid { grid-template-columns: 1fr; } }
  .arg-card {
    background: var(--papel-2); border: 1px solid var(--border-light);
    border-radius: 14px; padding: 32px 28px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 14px;
  }
  .arg-card:hover {
    border-color: rgba(62,60,249,0.30);
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(62,60,249,0.18);
  }
  .arg-card:hover::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradiente);
  }
  .arg-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--azul);
    letter-spacing: 0.08em;
  }
  .arg-big {
    font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em;
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: flex; align-items: baseline; gap: 6px;
  }
  .arg-big .unit { font-size: 22px; color: var(--cinza); font-weight: 400; -webkit-text-fill-color: var(--cinza); }
  .arg-name { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--grafite); line-height: 1.15; }
  .arg-body { font-size: 14.5px; line-height: 1.6; color: var(--cinza); font-weight: 300; }
  .arg-foot {
    margin-top: auto; padding-top: 14px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--cinza-2);
    border-top: 1px solid var(--border-light); letter-spacing: 0.04em;
  }

  /* ─────────────────────────── O QUE ENTRA · O QUE NÃO ENTRA (scope) ─────────────────────────── */
  .scope {
    background: var(--papel); color: var(--grafite);
    padding: 96px 0 110px; position: relative;
    margin-top: 32px;
  }
  .scope::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(62,60,249,0.06) 0.7px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }
  .scope-head { max-width: 760px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .scope-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 16px;
  }
  .scope-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .scope-sub { font-size: 16px; line-height: 1.55; color: var(--cinza); font-weight: 300; max-width: 640px; margin: 0 auto; }

  .scope-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
    position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
  }
  @media (max-width: 780px) { .scope-grid { grid-template-columns: 1fr; } }

  .scope-col {
    background: var(--papel-2); border-radius: 14px; padding: 32px 30px;
    border: 1px solid var(--border-light);
    display: flex; flex-direction: column;
  }
  .scope-col.entra { border-left: 3px solid var(--menta); }
  .scope-col.nao   { border-left: 3px solid rgba(24,6,54,0.18); background: rgba(24,6,54,0.012); }

  .scope-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
  }
  .scope-eyebrow.entra { color: #138B83; }
  .scope-eyebrow.nao { color: var(--cinza-2); }
  .scope-eyebrow .sw { width: 8px; height: 8px; border-radius: 2px; }
  .scope-eyebrow.entra .sw { background: var(--menta); }
  .scope-eyebrow.nao .sw { background: rgba(24,6,54,0.18); border: 1px solid rgba(24,6,54,0.30); }

  .scope-h3 {
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--grafite); margin-bottom: 22px; line-height: 1.2;
  }
  .scope-h3 .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }

  .scope-list { display: flex; flex-direction: column; gap: 12px; }
  .scope-item {
    display: flex; gap: 12px; align-items: flex-start;
    padding-bottom: 12px; border-bottom: 1px solid var(--border-light);
  }
  .scope-item:last-child { border-bottom: none; padding-bottom: 0; }
  .scope-mark {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px;
    margin-top: 1px;
  }
  .scope-item.entra .scope-mark { background: rgba(126,229,221,0.22); color: #0F6C66; }
  .scope-item.nao .scope-mark { background: rgba(24,6,54,0.06); color: var(--cinza-2); }
  .scope-text { display: flex; flex-direction: column; gap: 2px; flex: 1; }
  .scope-text .name { font-size: 15px; color: var(--grafite); font-weight: 500; line-height: 1.35; }
  .scope-text .detail { font-size: 13px; color: var(--cinza); font-weight: 300; line-height: 1.5; }

  .scope-note {
    grid-column: 1 / -1; margin-top: 6px; padding: 18px 22px;
    background: rgba(62,60,249,0.04); border-radius: 10px;
    border: 1px dashed rgba(62,60,249,0.18);
    font-size: 13.5px; color: var(--cinza); font-weight: 300; line-height: 1.55;
    text-align: center;
  }
  .scope-note strong { color: var(--azul); font-weight: 500; }

  /* ─────────────────────────── ANATOMIA DO CONTRATO MSP (anatomy) ─────────────────────────── */
  .anatomy-stack {
    display: flex; flex-direction: column; gap: 24px;
    max-width: 1100px; margin: 0 auto;
    position: relative; z-index: 1;
  }
  .anatomy-block {
    background: var(--papel-2);
    border: 1px solid var(--border-light);
    border-radius: 14px;
    padding: 36px 36px 30px;
    display: flex; flex-direction: column; gap: 20px;
  }
  @media (max-width: 720px) { .anatomy-block { padding: 28px 22px 24px; } }
  .anatomy-block.core   { border-left: 3px solid var(--menta); }
  .anatomy-block.rmm    { border-left: 3px solid var(--menta); }
  .anatomy-block.outras { border-left: 3px solid rgba(24,6,54,0.18); background: rgba(24,6,54,0.012); }

  .anatomy-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .anatomy-block.core .anatomy-eyebrow,
  .anatomy-block.rmm .anatomy-eyebrow { color: #138B83; }
  .anatomy-block.outras .anatomy-eyebrow { color: var(--cinza-2); }
  .anatomy-eyebrow .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--menta); }
  .anatomy-block.outras .anatomy-eyebrow .sw {
    background: rgba(24,6,54,0.18); border: 1px solid rgba(24,6,54,0.30);
  }

  .anatomy-h3 {
    font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--grafite); line-height: 1.22;
  }
  .anatomy-h3 .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }

  .anatomy-card-pair {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  }
  @media (max-width: 720px) { .anatomy-card-pair { grid-template-columns: 1fr; } }

  .anatomy-card {
    padding: 22px 24px; border-radius: 10px;
    background: rgba(126,229,221,0.05);
    border: 1px solid rgba(126,229,221,0.20);
    display: flex; flex-direction: column; gap: 8px;
  }
  .anatomy-card .tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: #0F6C66; letter-spacing: 0.10em; font-weight: 600; text-transform: uppercase;
  }
  .anatomy-card .name {
    font-size: 18px; font-weight: 600; color: var(--grafite);
    letter-spacing: -0.01em; line-height: 1.25; margin-top: 2px;
  }
  .anatomy-card .desc {
    font-size: 13.5px; color: var(--cinza); font-weight: 300; line-height: 1.55;
  }

  .anatomy-card-wide {
    padding: 26px 28px; border-radius: 10px;
    background: rgba(126,229,221,0.05);
    border: 1px solid rgba(126,229,221,0.20);
    display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start;
  }
  @media (max-width: 600px) { .anatomy-card-wide { grid-template-columns: 1fr; gap: 14px; } }
  .anatomy-card-wide .ico-big {
    width: 56px; height: 56px; border-radius: 12px;
    background: rgba(126,229,221,0.18); color: #0F6C66;
    display: flex; align-items: center; justify-content: center;
  }
  .anatomy-card-wide .ico-big svg { width: 28px; height: 28px; }
  .anatomy-card-wide .body { display: flex; flex-direction: column; gap: 8px; }
  .anatomy-card-wide .tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: #0F6C66; letter-spacing: 0.10em; font-weight: 600; text-transform: uppercase;
  }
  .anatomy-card-wide .name {
    font-size: 19px; font-weight: 600; color: var(--grafite);
    letter-spacing: -0.01em; line-height: 1.3; margin-top: 2px;
  }
  .anatomy-card-wide .desc {
    font-size: 14px; color: var(--cinza); font-weight: 300; line-height: 1.6;
  }

  .anatomy-foot {
    font-size: 13.5px; color: var(--cinza); font-weight: 300; line-height: 1.6;
    padding-top: 2px;
  }
  .anatomy-foot strong { color: var(--grafite); font-weight: 500; }

  .anatomy-other-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  }
  @media (max-width: 720px) { .anatomy-other-grid { grid-template-columns: 1fr; gap: 22px; } }

  .anatomy-other-col h4 {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--cinza-2); letter-spacing: 0.10em; text-transform: uppercase;
    margin-bottom: 12px; font-weight: 600;
  }
  .anatomy-links { display: flex; flex-direction: column; gap: 4px; }
  .anatomy-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; border-radius: 8px;
    text-decoration: none; color: var(--grafite);
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    border: 1px solid transparent;
    gap: 10px;
  }
  .anatomy-link:hover:not(.disabled) {
    background: rgba(126,229,221,0.10);
    border-color: rgba(126,229,221,0.30);
  }
  .anatomy-link-content { display: flex; flex-direction: column; gap: 1px; }
  .anatomy-link .label { font-size: 14.5px; font-weight: 500; color: var(--grafite); line-height: 1.3; }
  .anatomy-link .sub  { font-size: 12.5px; color: var(--cinza); font-weight: 300; line-height: 1.4; }
  .anatomy-link .arr {
    color: var(--cinza-2); font-family: 'JetBrains Mono', monospace;
    font-size: 14px; transition: transform 0.2s, color 0.18s;
    flex-shrink: 0;
  }
  .anatomy-link:hover:not(.disabled) .arr { color: #0F6C66; transform: translateX(3px); }
  .anatomy-link.disabled { cursor: default; opacity: 0.85; }
  .anatomy-link.disabled .arr { display: none; }
  .anatomy-direct-note {
    font-size: 12.5px; color: var(--cinza); font-weight: 300; line-height: 1.55;
    margin-top: 14px; padding: 10px 12px;
    background: rgba(24,6,54,0.025); border-radius: 6px;
  }
  .anatomy-direct-note strong { color: var(--grafite); font-weight: 500; }

  /* ═══════════════════════════ CIBERSEGURANÇA · SEÇÕES PRÓPRIAS ═══════════════════════════ */

  /* ─── PREMISSA HONESTA — 3 cards numerados ─── */
  .premissa-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
    max-width: 1080px; margin: 0 auto; position: relative; z-index: 1;
  }
  @media (max-width: 880px) { .premissa-grid { grid-template-columns: 1fr; } }
  .premissa-card {
    background: var(--papel-2); border: 1px solid var(--border-light);
    border-radius: 14px; padding: 30px 28px;
    display: flex; flex-direction: column; gap: 12px;
    border-left: 3px solid var(--menta);
    transition: transform 0.25s, box-shadow 0.25s;
  }
  .premissa-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 36px -18px rgba(62,60,249,0.18);
  }
  .premissa-card .premissa-num {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: #138B83; letter-spacing: 0.10em; font-weight: 600;
  }
  .premissa-card h3 {
    font-size: 18px; font-weight: 600; color: var(--grafite);
    letter-spacing: -0.01em; line-height: 1.25;
  }
  .premissa-card p {
    font-size: 14px; color: var(--cinza); font-weight: 300; line-height: 1.6;
  }

  /* ─── 5 CAMADAS DE PROTEÇÃO ─── */
  .layers {
    background: linear-gradient(180deg, var(--azulescuro) 0%, #1A0A45 100%);
    color: var(--text-1); padding: 100px 0; position: relative; overflow: hidden;
  }
  .layers::before {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(126,229,221,0.12), transparent 60%);
    pointer-events: none;
  }
  .layers-head { max-width: 800px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .layers-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .layers-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .layers-sub { font-size: 16px; color: var(--text-2); font-weight: 300; max-width: 700px; margin: 0 auto; line-height: 1.6; }

  /* ═══════════════════════════════════════════════════════════════════
     ISO/LGPD COVERAGE MAP — substitui matrix 2×2
     Cada frente do CISO mostrada como linha com strip de cobertura
     nas 6 áreas (SGSI · ACL · OPS · IRC · FOR · LGPD).
     ═══════════════════════════════════════════════════════════════════ */
  .nist-coverage {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }

  /* Cabeçalho da matriz: rótulos das 6 áreas ISO/LGPD */
  .nist-cov-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    align-items: end;
    padding: 0 26px 14px;
    border-bottom: 1px dashed rgba(126,229,221,0.22);
    margin-bottom: 14px;
  }
  .nist-cov-header-left {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--cinza-2);
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  .nist-cov-cols {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; letter-spacing: 0.10em;
    text-transform: uppercase;
    text-align: center;
  }
  .nist-cov-col {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
  }
  .nist-cov-col-code {
    color: var(--menta);
    font-weight: 500;
    letter-spacing: 0.16em;
  }
  .nist-cov-col-name {
    color: var(--text-3);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: none;
  }

  /* Linhas (uma por frente) */
  .nist-cov-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .nist-cov-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 26px;
    align-items: stretch;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 26px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    position: relative; overflow: hidden;
  }
  .nist-cov-row:hover {
    border-color: rgba(126,229,221,0.45);
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
  }
  /* Faixa colorida indicando a área ISO/LGPD primária da frente */
  .nist-cov-row::before {
    content: ""; position: absolute;
    left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--menta);
    opacity: 0.6;
    transition: opacity 0.3s ease;
  }
  .nist-cov-row:hover::before { opacity: 1; }
  .nist-cov-row[data-primary="POL"]::before { background: var(--menta); }
  .nist-cov-row[data-primary="ORG"]::before { background: #8E8DFF; }
  .nist-cov-row[data-primary="INV"]::before { background: var(--menta); }
  .nist-cov-row[data-primary="ACC"]::before { background: #FF8E8E; }
  .nist-cov-row[data-primary="OPS"]::before { background: #FFC857; }
  .nist-cov-row[data-primary="LEG"]::before { background: #B5B0E8; }

  .nist-cov-row-info {
    display: flex; flex-direction: column; gap: 8px;
    min-width: 0;
  }
  .nist-cov-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; color: var(--menta);
    letter-spacing: 0.10em; text-transform: uppercase;
  }
  .nist-cov-row h3 {
    font-size: 19px; font-weight: 500; color: var(--text-1);
    line-height: 1.25; letter-spacing: -0.015em;
    margin: 0;
  }
  .nist-cov-row p {
    font-size: 13.5px; color: var(--text-2); font-weight: 300; line-height: 1.55;
    margin: 2px 0 0;
  }
  .nist-cov-row-foot {
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.10);
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--cinza-2); letter-spacing: 0.04em;
  }

  /* Strip de cobertura nas 5 funções (1 cell por função) */
  .nist-cov-cells {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    align-self: center;
  }
  .nist-cov-cell {
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    position: relative;
  }
  .nist-cov-cell-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.08em;
    color: var(--text-3);
    opacity: 0.55;
  }
  .nist-cov-cell-level {
    display: inline-flex; gap: 2px;
  }
  .nist-cov-cell-level i {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: inline-block;
  }

  /* Níveis de cobertura: l3 (forte) · l2 (média) · l1 (toca) · l0 (não cobre) */
  .nist-cov-cell[data-level="3"] {
    background: rgba(126,229,221,0.16);
    border-color: rgba(126,229,221,0.45);
  }
  .nist-cov-cell[data-level="3"] .nist-cov-cell-code { color: var(--menta); opacity: 1; }
  .nist-cov-cell[data-level="3"] .nist-cov-cell-level i { background: var(--menta); box-shadow: 0 0 4px rgba(126,229,221,0.5); }

  .nist-cov-cell[data-level="2"] {
    background: rgba(126,229,221,0.08);
    border-color: rgba(126,229,221,0.25);
  }
  .nist-cov-cell[data-level="2"] .nist-cov-cell-code { color: var(--menta); opacity: 0.85; }
  .nist-cov-cell[data-level="2"] .nist-cov-cell-level i:nth-child(-n+2) { background: var(--menta); }

  .nist-cov-cell[data-level="1"] {
    background: rgba(126,229,221,0.04);
    border-color: rgba(126,229,221,0.14);
  }
  .nist-cov-cell[data-level="1"] .nist-cov-cell-code { color: var(--text-2); opacity: 0.75; }
  .nist-cov-cell[data-level="1"] .nist-cov-cell-level i:first-child { background: var(--menta); opacity: 0.7; }

  /* Legenda */
  .nist-cov-legend {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed rgba(126,229,221,0.18);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.04em;
  }
  .nist-cov-legend-item {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .nist-cov-legend-dot {
    display: inline-flex; gap: 2px;
    padding: 4px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.04);
  }
  .nist-cov-legend-dot i {
    width: 4px; height: 4px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
  }
  .nist-cov-legend-dot.l3 i { background: var(--menta); box-shadow: 0 0 3px rgba(126,229,221,0.5); }
  .nist-cov-legend-dot.l2 i:nth-child(-n+2) { background: var(--menta); }
  .nist-cov-legend-dot.l1 i:first-child { background: var(--menta); opacity: 0.7; }

  @media (max-width: 980px) {
    .nist-cov-header { grid-template-columns: 1fr; gap: 14px; padding: 0 16px 14px; }
    .nist-cov-header-left { text-align: center; }
    .nist-cov-row { grid-template-columns: 1fr; gap: 16px; padding: 20px 22px; }
    .nist-cov-cells { max-width: 420px; margin: 0 auto; width: 100%; }
  }
  @media (max-width: 540px) {
    .nist-cov-cells { gap: 4px; }
    .nist-cov-cell-code { font-size: 8px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     JOURNEY FLOW — 4 frentes como flowchart horizontal (S&C)
     Substitui o Coverage Map clonado do CISO. Cada frente vira um box
     conectado por setas. Cards com 3 outputs concretos por frente.
     Timeline embaixo mostra duração indicativa do projeto.
     ═══════════════════════════════════════════════════════════════════ */
  .journey-flow {
    max-width: 1180px;
    margin: 30px auto 0;
    position: relative;
    z-index: 1;
  }
  .journey-grid {
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
    gap: 0;
    align-items: stretch;
  }
  .journey-box {
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 22px 20px 18px;
    display: flex; flex-direction: column; gap: 10px;
    transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  .journey-box:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-3px);
  }
  /* Faixa de cor por frente no topo do card */
  .journey-box::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
  }
  .journey-box:hover::before { opacity: 1; }
  .journey-box-1::before { background: var(--menta); }
  .journey-box-2::before { background: #8E8DFF; }
  .journey-box-3::before { background: #FFC857; }
  .journey-box-4::before { background: #FF8E8E; }

  .journey-box-1:hover { border-color: rgba(126,229,221,0.45); }
  .journey-box-2:hover { border-color: rgba(142,141,255,0.45); }
  .journey-box-3:hover { border-color: rgba(255,200,87,0.45); }
  .journey-box-4:hover { border-color: rgba(255,142,142,0.45); }

  .journey-box-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 500;
  }
  .journey-box-1 .journey-box-num { color: var(--menta); }
  .journey-box-2 .journey-box-num { color: #8E8DFF; }
  .journey-box-3 .journey-box-num { color: #FFC857; }
  .journey-box-4 .journey-box-num { color: #FF8E8E; }

  .journey-box h3 {
    font-family: 'Lexend', sans-serif;
    font-size: 18px; font-weight: 500;
    color: var(--text-1);
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin: 0;
  }
  .journey-box-desc {
    font-size: 13px;
    color: var(--text-2);
    font-weight: 300;
    line-height: 1.5;
    margin: 0;
  }
  .journey-box-desc strong { color: var(--text-1); font-weight: 500; }

  /* Outputs concretos — lista de 3 itens com bullet */
  .journey-outputs {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,0.10);
    display: flex; flex-direction: column; gap: 8px;
  }
  .journey-output {
    display: flex; align-items: flex-start; gap: 9px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-2);
    line-height: 1.4;
    letter-spacing: 0.02em;
  }
  .journey-output::before {
    content: "";
    flex-shrink: 0;
    width: 8px; height: 8px;
    border-radius: 2px;
    margin-top: 4px;
    background: currentColor;
    opacity: 0.4;
  }
  .journey-box-1 .journey-output::before { background: var(--menta); opacity: 0.7; }
  .journey-box-2 .journey-output::before { background: #8E8DFF; opacity: 0.7; }
  .journey-box-3 .journey-output::before { background: #FFC857; opacity: 0.7; }
  .journey-box-4 .journey-output::before { background: #FF8E8E; opacity: 0.7; }

  /* Setas conectoras entre os boxes */
  .journey-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-4);
  }
  .journey-arrow svg {
    width: 24px; height: 24px;
    opacity: 0.55;
    animation: journey-arrow-flow 2.6s ease-in-out infinite;
  }
  .journey-arrow:nth-of-type(2) svg { animation-delay: 0.4s; }
  .journey-arrow:nth-of-type(3) svg { animation-delay: 0.8s; }
  @keyframes journey-arrow-flow {
    0%, 100% { opacity: 0.45; transform: translateX(0); }
    50%      { opacity: 0.95; transform: translateX(3px); }
  }

  /* Timeline embaixo — bar com 4 segmentos */
  .journey-timeline {
    margin-top: 32px;
    padding: 18px 0 0;
    border-top: 1px dashed rgba(126,229,221,0.18);
    display: grid;
    grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr;
    gap: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: var(--text-3);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .journey-timeline-slot {
    text-align: center;
    padding: 0 12px;
    line-height: 1.4;
  }
  .journey-timeline-slot strong {
    display: block;
    color: var(--menta);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
  }
  .journey-timeline-box-2 strong { color: #8E8DFF; }
  .journey-timeline-box-3 strong { color: #FFC857; }
  .journey-timeline-box-4 strong { color: #FF8E8E; }
  .journey-timeline-arrow { /* slot vazio sobre seta */ }

  /* Mobile: stack vertical */
  @media (max-width: 980px) {
    .journey-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .journey-arrow {
      transform: rotate(90deg);
      padding: 4px 0;
    }
    .journey-arrow svg { animation: none; opacity: 0.6; }
    .journey-timeline {
      grid-template-columns: 1fr;
      gap: 8px;
    }
    .journey-timeline-arrow { display: none; }
  }

  /* ─── COMO NÃO ATRAPALHAMOS ─── */
  .not-overkill {
    background: var(--papel); color: var(--grafite); padding: 100px 0 110px;
    position: relative;
  }
  .not-overkill::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(circle, rgba(62,60,249,0.06) 0.7px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }
  .not-overkill-head { max-width: 780px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 1; }
  .not-overkill-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 16px;
  }
  .not-overkill-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .not-overkill-sub { font-size: 16px; color: var(--cinza); font-weight: 300; line-height: 1.6; }

  .not-overkill-list {
    max-width: 820px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 14px;
    position: relative; z-index: 1;
  }
  .not-item {
    background: var(--papel-2); border: 1px solid var(--border-light);
    border-left: 3px solid var(--menta);
    border-radius: 10px; padding: 22px 24px;
    display: flex; gap: 16px; align-items: flex-start;
    transition: border-color 0.2s, transform 0.2s;
  }
  .not-item:hover {
    transform: translateX(4px); border-color: rgba(126,229,221,0.45);
  }
  .not-mark {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: rgba(126,229,221,0.22); color: #0F6C66;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; font-family: 'JetBrains Mono', monospace;
  }
  .not-text { flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .not-text h4 {
    font-size: 16px; font-weight: 600; color: var(--grafite); letter-spacing: -0.01em;
  }
  .not-text p {
    font-size: 14px; color: var(--cinza); font-weight: 300; line-height: 1.55;
  }

  /* ─── COMO COMPÕE E COBRA ─── */
  .pricing-model {
    /* Tom violeta com luminosidades ambient (menta esquerda, azul direita) */
    background: var(--azulescuro);
    color: var(--text-1); padding: 100px 0;
    position: relative; overflow: hidden;
  }
  .pricing-model::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--menta) 30%, var(--azul) 70%, transparent);
    opacity: 0.5;
  }
  /* Grid lines sutil cobrindo a seção */
  .pricing-model::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      repeating-linear-gradient(45deg, transparent 0 19px, rgba(62,60,249,0.05) 19px 20px);
    background-size: auto auto;
    mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at center, black 20%, transparent 85%);
  }
  .pricing-model > .container { position: relative; z-index: 1; }
  .pricing-head { max-width: 820px; margin: 0 auto 48px; text-align: center; }
  .pricing-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .pricing-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .pricing-sub { font-size: 16px; color: var(--text-2); font-weight: 300; line-height: 1.6; }
  .pricing-sub strong { color: var(--menta); font-weight: 500; }

  /* ----- Comparativo 3 modelos (substitui pricing-grid) ----- */
  .compare-models {
    max-width: 1100px; margin: 30px auto 0;
    display: grid; grid-template-columns: 200px 1fr 1fr 1.1fr;
    gap: 0;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
  }
  /* Glow ambient atrás da coluna Zulti — usa o tamanho real da coluna via right + width matching */
  .compare-models::before {
    content: ""; position: absolute;
    top: -20px; bottom: -20px; right: 0;
    width: calc((100% - 200px) / 3.1 * 1.1);
    background: radial-gradient(ellipse 90% 60% at center, rgba(126,229,221,0.18) 0%, rgba(126,229,221,0.06) 50%, transparent 80%);
    pointer-events: none;
    filter: blur(20px);
    z-index: 0;
    border-radius: 16px;
  }
  .compare-cell {
    padding: 22px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.04);
    font-size: 13.5px; color: var(--text-2);
    font-weight: 300; line-height: 1.55;
    display: flex; align-items: center;
    position: relative;
    z-index: 1;
  }
  /* última cell de cada row (4 cells × 8 rows = 32 cells; última de cada row = nth col 4) */
  .compare-cell:nth-child(4n) { border-right: none; }
  .compare-cell:nth-last-child(-n+4) { border-bottom: none; }
  /* Coluna 1 — labels das dimensões */
  .compare-dim {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px; color: var(--menta);
    letter-spacing: 0.10em; text-transform: uppercase;
    background: rgba(126,229,221,0.04);
    border-right: 1px solid rgba(126,229,221,0.12);
  }
  /* Linha de cabeçalho — fundo único pra fileira inteira, sem gaps visuais */
  .compare-head {
    padding: 26px 22px;
    border-bottom: 1px solid rgba(126,229,221,0.18);
    background: rgba(255,255,255,0.05);
    display: flex; flex-direction: column; gap: 6px;
    align-items: flex-start; justify-content: flex-end;
    min-height: 140px;
  }
  /* Primeira cell (vazia) também é compare-head — manter background da fileira */
  .compare-cell.compare-head:first-child {
    background: rgba(255,255,255,0.05);
  }
  /* Coluna DIM (1ª col, label) — mesmo tom do header pra dar identidade de "coluna lateral" */
  .compare-dim {
    background: rgba(255,255,255,0.025);
  }
  .compare-head-title {
    font-family: 'Lexend', sans-serif;
    font-size: 16.5px; font-weight: 500;
    color: var(--text-1);
    letter-spacing: -0.01em;
    line-height: 1.2;
  }
  .compare-head-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; color: var(--text-3);
    letter-spacing: 0.10em; text-transform: uppercase;
  }
  /* Primeiro sub do header (label do tipo "caminho usual") fica como pílula sutil */
  .compare-head > .compare-head-sub:first-child {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    margin-bottom: 2px;
  }
  /* Mas nas colunas especiais, a tag colorida (cuidado/A Zulti) já cumpre essa função — neutralizar o primeiro sub se necessário */
  .compare-col-embedded.compare-head > .compare-head-sub:first-child,
  .compare-col-zulti.compare-head > .compare-head-sub:first-child {
    display: inline; padding: 0; background: transparent; border: none; margin: 0;
  }
  /* Coluna destacada (Fracionado/Zulti) — destaque com glow + bordas saturadas + header maior */
  .compare-col-zulti {
    background: rgba(126,229,221,0.14);
    position: relative;
    border-right: none !important;
    box-shadow:
      inset 1px 0 0 rgba(126,229,221,0.50),
      inset -1px 0 0 rgba(126,229,221,0.50);
  }
  .compare-col-zulti.compare-head {
    background: linear-gradient(180deg, rgba(126,229,221,0.28) 0%, rgba(126,229,221,0.16) 100%);
    border-bottom: 1px solid rgba(126,229,221,0.55);
    box-shadow:
      inset 1px 0 0 rgba(126,229,221,0.55),
      inset -1px 0 0 rgba(126,229,221,0.55);
    padding-top: 30px;
    padding-bottom: 30px;
    min-height: 140px;
  }
  .compare-col-zulti.compare-head .compare-head-title {
    color: var(--menta);
    font-size: 17.5px;
    text-shadow: 0 0 24px rgba(126,229,221,0.35);
  }
  /* Barra menta no topo do header Zulti (acento) */
  .compare-col-zulti.compare-head::after {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80px; height: 3px;
    background: var(--menta);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 14px rgba(126,229,221,0.65);
  }
  .compare-col-zulti .compare-tag {
    display: inline-block; padding: 4px 11px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--menta); color: var(--azulescuro);
    border-radius: 999px;
    margin-bottom: 4px;
    box-shadow: 0 4px 14px rgba(126,229,221,0.45);
  }
  /* última cell da coluna Zulti — adicionar borda inferior menta pra fechar a coluna */
  .compare-models .compare-cell.compare-col-zulti:last-child {
    box-shadow:
      inset 1px 0 0 rgba(126,229,221,0.50),
      inset -1px 0 0 rgba(126,229,221,0.50),
      inset 0 -1px 0 rgba(126,229,221,0.50);
  }

  /* (CSS .compare-col-embedded removido — modelo CISO embutido não é mais concorrente articulado) */

  /* ═══════════════════════════════════════════════════════════════════
     HEAT MAP BINÁRIO — Status Quo × CISO Zulti
     Matriz N áreas ISO/LGPD × 2 modelos. Cells com barra de cobertura
     colorida. Status quo = âmbar (warning, variável). Zulti = menta.
     ═══════════════════════════════════════════════════════════════════ */
  .compare-radar-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    align-items: start;
    max-width: 1180px;
    margin: 30px auto 0;
  }
  @media (max-width: 980px) {
    .compare-radar-layout {
      grid-template-columns: 1fr;
      gap: 28px;
    }
  }
  /* Mantemos o nome .compare-radar-wrap pra não quebrar o JS Motion.dev,
     mas agora o conteúdo é um heatmap binário CSS. */
  .compare-radar-wrap {
    position: relative;
    min-width: 0;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 24px 20px 18px;
  }

  .nist-heatmap {
    display: grid;
    grid-template-columns: 180px repeat(2, 1fr);
    gap: 0;
    width: 100%;
  }

  /* Headers das 2 colunas de modelos (topo do heatmap) */
  .heatmap-header-row {
    display: contents;
  }
  .heatmap-corner {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--text-3);
    letter-spacing: 0.10em; text-transform: uppercase;
    padding: 0 8px 14px;
    display: flex; align-items: flex-end;
  }
  .heatmap-model {
    text-align: center;
    padding: 8px 10px 14px;
    border-bottom: 1px dashed rgba(255,255,255,0.10);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
    border-radius: 8px 8px 0 0;
  }
  .heatmap-model:hover { background: rgba(255,255,255,0.04); }
  .heatmap-model-tag {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
  }
  .heatmap-model-name {
    font-family: 'Lexend', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--text-1);
    line-height: 1.25;
    letter-spacing: -0.005em;
  }
  .heatmap-model[data-model="status-quo"] .heatmap-model-tag { color: #FFC857; }
  .heatmap-model[data-model="zulti"]      .heatmap-model-tag { color: var(--menta); }
  .heatmap-model[data-model="zulti"]      .heatmap-model-name { color: var(--menta); }
  .heatmap-model[data-model="status-quo"] {
    background: rgba(255,200,87,0.04);
    border-bottom-color: rgba(255,200,87,0.25);
  }
  .heatmap-model[data-model="zulti"] {
    background: rgba(126,229,221,0.06);
    border-bottom-color: rgba(126,229,221,0.32);
  }

  /* Linhas: uma por área ISO/LGPD */
  .heatmap-row {
    display: contents;
  }
  .heatmap-fn {
    padding: 14px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; gap: 2px;
  }
  .heatmap-fn-code {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px; font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--menta);
    text-transform: uppercase;
  }
  /* Cor por área ISO/LGPD (paleta sóbria — núcleo menta + sotaques) */
  .heatmap-row[data-area="SGSI"] .heatmap-fn-code { color: var(--menta); }
  .heatmap-row[data-area="ACL"]  .heatmap-fn-code { color: #8E8DFF; }
  .heatmap-row[data-area="OPS"]  .heatmap-fn-code { color: var(--menta); }
  .heatmap-row[data-area="IRC"]  .heatmap-fn-code { color: #FF8E8E; }
  .heatmap-row[data-area="FOR"]  .heatmap-fn-code { color: #FFC857; }
  .heatmap-row[data-area="LGPD"] .heatmap-fn-code { color: #B5B0E8; }
  .heatmap-fn-name {
    font-family: 'Lexend', sans-serif;
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1.25;
  }

  /* Células do heatmap (uma por modelo × área) */
  .heatmap-cell {
    padding: 14px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease;
  }
  .heatmap-cell:hover { background: rgba(255,255,255,0.03); }
  .heatmap-cell[data-model="status-quo"] {
    background: rgba(255,200,87,0.015);
  }
  .heatmap-cell[data-model="status-quo"]:hover {
    background: rgba(255,200,87,0.05);
  }
  .heatmap-cell[data-model="zulti"] {
    background: rgba(126,229,221,0.025);
  }
  .heatmap-cell[data-model="zulti"]:hover {
    background: rgba(126,229,221,0.07);
  }

  /* Barra de cobertura: 3 segmentos */
  .heatmap-bar {
    display: flex; gap: 3px;
    align-items: center;
  }
  .heatmap-bar-seg {
    width: 18px; height: 8px;
    border-radius: 2px;
    background: rgba(255,255,255,0.06);
    transition: background 0.25s ease, box-shadow 0.25s ease;
  }
  /* Cores por modelo */
  .heatmap-cell[data-model="status-quo"] .heatmap-bar-seg.on { background: #FFC857; }
  .heatmap-cell[data-model="zulti"]      .heatmap-bar-seg.on { background: var(--menta); box-shadow: 0 0 6px rgba(126,229,221,0.45); }

  /* Hover sync: quando um modelo está focado (via tab ou hover), o outro atenua */
  .compare-radar-wrap.has-focus .heatmap-cell:not(.focused) .heatmap-bar-seg.on { opacity: 0.22; }
  .compare-radar-wrap.has-focus .heatmap-cell:not(.focused) { opacity: 0.55; }
  .compare-radar-wrap.has-focus .heatmap-cell.focused .heatmap-bar-seg.on { opacity: 1; }
  .compare-radar-wrap.has-focus .heatmap-model:not(.focused) { opacity: 0.55; }
  .heatmap-model[data-model="status-quo"].focused { background: rgba(255,200,87,0.10) !important; }
  .heatmap-model[data-model="zulti"].focused      { background: rgba(126,229,221,0.14) !important; }
  .compare-radar-wrap.has-focus .heatmap-footnotes .footnote:not(.focused) { opacity: 0.45; }
  .compare-radar-wrap.has-focus .heatmap-footnotes .footnote.focused { opacity: 1; }
  .heatmap-cell, .heatmap-model, .heatmap-footnotes .footnote {
    transition: opacity 0.25s ease, background 0.25s ease;
  }

  /* Footnotes: o "porém" / "ganho" de cada modelo */
  .heatmap-footnotes {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,0.10);
    display: grid;
    grid-template-columns: 180px repeat(2, 1fr);
    gap: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--text-3);
    letter-spacing: 0.02em;
  }
  .heatmap-footnotes .footnote {
    text-align: center;
    padding: 0 10px;
    line-height: 1.4;
  }
  .heatmap-footnotes .footnote strong {
    display: block;
    color: var(--text-2);
    font-weight: 500;
    margin-bottom: 2px;
    font-size: 10.5px;
    letter-spacing: 0.04em;
  }
  .heatmap-footnotes .footnote[data-model="status-quo"] strong { color: #FFC857; }
  .heatmap-footnotes .footnote[data-model="zulti"]      strong { color: var(--menta); }

  @media (max-width: 720px) {
    .nist-heatmap { grid-template-columns: 110px repeat(2, 1fr); }
    .heatmap-bar-seg { width: 14px; height: 7px; }
    .heatmap-fn-name { font-size: 11px; }
    .heatmap-model-name { font-size: 12px; }
    .heatmap-footnotes { grid-template-columns: 110px repeat(2, 1fr); font-size: 9px; }
  }

  /* ============ ABAS DOS MODELOS (substitui .compare-note) ============ */
  .compare-tabs-wrap {
    display: flex; flex-direction: column;
    gap: 16px;
  }
  .compare-tabs {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 4px;
  }
  .compare-tab {
    appearance: none;
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    padding: 12px 14px;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    font-family: 'Lexend', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }
  .compare-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
  .compare-tab.active { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.14); color: var(--text-1); }
  .compare-tab[data-model="zulti"].active {
    background: rgba(126,229,221,0.16);
    border-color: rgba(126,229,221,0.50);
    color: var(--menta);
  }
  .compare-tab[data-model="status-quo"].active {
    background: rgba(255,200,87,0.12);
    border-color: rgba(255,200,87,0.40);
    color: #FFD580;
  }

  .tab-color {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1.5px solid;
    flex-shrink: 0;
  }
  .tab-color-status-quo { background: rgba(255,200,87,0.30); border-color: rgba(255,200,87,0.70); }
  .tab-color-zulti      { background: rgba(126,229,221,0.40); border-color: var(--menta); }

  .tab-label {
    flex: 1; min-width: 0;
  }
  .tab-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px; font-weight: 600;
    letter-spacing: 0.10em; text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 999px;
    flex-shrink: 0;
    line-height: 1.5;
  }
  .tab-tag.tag-warn {
    background: rgba(255,200,87,0.18); color: #FFC857;
    border: 1px solid rgba(255,200,87,0.30);
  }
  .tab-tag.tag-zulti { background: var(--menta); color: var(--azulescuro); }

  .compare-tab-panel {
    display: none;
    padding: 22px 24px;
    background: rgba(126,229,221,0.06);
    border: 1px dashed rgba(126,229,221,0.28);
    border-radius: 12px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-2);
    font-weight: 300;
  }
  .compare-tab-panel.active {
    display: block;
    animation: tab-fade-in 0.35s ease-out;
  }
  .compare-tab-panel p { margin: 0; }
  .compare-tab-panel strong { color: var(--text-1); font-weight: 500; }
  .compare-tab-panel[data-model="zulti"]      strong { color: var(--menta); }
  .compare-tab-panel[data-model="status-quo"] strong { color: #FFD580; }

  /* Variante de cor pro status quo */
  .compare-tab-panel[data-model="status-quo"] {
    background: rgba(255,200,87,0.06);
    border-color: rgba(255,200,87,0.32);
  }

  @keyframes tab-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* CSS herdado pra compare-note (mantém compatibilidade, caso ainda usado) */
  .compare-note {
    max-width: 100%; margin: 0;
    padding: 24px 26px;
    background: rgba(126,229,221,0.06); border: 1px dashed rgba(126,229,221,0.28);
    border-radius: 12px;
    font-size: 14.5px; color: var(--text-2); font-weight: 300; line-height: 1.65;
    text-align: left;
  }
  .compare-note strong { color: var(--menta); font-weight: 500; }

  @media (max-width: 940px) {
    .compare-models {
      grid-template-columns: 1fr;
      gap: 12px;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    .compare-cell, .compare-head {
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
    }
    .compare-dim {
      background: rgba(126,229,221,0.06);
      border: 1px solid rgba(126,229,221,0.18);
      font-weight: 600;
    }
    .compare-col-zulti { border-color: var(--menta); }
    .compare-col-zulti.compare-head::after { display: none; }
    .compare-col-embedded { border-color: rgba(255, 200, 87, 0.45); }
  }

  .pricing-note {
    max-width: 980px; margin: 32px auto 0;
    padding: 18px 22px;
    background: rgba(126,229,221,0.06); border: 1px dashed rgba(126,229,221,0.28);
    border-radius: 10px;
    font-size: 14px; color: var(--text-2); font-weight: 300; line-height: 1.55;
    text-align: center;
  }
  .pricing-note strong { color: var(--menta); font-weight: 500; }

  /* ─── Modalidades comerciais S&C (2 cards) ─── */
  .deal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .deal-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
  }
  .deal-card-1 { border-color: rgba(56,232,189,.18); }
  .deal-card-2 { border-color: rgba(167,139,250,.22); }
  .deal-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
  }
  .deal-card-1::before { background: linear-gradient(90deg, var(--menta), rgba(56,232,189,.18)); }
  .deal-card-2::before { background: linear-gradient(90deg, #a78bfa, rgba(167,139,250,.18)); }
  .deal-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 20px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .deal-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .deal-card-1 .deal-num { color: var(--menta); }
  .deal-card-2 .deal-num { color: #a78bfa; }
  .deal-name {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-1);
    margin: 6px 0 0;
    line-height: 1.15;
  }
  .deal-tag {
    font-size: 14px;
    color: var(--text-2);
    font-weight: 300;
    margin: 2px 0 0;
  }
  .deal-badge {
    position: absolute;
    top: 0;
    right: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #1F0E48;
    background: #a78bfa;
    padding: 4px 10px;
    border-radius: 999px;
    font-weight: 600;
  }
  .deal-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .deal-meta-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .deal-meta-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .deal-meta-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
  }
  .deal-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
  }
  .deal-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .deal-section-h {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .deal-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .deal-list li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
    font-weight: 300;
  }
  .deal-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 10px;
    width: 9px; height: 1px;
    opacity: .85;
  }
  .deal-card-1 .deal-list li::before { background: var(--menta); }
  .deal-card-2 .deal-list li::before { background: #a78bfa; }
  .deal-when {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    font-weight: 300;
    margin: 0;
  }
  .deal-when strong { color: var(--text-1); font-weight: 500; }

  /* Tese de antecipação */
  .deal-note {
    margin: 44px auto 0;
    max-width: 920px;
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 18px;
    align-items: start;
    padding: 22px 26px;
    background: linear-gradient(135deg, rgba(251,146,60,.06), rgba(255,255,255,.02));
    border: 1px solid rgba(251,146,60,.18);
    border-radius: 12px;
  }
  .deal-note-icon {
    width: 40px; height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(251,146,60,.12);
    color: #fb923c;
  }
  .deal-note-icon svg { width: 22px; height: 22px; }
  .deal-note-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-2);
    font-weight: 300;
    margin: 0;
  }
  .deal-note-text strong { color: #fb923c; font-weight: 500; }
  .deal-note-text em { color: var(--text-1); font-style: normal; font-weight: 500; }

  /* ─── Strip: estruturação ≠ execução (independência comercial) ─── */
  .deal-exec {
    margin: 48px auto 0;
    max-width: 1080px;
    padding: 32px 32px 30px;
    background: linear-gradient(180deg, rgba(181,176,232,.05), rgba(255,255,255,.015));
    border: 1px solid rgba(181,176,232,.20);
    border-radius: 16px;
    position: relative;
  }
  .deal-exec::before {
    content: '';
    position: absolute;
    top: 0; left: 24px; right: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(181,176,232,.5), transparent);
  }
  .deal-exec-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 26px;
  }
  .deal-exec-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #b5b0e8;
    display: inline-block;
    margin-bottom: 12px;
  }
  .deal-exec-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-1);
    margin: 0 0 12px;
    line-height: 1.2;
  }
  .deal-exec-title .grad {
    background: linear-gradient(90deg, #b5b0e8 0%, var(--menta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .deal-exec-sub {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-2);
    font-weight: 300;
    margin: 0;
  }
  .deal-exec-sub strong { color: var(--text-1); font-weight: 500; }
  .deal-exec-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .deal-exec-card {
    padding: 18px 18px 16px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .deal-exec-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #b5b0e8;
  }
  .deal-exec-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1);
    margin: 0;
    letter-spacing: -.005em;
  }
  .deal-exec-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-2);
    font-weight: 300;
    margin: 0;
  }
  .deal-exec-desc strong { color: var(--text-1); font-weight: 500; }

  @media (max-width: 860px) {
    .deal-exec { padding: 26px 22px 24px; margin-top: 36px; }
    .deal-exec-grid { grid-template-columns: 1fr; gap: 12px; }
    .deal-exec-title { font-size: 20px; }
  }

  /* ─── Project Card (Hero Outsourcing) ─── */
  .project-card {
    background: linear-gradient(180deg, rgba(56,232,189,.06) 0%, rgba(31,14,72,.6) 100%);
    border: 1px solid rgba(56,232,189,.18);
    border-radius: 14px;
    padding: 18px 20px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    position: relative;
    overflow: hidden;
  }
  .project-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--menta), #a78bfa);
    opacity: .75;
  }
  .project-card-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    margin-bottom: 14px;
  }
  .project-card-tag {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--menta); background: rgba(56,232,189,.10);
    padding: 3px 8px; border-radius: 4px;
  }
  .project-card-title {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 13px; font-weight: 500; color: var(--text-1);
    flex: 1; letter-spacing: -.005em;
  }
  .project-card-status {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--menta);
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 9px 3px 6px;
    border-radius: 999px;
    background: rgba(126,229,221, 0.06);
    border: 1px solid rgba(126,229,221, 0.18);
    animation: project-badge-glow 3.2s ease-in-out infinite;
  }
  @keyframes project-badge-glow {
    0%, 100% { background: rgba(126,229,221, 0.06); border-color: rgba(126,229,221, 0.18); }
    50%      { background: rgba(126,229,221, 0.14); border-color: rgba(126,229,221, 0.35); }
  }
  .project-card-check {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--menta); color: var(--azulescuro);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800; line-height: 1;
    box-shadow: 0 0 0 0 rgba(126,229,221, 0.5);
    animation: project-check-pulse 3.2s ease-in-out infinite;
  }
  @keyframes project-check-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(126,229,221, 0.55), 0 0 4px rgba(126,229,221, 0.35); }
    50%      { box-shadow: 0 0 0 7px rgba(126,229,221, 0), 0 0 14px rgba(126,229,221, 0.7); }
  }
  .project-card-meta {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .project-card-meta-item { display: flex; flex-direction: column; gap: 3px; }
  .project-card-meta-lbl {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3);
  }
  .project-card-meta-val {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 12px; color: var(--text-1); font-weight: 400;
  }
  .project-card-meta-val.accent { color: var(--menta); font-weight: 500; }
  .project-card-section {
    margin-bottom: 14px;
  }
  .project-card-section-h {
    display: block;
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 8px;
  }
  .project-card-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
  }
  .project-card-list li {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 11px;
    color: var(--text-2);
    font-weight: 300;
    line-height: 1.4;
    padding-left: 14px;
    position: relative;
  }
  .project-card-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 7px;
    width: 7px; height: 1px;
    background: var(--menta);
    opacity: .8;
  }
  .project-card-section-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.08);
  }
  .project-card-kv {
    display: flex; flex-direction: column; gap: 2px;
  }
  .project-card-kv-lbl {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3);
  }
  .project-card-kv-val {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 12px; color: var(--text-1); font-weight: 500;
  }
  .project-card-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 12px; margin-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.08);
    font-size: 10px; letter-spacing: .04em; color: var(--text-3);
  }
  .project-card-foot strong { color: var(--text-1); font-weight: 500; }
  .project-card-foot-sep { color: var(--text-4); }

  @media (max-width: 900px) {
    .project-card-meta { grid-template-columns: 1fr; gap: 10px; }
    .project-card-section-grid { grid-template-columns: 1fr; gap: 10px; }
  }

  /* ─── 4 Tipos de projeto pontual (grid 2x2) ─── */
  .types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .type-card {
    background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    border: 1px solid rgba(56,232,189,.16);
    border-radius: 14px;
    padding: 28px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
  }
  .type-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--menta), rgba(56,232,189,.2));
    opacity: .8;
  }
  .type-card-num {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--menta);
  }
  .type-card h3 {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--text-1);
    margin: 0;
    line-height: 1.2;
  }
  .type-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-2);
    font-weight: 300;
    margin: 0;
  }
  .type-card-desc strong { color: var(--text-1); font-weight: 500; }
  .type-card-examples {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,.08);
  }
  .type-card-example-h {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 4px;
  }
  .type-card-example {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-2);
    font-weight: 300;
    padding-left: 16px;
    position: relative;
  }
  .type-card-example::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 8px; height: 1px;
    background: var(--menta);
    opacity: .7;
  }
  @media (max-width: 880px) {
    .types-grid { grid-template-columns: 1fr; gap: 18px; }
    .type-card { padding: 22px 20px; }
    .type-card h3 { font-size: 18px; }
  }

  /* ─── Skills Matrix Console (Outsourcing — legado órfão, pra polish) ─── */
  .skills-console {
    background: linear-gradient(180deg, rgba(56,232,189,.06) 0%, rgba(31,14,72,.6) 100%);
    border: 1px solid rgba(56,232,189,.18);
    border-radius: 14px;
    padding: 18px 20px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    position: relative;
    overflow: hidden;
  }
  .skills-console::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--menta), #a78bfa);
    opacity: .75;
  }
  .skills-head {
    display: flex; align-items: center; gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    margin-bottom: 14px;
  }
  .skills-head-tag {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--menta); background: rgba(56,232,189,.10);
    padding: 3px 8px; border-radius: 4px;
  }
  .skills-head-title {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 13px; font-weight: 500; color: var(--text-1);
    flex: 1; letter-spacing: -.005em;
  }
  .skills-head-status {
    font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--menta);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .skills-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--menta);
    box-shadow: 0 0 6px var(--menta);
    animation: skills-pulse 2s ease-in-out infinite;
  }
  @keyframes skills-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }
  .skills-meta {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .skills-meta-item { display: flex; flex-direction: column; gap: 3px; }
  .skills-meta-lbl {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3);
  }
  .skills-meta-val {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 12px; color: var(--text-1); font-weight: 400;
  }
  .skills-meta-val.accent { color: var(--menta); font-weight: 500; }
  .skills-table { display: flex; flex-direction: column; gap: 0; }
  .skills-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    align-items: center;
    font-size: 10.5px; color: var(--text-2);
  }
  .skills-row:last-child { border-bottom: none; }
  .skills-row-head {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding-bottom: 7px;
  }
  .skills-col-role {
    font-family: 'Lexend', system-ui, sans-serif;
    color: var(--text-1); font-weight: 400; font-size: 11px;
  }
  .skills-row-head .skills-col-role,
  .skills-row-head .skills-col-cell {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--text-3); font-weight: 400; font-size: 9px;
  }
  .skills-cell {
    font-size: 9.5px; padding: 2px 7px; border-radius: 3px;
    letter-spacing: .02em; display: inline-block;
  }
  .skills-cell-ok { background: rgba(56,232,189,.10); color: var(--menta); }
  .skills-cell-busy { background: rgba(167,139,250,.12); color: #a78bfa; }
  .skills-cell-soon { background: rgba(251,146,60,.10); color: #fb923c; }
  .skills-foot {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding-top: 12px; margin-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.08);
    font-size: 10px; letter-spacing: .04em; color: var(--text-3);
  }
  .skills-foot strong { color: var(--text-1); font-weight: 500; }
  .skills-foot-sep { color: var(--text-4); }
  @media (max-width: 900px) {
    .skills-meta { grid-template-columns: 1fr; gap: 10px; }
    .skills-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 4px; }
    .skills-row-head { display: none; }
    .skills-col-role { font-weight: 500; font-size: 12px; }
    .skills-col-cell { font-size: 10px; }
  }

  /* ─── ROPA Console (legado órfão pra polish final) ─── */
  .ropa-console {
    background: linear-gradient(180deg, rgba(167,139,250,.07) 0%, rgba(31,14,72,.6) 100%);
    border: 1px solid rgba(167,139,250,.18);
    border-radius: 14px;
    padding: 18px 20px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    position: relative;
    overflow: hidden;
  }
  .ropa-console::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, #a78bfa, var(--menta));
    opacity: .7;
  }
  .ropa-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
    margin-bottom: 14px;
  }
  .ropa-head-tag {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a78bfa;
    background: rgba(167,139,250,.10);
    padding: 3px 8px;
    border-radius: 4px;
  }
  .ropa-head-title {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-1);
    flex: 1;
    letter-spacing: -.005em;
  }
  .ropa-head-status {
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--menta);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .ropa-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--menta);
    box-shadow: 0 0 6px var(--menta);
    animation: ropa-pulse 2s ease-in-out infinite;
  }
  @keyframes ropa-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
  }
  .ropa-meta {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.08);
  }
  .ropa-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .ropa-meta-lbl {
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .ropa-meta-val {
    font-family: 'Lexend', system-ui, sans-serif;
    font-size: 12px;
    color: var(--text-1);
    font-weight: 400;
  }
  .ropa-meta-val.accent { color: #a78bfa; font-weight: 500; }
  .ropa-table {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .ropa-row {
    display: grid;
    grid-template-columns: 1.4fr 1.5fr 0.8fr 1fr 0.9fr;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid rgba(255,255,255,.04);
    align-items: center;
    font-size: 10.5px;
    color: var(--text-2);
  }
  .ropa-row:last-child { border-bottom: none; }
  .ropa-row-head {
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3);
    border-bottom: 1px solid rgba(255,255,255,.10);
    padding-bottom: 7px;
  }
  .ropa-row[data-state="ripd"] {
    background: rgba(251,146,60,.04);
  }
  .ropa-row[data-state="review"] {
    background: rgba(126,229,221,.03);
  }
  .ropa-col-trat {
    font-family: 'Lexend', system-ui, sans-serif;
    color: var(--text-1);
    font-weight: 400;
    font-size: 11px;
  }
  .ropa-row-head .ropa-col-trat { font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--text-3); font-weight: 400; font-size: 9px; }
  .ropa-pill {
    display: inline-block;
    font-size: 9.5px;
    padding: 2px 7px;
    border-radius: 3px;
    letter-spacing: .02em;
    line-height: 1.3;
  }
  .ropa-pill-consent { background: rgba(56,232,189,.10); color: var(--menta); }
  .ropa-pill-contrato { background: rgba(99,179,237,.12); color: #63b3ed; }
  .ropa-pill-legal { background: rgba(251,146,60,.12); color: #fb923c; }
  .ropa-pill-legitimo { background: rgba(167,139,250,.14); color: #a78bfa; }
  .ropa-pill-procesual { background: rgba(255,142,142,.12); color: #ff8e8e; }
  .ropa-status {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9.5px;
    letter-spacing: .04em;
  }
  .ropa-status-ok { color: var(--menta); }
  .ropa-status-ripd { color: #fb923c; }
  .ropa-status-review { color: var(--text-3); }
  .ropa-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px dashed rgba(255,255,255,.08);
    font-size: 10px;
    letter-spacing: .04em;
    color: var(--text-3);
  }
  .ropa-foot strong {
    color: var(--text-1);
    font-weight: 500;
  }
  .ropa-foot-sep { color: var(--text-4); }

  @media (max-width: 900px) {
    .ropa-meta { grid-template-columns: 1fr; gap: 10px; }
    .ropa-row { grid-template-columns: 1fr; gap: 4px; padding: 12px 4px; }
    .ropa-row-head { display: none; }
    .ropa-col-trat { font-weight: 500; font-size: 12px; }
    .ropa-col-base, .ropa-col-tit, .ropa-col-ret, .ropa-col-status {
      font-size: 10px;
    }
  }

  /* ─── DPO EXIN Strip (abaixo do hero) ─── */
  .dpo-strip {
    background: linear-gradient(180deg, var(--azulescuro) 0%, rgba(31,14,72,0.7) 100%);
    padding: 22px 0;
    position: relative;
  }
  .dpo-strip-inner {
    display: grid;
    grid-template-columns: auto auto auto auto 1fr;
    align-items: center;
    gap: 18px;
    max-width: 1080px;
    margin: 0 auto;
  }
  .dpo-strip-badge {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .dpo-strip-mark {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(56,232,189,.10));
    display: grid;
    place-items: center;
    color: #a78bfa;
    flex-shrink: 0;
  }
  .dpo-strip-mark svg { width: 20px; height: 20px; }
  .dpo-strip-cred {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .dpo-strip-cred-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
    color: var(--text-1);
    letter-spacing: .02em;
    font-weight: 500;
  }
  .dpo-strip-cred-sub {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 300;
  }
  .dpo-strip-divider {
    width: 1px;
    height: 30px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.12), transparent);
  }
  .dpo-strip-tag {
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.5;
    margin: 0;
    font-weight: 300;
    text-align: right;
  }
  .dpo-strip-tag strong { color: #a78bfa; font-weight: 500; }

  @media (max-width: 980px) {
    .dpo-strip-inner {
      grid-template-columns: 1fr;
      gap: 14px;
      padding: 4px 0;
    }
    .dpo-strip-divider { display: none; }
    .dpo-strip-tag { text-align: left; }
  }

  /* ─── Featured case (Álamo) ─── */
  .case-section {
    background: var(--azulescuro);
    padding: 110px 0;
    position: relative; overflow: hidden;
  }
  .case-section::before {
    content: ""; position: absolute; top: -10%; right: -8%;
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(62,60,249,0.20), transparent 65%);
    pointer-events: none;
  }
  .case-head {
    max-width: 760px; margin: 0 auto 56px; text-align: center;
    position: relative; z-index: 1;
  }
  .case-head h2 {
    font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08;
    letter-spacing: -0.02em; font-weight: 600; margin-bottom: 16px;
  }
  .case-head h2 .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .case-head p { font-size: 16px; color: var(--text-2); font-weight: 300; line-height: 1.6; }
  .featured-case {
    background: linear-gradient(180deg, #1F0A4A 0%, var(--azulescuro) 100%);
    border: 1px solid var(--border-2);
    border-radius: 16px; padding: 40px 44px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
    position: relative; overflow: hidden;
    color: var(--text-1);
  }
  .featured-case h3 { color: var(--text-1); }
  @media (max-width: 880px) { .featured-case { grid-template-columns: 1fr; gap: 32px; padding: 28px 24px; } }
  .featured-case::before {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(126,229,221,0.18), transparent 70%);
    pointer-events: none;
  }
  .featured-case-left { position: relative; z-index: 1; }
  .featured-case-tag {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--menta); letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 18px;
  }
  .featured-case-tag::before { content: ""; width: 18px; height: 1px; background: var(--menta); }
  .featured-case h3 {
    font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2;
    letter-spacing: -0.02em; font-weight: 500; margin-bottom: 14px;
  }
  .featured-case h3 .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    font-weight: 600;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .featured-case p {
    font-size: 15px; line-height: 1.6; color: var(--text-2); font-weight: 300; margin-bottom: 22px;
  }
  .featured-case-right {
    position: relative; z-index: 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
  }
  .cv-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
  }
  .cv-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    color: var(--text-4); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .cv-status {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--menta); padding: 4px 10px;
    background: rgba(126,229,221,0.12); border-radius: 4px;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .cv-status::before {
    content: ""; width: 6px; height: 6px; background: var(--menta);
    border-radius: 50%; box-shadow: 0 0 6px var(--menta);
  }
  .cv-categories {
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 16px;
  }
  .cv-cat {
    display: grid; grid-template-columns: 110px 1fr 42px;
    gap: 12px; align-items: center;
  }
  .cv-cat-name {
    font-size: 12px; color: var(--text-2); font-weight: 400;
  }
  .cv-cat-track {
    height: 5px; background: rgba(255,255,255,0.06);
    border-radius: 3px; overflow: hidden; position: relative;
  }
  .cv-cat-fill {
    height: 100%; background: var(--gradiente); border-radius: 3px;
  }
  .cv-cat-pct {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--menta); text-align: right;
  }
  .cv-total {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 14px; border-top: 1px solid var(--border);
  }
  .cv-total-label {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-3); letter-spacing: 0.06em; text-transform: uppercase;
  }
  .cv-total-value {
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
    line-height: 1;
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  @media (max-width: 720px) {
    .case-section { padding: 64px 0; }
    .featured-case { padding: 24px 20px; gap: 24px; }
    .featured-case h3 { font-size: 18px; }
  }

  @media (max-width: 860px) {
    .deal-grid { grid-template-columns: 1fr; gap: 20px; }
    .deal-meta { grid-template-columns: 1fr 1fr; }
    .deal-note { grid-template-columns: 1fr; margin-top: 32px; }
    .deal-card { padding: 28px 22px 24px; }
    .deal-name { font-size: 22px; }
  }

  /* ─── O QUE NÃO ESTÁ AQUI · OUTRAS DISCIPLINAS ─── */
  .outras-disc {
    background: var(--papel); color: var(--grafite); padding: 100px 0 110px;
    position: relative;
  }
  /* Dot pattern sutil pra diferenciar de .analysis (que é claro também) */
  .outras-disc::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle at 1px 1px, rgba(62,60,249,0.06) 1px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 80% at center, black 30%, transparent 90%);
            mask-image: radial-gradient(ellipse 70% 80% at center, black 30%, transparent 90%);
    pointer-events: none;
  }
  /* Separador superior em gradient menta→azul */
  .outras-disc::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(62,60,249,0.30) 30%, rgba(126,229,221,0.40) 70%, transparent);
    pointer-events: none;
  }
  .outras-disc > .container { position: relative; z-index: 1; }
  .outras-head { max-width: 800px; margin: 0 auto 48px; text-align: center; }
  .outras-title {
    font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 16px;
  }
  .outras-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .outras-sub { font-size: 16px; color: var(--cinza); font-weight: 300; line-height: 1.6; }

  .outras-links {
    max-width: 800px; margin: 0 auto;
    display: flex; flex-direction: column; gap: 4px;
  }
  .outras-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px; border-radius: 10px;
    text-decoration: none; color: var(--grafite);
    background: var(--papel-2); border: 1px solid var(--border-light);
    transition: border-color 0.2s, transform 0.2s;
    gap: 14px;
  }
  .outras-link:hover {
    border-color: rgba(126,229,221,0.35);
    transform: translateX(4px);
  }
  .outras-link-content { display: flex; flex-direction: column; gap: 3px; }
  .outras-link .label { font-size: 16px; font-weight: 500; color: var(--grafite); line-height: 1.3; }
  .outras-link .sub  { font-size: 13px; color: var(--cinza); font-weight: 300; line-height: 1.5; }
  .outras-link .arr {
    color: var(--cinza-2); font-family: 'JetBrains Mono', monospace;
    font-size: 16px; transition: color 0.18s, transform 0.18s;
    flex-shrink: 0;
  }
  .outras-link:hover .arr { color: #0F6C66; transform: translateX(4px); }

  /* ─────────────────────────── QUEM ESTÁ DO OUTRO LADO (team) ─────────────────────────── */
  .team {
    background: linear-gradient(180deg, var(--azulescuro) 0%, #1A0A45 100%);
    color: var(--text-1);
    padding: 100px 0; position: relative; overflow: hidden;
  }
  .team::before {
    content: ""; position: absolute; top: -100px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(126,229,221,0.12), transparent 60%);
    pointer-events: none;
  }
  .team::after {
    content: ""; position: absolute; bottom: -120px; left: -120px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(62,60,249,0.10), transparent 60%);
    pointer-events: none;
  }
  .team-head { max-width: 780px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .team-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .team-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .team-sub { font-size: 16px; line-height: 1.55; color: var(--text-2); font-weight: 300; max-width: 680px; margin: 0 auto; }

  .team-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
    position: relative; z-index: 1; max-width: 980px; margin: 0 auto;
  }
  @media (max-width: 720px) { .team-grid { grid-template-columns: 1fr; } }

  .team-card {
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px 26px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
    position: relative; overflow: hidden;
  }
  .team-card:hover {
    border-color: rgba(126,229,221,0.30);
    background: rgba(255,255,255,0.035);
    transform: translateY(-3px);
  }
  .team-card .team-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--menta);
    letter-spacing: 0.10em; text-transform: uppercase;
  }
  .team-card h3 {
    font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-1);
    line-height: 1.2;
  }
  .team-card p {
    font-size: 14.5px; line-height: 1.6; color: var(--text-2); font-weight: 300;
  }
  .team-card .team-foot {
    margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-3);
    letter-spacing: 0.04em;
  }

  /* ─────────────────────────── POR HORA vs POR MENSALIDADE (compare) ─────────────────────────── */
  .compare {
    background: var(--azulescuro); color: var(--text-1);
    padding: 100px 0; position: relative; overflow: hidden;
  }
  .compare-head { max-width: 820px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 1; }
  .compare-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .compare-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .compare-sub { font-size: 16px; line-height: 1.55; color: var(--text-2); font-weight: 300; max-width: 660px; margin: 0 auto; }

  .compare-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
    border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
  }
  @media (max-width: 780px) { .compare-grid { grid-template-columns: 1fr; } }

  .compare-col {
    padding: 36px 32px;
    display: flex; flex-direction: column; gap: 18px;
    position: relative;
  }
  .compare-col.por-hora {
    background: rgba(255,255,255,0.015);
    border-right: 1px solid var(--border);
  }
  @media (max-width: 780px) {
    .compare-col.por-hora { border-right: none; border-bottom: 1px solid var(--border); }
  }
  .compare-col.mensal {
    background: linear-gradient(180deg, rgba(126,229,221,0.06), rgba(62,60,249,0.04));
  }
  .compare-col.mensal::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--gradiente);
  }

  .compare-eyebrow {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
  }
  .compare-col.por-hora .compare-eyebrow { color: var(--text-4); }
  .compare-col.mensal .compare-eyebrow { color: var(--menta); }
  .compare-eyebrow .sw { width: 8px; height: 8px; border-radius: 2px; }
  .compare-col.por-hora .compare-eyebrow .sw { background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.30); }
  .compare-col.mensal .compare-eyebrow .sw { background: var(--menta); box-shadow: 0 0 6px rgba(126,229,221,0.6); }

  .compare-name {
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
    margin-bottom: 0;
  }
  .compare-col.por-hora .compare-name { color: var(--text-3); }
  .compare-col.mensal .compare-name { color: var(--text-1); }

  .compare-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
  .compare-line {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.55; font-weight: 300;
  }
  .compare-line .mark {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 700;
    margin-top: 1px;
  }
  .compare-col.por-hora .compare-line { color: var(--text-3); }
  .compare-col.por-hora .compare-line .mark { background: rgba(255,255,255,0.05); color: var(--text-4); }
  .compare-col.mensal .compare-line { color: var(--text-2); }
  .compare-col.mensal .compare-line .mark { background: rgba(126,229,221,0.20); color: var(--menta); }

  /* ─────────────────────────── FAQ VISÍVEL (faq) ─────────────────────────── */
  .faq {
    /* Off-white levemente azulado pra diferenciar de .analysis e .outras-disc (que são papel puro) */
    background: #F1F1F8; color: var(--grafite);
    padding: 100px 0; position: relative;
  }
  /* Grid lines sutil (diferente do dot pattern da outras-disc) */
  .faq::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to right, rgba(62,60,249,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(62,60,249,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
  }
  /* Separador superior gradient azul→menta (mais frio) */
  .faq::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126,229,221,0.50) 25%, rgba(62,60,249,0.50) 75%, transparent);
    pointer-events: none;
  }
  .faq-head { max-width: 760px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 1; }
  .faq-title {
    font-size: clamp(32px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 14px;
  }
  .faq-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .faq-sub { font-size: 16px; color: var(--cinza); font-weight: 300; }

  .faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; }
  .faq-item {
    border: 1px solid var(--border-light); border-radius: 10px;
    background: var(--papel-2);
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
  }
  .faq-item[open] {
    border-color: rgba(62,60,249,0.32);
    box-shadow: 0 12px 30px -16px rgba(62,60,249,0.20);
  }

  .faq-q {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 26px; cursor: pointer;
    font-size: 16px; font-weight: 500; color: var(--grafite); letter-spacing: -0.01em;
    list-style: none; gap: 16px;
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q::marker { display: none; }
  .faq-q .icn {
    flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(62,60,249,0.10); color: var(--azul);
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
    transition: transform 0.25s, background 0.25s, color 0.25s;
  }
  .faq-item[open] .faq-q .icn {
    transform: rotate(45deg);
    background: rgba(126,229,221,0.20); color: #0F6C66;
  }
  .faq-a {
    padding: 0 26px 22px;
    font-size: 14.5px; line-height: 1.65; color: var(--cinza); font-weight: 300;
  }
  .faq-a strong { color: var(--grafite); font-weight: 500; }

  /* ─────────────────────────────── PROCESS TIMELINE ─────────────────────────────── */
  .process {
    background: var(--papel); color: var(--grafite); padding: 96px 0 110px; position: relative;
  }
  .process-head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
  .process-title {
    font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--grafite); margin-bottom: 16px;
  }
  .process-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .process-sub { font-size: 15.5px; color: var(--cinza); font-weight: 300; }

  .timeline {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
    position: relative;
  }
  @media (max-width: 880px) { .timeline { grid-template-columns: 1fr; } }
  .timeline::before {
    content: ""; position: absolute; top: 35px; left: 8%; right: 8%;
    height: 1px; background: linear-gradient(90deg, transparent, var(--azul) 30%, var(--menta) 70%, transparent);
    z-index: 0;
  }
  @media (max-width: 880px) { .timeline::before { display: none; } }
  .step {
    position: relative; z-index: 1;
    background: var(--papel-2); border: 1px solid var(--border-light);
    border-radius: 14px; padding: 24px 22px;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .step:hover { border-color: rgba(62,60,249,0.30); transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(62,60,249,0.18); }
  .step-num {
    width: 38px; height: 38px;
    background: var(--azulescuro); color: var(--menta);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 14px;
    box-shadow: 0 0 0 4px var(--papel);
  }
  .step-time {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--azul);
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .step-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--grafite); line-height: 1.2; }
  .step-body { font-size: 13.5px; color: var(--cinza); line-height: 1.55; font-weight: 300; }
  .step-body strong { color: var(--grafite); font-weight: 500; }
  .step-side {
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed rgba(62,60,249,0.18);
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--azul); letter-spacing: 0.02em; line-height: 1.5;
  }
  .step-side .lbl { color: var(--cinza-2); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 6px; }

  /* ─────────────────────────── A CURVA DA OPERAÇÃO (curve) ─────────────────────────── */
  .curve {
    background: var(--azulescuro); padding: 100px 0 110px;
    position: relative; overflow: hidden;
  }
  .curve::before {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--menta) 30%, var(--azul) 70%, transparent);
    opacity: 0.6; pointer-events: none; z-index: 0;
  }

  .curve-head { max-width: 800px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 2; }
  .curve-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .curve-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .curve-sub { font-size: 16px; line-height: 1.6; color: var(--text-2); font-weight: 300; max-width: 680px; margin: 0 auto; }

  .curve-stage {
    position: relative;
    max-width: 1080px; margin: 0 auto;
  }

  /* SVG da curva ascendente */
  .curve-svg {
    width: 100%; height: 220px;
    display: block;
    margin-bottom: -30px; /* curva "encosta" nos cards abaixo */
    position: relative; z-index: 1;
  }
  .curve-svg .c-path {
    fill: none;
    stroke: url(#curveGrad);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1800;
    stroke-dashoffset: 1800;
  }
  .curve-svg.animated .c-path {
    animation: draw-curve 2s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  }
  @keyframes draw-curve { to { stroke-dashoffset: 0; } }

  .curve-svg .c-node {
    fill: var(--menta);
    filter: drop-shadow(0 0 8px rgba(126,229,221,0.9));
    opacity: 0;
  }
  .curve-svg.animated .c-node-1 { animation: pop-node 0.5s ease-out 0.6s forwards; }
  .curve-svg.animated .c-node-2 { animation: pop-node 0.5s ease-out 1.2s forwards; }
  .curve-svg.animated .c-node-3 { animation: pop-node 0.5s ease-out 1.8s forwards; }
  @keyframes pop-node {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
  }
  .curve-svg .c-node { transform-origin: center; transform-box: fill-box; }

  .curve-svg .c-label {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    fill: var(--menta); letter-spacing: 0.08em;
    opacity: 0;
  }
  .curve-svg.animated .c-label-1 { animation: fade-label 0.5s ease-out 0.7s forwards; }
  .curve-svg.animated .c-label-2 { animation: fade-label 0.5s ease-out 1.3s forwards; }
  .curve-svg.animated .c-label-3 { animation: fade-label 0.5s ease-out 1.9s forwards; }
  @keyframes fade-label { from { opacity: 0; } to { opacity: 1; } }

  /* 3 cards de fase abaixo da curva */
  .curve-points {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    position: relative; z-index: 2;
  }
  @media (max-width: 800px) {
    .curve-svg { display: none; }
    .curve-points { grid-template-columns: 1fr; }
  }

  .curve-point {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 26px 26px;
    display: flex; flex-direction: column; gap: 16px;
    transition: border-color 0.25s, background 0.25s, transform 0.25s;
  }
  .curve-point:hover {
    border-color: rgba(126,229,221,0.30);
    background: rgba(255,255,255,0.045);
    transform: translateY(-3px);
  }
  .curve-point .stage {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  }
  .curve-point .stage .when {
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    color: var(--menta); font-weight: 600; letter-spacing: -0.005em;
  }
  .curve-point .stage .name-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    color: var(--text-3); letter-spacing: 0.08em; text-transform: uppercase;
  }
  .curve-point h3 {
    font-size: 19px; font-weight: 600; color: var(--text-1);
    line-height: 1.25; letter-spacing: -0.02em;
  }
  .curve-point .block {
    padding-top: 14px; border-top: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
  }
  .curve-point .block-lbl {
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px;
    color: var(--text-3); letter-spacing: 0.10em; text-transform: uppercase;
  }
  .curve-point .block-body {
    font-size: 13.5px; color: var(--text-2); font-weight: 300; line-height: 1.55;
  }

  /* ─────────────────────────────── CASES ─────────────────────────────── */
  .cases-section {
    background: var(--azulescuro); padding: 110px 0 100px;
    position: relative; overflow: hidden;
  }
  .cases-section::before {
    content: ""; position: absolute; top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--menta) 30%, var(--azul) 70%, transparent);
    opacity: 0.6;
    pointer-events: none; z-index: 0;
  }
  .cases-head { max-width: 800px; margin: 0 0 56px; position: relative; z-index: 1; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--menta); text-transform: uppercase; letter-spacing: 0.22em;
    margin-bottom: 18px; font-weight: 500;
  }
  .eyebrow::before, .eyebrow::after {
    content: ""; width: 22px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126,229,221,0.6));
  }
  .eyebrow::after { background: linear-gradient(90deg, rgba(126,229,221,0.6), transparent); }
  .eyebrow.center { justify-content: center; }
  .anti .anti .eyebrow::after { background: linear-gradient(90deg, rgba(248,113,113,0.6), transparent); }
  .cases-title {
    font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; margin-bottom: 18px;
  }
  .cases-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .cases-sub { font-size: 16px; color: var(--text-2); font-weight: 300; max-width: 640px; line-height: 1.55; }

  .case-list { display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
  .case-card {
    background: linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--border-2); border-radius: 16px;
    padding: 36px 36px;
    display: grid; grid-template-columns: 320px 1fr; gap: 40px; align-items: start;
    transition: border-color 0.3s, background 0.3s;
    position: relative; overflow: hidden;
  }
  @media (max-width: 880px) { .case-card { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; } }
  .case-card:hover { border-color: rgba(126,229,221,0.30); }

  .case-side { display: flex; flex-direction: column; gap: 14px; }
  .case-logo-area {
    background: transparent;
    padding: 24px 4px 28px;
    display: flex; align-items: center; justify-content: center;
    min-height: 110px;
    border: none;
    border-bottom: 1px solid var(--border);
  }
  .case-logo-area img {
    max-width: 100%; max-height: 72px; height: auto; width: auto;
    opacity: 0.92;
    transition: opacity 0.2s ease;
    image-rendering: -webkit-optimize-contrast;
  }
  .case-logo-area img:hover { opacity: 1; }
  .case-meta-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--border); border-radius: 9px; overflow: hidden;
  }
  .case-meta-cell {
    background: rgba(255,255,255,0.025); padding: 12px 14px;
  }
  .case-meta-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 4px; }
  .case-meta-value { font-size: 14px; color: var(--text-1); font-weight: 500; letter-spacing: -0.01em; }

  .case-main { display: flex; flex-direction: column; gap: 14px; }
  .case-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .case-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
    padding: 3px 8px; border-radius: 4px;
    background: rgba(126,229,221,0.10); color: var(--menta); letter-spacing: 0.04em;
  }
  .case-name {
    font-size: 28px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1;
  }
  .case-name .sub { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 13px; color: var(--menta); margin-top: 4px; display: block; letter-spacing: 0.04em; }
  .case-desc { font-size: 15px; color: var(--text-2); line-height: 1.6; font-weight: 300; }
  .case-features {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px;
    margin-top: 4px;
  }
  @media (max-width: 600px) { .case-features { grid-template-columns: 1fr; } }
  .case-feature {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-2);
    display: flex; align-items: center; gap: 8px;
  }
  .case-feature::before { content: "→"; color: var(--menta); flex-shrink: 0; }

  /* ─────────────────────────────── SHOWCASE — mockup de produto ─────────────────────────────── */
  .showcase {
    background: linear-gradient(180deg, var(--azulescuro) 0%, var(--violeta) 100%);
    padding: 110px 0 110px;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--border);
  }
  .showcase::before {
    content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 80%; height: 320px;
    background: radial-gradient(ellipse at top, rgba(126,229,221,0.10), transparent 70%);
    pointer-events: none;
  }
  .showcase-head { max-width: 760px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .showcase-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 5px 14px 5px 12px;
    background: rgba(126, 229, 221, 0.08);
    border: 1px solid rgba(126, 229, 221, 0.24);
    border-radius: 999px;
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--menta); letter-spacing: 0.06em;
    margin-bottom: 28px;
  }
  .showcase-pulse {
    position: relative; width: 7px; height: 7px; background: var(--menta); border-radius: 50%; box-shadow: 0 0 8px var(--menta);
  }
  .showcase-pulse::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    background: var(--menta); opacity: 0.4; animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }
  .showcase-title {
    font-size: clamp(32px, 4vw, 50px); line-height: 1.05;
    letter-spacing: -0.03em; font-weight: 600; margin-bottom: 18px;
  }
  .showcase-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .showcase-sub { font-size: 16px; color: var(--text-2); line-height: 1.6; font-weight: 300; }

  .showcase-mock {
    max-width: 960px; margin: 0 auto;
    background: #0A0118;
    border: 1px solid var(--border-2); border-radius: 14px;
    overflow: hidden; position: relative; z-index: 1;
    box-shadow:
      0 1px 0 0 rgba(255,255,255,0.05) inset,
      0 40px 100px -30px rgba(0,0,0,0.85),
      0 0 80px -20px rgba(62,60,249,0.25);
  }
  .mock-bar {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 16px; background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--border);
  }
  .mock-dots { display: flex; gap: 6px; }
  .mock-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-3); }
  .mock-url {
    flex: 1; text-align: center;
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
    color: var(--text-3); letter-spacing: 0.02em;
    background: rgba(255,255,255,0.03);
    padding: 5px 14px; border-radius: 6px; max-width: 380px; margin: 0 auto;
  }
  .mock-actions { color: var(--text-4); font-size: 16px; letter-spacing: 0.1em; }

  .mock-content { display: grid; grid-template-columns: 210px 1fr; min-height: 480px; }
  @media (max-width: 760px) {
    .mock-content { grid-template-columns: 1fr; }
    .mock-sidebar { display: none; }
  }
  .mock-sidebar {
    background: rgba(255,255,255,0.015); border-right: 1px solid var(--border); padding: 18px 14px;
  }
  .mock-side-title {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-4);
    text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 10px; font-weight: 400;
  }
  .mock-side-list { list-style: none; display: flex; flex-direction: column; gap: 3px; margin-bottom: 22px; }
  .mock-side-item {
    padding: 6px 10px; font-size: 12.5px; color: var(--text-2);
    border-radius: 5px; display: flex; align-items: center; gap: 9px;
    cursor: default; transition: background 0.15s;
  }
  .mock-side-item.active { background: rgba(62,60,249,0.16); color: var(--menta); }
  .mock-side-item .ico { color: var(--text-4); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .mock-side-item.active .ico { color: var(--menta); }

  .mock-main { padding: 22px 26px; }
  .mock-main-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
    margin-bottom: 20px; padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
  }
  .mock-main-title h4 { font-size: 16px; font-weight: 500; color: var(--text-1); letter-spacing: -0.01em; }
  .mock-main-title small {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    color: var(--text-3); margin-top: 5px; display: block;
  }
  .mock-main-action {
    font-size: 12px; color: white;
    background: var(--azul); padding: 7px 12px; border-radius: 6px;
    display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  }

  .mock-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
    background: var(--border); border-radius: 8px; overflow: hidden;
    margin-bottom: 22px;
  }
  @media (max-width: 600px) { .mock-stats { grid-template-columns: repeat(2, 1fr); } }
  .mock-stat { background: rgba(255,255,255,0.02); padding: 14px 16px; }
  .mock-stat-label {
    font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-4);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px;
  }
  .mock-stat-value {
    font-size: 22px; font-weight: 600; letter-spacing: -0.025em; line-height: 1;
    display: flex; align-items: baseline; gap: 4px;
  }
  .mock-stat-value .delta { font-size: 11px; color: var(--menta); font-family: 'JetBrains Mono', monospace; font-weight: 400; margin-left: auto; }
  .mock-stat-value .unit { font-size: 12px; color: var(--text-3); font-weight: 400; }

  .mock-list-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
  }
  .mock-list-head h5 { font-size: 13px; color: var(--text-1); font-weight: 500; }
  .mock-list-head .filter {
    font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-4);
  }

  .mock-rows {
    background: rgba(255,255,255,0.015); border: 1px solid var(--border);
    border-radius: 8px; overflow: hidden;
  }
  .mock-row {
    display: grid; grid-template-columns: 1fr 120px 90px 110px;
    padding: 10px 14px; gap: 14px; align-items: center; font-size: 12px;
    border-bottom: 1px solid var(--border);
  }
  .mock-row:last-child { border-bottom: none; }
  .mock-row:hover { background: rgba(255,255,255,0.03); }
  .mock-row .obra { color: var(--text-1); font-weight: 400; font-family: 'Lexend', sans-serif; font-size: 12.5px; }
  .mock-row .progress {
    height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden;
  }
  .mock-row .progress-bar {
    height: 100%; border-radius: 3px; background: var(--gradiente);
  }
  .mock-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 10px;
    padding: 2px 6px; border-radius: 3px; width: fit-content;
    letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  }
  .mock-tag.ok { background: rgba(126,229,221,0.10); color: var(--menta); }
  .mock-tag.run { background: rgba(62,60,249,0.18); color: #A5A2FF; }
  .mock-tag.warn { background: rgba(251,191,36,0.12); color: #FBBF24; }
  .mock-row .valor { font-family: 'JetBrains Mono', monospace; color: var(--text-2); text-align: right; }

  .mock-footer {
    padding: 10px 16px; border-top: 1px solid var(--border);
    background: rgba(255,255,255,0.01);
    display: flex; justify-content: space-between; align-items: center;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-4);
  }
  .mock-footer .live { color: var(--menta); display: inline-flex; align-items: center; gap: 6px; }
  .mock-footer .live::before {
    content: ""; width: 6px; height: 6px; background: var(--menta); border-radius: 50%; box-shadow: 0 0 6px var(--menta);
    animation: ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  /* ─────────────────────────────── PARA QUEM É ─────────────────────────────── */
  .for-whom {
    padding: 110px 0;
    background: linear-gradient(180deg, var(--violeta) 0%, var(--azulescuro) 100%); position: relative;
  }
  .for-whom-head { max-width: 760px; margin: 0 0 56px; }
  .for-whom-title {
    font-size: clamp(32px, 3.8vw, 46px); line-height: 1.05; letter-spacing: -0.025em;
    font-weight: 600; margin-bottom: 14px;
  }
  .for-whom-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .for-whom-sub { font-size: 15.5px; color: var(--text-2); font-weight: 300; }

  .for-whom-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  @media (max-width: 760px) { .for-whom-grid { grid-template-columns: 1fr; } }
  .fw-card {
    background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px 26px;
    display: flex; flex-direction: column; gap: 12px;
    transition: background 0.25s, border-color 0.25s;
  }
  .fw-card:hover { background: rgba(126,229,221,0.04); border-color: rgba(126,229,221,0.30); }
  .fw-icon {
    width: 42px; height: 42px;
    background: var(--menta-soft); border: 1px solid rgba(126,229,221,0.20);
    border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    color: var(--menta);
  }
  .fw-icon svg { width: 22px; height: 22px; }
  .fw-name { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
  .fw-body { font-size: 14px; color: var(--text-2); line-height: 1.55; font-weight: 300; }

  /* ─────────────────────────────── ANTI-VENDEDOR ─────────────────────────────── */
  .anti {
    background: var(--violeta); padding: 90px 0; position: relative; overflow: hidden;
  }
  .anti::before {
    content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60%; height: 280px;
    background: radial-gradient(ellipse, rgba(248,113,113,0.10), transparent 70%);
    pointer-events: none;
  }
  .anti-inner { max-width: 780px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
  .anti .eyebrow { justify-content: center; color: #F87171; }
  .anti .anti .eyebrow::before { background: linear-gradient(90deg, transparent, rgba(248,113,113,0.6)); }
  .anti-title {
    font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.025em;
    font-weight: 600; margin-bottom: 24px;
  }
  .anti-list {
    display: flex; flex-direction: column; gap: 14px;
    text-align: left; max-width: 600px; margin: 0 auto;
  }
  .anti-item {
    display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start;
    padding: 14px 20px; background: rgba(255,255,255,0.025); border: 1px solid var(--border);
    border-left: 3px solid #F87171; border-radius: 9px;
  }
  .anti-item .anti-mark {
    width: 22px; height: 22px;
    background: rgba(248,113,113,0.16); color: #F87171;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    flex-shrink: 0;
    padding: 0; align-self: start;
  }
  .anti-item .text { font-size: 14.5px; color: var(--text-2); line-height: 1.55; font-weight: 300; }
  .anti-item .text strong { color: var(--text-1); font-weight: 500; }

  /* ─────────────────────────────── CROSS-SELL ─────────────────────────────── */
  .cross {
    background: var(--azulescuro); padding: 96px 0; position: relative;
  }
  .cross-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
  .cross-title {
    font-size: clamp(34px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; margin-bottom: 14px;
  }
  .cross-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .cross-sub { font-size: 15.5px; color: var(--text-2); font-weight: 300; }

  .cross-groups { display: flex; flex-direction: column; gap: 32px; }
  .cross-group {
    display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: center;
  }
  @media (max-width: 760px) { .cross-group { grid-template-columns: 1fr; gap: 12px; align-items: start; } }
  .cross-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; background: rgba(126,229,221,0.08);
    border: 1px solid rgba(126,229,221,0.22);
    border-radius: 999px; font-size: 13px; color: var(--menta); width: fit-content;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.04em;
    position: relative;
  }
  .cross-pill::after {
    content: ""; position: absolute;
    right: -24px; top: 50%; transform: translateY(-50%);
    width: 22px; height: 1px;
    background: linear-gradient(90deg, rgba(126,229,221,0.55) 0%, rgba(126,229,221,0) 100%);
  }
  @media (max-width: 760px) { .cross-pill::after { display: none; } }

  .cross-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; position: relative; }
  .cross-items::before {
    content: ""; position: absolute;
    left: -10px; top: 50%; transform: translateY(-50%);
    width: 5px; height: 5px;
    background: var(--menta); border-radius: 50%;
    box-shadow: 0 0 8px rgba(126,229,221,0.6);
  }
  @media (max-width: 880px) { .cross-items { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 760px) { .cross-items::before { display: none; } }
  @media (max-width: 600px) { .cross-items { grid-template-columns: 1fr; } }

  .cross-item {
    background: rgba(255,255,255,0.03); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    cursor: pointer; text-decoration: none; color: inherit;
    position: relative;
  }
  .cross-item:hover {
    background: rgba(126,229,221,0.06);
    border-color: rgba(126,229,221,0.35);
    transform: translateX(3px);
    box-shadow: 0 8px 24px -10px rgba(62,60,249,0.20);
  }
  .cross-item .ico {
    width: 34px; height: 34px; background: var(--menta-soft);
    border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--menta);
    flex-shrink: 0; align-self: flex-start; margin-top: 1px;
    transition: background 0.2s, border-color 0.2s;
    border: 1px solid transparent;
  }
  .cross-item:hover .ico {
    background: rgba(126,229,221,0.16);
    border-color: rgba(126,229,221,0.30);
  }
  .cross-item .ico svg { width: 16px; height: 16px; }
  .cross-text {
    flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0;
  }
  .cross-item .label { font-size: 14px; color: var(--text-1); font-weight: 400; line-height: 1.3; letter-spacing: -0.005em; }
  .cross-item .desc {
    font-size: 11px; color: var(--text-3); font-weight: 400; line-height: 1.4;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.01em;
    transition: color 0.2s;
  }
  .cross-item:hover .desc { color: var(--text-2); }
  .cross-item .arr { color: var(--text-4); font-family: 'JetBrains Mono', monospace; transition: color 0.2s, transform 0.2s; align-self: center; }
  .cross-item:hover .arr { color: var(--menta); transform: translateX(3px); }

  /* ─────────────────────────────── CONTACT ─────────────────────────────── */
  .contact {
    background: var(--azulescuro); padding: 60px 0 110px; position: relative; overflow: hidden;
  }
  .contact::before {
    content: ""; position: absolute; top: -20%; left: 20%; transform: rotate(28deg);
    width: 2px; height: 140%;
    background: linear-gradient(180deg, transparent, var(--azul), transparent);
    opacity: 0.28; pointer-events: none;
  }
  .contact-card {
    background: linear-gradient(180deg, #1F0A4A 0%, var(--azulescuro) 100%);
    border: 1px solid var(--border-2); border-radius: 18px;
    padding: 48px; position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  }
  @media (max-width: 880px) { .contact-card { grid-template-columns: 1fr; gap: 36px; padding: 36px 28px; } }
  .contact-card::before {
    content: ""; position: absolute; bottom: -120px; left: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(62,60,249,0.20), transparent 70%);
    pointer-events: none;
  }
  .contact-card::after {
    content: ""; position: absolute; top: -100px; right: -80px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(126,229,221,0.18), transparent 70%);
    pointer-events: none;
  }
  .contact-left { position: relative; z-index: 1; }
  .contact-left h2 {
    font-size: clamp(28px, 3.4vw, 38px); line-height: 1.08; letter-spacing: -0.025em;
    font-weight: 600; margin-bottom: 14px;
  }
  .contact-left h2 .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .contact-left p { font-size: 15px; color: var(--text-2); line-height: 1.6; font-weight: 300; margin-bottom: 28px; }
  .channels { display: flex; flex-direction: column; gap: 10px; }
  .channel {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 12px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    transition: background 0.2s, border-color 0.2s; cursor: pointer;
  }
  .channel:hover { background: rgba(126,229,221,0.05); border-color: rgba(126,229,221,0.30); }
  .channel-icon {
    width: 38px; height: 38px; border-radius: 9px;
    background: var(--menta-soft); border: 1px solid rgba(126,229,221,0.22);
    display: flex; align-items: center; justify-content: center; color: var(--menta); flex-shrink: 0;
  }
  .channel-icon svg { width: 18px; height: 18px; }
  .channel-text { display: flex; flex-direction: column; }
  .channel-label { font-size: 13px; color: var(--text-3); }
  .channel-value { font-size: 14.5px; color: var(--text-1); font-weight: 500; margin-top: 1px; }
  .channel-arr {
    margin-left: auto; width: 32px; height: 32px; background: var(--azul);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: white; font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
    transition: background 0.2s, transform 0.2s;
  }
  .channel:hover .channel-arr { background: var(--azul-deep); transform: translateX(2px); }

  .contact-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
  .form-field {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    border-radius: 10px; padding: 13px 16px;
    font-family: 'Lexend', sans-serif; font-size: 14.5px; color: var(--text-1);
    width: 100%; transition: border-color 0.2s, background 0.2s;
  }
  .form-field::placeholder { color: var(--text-4); }
  .form-field:focus { outline: none; border-color: var(--menta); background: rgba(126,229,221,0.04); }
  textarea.form-field { min-height: 110px; resize: vertical; font-family: 'Lexend', sans-serif; }
  .form-submit {
    background: var(--azul); color: white; padding: 14px 22px;
    border: 1px solid var(--azul); border-radius: 10px;
    font-family: 'Lexend', sans-serif; font-size: 15px; font-weight: 500;
    cursor: pointer; transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
    margin-top: 4px;
  }
  .form-submit:hover { background: var(--azul-deep); border-color: var(--azul-deep); box-shadow: 0 12px 30px -10px var(--azul-glow); transform: translateY(-1px); }

  /* ─────────────────────────────── FOOTER ─────────────────────────────── */
  footer.foot { background: var(--violeta); border-top: 1px solid var(--border); padding: 56px 0 32px; }
  .foot-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.1fr 0.8fr; gap: 36px; margin-bottom: 48px; }
  @media (max-width: 1080px) { .foot-top { grid-template-columns: 2fr 1fr 1fr; gap: 32px; } }
  @media (max-width: 720px) { .foot-top { grid-template-columns: 1fr 1fr; gap: 28px; } }
  .foot-brand-area { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
  .foot-brand-area img {
    height: 28px; width: auto; max-width: 140px;
    display: block; object-fit: contain;
    align-self: flex-start;
  }
  .foot-brand { font-size: 13.5px; color: var(--text-2); line-height: 1.55; max-width: 280px; font-weight: 300; }
  .foot h4 {
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-4);
    text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 16px; font-weight: 400;
  }
  .foot ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .foot li { font-size: 13.5px; }
  .foot li a {
    color: var(--text-2); text-decoration: none; transition: color 0.15s;
  }
  .foot li a:hover { color: var(--menta); }
  .foot-bottom a {
    color: var(--menta); text-decoration: none;
    transition: opacity 0.15s;
  }
  .foot-bottom a:hover { opacity: 0.8; }
  .foot-bottom {
    padding-top: 26px; border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-4); letter-spacing: 0.02em;
  }
  .foot-bottom .stack { display: flex; gap: 18px; align-items: center; }
  .foot-bottom .live-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--menta); }
  .foot-bottom .live-tag::before { content: ""; width: 6px; height: 6px; background: var(--menta); border-radius: 50%; box-shadow: 0 0 6px var(--menta); }

  /* ─────────────────────────────── REVEAL ─────────────────────────────── */
  .reveal { opacity: 0; transform: translateY(10px); animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  @keyframes rise { to { opacity: 1; transform: translateY(0); } }
  .delay-1 { animation-delay: 0.06s; }
  .delay-2 { animation-delay: 0.16s; }
  .delay-3 { animation-delay: 0.26s; }
  .delay-4 { animation-delay: 0.36s; }

  /* ─────────────────────────────── MOTION ESTADOS INICIAIS ─────────────────────────────── */
  .motion-fade-up { opacity: 0; will-change: opacity, transform; }
  .motion-pop { opacity: 0; will-change: opacity, transform; }
  .motion-bar { width: 0% !important; }

  @media (prefers-reduced-motion: reduce) {
    .motion-fade-up, .motion-pop { opacity: 1 !important; transform: none !important; }
    .motion-bar { width: var(--bar-fallback, 100%) !important; }
    .showcase-pulse, .visual-row.active::before { animation: none !important; }
  }

  body.no-motion .motion-fade-up,
  body.no-motion .motion-pop { opacity: 1 !important; transform: none !important; }
  body.no-motion .motion-bar { width: var(--bar-fallback, 100%) !important; }

  ::selection { background: var(--menta); color: var(--azulescuro); }

  /* ======================================================== */
  /* === CSS ESPECÍFICO DA PÁGINA CLOUD ====================== */
  /* ======================================================== */

  /* Hero visual — flex horizontal: servidor à esquerda (baixo), migração diagonal, cloud à direita (alto) */
  .cloud-scene {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4px;
    width: 100%;
    min-height: 480px;
    padding-bottom: 16px;
  }

  /* ━━━━━━━━━━ Servidor On-Premise (alinhado no bottom) ━━━━━━━━━━ */
  .onprem {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-end;
  }
  .onprem-rack { width: 80px; position: relative; }
  .onprem-rack svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 24px rgba(255,180,100,0.18)); }
  .onprem-label {
    margin-top: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.75);
  }
  .onprem-tag {
    margin-top: 8px;
    padding: 5px 12px;
    border-radius: 100px;
    background: rgba(255,180,100,0.12);
    border: 1px solid rgba(255,180,100,0.55);
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.6px;
    color: rgba(255,200,140,0.92);
    animation: tag-pulse 2.4s ease-in-out infinite;
  }
  .op-led-warn { animation: led-flash 1.4s ease-in-out infinite; }
  .op-led-warn2 { animation: led-flash 1.9s ease-in-out infinite 0.7s; }
  .op-fan { transform-box: fill-box; }
  @keyframes led-flash {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 1; }
  }
  /* fan-spin removido — ventoinha fixa */
  @keyframes tag-pulse {
    0%, 100% { opacity: 0.75; }
    50%      { opacity: 1; }
  }

  /* ━━━━━━━━━━ Trilha de Migração (ocupa altura toda da scene, curva ascendente real) ━━━━━━━━━━ */
  .mig-trail {
    flex: 0 1 180px;
    position: relative;
    min-width: 120px;
    max-width: 200px;
    align-self: stretch;
    pointer-events: none;
  }
  .mig-label {
    position: absolute;
    top: 32%; left: 50%;
    transform: translate(-50%, -100%);
    text-align: center;
    pointer-events: none;
    z-index: 2;
  }
  .mig-title {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--menta);
    font-weight: 500;
  }
  .mig-sub {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px;
    letter-spacing: 0.6px;
    color: rgba(126,229,221,0.55);
    margin-top: 3px;
  }
  .mig-curve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .mig-curve path {
    stroke-dashoffset: 0;
    animation: dash-flow 1.8s linear infinite;
  }
  @keyframes dash-flow {
    0%   { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -24; }
  }
  .pkt {
    position: absolute;
    top: 50%; left: 0;
    width: 18px; height: 12px;
    transform: translate(0, -50%);
    filter: drop-shadow(0 0 6px rgba(126,229,221,0.6));
    animation: pkt-fly 4.5s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  }
  .pkt svg { width: 100%; height: 100%; display: block; }
  .pkt-1 { animation-delay: 0s; }
  .pkt-2 { animation-delay: 1.5s; }
  .pkt-3 { animation-delay: 3s; }
  @keyframes pkt-fly {
    0%   { left: 0%;   top: 85%; opacity: 0; }
    10%  {                       opacity: 1; }
    50%  { left: 50%;  top: 55%;             }
    90%  { left: 100%; top: 40%; opacity: 1; }
    100% { left: 105%; top: 38%; opacity: 0; }
  }

  /* ━━━━━━━━━━ Cloud Zulti (alinha no topo) ━━━━━━━━━━ */
  .cloud-zulti {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-start;
    width: 360px;
    padding: 0 10px;
  }
  /* (Glow removido temporariamente pra teste) */
  @keyframes cloud-breathe {
    0%, 100% { opacity: 0.88; }
    50%      { opacity: 1; }
  }
  .cloud-glow-wrap {
    position: relative;
    width: 100%;
    z-index: 1;
  }
  .cloud-shape {
    width: 100%; height: auto; display: block;
  }
  .cloud-apps {
    position: absolute;
    inset: 24% 12% 14% 10%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 12px 14px;
    align-items: center;
    justify-items: center;
  }
  .app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    opacity: 0;
    animation: app-fade-in 0.6s ease forwards;
  }
  /* Cada app com offset próprio pra parecer distribuído organicamente, não em grid rígido */
  .app:nth-child(1) { animation-delay: 0.2s;  --x: -4px;   --y: 6px;  }
  .app:nth-child(2) { animation-delay: 0.35s; --x: 8px;    --y: -8px; }
  .app:nth-child(3) { animation-delay: 0.5s;  --x: -2px;   --y: 10px; }
  .app:nth-child(4) { animation-delay: 0.65s; --x: 6px;    --y: -4px; }
  .app:nth-child(5) { animation-delay: 0.8s;  --x: -8px;   --y: 8px;  }
  .app:nth-child(6) { animation-delay: 0.95s; --x: 4px;    --y: -6px; }
  @keyframes app-fade-in {
    from { opacity: 0; transform: translate(var(--x, 0), calc(var(--y, 0) + 6px)); }
    to   { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)); }
  }
  .app svg {
    width: 44px; height: 44px;
    display: block;
    filter: drop-shadow(0 0 6px rgba(0,0,0,0.45));
  }
  .app-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.75);
    text-transform: lowercase;
  }
  .cloud-label {
    margin-top: 14px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    letter-spacing: 2.2px;
    color: rgba(255,255,255,0.95);
    font-weight: 500;
  }
  .cloud-sub {
    margin-top: 6px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.58);
  }
  .cloud-badge {
    margin-top: 16px;
    padding: 8px 18px;
    border-radius: 100px;
    background: rgba(24,6,54,0.85);
    border: 1.2px solid rgba(126,229,221,0.75);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.7px;
    color: var(--menta);
    font-weight: 500;
    box-shadow: 0 0 22px rgba(126,229,221,0.22);
    animation: badge-pulse 2.8s ease-in-out infinite;
  }
  @keyframes badge-pulse {
    0%, 100% { opacity: 0.85; box-shadow: 0 0 14px rgba(126,229,221,0.16); }
    50%      { opacity: 1;    box-shadow: 0 0 22px rgba(126,229,221,0.30); }
  }

  /* Responsivo */
  @media (max-width: 960px) {
    .cloud-scene { flex-direction: column; gap: 24px; }
    .mig-trail { width: 100%; height: 80px; }
    .cloud-zulti { width: 100%; max-width: 320px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .op-led-warn, .op-led-warn2, .op-fan, .onprem-tag,
    .mig-curve path, .pkt, .cloud-glow-wrap, .app, .cloud-badge {
      animation: none !important;
    }
    .app { opacity: 1; }
  }


  /* Operação contínua strip (dentro de .layers) */
  .ops-strip {
    margin-top: 40px;
    padding: 28px 32px;
    background: rgba(126, 229, 221, 0.05);
    border: 1px solid rgba(126, 229, 221, 0.25);
    border-radius: 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 28px;
    align-items: center;
  }
  .ops-strip-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--menta);
    letter-spacing: 0.5px;
    text-transform: lowercase;
  }
  .ops-strip-body {
    font-size: 15px; color: var(--text-2); font-weight: 300; line-height: 1.6;
  }
  .ops-strip-body strong { color: var(--text-1); font-weight: 500; }
  .ops-strip-body em { color: var(--menta); font-style: normal; font-weight: 400; }
  .ops-strip-foot {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--cinza-2);
    letter-spacing: 0.4px;
    white-space: nowrap;
  }
  @media (max-width: 880px) {
    .ops-strip { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
    .ops-strip-foot { text-align: left; }
  }

  /* ======= A CURVA DA MIGRAÇÃO ======= */
  .curve-cloud {
    padding: 96px 0;
    background: linear-gradient(180deg, var(--azulescuro) 0%, #1F0A48 100%);
    position: relative;
  }
  .curve-cloud::before {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(62,60,249,0.06) 0.7px, transparent 0.8px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
    pointer-events: none;
  }
  .curve-head { max-width: 820px; margin: 0 auto 56px; text-align: center; position: relative; z-index: 1; }
  .curve-title { font-size: 36px; font-weight: 300; line-height: 1.18; margin-bottom: 16px; letter-spacing: -0.6px; }
  .curve-title .grad {
    background: var(--gradiente); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; font-weight: 500;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .curve-sub { font-size: 16px; color: var(--text-2); font-weight: 300; line-height: 1.6; }

  /* ----- Ciclo orbital (substitui curve-grid) ----- */
  /* ═══════════════════════════════════════════════════════════════════
     PDCA CYCLE (SGSI ISO 27001) — ciclo do CISO sob demanda
     4 fases (Plan · Do · Check · Act) em CSS Grid 2×2 com core no centro.
     Anel circular decorativo (SVG centrado) com 4 arcos pulsando em
     sequência horária (P→D→C→A).
     ═══════════════════════════════════════════════════════════════════ */
  .cycle-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas:
      "plan core do"
      "act  core check";
    column-gap: 32px;
    row-gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-items: center;
  }
  /* Cards ancorados PRA DENTRO (perto do core) — fechando o quadrado */
  .cycle-node-1 { justify-self: end; }      /* Plan (top-left): encosta na direita */
  .cycle-node-2 { justify-self: start; }    /* Do (top-right): encosta na esquerda */
  .cycle-node-3 { justify-self: start; }    /* Check (bottom-right): encosta na esquerda */
  .cycle-node-4 { justify-self: end; }      /* Act (bottom-left): encosta na direita */
  /* SVG anel circular decorativo — centrado no .cycle-core, sobreposto ao grid */
  .cycle-orbit-svg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, 70%);
    aspect-ratio: 1;
    height: auto;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
  }
  /* Anel base do ciclo PDCA (estático, baixa opacidade) */
  .cycle-ring-base {
    fill: none;
    stroke: rgba(126,229,221,0.14);
    stroke-width: 1.2;
    stroke-dasharray: 3 5;
  }
  /* 4 arcos coloridos um por fase PDCA (P→D→C→A) com pulso correndo em sequência.
     Cada arco = 90° × r=160 ≈ 251px de comprimento. Pulso de 60px com gap de 220px. */
  .cycle-arc-pulse {
    fill: none;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 60 220;
    animation: cycle-arc-flow 4.8s ease-in-out infinite;
  }
  .cycle-arc-pulse.arc-1 { stroke: var(--menta);   animation-delay: 0s;    }   /* Plan */
  .cycle-arc-pulse.arc-2 { stroke: #8E8DFF;        animation-delay: 1.2s;  }   /* Do */
  .cycle-arc-pulse.arc-3 { stroke: #FFC857;        animation-delay: 2.4s;  }   /* Check */
  .cycle-arc-pulse.arc-4 { stroke: #FF8E8E;        animation-delay: 3.6s;  }   /* Act */
  @keyframes cycle-arc-flow {
    0%   { stroke-dashoffset: 280; opacity: 0; }
    15%  { opacity: 0.95; }
    85%  { opacity: 0.95; }
    100% { stroke-dashoffset: -40; opacity: 0; }
  }

  /* Vértices do quadrado PDCA — dots pulsando em sequência horária */
  .cycle-vertex {
    transform-box: fill-box; transform-origin: center;
    animation: cycle-vertex-pulse 4.8s ease-in-out infinite;
  }
  .cycle-vertex.v-1 { animation-delay: 0s;    fill: var(--menta); }   /* Plan */
  .cycle-vertex.v-2 { animation-delay: 1.2s;  fill: #8E8DFF; }         /* Do */
  .cycle-vertex.v-3 { animation-delay: 2.4s;  fill: #FFC857; }         /* Check */
  .cycle-vertex.v-4 { animation-delay: 3.6s;  fill: #FF8E8E; }         /* Act */
  @keyframes cycle-vertex-pulse {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    20%      { opacity: 1; transform: scale(1.4); }
    50%      { opacity: 0.7; transform: scale(1); }
  }

  /* Centro: papel CISO contínuo — célula central do grid */
  .cycle-core {
    grid-area: core;
    position: relative;
    z-index: 3;
    width: 220px; aspect-ratio: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    padding: 26px 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(126,229,221,0.18) 0%, rgba(62,60,249,0.10) 60%, transparent 100%);
    border: 1px solid rgba(126,229,221,0.32);
  }
  .cycle-core::before {
    content: ""; position: absolute; inset: -10px;
    border-radius: 50%;
    border: 1px dashed rgba(126,229,221,0.22);
    animation: cycle-core-spin 60s linear infinite;
  }
  @keyframes cycle-core-spin { to { transform: rotate(360deg); } }
  .cycle-core-pill {
    display: inline-block; padding: 4px 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--menta); color: var(--azulescuro);
    border-radius: 999px;
    margin-bottom: 10px;
  }
  .cycle-core-title {
    font-family: 'Lexend', sans-serif;
    font-size: 16px; font-weight: 500;
    color: var(--text-1); line-height: 1.25;
    letter-spacing: -0.01em;
  }
  .cycle-core-sub {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; color: var(--cinza-2);
    letter-spacing: 0.10em;
    margin-top: 6px;
  }

  /* 5 nós em CSS Grid (named areas) — não mais absolute */
  .cycle-node {
    position: relative;
    width: 100%;
    max-width: 260px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    padding: 22px 16px 14px;
    z-index: 2;
    transition: border-color 0.3s ease, transform 0.3s ease, background 0.3s ease;
  }
  .cycle-node:hover {
    background: rgba(126,229,221,0.05);
    transform: translateY(-3px);
  }
  /* PDCA arrangement via named-areas (clockwise): Plan top-left, Do top-right, Check bottom-right, Act bottom-left */
  .cycle-node-1 { grid-area: plan; }     /* P */
  .cycle-node-2 { grid-area: do; }       /* D */
  .cycle-node-3 { grid-area: check; }    /* C */
  .cycle-node-4 { grid-area: act; }      /* A */

  .cycle-node-1 { border-color: rgba(126,229,221,0.30); }    /* Plan: menta */
  .cycle-node-2 { border-color: rgba(142,141,255,0.30); }    /* Do: lilás */
  .cycle-node-3 { border-color: rgba(255,200,87,0.30); }     /* Check: âmbar */
  .cycle-node-4 { border-color: rgba(255,142,142,0.30); }    /* Act: vermelho-rosado */
  .cycle-node-1:hover { border-color: rgba(126,229,221,0.55); }
  .cycle-node-2:hover { border-color: rgba(142,141,255,0.55); }
  .cycle-node-3:hover { border-color: rgba(255,200,87,0.55); }
  .cycle-node-4:hover { border-color: rgba(255,142,142,0.55); }

  /* Badge da fase PDCA (top-left de cada nó) */
  .cycle-fn-badge {
    position: absolute; top: -14px; left: 16px;
    height: 28px;
    padding: 0 10px;
    background: var(--azulescuro);
    border: 1px solid var(--menta);
    border-radius: 8px;
    color: var(--menta);
    display: inline-flex; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600;
    font-size: 11.5px;
    letter-spacing: 0.06em;
  }
  .cycle-fn-badge::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
  }
  .cycle-node-2 .cycle-fn-badge { color: #8E8DFF; border-color: #8E8DFF; }
  .cycle-node-3 .cycle-fn-badge { color: #FFC857; border-color: #FFC857; }
  .cycle-node-4 .cycle-fn-badge { color: #FF8E8E; border-color: #FF8E8E; }

  .cycle-node-tag {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; color: var(--text-3);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 4px;
  }
  .cycle-node h3 {
    font-size: 14.5px; font-weight: 500; line-height: 1.25;
    color: var(--text-1);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
  }
  .cycle-node p {
    font-size: 12px; color: var(--text-2);
    line-height: 1.5; font-weight: 300;
    margin: 0 0 10px;
  }
  .cycle-node-out {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px; color: var(--cinza-2);
    letter-spacing: 0.04em;
    padding-top: 8px;
    border-top: 1px dashed rgba(255,255,255,0.10);
    line-height: 1.4;
  }

  /* Rodapé do ciclo — reforça que recomeça */
  .cycle-note {
    max-width: 780px; margin: 56px auto 0;
    display: flex; gap: 14px; align-items: center;
    padding: 16px 22px;
    background: rgba(126,229,221,0.05);
    border: 1px solid rgba(126,229,221,0.16);
    border-radius: 12px;
    position: relative; z-index: 1;
  }
  .cycle-note-icon {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--menta);
    color: var(--azulescuro);
    font-size: 18px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .cycle-note-text {
    font-size: 14px; color: var(--text-2);
    line-height: 1.5; font-weight: 300;
  }
  .cycle-note-text strong { color: var(--menta); font-weight: 500; }

  @media (max-width: 980px) {
    .cycle-stage {
      display: flex; flex-direction: column;
      gap: 20px;
      max-width: 480px;
      padding-top: 12px;
      grid-template-columns: none;
      grid-template-rows: none;
      grid-template-areas: none;
      align-items: stretch;
      justify-items: stretch;
    }
    .cycle-orbit-svg { display: none; }
    .cycle-core {
      width: 100%; aspect-ratio: auto;
      border-radius: 14px;
      padding: 18px 16px;
      order: -1;
    }
    .cycle-core::before { display: none; }
    .cycle-node {
      width: 100%;
      max-width: 100%;
    }
    .curve-title { font-size: 28px; }
  }

  /* ======= A ANÁLISE HONESTA ======= */
  /* "A análise honesta" — visual igual à "A matemática do modelo" da MSP */
  .analysis {
    background: var(--azulescuro); color: var(--text-1);
    padding: 100px 0; position: relative; overflow: hidden;
  }
  /* Barra superior horizontal — distingue de .pricing-model (que tem gradient menta+azul) */
  .analysis::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(126,229,221,0.55) 50%, transparent);
    opacity: 0.7;
  }
  /* Halo radial sutil ao centro */
  .analysis::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, rgba(126,229,221,0.05) 0%, transparent 70%);
  }
  .analysis > .container { position: relative; z-index: 1; }
  .analysis-head { max-width: 880px; margin: 0 auto 48px; text-align: center; position: relative; z-index: 1; }
  .analysis-title {
    font-size: clamp(32px, 4vw, 48px); line-height: 1.05; letter-spacing: -0.03em;
    font-weight: 600; color: var(--text-1); margin-bottom: 16px;
  }
  .analysis-title .grad {
    background: var(--gradiente);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
  }
  .analysis-sub {
    font-size: 16px; line-height: 1.55; color: var(--text-2); font-weight: 300; max-width: 660px; margin: 0 auto;
  }
  .analysis-sub strong { color: var(--menta); font-weight: 500; }

  /* Grid igual ao .compare-grid */
  .analysis-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    position: relative; z-index: 1; max-width: 1080px; margin: 0 auto 36px;
    border: 1px solid var(--border-2); border-radius: 14px; overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,0.5);
  }
  @media (max-width: 780px) { .analysis-grid { grid-template-columns: 1fr; } }

  .analysis-col {
    padding: 36px 32px;
    display: flex; flex-direction: column; gap: 18px;
    position: relative;
  }
  /* Coluna "vale ir pra cloud" = equivalente ao .mensal (positiva, com gradient) */
  .analysis-col-yes {
    background: linear-gradient(180deg, rgba(126,229,221,0.06), rgba(62,60,249,0.04));
  }
  .analysis-col-yes::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--gradiente);
  }
  /* Coluna "talvez não vale" = equivalente ao .por-hora (sóbria) */
  .analysis-col-no {
    background: rgba(255,255,255,0.015);
    border-right: 1px solid var(--border);
  }
  @media (max-width: 780px) {
    .analysis-col-no { border-right: none; border-bottom: 1px solid var(--border); }
  }

  /* Tag estilo .compare-eyebrow com switch indicator */
  .analysis-tag {
    font-family: 'JetBrains Mono', monospace; font-size: 11px;
    letter-spacing: 0.14em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px;
    border: none; padding: 0; background: transparent; box-shadow: none;
    border-radius: 0;
  }
  .analysis-tag svg { display: none; }
  .analysis-tag-yes { color: var(--menta); }
  .analysis-tag-no  { color: var(--text-4); }
  .analysis-tag::before {
    content: ""; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0;
  }
  .analysis-tag-yes::before { background: var(--menta); box-shadow: 0 0 6px rgba(126,229,221,0.6); }
  .analysis-tag-no::before  { background: rgba(255,255,255,0.20); border: 1px solid rgba(255,255,255,0.30); }

  /* Nome (h3) de cada coluna, estilo .compare-name */
  .analysis-name {
    font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
    margin-bottom: 0;
  }
  .analysis-col-yes .analysis-name { color: var(--text-1); }
  .analysis-col-no  .analysis-name { color: var(--text-3); }

  /* Items estilo .compare-line — sem cards, com mark redondo */
  .analysis-items {
    display: flex; flex-direction: column; gap: 14px; margin-top: 4px;
  }
  .analysis-item {
    display: flex; gap: 12px; align-items: flex-start;
    font-size: 14.5px; line-height: 1.55; font-weight: 300;
    padding: 0; background: transparent; border: none; border-radius: 0;
    transition: none;
  }
  .analysis-item:hover { background: transparent; transform: none; }
  .analysis-item-icon {
    flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-family: 'JetBrains Mono', monospace; font-weight: 700;
    margin-top: 1px;
  }
  .analysis-item-icon svg { width: 12px; height: 12px; }
  .analysis-item-icon.ai-yes { background: rgba(126,229,221,0.20); color: var(--menta); }
  .analysis-item-icon.ai-no  { background: rgba(255,255,255,0.05); color: var(--text-4); }
  .analysis-item-text {
    display: flex; flex-direction: column; gap: 3px;
  }
  .analysis-col-yes .analysis-item-text { color: var(--text-2); }
  .analysis-col-no  .analysis-item-text { color: var(--text-3); }
  .analysis-item-text strong {
    font-weight: 500;
    font-size: 15px;
    line-height: 1.4;
  }
  .analysis-col-yes .analysis-item-text strong { color: var(--text-1); }
  .analysis-col-no  .analysis-item-text strong { color: var(--text-2); }

  /* Note do rodapé — caixa com gradient sutil */
  .analysis-note {
    display: flex; align-items: flex-start; gap: 16px;
    max-width: 1080px; margin: 0 auto;
    background: linear-gradient(135deg, rgba(126,229,221,0.06) 0%, rgba(62,60,249,0.06) 100%);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 26px;
    font-size: 14.5px;
    color: var(--text-2);
    font-weight: 300;
    line-height: 1.65;
    position: relative; z-index: 1;
  }
  .analysis-note-icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--menta);
    color: var(--azulescuro);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(126,229,221,0.30);
  }
  .analysis-note-icon svg { width: 20px; height: 20px; }
  .analysis-note strong { color: var(--menta); font-weight: 500; }
  @media (max-width: 880px) {
    .analysis-title { font-size: 28px; }
    .analysis-note { flex-direction: column; gap: 12px; padding: 20px; }
  }

  /* ═══════════════════════════════════════════════════════════════════
     PSA DASHBOARD — hero visual da S&C
     Mockup da plataforma de GRC própria da Zulti. Dashboard agregado de
     domínios ISO 27001 (Anexo A) com tier de cobertura por domínio,
     barras de progresso animadas e KPIs de maturidade. Linha extra pra
     normas adicionais (42001 com badge "novo"). Footer com
     evidências coletadas + próxima cobrança externa.
     ═══════════════════════════════════════════════════════════════════ */
  .anchor-console {
    position: relative;
    width: 100%;
    max-width: 580px;
    background: linear-gradient(180deg, #1F0E48 0%, #150834 100%);
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.04) inset,
      0 24px 60px -20px rgba(0,0,0,0.55),
      0 8px 20px -8px rgba(0,0,0,0.35);
    overflow: hidden;
    font-family: 'Lexend', sans-serif;
  }

  /* Header: tag + título do arquivo/contexto + status pill */
  .anchor-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(126,229,221,0.05) 0%, rgba(126,229,221,0) 100%);
  }
  .anchor-head-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--menta);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .anchor-head-title {
    margin-left: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--text-2);
    letter-spacing: 0.02em;
  }
  .anchor-head-status {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--menta);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: rgba(126,229,221,0.10);
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(126,229,221,0.24);
  }
  .anchor-head-status .progress {
    color: var(--text-2);
    font-weight: 500;
  }

  /* Meta line: cliente / ciclo / escopo (compacta) */
  .anchor-meta {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    padding: 11px 20px 10px;
    border-bottom: 1px dashed rgba(255,255,255,0.08);
  }
  .anchor-meta-item {
    display: inline-flex; flex-direction: column; gap: 3px;
  }
  .anchor-meta-lbl {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .anchor-meta-val {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-1);
    letter-spacing: -0.005em;
  }
  .anchor-meta-val.accent { color: var(--menta); }

  /* Lista de checks (controles) */
  .anchor-domains {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 14px 4px;
  }
  .anchor-domain {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 7.5px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    opacity: 0;
    animation: anchor-domain-in 0.55s ease-out forwards;
  }
  .anchor-domain:last-child { border-bottom: none; }
  /* Stagger das 8 entradas — 160ms entre cada */
  .anchor-domain:nth-child(1) { animation-delay: 0.10s; }
  .anchor-domain:nth-child(2) { animation-delay: 0.26s; }
  .anchor-domain:nth-child(3) { animation-delay: 0.42s; }
  .anchor-domain:nth-child(4) { animation-delay: 0.58s; }
  .anchor-domain:nth-child(5) { animation-delay: 0.74s; }
  .anchor-domain:nth-child(6) { animation-delay: 0.90s; }
  .anchor-domain:nth-child(7) { animation-delay: 1.06s; }
  .anchor-domain:nth-child(8) { animation-delay: 1.22s; }
  @keyframes anchor-domain-in {
    0%   { opacity: 0; transform: translateX(-8px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  /* Ícone de status: done (✓ menta) · loading (spinner) · pending (clock cinza) */
  .anchor-domain-icon {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  /* Done — check verde com scale-in */
  .anchor-domain[data-state="done"] .anchor-domain-icon {
    background: rgba(126,229,221,0.16);
    border: 1px solid rgba(126,229,221,0.45);
    color: var(--menta);
    animation: anchor-domain-pop 0.4s ease-out backwards;
  }
  .anchor-domain[data-state="done"]:nth-child(1) .anchor-domain-icon { animation-delay: 0.45s; }
  .anchor-domain[data-state="done"]:nth-child(2) .anchor-domain-icon { animation-delay: 0.61s; }
  .anchor-domain[data-state="done"]:nth-child(3) .anchor-domain-icon { animation-delay: 0.77s; }
  .anchor-domain[data-state="done"]:nth-child(4) .anchor-domain-icon { animation-delay: 0.93s; }
  .anchor-domain[data-state="done"]:nth-child(5) .anchor-domain-icon { animation-delay: 1.09s; }
  .anchor-domain[data-state="done"]:nth-child(6) .anchor-domain-icon { animation-delay: 1.25s; }
  .anchor-domain[data-state="done"]:nth-child(7) .anchor-domain-icon { animation-delay: 1.41s; }
  .anchor-domain[data-state="done"]:nth-child(8) .anchor-domain-icon { animation-delay: 1.57s; }
  @keyframes anchor-domain-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }
  .anchor-domain-icon svg {
    width: 12px; height: 12px;
    stroke-width: 2.8;
  }
  /* Loading — spinner girando em loop contínuo */
  .anchor-domain[data-state="loading"] .anchor-domain-icon {
    background: rgba(255,200,87,0.10);
    border: 1px solid rgba(255,200,87,0.30);
    color: #FFC857;
    position: relative;
  }
  .anchor-domain[data-state="loading"] .anchor-domain-icon::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1.6px solid transparent;
    border-top-color: #FFC857;
    border-right-color: #FFC857;
    animation: anchor-spin 1.1s linear infinite;
  }
  @keyframes anchor-spin {
    to { transform: rotate(360deg); }
  }
  /* Pending — clock cinza */
  .anchor-domain[data-state="pending"] .anchor-domain-icon {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-3);
  }

  /* Body do check: nome do controle + norma/artigo */
  .anchor-domain-body {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
  }
  .anchor-domain-name {
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-1);
    line-height: 1.2;
    letter-spacing: -0.005em;
  }
  .anchor-domain[data-state="pending"] .anchor-domain-name { color: var(--text-3); }
  .anchor-domain-ref {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    color: var(--text-3);
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
  .anchor-domain-ref b { color: var(--text-2); font-weight: 400; }

  /* Pill de status à direita */
  .anchor-domain-tag {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    flex-shrink: 0;
  }
  .anchor-domain[data-state="done"]    .anchor-domain-tag { background: rgba(126,229,221,0.10); color: var(--menta); }
  .anchor-domain[data-state="loading"] .anchor-domain-tag { background: rgba(255,200,87,0.10);  color: #FFC857; }
  .anchor-domain[data-state="pending"] .anchor-domain-tag { background: rgba(255,255,255,0.04); color: var(--text-3); }

  /* Footer: evidências + próxima auditoria */
  .anchor-foot {
    padding: 10px 20px 12px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    color: var(--text-3);
    letter-spacing: 0.02em;
    background: rgba(255,255,255,0.015);
  }
  .anchor-foot strong { color: var(--menta); font-weight: 500; }
  .anchor-foot-sep { color: var(--text-4); }

  /* ─────────────────────────────────────────────────────────────────────
     DD QUESTIONNAIRE MOCKUP — visual de documento sendo respondido
     Estrutura de questionário com cabeçalho de identificação, perguntas
     numeradas com respostas (cards) e refs de evidência. Footer com
     status (submetido / em revisão) e contagem de evidências.
     ──────────────────────────────────────────────────────────────────── */

  /* Override container: papel/dossiê em vez de console */
  .anchor-console {
    background: linear-gradient(180deg, #1F0E48 0%, #160938 100%);
  }

  /* Header (documento) */
  .anchor-head {
    padding: 10px 16px;
    background: linear-gradient(180deg, rgba(126,229,221,0.07) 0%, rgba(126,229,221,0) 100%);
  }
  .anchor-head-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .anchor-head-title {
    font-size: 10px;
    color: var(--text-3);
    margin-left: 6px;
  }
  /* Status pill — "submetido" */
  .anchor-head-status {
    background: rgba(126,229,221,0.10);
    border: 1px solid rgba(126,229,221,0.30);
    padding: 3px 9px 3px 7px;
    gap: 6px;
    font-size: 9px;
  }
  .anchor-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--menta);
    box-shadow: 0 0 6px rgba(126,229,221,0.8);
    animation: anchor-status-pulse 1.8s ease-in-out infinite;
  }
  @keyframes anchor-status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
  }

  /* Identificação Vendor/Acquirer/Section */
  .anchor-meta {
    padding: 9px 16px 8px;
    gap: 18px;
  }
  .anchor-meta-val.accent {
    color: var(--menta);
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }

  /* Lista de perguntas + respostas */
  .anchor-domains {
    padding: 2px 16px 6px;
  }
  .anchor-domain {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }
  .anchor-domain:last-child { border-bottom: none !important; }

  /* Pergunta (linha topo) */
  .anchor-question {
    display: flex;
    align-items: baseline;
    gap: 7px;
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--text-2);
    font-weight: 400;
  }
  .anchor-q-num {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-3);
    font-weight: 500;
    font-size: 9.5px;
    flex-shrink: 0;
    letter-spacing: 0.04em;
  }
  .anchor-q-text {
    color: var(--text-2);
    flex: 1;
  }
  .anchor-q-text em {
    color: var(--text-3);
    font-style: normal;
  }

  /* Resposta (campo preenchido tipo input) */
  .anchor-answer {
    margin-left: 24px;
    padding: 5px 9px;
    background: rgba(126,229,221,0.07);
    border: 1px solid rgba(126,229,221,0.22);
    border-radius: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-1);
    line-height: 1.3;
    font-weight: 400;
  }
  .anchor-answer-icon {
    flex-shrink: 0;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--menta);
    color: var(--azulescuro);
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 6px rgba(126,229,221,0.45);
  }
  .anchor-answer-icon svg {
    width: 8px; height: 8px;
    stroke-width: 3;
  }
  .anchor-answer-text {
    flex: 1;
    min-width: 0;
  }
  .anchor-answer-ref {
    font-family: 'JetBrains Mono', monospace;
    font-size: 8.5px;
    color: var(--menta);
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Estado: em revisão (âmbar) */
  .anchor-domain[data-state="review"] .anchor-answer {
    background: rgba(255,200,87,0.08);
    border-color: rgba(255,200,87,0.28);
  }
  .anchor-domain[data-state="review"] .anchor-answer-icon {
    background: #FFC857;
    box-shadow: 0 0 8px rgba(255,200,87,0.45);
    position: relative;
  }
  .anchor-domain[data-state="review"] .anchor-answer-icon::before {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: var(--azulescuro);
    border-right-color: var(--azulescuro);
    animation: anchor-spin-review 0.9s linear infinite;
  }
  @keyframes anchor-spin-review {
    to { transform: rotate(360deg); }
  }
  .anchor-domain[data-state="review"] .anchor-answer-icon svg { display: none; }
  .anchor-domain[data-state="review"] .anchor-answer-ref {
    color: #FFC857;
  }

  /* Stagger das perguntas entrando */
  .anchor-domain {
    opacity: 0;
    animation: anchor-domain-in 0.5s ease-out forwards;
  }
  .anchor-domain:nth-of-type(1) { animation-delay: 0.12s; }
  .anchor-domain:nth-of-type(2) { animation-delay: 0.26s; }
  .anchor-domain:nth-of-type(3) { animation-delay: 0.40s; }
  .anchor-domain:nth-of-type(4) { animation-delay: 0.54s; }
  .anchor-domain:nth-of-type(5) { animation-delay: 0.68s; }
  .anchor-domain:nth-of-type(6) { animation-delay: 0.82s; }
  @keyframes anchor-domain-in {
    0%   { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Resposta entra após pergunta (delay extra) */
  .anchor-answer {
    opacity: 0;
    animation: anchor-answer-in 0.45s ease-out forwards;
  }
  .anchor-domain:nth-of-type(1) .anchor-answer { animation-delay: 0.55s; }
  .anchor-domain:nth-of-type(2) .anchor-answer { animation-delay: 0.69s; }
  .anchor-domain:nth-of-type(3) .anchor-answer { animation-delay: 0.83s; }
  .anchor-domain:nth-of-type(4) .anchor-answer { animation-delay: 0.97s; }
  .anchor-domain:nth-of-type(5) .anchor-answer { animation-delay: 1.11s; }
  .anchor-domain:nth-of-type(6) .anchor-answer { animation-delay: 1.25s; }
  @keyframes anchor-answer-in {
    0%   { opacity: 0; transform: translateX(-4px); }
    100% { opacity: 1; transform: translateX(0); }
  }

  /* Footer atualizado */
  .anchor-foot {
    padding: 9px 16px 11px;
    font-size: 9px;
  }

  @media (max-width: 880px) {
    .anchor-console { max-width: 100%; }
    .anchor-meta { gap: 14px; padding: 8px 14px 7px; }
    .anchor-domains { padding: 2px 12px 5px; }
    .anchor-domain { padding: 5px 0 !important; }
    .anchor-question { font-size: 10px; }
    .anchor-answer { margin-left: 18px; padding: 4px 8px; font-size: 10.5px; }
    .anchor-answer-ref { font-size: 8px; }
  }

/* ── bloco 3 (extraido do inline) ── */


/* ── bloco 4 (extraido do inline) ── */
/* ============================================================
   QUEM SOMOS — estilos editoriais standalone
   Não reaproveita componentes das páginas comerciais.
   ============================================================ */

.qs {
  background: var(--azulescuro);
  color: var(--text-1);
  font-family: 'Lexend', system-ui, sans-serif;
}

.qs-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.qs-container-narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Breadcrumb ── */
.qs-breadcrumb {
  display: flex; justify-content: center; align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 32px;
}
.qs-breadcrumb a {
  color: var(--text-3); text-decoration: none;
  transition: color 0.2s;
}
.qs-breadcrumb a:hover { color: var(--menta); }
.qs-bc-group { color: var(--text-3); }
.qs-bc-current { color: var(--text-2); }

/* ── Eyebrow editorial (alinhado com .eyebrow das páginas de serviço) ── */
.qs-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--menta);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 18px; font-weight: 500;
}
.qs-eyebrow.qs-eyebrow-block {
  display: flex; justify-content: flex-start;
  margin-bottom: 18px;
}
.qs-line {
  display: inline-block; width: 18px; height: 1px;
  background: var(--menta);
}

/* ── Hero ── */
.qs-hero {
  padding: 80px 0 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.qs-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(62,60,249,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 50% 70%, rgba(126,229,221,0.10) 0%, transparent 70%);
  z-index: 0; pointer-events: none;
}
.qs-hero .qs-container { position: relative; z-index: 1; }

.qs-hero .qs-eyebrow {
  display: inline-flex; justify-content: center;
  margin-bottom: 40px;
}

/* Número decorativo "09 anos" */
.qs-bignum {
  display: inline-flex; align-items: baseline; justify-content: center;
  gap: 16px; margin: 0 auto 28px; line-height: 1;
}
.qs-bignum-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(80px, 12vw, 140px);
  font-weight: 700;
  background: linear-gradient(135deg, var(--menta) 0%, var(--azul) 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.05em; line-height: 0.85;
  filter: drop-shadow(0 12px 40px rgba(126,229,221,0.22));
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}
.qs-bignum-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px; color: var(--text-3);
  letter-spacing: 0.2em; text-transform: uppercase;
  align-self: flex-end; padding-bottom: 18px;
}

/* H1 editorial */
.qs-h1 {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 600; line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-1);
  margin: 0 auto 28px;
  max-width: 760px;
}

/* H1 escalonado — cada linha entra com delay editorial */
.qs-h1-staged {
  display: block;
}
.qs-h1-line {
  display: block;
  opacity: 0;
  transform: translateY(20px);
  animation: qs-h1-rise 0.7s cubic-bezier(0.22, 0.68, 0.18, 1) forwards;
}
.qs-h1-line-1 { animation-delay: 0.15s; }
.qs-h1-line-2 { animation-delay: 0.55s; }
.qs-h1-line-3 { animation-delay: 0.95s; }
@keyframes qs-h1-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Underline animado sob "Uma tese." — desenha após a 3ª linha entrar */
.qs-grad-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.qs-grad-underline::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: linear-gradient(90deg, var(--menta) 0%, var(--azul) 60%, #a78bfa 100%);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: qs-underline-draw 0.85s cubic-bezier(0.7, 0, 0.3, 1) 1.55s forwards;
}
@keyframes qs-underline-draw {
  to { transform: scaleX(1); }
}

/* Lede + CTAs entram depois do h1 completar */
.qs-fade-late {
  opacity: 0;
  transform: translateY(12px);
  animation: qs-fade-late-rise 0.7s cubic-bezier(0.22, 0.68, 0.18, 1) forwards;
}
.qs-fade-late:nth-of-type(1),
p.qs-fade-late { animation-delay: 1.7s; }
div.qs-fade-late { animation-delay: 1.95s; }
@keyframes qs-fade-late-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Linha vertical de transição até o manifesto */
.qs-scroll-line {
  position: relative;
  width: 1px; height: 56px;
  margin: 56px auto 0;
  opacity: 0;
  animation: qs-fade-late-rise 0.7s cubic-bezier(0.22, 0.68, 0.18, 1) 2.3s forwards;
}
.qs-scroll-line-track {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(126,229,221,0.5) 50%, transparent 100%);
}
.qs-scroll-line-dot {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--menta);
  box-shadow: 0 0 8px rgba(126,229,221, 0.7);
  animation: qs-scroll-dot-fall 2.4s ease-in-out 2.5s infinite;
}
@keyframes qs-scroll-dot-fall {
  0% { top: 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: calc(100% - 5px); opacity: 0; }
}

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .qs-h1-line { opacity: 1 !important; transform: none !important; animation: none !important; }
  .qs-grad-underline::after { transform: scaleX(1) !important; animation: none !important; }
  .qs-fade-late { opacity: 1 !important; transform: none !important; animation: none !important; }
  .qs-scroll-line { opacity: 0.5 !important; animation: none !important; }
  .qs-scroll-line-dot { animation: none !important; }
}
.qs-grad {
  background: linear-gradient(135deg, var(--menta) 0%, var(--azul) 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}

/* Lede (subtítulo + parágrafos intro) */
.qs-lede {
  font-size: 18px; line-height: 1.55;
  color: var(--text-2); font-weight: 300;
  margin: 0 auto 40px; max-width: 560px;
  text-align: center;
}
.qs-lede strong { color: var(--text-1); font-weight: 500; }
.qs-lede-left { text-align: left; margin: 0 0 44px; max-width: 100%; }

/* ── Actions / botões ── */
.qs-actions {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-bottom: 64px;
}
.qs-actions-left { display: flex; justify-content: flex-start; margin: 32px 0 36px; }

.qs-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px; border-radius: 8px;
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 500;
  text-decoration: none; transition: transform 0.2s, background 0.2s, border-color 0.2s;
  letter-spacing: -0.01em;
}
.qs-btn:hover { transform: translateY(-1px); }
.qs-btn-primary {
  background: var(--azul); color: #fff;
  box-shadow: 0 10px 28px -10px var(--azul-glow);
}
.qs-btn-primary:hover { background: var(--azul-deep); }
.qs-btn-secondary {
  background: transparent; color: var(--text-1);
  border: 1px solid var(--border-2);
}
.qs-btn-secondary:hover { border-color: var(--menta); color: var(--menta); }

/* ── Stats strip (2-up) ── */
.qs-stats {
  display: flex; align-items: stretch; justify-content: center; flex-wrap: nowrap;
  padding: 28px 24px; max-width: 640px; margin: 0 auto;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 16px;
}
.qs-stats-pair .qs-stat { max-width: 280px; }
.qs-stat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 18px;
}
.qs-stat-n {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 700; color: var(--menta);
  letter-spacing: -0.03em; line-height: 1;
}
.qs-stat-l {
  font-size: 13px; color: var(--text-2); font-weight: 500;
  line-height: 1.4; text-align: center;
}
.qs-stat-l em {
  font-style: normal; color: var(--text-3); font-weight: 400;
  display: block; font-size: 11.5px; margin-top: 2px;
}
.qs-stat-sep {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-2), transparent);
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .qs-stats { flex-direction: column; gap: 22px; padding: 22px 18px; }
  .qs-stat-sep { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, var(--border-2), transparent); }
}

/* ── Sections genéricas ── */
.qs-section {
  padding: 96px 0;
  position: relative;
}
.qs-section-dark {
  background: linear-gradient(180deg, var(--azulescuro) 0%, var(--violeta) 100%);
}

/* ============================================================
   LIGHT THEME — papel editorial (off-white quente)
   Inversão de cores: texto dark sobre papel claro
   ============================================================ */
.qs-section-light {
  background: #f5f3ee;
  color: #1a1322;
  border-top: 1px solid rgba(24, 6, 54, 0.08);
}
.qs-section-light .qs-h2 { color: #15101e; }
.qs-section-light .qs-h2 .qs-grad {
  background: linear-gradient(135deg, #2A1FB8 0%, #3E3CF9 60%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}
.qs-section-light .qs-lede,
.qs-section-light .qs-prose p,
.qs-section-light .qs-principle-body p,
.qs-section-light .qs-cred-desc {
  color: #4a4159;
}
.qs-section-light .qs-prose strong,
.qs-section-light .qs-lede strong { color: #15101e; font-weight: 600; }
.qs-section-light .qs-eyebrow { color: #3E3CF9; }
.qs-section-light .qs-line {
  background: #3E3CF9;
}

/* Princípios em light */
.qs-section-light .qs-principle { border-bottom: 1px solid rgba(24, 6, 54, 0.08); }
.qs-section-light .qs-principle:last-child { border-bottom: none; }
.qs-section-light .qs-principle-n {
  background: linear-gradient(135deg, #2A1FB8 0%, #3E3CF9 60%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}
.qs-section-light .qs-principle-h { color: #15101e; }

/* Credenciais em light */
.qs-section-light .qs-cred {
  background: #fff;
  border: 1px solid rgba(24, 6, 54, 0.08);
  box-shadow: 0 2px 8px -2px rgba(24, 6, 54, 0.04);
}
.qs-section-light .qs-cred:hover {
  border-color: rgba(62, 60, 249, 0.35);
  background: #fff;
  box-shadow: 0 8px 20px -8px rgba(62, 60, 249, 0.18);
}
.qs-section-light .qs-cred.qs-cred-soon { background: rgba(24, 6, 54, 0.02); }
.qs-section-light .qs-cred-mark { background: #3E3CF9; color: #fff; }
.qs-section-light .qs-cred-mark-soon {
  background: transparent; color: #8a7e9d;
  border: 1px solid rgba(24, 6, 54, 0.15);
}
.qs-section-light .qs-cred-name { color: #15101e; }
.qs-section-light .qs-cred-desc a {
  color: #3E3CF9;
  border-bottom-color: rgba(62, 60, 249, 0.35);
}
.qs-section-light .qs-cred-tag {
  border-top: 1px solid rgba(24, 6, 54, 0.08);
  color: #8a7e9d;
}

/* ============================================================
   ELEMENTOS EDITORIAIS DISTRIBUÍDOS — números, timeline, ícones
   ============================================================ */

/* Pattern sutil de fundo nas seções light (linhas verticais coluna de jornal) */
.qs-section-light {
  background-image:
    repeating-linear-gradient(90deg,
      transparent 0,
      transparent 79px,
      rgba(24, 6, 54, 0.025) 79px,
      rgba(24, 6, 54, 0.025) 80px);
}

/* Número decorativo de seção (MANIFESTO · 01) */
.qs-section-mark {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(24, 6, 54, 0.10);
}
.qs-section-mark-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: #3E3CF9; font-weight: 600;
}
.qs-section-mark-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px; font-weight: 700;
  background: linear-gradient(135deg, #2A1FB8 0%, #3E3CF9 60%, #7c3aed 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.04em; line-height: 1;
  opacity: 0.92;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}
/* Versão dark do section-mark (Fundador) */
.qs-section .qs-section-mark { border-bottom-color: rgba(126, 229, 221, 0.12); }
.qs-section:not(.qs-section-light) .qs-section-mark-name { color: var(--menta); }
.qs-section:not(.qs-section-light) .qs-section-mark-num {
  background: linear-gradient(135deg, var(--menta) 0%, var(--azul) 60%, #a78bfa 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}

/* Pull-quote no Manifesto */
.qs-pullquote {
  margin: 36px 0;
  padding: 28px 0 28px 28px;
  border-left: 3px solid #3E3CF9;
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500; line-height: 1.25;
  letter-spacing: -0.02em;
  color: #15101e;
}
.qs-pullquote-mark {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3E3CF9; font-weight: 600;
  margin-bottom: 10px;
}

/* Ícones SVG line-art nos princípios */
.qs-principle-ic {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(62, 60, 249, 0.06);
  border: 1px solid rgba(62, 60, 249, 0.18);
  color: #3E3CF9;
}
.qs-principle-ic svg { width: 22px; height: 22px; }
.qs-section-light .qs-principle {
  align-items: flex-start; gap: 22px;
}
/* Reorganizar layout do princípio com ícone */
.qs-section-light .qs-principle .qs-principle-n {
  width: auto; min-width: 48px;
}

/* H2 editorial */
.qs-h2 {
  font-size: clamp(32px, 4.4vw, 48px);
  font-weight: 600; line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--text-1);
  margin: 0 0 32px;
}

/* Prose long-form */
.qs-prose p {
  font-size: 17px; line-height: 1.72;
  color: var(--text-2); font-weight: 300;
  margin: 0 0 22px;
}
.qs-prose p:last-child { margin-bottom: 0; }
.qs-prose strong { color: var(--text-1); font-weight: 500; }

/* ── Fundador ── */
.qs-founder-row {
  display: flex; align-items: center; gap: 28px;
  padding: 28px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 16px;
  margin-top: 12px;
}
.qs-founder-avatar {
  flex-shrink: 0;
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, var(--menta) 0%, var(--azul) 60%, #a78bfa 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700; color: #fff;
  letter-spacing: -0.02em;
  box-shadow: 0 12px 36px -12px rgba(62,60,249,0.5);
}
.qs-founder-info { flex: 1; }
.qs-founder-name {
  font-size: 22px; font-weight: 600;
  color: var(--text-1); letter-spacing: -0.015em;
}
.qs-founder-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--menta);
  letter-spacing: 0.1em; margin-top: 2px;
}
.qs-founder-bio {
  font-size: 14.5px; color: var(--text-2); font-weight: 300;
  line-height: 1.6; margin: 12px 0 0;
}
@media (max-width: 560px) {
  .qs-founder-row { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ── Princípios (lista numerada editorial) ── */
.qs-principles {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
}
.qs-principle {
  display: flex; gap: 24px;
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
}
.qs-principle:last-child { border-bottom: none; padding-bottom: 0; }
.qs-principle:first-child { padding-top: 0; }
.qs-principle-n {
  flex-shrink: 0; width: 56px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px; font-weight: 700;
  background: linear-gradient(135deg, var(--menta), var(--azul));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em; line-height: 1;
  display: inline-block; padding-right: 0.12em; padding-bottom: 0.08em;
}
.qs-principle-body { flex: 1; }
.qs-principle-h {
  font-size: 20px; font-weight: 600;
  color: var(--text-1); letter-spacing: -0.015em;
  margin: 0 0 10px;
}
.qs-principle-body p {
  font-size: 15.5px; line-height: 1.7;
  color: var(--text-2); font-weight: 300;
  margin: 0;
}
@media (max-width: 640px) {
  .qs-principle { gap: 16px; }
  .qs-principle-n { width: 44px; font-size: 24px; }
}

/* ── Credenciais ── */
.qs-creds {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  margin-top: 12px;
}
.qs-cred {
  display: flex; gap: 18px;
  padding: 26px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.25s, background 0.25s;
}
.qs-cred:hover {
  border-color: rgba(126,229,221,0.4);
  background: rgba(126,229,221,0.04);
}
.qs-cred.qs-cred-soon { opacity: 0.85; background: rgba(255,255,255,0.012); }
.qs-cred-mark {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--menta); color: var(--azulescuro);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px; font-weight: 700;
}
.qs-cred-mark-soon {
  background: transparent; color: var(--text-3);
  border: 1px solid var(--border-2);
  font-size: 18px;
}
.qs-cred-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.qs-cred-name {
  font-size: 16px; font-weight: 600;
  color: var(--text-1); letter-spacing: -0.012em;
  margin: 0;
}
.qs-cred-desc {
  font-size: 13.5px; line-height: 1.62;
  color: var(--text-2); font-weight: 300;
  margin: 0;
}
.qs-cred-desc a {
  color: var(--menta); text-decoration: none;
  border-bottom: 1px dotted rgba(126,229,221,0.4);
}
.qs-cred-tag {
  margin-top: auto; padding-top: 8px;
  border-top: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; color: var(--text-3);
  letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Contato ── */
.qs-section-contact { padding-bottom: 120px; }

.qs-channels {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 28px;
}
.qs-channel {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px; color: var(--text-2);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.qs-channel:hover {
  border-color: var(--menta);
  color: var(--text-1);
  background: rgba(126,229,221,0.04);
}
.qs-channel-ic {
  width: 18px !important; height: 18px !important;
  flex-shrink: 0; color: var(--menta);
}

/* ── Fade-in observer ── */
.qs [data-qs-reveal] {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.qs [data-qs-reveal].is-visible {
  opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .qs [data-qs-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ── bloco 5 (extraido do inline) ── */
/* ═══════════════════════════════════════════════════════════════
   Mobile Drawer Menu — Zulti
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button (visível abaixo de 960px) */
.nav-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  cursor: pointer;
  padding: 0; margin-left: 10px;
  position: relative;
  transition: border-color 0.2s, background 0.2s;
  z-index: 1001;
}
.nav-hamburger:hover { border-color: rgba(126,229,221,0.4); background: rgba(126,229,221,0.04); }
.nav-hamburger:focus-visible { outline: 2px solid #7EE5DD; outline-offset: 2px; }

.nav-hamburger-icon {
  position: relative;
  width: 20px; height: 14px;
  display: block;
}
.nav-hamburger-icon span {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.2s ease,
              top 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-hamburger-icon span:nth-child(1) { top: 0; }
.nav-hamburger-icon span:nth-child(2) { top: 6px; }
.nav-hamburger-icon span:nth-child(3) { top: 12px; }

/* Estado aberto — X */
.nav-hamburger.is-open .nav-hamburger-icon span:nth-child(1) {
  top: 6px; transform: rotate(45deg);
}
.nav-hamburger.is-open .nav-hamburger-icon span:nth-child(2) {
  opacity: 0;
}
.nav-hamburger.is-open .nav-hamburger-icon span:nth-child(3) {
  top: 6px; transform: rotate(-45deg);
}

/* Backdrop */
.nav-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(11, 2, 32, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 998;
}
.nav-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

/* Drawer lateral */
.nav-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(380px, 88vw);
  background: #180636;
  border-left: 1px solid rgba(255,255,255,0.06);
  box-shadow: -20px 0 60px -10px rgba(0,0,0,0.5);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  z-index: 1000;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer.is-open { transform: translateX(0); }

.nav-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.nav-drawer-head img { height: 26px; }
.nav-drawer-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  cursor: pointer; padding: 0;
  color: #FFFFFF;
  transition: border-color 0.2s, background 0.2s;
}
.nav-drawer-close:hover { border-color: rgba(126,229,221,0.4); background: rgba(126,229,221,0.04); }
.nav-drawer-close svg { width: 16px; height: 16px; }

.nav-drawer-body {
  padding: 18px 22px 24px;
  flex: 1;
}

.nav-drawer-group {
  margin-bottom: 22px;
}
.nav-drawer-group-title {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.18em;
  color: #847FAC;
  text-transform: uppercase;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.nav-drawer-link {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  text-decoration: none;
  color: #FFFFFF;
  transition: color 0.2s, transform 0.2s;
}
.nav-drawer-link:hover { color: #7EE5DD; transform: translateX(2px); }
.nav-drawer-link-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(126,229,221,0.06);
  border: 1px solid rgba(126,229,221,0.18);
  color: #7EE5DD;
}
.nav-drawer-link-icon svg { width: 16px; height: 16px; }
.nav-drawer-link-text {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-drawer-link-title {
  font-size: 14.5px; font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.nav-drawer-link-desc {
  font-size: 11.5px; color: #C3C0DC; font-weight: 300;
  line-height: 1.4;
}
.nav-drawer-link-new {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em;
  color: #7EE5DD;
  background: rgba(126,229,221,0.10);
  padding: 1px 6px; border-radius: 4px;
  margin-left: 6px; text-transform: uppercase;
}

.nav-drawer-simple {
  display: block;
  padding: 14px 0;
  font-size: 15px; font-weight: 500;
  color: #FFFFFF;
  text-decoration: none;
  border-top: 1px dashed rgba(255,255,255,0.08);
  transition: color 0.2s;
}
.nav-drawer-simple:hover { color: #7EE5DD; }

.nav-drawer-foot {
  padding: 20px 22px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  background: rgba(0,0,0,0.18);
}
.nav-drawer-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: #3E3CF9;
  color: #FFFFFF;
  border-radius: 10px;
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  box-shadow: 0 10px 28px -10px rgba(62,60,249,0.45);
  transition: transform 0.2s, background 0.2s;
}
.nav-drawer-cta:hover { background: #2A1FB8; transform: translateY(-1px); }

/* Breakpoint: mostra hamburger e esconde nav-mid abaixo de 960px */
@media (max-width: 880px) {
  .nav-hamburger { display: inline-flex; }
  .nav-mid { display: none !important; }
  .nav-right .btn-cta { display: none; }
}

/* Body lock quando drawer aberto */
body.nav-drawer-open { overflow: hidden; }

/* Respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer-backdrop, .nav-hamburger-icon span { transition: none !important; }
}

/* ── bloco 6 (extraido do inline) ── */
/* ═════════ MOBILE FIXES — padding hero reduzido + container ═════════ */
@media (max-width: 720px) {
  .hero, .qs-hero { padding: 32px 0 40px !important; }
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  /* Hero h1 / h2 reduzido em mobile (proporção) */
  .hero-h, .hero-title { line-height: 1.06 !important; letter-spacing: -0.022em !important; }
  /* Pull-quotes em mobile */
  .scope-pullquote, .qs-pullquote { font-size: 17px !important; line-height: 1.3 !important; padding-left: 18px !important; }
  /* Botões CTA em mobile */
  .hero-cta, .qs-actions, .qs-hero-cta { flex-wrap: wrap; }
  .cta-primary, .cta-secondary, .qs-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .hero, .qs-hero { padding: 24px 0 32px !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── bloco 7 (extraido do inline) ── */
/* ═════════ MOBILE FIXES — Footer + Cross-sell + Componentes globais ═════════ */
@media (max-width: 760px) {
  /* Footer columns viram 1-col */
  .foot-top { grid-template-columns: 1fr !important; gap: 32px !important; }
  .foot-bottom { flex-direction: column !important; gap: 12px !important; text-align: center; }
  
  /* Cross-sell vira 1-col */
  .cross-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  
  /* Trusted by logos */
  .trusted-inner { flex-direction: column !important; gap: 16px !important; }
  .trusted-marquee { width: 100% !important; }
  
  /* Hero meta strip (modelo / cliente / frequência) vira coluna */
  .hero-meta { flex-direction: column !important; gap: 8px !important; padding: 12px 16px !important; }
  
  /* Frentes / Layers grids 2-3 col viram 1-col */
  .frentes-grid, .layers-grid, .pillars-grid, .anatomy-stack { 
    grid-template-columns: 1fr !important; gap: 14px !important; 
  }
  
  /* Anti / FAQ grids */
  .anti-list, .faq-list { grid-template-columns: 1fr !important; }
  
  /* Pricing grids */
  .pricing-grid, .deal-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  
  /* Stats anatomy */
  .stats-grid, .anatomy-stats { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  
  /* Channels footer (contato) */
  .channels, .closing-channels, .contact-channels { flex-direction: column !important; gap: 10px !important; }
  .channel { width: 100% !important; justify-content: flex-start !important; }
  
  /* H2 títulos grandes */
  h2.section-title, h2.layers-title, h2.frentes-title, 
  h2.pricing-title, h2.analysis-title, h2.scope-title,
  h2.anti-title, h2.faq-title, h2.contact-title,
  h2.cross-title { 
    font-size: clamp(26px, 6vw, 36px) !important; 
    line-height: 1.1 !important;
  }
  
  /* Eyebrow padding e tamanho mobile */
  .eyebrow, .eyebrow-light { font-size: 10.5px !important; }
}
@media (max-width: 480px) {
  /* Stats grid 2-col vira 1-col em mobile small */
  .stats-grid, .anatomy-stats { grid-template-columns: 1fr !important; }
  
  /* Reduzir padding seções */
  section { padding-left: 0 !important; padding-right: 0 !important; }
  
  /* Cards padding menor */
  .frente-card, .layer-card, .deal-card, .pricing-row, 
  .case-card, .anti-card, .frente, .qs-cred { 
    padding: 20px 16px !important; 
  }
}

/* ── bloco 8 (extraido do inline) ── */
/* ═════════ MOBILE FIXES — Onda 4 (Quem Somos) ═════════ */
@media (max-width: 720px) {
  /* Sections padding */
  .qs-hero, .qs-section, .qs-section-light, .qs-section-contact {
    padding-top: 56px !important; padding-bottom: 64px !important;
  }
  
  /* Container narrow */
  .qs-container, .qs-container-narrow { padding-left: 18px !important; padding-right: 18px !important; }
  
  /* H1 escalonado mantém formato mas menor */
  .qs-h1, .qs-h1-staged { 
    font-size: clamp(34px, 8vw, 48px) !important; 
    line-height: 1.08 !important; 
  }
  .qs-h2 { 
    font-size: clamp(24px, 5.5vw, 34px) !important; 
    line-height: 1.12 !important; 
  }
  
  /* Lede menor */
  .qs-lede { font-size: 15.5px !important; }
  
  /* Actions wrap */
  .qs-hero-cta, .qs-actions { flex-direction: column !important; gap: 10px !important; width: 100%; }
  .qs-hero-cta a, .qs-actions a, .qs-btn { 
    width: 100% !important; justify-content: center !important; 
  }
  
  /* Princípios — número fica no topo */
  .qs-principle {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 24px 0 !important;
  }
  .qs-principle-n { font-size: 36px !important; }
  
  /* Founder card vertical */
  .qs-founder-card { 
    flex-direction: column !important; text-align: center; 
    padding: 24px 18px !important;
  }
  .qs-founder-avatar { margin: 0 auto !important; }
  
  /* Credenciais cards */
  .qs-creds { gap: 14px !important; }
  .qs-cred { padding: 22px 18px !important; }

  /* Section-mark do hero (gigante 09) */
  .qs-bignum-n { font-size: clamp(72px, 16vw, 110px) !important; }
  .qs-bignum-l { font-size: 12px !important; }
  
  /* Channels */
  .qs-channels { flex-direction: column !important; gap: 10px !important; }
  .qs-channel { width: 100% !important; }
  
  /* Pullquote do manifesto */
  .qs-pullquote { 
    font-size: 18px !important; line-height: 1.3 !important; 
    padding-left: 18px !important; margin: 26px 0 !important; 
  }
  
  /* Scroll line transition (decoração do hero) — oculta no mobile
     (cue de scroll é redundante em touch + custo de animação infinita) */
  .qs-scroll-line,
  .qs-scroll-line-dot,
  .qs-scroll-line-track { display: none !important; }
}

@media (max-width: 480px) {
  .qs-hero, .qs-section, .qs-section-light, .qs-section-contact {
    padding-top: 48px !important; padding-bottom: 56px !important;
  }
  .qs-container, .qs-container-narrow { padding-left: 16px !important; padding-right: 16px !important; }
  .qs-cred-mark, .qs-cred-mark-soon { width: 28px !important; height: 28px !important; }
  .qs-founder-avatar { width: 72px !important; height: 72px !important; }
  .qs-founder-avatar span { font-size: 22px !important; }
}

/* ── bloco 9 (extraido do inline) ── */
/* ═════════ Drawer mobile — esconder outline em touch ═════════ */
.nav-drawer a:focus:not(:focus-visible),
.nav-drawer button:focus:not(:focus-visible),
.nav-drawer-head a:focus:not(:focus-visible),
.nav-drawer-close:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
.nav-drawer a:focus-visible,
.nav-drawer button:focus-visible {
  outline: 2px solid var(--menta);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── bloco 10 (extraido do inline) ── */
/* Estilos específicos da Política de Privacidade */
.qs-container-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .qs-container-narrow { padding: 0 20px; } }

.qs-section-light .qs-h2-small {
  font-family: 'Lexend', system-ui, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--grafite);
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
}

.qs-section-light .qs-prose p {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cinza);
  margin-bottom: 16px;
}

.qs-section-light .qs-prose p strong,
.qs-section-light .qs-prose li strong {
  color: var(--grafite);
  font-weight: 500;
}

.qs-section-light .qs-prose ul {
  margin: 16px 0 24px 22px;
  list-style: disc;
}
.qs-section-light .qs-prose ul li {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--cinza);
  margin-bottom: 8px;
}

.qs-section-light .qs-prose a {
  color: var(--azul);
  text-decoration: underline;
  text-decoration-color: rgba(62, 60, 249, 0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}
.qs-section-light .qs-prose a:hover {
  text-decoration-color: var(--azul);
}

.qs-mono-block {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.85;
  background: rgba(126, 229, 221, 0.06);
  border-left: 3px solid var(--menta);
  padding: 16px 20px;
  border-radius: 0 8px 8px 0;
  color: var(--grafite) !important;
  margin: 16px 0 24px;
}
.qs-mono-block strong { color: var(--azul-deep); font-weight: 500; }

.qs-table-wrap {
  overflow-x: auto;
  margin: 24px 0 32px;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--papel-2);
}
.qs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.qs-table thead th {
  background: rgba(24, 6, 54, 0.04);
  color: var(--grafite);
  font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}
.qs-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  color: var(--cinza);
  vertical-align: top;
  line-height: 1.55;
}
.qs-table tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 720px) {
  .qs-table { font-size: 12.5px; }
  .qs-table thead th, .qs-table tbody td { padding: 11px 12px; }
}

.qs-version-stamp {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--cinza-2) !important;
  letter-spacing: 0.04em;
}

/* ── bloco 11 (extraido do inline) ── */
/* ===== MIGRAÇÃO 100% DARK — Política de Privacidade (igual ao resto do site) ===== */
.qs-section-light {
  background: var(--azulescuro) !important;
  color: var(--text-1) !important;
  border-top: none !important;
}
.qs-section-light .qs-h2-small { color: var(--text-1) !important; }
.qs-section-light .qs-prose p,
.qs-section-light .qs-prose ul li { color: var(--text-2) !important; }
.qs-section-light .qs-prose p strong,
.qs-section-light .qs-prose li strong { color: var(--text-1) !important; }
.qs-section-light .qs-prose a {
  color: var(--menta) !important;
  text-decoration-color: rgba(126,229,221,0.4) !important;
}
.qs-section-light .qs-prose a:hover { text-decoration-color: var(--menta) !important; }
.qs-section-light .qs-eyebrow { color: var(--menta) !important; }
.qs-section-light .qs-line {
  background: linear-gradient(90deg, transparent, rgba(126,229,221,0.6)) !important;
}
/* grad padrão menta->azul (era roxo sobre papel) */
.qs-section-light .qs-h2 .qs-grad,
.qs-section-light .qs-grad {
  background: linear-gradient(105deg, #7EE5DD 0%, #3E3CF9 65%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
/* bloco mono (endereço/contato) dark */
.qs-section-light .qs-mono-block { color: var(--text-2) !important; background: rgba(126,229,221,0.06) !important; }
.qs-section-light .qs-mono-block strong { color: var(--text-1) !important; }
.qs-section-light .qs-mono-block a { color: var(--menta) !important; }
/* tabela dark */
.qs-section-light .qs-table-wrap { background: rgba(255,255,255,0.02) !important; border: 1px solid var(--border) !important; }
.qs-section-light .qs-table thead th { background: rgba(255,255,255,0.04) !important; color: var(--text-1) !important; border-bottom: 1px solid var(--border) !important; }
.qs-section-light .qs-table tbody td { color: var(--text-2) !important; border-bottom: 1px solid var(--border) !important; }
/* carimbo de versão */
.qs-section-light .qs-version-stamp { color: var(--text-3) !important; border-top: 1px solid var(--border) !important; }

/* ===== EYEBROW no padrão (traços em gradiente que somem, igual Quem Somos) ===== */
.qs-hero .qs-eyebrow .qs-line {
  width: 26px !important;
  background: linear-gradient(90deg, transparent, rgba(126,229,221,0.6)) !important;
}
.qs-hero .qs-eyebrow .qs-line:last-child {
  background: linear-gradient(90deg, rgba(126,229,221,0.6), transparent) !important;
}