/* ═══════════════════════════════════════════════════════════════
   WESK — tema escuro de dados: ciano → roxo.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg: #090D1C;
  --bg-soft: #0D1226;
  --surface: rgba(255, 255, 255, .04);
  --surface-strong: rgba(255, 255, 255, .07);
  --line: rgba(173, 190, 255, .13);
  --text: #EDF0FA;
  --muted: rgba(237, 240, 250, .66);
  --accent: #54D8EC;
  --accent-soft: rgba(84, 216, 236, .12);
  --on-accent: #071018;
  --glow: rgba(124, 100, 244, .45);
}

.btn-primary {
  background: linear-gradient(100deg, #4DD4E8, #9F7AEA);
  color: #0A0E1E;
}

/* ── Hero compacto ──────────────────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding-block: clamp(32px, 5vw, 56px) clamp(8px, 2vw, 16px);
  overflow: clip;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(150, 170, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150, 170, 255, .055) 1px, transparent 1px);
  background-size: 54px 54px;
  -webkit-mask-image: radial-gradient(ellipse 85% 62% at 50% 0%, #000 22%, transparent 74%);
  mask-image: radial-gradient(ellipse 85% 62% at 50% 0%, #000 22%, transparent 74%);
}
.hero::after {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  translate: -50% 0;
  width: min(780px, 98vw);
  height: 480px;
  z-index: -2;
  background:
    radial-gradient(ellipse 40% 55% at 32% 40%, rgba(77, 212, 232, .18), transparent 70%),
    radial-gradient(ellipse 40% 55% at 68% 45%, rgba(139, 92, 246, .2), transparent 70%);
  filter: blur(12px);
}
.hero h1 {
  font-size: clamp(1.65rem, 4.6vw, 2.4rem);
  font-weight: 800;
  margin: 10px auto 0;
}
.hero h1 .grad {
  background: linear-gradient(95deg, #4DD4E8, #9F7AEA);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lead {
  max-width: 560px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: clamp(.97rem, 1.8vw, 1.05rem);
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(24px, 4vw, 32px);
}

/* ── Lista ──────────────────────────────────────────────────── */
.page-list { padding-bottom: clamp(56px, 8vw, 80px); }