:root {
    --bg-dark: #00050a;
    --accent-blue: #00a2ff;
    --glow: 0 0 20px rgba(0, 162, 255, 0.8);
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { background-color: var(--bg-dark); color: white; font-family: 'Segoe UI', sans-serif; overflow-x: hidden; }

/* Star Background */
#star-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; background: radial-gradient(circle at center, #000b1a 0%, #000000 100%); }
.star { position: absolute; background: white; border-radius: 50%; box-shadow: 0 0 10px white; animation: moveStar linear infinite; opacity: 0.9; }
@keyframes moveStar { from { transform: translateY(110vh); } to { transform: translateY(-20vh); } }

/* Centered Navbar with Logo and GitHub */
.navbar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    padding: 1.5rem 5%; 
    position: fixed; 
    width: 100%; 
    z-index: 100;
    background: rgba(0, 5, 10, 0.7); 
    backdrop-filter: blur(10px);
}

.logo { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; font-weight: bold; color: white; }

.nav-links a { color: white; text-decoration: none; margin: 0 1.2rem; font-size: 0.75rem; letter-spacing: 2px; font-weight: bold; transition: 0.3s; }
.nav-links a:hover { color: var(--accent-blue); text-shadow: var(--glow); }

.github-top-link {
    display: flex; align-items: center; gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 15px; border-radius: 20px;
    text-decoration: none; color: white; border: 1px solid rgba(255, 255, 255, 0.2);
    transition: 0.3s; font-size: 0.8rem;
}
.github-top-link img { width: 18px; filter: invert(1); }
.github-top-link:hover { background: rgba(0, 162, 255, 0.2); border-color: var(--accent-blue); box-shadow: var(--glow); }

/* Section Layouts */
section { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 100px 10%; }
.hero { height: 100vh; justify-content: center; }
.main-title { font-family: 'Orbitron', sans-serif; font-size: clamp(3rem, 10vw, 6.5rem); color: var(--accent-blue); text-shadow: var(--glow); font-weight: 900; line-height: 0.9; }
.subtitle { color: var(--accent-blue); letter-spacing: 5px; margin-bottom: 20px; }
.description { max-width: 600px; color: #94a3b8; margin: 20px 0 40px; line-height: 1.6; }

/* Social Icons */
.social-links { display: flex; gap: 20px; }
.icon-circle { width: 60px; height: 60px; border: 1px solid rgba(0, 162, 255, 0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.icon-circle img { width: 25px; height: 25px; filter: invert(1); }
.icon-circle:hover { border-color: var(--accent-blue); box-shadow: var(--glow); transform: translateY(-5px); }

/* Grids and Cards */
.section-title { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 40px; text-transform: uppercase; color: white; }
.about-grid, .skills-grid, .projects-grid, .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; width: 100%; }

.glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 30px; text-align: left; transition: 0.4s; }
.glass-card:hover { border-color: var(--accent-blue); transform: translateY(-5px); background: rgba(0, 162, 255, 0.05); }
.card-icon { font-size: 1.8rem; margin-bottom: 15px; }
.glass-card h3 { color: var(--accent-blue); font-family: 'Orbitron', sans-serif; margin-bottom: 12px; font-size: 1.1rem; }
.glass-card p { color: #94a3b8; line-height: 1.6; font-size: 0.9rem; }

/* Availability and Footer */
.availability-container { width: 100%; max-width: 900px; margin-top: 50px; text-align: center !important; }
.availability-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; }
.avail-item { background: rgba(255, 255, 255, 0.05); padding: 12px; border-radius: 10px; border: 1px solid rgba(0, 162, 255, 0.2); text-align: left; color: #cbd5e1; font-size: 0.85rem; }
.footer { margin-top: 60px; color: #64748b; font-size: 0.85rem; }