:root{
  --bg:#050B18;
  --card:rgba(255,255,255,.07);
  --border:rgba(255,255,255,.15);
  --primary:#5ddcff;
  --secondary:#c77dff;
  --text:#eaeaff;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:Poppins}
html{scroll-behavior:smooth}
body{background:linear-gradient(130deg,#050b18,#0a1231);color:var(--text);overflow-x:hidden}
#loader{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
#loader.hide{opacity:0;pointer-events:none;transition:.6s}
.spinner{width:45px;height:45px;border:4px solid rgba(255,255,255,.2);border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
nav{position:fixed;top:0;width:100%;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;background:rgba(5,11,24,.65);backdrop-filter:blur(14px);z-index:1000}
nav.scrolled{padding:12px 24px}
.menu{display:flex;gap:28px}
.menu a{color:#fff;text-decoration:none;opacity:.7;position:relative}
.menu a.active,.menu a:hover{opacity:1}
.menu a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  transition:.3s
}
.menu a.active::after,.menu a:hover::after{width:100%}
.hamburger{display:none;flex-direction:column;gap:6px;cursor:pointer}
.hamburger span{width:26px;height:3px;background:#fff;border-radius:4px;transition:.4s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}
@media(max-width:768px){
  .hamburger{display:flex}
  .menu{
    position:fixed;top:70px;right:-100%;
    background:#050b18;
    width:240px;
    padding:28px;
    border-radius:22px;
    flex-direction:column;
    transition:.4s
  }
  .menu.show{right:18px}
}
header{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
header h1{
  font-size:2.8rem;
  background:linear-gradient(90deg,var(--primary),var(--secondary));
  -webkit-background-clip:text;color:transparent
}
header p{margin-top:14px;opacity:.85}
.cta{margin-top:32px}
.cta a{
  padding:14px 36px;border-radius:50px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#000;font-weight:600;text-decoration:none;
  display:inline-block;transition:.3s
}
.cta a:hover{transform:translateY(-4px);box-shadow:0 0 25px rgba(93,220,255,.4)}
section{max-width:1000px;margin:auto;padding:90px 16px}
h2{text-align:center;font-size:2.4rem;margin-bottom:60px}
.glass{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:22px;
  padding:26px;
  backdrop-filter:blur(14px);
  opacity:0;
  transform:translateY(30px);
  transition:.6s
}
.glass.visible{opacity:1;transform:none}
.glass:hover{transform:translateY(-6px);box-shadow:0 25px 50px rgba(93,220,255,.25)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.about img{max-width:220px;width:100%;border-radius:20px;cursor:pointer}
.about p{line-height:1.7;opacity:.9}
@media(max-width:768px){.about{grid-template-columns:1fr;text-align:center}}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.skill h3{margin-bottom:8px}
.skill p{font-size:.85rem;opacity:.85}
.projects{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.project img{width:100%;border-radius:16px;cursor:pointer;margin-bottom:12px}
.project p{font-size:.85rem;opacity:.85}
.contact-icons{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}
.contact-icons a{
  display:flex;gap:8px;align-items:center;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  padding:12px 20px;border-radius:50px;
  color:#000;font-weight:600;text-decoration:none
}
.contact-icons img{width:24px}
form{display:flex;flex-direction:column;gap:14px}
input,textarea{
  padding:12px;border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.08);color:#fff
}
button{
  padding:14px;border:none;border-radius:50px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  font-weight:600;cursor:pointer
}
#lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  display:none;align-items:center;justify-content:center;
  z-index:9999
}
#lightbox img{max-width:90%;max-height:90%;border-radius:20px}
footer{text-align:center;padding:28px;opacity:.6}