:root{
  --brand: #22d3ee;
  --brand-2:#60a5fa;
  --brand-3:#c084fc;
  --text:#f8fafc;
  --muted:#94a3b8;
  --bg:#0b1120;
  --panel:#0f172a;
  --card: rgba(30,41,59,0.55);
  --border: rgba(148,163,184,0.22);
  --shadow: 0 20px 50px rgba(2,6,23,.55);
}

/* Contact section link styles */
#contact a {
  color: var(--brand-2); /* matches your theme gradient (light blue) */
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

#certifications a {
  color: var(--brand-2);         /* pure white */
  font-weight: 500;
  text-decoration: none;   /* remove underline */
}

#certifications a:hover {
  text-decoration: underline;  /* subtle hover effect */
}

/* Project thumbnails */
.project-figure { margin: 0 0 10px 0; }
.project-thumb {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: zoom-in;
}

/* Optional: smaller blurb text */
.project-blurb { color: var(--muted); }

/* Simple Lightbox */
.lightbox {
  position: fixed; inset: 0; display: none;
  align-items: center; justify-content: center;
  background: rgba(2, 6, 23, 0.86); /* deep translucent */
  z-index: 1000; padding: 24px;
}
.lightbox.open { display: flex; }
.lightbox-img {
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.lightbox-caption {
  margin-top: 12px; text-align: center; color: var(--muted);
  max-width: min(1100px, 92vw);
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  background: transparent; color: var(--text);
  border: 1px solid rgba(148,163,184,0.28);
  border-radius: 12px; padding: 6px 10px; font-size: 20px; cursor: pointer;
}
.lightbox-close:hover { background: rgba(148,163,184,0.08); }


#contact a:hover {
  color: var(--brand-3); /* purple accent on hover */
  text-decoration: underline;
}


#about {
  margin-top: 20px; /* adjust until text aligns properly */
}



*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:
    radial-gradient(1000px 700px at 10% 10%, rgba(34,211,238,0.12), transparent 60%),
    radial-gradient(900px 600px at 85% 15%, rgba(96,165,250,0.12), transparent 60%),
    linear-gradient(180deg, #0a0f1d 0%, #0b1120 100%);
  line-height:1.6;
}

/* Subtle noise overlay */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 0 0 .06 .08 .1 .12'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.35;
}

/* ===== Header / Nav ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:10;
  background:rgba(11,17,32,0.7); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(148,163,184,0.16);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px; max-width:1180px; margin:0 auto;}
.brand{font-weight:800; letter-spacing:.5px; background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3));
  -webkit-background-clip:text; background-clip:text; color:transparent; font-size:20px; text-transform:uppercase}
.nav-menu{display:flex; gap:26px; list-style:none}
.nav-menu a{color:var(--text); text-decoration:none; font-weight:600}
#progressBar{height:3px; width:0%; background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3)); transition:width .2s}

/* ===== Layout ===== */
main{padding-top:74px}
.section {
  padding: 60px 20px;   /* reduced vertical spacing */
  max-width: 1180px;
  margin: 0 auto;
}
.section h2{font-size:2rem; margin-bottom:1rem}

/* ===== Hero ===== */
.hero{
  display:grid; grid-template-columns:1.2fr .8fr; gap:2.4rem; align-items:center; min-height:80vh;
}


@media (max-width: 900px) { .hero{ grid-template-columns:1fr; text-align:center } }
.hero-title{font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight:800; letter-spacing:.2px}
.subtitle{font-size:1.15rem; color:var(--muted); margin-top:6px}

/* Terminal-looking banner */
.term-banner{
  margin-top:18px; border:1px solid var(--border); border-radius:14px; overflow:hidden;
  background:#0a1020; box-shadow:var(--shadow);
}
.term-chrome{
  display:flex; align-items:center; gap:8px; padding:10px 12px;
  background:linear-gradient(180deg,#0e1526,#0b1220); border-bottom:1px solid rgba(148,163,184,0.12)
}
.term-chrome .dot{width:10px;height:10px;border-radius:50%}
.term-chrome .red{background:#ef4444}
.term-chrome .yellow{background:#f59e0b}
.term-chrome .green{background:#22c55e}
.term-title{margin-left:auto; color:var(--muted); font-size:12px}
.term-body{
  padding:14px; font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:14px; display:flex; align-items:center; gap:8px; min-height:54px;
}
.prompt{color:#86efac}
.typewriter{white-space: pre}
.caret{
  width:10px; height:1.15em; background:#a3e635; display:inline-block; transform:translateY(3px);
  animation: blink .9s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* Buttons */
.hero-buttons{display:flex; gap:12px; margin-top:18px; flex-wrap:wrap}
.btn{
  padding:10px 18px; border-radius:12px; border:1px solid rgba(148,163,184,0.18);
  background:linear-gradient(135deg, rgba(34,211,238,.18), rgba(96,165,250,.18));
  color:var(--text); font-weight:800; text-decoration:none; box-shadow:var(--shadow)
}
.btn:hover{background:linear-gradient(135deg, rgba(34,211,238,.26), rgba(96,165,250,.26))}
.btn-ghost{background:transparent}

/* Hero image */
.hero-media{display:flex; justify-content:center}
.profile-wrap{width:300px;height:300px;border-radius:24px; overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow)}
.hero-media img{width:100%;height:100%;object-fit:cover;}

/* ===== Projects ===== */
.projects-grid{display:grid; gap:22px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr))}
.project-card{
  background:var(--card); border:1px solid var(--border); padding:22px; border-radius:16px; box-shadow:var(--shadow);
  transition: transform .2s ease;
}
.project-card:hover{ transform: translateY(-6px) }
.project-card h3{margin-bottom:8px}
.project-card .links a{color:var(--brand-2)}

/* ===== Footer ===== */
.site-footer{text-align:center; padding:26px 20px; color:var(--muted); border-top:1px solid rgba(148,163,184,0.16)}

/* ===== Link underline animation ===== */
.link-underline, .nav-menu a, .project-card .links a { position:relative; text-decoration:none }
.link-underline::after, .nav-menu a::after, .project-card .links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2),var(--brand-3)); transition:right .35s ease
}
.link-underline:hover::after, .nav-menu a:hover::after, .project-card .links a:hover::after{ right:0 }

/* ===== Reveal on scroll ===== */
.reveal{opacity:0; transform:translateY(12px); filter:blur(2px); transition: all .6s ease}
.reveal.in{opacity:1; transform:none; filter:none}

/* ===== Tilt targets ===== */
.project-card, .profile-wrap { will-change: transform; transform-style: preserve-3d }