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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
            color: #e0e0e0;
            line-height: 1.6;
            overflow-x: hidden;
        }

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

        /* Header */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf, #ff006e);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
            animation: gradient 3s ease-in-out infinite alternate;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem ;
            height: 5rem;            
        }

        header nav.container {
            max-width: 100%;
            margin: 0;
            padding-left: 1rem;
            padding-right: 1rem;
        }

        /* mobile menu toggle (hidden on desktop) */
        .menu-toggle {
            display: none;
            background: transparent;
            border: none;
            cursor: pointer;
            width: 40px;
            height: 36px;
            align-items: center;
            justify-content: center;
        }

        .menu-toggle .bar {
            display: block;
            width: 22px;
            height: 2px;
            background: #e0e0e0;
            margin: 4px 0;
            transition: transform 0.25s ease, opacity 0.25s ease;
        }

        /* when nav is open, show vertical dropdown */
        header.nav-open .nav-links {
            display: flex !important;
            flex-direction: column;
            position: absolute;
            top: 100%;
            right: 1rem;
            background: rgba(10,10,10,0.95);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            gap: 0.75rem;
            box-shadow: 0 10px 30px rgba(0,0,0,0.6);
            width: auto;
            z-index: 1001;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(45deg, #ffffff, #7b2cbf);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

        .nav-links a {
            font-size: 15px;
            text-decoration: none;
            color: #e0e0e0;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-links a:hover {
            color: #00d4ff;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf);
            transition: width 0.3s ease;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Hero Section */
        .hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        /* Particles Container */
        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        .hero-content h1 {
            font-size: 4rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf, #ff006e);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradient 3s ease-in-out infinite alternate;
        }

        @keyframes gradient {
            0% { filter: hue-rotate(0deg); }
            100% { filter: hue-rotate(90deg); }
        }

        .hero-content p {
            font-size: 1.4rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
        }

        /* About Section */
        .about {
            padding: 100px 0;
            background: rgba(255, 255, 255, 0.02);
        }

        .section-title {
            text-align: center;
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 3rem;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

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

        .about-text {
            font-size: 1.1rem;
            opacity: 0.9;
            line-height: 1.8;
        }

        .about-image {
            text-align: center;
        }

        .profile-pic {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-image: url("prof.jpg");
            background-size: cover;
            background-position: center calc(50% - 20px);
            background-repeat: no-repeat;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8rem;
            color: white;
            margin: 0 auto;
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
        }

        /* Skills Section */
        .skills {
            padding: 100px 0;
        }

        .skills-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .skill-category {
            background: rgba(255, 255, 255, 0.05);
            padding: 2rem;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .skill-category:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
            border-color: rgba(0, 212, 255, 0.3);
        }

        .skill-category h3 {
            font-size: 1.5rem;
            margin-bottom: 1.5rem;
            color: #00d4ff;
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .skill-category i {
            font-size: 2rem;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .skill-list {
            list-style: none;
        }

        .skill-list li {
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
        }

        .skill-list li:hover {
            transform: translateX(10px);
            color: #00d4ff;
        }

        .skill-list li i {
            font-size: 1.2rem;
            width: 20px;
            text-align: center;
        }

        /* Projects Section */
        .projects {
            padding: 100px 0;
            background: rgba(255, 255, 255, 0.02);
        }

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

        .project-card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .project-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }

        .project-image {
            height: 200px;
            background: linear-gradient(45deg, #00d4ff, #7b2cbf);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
        }

        .project-content {
            padding: 2rem;
        }

        .project-content h4 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: #00d4ff;
        }

        .project-content p {
            opacity: 0.8;
            margin-bottom: 1rem;
        }

        .project-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        .tag {
            background: rgba(0, 212, 255, 0.2);
            color: #00d4ff;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            font-size: 0.8rem;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        /* Content Creation Section */
        .content-creation {
            padding: 100px 0;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2.5rem;
            margin-top: 3rem;
        }

        .content-card {
            position: relative;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            border-radius: 25px;
            overflow: hidden;
            border: 2px solid rgba(255, 255, 255, 0.1);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 2rem;
            cursor: pointer;
        }

        .content-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, 
                rgba(0, 212, 255, 0.1) 0%, 
                rgba(123, 44, 191, 0.1) 50%, 
                rgba(255, 0, 110, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
            border-radius: 25px;
        }

        .content-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.3) 0%, transparent 70%);
            opacity: 0;
            transition: all 0.6s ease;
            z-index: 0;
        }

        .content-card:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 212, 255, 0.3),
                        0 10px 25px rgba(123, 44, 191, 0.2),
                        0 0 50px rgba(0, 212, 255, 0.1);
            border-color: rgba(0, 212, 255, 0.5);
        }

        .content-card:hover::before {
            opacity: 1;
        }

        .content-card:hover::after {
            opacity: 1;
            animation: rotate 3s linear infinite;
        }

        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .content-card:nth-child(1):hover {
            border-color: rgba(0, 212, 255, 0.6);
            box-shadow: 0 25px 50px rgba(0, 212, 255, 0.4),
                        0 0 80px rgba(0, 212, 255, 0.2);
        }

        .content-card:nth-child(2):hover {
            border-color: rgba(123, 44, 191, 0.6);
            box-shadow: 0 25px 50px rgba(123, 44, 191, 0.4),
                        0 0 80px rgba(123, 44, 191, 0.2);
        }

        .content-card:nth-child(3):hover {
            border-color: rgba(255, 0, 110, 0.6);
            box-shadow: 0 25px 50px rgba(255, 0, 110, 0.4),
                        0 0 80px rgba(255, 0, 110, 0.2);
        }

        /* Reels overlapping stack */
        .reel-stack {
            display: flex;
            justify-content: center;
            align-items: flex-end;
            gap: 0;
            margin: 0 auto 1rem auto;
            padding: 0 1rem;
            /* prevent the stack from stretching too wide */
            max-width: 980px;
        }

        .reel-stack .instagram-embed-container {
            position: relative;
            flex: 0 0 280px; /* fixed width for each reel preview */
            max-width: 280px;
            margin-left: -80px; /* overlap amount */
            transition: transform 220ms ease, box-shadow 220ms ease, z-index 220ms ease;
            border-radius: 12px;
            box-shadow: 0 14px 34px rgba(0,0,0,0.5);
            padding-top: 56.25%; /* maintain aspect ratio */
        }

        .reel-stack .instagram-embed-container:first-child {
            margin-left: 0; /* no negative margin for the first item */
        }

        /* stacking order and subtle vertical offset for a layered look */
        .reel-stack .instagram-embed-container:nth-child(1) { z-index: 1; transform: translateY(10px) scale(0.96); }
        .reel-stack .instagram-embed-container:nth-child(2) { z-index: 3; transform: translateY(0) scale(1); }
        .reel-stack .instagram-embed-container:nth-child(3) { z-index: 2; transform: translateY(6px) scale(0.98); }

        /* hover: bring the hovered reel forward */
        .reel-stack .instagram-embed-container:hover {
            transform: translateY(-6px) scale(1.02);
            z-index: 5 !important;
            box-shadow: 0 28px 60px rgba(0,0,0,0.65);
        }
                /* Contact section polish */
        #contact.contact {
          padding: 80px 0;
          background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(0,0,0,0));
          border-top: 1px solid rgba(255,255,255,0.03);
          backdrop-filter: blur(2px);
        }
        
        #contact .section-title {
          margin-bottom: 1.25rem;
          font-size: 2.4rem;
        }
        
        #contact .contact-content {
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
          z-index: 1;
        }
        
        /* Links container - horizontal on desktop, stacked on mobile */
        #contact .contact-links {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 1rem;
          margin-top: 1.25rem;
          flex-wrap: wrap;
        }
        
        /* Individual contact link styling */
        #contact .contact-link {
          display: inline-flex;
          align-items: center;
          gap: 0.9rem;
          padding: 0.9rem 1.15rem;
          background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
          border-radius: 999px;
          color: #e8faff;
          text-decoration: none;
          border: 1px solid rgba(255,255,255,0.06);
          transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
          font-weight: 600;
          min-width: 140px;
          justify-content: center;
          -webkit-tap-highlight-color: transparent;
        }
        
        /* Icon within link */
        #contact .contact-link i {
          font-size: 1.15rem;
          width: 1.6rem;
          height: 1.6rem;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: inherit;
        }
        
        /* Visual variants (optional colors) */
        #contact .contact-link[href^="mailto:"] { background: linear-gradient(135deg, rgba(0,212,255,0.08), rgba(123,44,191,0.03)); color: #bff6ff; }
        #contact .contact-link[href*="instagram"] { background: linear-gradient(135deg, rgba(255,0,110,0.05), rgba(123,44,191,0.02)); color: #ffd6ec; }
        #contact .contact-link[href*="github"] { background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); color: #e0e0e0; }
        
        /* Hover / focus states */
        #contact .contact-link:hover,
        #contact .contact-link:focus {
          transform: translateY(-6px);
          box-shadow: 0 14px 40px rgba(0,0,0,0.6), 0 6px 18px rgba(0,212,255,0.06);
          background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
          outline: none;
        }
        
        /* Keyboard focus visible */
        #contact .contact-link:focus-visible {
          box-shadow: 0 0 0 4px rgba(0,212,255,0.12), 0 12px 36px rgba(0,0,0,0.55);
          border-color: rgba(0,212,255,0.25);
        }
        
        /* Label typography */
        #contact .contact-link span {
          display: inline-block;
          font-size: 0.98rem;
          line-height: 1;
        }
        
        /* Smaller screens: stack links vertically and widen them */
        @media (max-width: 520px) {
          #contact .contact-links {
            flex-direction: column;
            gap: 0.85rem;
            align-items: center;
          }
        
          #contact .contact-link {
            width: calc(100% - 40px);
            max-width: 360px;
            justify-content: flex-start;
            padding-left: 1.25rem;
          }
        
          #contact .contact-link i { margin-left: 0.15rem; margin-right: 0.6rem; }
        }

        @media (max-width: 768px) {
            .reel-stack {
                gap: 0;
                max-width: 100%;
            }

            .reel-stack .instagram-embed-container {
                flex: 0 0 220px;
                max-width: 220px;
                margin-left: -60px;
                padding-top: 70%;
            }

            .reel-stack .instagram-embed-container:nth-child(1) { transform: translateY(6px) scale(0.98); }
            .reel-stack .instagram-embed-container:nth-child(2) { transform: translateY(0) scale(1); }
            .reel-stack .instagram-embed-container:nth-child(3) { transform: translateY(4px) scale(0.99); }
        }

        /* Instagram embed container: responsive intrinsic ratio, rounded + shadow, centered content */
        .instagram-embed-container {
          position: relative;
          width: 100%;
          max-width: 540px;          /* Instagram's typical max; change as needed */
          margin: 0 auto;
          border-radius: 14px;
          overflow: hidden;
          background: #000;          /* fallback while embed loads */
          box-shadow: 0 18px 40px rgba(0,0,0,0.6), 0 6px 18px rgba(0,0,0,0.45);
          border: 1px solid rgba(255,255,255,0.04);
          transition: transform 240ms ease, box-shadow 240ms ease;
          z-index: 1;
          /* intrinsic ratio (16:9) - Instagram embeds are usually square-ish but this gives a nice viewport */
          padding-top: 56.25%;
        }

        /* Make the iframe / embed fill the container using absolute positioning */
        .instagram-embed-container > iframe,
        .instagram-embed-container blockquote,
        .instagram-embed-container > embed {
          position: absolute !important;
          top: 0;
          left: 0;
          width: 100% !important;
          height: 100% !important;
          border: 0 !important;
          display: block !important;
        }

        /* If the embed provides a blockquote (Instagram), ensure it doesn't add its own background/borders */
        .instagram-embed-container blockquote {
          background: transparent !important;
          border: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          color: inherit !important;
        }

        /* Play overlay (visual affordance) - appears on hover/tap */
        .instagram-embed-container .play-overlay {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          font-size: 2.6rem;
          color: rgba(255,255,255,0.95);
          text-shadow: 0 8px 20px rgba(0,0,0,0.6);
          pointer-events: none;
          opacity: 0.98;
        }

        /* Hover lift for desktop */
        .instagram-embed-container:hover {
          transform: translateY(-6px);
          box-shadow: 0 28px 60px rgba(0,0,0,0.65), 0 10px 30px rgba(0,0,0,0.5);
        }

        /* Smaller screens: reduce padding-top ratio and shadows for performance */
        @media (max-width: 520px) {
          .instagram-embed-container {
            padding-top: 70%; /* taller on narrow phones */
            box-shadow: 0 12px 28px rgba(0,0,0,0.55);
            border-radius: 12px;
          }

          .instagram-embed-container .play-overlay {
            font-size: 2rem;
          }
        }

        /* Optional: improve accessibility (if container is a link) */
        .instagram-embed-container a[role="button"],
        .instagram-embed-container a[aria-label] {
          display: inline-block;
          width: 100%;
          height: 100%;
          text-decoration: none;
          color: inherit;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0.7;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            /* show hamburger */
            .menu-toggle {
                display: flex;
            }

            .hero-content h1 {
                font-size: 2.5rem;
            }

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

            .profile-pic {
                width: 200px;
                height: 200px;
                font-size: 5rem;
            }

            .contact-links {
                flex-direction: column;
                align-items: center;
            }
            

            /* make sure hero doesn't sit behind fixed header */
            .hero {
                padding-top: 5.5rem; /* header height + small gap */
            }

            /* adjust nav dropdown layout for very small screens */
            header.nav-open .nav-links {
                left: 0;
                right: 0;
                margin: 0 1rem;
            }

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

        /* Scroll animations */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.6s ease;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }