/* ═══════════════════════════════════════════════════════════════════════════
   HEXTECH IA — COMPONENTES REUTILIZÁVEIS (hextech-ui.css)
   ═══════════════════════════════════════════════════════════════════════════

   CAMADA 2 do design system. Depende apenas de hextech-tokens.css.
   Nada aqui é específico da landing page — todas as classes foram
   desenhadas para serem reaproveitadas em: painel do cliente, painel
   admin, página de preços, onboarding, login e modais internos.

   ÍNDICE
   1. Reset + base
   2. Layout      .hx-container, .hx-section, .hx-grid-*
   3. Tipografia  .hx-kicker, .hx-title, .hx-lead, .hx-mono
   4. Botões      .hx-btn (+ variantes --primary/--gold/--ghost, --lg)
   5. Cartões     .hx-card (+ --gold/--purple/--glass, .hx-card__icon)
   6. Chips       .hx-badge (+ variantes de cor)
   7. Divisores   .hx-divider
   8. Modal       .hx-modal (pronto p/ painéis internos)
   9. Efeitos     .hx-glow-line, .hx-scanline, .hx-reveal
   10. Utilitários

   RECEITAS RÁPIDAS
   • Novo botão de destaque:   <a class="hx-btn hx-btn--primary hx-btn--lg">
   • Cartão de feature:        <div class="hx-card"><div class="hx-card__icon">…</div>
                               <h3 class="hx-card__title">…</h3><p class="hx-card__text">…</p></div>
   • Rótulo de seção:          <span class="hx-kicker">// SISTEMA</span>
   • Seção nova:               <section class="hx-section"><div class="hx-container">…
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. RESET + BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--hx-font-body);
  font-size: var(--hx-fs-body);
  line-height: 1.6;
  color: var(--hx-text-primary);
  background: var(--hx-bg-deep);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--hx-text-accent); text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }

::selection { background: rgba(0, 229, 255, 0.25); color: #fff; }

/* Scrollbar discreta no tema (webkit) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--hx-bg-deep); }
::-webkit-scrollbar-thumb { background: #1b2a3d; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #27405c; }

/* ── 2. LAYOUT ─────────────────────────────────────────────────── */

/* Contêiner central. --wide para composições de tela cheia. */
.hx-container {
  width: 100%;
  max-width: var(--hx-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 40px);
}
.hx-container--wide { max-width: var(--hx-container-wide); }

/* Seção padrão: respiro vertical consistente em todo o produto. */
.hx-section { padding-block: var(--hx-space-section); position: relative; }

/* Cabeçalho de seção centralizado (kicker + título + lead). */
.hx-section-head {
  max-width: 760px;
  margin: 0 auto var(--hx-space-8);
  text-align: center;
}

/* Grades responsivas — colapsam sozinhas via auto-fit. */
.hx-grid-2, .hx-grid-3, .hx-grid-4 { display: grid; gap: var(--hx-space-5); }
.hx-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.hx-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.hx-grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* ── 3. TIPOGRAFIA ─────────────────────────────────────────────── */

/* Kicker: rótulo HUD acima de títulos. Sempre uppercase + tracking
   largo. Prefixe com "//" ou "◈" para o toque de terminal Hextech. */
.hx-kicker {
  display: inline-block;
  font-family: var(--hx-font-hud);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--hx-text-accent);
  margin-bottom: var(--hx-space-4);
}
.hx-kicker--gold { color: var(--hx-gold-bright); }

/* Título de seção. Use <em> interno p/ destacar palavras em ciano. */
.hx-title {
  font-family: var(--hx-font-display);
  font-size: var(--hx-fs-title);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--hx-text-primary);
}
.hx-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--hx-cyan-bright) 0%, var(--hx-cyan) 45%, var(--hx-cyan-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hx-title em.gold {
  background: linear-gradient(100deg, var(--hx-gold-bright) 0%, var(--hx-gold) 60%, #8a6a20 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Lead: subheadline/parágrafo de apoio. */
.hx-lead {
  font-size: var(--hx-fs-lead);
  line-height: 1.65;
  color: var(--hx-text-secondary);
  margin-top: var(--hx-space-4);
}

/* Dados/números: sempre em mono para o look de telemetria. */
.hx-mono { font-family: var(--hx-font-mono); }

/* ── 4. BOTÕES ─────────────────────────────────────────────────────
   Base + variantes. O chanfro (clip-path) é a assinatura Hextech —
   não troque por border-radius alto.
   Variantes: --primary (ciano, CTA principal, no máx. 1 por região),
   --gold (premium/VIP), --ghost (secundário). Tamanho: --lg.        */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 28px;
  font-family: var(--hx-font-display);
  font-size: var(--hx-fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hx-text-primary);
  background: var(--hx-bg-raised);
  border: 1px solid var(--hx-border-base);
  clip-path: var(--hx-clip-bevel);
  transition: transform var(--hx-t-fast), box-shadow var(--hx-t-med),
              background var(--hx-t-med), border-color var(--hx-t-med);
  white-space: nowrap;
}
.hx-btn:hover { transform: translateY(-2px); }
.hx-btn:active { transform: translateY(0); }
.hx-btn:focus-visible { outline: 2px solid var(--hx-cyan); outline-offset: 3px; }

/* CTA principal — ciano sólido com texto escuro (máximo contraste). */
.hx-btn--primary {
  background: linear-gradient(115deg, var(--hx-cyan-bright) 0%, var(--hx-cyan) 55%, #00b8d9 100%);
  color: var(--hx-text-inverse);
  border-color: transparent;
  box-shadow: var(--hx-glow-cyan);
}
.hx-btn--primary:hover { box-shadow: var(--hx-glow-cyan-lg); }

/* Premium/VIP — moldura dourada, fundo escuro. */
.hx-btn--gold {
  border-color: var(--hx-border-gold);
  color: var(--hx-gold-bright);
  background: linear-gradient(115deg, rgba(200, 155, 60, 0.14), rgba(200, 155, 60, 0.04));
}
.hx-btn--gold:hover { box-shadow: var(--hx-glow-gold); border-color: var(--hx-gold); }

/* Secundário — contorno discreto, para ações de apoio. */
.hx-btn--ghost {
  background: transparent;
  border-color: var(--hx-border-base);
  color: var(--hx-text-secondary);
}
.hx-btn--ghost:hover {
  border-color: var(--hx-border-strong);
  color: var(--hx-text-primary);
  box-shadow: var(--hx-glow-cyan);
}

/* Tamanho grande — hero e CTA final. */
.hx-btn--lg { padding: 17px 40px; font-size: 1rem; }

/* ── 5. CARTÕES ────────────────────────────────────────────────────
   Cartão base com canto chanfrado + linha de energia no topo que
   acende no hover. Estrutura: .hx-card > __icon? > __title > __text */
.hx-card {
  position: relative;
  padding: var(--hx-space-6);
  background: linear-gradient(160deg, var(--hx-bg-raised) 0%, var(--hx-bg-card) 60%);
  border: 1px solid var(--hx-border-subtle);
  border-radius: var(--hx-r-lg);
  box-shadow: var(--hx-shadow-card);
  transition: transform var(--hx-t-med), border-color var(--hx-t-med), box-shadow var(--hx-t-med);
  overflow: hidden;
}
/* Linha de energia superior (dormant → ativa no hover). */
.hx-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--hx-cyan), transparent);
  opacity: 0.25;
  transition: opacity var(--hx-t-med);
}
.hx-card:hover {
  transform: translateY(-4px);
  border-color: var(--hx-border-strong);
  box-shadow: var(--hx-shadow-lg), 0 0 32px rgba(0, 229, 255, 0.10);
}
.hx-card:hover::before { opacity: 1; }

/* Variantes de acento: trocam a linha de energia e a borda de hover. */
.hx-card--gold::before { background: linear-gradient(90deg, transparent, var(--hx-gold), transparent); }
.hx-card--gold:hover { border-color: var(--hx-border-gold); box-shadow: var(--hx-shadow-lg), 0 0 32px rgba(200, 155, 60, 0.12); }
.hx-card--purple::before { background: linear-gradient(90deg, transparent, var(--hx-purple), transparent); }
.hx-card--purple:hover { border-color: rgba(155, 107, 242, 0.4); box-shadow: var(--hx-shadow-lg), 0 0 32px rgba(155, 107, 242, 0.12); }

/* Vidro — para sobrepor fundos animados/arte (ex.: hero, modais). */
.hx-card--glass {
  background: var(--hx-glass-bg);
  border-color: var(--hx-glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Ícone do cartão: célula hexagonal com o glifo/emoji/svg dentro. */
.hx-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-bottom: var(--hx-space-4);
  font-size: 1.35rem;
  color: var(--hx-cyan);
  background: var(--hx-cyan-dim);
  border: 1px solid var(--hx-border-base);
  clip-path: var(--hx-clip-hex);
}
.hx-card--gold .hx-card__icon { color: var(--hx-gold-bright); background: var(--hx-gold-dim); border-color: var(--hx-border-gold); }
.hx-card--purple .hx-card__icon { color: var(--hx-purple); background: var(--hx-purple-dim); border-color: rgba(155, 107, 242, 0.35); }

.hx-card__title {
  font-family: var(--hx-font-display);
  font-size: var(--hx-fs-heading);
  font-weight: 700;
  margin-bottom: var(--hx-space-2);
}
.hx-card__text { color: var(--hx-text-secondary); font-size: var(--hx-fs-sm); line-height: 1.7; }

/* ── 6. CHIPS / BADGES ─────────────────────────────────────────────
   Rótulos curtos de status. Recorte hexagonal + fonte HUD.          */
.hx-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  font-family: var(--hx-font-hud);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hx-text-accent);
  background: var(--hx-cyan-dim);
  border: 1px solid var(--hx-border-base);
  clip-path: var(--hx-clip-hex);
}
.hx-badge--gold  { color: var(--hx-gold-bright); background: var(--hx-gold-dim); border-color: var(--hx-border-gold); }
.hx-badge--green { color: var(--hx-green); background: var(--hx-green-dim); border-color: rgba(11, 219, 108, 0.35); }
.hx-badge--red   { color: var(--hx-red); background: var(--hx-red-dim); border-color: rgba(255, 61, 61, 0.35); }
/* Ponto pulsante de "sistema ativo" dentro do badge. */
.hx-badge__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  animation: hx-pulse 2s ease-in-out infinite;
}

/* ── 7. DIVISOR ────────────────────────────────────────────────────
   Linha de energia horizontal com diamante central — separa seções. */
.hx-divider {
  position: relative;
  height: 1px;
  max-width: 560px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--hx-border-strong), transparent);
}
.hx-divider::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--hx-bg-deep);
  border: 1px solid var(--hx-cyan);
  box-shadow: var(--hx-glow-cyan);
}

/* ── 8. MODAL (pronto p/ painéis internos) ─────────────────────────
   Uso: <div class="hx-modal-overlay"><div class="hx-modal">…</div></div>
   Adicione .is-open no overlay para exibir (via JS do consumidor).  */
.hx-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--hx-z-modal);
  display: grid;
  place-items: center;
  padding: var(--hx-space-5);
  background: rgba(2, 4, 7, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--hx-t-med);
}
.hx-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.hx-modal {
  width: min(560px, 100%);
  padding: var(--hx-space-7);
  background: linear-gradient(160deg, var(--hx-bg-raised), var(--hx-bg-surface));
  border: 1px solid var(--hx-border-base);
  border-radius: var(--hx-r-xl);
  box-shadow: var(--hx-shadow-lg), var(--hx-glow-cyan);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--hx-t-med);
}
.hx-modal-overlay.is-open .hx-modal { transform: none; }

/* ── 9. EFEITOS ────────────────────────────────────────────────── */

/* Linha vertical de energia (conecta seções visualmente). */
.hx-glow-line {
  width: 1px;
  height: 72px;
  margin: 0 auto;
  background: linear-gradient(180deg, transparent, var(--hx-cyan), transparent);
  opacity: 0.5;
}

/* Reveal on-scroll: elementos entram com fade+rise quando visíveis.
   O JS (landing.js) adiciona .is-visible via IntersectionObserver.
   Em outros apps, reuse o mesmo padrão ou adicione .is-visible direto. */
.hx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--hx-t-slow), transform var(--hx-t-slow);
}
.hx-reveal.is-visible { opacity: 1; transform: none; }
/* Escalonamento de filhos: aplique .hx-reveal + delays utilitários. */
.hx-delay-1 { transition-delay: 0.1s; }
.hx-delay-2 { transition-delay: 0.2s; }
.hx-delay-3 { transition-delay: 0.3s; }
.hx-delay-4 { transition-delay: 0.4s; }

@keyframes hx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* Flutuação suave (cristais, ornamentos). */
@keyframes hx-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* Rotação lenta (anéis do núcleo). */
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-spin-rev { to { transform: rotate(-360deg); } }

/* ── 10. UTILITÁRIOS ───────────────────────────────────────────── */
.hx-text-center { text-align: center; }
.hx-text-gold   { color: var(--hx-gold-bright); }
.hx-text-cyan   { color: var(--hx-text-accent); }
.hx-text-muted  { color: var(--hx-text-muted); }
.hx-mt-4 { margin-top: var(--hx-space-4); }
.hx-mt-6 { margin-top: var(--hx-space-6); }
.hx-mt-8 { margin-top: var(--hx-space-8); }
.hx-flex-center { display: flex; align-items: center; justify-content: center; gap: var(--hx-space-4); flex-wrap: wrap; }

/* NOTA SOBRE reduced-motion: a cinemática Hextech (reveals, anéis,
   glow) é parte da identidade do produto e roda SEMPRE, por decisão
   de marca — Windows com "Mostrar animações" desligado ativa
   prefers-reduced-motion e congelava a abertura inteira do site.
   Se um dia for preciso honrar reduced-motion, reative um bloco
   @media (prefers-reduced-motion: reduce) zerando durações e
   forçando .hx-reveal { opacity: 1; transform: none }.             */