@media (max-width: 480px) {
    
    /* ========================================
       CONTAINER & LAYOUT
       ======================================== */
    
    /* Main container - use more screen width on mobile */
    .landing-container {
        max-width: 95%;      /* Was 85% on desktop - use more space on small screens */
        padding: 10px;       /* Smaller padding = more content space */
    }

    /* ========================================
       HEADER & NAVIGATION
       ======================================== */
    
    header {
        flex-direction: column;
        gap: 10px;
        padding: 15px 10px;
        margin-left: 0;
        margin-right: 0;
        position: sticky;    /* ← CHANGE TO STICKY */
        top: 20px;           /* Stick to the top when scrolling */
        background: var(--deep-blue);  /* Make sure it has background */
        z-index: 1000;       /* Keep it above other content */
    }

    .logo-section {
        width: 100%;             /* Full width */
        justify-content: center; /* Center the logo */
    }

    /* Remove absolute positioning */
    .logo-text {
        position: static;    /* Was 'absolute' - this was breaking everything! */
        font-size: 20px;     /* Was 28px - smaller for mobile */
        letter-spacing: 1px; /* Was 3px - less spacing on mobile */
    }

    /* Navigation links */
    nav {
        flex-direction: row;     /* Keep links horizontal */
        justify-content: center; /* Center them */
        flex-wrap: wrap;         /* Allow wrapping to second line if needed */
        gap: 10px;               /* Smaller gaps between links */
        width: 100%;
    }

    nav a {
        font-size: 11px;      /* Was 14px - smaller for mobile */
        padding: 6px 12px;    /* Was 8px 15px - tighter padding */
        letter-spacing: 1px;  /* Was 2px - less spacing */
    }

    /* ========================================
       HERO SECTION
       Side-by-side layout doesn't work on mobile
       ======================================== */
    
    .hero {
        margin: 40px 0;  /* Was 80px - less vertical space on mobile */
    }

    .hero-content {
        padding: 0;  /* Remove the 10% side padding - we need all the space */
    }

    /* The container holding text and image */
    .hero-top {
        flex-direction: column;  /* Stack text ABOVE image (not side-by-side) */
        gap: 30px;               /* Space between text and image */
        margin-bottom: 30px;     /* Was 3rem */
        align-items: center;     /* Center everything */
    }

    /* Text section */
    .hero-text {
        width: 100%;         /* Was 35vw - use full width on mobile */
        text-align: center;  /* Center the text */
    }

    /* Your photo */
    .personal-image {
        width: 70vw;          /* Was 30vw - bigger on mobile (70% of viewport width) */
        height: 70vw;         /* Keep it square */
        max-width: 300px;     /* But don't go bigger than 300px */
        max-height: 300px;
    }

    /* Main heading - "SOFTWARE ENGINEER" */
    .hero h1 {
        font-size: 32px;    /* Was 64px on desktop - 50% reduction for mobile */
        line-height: 1.3;   /* Slightly tighter line spacing */
    }

    /* Terminal text below the heading */
    .terminal-text {
        font-size: 14px;    /* Was 20px - smaller for mobile */
        margin-bottom: 30px; /* Was 40px */
    }

    /* Blinking cursor */
    .cursor {
        width: 8px;    /* Was 12px - smaller cursor for smaller text */
        height: 18px;  /* Was 24px */
    }

    /* ========================================
       BUTTONS
       Stack vertically for easier tapping
       ======================================== */
    
    .cta-buttons {
        flex-direction: column;  /* Stack buttons vertically instead of side-by-side */
        gap: 15px;               /* Space between buttons */
        align-items: stretch;    /* Make buttons same width */
    }

    .btn {
        padding: 15px 20px;  /* Was 15px 40px - less horizontal padding */
        font-size: 13px;     /* Was 16px - slightly smaller */
        width: 100%;         /* Full width buttons are easier to tap on mobile */
    }

    /* ========================================
       SECTIONS (Projects, Skills, Contact)
       ======================================== */
    
    .projects,
    .skills,
    .contact {
        margin: 50px 0;  /* Was 100px - half the vertical space */
    }

    /* Section titles like "PROJECTS//" */
    .section-title {
        font-size: 28px;      /* Was 48px - much smaller for mobile */
        letter-spacing: 2px;  /* Was 4px - less letter spacing */
        margin-bottom: 30px;  /* Was 50px */
    }

    /* The underline under section titles */
    .section-title::after {
        bottom: -5px;  /* Was -10px - bring it closer to text */
    }

    /* ========================================
       PROJECT CARDS
       Single column on mobile
       ======================================== */
    
    .project-grid {
        grid-template-columns: 1fr;  /* Was repeat(auto-fit, minmax(350px, 1fr)) */
                                      /* This forces single column - no horizontal scroll! */
        gap: 20px;                    /* Was 30px - tighter spacing */
        margin-top: 40px;             /* Was 60px */
    }

    .project-card {
        padding: 20px;  /* Was 30px - less padding inside cards */
    }

    .project-title {
        font-size: 20px;  /* Was 24px - smaller project titles */
    }

    .project-status {
        font-size: 10px;    /* Was 12px - smaller status badges */
        padding: 4px 8px;   /* Was 5px 10px - tighter padding */
    }

    .project-desc {
        font-size: 14px;  /* Smaller description text */
        margin: 15px 0;   /* Was 20px 0 */
    }

    /* Technology tags (JAVA, PYTHON, etc) */
    .tag {
        font-size: 10px;   /* Was 12px - smaller tags */
        padding: 4px 10px; /* Was 5px 12px */
    }

    /* ========================================
       SKILLS SECTION
       Single column on mobile
       ======================================== */
    
    .skills-grid {
        grid-template-columns: 1fr;  /* Was repeat(auto-fit, minmax(250px, 1fr)) */
                                      /* Single column on mobile */
        gap: 15px;                    /* Was 20px - tighter spacing */
        margin-top: 40px;             /* Was 60px */
    }

    .skill-category {
        padding: 20px;  /* Was 25px - less padding */
    }

    .skill-category h3 {
        font-size: 16px;  /* Was 18px - smaller headings */
    }

    .skill-list li {
        font-size: 14px;  /* Smaller skill names */
        padding: 6px 0;   /* Was 8px 0 - tighter spacing */
    }

    /* ========================================
       BIOGRAPHY BOX
       ======================================== */
    
    .bio-box {
        padding: 15px;     /* Was 20px - less padding */
        margin-top: 20px;  /* Was 30px */
    }

    .bio-box p {
        font-size: 14px;   /* Smaller text */
        line-height: 1.6;  /* Was 1.8 - tighter line spacing */
    }

    /* ========================================
       CONTACT SECTION
       ======================================== */
    
    .contact {
        padding: 30px 20px;  /* Was 60px - less padding all around */
        margin: 50px -10px;  /* Extend to edges of screen */
    }

    .contact h2 {
        font-size: 28px;      /* Was 42px - smaller heading */
        margin-bottom: 20px;  /* Was 30px */
    }

    .contact p {
        font-size: 14px !important;  /* Force smaller text */
    }

    /* Contact buttons (Email, LinkedIn, GitHub) */
    .contact-info {
        flex-direction: column;  /* Stack vertically */
        gap: 15px;               /* Space between buttons */
        margin-top: 30px;        /* Was 40px */
    }

    .contact-item {
        font-size: 16px;      /* Was 18px - slightly smaller */
        padding: 12px 20px;   /* Was 15px 30px */
        width: 100%;          /* Full-width buttons */
    }

    /* ========================================
       FOOTER
       ======================================== */
    
    footer {
        padding: 30px 0;    /* Was 40px - less padding */
        margin-top: 50px;   /* Was 100px - less space above */
        font-size: 12px;    /* Smaller footer text */
    }

    footer p {
        font-size: 12px;  /* Ensure all footer text is small */
    }

    /* ========================================
       BACKGROUND EFFECTS
       ======================================== */
    
    /* Grid background - make it smaller/subtler on mobile */
    .background {
        background-size: 30px 30px;  /* Was 50px 50px - finer grid */
    }

    /* Matrix rain canvas - reduce opacity for better mobile performance */
    #matrix-canvas {
        opacity: 0.1;  /* Was 0.15 - more subtle on mobile */
    }

    section {
        scroll-margin-top: 140px;  /* Taller header on mobile (stacked) */
    }
}