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

:root {
    --primary-color: #3b82f6;
    --secondary-color: #8b5cf6;
    --accent-color: #10b981;
    --dark-bg: #0a0e27;
    --light-bg: #1a1f3a;
    --card-bg: #151a35;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --accent: #06b6d4;
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

body {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(to bottom, #0a0e27 0%, #1a1f3a 50%, #0a0e27 100%);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 10% 20%, rgba(102, 126, 234, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 90% 80%, rgba(245, 87, 108, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(10, 14, 39, 0.8);
    backdrop-filter: blur(20px);
    z-index: 1000;
    padding: 1rem 0;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
}

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

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent);
}

.hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.hamburger span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    transition: 0.3s;
}

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

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 30% 40%, rgba(102, 126, 234, 0.2) 0%, transparent 40%),
        radial-gradient(circle at 70% 60%, rgba(245, 87, 108, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 50% 80%, rgba(6, 182, 212, 0.15) 0%, transparent 40%);
    animation: gradientShift 15s ease infinite;
    pointer-events: none;
}

@keyframes gradientShift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(5%, 5%) rotate(120deg); }
    66% { transform: translate(-5%, 5%) rotate(240deg); }
}

.hero::after {
    content: '{ } < /> const function => import export class extends async await npm git push commit merge branch deploy build test debug console.log() return true; if else while for map filter reduce useState useEffect React Vue Node.js MongoDB PostgreSQL API REST GraphQL Docker Kubernetes AWS Azure Python Java JavaScript TypeScript HTML CSS SASS Webpack Babel ESLint Prettier Agile Scrum CI/CD DevOps Linux Terminal Shell Bash Git GitHub GitLab Bitbucket VS Code IntelliJ Eclipse NetBeans Android iOS Flutter React Native Swift Kotlin Java Spring Boot Django Flask Laravel Express.js Next.js Nuxt.js Gatsby Svelte Angular Vue.js jQuery Bootstrap Tailwind Material-UI Ant Design Chakra UI Redux MobX Zustand Context API Hooks Components Props State Lifecycle Methods Virtual DOM JSX TSX Webpack Vite Rollup Parcel npm yarn pnpm package.json node_modules dependencies devDependencies scripts build dev start test lint format deploy production development staging localhost 127.0.0.1 port 3000 8080 5000 HTTP HTTPS GET POST PUT DELETE PATCH REST API GraphQL WebSocket Socket.io Real-time Database NoSQL SQL MySQL PostgreSQL MongoDB Redis Elasticsearch Firebase Supabase Prisma Sequelize TypeORM Mongoose Knex.js SQL Alchemy Django ORM Active Record';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.8;
    color: var(--primary-color);
    opacity: 0.03;
    word-wrap: break-word;
    overflow: hidden;
    padding: 2rem;
    pointer-events: none;
    z-index: 0;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    text-align: left;
    animation: fadeInUp 1s ease;
}

.hero-image {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeInRight 1s ease;
}

.hero-image {
    position: relative;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
    opacity: 0.2;
    animation: pulse 3s ease-in-out infinite;
    z-index: 0;
}

.hero-image img {
    width: 350px;
    height: 350px;
    border-radius: 50%;
    object-fit: cover;
    border: 6px solid transparent;
    background: linear-gradient(var(--dark-bg), var(--dark-bg)) padding-box,
                linear-gradient(135deg, var(--primary-color), var(--accent)) border-box;
    box-shadow: 
        0 20px 60px rgba(99, 102, 241, 0.5),
        0 0 100px rgba(34, 211, 238, 0.3),
        inset 0 0 20px rgba(99, 102, 241, 0.1);
    transition: all 0.4s ease;
    position: relative;
    z-index: 1;
}

.hero-image img:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 
        0 25px 80px rgba(99, 102, 241, 0.6),
        0 0 120px rgba(34, 211, 238, 0.4),
        inset 0 0 30px rgba(99, 102, 241, 0.2);
}

@keyframes pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0.3;
    }
}

.hero-title {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.highlight {
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 2rem;
    color: #cbd5e1;
    margin-bottom: 1.5rem;
    font-weight: 500;
}

.hero-description {
    font-size: 1.2rem;
    color: #e2e8f0;
    max-width: 600px;
    margin: 0 auto 2rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-start;
    margin-bottom: 2rem;
}

.btn {
    padding: 0.8rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.btn-secondary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

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

.social-links {
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
}

.social-links a {
    color: var(--text-secondary);
    font-size: 1.5rem;
    transition: all 0.3s;
}

.social-links a:hover {
    color: var(--accent);
    transform: translateY(-3px);
}

/* Section Styles */
section {
    padding: 5rem 0;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-color), var(--accent));
    border-radius: 2px;
}

/* About Section */
.about {
    background: transparent;
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 31, 58, 0.5) 50%, transparent 100%);
    pointer-events: none;
}

.about-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    align-items: center;
}

.about-text p {
    margin-bottom: 1rem;
    color: #e2e8f0;
    font-size: 1.1rem;
    line-height: 1.8;
}

.about-stats {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 1.5rem;
    border-radius: 16px;
    text-align: center;
    border: 2px solid rgba(102, 126, 234, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: rgba(102, 126, 234, 0.6);
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}

.stat-card h3 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    font-weight: 700;
    filter: drop-shadow(0 0 10px rgba(102, 126, 234, 0.4));
}

.stat-card p {
    color: #e2e8f0;
    font-weight: 500;
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.skill-category {
    background: linear-gradient(135deg, rgba(21, 26, 53, 0.8) 0%, rgba(26, 31, 58, 0.8) 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.skill-category:hover {
    transform: translateY(-8px);
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}

.skill-category h3 {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

.skill-category i {
    margin-right: 0.5rem;
    color: #06b6d4;
    filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.5));
}

.skill-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.skill-tag {
    background: rgba(10, 14, 39, 0.6);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(102, 126, 234, 0.4);
    color: #e2e8f0;
    font-weight: 500;
}

/* Projects Section */
.projects {
    background: transparent;
    position: relative;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 31, 58, 0.3) 50%, transparent 100%);
    pointer-events: none;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.project-card {
    background: linear-gradient(135deg, rgba(21, 26, 53, 0.9) 0%, rgba(26, 31, 58, 0.9) 100%);
    padding: 2rem;
    border-radius: 16px;
    transition: all 0.4s ease;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 50%, #06b6d4 100%);
    transform: scaleX(0);
    transition: transform 0.4s ease;
}

.project-card:hover::before {
    transform: scaleX(1);
}

.project-card:hover {
    transform: translateY(-10px);
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}

.project-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.project-icon i {
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 15px rgba(102, 126, 234, 0.8));
}

.project-card h3 {
    margin-bottom: 1rem;
    color: #f8fafc;
    font-weight: 600;
    font-size: 1.3rem;
}

.project-card p {
    color: #e2e8f0;
    margin-bottom: 1.5rem;
    min-height: 60px;
    line-height: 1.7;
}

.project-tech {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.project-tech span {
    background: var(--light-bg);
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.85rem;
    color: var(--accent);
}

.project-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s;
}

.project-link:hover {
    color: var(--accent);
}

.project-link i {
    margin-left: 0.5rem;
}

.view-more {
    text-align: center;
}

/* Experience Section */
.timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--primary-color);
}

.timeline-item {
    position: relative;
    padding-left: 60px;
    margin-bottom: 3rem;
}

.timeline-dot {
    position: absolute;
    left: 11px;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    border: 4px solid var(--dark-bg);
}

.timeline-content {
    background: linear-gradient(135deg, rgba(21, 26, 53, 0.8) 0%, rgba(26, 31, 58, 0.8) 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    border-color: rgba(102, 126, 234, 0.5);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
    transform: translateX(5px);
}

.timeline-content h3 {
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.timeline-content h4 {
    color: #f8fafc;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.timeline-date {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.timeline-date i {
    margin-right: 0.5rem;
}

.timeline-content p {
    color: #e2e8f0;
    line-height: 1.7;
}

/* Contact Section */
.contact {
    background: transparent;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(26, 31, 58, 0.4) 50%, transparent 100%);
    pointer-events: none;
}

.contact-description {
    text-align: center;
    color: #e2e8f0;
    font-size: 1.2rem;
    margin-bottom: 3rem;
    line-height: 1.7;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.contact-card {
    background: linear-gradient(135deg, rgba(21, 26, 53, 0.9) 0%, rgba(26, 31, 58, 0.9) 100%);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    border: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(102, 126, 234, 0.6);
    box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
}

.contact-card i {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.6));
}

.contact-card h3 {
    margin-bottom: 1rem;
    color: #f8fafc;
    font-weight: 600;
}

.contact-card a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-card a:hover {
    color: var(--accent);
}

/* Footer */
.footer {
    background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 39, 0.8) 100%);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-secondary);
    border-top: 1px solid rgba(102, 126, 234, 0.2);
    backdrop-filter: blur(10px);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background: var(--light-bg);
        width: 100%;
        text-align: center;
        transition: 0.3s;
        padding: 2rem 0;
    }

    .nav-links.active {
        left: 0;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.5rem;
    }

    .hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-content {
        text-align: center;
    }

    .hero-image {
        order: -1;
        margin-bottom: 2rem;
    }

    .hero-image img {
        width: 250px;
        height: 250px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .about-content {
        grid-template-columns: 1fr;
    }

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .stat-card h3 {
        font-size: 2rem;
    }
}