html,body{margin:0;height:100%;overflow:hidden;background:#000;font-family:system-ui;color:#fff}
#stars{position:fixed;inset:0}
.hero{height:100%;display:grid;place-items:center;perspective:1200px}
.card{padding:48px;border-radius:28px;background:rgba(255,255,255,.06);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.15);box-shadow:0 0 60px rgba(255,255,255,.12);text-align:center;transform-style:preserve-3d;animation:spin 12s linear infinite}
h1{font-size:4rem;margin:.2em;text-shadow:0 0 18px #fff}h2{font-size:2rem}span{font-weight:800}
@keyframes spin{0%{transform:rotateY(0) rotateX(8deg)}100%{transform:rotateY(360deg) rotateX(8deg)}}
@media(max-width:600px){h1{font-size:2.5rem}h2{font-size:1.3rem}.card{margin:20px;padding:28px}}