/* Global Styles & Variables */
:root {
    /* Colors */
    --bg-dark: #0a0a0a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --border-card: rgba(255, 255, 255, 0.08);
    --text-main: #ffffff;
    --text-muted: #a1a1aa;
    --accent: #ff6b00; /* Orange accent */
    --accent-glow: rgba(255, 107, 0, 0.3);
    
    /* Gradients */
    --gradient-1: radial-gradient(circle at 10% 20%, rgba(255, 107, 0, 0.15) 0%, transparent 40%);
    --gradient-2: radial-gradient(circle at 90% 80%, rgba(0, 123, 255, 0.1) 0%, transparent 40%);

    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Transitions */
    --transition-fast: 0.2s ease;
}

[data-theme="light"] {
    --bg-dark: #f0f2f5;
    --bg-card: rgba(255, 255, 255, 0.6);
    --border-card: rgba(0, 0, 0, 0.1);
    --text-main: #1a1a1a;
    --text-muted: #555555;
    --accent-glow: rgba(255, 107, 0, 0.15);
}

[data-theme="light"] .glass-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.1);
}

[data-theme="light"] .logo, 
[data-theme="light"] .logo span {
    color: #1a1a1a;
}

[data-theme="light"] .nav-links a:hover {
    color: var(--accent);
    background: rgba(0,0,0,0.05);
}

[data-theme="light"] .hero-greeting {
    background: rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.2);
}

[data-theme="light"] .project-image {
   border-color: rgba(0,0,0,0.1); 
}

[data-theme="light"] .skill-icon {
    background: white;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

[data-theme="light"] .contact-item {
    background: white;
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

[data-theme="light"] .contact-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* Logo Color Fixes for Light Mode */
[data-theme="light"] .text-express,
[data-theme="light"] .text-github,
[data-theme="light"] .text-vercel,
[data-theme="light"] .text-railway {
    color: #1a1a1a;
}

/* Theme Toggle Button */
#theme-toggle {
    position: fixed;
    top: 2rem;
    right: 5%; /* Aligns vaguely with navbar right edge on desktop */
    z-index: 1001; /* Above navbar */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    backdrop-filter: blur(12px);
    color: var(--accent);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

#theme-toggle:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 0 20px var(--accent-glow);
    background: var(--accent); /* Optional: fill with color on hover? Or stick to subtle */
    color: white;
}

[data-theme="light"] #theme-toggle {
    background: white;
    color: var(--accent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
}

/* Background Effects */
body::before, body::after {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(100px);
    z-index: -1;
    opacity: 0.5;
    pointer-events: none;
}

body::before {
    background: var(--accent-glow);
    top: -100px;
    left: -100px;
}

body::after {
    background: rgba(0, 100, 255, 0.1);
    bottom: -100px;
    right: -100px;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-fast);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
    font-weight: 700;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--accent);
    margin-top: 10px;
    border-radius: 2px;
}

/* Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.grid {
    display: grid;
    gap: 2rem;
}

.flex {
    display: flex;
    gap: 1rem;
}

.glass-card {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-card);
    border-radius: 16px;
    padding: 2rem;
    transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: var(--transition-fast);
    border: none;
    gap: 0.5rem;
}

.btn-primary {
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: #e66000;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Light Mode Button Fixes */
[data-theme="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

/* Navbar */
.navbar {
    position: fixed;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 900px; /* Limit width creates the floating effect */
    z-index: 1000;
    background: rgba(15, 15, 15, 0.85); /* Darker, more opaque for the pill */
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px; /* Pill shape */
    padding: 0.8rem 2rem;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo span {
    color: white; /* Logo text is usually all white in these modern dark designs, or keep orange if preferred. Let's stick to clean. */
}

/* Specific styling to match the reference image's centered pill config if needed, 
   but standard floating nav usually separates logo and links. 
   Let's keep logo left, links right for standard usability unless "centered logo" is strictly requested. */

.nav-links {
    display: flex;
    gap: 0.5rem; /* Tighter gap for pill buttons */
    background: transparent;
}

.nav-links a {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 100px; /* Pill links */
    transition: all var(--transition-fast);
}

.nav-links a:hover {
    color: white;
    background: rgba(255,255,255,0.05);
}

.nav-links a.active {
    background: var(--accent);
    color: white;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 140px;
    position: relative;
    overflow: hidden;
}

.hero-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    z-index: 1;
}

.hero-content {
    max-width: 650px;
}

.hero-greeting {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: rgba(255, 107, 0, 0.15);
    color: var(--accent);
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 107, 0, 0.2);
}

.hero h1 {
    font-size: 4rem;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.hero h1 span {
    color: var(--accent);
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    max-width: 500px;
}

.hero-btns {
    display: flex;
    gap: 1rem;
}

.hero-visual {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
    z-index: 0;
    /* Placeholder for potential 3D element or Abstract shapes */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-image-container {
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    margin-top: 4.0rem; /* Perfectly level with the first line of H1 */
}

.hero-profile-img {
    width: 250px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--accent);
    box-shadow: 0 0 30px var(--accent-glow);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hero-profile-img:hover {
    transform: scale(1.05);
    box-shadow: 0 0 40px var(--accent);
}

.circle-glow {
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,107,0,0.1) 0%, transparent 70%);
    filter: blur(40px);
    position: absolute;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 120%;
        left: 0;
        width: 100%;
        background: rgba(15, 15, 15, 0.95);
        backdrop-filter: blur(20px);
        padding: 1.5rem;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        gap: 1rem;
        box-shadow: 0 10px 40px -10px rgba(0,0,0,0.5);
    }

    .nav-links.mobile-active {
        display: flex;
        animation: fadeIn 0.3s ease;
    }
    
    .mobile-menu-btn {
        display: block;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .hero h1 {
        font-size: 2.8rem;
    }
    
    .hero-visual {
        display: none;
    }
    
    .hero-flex {
        flex-direction: column-reverse; /* Text first, image below, or image first? Usually image above text on mobile or below. Let's do image above text for mobile. */
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }

    .hero-content {
        text-align: center;
        margin: 0 auto;
    }

    .hero-profile-img {
        width: 200px;
        height: 200px;
    }
    
    .hero-btns {
        justify-content: center;
    }
}

/* Projects Section */
.project-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-image {
    width: 100%;
    height: 200px;
    background: #2a2a2a;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255,255,255,0.1);
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-card:hover .project-image img {
    transform: scale(1.05);
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tech-badge {
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: var(--text-muted);
}

.project-features {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.project-desc {
    color: white; /* Default (Dark Mode) */
}

[data-theme="light"] .project-desc {
    color: var(--text-muted); /* Dark in Light Mode */
    /* or color: #1a1a1a; if you want it darker */
}

.project-features li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.project-features li::before {
    content: '▹';
    position: absolute;
    left: 0;
    color: var(--accent);
}

.project-links {
    margin-top: auto;
    display: flex;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.source-code-link {
    color: white; /* Default (Dark Mode) */
    transition: color var(--transition-fast);
}

[data-theme="light"] .source-code-link {
    color: var(--text-muted); /* Or var(--text-main) depending on preference */
}

[data-theme="light"] .source-code-link:hover {
    color: var(--accent);
}

/* Education Section */
.timeline-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 2rem;
    border-left: 2px solid rgba(255, 107, 0, 0.2);
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent-glow);
}

/* Skills Section (New Grid Design) */
.skills-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    max-width: 900px;
    margin: 0 auto;
}

.skills-category {
    text-align: center;
}

.skills-category h3 {
    color: var(--text-main);
    font-size: 1.5rem;
    margin-bottom: 2rem;
    display: inline-block;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
}

.skills-grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    transition: transform var(--transition-fast);
}

.skill-card:hover {
    transform: translateY(-5px);
}

.skill-icon {
    width: 80px;
    height: 80px;
    background: rgba(20, 20, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.skill-card:hover .skill-icon {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.tech-icon {
    font-size: 3rem; /* equivalent to ~48px */
    transition: all var(--transition-fast);
}

/* Icon Brand Colors */
.text-html { color: #e34c26; }
.text-css { color: #264de4; }
.text-js { color: #f0db4f; }
.text-react { color: #61dafb; }
.text-bootstrap { color: #7952b3; }
.text-node { color: #339933; }
.text-mongo { color: #47A248; }
.text-express { color: #ffffff; }
.text-git { color: #f05032; }
.text-github { color: #ffffff; }
.text-npm { color: #cc3534; }
.text-terminal { color: #808080; }
.text-vscode { color: #007acc; }
.text-tailwind { color: #38bdf8; }
.text-redux { color: #764abc; }
.text-postman { color: #FF6C37; }
.text-vercel { color: #cfcfcf; } /* Slightly off-white to be visible on dark bg but distinct */
.text-railway { color: #ffffff; }
.text-jwt { color: #D63AFF; }

.skill-name {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 500;
}

.skill-card:hover .skill-name {
    color: white;
}

/* Contact Section */
.contact-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: var(--transition-fast);
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--accent);
}

footer {
    padding: 2rem 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    margin-top: 4rem;
}