style.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #080b14;
  --bg2: #0d1120;
  --card: rgba(255,255,255,0.04);
  --border: rgba(255,255,255,0.08);
  --blue: #3b82f6;
  --purple: #8b5cf6;
  --cyan: #06b6d4;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --white: #ffffff;
  --gradient: linear-gradient(135deg, #3b82f6, #8b5cf6, #06b6d4);
  --glow: 0 0 30px rgba(59,130,246,0.3);
}
[data-theme="light"] {
  --bg: #f1f5f9; --bg2: #ffffff; --card: rgba(0,0,0,0.04);
  --border: rgba(0,0,0,0.1); --text: #1e293b; --muted: #64748b;
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; transition:background .3s,color .3s; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; display:block; }

/* Loader */
#loader { position:fixed; inset:0; background:var(--bg); z-index:9999; display:flex; align-items:center; justify-content:center; transition:opacity .5s; }
#loader.hide { opacity:0; pointer-events:none; }
.loader-inner { text-align:center; }
.loader-logo { font-family:'Space Grotesk',sans-serif; font-size:3rem; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; margin-bottom:1.5rem; }
.loader-bar { width:200px; height:3px; background:var(--border); border-radius:99px; overflow:hidden; }
.loader-fill { height:100%; background:var(--gradient); border-radius:99px; animation:loadFill 1.8s ease forwards; }
@keyframes loadFill { from{width:0} to{width:100%} }

/* Scroll Progress */
#scroll-progress { position:fixed; top:0; left:0; height:3px; background:var(--gradient); z-index:9998; width:0%; transition:width .1s; }

/* Cursor */
#cursor { position:fixed; width:10px; height:10px; background:var(--blue); border-radius:50%; pointer-events:none; z-index:9997; transform:translate(-50%,-50%); transition:transform .1s; }
#cursor-follower { position:fixed; width:30px; height:30px; border:1px solid var(--blue); border-radius:50%; pointer-events:none; z-index:9996; transform:translate(-50%,-50%); transition:transform .15s,width .3s,height .3s; }
@media(max-width:768px){#cursor,#cursor-follower{display:none}}

/* Navbar */
#navbar { position:fixed; top:0; width:100%; z-index:1000; padding:.9rem 2rem; transition:background .3s,backdrop-filter .3s,box-shadow .3s; }
#navbar.scrolled { background:rgba(8,11,20,0.85); backdrop-filter:blur(20px); box-shadow:0 1px 0 var(--border); }
[data-theme="light"] #navbar.scrolled { background:rgba(241,245,249,0.85); }
.nav-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:2rem; }
.nav-logo { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; }
.nav-links { display:flex; list-style:none; gap:2rem; margin-left:auto; align-items:center; }
.nav-link { font-size:.9rem; font-weight:500; color:var(--muted); transition:color .2s; position:relative; }
.nav-link::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:2px; background:var(--gradient); border-radius:99px; transition:width .3s; }
.nav-link:hover,.nav-link.active { color:var(--white); }
.nav-link:hover::after,.nav-link.active::after { width:100%; }
.nav-cta { padding:.45rem 1.2rem; border-radius:99px; border:1px solid var(--blue); color:var(--blue) !important; transition:background .2s,color .2s !important; }
.nav-cta:hover { background:var(--blue); color:var(--white) !important; }
.nav-cta::after { display:none; }
.theme-toggle { background:none; border:1px solid var(--border); color:var(--muted); width:36px; height:36px; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s,color .2s; margin-left:1rem; }
.theme-toggle:hover { border-color:var(--blue); color:var(--blue); }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; margin-left:.5rem; }
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:99px; transition:transform .3s,opacity .3s; }
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:768px){
  .nav-links{display:none;position:fixed;top:0;left:0;width:100%;height:100vh;background:var(--bg2);flex-direction:column;justify-content:center;align-items:center;gap:2.5rem;z-index:999;}
  .nav-links.open{display:flex;}
  .hamburger{display:flex;z-index:1001;}
  .theme-toggle{z-index:1001;}
}

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.6rem; border-radius:10px; font-weight:600; font-size:.9rem; cursor:pointer; border:none; transition:transform .2s,box-shadow .2s,background .2s; }
.btn-primary { background:var(--gradient); color:#fff; box-shadow:var(--glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(59,130,246,.5); }
.btn-outline { background:transparent; color:var(--blue); border:1.5px solid var(--blue); }
.btn-outline:hover { background:var(--blue); color:#fff; transform:translateY(-2px); }
.btn-ghost { background:var(--card); color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover { border-color:var(--purple); color:var(--purple); transform:translateY(-2px); }
.btn-full { width:100%; justify-content:center; }

/* Gradient text */
.gradient-text { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* Sections */
.section { padding:6rem 2rem; }
.section-inner { max-width:1200px; margin:0 auto; }
.section-tag { display:inline-block; font-size:.8rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--cyan); background:rgba(6,182,212,.1); padding:.35rem .9rem; border-radius:99px; border:1px solid rgba(6,182,212,.2); margin-bottom:1rem; }
.section-title { font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,4vw,3rem); font-weight:700; line-height:1.2; margin-bottom:3rem; }

/* HERO */
.hero { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:0 2rem; position:relative; overflow:hidden; }
#particleCanvas { position:absolute; inset:0; width:100%; height:100%; }
.hero-content { max-width:1200px; width:100%; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:3rem; position:relative; z-index:1; padding-top:5rem; }
.hero-text { flex:1; max-width:560px; }
.hero-greeting { font-size:1rem; color:var(--muted); margin-bottom:.5rem; }
.hero-name { font-family:'Space Grotesk',sans-serif; font-size:clamp(2.5rem,6vw,4.5rem); font-weight:800; line-height:1.1; margin-bottom:.75rem; }
.typewriter-wrap { font-size:clamp(1.1rem,2.5vw,1.5rem); font-weight:600; color:var(--muted); margin-bottom:1.25rem; min-height:2rem; }
#typewriter { color:var(--cyan); }
.cursor-blink { color:var(--cyan); animation:blink .7s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-bio { color:var(--muted); line-height:1.8; margin-bottom:1.75rem; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2rem; }
.hero-socials { display:flex; gap:1rem; }
.social-icon { width:42px; height:42px; border-radius:50%; border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); transition:border-color .2s,color .2s,transform .2s,box-shadow .2s; }
.social-icon:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-3px); box-shadow:var(--glow); }
.hero-image-wrap { display:flex; flex-direction:column; align-items:center; gap:2rem; flex-shrink:0; }
.hero-img-ring { position:relative; width:260px; height:260px; }
.hero-img-ring::before { content:''; position:absolute; inset:-6px; border-radius:50%; background:var(--gradient); animation:spin 4s linear infinite; }
.hero-img-ring::after { content:''; position:absolute; inset:-12px; border-radius:50%; border:1px dashed rgba(59,130,246,.3); animation:spin 8s linear infinite reverse; }
@keyframes spin { to{transform:rotate(360deg)} }
.hero-img { width:260px; height:260px; border-radius:50%; object-fit:cover; object-position:top; position:relative; z-index:1; border:4px solid var(--bg); }
.hero-stats { display:grid; grid-template-columns:repeat(2,1fr); gap:.75rem; width:100%; }
.stat-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem; text-align:center; backdrop-filter:blur(10px); transition:border-color .3s,transform .3s; }
.stat-card:hover { border-color:var(--blue); transform:translateY(-3px); }
.stat-num { font-family:'Space Grotesk',sans-serif; font-size:1.5rem; font-weight:700; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label { font-size:.72rem; color:var(--muted); margin-top:.2rem; }
.scroll-down { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:.5rem; color:var(--muted); font-size:.75rem; animation:float 2s ease-in-out infinite; }
.scroll-wheel { width:22px; height:36px; border:2px solid var(--muted); border-radius:99px; position:relative; }
.scroll-wheel::before { content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%); width:4px; height:8px; background:var(--blue); border-radius:99px; animation:scrollAnim 1.5s infinite; }
@keyframes scrollAnim { 0%{top:5px;opacity:1} 100%{top:18px;opacity:0} }
@keyframes float { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(-8px)} }
@media(max-width:900px){
  .hero-content{flex-direction:column-reverse;text-align:center;padding-top:6rem;}
  .hero-image-wrap{width:100%;align-items:center;}
  .hero-buttons{justify-content:center;}
  .hero-socials{justify-content:center;}
  .hero-img,.hero-img-ring{width:200px;height:200px;}
}

/* ABOUT */
.about { background:var(--bg2); }
.about-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
.about-img-frame { position:relative; border-radius:20px; overflow:hidden; max-width:380px; }
.about-img-frame img { width:100%; border-radius:20px; }
.img-glow { position:absolute; inset:0; border-radius:20px; box-shadow:0 0 60px rgba(59,130,246,.25) inset; pointer-events:none; }
.about-badges { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.25rem; }
.badge { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--cyan); background:rgba(6,182,212,.08); border:1px solid rgba(6,182,212,.2); padding:.35rem .85rem; border-radius:99px; }
.about-text-col p { color:var(--muted); line-height:1.85; margin-bottom:1rem; }
.edu-timeline { margin-top:2rem; }
.edu-timeline h3 { font-size:1rem; font-weight:700; margin-bottom:1rem; color:var(--text); }
.timeline-item { display:flex; gap:1rem; margin-bottom:1.25rem; position:relative; }
.tl-dot { width:12px; height:12px; border-radius:50%; background:var(--gradient); flex-shrink:0; margin-top:4px; box-shadow:0 0 12px rgba(59,130,246,.5); }
.tl-content strong { display:block; font-weight:600; color:var(--text); }
.tl-meta { font-size:.8rem; color:var(--muted); }
@media(max-width:768px){.about-grid{grid-template-columns:1fr;}.about-img-col{display:flex;flex-direction:column;align-items:center;}}

/* SKILLS */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.5rem; margin-bottom:3rem; }
.skill-category { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; transition:border-color .3s,transform .3s; animation-delay:var(--delay,0s); }
.skill-category:hover { border-color:var(--purple); transform:translateY(-4px); }
.skill-category h3 { font-size:.9rem; font-weight:700; margin-bottom:1rem; color:var(--text); display:flex; align-items:center; gap:.5rem; }
.skill-category h3 i { color:var(--cyan); }
.skill-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.chip { font-size:.78rem; padding:.3rem .75rem; border-radius:99px; background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2); color:var(--blue); font-weight:500; }
.marquee-wrap { overflow:hidden; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.marquee-track { display:flex; gap:2rem; animation:marquee 20s linear infinite; width:max-content; }
.marquee-track span { font-size:.85rem; font-weight:600; color:var(--muted); white-space:nowrap; padding:.3rem .8rem; border-radius:99px; border:1px solid var(--border); }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* PROJECTS */
.projects { background:var(--bg2); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.75rem; }
.project-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:1.75rem; display:flex; flex-direction:column; gap:1rem; transition:border-color .3s,transform .3s,box-shadow .3s; animation-delay:var(--delay,0s); position:relative; overflow:hidden; }
.project-card::before { content:''; position:absolute; inset:0; background:var(--gradient); opacity:0; transition:opacity .3s; border-radius:20px; }
.project-card:hover { transform:translateY(-6px); border-color:var(--blue); box-shadow:var(--glow); }
.project-card-top { display:flex; align-items:center; justify-content:space-between; }
.project-icon { width:44px; height:44px; border-radius:12px; background:rgba(59,130,246,.1); border:1px solid rgba(59,130,246,.2); display:flex; align-items:center; justify-content:center; color:var(--blue); font-size:1.2rem; }
.project-badges { display:flex; gap:.4rem; flex-wrap:wrap; }
.proj-badge { font-size:.7rem; padding:.25rem .65rem; border-radius:99px; font-weight:600; }
.proj-badge.gold { background:rgba(234,179,8,.15); border:1px solid rgba(234,179,8,.3); color:#eab308; }
.proj-badge.blue { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3); color:var(--blue); }
.project-card h3 { font-family:'Space Grotesk',sans-serif; font-size:1.1rem; font-weight:700; color:var(--text); }
.project-card p { font-size:.85rem; color:var(--muted); line-height:1.7; }
.project-stack { display:flex; flex-wrap:wrap; gap:.4rem; }
.project-stack span { font-size:.72rem; padding:.2rem .6rem; border-radius:99px; background:rgba(139,92,246,.08); border:1px solid rgba(139,92,246,.2); color:var(--purple); }
.project-features { list-style:none; display:flex; flex-direction:column; gap:.4rem; }
.project-features li { font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:.4rem; }
.project-features li i { color:var(--cyan); font-size:.75rem; }
.project-links { display:flex; gap:.75rem; margin-top:auto; }
.proj-btn { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:600; padding:.5rem 1rem; border-radius:8px; background:var(--card); border:1px solid var(--border); color:var(--text); transition:border-color .2s,color .2s,background .2s; }
.proj-btn:hover { border-color:var(--blue); color:var(--blue); }

/* EXPERIENCE */
.exp-timeline { position:relative; padding-left:2rem; }
.exp-timeline::before { content:''; position:absolute; left:18px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--blue),var(--purple),transparent); }
.exp-item { display:flex; gap:2rem; margin-bottom:2.5rem; position:relative; animation-delay:var(--delay,0s); }
.exp-dot { width:36px; height:36px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; color:#fff; font-size:.85rem; flex-shrink:0; box-shadow:var(--glow); margin-left:-2rem; }
.exp-card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:1.5rem; flex:1; transition:border-color .3s,transform .3s; }
.exp-card:hover { border-color:var(--purple); transform:translateX(4px); }
.exp-badge { font-size:.7rem; font-weight:600; color:var(--cyan); background:rgba(6,182,212,.1); border:1px solid rgba(6,182,212,.2); padding:.2rem .65rem; border-radius:99px; display:inline-block; margin-bottom:.5rem; }
.exp-card h3 { font-weight:700; font-size:1rem; margin-bottom:.4rem; color:var(--text); }
.exp-card p { font-size:.85rem; color:var(--muted); line-height:1.7; }

/* ACHIEVEMENTS */
.achievements { background:var(--bg2); }
.ach-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; }
.ach-card { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:2rem 1.5rem; text-align:center; transition:border-color .3s,transform .3s,box-shadow .3s; animation-delay:var(--delay,0s); }
.ach-card:hover { border-color:var(--purple); transform:translateY(-5px); box-shadow:0 0 30px rgba(139,92,246,.2); }
.ach-icon { width:60px; height:60px; border-radius:16px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; margin:0 auto 1.25rem; box-shadow:var(--glow); }
.ach-card h3 { font-weight:700; font-size:1rem; margin-bottom:.6rem; }
.ach-card p { font-size:.83rem; color:var(--muted); line-height:1.7; }

/* CONTACT */
.contact-subtitle { color:var(--muted); font-size:1.05rem; margin-top:-2rem; margin-bottom:2.5rem; }
.contact-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:3rem; align-items:start; }
.contact-info { display:flex; flex-direction:column; gap:1.25rem; }
.contact-link { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; background:var(--card); border:1px solid var(--border); border-radius:14px; color:var(--text); font-size:.9rem; transition:border-color .2s,transform .2s; }
.contact-link i { width:36px; height:36px; border-radius:10px; background:rgba(59,130,246,.1); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; }
.contact-link:hover { border-color:var(--blue); transform:translateX(4px); }
.contact-form { background:var(--card); border:1px solid var(--border); border-radius:20px; padding:2rem; display:flex; flex-direction:column; gap:1.25rem; }
.form-group { position:relative; }
.form-group input, .form-group textarea { width:100%; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:10px; padding:1rem; color:var(--text); font-size:.9rem; font-family:'Inter',sans-serif; outline:none; resize:vertical; transition:border-color .2s,box-shadow .2s; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(59,130,246,.15); }
.form-group label { display:none; }
.form-note { font-size:.85rem; color:var(--cyan); text-align:center; }
@media(max-width:768px){.contact-grid{grid-template-columns:1fr;}}

/* FOOTER */
.footer { padding:2rem; border-top:1px solid var(--border); background:var(--bg2); }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-inner p { color:var(--muted); font-size:.85rem; }
.heart { color:#ef4444; } .coffee { font-size:1em; }
.footer-socials { display:flex; gap:1rem; }
.footer-socials a { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.85rem; transition:border-color .2s,color .2s; }
.footer-socials a:hover { border-color:var(--blue); color:var(--blue); }

/* Back to Top */
#backToTop { position:fixed; bottom:2rem; right:2rem; width:44px; height:44px; border-radius:50%; background:var(--gradient); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:var(--glow); opacity:0; transform:translateY(20px); transition:opacity .3s,transform .3s; z-index:900; }
#backToTop.show { opacity:1; transform:translateY(0); }
#backToTop:hover { transform:translateY(-4px); }

/* Reveal animations */
.reveal-up, .reveal-left, .reveal-right { opacity:0; transition:opacity .7s ease,transform .7s ease; }
.reveal-up { transform:translateY(40px); }
.reveal-left { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }
.reveal-up.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:none; }