/* ---------- Root / Theme ---------- */
:root{
  --bg: #0b0b0f;
  --panel: #13131a;
  --panel-2: #191922;
  --text: #e8eaed;
  --muted: #a8adbd;

  --accent: #6ee7f5;      /* cyan */
  --accent-2: #9b6bff;    /* violet */
  --accent-3: #26ffc2;    /* aqua green */

  --ring: rgba(155,107,255,.45);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing: border-box; }
html, body{
  margin:0; padding:0;
  font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 80% -10%, rgba(155,107,255,.18), transparent 60%),
              radial-gradient(900px 700px at -10% 10%, rgba(110,231,245,.12), transparent 50%),
              var(--bg);
  color: var(--text);
}

/* ---------- Header ---------- */
.head-nav{
  position: sticky; top: 0; z-index: 1000;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.5rem;
  background: rgba(11,11,15,.6);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.logo{
  font-family: "Montserrat", sans-serif;
  font-weight:700; letter-spacing:.5px;
  font-size:1.25rem;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.nav-menu ul{
  list-style:none; display:flex; gap:1.25rem; align-items:center;
  padding:0; margin:0;
}
.nav-menu a{
  color: var(--text); text-decoration:none; font-weight:500; position:relative;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .25s ease;
}
.nav-menu a:hover::after{ width:100%; }

.resume-btn{
  padding:.4rem .9rem; border-radius:999px; color:#0b0b0f; font-weight:700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 6px 20px rgba(155,107,255,.25);
}

/* Hamburger */
.hamburger{
  display:none; background:transparent; border:0; cursor:pointer; padding:.25rem;
}
.hamburger span{
  display:block; width:26px; height:2px; background:var(--text); margin:6px 0; transition:.3s;
}



/* ---------- Sections ---------- */
section{ padding: min(9vw, 6rem) 1.25rem; }

.intro-section{
  min-height: 88vh; display:grid; grid-template-columns: 1.1fr .9fr; gap: 2rem;
  align-items:center; max-width: 1200px; margin: 0 auto;
  
}

.headings-div {
  position: relative;
  z-index: 10; /* make sure it's on top */
}

.headings-div h3{ color: var(--muted); font-weight:500; }
.headings-div h1{
  font-family:"Montserrat", sans-serif;
  font-size: clamp(2rem, 6vw, 3.6rem);
  line-height:1.05;
  background: linear-gradient(90deg, var(--text), var(--accent-3));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin: .35em 0 .25em;
}
.headings-div p{ color:#cfd3de; max-width: 58ch; }

.btn-group{ margin-top:1.2rem; display:flex; gap:.8rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.2rem; border-radius:14px; font-weight:700; text-decoration:none;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
} 
.btn:hover{ transform: translateY(-2px); filter:saturate(1.1); }
.contact-btn{ background: linear-gradient(90deg, var(--accent-3), var(--accent)); color:#0b0b0f; }
.projects-btn{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); color:#0b0b0f; }

.image-div{ position:relative; display:grid; place-items:center; }
.parallax-wrap{ isolation:isolate; }
.parallax-img{
  width:min(340px, 90%); aspect-ratio:1/1; object-fit:cover; border-radius:50%;
  border: 6px solid rgba(155,107,255,.35);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 8px rgba(155,107,255,.12);
}
.orb{
  position:absolute; border-radius:50%; filter: blur(18px); opacity:.55; z-index:-1;
}
.orb-1{ width:180px; height:180px; left:-20px; top:-10px; background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 60%); }
.orb-2{ width:220px; height:220px; right:-30px; bottom:-20px; background: radial-gradient(circle at 70% 50%, var(--accent), transparent 60%); }

/* About */
.about-section{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.about-container{ max-width: 950px; margin:0 auto; }
.section-title{
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  margin-bottom: .6rem;
}
.pinline{
  display:inline-block; position:relative; padding-left:1rem;
}
.pinline::before{
  content:""; position:absolute; left:0; top: .4em; height:.7em; width:6px;
  border-radius:2px; background: linear-gradient(180deg, var(--accent-2), var(--accent));
}
.section-copy{ color:#c8ccda; max-width:75ch; }

/* Tech */
.technologies-section{ text-align:center; }
.technologies{
  margin-top:1.2rem; display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center;
}
.chip{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid rgba(255,255,255,.06);
  color:#e8eaed; padding:.55rem 1.05rem; border-radius:999px; font-weight:600;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.chip:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(0,0,0,.35); }

/* Projects */
.projects-section{ background: linear-gradient(180deg, rgba(255,255,255,.03), transparent); text-align:center; }
.projects-grid{
  margin-top:1rem;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:1.4rem; max-width: 1150px; margin-inline:auto;
}
.project-card{
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden;
  transform-style: preserve-3d; perspective: 800px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-shadow: var(--shadow);
  will-change: transform;
}
.project-card:hover{
  transform: translateY(-6px);
  border-color: rgba(155,107,255,.35);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
}
.project-card img{ width:100%; height:180px; object-fit:cover; display:block; }
.card-content{ padding:1rem 1rem 1.15rem; text-align:left; }
.card-content h3{
  margin:.1rem 0;
  background: linear-gradient(90deg, var(--text), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.card-content p{ color:#cfd3de; margin:.55rem 0 .8rem; }
.badge{
  display:inline-block; background: rgba(255,255,255,.06); color:#e8eaed;
  padding:.28rem .6rem; border-radius:999px; font-size:.8rem; margin-right:.35rem; border:1px solid rgba(255,255,255,.08);
}
.card-link{
  display:inline-block; margin-top:.5rem; text-decoration:none; font-weight:700;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Contact */
.contact-section{ text-align:center; }
form{
  display:flex; flex-direction:column; gap:.8rem; max-width:560px; margin: 1rem auto 0;
}
input, textarea{
  background: var(--panel); color:var(--text);
  border:1px solid rgba(255,255,255,.08); border-radius:12px; padding: .9rem 1rem;
  outline:none; transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus, textarea:focus{ border-color: var(--ring); box-shadow: 0 0 0 4px rgba(155,107,255,.12); }
button{ border:0; }
.contact-section .contact-btn{
  align-self:center; min-width: 180px;
}

/* Footer */
.site-footer{
  text-align:center; padding: 2rem 1rem; margin-top: 2rem;
  border-top:1px solid rgba(255,255,255,.08);
}
.social-icons img{ width:26px; height:26px; filter: invert(1); margin: 0 .4rem; opacity:.85; transition: opacity .2s; }
.social-icons img:hover{ opacity:1; }

/* ---------- Reveal helpers ---------- */
.reveal-up{ opacity:0; transform: translateY(20px); }
.reveal-left{ opacity:0; transform: translateX(-20px); }
.delay-1{ transition-delay: .12s; }
.delay-2{ transition-delay: .24s; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .intro-section{ grid-template-columns: 1fr; text-align:center; }
  .btn-group{ justify-content:center; }
  .image-div{ order:1; }
}

@media (max-width: 860px){
  .nav-menu{ display:none; position:absolute; right:14px; top:62px; background: rgba(19,19,26,.98);
    border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:.75rem 1rem; }
  .nav-menu.active{ display:block; }
  .nav-menu ul{ flex-direction:column; gap:.8rem; }
  .hamburger{ display:block; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}