/* ════════════════════════════════════════════════════════════════
   CUBE MEMORY — CAMADA DE REFINAMENTO PROFISSIONAL
   Adicione DEPOIS do seu style.css:
   <link rel="stylesheet" href="/css/style.css">
   <link rel="stylesheet" href="/css/refinement.css">   ← este

   Filosofia: restraint > variedade. Uma cor de acento (ciano),
   roxo apenas como apoio sutil, zero "carnaval". Ícones
   monocromáticos finos. Diferenciação por espaço, não por cor.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. DOMAR AS CORES: 1 acento dominante (ciano), roxo só apoio ──
   O problema era ciano + roxo + branco + vermelho + amarelo brigando.
   Agora: ciano é O acento. Roxo vira hairline/glow sutil. */

:root {
  --accent: #00F0FF;            /* acento ÚNICO principal */
  --accent-soft: rgba(0,240,255,0.10);
  --accent-line: rgba(0,240,255,0.20);
  --support: #6366F1;           /* apoio sutil, NUNCA protagonista */
  --ink-1: #F5F7FA;
  --ink-2: #9BA1B0;
  --ink-3: #5B6170;
  --hairline: rgba(255,255,255,0.07);
}

/* Glows ambientes: reduzir intensidade pra não saturar a tela */
.ambient-glow { opacity: 0.22 !important; }
.glow-secondary { opacity: 0.14 !important; }

/* ── 2. ÍCONES MONOCROMÁTICOS (fim do arco-íris) ──
   Todos os ícones agora herdam o MESMO tom sutil. Sem uma cor por ícone. */

.feature-icon,
.card-icon {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  color: var(--ink-2) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  font-size: 0 !important;       /* esconde emoji caso o JS não rode */
  transition: border-color .3s ease, color .3s ease;
}
.feature-icon svg,
.card-icon svg {
  width: 20px; height: 20px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Hover: o ícone "acende" no acento — micro-detalhe premium */
.feature-card:hover .feature-icon,
.card:hover .card-icon {
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
}

/* Anula as 3 variações de cor: todas viram o mesmo tom neutro */
.feature-icon.icon-cyan,
.feature-icon.icon-purple,
.feature-icon.icon-white {
  border-color: var(--hairline) !important;
  box-shadow: none !important;
}

/* ── 3. BADGES E PILLS: parar de competir por atenção ── */
.hero-badge {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--hairline) !important;
  color: var(--ink-2) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  font-size: 0.78rem !important;
}

/* ── 4. TIPOGRAFIA: Outfit/Inter já é bom, só refinar pesos e tracking ── */
h1, h2, h3, h4 { letter-spacing: -0.035em !important; }
.hero-title { letter-spacing: -0.045em !important; }
.section-header p { color: var(--ink-2) !important; }

/* ── 5. TEXT-GRADIENT: usar com PARCIMÔNIA (só no hero) ──
   O gradiente ciano→roxo aparecia em vários lugares = poluição.
   Mantém só no hero; nos demais títulos vira branco sólido. */
.section h2 .text-gradient,
.section-header h2 .text-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--ink-1) !important;
  color: var(--ink-1) !important;
}
/* Hero mantém o gradiente como ÚNICO momento "wow" cromático */
.hero .text-gradient {
  background: linear-gradient(120deg, #FFFFFF 0%, var(--accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── 6. CARDS: hairlines finas, hover sutil (não dramático) ── */
.card, .feature-card, .metric-card {
  border: 1px solid var(--hairline) !important;
  border-radius: 12px !important;
}
.card:hover, .feature-card:hover {
  border-color: rgba(255,255,255,0.14) !important;
  transform: translateY(-3px);
  transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease;
}
.metric-value { font-weight: 700 !important; }
.metric-value.text-cyan,
.metric-value.text-purple,
.metric-value.text-gradient {
  background: none !important;
  -webkit-text-fill-color: var(--accent) !important;
  color: var(--accent) !important;
}
/* Um único valor pode brilhar; os outros em branco pra criar hierarquia */
.hero-metrics .metric-card:not(:nth-child(2)) .metric-value {
  -webkit-text-fill-color: var(--ink-1) !important;
  color: var(--ink-1) !important;
}

/* ── 7. BADGES DE "VITÓRIA" na tabela: verde chapado → ciano discreto ── */
.badge-win, .badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent-line) !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

/* ── 8. TÍTULOS COLORIDOS soltos (.text-purple / .text-cyan no corpo) ──
   No corpo de texto, roxo+ciano alternando cansa. Unifica no acento. */
.card-body .text-purple,
.card-body .text-cyan,
p .text-purple,
p .text-cyan { color: var(--accent) !important; }

/* ── 9. RANKING / listas: primeiro lugar destaca, resto neutro ── */
.ranking-item.first { border-color: var(--accent-line) !important; }
.ranking-item.first .rank-pos { color: var(--accent) !important; }
.ranking-item:not(.first) .rank-pos { color: var(--ink-3) !important; }

/* ── 10. ESPAÇAMENTO: diferenciação por respiro, não por cor de fundo ── */
.section { padding: 96px 0 !important; }
@media (min-width:1024px){ .section { padding: 128px 0 !important; } }
.alt-bg {
  background: rgba(255,255,255,0.012) !important;
  border-top: 1px solid var(--hairline) !important;
  border-bottom: 1px solid var(--hairline) !important;
}

/* ── 11. BOTÕES: hover com micro-movimento consistente ── */
.btn { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background .3s ease !important; }
.btn-primary:hover { transform: translateY(-2px) !important; }

/* ── 12. CODE inline: discreto, não chamativo ── */
code, .font-mono.inline-code {
  font-family: 'Fira Code', monospace;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 6px; border-radius: 4px;
  font-size: 0.85em;
}

/* ── 13. SCROLLBAR fina no tom da paleta ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-line); border-radius: 3px; }

/* ── 14. "✨" e ruído visual em listas de preço: remover sparkle ── */
.pricing-card li, .price-card li { letter-spacing: 0 !important; }

/* ── 15. HONEYPOT / blocos roxos saturados → tom sóbrio ── */
[style*="background: linear-gradient(135deg,#a78bfa"],
[style*="background:linear-gradient(135deg,#a78bfa"] {
  background: var(--accent-soft) !important;
  border: 1px solid var(--accent-line) !important;
}