:root{
  --bg:#0f172a;
  --panel:#0b1222;
  --ink:#f1f5f9;
  --muted:#94a3b8;
  --accent:#22d3ee;
  --accent2:#a78bfa;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.35);
  --nav-h:70px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(34,211,238,.14) 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(167,139,250,.12) 0%, transparent 55%),
    var(--bg);
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.65;
}

.container{max-width:1100px;margin:0 auto;padding:0 1rem}
.narrow{max-width:820px;margin:0 auto}
.section{padding:4.5rem 0}

#navbar{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:0 .9rem;
  background:rgba(11,18,34,.78);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  z-index:1000;
}
#navbar .brand{
  font-family:"Chakra Petch",sans-serif;
  font-weight:800; font-size:1.1rem; letter-spacing:.5px; text-decoration:none; color:var(--ink)
}
#navbar .links{display:flex; gap:.9rem; flex-wrap:wrap}
#navbar .links a{
  text-decoration:none; color:var(--ink); font-weight:700;
  padding:.45rem .7rem; border-radius:.6rem;
  transition:background .15s ease, color .15s ease
}
#navbar .links a:hover{ background:#121a30 }
#navbar .links a.active{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0f14
}

.hero{
  min-height:calc(100vh - var(--nav-h));
  display:grid; place-items:center;
  text-align:center; position:relative;
}
.eyebrow{
  font-family:"Chakra Petch",sans-serif;
  letter-spacing:.12em; color:var(--muted); text-transform:uppercase; margin:0 0 .4rem
}
.hero h1{
  margin:.2rem auto .6rem;
  font-weight:800;
  font-size:clamp(2rem,1.4rem + 2.5vw,3.4rem);
}
.grad{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent
}
.lede{color:#c6d3ea; max-width:720px; margin:0 auto 1.2rem}
.cta-row{display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1.1rem; border-radius:.8rem; border:0; cursor:pointer;
  text-decoration:none; font-weight:800
}
.btn.primary{
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#0b0f14; box-shadow:0 0 18px rgba(34,211,238,.35)
}
.btn.ghost{ background:#0f162a; color:var(--ink); border:1px solid rgba(255,255,255,.12) }
.btn.primary:hover,.btn.ghost:hover{ filter:brightness(1.06) }

.orbit{position:absolute; inset:0; pointer-events:none}
.orbit span{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.3));
  box-shadow:0 0 18px rgba(255,255,255,.35)
}
.orbit span:nth-child(1){ top:12%; left:8% }
.orbit span:nth-child(2){ bottom:14%; right:12% }
.orbit span:nth-child(3){ top:28%; right:22% }

#about .container,#skills .container{position:relative}
#skills .chips{
  list-style:none; margin:1rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.6rem
}
#skills .chips li{
  padding:.45rem .7rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:#0e1527; color:#dce8ff
}

#projects .projects-grid{
  display:grid; gap:1.1rem; margin-top:1rem;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))
}
.project-tile{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),var(--panel);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1rem;
  display:flex; flex-direction:column; gap:.7rem
}
.project-img{
  width:100%; height:170px; object-fit:cover;
  border-radius:12px; border:1px solid rgba(255,255,255,.12)
}
.project-tile h3{margin:.2rem 0 0; font-size:1.15rem}
.project-tile p{color:#c9d6ef; margin:.1rem 0 .4rem}
.project-tile .actions{display:flex; gap:.6rem; flex-wrap:wrap}

#contact .cta-row{margin-top:.6rem}

.site-footer{
  border-top:1px solid rgba(255,255,255,.08);
  background:#0e1526;
}
.footer-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 0; flex-wrap:wrap
}
#profile-link{color:#d9e6ff; text-decoration:none; font-weight:700}
#profile-link:hover{text-decoration:underline}

h2{
  text-align:center; font-weight:800; letter-spacing:.2px;
  font-size:1.6rem; margin:0 0 .6rem;
  color:var(--ink);
  text-shadow:0 0 12px rgba(34,211,238,.18)
}

@media (max-width:700px){
  :root{ --nav-h:64px }
  #navbar{ height:var(--nav-h) }
  .footer-inner{ justify-content:center; text-align:center }
}