:root {
  --bg:#0d0d10;
  --bg-alt:#14141b;
  --glass:rgba(255,255,255,0.08);
  --border:rgba(255,255,255,0.18);
  --grad:linear-gradient(90deg,#ff42d9,#6d5bff,#42e3ff);
  --grad-focus:#6d5bff;
  --text:#e9eef5;
  --text-dim:#9ba5b7;
  --pill-bg:rgba(255,255,255,0.12);
  --pill-text:#fff;
  --radius:20px;
  --speed:260ms;
  --danger:#ff4d61;
  --ok:#42e3ff;
  --shadow:0 8px 24px -6px #111a,0 2px 4px -1px #000;
  --focus-ring:0 0 0 3px #6d5bff55;
  --nav-height:66px;
}
/* Light palette tuned to be soft + readable (less glare) */
body.light {
  --bg:#f5f7fa;
  --bg-alt:#ffffff;
  --glass:rgba(30,40,60,0.05);
  --border:rgba(40,55,80,0.16);
  --text:#1e2430;
  --text-dim:#5a6573;
  --pill-bg:#e6eaf0;
  --pill-text:#1e2430;
  --shadow:0 4px 14px -6px #6d78a81f,0 2px 4px -2px #24304533;
  --grad:linear-gradient(90deg,#c44fff,#7d6dff,#32b9ff);
  --grad-focus:#7d6dff;
  --focus-ring:0 0 0 3px #7d6dff40;
}
/* Base */
* { box-sizing:border-box; }
body {
  margin:0;
  font-family:'Space Grotesk',system-ui,Arial,sans-serif;
  background:
     radial-gradient(circle at 15% 20%,#291f42,transparent 60%),
     radial-gradient(circle at 90% 70%,#1d3b46,transparent 65%),
     var(--bg);
  background-attachment:fixed;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.light {
  background:
     radial-gradient(circle at 12% 18%,#ffffff,transparent 62%),
     radial-gradient(circle at 88% 78%,#e8f3fa,transparent 65%),
     var(--bg);
  backdrop-filter:saturate(130%);
}
html { scroll-behavior:smooth; }
::selection { background:var(--grad-focus); color:#fff; }
:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:6px; }

/* Typography */
h1,h2 { font-family:'Syne',sans-serif; letter-spacing:.5px; }
h1 {
  font-size:clamp(2.3rem,6.8vw,3.6rem);
  margin:.2rem 0 .8rem;
  line-height:1.05;
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
}
h2 {
  font-size:clamp(1.55rem,4.3vw,2.2rem);
  margin:0 0 1.15rem;
  position:relative;
}
h2:after {
  content:"";
  position:absolute; left:0; bottom:-6px;
  width:74px; height:3px;
  background:var(--grad);
  border-radius:3px;
}
p { line-height:1.58; font-size:1.02rem; margin:.7rem 0; }
.lead { font-size:1.15rem; line-height:1.55; }

/* Navbar */
.navbar {
  position:sticky; top:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  height:var(--nav-height);
  padding:0 clamp(1rem,4vw,3rem);
  backdrop-filter:blur(14px);
  background:linear-gradient(115deg,#0d0d10cc,#14141bcc 60%);
  border-bottom:1px solid var(--border);
}
body.light .navbar {
  background:linear-gradient(115deg,#ffffffcc,#ffffffcc);
}
.logo {
  font-family:'Syne',sans-serif;
  font-size:1.5rem;
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
  cursor:pointer;
  letter-spacing:1px;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
}
.nav-links {
  list-style:none;
  display:flex;
  gap:1.4rem;
  margin:0;
  padding:0;
  transition:max-height .5s ease, transform .5s ease;
}
.nav-links a {
  position:relative;
  font-size:.85rem;
  letter-spacing:.75px;
  padding:.55rem .85rem;
  color:var(--text-dim);
  font-weight:500;
  transition:color var(--speed);
  border-radius:14px;
  text-decoration:none;
}
.nav-links a:after {
  content:"";
  position:absolute;
  left:18%; bottom:6px;
  width:64%; height:2px;
  background:var(--grad);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .55s cubic-bezier(.65,.05,.36,1);
  border-radius:2px;
}
.nav-links a:hover,
.nav-links a:focus-visible { color:var(--text); }
.nav-links a:hover:after,
.nav-links a:focus-visible:after { transform:scaleX(1); }
.vibe-toggle, .hamburger {
  display:flex; align-items:center; gap:.55rem;
  background:var(--glass);
  color:var(--text-dim);
  border:1px solid var(--border);
  padding:.55rem .9rem;
  border-radius:40px;
  font-size:.7rem;
  letter-spacing:.8px;
  cursor:pointer;
  backdrop-filter:blur(14px);
  transition:background var(--speed),color var(--speed),border-color var(--speed);
}
.vibe-toggle:hover,
.hamburger:hover { color:var(--text); background:rgba(255,255,255,0.12); }
body.light .vibe-toggle:hover,
body.light .hamburger:hover { background:#eef2f7; }
.vibe-dot {
  width:16px; height:16px;
  border-radius:50%;
  background:var(--grad);
  animation:pulse 2.6s infinite;
}
@keyframes pulse {
  0% { box-shadow:0 0 0 0 #6d5bff60; }
  70% { box-shadow:0 0 0 14px transparent; }
  100% { box-shadow:0 0 0 0 transparent; }
}
/* Hamburger */
.hamburger {
  display:none;
  flex-direction:column;
  gap:4px;
  width:48px;
  justify-content:center;
  font-size:.65rem;
  letter-spacing:1px;
}
.hamburger span {
  width:20px; height:2px;
  background:linear-gradient(90deg,#6d5bff,#42e3ff);
  border-radius:2px;
  transition:transform .4s,opacity .4s;
}
.hamburger.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:880px){
  .nav-links {
    position:absolute;
    top:var(--nav-height); right:0; left:0;
    flex-direction:column;
    background:linear-gradient(140deg,var(--bg-alt) 10%,#0f1015ee);
    padding:1rem 1.2rem 1.6rem;
    max-height:0;
    overflow:hidden;
    border-bottom:1px solid var(--border);
  }
  body.light .nav-links {
    background:linear-gradient(140deg,#ffffff,#f0f4f9f2);
  }
  .nav-links.open { max-height:420px; }
  .hamburger { display:flex; }
  .vibe-toggle { display:none; }
}

/* Layout */
.section {
  max-width:1060px;
  padding:3rem clamp(1.15rem,4vw,3.2rem);
  margin:0 auto;
  position:relative;
}

/* Cards / glass */
.glass {
  background:linear-gradient(140deg,var(--glass),transparent);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.4rem 1.3rem 1.2rem;
  box-shadow:var(--shadow);
  transition:transform var(--speed),border-color var(--speed),background var(--speed);
  position:relative;
  overflow:hidden;
}
.glass:hover { transform:translateY(-6px); border-color:#6d5bffbb; }
body.light .glass:hover { background:linear-gradient(140deg,var(--glass),#7d6dff0f); }

/* About */
.about-grid {
  display:grid;
  gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin-top:1.4rem;
}
.fact-chip {
  font-size:.62rem;
  letter-spacing:1.3px;
  background:var(--pill-bg);
  color:var(--pill-text);
  padding:.55rem .85rem;
  border-radius:30px;
  display:inline-flex;
  gap:.45rem;
  align-items:center;
  text-transform:uppercase;
  margin:.35rem .45rem .35rem 0;
  position:relative;
  overflow:hidden;
}
.fact-chip:before {
  content:"";
  position:absolute; inset:0;
  background:var(--grad);
  opacity:0; transition:opacity .5s;
  mix-blend-mode:overlay;
}
.fact-chip:hover:before { opacity:.4; }

/* Skills */
.skills-wrap { display:flex; flex-wrap:wrap; }
.skill-tag {
  font-size:.7rem;
  letter-spacing:.7px;
  background:var(--pill-bg);
  color:var(--pill-text);
  padding:.55rem .85rem;
  border-radius:28px;
  margin:.35rem .45rem .35rem 0;
  position:relative;
  overflow:hidden;
  cursor:default;
  transition:background .4s;
}
.skill-tag:hover { background:linear-gradient(90deg,#6d5bff33,#42e3ff33); }

/* Timeline */
.timeline { margin-top:2rem; display:grid; gap:2rem; }
.milestone {
  display:grid;
  gap:.55rem;
  padding:1.35rem 1.25rem 1.25rem;
  border:1px solid var(--border);
  border-radius:18px;
  background:linear-gradient(120deg,var(--glass),transparent);
  transform:translateY(28px);
  opacity:0;
  transition:opacity .8s ease, transform .8s ease, border-color var(--speed);
}
.milestone.visible { transform:translateY(0); opacity:1; }
.milestone:hover { border-color:#42e3ffcc; }
.milestone .year { font-size:.62rem; letter-spacing:3px; font-weight:700; color:#42e3ff; }
.milestone h3 { margin:.2rem 0 .3rem; font-size:1.02rem; }
.milestone p { margin:0; font-size:.85rem; color:var(--text-dim); }
.milestone .icon { font-size:1.45rem; }

/* Projects */
.proj-filters { display:flex; gap:.6rem; flex-wrap:wrap; margin:0 0 1.3rem; }
.proj-filters .pf {
  background:var(--glass); color:var(--text-dim); border:1px solid var(--border);
  padding:.55rem 1rem; border-radius:30px; cursor:pointer;
  font-size:.63rem; letter-spacing:1px;
  transition:background .4s,color .4s,border-color .4s;
}
.proj-filters .pf.active,
.proj-filters .pf:hover { color:var(--text); border-color:#6d5bffb0; background:linear-gradient(130deg,var(--glass),#6d5bff18); }
.proj-grid { display:grid; gap:1.3rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.project-card {
  border:1px solid var(--border);
  background:linear-gradient(140deg,var(--glass),transparent);
  border-radius:18px;
  padding:1rem 1rem .95rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  position:relative;
  transition:transform var(--speed),border-color var(--speed),background var(--speed);
  min-height:168px;
}
.project-card:hover { transform:translateY(-6px); border-color:#42e3ffbb; }
.project-card h3 { margin:.1rem 0 .2rem; font-size:1rem; }
.repo-btn {
  margin-top:auto;
  align-self:flex-start;
  text-decoration:none;
  font-size:.65rem;
  letter-spacing:1.2px;
  font-weight:600;
  padding:.55rem .9rem;
  border-radius:30px;
  background:var(--grad);
  color:#fff;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  transition:filter .35s, transform .35s;
}
.repo-btn:hover { filter:brightness(1.15); transform:translateY(-3px); }

/* Testimonials Enhanced */
#testimonials { }
.testi-wrapper {
  max-width:880px;
  margin:0 auto;
  position:relative;
}
.testi-card {
  border:1px solid var(--border);
  background:linear-gradient(140deg,var(--glass),transparent);
  border-radius:28px;
  padding:2.3rem clamp(1.4rem,4vw,2.6rem) 2.6rem;
  text-align:center;
  position:relative;
  overflow:hidden;
  min-height:330px;
}
.testi-main {
  transition:opacity .6s;
}
.testi-avatar {
  width:96px; height:96px; border-radius:50%; object-fit:cover;
  border:2px solid #6d5bff66;
  box-shadow:0 6px 20px -8px #000a;
  margin:0 auto 1rem;
  display:block;
}
.testi-text {
  font-size:1.05rem;
  line-height:1.55;
  color:var(--text-dim);
  margin:.2rem 0 1.2rem;
  min-height:3.5rem;
}
.testi-name {
  font-weight:600;
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
  letter-spacing:.6px;
  font-size:1.02rem;
}
.testi-role {
  font-size:.65rem;
  letter-spacing:2px;
  color:#42e3ff;
  display:block;
  margin-top:.25rem;
  font-weight:600;
}
.testi-dock {
  display:flex;
  gap:.55rem;
  overflow-x:auto;
  padding:.75rem .2rem .2rem;
  justify-content:center;
  scrollbar-width:none;
}
.testi-dock::-webkit-scrollbar { display:none; }
.t-thumb {
  width:46px; height:46px;
  border-radius:50%;
  object-fit:cover;
  cursor:pointer;
  opacity:.5;
  border:2px solid transparent;
  transition:opacity .4s,border-color .4s,transform .4s;
}
.t-thumb.active {
  opacity:1;
  border-color:#6d5bff;
  transform:scale(1.05);
}
.testi-progress {
  position:absolute;
  left:0; bottom:0;
  height:4px;
  width:100%;
  background:linear-gradient(90deg,#6d5bff22,#42e3ff22);
  overflow:hidden;
  border-radius:0 0 28px 28px;
}
.testi-bar {
  height:100%;
  width:0;
  background:var(--grad);
  animation:testiProg 6s linear forwards;
}
@keyframes testiProg {
  from{width:0;} to {width:100%;}
}
.testi-nav-btn {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border:none;
  background:var(--glass);
  border:1px solid var(--border);
  color:var(--text-dim);
  border-radius:50%;
  cursor:pointer;
  backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center;
  font-size:1.1rem;
  transition:background .4s,color .4s,border-color .4s;
}
.testi-nav-btn:hover { color:var(--text); background:#ffffff18; }
body.light .testi-nav-btn:hover { background:#f0f3f8; }
.testi-prev { left:18px; }
.testi-next { right:18px; }
@media (max-width:640px){
  .testi-nav-btn { width:40px; height:40px; font-size:1rem; }
  .testi-prev { left:10px; }
  .testi-next { right:10px; }
}

/* Impact */
#impact .impact-stats {
  display:grid;
  gap:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:.6rem;
}
.impact-stats div {
  text-align:center;
  background:linear-gradient(140deg,var(--glass),transparent);
  border:1px solid var(--border);
  padding:1.2rem 1rem 1rem;
  border-radius:18px;
  transition:transform var(--speed),border-color var(--speed);
}
.impact-stats div:hover { transform:translateY(-6px); border-color:#6d5bffbb; }
.impact-num {
  font-family:'Syne',sans-serif;
  font-size:1.9rem;
  background:var(--grad);
  -webkit-background-clip:text;
  color:transparent;
  display:block;
  margin-bottom:.35rem;
}

/* Contact */
.contact form {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:1.4rem;
}
.contact form input,
.contact form textarea {
  font-family:inherit;
  font-size:.95rem;
  padding:1.05rem 1.1rem;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:16px;
  color:var(--text);
  outline:none;
  resize:vertical;
  min-height:56px;
  transition:border-color var(--speed),background var(--speed);
}
.contact form textarea { min-height:160px; grid-column:1/-1; }
.contact form input:focus,
.contact form textarea:focus { border-color:#6d5bff; background:linear-gradient(120deg,var(--glass),#6d5bff15); }
body.light .contact form input,
body.light .contact form textarea { background:#ffffffd5; }
body.light .contact form input:focus,
body.light .contact form textarea:focus { background:#ffffff; box-shadow:var(--focus-ring); }

.send-btn {
  grid-column:1/-1;
  cursor:pointer;
  font-weight:600;
  border:none;
  background:var(--grad);
  color:#fff;
  padding:1rem 1.2rem;
  border-radius:18px;
  font-size:.95rem;
  letter-spacing:.9px;
  display:inline-flex;
  gap:.55rem;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:filter .35s, transform .35s;
}
.send-btn:hover { filter:brightness(1.15); transform:translateY(-3px); }
.success { font-size:.75rem; letter-spacing:.8px; margin-top:.35rem; color:var(--ok); }

/* Utilities */
.muted { color:var(--text-dim); font-size:.9rem; letter-spacing:.6px; }

/* Back to top */
#backToTop {
  position:fixed; bottom:24px; right:24px;
  width:48px; height:48px;
  border-radius:50%;
  background:var(--grad);
  border:none;
  color:#fff;
  cursor:pointer;
  font-size:1.25rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px -8px #000a;
  opacity:0; visibility:hidden;
  transform:translateY(14px);
  transition:opacity var(--speed), transform var(--speed);
  z-index:120;
}
#backToTop.show { opacity:1; visibility:visible; transform:translateY(0); }
#backToTop:hover { filter:brightness(1.15); }

/* Hero */
header { text-align:center; position:relative; padding:clamp(3rem,12vw,6rem) clamp(1.1rem,4vw,3.2rem) 2rem; }
header .tagline {
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:4px;
  color:var(--text-dim);
  display:inline-block;
  background:var(--glass);
  padding:.6rem 1.1rem;
  border:1px solid var(--border);
  border-radius:40px;
  backdrop-filter:blur(12px);
}
#typed { font-size:clamp(1rem,2.6vw,1.25rem); font-weight:500; margin-top:1.1rem; color:var(--text-dim); min-height:1.4em; }

/* Cursor blob */
.cursor-blob {
  position:fixed;
  top:0; left:0;
  width:240px; height:240px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#6d5bff,#42e3ff);
  opacity:.14;
  pointer-events:none;
  mix-blend-mode:plus-lighter;
  filter:blur(60px);
  transform:translate(-50%,-50%);
  z-index:0;
}
body.light .cursor-blob { opacity:.20; filter:blur(70px); }

/* Footer */
.footer {
  text-align:center;
  padding:3.2rem 1rem 4rem;
  font-size:.72rem;
  color:var(--text-dim);
  letter-spacing:2px;
}
.footer .socials {
  margin:1.2rem 0 0;
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
}
.footer .socials a {
  font-size:.63rem;
  letter-spacing:1px;
  text-decoration:none;
  padding:.55rem .85rem;
  border:1px solid var(--border);
  border-radius:30px;
  background:linear-gradient(140deg,var(--glass),transparent);
  color:var(--text-dim);
  transition:color .4s,border-color .4s,background .5s;
}
.footer .socials a:hover { color:var(--text); border-color:#6d5bff99; background:linear-gradient(140deg,var(--glass),#6d5bff11); }

/* Responsive tweaks */
@media (max-width:780px){
  .section { padding:2.8rem 1.2rem; }
  .project-card { min-height:160px; }
}
@media (max-width:520px){
  h1 { font-size:clamp(2rem,9vw,2.9rem); }
  .about-grid { grid-template-columns:1fr; }
  .testi-card { padding:2.1rem 1.2rem 2.4rem; }
  .repo-btn { font-size:.62rem; }
}