:root{
  --bg0:#02040a;
  --bg1:#0a1220;
  --fg:#e6f0ff;
  --muted:#9fb0c7;
  --acc1:#23c7f3;
  --acc2:#b84ef9;
  --ring: rgba(184,78,249,.25);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg);
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg1), var(--bg0)) fixed;
  overflow:hidden;
}

/* Background canvas */
#bg{
  position:fixed; inset:0; z-index:0;
  background: radial-gradient(1000px 700px at 80% 120%, rgba(35,199,243,.06), transparent),
              radial-gradient(800px 600px at -20% -10%, rgba(184,78,249,.08), transparent);
}

/* Hero content */
.hero{
  position:relative; z-index:1;
  height:100%; width:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem;
}

.brand{display:flex; align-items:center; gap:.9rem; margin-bottom:.2rem}
.logo{width:40px;height:40px; color:var(--acc1); filter: drop-shadow(0 0 10px rgba(35,199,243,.4))}
.title{
  font-size: clamp(2rem, 4vw + 1rem, 4rem);
  margin:0; line-height:1;
  letter-spacing:.5px; font-weight:800;
  background: linear-gradient(90deg, var(--acc1), var(--acc2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.title span{opacity:.9}

.line{
  margin:.6rem 0 .2rem;
  font-size: clamp(1rem, 1.2vw + .6rem, 1.4rem);
  color:var(--fg);
  min-height:1.6em;
}

.sub{
  margin:.3rem 0 1.2rem;
  color:var(--muted);
  font-size: clamp(.95rem, 1vw + .4rem, 1.15rem);
}

.cta{display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center}
.btn{
  appearance:none; border:none; cursor:pointer;
  padding:.75rem 1.1rem; border-radius:.7rem;
  background:linear-gradient(90deg, rgba(35,199,243,.15), rgba(184,78,249,.15));
  color:var(--fg); text-decoration:none; font-weight:600; letter-spacing:.2px;
  outline:2px solid transparent; outline-offset:2px;
  box-shadow: 0 0 0 0 var(--ring);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{transform: translateY(-1px); background:linear-gradient(90deg, rgba(35,199,243,.22), rgba(184,78,249,.22)); box-shadow:0 0 0 6px var(--ring)}
.btn:active{transform: translateY(0)}
.btn.ghost{background:transparent; border:1px solid rgba(230,240,255,.15)}
.btn.ghost:hover{border-color:rgba(230,240,255,.35)}

.foot{position:absolute; bottom:1rem; left:0; right:0; color:var(--muted); font-size:.85rem}

/* Accessibility prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  #bg{display:none}
}