* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --neon-blue: #00f2ff;
    --neon-pink: #ff007f;
    --neon-purple: #b300ff;
    --neon-green: #00ff9d;
    --neon-yellow: #ffd700;
    --bg-dark: #02050a;
    --bg-light: #f0f0f0;
    --text-dark: #fff;
    --text-light: #02050a;
}

body {
    background-color: var(--bg-dark);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
}

/* Light Mode */
body.light-mode {
    background-color: var(--bg-light);
    color: var(--text-light);
}
body.light-mode .about-card,
body.light-mode .contact-info,
body.light-mode .social-feed,
body.light-mode .gallery-card {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}
body.light-mode .section-title {
    -webkit-text-stroke: 2px #00f2ff;
    color: transparent;
}
body.light-mode .static-navbar {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: var(--neon-pink);
}
body.light-mode .static-logo .logo-text {
    background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.light-mode .theme-toggle,
body.light-mode .hamburger-menu {
    background: rgba(0, 0, 0, 0.1);
}
body.light-mode #header {
    background: rgba(255, 255, 255, 0.98);
    border-left-color: var(--neon-pink);
}
body.light-mode .navmenu a { color: #333; }
body.light-mode .navmenu a:hover { background: rgba(0, 242, 255, 0.2); }
body.light-mode .form-control {
    background: rgba(0, 0, 0, 0.05);
    border-color: var(--neon-blue);
    color: #333;
}

/* STATIC NAVBAR */
.static-navbar {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 10001; background: rgba(2, 5, 10, 0.95);
    backdrop-filter: blur(10px); padding: 12px 25px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid rgba(0, 242, 255, 0.3);
}
.static-logo { display: flex; align-items: center; gap: 12px; }
.static-logo img {
    width: 45px; height: 45px; border-radius: 50%;
    border: 2px solid var(--neon-blue); transition: all 0.3s;
}
.static-logo img:hover { border-color: var(--neon-pink); transform: scale(1.05); }
.static-logo .logo-text {
    font-family: 'Orbitron', sans-serif; font-size: 22px; font-weight: 900;
    background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
    -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: 2px;
}
.nav-controls { display: flex; align-items: center; gap: 15px; }

/* THEME TOGGLE & HAMBURGER */
.theme-toggle, .hamburger-menu {
    width: 50px; height: 50px; background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--neon-pink); border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s; font-size: 24px;
}
.hamburger-menu { flex-direction: column; gap: 6px; }
.theme-toggle:hover, .hamburger-menu:hover {
    border-color: var(--neon-blue); box-shadow: 0 0 20px rgba(0, 242, 255, 0.5); transform: scale(1.05);
}
.hamburger-menu span {
    width: 28px; height: 3px; background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
    border-radius: 4px; transition: all 0.3s;
}
.hamburger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.hamburger-menu.active span:nth-child(2) { opacity: 0; }
.hamburger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* SIDEBAR */
#header {
    position: fixed; top: 0; right: -320px; width: 300px; height: 100%;
    background: rgba(2, 5, 10, 0.98); backdrop-filter: blur(10px);
    border-left: 3px solid var(--neon-pink); padding: 80px 20px 30px 20px;
    z-index: 9999; transition: right 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); overflow-y: auto;
}
#header.show { right: 0; }
.overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7); z-index: 9998; display: none;
}
.overlay.show { display: block; }

.profile-img {
    width: 140px; height: 140px; margin: 0 auto 15px;
    border-radius: 50%; overflow: hidden; border: 3px solid var(--neon-blue);
}
.profile-img img { width: 100%; height: 100%; object-fit: cover; }
.sitename {
    font-family: 'Orbitron', sans-serif; font-size: 24px; font-weight: 900; text-align: center;
    background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink));
    -webkit-background-clip: text; background-clip: text; color: transparent; margin: 10px 0;
}
.navmenu a {
    display: flex; align-items: center; padding: 12px 15px; color: #fff;
    text-decoration: none; font-family: 'Share Tech Mono', monospace; transition: all 0.3s;
    background: rgba(0, 242, 255, 0.05); margin-bottom: 8px; border-radius: 10px;
}
.navmenu a:hover { color: var(--neon-blue); background: rgba(0, 242, 255, 0.15); transform: translateX(5px); }
.navmenu a i { font-size: 22px; margin-right: 15px; color: var(--neon-blue); }
.sidebar-social a { color: #fff; font-size: 22px; margin: 0 8px; transition: all 0.3s; }
.sidebar-social a:hover { color: var(--neon-blue); transform: translateY(-3px); }

/* HERO SECTION */
.hero {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center;
    padding-top: 80px; background: linear-gradient(135deg, rgba(0,242,255,0.1) 0%, rgba(255,0,127,0.1) 100%);
}
.hero h1 { font-family: 'Orbitron', sans-serif; font-size: 90px; font-weight: 900; text-shadow: 0 0 30px rgba(0,242,255,0.5); }
.hero h1 span { background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-typing { font-family: 'Share Tech Mono', monospace; font-size: 36px; color: var(--neon-blue); border-right: 3px solid var(--neon-blue); padding-right: 10px; display: inline-block; }

/* SECTIONS & CARDS */
section { padding: 80px 0; }
.section-title { font-family: 'Orbitron', sans-serif; font-size: 48px; font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--neon-blue); margin-bottom: 50px; }
.about-card, .contact-info, .social-feed, .gallery-card { background: rgba(0, 242, 255, 0.05); border: 1px solid rgba(0, 242, 255, 0.2); backdrop-filter: blur(10px); padding: 30px; border-radius: 15px; }

/* SKILLS CATEGORIES */
.skill-category { background: rgba(0, 242, 255, 0.05); border: 1px solid rgba(0, 242, 255, 0.2); border-radius: 20px; padding: 25px; margin-bottom: 20px; transition: all 0.3s ease; position: relative; overflow: hidden; }
.skill-category:hover { transform: translateY(-5px); border-color: var(--neon-pink); box-shadow: 0 10px 30px rgba(0, 242, 255, 0.2); }
.category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 25px; padding-bottom: 15px; border-bottom: 2px solid rgba(0, 242, 255, 0.3); }
.category-icon { width: 45px; height: 45px; background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.category-icon i { font-size: 24px; color: #fff; }
.skill-category h3 { margin: 0; font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.skill-info { display: flex; justify-content: space-between; margin-bottom: 8px; }
.skill-name { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.skill-percent { font-family: 'Share Tech Mono', monospace; color: var(--neon-blue); font-weight: bold; }
.progress { height: 10px; background: rgba(0, 242, 255, 0.1); border-radius: 10px; overflow: hidden; margin-bottom: 20px; }
.progress-bar { background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink)); transition: width 1.5s ease-in-out; text-align: right; padding-right: 5px; font-size: 10px; }
.progress-bar.soft-progress { background: linear-gradient(90deg, #00ff9d, #00cc7a); }

/* LANGUAGES */
.language-item { padding: 15px 20px; background: rgba(0, 242, 255, 0.05); border-radius: 12px; margin-bottom: 10px; transition: all 0.3s; border-left: 3px solid var(--neon-blue); }
.language-item:hover { background: rgba(0, 242, 255, 0.15); transform: translateX(5px); border-left-color: var(--neon-pink); }
.stars { color: #ffd700; font-size: 16px; letter-spacing: 3px; }

/* GALLERY */
.gallery-card { padding: 25px; border-radius: 20px; }
.gallery-item { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; border: 2px solid rgba(0, 242, 255, 0.2); transition: all 0.4s ease; aspect-ratio: 4/3; }
.gallery-item:hover { border-color: var(--neon-pink); transform: translateY(-8px) scale(1.02); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.95), transparent); padding: 40px 25px 25px; transform: translateY(100%); transition: transform 0.5s ease; }
.gallery-item:hover .gallery-overlay { transform: translateY(0); }

/* MAP & CONTACT */
.google-map-wrapper { border-radius: 16px; overflow: hidden; border: 2px solid var(--neon-blue); transition: all 0.4s ease; }
.google-map-wrapper iframe { width: 100%; height: 450px; border: 0; filter: grayscale(0.2); }
.location-info { font-size: 18px; color: var(--neon-blue); padding: 15px; background: rgba(0, 242, 255, 0.05); border-radius: 12px; }
.form-control { background: rgba(0,0,0,0.3); border: 2px solid var(--neon-blue); color: #fff; padding: 12px; border-radius: 10px; }

/* FOOTER & BUTTONS */
#footer { background: rgba(1,3,6,0.95); padding: 30px 0; text-align: center; border-top: 2px solid var(--neon-pink); }
.footer-social a { color: #fff; font-size: 24px; margin: 0 12px; transition: all 0.3s; display: inline-block; }
.footer-social a:hover { color: var(--neon-blue); transform: translateY(-5px); }
.matrix-rain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; opacity: 0.08; }
#backToTop { position: fixed; bottom: 30px; right: 30px; width: 55px; height: 55px; background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink)); color: #fff; border: none; border-radius: 50%; font-size: 28px; cursor: pointer; z-index: 999; opacity: 0; visibility: hidden; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
#backToTop.show { opacity: 1; visibility: visible; }

/* LOADER */
#sourov-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #02050a; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 99999; transition: opacity 0.8s; }
#sourov-loader.fade-out { opacity: 0; visibility: hidden; }
.circular-loader { width: 180px; height: 180px; border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 30px; background: radial-gradient(closest-side, #02050a 85%, transparent 0), conic-gradient(#00f2ff 0%, #111 0%); }
.loader-percent { font-family: 'Orbitron', sans-serif; font-size: 36px; font-weight: bold; color: #00f2ff; background: #02050a; width: 130px; height: 130px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.loader-text { font-family: 'Share Tech Mono', monospace; letter-spacing: 5px; font-size: 14px; }
.btn-cv { background: linear-gradient(45deg, #ff69b4, #ff007f); border: none; font-weight: bold; margin-left: 10px; }

/* NOTIFICATIONS */
.firebase-notification { position: fixed; top: 20px; right: 20px; padding: 15px 20px; border-radius: 8px; z-index: 99999; font-weight: bold; }
.firebase-notification.success { background: linear-gradient(135deg, #00ff9d, #00cc7a); color: #000; }
.firebase-notification.error { background: linear-gradient(135deg, #ff007f, #cc0066); color: #fff; }
.firebase-notification.loading { background: linear-gradient(135deg, #00f2ff, #0099cc); color: #fff; }

@media (max-width: 768px) {
    .hero h1 { font-size: 50px; }
    .section-title { font-size: 32px; }
    .btn-cv { margin-left: 0; margin-top: 10px; display: block; width: 100%; }
}