:root {
    --bg-primary: #0a0a0f;
    --bg-secondary: #111118;
    --bg-card: #16161f;
    --text-primary: #e8e8f0;
    --text-secondary: #a0a0b8;
    --text-muted: #6b6b80;
    --accent: #7c5cfc;
    --accent-light: #9b7fff;
    --accent-glow: rgba(124, 92, 252, 0.3);
    --gradient-1: linear-gradient(135deg, #7c5cfc, #5c8cfc);
    --gradient-2: linear-gradient(135deg, #fc5c7d, #fc8c5c);
    --gradient-3: linear-gradient(135deg, #5cfc9b, #5cccfc);
    --border-color: rgba(255, 255, 255, 0.06);
    --border-glow: rgba(124, 92, 252, 0.2);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.4);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.4s ease;
    --font-heading: 'Space Grotesk', sans-serif;
    --font-body: 'Inter', sans-serif;
    --nav-height: 80px;
    --max-width: 1200px;
}

body.light-mode {
    --bg-primary: #f8f9fc;
    --bg-secondary: #ffffff;
    --bg-card: #f0f1f5;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #7a7a9a;
    --accent: #6c5ce7;
    --accent-light: #8b7cf0;
    --border-color: rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.05);
    --shadow-md: 0 8px 30px rgba(0,0,0,0.08);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--nav-height); font-size:16px; }
body {
    font-family:var(--font-body);
    background:var(--bg-primary);
    color:var(--text-primary);
    line-height:1.6;
    overflow-x:hidden;
    cursor:none;
    transition:background 0.4s, color 0.4s;
}
body::-webkit-scrollbar { width:6px; }
body::-webkit-scrollbar-track { background:var(--bg-primary); }
body::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }
a { text-decoration:none; color:inherit; cursor:none; }
ul { list-style:none; }
button { cursor:none; border:none; background:none; font:inherit; }

/* Cursor */
.cursor { width:8px; height:8px; background:var(--accent-light); border-radius:50%; position:fixed; pointer-events:none; z-index:9999; mix-blend-mode:difference; }
.cursor-follower { width:36px; height:36px; border:2px solid var(--accent-light); border-radius:50%; position:fixed; pointer-events:none; z-index:9998; transition:0.15s; mix-blend-mode:difference; }
.cursor-follower.hover { width:60px; height:60px; border-color:var(--accent); background:rgba(124,92,252,0.1); }
.cursor-follower.clicking { transform:scale(0.7); }

/* Canvas */
#particleCanvas { position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.4; }

/* Navbar */
.navbar { position:fixed; top:0; left:0; width:100%; z-index:1000; padding:0 2rem; transition:0.4s; background:transparent; }
.navbar.scrolled { background:var(--bg-primary); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-color); box-shadow:var(--shadow-sm); }
.nav-container { max-width:var(--max-width); margin:0 auto; display:flex; align-items:center; justify-content:space-between; height:var(--nav-height); }
.nav-logo { font-family:var(--font-heading); font-size:1.6rem; font-weight:700; display:flex; gap:2px; z-index:1001; }
.logo-bracket { color:var(--accent); font-weight:300; }
.logo-text { background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.nav-menu { display:flex; gap:0.5rem; }
.nav-link { font-family:var(--font-heading); font-size:0.9rem; font-weight:500; color:var(--text-secondary); padding:0.6rem 1.1rem; border-radius:var(--radius-sm); display:flex; align-items:center; gap:6px; transition:var(--transition-fast); }
.nav-number { font-size:0.75rem; color:var(--accent); font-weight:600; }
.nav-link:hover, .nav-link.active { color:var(--text-primary); background:rgba(128,128,128,0.08); }
body.light-mode .nav-link.active { background:rgba(108,92,231,0.1); }
.nav-indicator { position:absolute; bottom:0; left:0; height:2px; background:var(--gradient-1); transition:width 0.4s, left 0.4s; width:0; opacity:0; }
.theme-toggle { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.2rem; color:var(--text-secondary); transition:var(--transition-fast); z-index:1001; margin-right:0.5rem; }
.theme-toggle:hover { color:var(--accent-light); background:rgba(128,128,128,0.1); }
.nav-actions { display:flex; align-items:center; gap:0.25rem; }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; z-index:1001; }
.hamburger-line { width:26px; height:2px; background:var(--text-primary); transition:var(--transition-fast); }
.nav-toggle.active .hamburger-line:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active .hamburger-line:nth-child(2) { opacity:0; }
.nav-toggle.active .hamburger-line:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.mobile-overlay { position:fixed; inset:0; background:var(--bg-primary); backdrop-filter:blur(30px); z-index:999; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity 0.4s; }
.mobile-overlay.active { opacity:1; pointer-events:all; }
.mobile-link { font-family:var(--font-heading); font-size:2rem; font-weight:600; color:var(--text-secondary); margin:1rem 0; transition:var(--transition-fast); }
.mobile-link:hover, .mobile-link.active { color:var(--text-primary); }

/* Hero */
.hero-section { min-height:100vh; display:flex; align-items:center; position:relative; z-index:1; padding:calc(var(--nav-height) + 2rem) 2rem 4rem; }
.hero-container { max-width:var(--max-width); margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.hero-content { display:flex; flex-direction:column; gap:1.5rem; }
.hero-greeting { display:flex; align-items:center; gap:1rem; }
.greeting-line { width:40px; height:2px; background:var(--accent); }
.greeting-text { font-family:var(--font-heading); font-size:1rem; font-weight:500; color:var(--text-secondary); letter-spacing:2px; text-transform:uppercase; }
.hero-name { font-family:var(--font-heading); font-size:clamp(3rem,6vw,5rem); font-weight:700; line-height:1.1; display:flex; flex-wrap:wrap; gap:0.5ch; }
.name-reveal { animation:nameReveal 0.8s ease forwards; opacity:0; transform:translateY(40px); }
.name-reveal:nth-child(1) { animation-delay:0.2s; }
.name-reveal:nth-child(2) { animation-delay:0.35s; }
.name-reveal.accent { background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
@keyframes nameReveal { to { opacity:1; transform:translateY(0); } }
.hero-title-wrapper { display:flex; align-items:center; gap:0.5ch; font-family:var(--font-heading); font-size:1.4rem; font-weight:500; flex-wrap:wrap; }
.dynamic-text { color:var(--accent-light); font-weight:600; }
.cursor-blink { color:var(--accent); animation:blink 1s step-end infinite; }
@keyframes blink { 50% { opacity:0; } }
.hero-description { font-size:1.1rem; color:var(--text-secondary); max-width:500px; line-height:1.7; }
.hero-cta { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.5rem; }
.btn { font-family:var(--font-heading); font-size:0.95rem; font-weight:600; padding:0.9rem 1.8rem; border-radius:var(--radius-md); display:inline-flex; align-items:center; gap:0.6rem; transition:var(--transition-smooth); letter-spacing:0.5px; }
.btn-primary { background:var(--gradient-1); color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:hover { transform:translateY(-3px); }
.btn-outline { border:2px solid var(--border-color); color:var(--text-primary); }
.btn-outline:hover { border-color:var(--accent); background:rgba(124,92,252,0.08); transform:translateY(-3px); }
.btn-resume { border:2px solid var(--accent); color:var(--accent-light); }
.btn-resume:hover { background:var(--accent); color:#fff; transform:translateY(-3px); }
.hero-socials { display:flex; gap:1rem; margin-top:1rem; }
.social-link { width:44px; height:44px; border-radius:50%; border:1px solid var(--border-color); display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:var(--text-secondary); transition:var(--transition-smooth); }
.social-link:hover { border-color:var(--accent); color:var(--accent-light); background:rgba(124,92,252,0.1); transform:translateY(-3px); }

/* Hero visual */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; min-width:350px; }
.hero-orb { position:relative; width:350px; height:350px; }
.orb { position:absolute; border-radius:50%; animation:orbPulse 4s ease-in-out infinite; }
.orb-1 { width:100%; height:100%; background:radial-gradient(circle, rgba(124,92,252,0.2), transparent 70%); }
.orb-2 { width:75%; height:75%; background:radial-gradient(circle, rgba(92,140,252,0.2), transparent 70%); animation-delay:0.5s; }
.orb-3 { width:50%; height:50%; background:radial-gradient(circle, rgba(252,92,125,0.15), transparent 70%); animation-delay:1s; }
@keyframes orbPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
.hero-avatar { width:140px; height:140px; border-radius:50%; background:var(--bg-card); border:2px solid var(--border-color); display:flex; align-items:center; justify-content:center; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; animation:avatarFloat 5s ease-in-out infinite; }
.avatar-placeholder { font-size:3rem; color:var(--accent-light); }
@keyframes avatarFloat { 0%,100% { transform:translate(-50%,-50%) translateY(0); } 50% { transform:translate(-50%,-50%) translateY(-15px); } }
.floating-card { position:absolute; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-md); padding:0.8rem 1.2rem; display:flex; align-items:center; gap:0.6rem; font-weight:600; font-size:0.9rem; box-shadow:var(--shadow-md); animation:floatCard 6s ease-in-out infinite; z-index:3; }
.card-1 { top:5%; right:-10px; } .card-1 i { color:#61dafb; }
.card-2 { bottom:15%; left:-20px; } .card-2 i { color:#68a063; }
.card-3 { bottom:30%; right:-20px; } .card-3 i { color:#336791; }
@keyframes floatCard { 0%,100% { transform:translateY(0); } 33% { transform:translateY(-12px); } 66% { transform:translateY(6px); } }

.scroll-indicator { position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.scroll-mouse { width:26px; height:42px; border:2px solid var(--text-muted); border-radius:14px; display:flex; justify-content:center; padding-top:8px; }
.scroll-wheel { width:4px; height:10px; background:var(--accent-light); border-radius:2px; animation:scrollWheel 2s infinite; }
@keyframes scrollWheel { 0% { transform:translateY(0); opacity:1; } 100% { transform:translateY(14px); opacity:0; } }

/* Sections */
section { padding:6rem 2rem; position:relative; z-index:1; }
.section-container { max-width:var(--max-width); margin:0 auto; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-tag { display:inline-block; font-family:var(--font-heading); font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:3px; color:var(--accent-light); margin-bottom:1rem; padding:0.4rem 1rem; border:1px solid var(--border-glow); border-radius:50px; }
.section-title { font-family:var(--font-heading); font-size:clamp(2.2rem,4vw,3.5rem); font-weight:700; margin-bottom:1.5rem; }
.gradient-text { background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.section-line { width:60px; height:3px; background:var(--gradient-1); margin:0 auto; border-radius:2px; }

/* Reveal animation – visible by default, will become animated */
.reveal { opacity:1; transform:none; transition:opacity 0.8s ease, transform 0.8s ease; }

/* About */
.about-section { background:var(--bg-secondary); }
.about-content { display:grid; grid-template-columns:1fr 1.5fr; gap:4rem; align-items:center; }
.about-image-wrapper { width:280px; height:320px; position:relative; }
.about-image-placeholder { width:100%; height:100%; background:var(--bg-card); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; font-size:5rem; color:var(--accent-light); }
.image-border { position:absolute; top:-8px; left:-8px; right:8px; bottom:8px; border:2px solid var(--accent); border-radius:var(--radius-lg); opacity:0.5; }
.experience-badge { position:absolute; bottom:-10px; right:-10px; background:var(--gradient-1); color:#fff; padding:1rem 1.5rem; border-radius:var(--radius-md); text-align:center; z-index:3; }
.exp-number { font-size:2rem; font-weight:700; }
.about-stats { display:flex; gap:2rem; margin-top:1rem; flex-wrap:wrap; }
.stat-item { text-align:center; }
.stat-number { font-family:var(--font-heading); font-size:2.5rem; font-weight:700; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* Skills */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1.5rem; }
.skill-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); padding:2rem; transition:var(--transition-smooth); }
.skill-card:hover { transform:translateY(-4px); border-color:var(--border-glow); box-shadow:var(--shadow-md); }
.skill-icon { font-size:2.5rem; color:var(--accent-light); margin-bottom:1rem; }
.skill-bar-container { display:flex; align-items:center; gap:1rem; }
.skill-bar { flex:1; height:8px; background:var(--border-color); border-radius:4px; overflow:hidden; }
.skill-bar-fill { height:100%; background:var(--gradient-1); width:0; transition:width 1.5s ease; }
.skill-bar.animated .skill-bar-fill { width:var(--target-width); }

/* Projects */
.projects-section { background:var(--bg-secondary); }
.projects-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px,1fr)); gap:2rem; }
.project-card { background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-lg); overflow:hidden; transition:var(--transition-smooth); }
.project-card:hover { transform:translateY(-8px); border-color:var(--border-glow); box-shadow:var(--shadow-lg); }
.project-image { height:220px; overflow:hidden; position:relative; }
.project-img-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:rgba(255,255,255,0.7); transition:transform 0.5s; }
.project-card:hover .project-img-placeholder { transform:scale(1.08); }
.project-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; opacity:0; transition:0.3s; }
.project-card:hover .project-overlay { opacity:1; }
.project-info { padding:1.5rem; }
.project-tag { font-size:0.75rem; text-transform:uppercase; letter-spacing:2px; color:var(--accent-light); }
.project-title { font-family:var(--font-heading); font-size:1.4rem; margin:0.5rem 0; }
.project-desc { color:var(--text-secondary); font-size:0.95rem; margin-bottom:1rem; }
.project-tech { display:flex; gap:0.5rem; flex-wrap:wrap; }
.project-tech span { font-size:0.8rem; padding:0.3rem 0.8rem; background:rgba(124,92,252,0.1); border:1px solid var(--border-glow); border-radius:50px; color:var(--accent-light); }

/* Contact */
.contact-intro { text-align:center; color:var(--text-secondary); margin-bottom:2rem; }
.contact-form { display:flex; flex-direction:column; gap:1.5rem; max-width:700px; margin:0 auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.form-group input, .form-group textarea { width:100%; padding:1rem; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--radius-sm); color:var(--text-primary); transition:var(--transition-fast); outline:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); }
.contact-alternatives { display:flex; justify-content:center; gap:2rem; margin-top:2rem; flex-wrap:wrap; }
.contact-alt-item { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 1.2rem; border:1px solid var(--border-color); border-radius:50px; color:var(--text-secondary); transition:var(--transition-fast); }
.contact-alt-item:hover { border-color:var(--accent); color:var(--text-primary); }

/* Footer */
.footer { background:var(--bg-secondary); border-top:1px solid var(--border-color); padding:3rem 2rem 1.5rem; }
.footer-container { max-width:var(--max-width); margin:0 auto; }
.footer-top { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-bottom:2rem; }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:1.5rem; border-top:1px solid var(--border-color); color:var(--text-muted); font-size:0.85rem; }

/* Toast – high z-index to avoid being behind footer */
.toast { position:fixed; bottom:2rem; right:2rem; background:var(--bg-card); border:1px solid #2ecc71; border-radius:var(--radius-md); padding:1rem 1.5rem; display:flex; align-items:center; gap:0.8rem; color:#2ecc71; font-weight:500; box-shadow:0 10px 40px rgba(0,0,0,0.5); z-index:10000; transform:translateX(130%); transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1); font-family:var(--font-heading); }
.toast.show { transform:translateX(0); }

/* Resume Modal */
.resume-modal { position:fixed; inset:0; z-index:3000; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:0.4s; }
.resume-modal.active { opacity:1; visibility:visible; }
.resume-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); }
.resume-modal-content { position:relative; width:90%; max-width:900px; max-height:90vh; background:var(--bg-secondary); border-radius:var(--radius-lg); overflow-y:auto; z-index:1; padding:2rem; transform:translateY(30px); transition:transform 0.4s; }
.resume-modal.active .resume-modal-content { transform:translateY(0); }
.resume-modal-close { position:sticky; top:1rem; float:right; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg-card); border:1px solid var(--border-color); z-index:2; }
.resume-actions { display:flex; justify-content:flex-end; margin-bottom:1.5rem; }
.resume-download { background:var(--gradient-1); color:#fff; }
.resume-document { background:var(--bg-primary); padding:2rem; border-radius:var(--radius-md); }
.resume-header { text-align:center; border-bottom:2px solid var(--border-color); padding-bottom:1rem; margin-bottom:2rem; }
.resume-name { font-size:2.5rem; background:var(--gradient-1); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.resume-contact { display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; color:var(--text-secondary); }
.resume-section-title { font-family:var(--font-heading); color:var(--accent-light); border-bottom:2px solid var(--border-color); margin-bottom:1rem; }
.resume-item-header { display:flex; justify-content:space-between; flex-wrap:wrap; }
.resume-skills { display:flex; flex-wrap:wrap; gap:0.5rem; }
.resume-skills span { background:var(--bg-card); border:1px solid var(--border-glow); padding:0.3rem 0.9rem; border-radius:50px; color:var(--accent-light); }

@media print {
    body * { visibility:hidden; }
    .resume-modal, .resume-modal * { visibility:visible; }
    .resume-modal { position:absolute; left:0; top:0; width:100%; background:white !important; }
    .resume-modal-backdrop, .resume-modal-close, .resume-actions { display:none !important; }
    .resume-modal-content { box-shadow:none; transform:none; max-width:100%; padding:0; background:white; }
    .resume-document { background:white; color:black; }
    .resume-name { -webkit-text-fill-color:black; background:none; }
    .resume-section-title { color:black; }
}

@media (max-width:1024px) {
    .hero-container { grid-template-columns:1fr; text-align:center; }
    .hero-visual { order:-1; min-width:auto; }
    .hero-orb { width:250px; height:250px; }
    .about-content { grid-template-columns:1fr; }
}
@media (max-width:768px) {
    .nav-menu { display:none; }
    .nav-toggle { display:flex; }
    .skills-grid, .projects-grid { grid-template-columns:1fr; }
    .form-row { grid-template-columns:1fr; }
}
@media (hover:none) and (pointer:coarse) {
    body { cursor:auto; }
    .cursor, .cursor-follower { display:none; }
}