:root{
  --bg-1: #04050a;
  --bg-2: #071124;
  --neon: #6ee7ff; /* cyan */
  --accent: #ff4dff; /* magenta */
  --glass: rgba(255,255,255,0.04);
  --text: #eaf6ff;
  --muted: rgba(234,246,255,0.55);
  --max-width: 1200px;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  font-family:'Space Grotesk',system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color: white;  /* force white text */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#bgCanvas{
  position:fixed;
  inset:0;
  z-index:-1;           /* behind content */
  display:block;
  pointer-events:none;   /* allow clicks through */
}

#app{position:relative;min-height:100vh;z-index:1;}

.corner-controls{
  position:fixed;
  top:24px;
  right:28px;
  display:flex;
  gap:10px;
  z-index:6;
}
.icon-btn{
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.04);
  padding:10px;
  border-radius:10px;
  color:white;  /* white button text */
  backdrop-filter:blur(6px);
  cursor:pointer;
  font-size:14px;
  user-select:none;
}
.icon-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
}

.hero{
  min-height:82vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 20px 0;
}
.hero-inner{
  max-width:var(--max-width);
  width:100%;
  display:flex;
  gap:48px;
  align-items:center;
  justify-content:center;
}

.profile-wrap{
  position:relative;
  width:260px;
  height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.neon-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  filter:blur(22px);
  pointer-events:none;
  background:radial-gradient(circle at 30% 20%, rgba(110,231,255,0.22), transparent 12%), radial-gradient(circle at 80% 80%, rgba(255,77,255,0.18), transparent 18%);
}
.profile{
  width:200px;
  height:200px;
  border-radius:50%;
  object-fit:cover;
  border:6px solid rgba(255,255,255,0.06);
  box-shadow:0 20px 60px rgba(0,0,0,0.7), 0 0 40px rgba(110,231,255,0.06);
  /* remove this if you want: transform:translateZ(0); */
  
  animation: spin 30s linear infinite;
}

/* Add this keyframes block anywhere in the CSS, for example near the bottom: */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}


.text{
  max-width:720px;
}
#name{
  font-size:64px;
  margin:0 0 8px;
  letter-spacing:-1px;
  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0.85));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
#tagline{
  font-size:20px;
  color:white;
  margin:0 0 20px;
}

.links{
  display:flex;
  gap:18px;
}
.link-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.04);
  color:white;
  text-decoration:none;
  font-size:18px;
  user-select:none;
}
.link-btn svg{
  width:20px;
  height:20px;
}
.link-btn:hover{
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  transform:translateY(-4px);
}

.scroll-hint{
  position:absolute;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  color:rgba(255 255 255 / 0.55);
  font-size:13px;
}

.about{
  padding:80px 20px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.15));
}
.about-inner{
  max-width:var(--max-width);
  margin:0 auto;
  color:rgba(255 255 255 / 0.55);
}
.about h2{
  color:white;
  font-size:28px;
  margin:0 0 10px;
}
.about .lead{
  font-size:18px;
  color:rgba(255 255 255 / 0.55);
}

/* Responsive */
@media (max-width:900px){
  .hero-inner{
    flex-direction:column;
    gap:22px;
  }
  #name{
    font-size:40px;
  }
  .profile-wrap{
    width:200px;
    height:200px;
  }
  .profile{
    width:150px;
    height:150px;
  }
}