:root{
  --bg:#0d1117;           /* dark slate */
  --card:#161b22;         /* card bg */
  --muted:#9ca3af;        /* muted text */
  --accent:#00f5d4;       /* neon aqua */
  --accent-2:#00bbf9;     /* electric blue */
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --container:1100px;
  font-family: 'Poppins', sans-serif;
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg, var(--bg) 0%, #070708 100%);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* container */
.container{
  width:95%;
  max-width:var(--container);
  margin:0 auto;
}

/* NAV */
.nav-wrap{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(9,10,13,0.6), rgba(9,10,13,0.4));
  border-bottom:1px solid rgba(255,255,255,0.02);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
}
.brand a{
  color:var(--accent); text-decoration:none; font-weight:700; font-size:1.15rem;
}
.brand .dot{ color:var(--accent-2); margin-left:6px; }

/* nav links */
.nav-links{
  display:flex; gap:18px; list-style:none; padding:0; margin:0;
}
.nav-links li a{
  color:var(--muted); text-decoration:none; padding:8px 12px; border-radius:8px; font-weight:500;
}
.nav-links li a:hover, .nav-links li a.active{
  color:#fff; background:rgba(255,255,255,0.03);
}

/* hamburger */
.hamburger{display:none; background:none; border:0; cursor:pointer; padding:8px}
.hamburger span{display:block; width:22px; height:2px; background:#cbd5e1; margin:4px 0; border-radius:2px}

/* HERO */
.hero{
  padding:80px 0 40px; position:relative;
}
.hero-inner{display:grid; grid-template-columns:1fr 360px; gap:30px; align-items:center}
.hero-title{font-size:2.35rem; margin:0 0 8px; color:#fff}
.name{color:var(--accent)}
.hero-sub{margin:0 0 14px; color:var(--muted); font-weight:600; font-size:1.05rem}
.cursor{opacity:0.85; margin-left:6px}
.hero-desc{color:var(--muted); margin-bottom:18px}

.btn{display:inline-block; background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#021019; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:600; margin-right:10px}
.btn-outline{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--accent);}

/* profile card */
.profile-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.015));
  border-radius:12px; padding:18px; display:flex; gap:14px; align-items:center; box-shadow:0 8px 30px rgba(2,6,23,0.6)
}
.profile-card .avatar{width:120px; height:120px; display:flex; align-items:center; justify-content:center}
.profile-meta h3{margin:0 0 6px}
.profile-meta p{margin:0 0 10px; color:var(--muted)}

/* scroll down arrow */
.scroll-down{position:absolute; left:50%; transform:translateX(-50%); bottom:14px; color:var(--muted); text-decoration:none; font-size:18px}

/* SECTION */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent)}
.section-title{font-size:1.6rem; margin:0 0 20px; color:#fff}

/* ABOUT */
.about-grid{display:grid; grid-template-columns:1fr 320px; gap:24px; align-items:start}
.about-text p{color:var(--muted)}
.about-list{list-style:none; padding:0; margin-top:12px}
.about-list li{color:var(--muted); margin:6px 0}

/* skills */
.skills-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.skill-card{background:var(--card); padding:18px; border-radius:12px; box-shadow: 0 6px 20px rgba(2,6,23,0.6)}
.skill-card h3{margin:0 0 8px}
.skill-card p{color:var(--muted)}

/* skill bars */
.skill-item{margin:12px 0}
.skill-item span{display:block; margin-bottom:6px; color:var(--muted)}
.bar{height:8px; background:rgba(255,255,255,0.03); border-radius:8px; overflow:hidden}
.bar > div{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent-2)); width:40%; transition:width 800ms ease}

/* PROJECTS */
.projects-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.project-card{background:var(--card); padding:18px; border-radius:12px; box-shadow: 0 8px 30px rgba(2,6,23,0.6); transform: translateY(12px); opacity:0; transition: all 550ms cubic-bezier(.2,.9,.2,1)}
.project-head{display:flex; align-items:center; justify-content:space-between}
.tags{color:var(--muted); font-size:0.85rem}
.project-desc{color:var(--muted); margin:12px 0}
.project-actions{display:flex; gap:10px}

/* small buttons */
.btn-sm{padding:8px 10px; border-radius:8px; text-decoration:none; font-weight:600; background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#021019}
.btn-sm.btn-outline{background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--accent)}

/* certificates */
.cert-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.cert-card{background:rgba(255,255,255,0.02); padding:16px; border-radius:12px; color:var(--muted)}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 320px; gap:24px}
.contact-form{background:var(--card); padding:18px; border-radius:12px}
.form-row{margin-bottom:12px}
input, textarea{width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:#eef2ff}
input::placeholder, textarea::placeholder{color:var(--muted)}
.form-actions{display:flex; gap:10px; align-items:center; margin-top:10px}
.note{color:var(--muted); font-size:0.85rem; margin-top:10px}

/* footer */
.site-footer{padding:28px 0; text-align:center; color:var(--muted); border-top:1px solid rgba(255,255,255,0.02)}

/* reveal animation class */
.reveal{opacity:0; transform:translateY(18px) scale(0.995); transition: all 650ms cubic-bezier(.2,.9,.2,1)}
.reveal.visible{opacity:1; transform:translateY(0) scale(1)}

/* responsive */
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:20px}
  .about-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  .cert-grid{grid-template-columns:repeat(2,1fr)}
  .skills-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width:720px){
  .nav-links{display:none}
  .hamburger{display:block}
  .nav-links.mobile-open{display:flex; position:fixed; inset:64px 18px 18px 18px; background: #07080a; border-radius:12px; padding:18px; flex-direction:column}
  .nav-links.mobile-open li a{padding:12px 10px}
  .cert-grid{grid-template-columns:1fr}
  .profile-card{flex-direction:row; gap:12px}
}