*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0a0a0f;
  --surface:#12121a;
  --accent:#6c5ce7;
  --accent-light:#a29bfe;
  --text:#e8e8f0;
  --text-muted:#7c7c8a;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero{
  text-align:center;
  padding:2rem;
  max-width:600px;
}

.logo{
  font-size:4rem;
  margin-bottom:1.5rem;
  animation:float 3s ease-in-out infinite;
}

@keyframes float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}

h1{
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:800;
  background:linear-gradient(135deg,var(--accent-light),var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:1rem;
}

.description{
  font-size:1.15rem;
  color:var(--text-muted);
  margin-bottom:2rem;
  line-height:1.6;
}

.cta{
  display:inline-block;
  padding:.85rem 2.5rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-light));
  color:#fff;
  text-decoration:none;
  border-radius:50px;
  font-weight:600;
  font-size:1rem;
  transition:transform .2s,box-shadow .2s;
  box-shadow:0 4px 24px rgba(108,92,231,.35);
}

.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 32px rgba(108,92,231,.5);
}

.stack{
  margin-top:3rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}

.stack span{
  padding:.4rem 1rem;
  background:var(--surface);
  border:1px solid rgba(108,92,231,.25);
  border-radius:20px;
  font-size:.85rem;
  color:var(--accent-light);
}