:root {
  --bg-0: #0c0d0e;
  --bg-1: #141618;
  --bg-radial-1: #3a3f45;
  --bg-radial-2: #24272a;
  --surface: rgba(54, 58, 62, 0.46);
  --surface-strong: rgba(42, 45, 48, 0.78);
  --border: #4b4f53;
  --border-strong: #787d82;
  --ink-0: #f3f4f5;
  --ink-1: #c7cace;
  --ink-2: #9a9ea2;
  --ink-3: #74787c;
  --glow: #a5aeb6;
  --spark: #f4f6f7;
  --warn: #ff9db0;
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --gutter: max(16px, calc((100vw - 1180px) / 2));
}

* { box-sizing: border-box; }

html { background: var(--bg-0); }

body {
  margin: 0;
  background: var(--bg-1);
  background-image:
    radial-gradient(circle at 50% -10%, var(--bg-radial-1) 0%, var(--bg-radial-2) 32%, var(--bg-1) 62%, var(--bg-0) 100%);
  background-attachment: fixed;
  color: var(--ink-0);
  font-family: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-inline: var(--gutter);
  padding-block: calc(env(safe-area-inset-top, 0px) + 0px) calc(env(safe-area-inset-bottom, 0px) + 0px);
  position: relative;
}

/* Ao vivo (2026-10-30): o mesmo toque de névoa espectral do hero
   (.hero-atmosphere), só que bem mais fraco e espalhado pela página
   inteira -- fica atrás de #universe-canvas (ver universe.js, que
   insere o canvas como primeiro filho; um ::before gera antes dele) e
   do conteúdo real, só dando uma leve "respiração" ao fundo sólido. */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -2;
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(ellipse 62% 42% at 50% 16%, rgba(165, 174, 182, .12), transparent 72%),
    radial-gradient(ellipse at 50% 18%, transparent 0 24%, rgba(153, 162, 172, .07) 26%, transparent 36%),
    radial-gradient(ellipse at 50% 18%, transparent 0 36%, rgba(161, 170, 179, .045) 38%, transparent 48%);
}

h1, h2, h3 {
  font-family: "Sora", "Inter", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  color: var(--ink-0);
}

a { color: inherit; }

p { color: var(--ink-1); }

img, svg { max-width: 100%; }

.container { max-width: 1180px; margin-inline: auto; }

/* ---------- universo (poeira de estrelas + faíscas, ver universe.js) ---------- */

#universe-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ---------- header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-mark { width: 30px; height: 30px; flex: none; }

.brand-name {
  font-family: "Sora", sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-0);
}

.site-nav { display: flex; align-items: center; gap: 28px; }

.site-nav a {
  text-decoration: none;
  color: var(--ink-1);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.site-nav a:hover { color: var(--ink-0); }

.nav-cta {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--surface-strong);
  color: var(--ink-0) !important;
  font-size: 13px;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primary {
  background: linear-gradient(180deg, #e9ecee, #b9c0c6);
  color: #15171a;
  box-shadow: 0 10px 30px rgba(165, 174, 182, 0.25);
}

.btn-primary:hover { box-shadow: 0 10px 34px rgba(165, 174, 182, 0.4); }

.btn-ghost {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink-0);
}

.btn-ghost:hover { border-color: var(--ink-1); }

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn small { font-weight: 400; opacity: 0.75; }

/* ---------- hero ---------- */

.hero {
  padding-block: 64px 90px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 22px;
}

.eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--glow);
  box-shadow: 0 0 8px var(--glow);
  font-style: normal;
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, #ffffff, #9aa1a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.lede {
  font-size: 17px;
  color: var(--ink-1);
  max-width: 46ch;
  margin-top: 20px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.hero-meta {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.hero-visual {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 280px;
}

/* Achado ao vivo (2026-10-29): Alexandre comparou com a tela inicial real
   da EVE (o .eve-shell do app) -- lá a faísca nunca fica sozinha num vazio,
   ela senta dentro de anéis elípticos atmosféricos que preenchem o espaço
   ao redor. Mesma ideia aqui: puro CSS, nenhum elemento novo de conteúdo,
   só a mesma "respiração espectral" por trás do aglomerado de faíscas. */
.hero-atmosphere {
  position: absolute;
  inset: -65% -55%;
  z-index: -1;
  pointer-events: none;
  opacity: .95;
  background:
    radial-gradient(ellipse 44% 32% at 51% 48%, rgba(180, 188, 196, .4), transparent 68%),
    radial-gradient(ellipse at 53% 50%, transparent 0 18%, rgba(170, 178, 187, .3) 21%, transparent 30%),
    radial-gradient(ellipse at 48% 46%, transparent 0 28%, rgba(176, 184, 192, .22) 30%, transparent 40%),
    radial-gradient(ellipse at 40% 62%, transparent 0 30%, rgba(150, 161, 172, .24) 32%, transparent 41%),
    radial-gradient(ellipse 60% 44% at 52% 50%, transparent 0 46%, rgba(130, 140, 150, .14) 48%, transparent 58%);
  filter: blur(2px);
}

@media (max-width: 900px) {
  .hero-atmosphere { inset: -35% -15%; }
}

/* Achado ao vivo (2026-10-29): a versão anterior tinha UMA faísca de 280px
   dominando o hero -- Alexandre achou grande e sem vida demais. Em vez de
   um logo monumental, aqui é um aglomerado pequeno (a faísca principal tem
   ~36px de verdade no SVG de 220 unidades), como se fosse um recorte real
   do universo de poeira de estrelas que já cobre o fundo da página inteira
   (ver universe.js) -- a marca se repete em escala pequena, nunca sozinha. */
.spark-cluster { width: min(58%, 230px); }

.spark-cluster .spark-main { transform-origin: 112px 108px; animation: spark-pulse-main 6s ease-in-out infinite; }
.spark-cluster .spark-a { transform-origin: 58px 63px; animation: spark-pulse-a 4.2s ease-in-out infinite; }
.spark-cluster .spark-b { transform-origin: 176px 159px; animation: spark-pulse-b 5.4s ease-in-out infinite .6s; }
.spark-cluster .spark-c { transform-origin: 150px 53.6px; animation: spark-pulse-c 4.8s ease-in-out infinite 1.2s; }

@keyframes spark-pulse-main {
  0%, 100% { transform: scale(1); opacity: .92; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes spark-pulse-a {
  0%, 100% { transform: scale(.8); opacity: .5; }
  50% { transform: scale(1.15); opacity: .95; }
}
@keyframes spark-pulse-b {
  0%, 100% { transform: scale(.85); opacity: .45; }
  50% { transform: scale(1.2); opacity: .9; }
}
@keyframes spark-pulse-c {
  0%, 100% { transform: scale(.75); opacity: .4; }
  50% { transform: scale(1.25); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .spark-cluster .spark-main,
  .spark-cluster .spark-a,
  .spark-cluster .spark-b,
  .spark-cluster .spark-c { animation: none; }
}

/* ---------- sections ---------- */

section { padding-block: 70px; }

.section-head {
  max-width: 62ch;
  margin-bottom: 40px;
}

.section-head .eyebrow { margin-bottom: 14px; }

.section-head h2 { font-size: clamp(26px, 3vw, 34px); }

.section-head p { margin-top: 14px; font-size: 15.5px; }

/* capability grid */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

/* Achado ao vivo (2026-10-29): Alexandre pediu pra os cards parecerem os
   painéis de verdade da EVE (o .panel do app -- vidro fosco, ícone real
   num emblema redondo, título + status curto, friso separando do corpo)
   em vez de um ícone genérico repetido. Mesma receita visual, com os
   mesmos ícones de traço único usados na barra lateral do app.
   Ao vivo (2026-10-30): Alexandre pediu o MESMO vidro em todo o resto do
   site, não só nesses 6 cards -- por isso a receita (gradiente, bordas,
   sombras internas, blur, friso diagonal) virou uma regra compartilhada
   com .scenario/.plan/.support-card/.download-panel, em vez de só .card.
   A sombra do friso usa border-radius:inherit em vez do pai cortar com
   overflow:hidden -- .plan precisa do overflow visível pro selo "Mais
   popular" (.plan-badge) poder passar um pouco do topo do card. */
.card,
.scenario,
.plan,
.support-card,
.download-panel {
  position: relative;
  border: 1px solid var(--border-strong);
  background: linear-gradient(135deg, rgba(69, 74, 79, .5), rgba(22, 24, 27, .72) 58%, rgba(40, 43, 46, .42));
  box-shadow: inset 0 1px rgba(238, 240, 241, .16), inset 0 -1px rgba(88, 96, 104, .18), 0 16px 40px rgba(10, 11, 12, .4);
  backdrop-filter: blur(10px);
}

.card::before,
.scenario::before,
.plan::before,
.support-card::before,
.download-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(231, 234, 236, .1), transparent 18% 80%, rgba(144, 154, 163, .06));
}

.card > *,
.scenario > *,
.plan > *,
.support-card > *,
.download-panel > * { position: relative; }

.card {
  border-radius: 20px;
  padding: 24px 24px 26px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-3px);
  border-color: #b2bac1;
  box-shadow: inset 0 1px rgba(238, 240, 241, .2), inset 0 -1px rgba(88, 96, 104, .2), 0 20px 46px rgba(0, 0, 0, 0.4);
}

.card-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(163, 169, 175, .14);
}

.card-icon {
  flex: none;
  width: 37px; height: 37px;
  border-radius: 50%;
  border: 1px solid rgba(196, 202, 208, .4);
  background: radial-gradient(circle at 35% 30%, rgba(170, 178, 185, .4), rgba(52, 56, 59, .8));
  box-shadow: inset 0 1px rgba(255, 255, 255, .14), 0 5px 14px rgba(12, 13, 15, .26);
  display: grid;
  place-items: center;
  transition: filter 0.25s ease, border-color 0.25s ease;
}

.card-icon svg { width: 18px; height: 18px; color: var(--ink-0); }

.card:hover .card-icon { filter: brightness(1.18); border-color: rgba(178, 186, 193, .7); }

.card-tag { display: block; font-size: 11px; color: var(--ink-2); margin-top: 4px; }

.card h3 { font-size: 15.5px; margin-bottom: 0; }
.card p { font-size: 13.5px; margin: 0; }

/* scenarios */

.scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.scenario {
  border-radius: var(--radius-md);
  padding: 26px;
}

.scenario strong { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
.scenario p { font-size: 14.5px; margin: 0; }

/* pricing */

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.plan {
  border-radius: var(--radius-lg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan.is-featured {
  border-color: #b2bac1;
  background: linear-gradient(135deg, rgba(89, 94, 99, .58), rgba(28, 30, 33, .78) 58%, rgba(52, 56, 59, .5));
  box-shadow: inset 0 1px rgba(238, 240, 241, .22), inset 0 -1px rgba(88, 96, 104, .22), 0 20px 50px rgba(0, 0, 0, 0.4);
}

.plan-badge {
  position: absolute;
  top: -12px; left: 22px;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--ink-0); color: #15171a;
  padding: 5px 10px; border-radius: 999px; font-weight: 700;
}

/* "Em breve" (plano pausado, ex.: Universe) -- mesma forma do badge
   "Mais popular", tom neutro/apagado em vez do destaque, pra não parecer
   que o plano é o recomendado. */
.plan-badge-soon {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--border-strong);
}

.plan-paused-notice {
  font-size: 12px; color: var(--ink-2); line-height: 1.5;
  margin: 0;
}

.plan-name { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }

.plan-price { font-family: "Sora", sans-serif; font-size: 30px; color: var(--ink-0); }
.plan-price span { font-size: 13px; color: var(--ink-2); font-family: "Inter", sans-serif; }

.plan-annual { font-size: 12px; color: var(--ink-3); margin-top: -10px; }

.plan-trial { font-size: 12px; color: var(--ink-0); font-weight: 600; margin-top: -4px; }

.plan-for { font-size: 13px; color: var(--ink-1); min-height: 36px; }

.plan-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }

.plan-features li {
  font-size: 13px; color: var(--ink-1);
  padding-left: 18px; position: relative;
}

.plan-features li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; border-radius: 1px;
  background: var(--glow);
  transform: rotate(45deg);
}

.plan-note { font-size: 11.5px; color: var(--ink-3); margin-top: -4px; }

/* download */

.download-panel {
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.download-info h2 { font-size: 24px; }
.download-info p { margin-top: 10px; font-size: 14px; }

#dl-status { font-size: 12px; color: var(--ink-3); margin-top: 14px; }

.download-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }

/* support */

.support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.support-card {
  border-radius: var(--radius-md);
  padding: 26px;
}

.support-card h3 { font-size: 15px; margin-bottom: 8px; }
.support-card p { font-size: 13.5px; }
.support-card a.btn { margin-top: 12px; }

/* footer */

footer {
  border-top: 1px solid var(--border);
  padding-block: 30px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--ink-3);
}

footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--ink-0); }
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }

/* legal pages */

.legal {
  max-width: 76ch;
  margin-inline: auto;
  padding-block: 50px 90px;
}

.legal h1 { font-size: 28px; margin-bottom: 6px; }
.legal .updated { font-size: 12.5px; color: var(--ink-3); margin-bottom: 30px; }
.legal h2 { font-size: 18px; margin-top: 34px; margin-bottom: 10px; }
.legal p, .legal li { font-size: 14.5px; color: var(--ink-1); line-height: 1.7; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--ink-0); text-decoration: underline; text-underline-offset: 2px; }
.legal em.draft-note {
  display: block;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 30px;
}

/* responsive */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-visual { order: -1; min-height: 220px; }
  .grid-3, .scenarios { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr 1fr; }
  .support-grid { grid-template-columns: 1fr; }
  .download-panel { grid-template-columns: 1fr; }
  .download-cta { align-items: stretch; }
}

@media (max-width: 620px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .grid-3, .scenarios, .plans { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: stretch; }
}