:root {
  --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --fundo: #0e0720;
  --fundo-2: #150a2e;
  --cartao: #1a0f38;
  --borda: rgba(196, 181, 253, .14);
  --lilas: #c4b5fd;
  --roxo: #8b5cf6;
}
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { font-family: var(--font-body); background: var(--fundo); color: #e9e5f5; }
.font-heading { font-family: var(--font-heading); }

/* Topo: transparente sobre o hero, fica sólido ao rolar */
.topo { transition: background-color .25s, box-shadow .25s; }
.topo.rolou { background: rgba(14, 7, 32, .92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--borda); }
.nav-u { position: relative; }
.nav-u::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--lilas); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.nav-u:hover::after, .nav-u.ativo::after { transform: scaleX(1); }
.nav-u.ativo { color: var(--lilas); }

/* Painel lateral do celular */
.painel { transform: translateX(100%); transition: transform .3s ease; }
.painel.aberto { transform: translateX(0); }
.veu { opacity: 0; pointer-events: none; transition: opacity .3s; }
.veu.aberto { opacity: 1; pointer-events: auto; }

/* Hero */
.hero {
  background:
    radial-gradient(45rem 30rem at 50% 0%, rgba(139, 92, 246, .35), transparent 70%),
    radial-gradient(30rem 25rem at 100% 60%, rgba(168, 85, 247, .18), transparent 70%),
    var(--fundo);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(196, 181, 253, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 181, 253, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}
.texto-lateral {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--font-heading); font-weight: 800; letter-spacing: .35em;
  color: transparent; -webkit-text-stroke: 1px rgba(196, 181, 253, .12);
}
.estrela { position: absolute; color: var(--lilas); pointer-events: none; animation: brilho 4s ease-in-out infinite; }
@keyframes brilho { 0%, 100% { opacity: .35; transform: scale(.9) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }

.animar { opacity: 0; animation: subir .8s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes subir { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.d1 { animation-delay: .15s; } .d2 { animation-delay: .3s; } .d3 { animation-delay: .45s; } .d4 { animation-delay: .6s; }

/* Faixa inclinada com palavras correndo */
.faixa { transform: rotate(-3deg); margin: 0 -2rem; background: linear-gradient(90deg, #7c3aed, #a855f7); }
.faixa-trilho { display: flex; width: max-content; animation: correr 40s linear infinite; }
@keyframes correr { to { transform: translateX(-50%); } }

/* Aparecer ao rolar */
.revelar { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visto { opacity: 1; transform: none; }

/* Cartões */
.cartao { background: linear-gradient(180deg, var(--cartao), var(--fundo-2)); border: 1px solid var(--borda); }
.hexagono { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.listras { background-image: repeating-linear-gradient(135deg, rgba(196, 181, 253, .12) 0 2px, transparent 2px 14px); }

details summary { list-style: none; }
details summary::-webkit-details-marker { display: none; }
details[open] .mais { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .animar, .revelar { opacity: 1; transform: none; animation: none; transition: none; }
  .faixa-trilho, .estrela { animation: none; }
}