@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');
:root {
  --primary-color: #0099ff;
  --background-color: #111827;
  --surface-color: rgba(31, 41, 55, 0.5);
  --surface-solid: rgb(31, 41, 55);
  --text-color: #f9fafb;
  --text-secondary: #9ca3af;
  --transition: 0.3s cubic-bezier(.4,2,.3,1);
}
* {margin:0;padding:0;box-sizing:border-box;}
html { scroll-behavior:smooth; }
body { font-family: 'Poppins',sans-serif; background:var(--background-color); color:var(--text-color);}
header {width:100vw;}
main {min-height: 70vh;}
.page {padding:4rem 1rem 2rem;max-width:980px;margin:0 auto;}
.hero-title { font-size:2.7rem; font-weight:700;}
.typewriter {font-size:1.25rem; color:var(--primary-color);margin-bottom:1.4rem;}
.accent { color:var(--primary-color);}
.cta-button {
  display:inline-block;background:var(--primary-color);color:#fff;
  padding:0.8rem 2rem;border-radius:5px;text-decoration:none;font-weight:600;
  font-size:1rem;transition:transform .18s;
  margin:0.7rem 0.3rem 0.7rem 0;
  position:relative;overflow:hidden;
}
.cta-button:hover {transform:scale(1.07);}
.resume-download::after {
  content: '\\2B07'; font-size:1.05em;margin-left:0.6em;
  display:inline-block;vertical-align:middle;
  animation:bounce 1.2s infinite;
}
@keyframes bounce {0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);}}
.navbar {
  max-width:1300px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 2rem; position:relative; z-index:200;
}
.logo { font-weight:700; font-size:1.7rem; color:var(--primary-color);}
.nav-links {display:flex;gap:2rem;list-style:none;}
.nav-links a {text-decoration:none;color:var(--text-color);font-size:1.08rem;font-weight:500;position:relative;}
.nav-links a:after {content:'';display:block;height:2px;width:0;background:var(--primary-color);transition:width .3s;}
.nav-links a:hover:after, .nav-links a.active:after {width:100%;}
.hamburger {display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.hamburger span {width:28px;height:3px;background:var(--text-color);border-radius:2px;transition:all 0.3s;}
.hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg);}
.hamburger.open span:nth-child(2) {opacity:0;}
.hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg);}
@media(max-width:850px){
  .nav-links {flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--surface-solid);padding:2rem 1rem;display:none;}
  .nav-links.open {display:flex;}
  .hamburger {display:flex;}
}
.ui-controls {display:flex;gap:1rem;align-items:center;}
.theme-switch, .cursor-switch {
  background:none;border:none;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
}
.theme-icon:before { content: '\\2600'; font-size:1.2rem;color:var(--primary-color);}
body.light .theme-icon:before {content:'\\263E';color:#444;}
#theme-color-picker{width:32px;height:32px;border:none;border-radius:50%;background:none;}
.cursor-icon:before { content: '\\25CF'; font-size:1.1rem; color: var(--primary-color);}
body.cursor-2 * {cursor:url('https://cur.cursors-4u.net/cursors/cur-13/cur1168.cur'),auto!important;}
.custom-cursor {
  position:fixed;top:0;left:0;width:24px;height:24px;pointer-events:none;border-radius:50%;
  border:2px solid var(--primary-color);mix-blend-mode:difference;z-index:1200;transition:background 0.2s, border-color 0.2s, transform 0.14s;transform:translate(-50%,-50%) scale(1);
}
.custom-cursor.active { background: var(--primary-color); border-color: #fff; transform: translate(-50%,-50%) scale(1.26);}
.floating-socials {
  position: fixed; top: 50%; left: 0; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1.2rem; z-index: 110;
}
.floating-socials a {
  width:36px;height:36px;background:var(--surface-color);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:background 0.23s, box-shadow 0.2s;
}
.floating-socials a:hover { background: var(--primary-color);}
.floating-socials img { width:20px; height:20px; filter: invert(78%) brightness(1.3);}
.floating-socials a:hover img { filter: invert(0%) brightness(2);}
@media (max-width:600px){
  .ui-controls {left:0;right:0;width:100vw;top:0.8rem;transform:none;justify-content:center;}
  .floating-socials {left:auto;right:0.3rem;flex-direction:row;top:auto;bottom:2.2rem;transform:none;gap:0.82rem;}
}
.about-bio {display:flex;gap:2rem;align-items:center;flex-wrap:wrap;}
.about-photo {width:125px;height:125px;border-radius:50%;object-fit:cover;border:3px solid var(--primary-color);}
.stats {display:flex;gap:2.3rem;margin-top:2.3rem;}
.stats div {text-align:center;font-size:1.1rem;}
.stats .count {font-size:2.3rem;font-weight:bold;color:var(--primary-color);}
.timeline {position:relative;max-width:700px;margin:2.5rem auto;}
.timeline-item {padding:1rem 2.5rem;border-left:4px solid var(--primary-color);margin-bottom:1.2rem;position:relative;}
.timeline-item h3 {margin:0 0 .15em 0;}
.timeline-item p {color:var(--text-secondary);}
.timeline-item:before {
  content:"";width:15px;height:15px;position:absolute;left:-10px;top:1.4em;
  background:var(--background-color);border:3px solid var(--primary-color);border-radius:50%;
}
.project-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;margin-top:2rem;}
.project-card {
  background: var(--surface-solid); border-radius: 11px; padding:1.3rem 1.2rem;
  transition: transform 0.22s, box-shadow 0.18s;
  width: 100%; display: flex; flex-direction: column;
  box-shadow:0 4px 18px 0 rgba(0,0,0,0.07);
  cursor:pointer;
}
.project-card:hover { transform: translateY(-7px) scale(1.025); box-shadow:0 10px 26px 0 rgba(0,0,0,0.16);}
.project-card h3 { margin-bottom:0.3rem;color:var(--primary-color);}
.project-card p { color:var(--text-secondary);flex-grow:1;}
.project-card .tags {margin-top:0.7rem;display:flex;gap:0.5rem;flex-wrap:wrap;}
.project-card .tags span {background:rgba(0,153,255,0.17);color:var(--primary-color);padding:0.22rem 0.6rem;border-radius:4px;font-size:0.83rem;}
.modal-overlay {
  position:fixed;top:0;left:0;width:100vw;height:100vh;
  background:rgba(0,0,0,0.78);display:flex;align-items:center;justify-content:center;
  z-index:2000;
}
.modal-content {
  background:var(--surface-color);padding:2.1rem 2rem 1.5rem 2rem;border-radius:16px;max-width:450px;width:100%;
  color:var(--text-color);position:relative;
}
.close-btn {
  position:absolute;top:1rem;right:1.1rem;font-size:2rem;cursor:pointer;color:var(--primary-color);}
.modal-title {margin-bottom:.4em;}
.modal-tags {margin-top:1.1em;}
.cert-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;margin-top:2rem;}
.cert-card {
  background:var(--surface-solid);border-left:4px solid var(--primary-color);border-radius:7px;
  padding:1.3rem;display:flex;flex-direction:column;justify-content:center;
}
.cert-title {font-weight:600;font-size:1.08rem;}
.cert-issuer {color:var(--text-secondary);margin-top:0.19em;}
#contact-form {max-width:400px;margin:2.4rem auto 0;display:flex;flex-direction:column;gap:1.5rem;}
.form-group {position:relative;}
#contact-form input, #contact-form textarea {
  width:100%;padding:0.8rem 1rem;background:var(--background-color);
  border:2px solid var(--surface-color);color:var(--text-color);
  border-radius:8px;font-size:1rem;transition:border 0.22s, box-shadow 0.22s;outline:none;}
#contact-form input:focus, #contact-form textarea:focus {border-color:var(--primary-color);box-shadow:0 2px 16px rgba(0,153,255,0.07);}
.form-group .error {
  color:#ff5c5c;font-size:0.83rem;position:absolute;left:7px;bottom:-1.19em;opacity:0;transition:opacity 0.22s;}
.form-group.error .error {opacity:1;}
#form-status {margin-top:1rem;font-size:1.09rem;min-height:1.3em;text-align:center;color:var(--primary-color);}
footer {text-align:center;padding:2.2rem;margin:0 1rem;}
.footer-content {max-width:1100px;margin:0 auto;}
.footer-socials a {color:var(--text-secondary);margin:0 0.5rem;text-decoration:none;}
.footer-socials a:hover {color:var(--primary-color);}
@media(max-width:620px){
  .hero-title{font-size:2.1rem;}
  .about-bio{flex-direction:column;align-items:flex-start;}
  .stats{gap:1.2rem;}
  .timeline{padding:1rem;}
}
body.light { --background-color: #f4f6fa; --surface-color: rgba(241,244,250,0.8); --surface-solid: #e9effa; --text-color: #0b2542; --text-secondary: #345; }
body.light .logo, body.light h2, body.light .resume-download, body.light .stats .count { color: var(--primary-color); }
body.light .project-card, body.light .cert-card, body.light .page { background: var(--surface-color);}
body.light footer, body.light .navbar { background: var(--surface-solid);}
body.light .cta-button { background: var(--primary-color); color: #fff;}
body.light .modal-content { background: var(--surface-color); color: var(--text-color);}
body.light .custom-cursor { border-color: var(--primary-color); background: rgba(0,153,255,0.18);}

.theme-icon:before { content: '☀'; font-size:1.2rem;color:var(--primary-color);}
body.light .theme-icon:before {content:'☾';color:#444;} /* Changed \263E to ☾ for moon icon */
#theme-color-picker{width:32px;height:32px;border:none;border-radius:50%;background:none;}
.cursor-icon:before { content: '●'; font-size:1.1rem; color: var(--primary-color);} /* Changed \25CF to ● */
.cta-button {
  display:inline-block;background:var(--primary-color);color:#fff;
  padding:0.8rem 2rem;border-radius:5px;text-decoration:none;font-weight:600;
  font-size:1rem;transition:transform .18s;
  margin:0.7rem 0.3rem 0.7rem 0;
  position:relative;overflow:hidden;
}
.cta-button:hover {transform:scale(1.07);}
.resume-download::after {
  content: '⬇'; /* Changed from '\\2B07' to '⬇' */
  font-size:1.05em;margin-left:0.6em;
  display:inline-block;vertical-align:middle;
  animation:bounce 1.2s infinite;
}
@keyframes bounce {0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);}}
.floating-socials img { width:20px; height:20px; filter: invert(78%) brightness(1.3);}
.floating-socials a:hover img { filter: invert(0%) brightness(2);}
/* ... other CSS rules ... */

.floating-socials img { width:20px; height:20px; filter: invert(78%) brightness(1.3);}
.floating-socials a:hover img { filter: invert(0%) brightness(2);}

body.light .floating-socials img {
  filter: invert(10%) sepia(0%) saturate(7500%) hue-rotate(0deg) brightness(100%) contrast(100%); /* Makes them dark on light background */
}
body.light .floating-socials a:hover img {
  filter: invert(100%) brightness(2); /* Makes them white on primary-color hover in light mode */
}