:root {
            --bg: #ffffff;
            --text: #1a1a1a;
            /* Default Colors */
            --primary: #9F00FF; 
            --secondary: #00d4ff;
            
            --accent: #FF2A6D;
            --glass: rgba(255, 255, 255, 0.8);
            --border: rgba(0,0,0,0.05);
            --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); 
            --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
        }

        body.dark-mode {
            --bg: #050505;
            --text: #ffffff;
            --glass: rgba(20, 20, 20, 0.8);
            --border: rgba(255,255,255,0.1);
            overflow-x: hidden;
        }

        @font-face {
            font-family: 'Naroapp';
            src: url('/assests/Naroapp-medium.ttf');
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Naroapp', system-ui, -apple-system, sans-serif;
        }

        html {
            scroll-behavior: smooth;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* IE 10+ */
        }
        
        html::-webkit-scrollbar { 
            display: none;  /* Chrome/Safari/Webkit */
        }

        body {
            background-color: var(--bg);
            color: var(--text);
            overflow-x: hidden;
            transition: background-color 0.8s var(--ease-out-expo), color 0.8s var(--ease-out-expo);
        }

        /* =========================================
           2. NAVIGATION (Transparent & Centered Blueprint)
           ========================================= */
        .navbar {
            position: fixed;
            top: 0; left: 0; width: 100%;
            height: 100px;
            display: flex; justify-content: center; align-items: center;
            padding: 4% 2%;
            z-index: 1000;
            background: transparent;
            backdrop-filter: blur(0px);
            transition: 0.4s var(--ease-out-expo);
        }

        .nav-center-container {
            display: flex;
            align-items: center;
            gap: 40px;
            background: rgba(255,255,255,0.05); 
            padding: 15px 40px;
            border-radius: 50px;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
        }

        .nav-link {
            text-decoration: none; color: var(--text); font-size: 15px; font-weight: 600;
            opacity: 0.7; transition: 0.3s; text-transform: uppercase; letter-spacing: 1px;
        }
        .nav-link:hover { opacity: 1; color: var(--primary); }

        .naro-link-btn {
            background: var(--text); color: var(--bg);
            padding: 8px 20px; border-radius: 20px;
            text-decoration: none; font-weight: 700; font-size: 12px;
            letter-spacing: 1px; transition: 0.3s;
        }
        .naro-link-btn:hover { transform: scale(1.05); }

        .brand-logo img { height: 50px; width: auto; transition: transform 0.5s; }
        

        /* Animated Interactive Toggle Switch */
        .theme-switch {
            position: relative;
            width: 60px;
            height: 30px;
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 30px;
            cursor: pointer;
            display: flex;
            align-items: center;
            padding: 2px;
            transition: 0.4s;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
        }
        .theme-switch-knob {
            width: 24px; height: 24px;
            background: var(--primary);
            border-radius: 50%;
            transition: 0.4s var(--ease-elastic);
            transform: translateX(0px);
            display: flex; justify-content: center; align-items: center;
            color: white; font-size: 12px;
        }
        body.dark-mode .theme-switch-knob { transform: translateX(30px); }

        /* =========================================
           3. ADVANCED 3D ANIMATION ENGINE
           ========================================= */
        .section {
            min-height: 100vh;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            padding: 100px 8%;
            overflow: hidden;
            perspective: 2000px;
            transform-style: preserve-3d;
        }

        .anim-element {
            opacity: 0;
            will-change: transform, opacity, filter;
            transition: all 1.0s var(--ease-out-expo); /* Slightly faster for responsiveness */
        }

        /* Animations */
        .anim-fly-in { transform: translateZ(-1200px) scale(0.2) rotateX(20deg); filter: blur(40px); }
        .section.active .anim-fly-in { opacity: 1; transform: translateZ(0) scale(1) rotateX(0deg); filter: blur(0); }

        .anim-rotate-left { transform: translateX(-200px) rotateY(45deg) translateZ(-100px); transform-origin: left center; filter: blur(10px); }
        .section.active .anim-rotate-left { opacity: 1; transform: translateX(0) rotateY(0deg) translateZ(0); filter: blur(0); }

        .anim-rotate-right { transform: translateX(200px) rotateY(-45deg) translateZ(-100px); transform-origin: right center; filter: blur(10px); }
        .section.active .anim-rotate-right { opacity: 1; transform: translateX(0) rotateY(0deg) translateZ(0); filter: blur(0); }

        .anim-up { transform: translateY(100px) scale(0.9); filter: blur(10px); }
        .section.active .anim-up { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

        .anim-blur-reveal { filter: blur(50px); transform: scale(1.2); letter-spacing: 10px; }
        .section.active .anim-blur-reveal { opacity: 1; filter: blur(0); transform: scale(1); letter-spacing: normal; }
        
        .anim-pop-in { transform: scale(0.5); opacity: 0; }
        .section.active .anim-pop-in { transform: scale(1); opacity: 1; transition-timing-function: var(--ease-elastic); }

        /* Delays */
        .d-1 { transition-delay: 0.1s; }
        .d-2 { transition-delay: 0.2s; }
        .d-3 { transition-delay: 0.3s; }
        .d-4 { transition-delay: 0.4s; }
        .d-5 { transition-delay: 0.5s; }
        .d-6 { transition-delay: 0.6s; }

        /* =========================================
           4. LAYOUTS & TYPOGRAPHY
           ========================================= */
        .layout-hero { text-align: center; max-width: 1300px; margin: 0 auto; z-index: 2; transform-style: preserve-3d; }
        .layout-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; width: 100%; max-width: 1600px; transform-style: preserve-3d; }
        .layout-split.reversed { direction: rtl; } 
        .layout-split.reversed .text-col { direction: ltr; }
        .layout-center { text-align: center; max-width: 1000px; margin: 0 auto; transform-style: preserve-3d; }

        h1 {
            font-size: clamp(4rem, 9vw, 7rem);
            line-height: 1;
            font-weight: 800;
            letter-spacing: -3px;
            margin-bottom: 30px;
            background: linear-gradient(180deg, var(--text) 20%, var(--primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            transition: 1s var(--ease-out-expo);
        }

        /* Text Sizes */
        .text-col h2 { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 900; margin-bottom: 30px; letter-spacing: -2.5px; line-height: 1.05; }
        .text-col p { font-size: 1.8rem; line-height: 1.5; color: var(--text); opacity: 0.9; margin-bottom: 50px; font-weight: 500; }
        
        .layout-center h2 { font-size: clamp(3.5rem, 7vw, 6rem); font-weight: 900; margin-bottom: 30px; letter-spacing: -2.5px; line-height: 1.05; }
        .layout-center p { font-size: 1.8rem; line-height: 1.5; color: var(--text); opacity: 0.9; margin-bottom: 50px; font-weight: 500; }

        #hero h1 { font-size: clamp(4rem, 9vw, 7rem); } 
        #hero p { font-size: 1.5rem; }
        #final-cta h1 { font-size: clamp(4rem, 9vw, 7rem); }
        #final-cta p { font-size: 1.5rem; }

        .highlight-text { color: var(--primary); font-weight: 600; transition: color 1s; display: inline-block; position: relative; font-size: 1.6rem; }
        .highlight-text::after {
            content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 30%; 
            background: var(--primary); opacity: 0.2; z-index: -1; transform: skewX(-10deg);
        }
        
        .visual-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; }
        
        .glass-card {
            background: rgba(255,255,255,0.03); border: 1px solid var(--border);
            backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
            border-radius: 40px; padding: 60px; width: 100%; transform: translateZ(40px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.1); transition: transform 0.5s var(--ease-out-expo);
        }
        .glass-card:hover { transform: translateZ(60px) scale(1.02); }

        .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; width: 100%; margin-top: 60px; }
        .feature-item { padding: 40px; display: flex; flex-direction: column; gap: 20px; background: rgba(255,255,255,0.02); border-radius: 30px; border: 1px solid var(--border); transition: 0.3s; }
        .feature-item:hover { background: rgba(255,255,255,0.05); transform: translateY(-10px); border-color: var(--primary); }
        .feature-item i { font-size: 60px; color: var(--primary); margin-bottom: 10px; transition: color 1s; }
        .feature-item h3 { font-size: 2rem; }
        .feature-item p { font-size: 1.4rem; }
        
        .video-wrapper { width: 100%; max-width: 1400px; border-radius: 40px; overflow: hidden; box-shadow: 0 50px 100px -20px rgba(0,0,0,0.4); margin: 0 auto; position: relative; }

        /* Abstract Backgrounds */
        .bg-blob { 
            position: absolute; border-radius: 50%; filter: blur(150px); z-index: 0; opacity: 0.25;
            transition: background-color 1.5s var(--ease-out-expo), top 2s var(--ease-out-expo), left 2s var(--ease-out-expo), transform 5s linear;
            animation: blobPulse 10s infinite alternate;
        }
        @keyframes blobPulse { 0% { transform: scale(1); } 100% { transform: scale(1.2); } }
        .blob-p { width: 50vw; height: 50vw; background: var(--primary); top: -10%; right: -10%; }
        .blob-s { width: 50vw; height: 50vw; background: var(--secondary); bottom: -10%; left: -10%; }

        /* =========================================
           5. DEVELOPER SECTION (Image Match)
           ========================================= */
        .dev-title {
            font-size: clamp(3.5rem, 8vw, 6rem);
            font-weight: 400; /* Thinner as per image */
            margin-bottom: 20px;
            line-height: 1.1;
        }
        .dev-title b { font-weight: 900; display: block; }

        .contact-btn-outline {
            display: inline-flex; align-items: center; gap: 10px;
            padding: 15px 40px;
            border: 1px solid var(--text);
            color: var(--text);
            text-decoration: none;
            font-size: 18px;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: 0.3s;
            background: transparent;
        }
        .contact-btn-outline:hover { background: var(--text); color: var(--bg); }

        /* Code Block (Sleek IDE Style) */
        .code-block {
            font-family: 'Fira Code', monospace;
            background: #1e1e1e; /* Dark IDE bg */
            padding: 40px 50px;
            border-radius: 20px;
            color: #f8f8f2;
            font-size: 18px;
            line-height: 1.8;
            box-shadow: 0 30px 80px rgba(0,0,0,0.5);
            position: relative;
            border: 1px solid #333;
        }
        /* Top Gradient Bar like Image */
        .code-block::before {
            content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px;
            background: linear-gradient(90deg, #ff79c6, #8be9fd, #50fa7b);
        }

        /* =========================================
           6. FOOTER (Image Match)
           ========================================= */
        .footer-main {
            background: transparent;
            padding: 80px 5%;
            text-align: center;
            position: relative; z-index: 2;
        }
        .footer-signature {
            font-size: 22px;
            color: var(--text);
            opacity: 0.7;
            font-weight: 600;
            margin-bottom: 40px;
        }
        .footer-social {
            display: flex;
            justify-content: center;
            gap: 30px;
        }
        .footer-social a {
            width: 65px; height: 65px;
            border: 2px solid rgba(255,255,255,0.15);
            border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            color: var(--text);
            font-size: 28px;
            transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: rgba(255,255,255,0.03);
            position: relative; overflow: hidden;
        }
        /* Brand Hovers */
        .footer-social a:hover { transform: scale(1.15); border-color: transparent; color: white; }
        .footer-social a.ig:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
        .footer-social a.dc:hover { background: #5865F2; }
        .footer-social a.wa:hover { background: #25D366; }
        .footer-social a.rd:hover { background: #FF4500; }
        .footer-social a.yt:hover { background: #FF0000; }

        /* Button Styles */
        .download-pill {
            flex: 0 0 auto; min-width: 160px; justify-content: center;
            display: inline-flex; align-items: center; text-align: center;
            color: var(--text); border: 1px solid var(--text); background: transparent;
            text-decoration: none; transition: 0.3s ease;
        }
        .download-pill:hover { transform: scale(1.05); box-shadow: 0 5px 15px rgba(0,0,0,0.2); background: var(--text); color: var(--bg); }
        .download-pill.primary { background: var(--primary); color: white; border-color: var(--primary); }
        .download-pill.primary:hover { background: white; color: var(--primary); }

        /* Actions Containers */
        #hero-actions, .final-cta-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }

        @media (max-width: 1024px) {
            .layout-split { grid-template-columns: 1fr; gap: 60px; text-align: center; }
            .layout-split.reversed { direction: ltr; }
            h1 { font-size: 3.5rem; }
            .navbar { display: none; } 
            body{
                overflow-x: hidden;
                width: 100%;

                min-width: 100% !important;
            }
        }
        /* =========================================
   MOBILE & TABLET OPTIMIZATIONS (FIXED)
   ========================================= */
@media (max-width: 1024px) {
    
    /* 1. Global Layout Fixes */
    html, body {
        width: 100%;
        overflow-x: hidden;
        position: relative;
    }

    .navbar { display: none; } 

    /* 2. Constrain Sections to prevent 3D overflow */
    .section {
        padding: 60px 20px; /* Reduced padding from 100px */
        overflow: hidden;   /* CRITICAL: Cuts off elements waiting to animate in */
        width: 100vw;       /* Force viewport width */
        min-height: auto;   /* Allow sections to shrink if content is small */
    }

    /* 3. Stack Grids Vertically */
    .layout-split, 
    .layout-split.reversed { 
        grid-template-columns: 1fr; 
        gap: 40px; 
        text-align: center; 
        width: 100%;
        direction: ltr !important; /* Fix direction on mobile */
    }
    
    .layout-split.reversed .text-col { direction: ltr; }

    /* 4. Typography Scaling (Prevent huge text breaking screen) */
    h1 { font-size: clamp(3rem, 10vw, 4rem); }
    h2 { font-size: clamp(2.5rem, 8vw, 3.5rem) !important; }
    
    /* 5. Fix Huge Icons & "0%" Text Overflow */
    .visual-container i,
    .visual-container .fab,
    .visual-container .fas {
        font-size: clamp(100px, 40vw, 200px) !important; /* Shrinks icons to fit screen */
        margin: 0 auto;
    }
    
    /* Specific fix for the "0%" text in Features section */
    .text-col h1[style*="font-size: 140px"] {
        font-size: clamp(80px, 25vw, 140px) !important;
    }

    /* 6. Fix Developer Code Block Overflow */
    .code-block {
        padding: 20px !important; /* Reduce padding */
        width: 100%;
        max-width: 90vw;
        overflow-x: auto; /* Allow code to scroll INSIDE the box */
        font-size: 14px;  /* Smaller code font */
        margin: 0 auto;
        white-space: nowrap; /* Keep code lines intact, force scroll */
    }

    /* 7. Fix Footer */
    .footer-social {
        flex-wrap: wrap; /* Allow icons to wrap on very small screens */
        gap: 15px;
    }
    .footer-social a {
        width: 50px; height: 50px; font-size: 22px; /* Smaller footer buttons */
    }

    /* 8. Fix Buttons */
    .download-pill {
        width: 100%; /* Full width buttons on mobile */
        max-width: 300px;
        margin: 5px 0;
    }
    #hero-actions, .final-cta-actions {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}
/* =========================================
   COMPLETE MOBILE RESTRUCTURE - SIMPLE & SMOOTH
   ========================================= */

@media (max-width: 1024px) {
    
    /* ===== STEP 1: RESET EVERYTHING ===== */
    
    /* Force visibility and remove all complex transforms */
    .anim-element {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
        will-change: auto !important;
    }
    
    /* Remove all section 3D effects */
    .section {
        perspective: none !important;
        transform-style: flat !important;
        padding: 60px 20px;
        min-height: auto;
        overflow: visible !important;
    }

    /* Remove 3D from all containers */
    .layout-hero,
    .layout-split,
    .layout-center,
    .visual-container,
    .glass-card,
    .text-col {
        transform-style: flat !important;
        transform: none !important;
        perspective: none !important;
    }

    /* ===== STEP 2: NEW MOBILE-ONLY ANIMATIONS ===== */
    
    /* Simple fade-in on scroll (no transforms) */
    .anim-element {
        opacity: 0 !important;
        transition: opacity 0.5s ease-out !important;
    }
    
    .section.active .anim-element {
        opacity: 1 !important;
    }

    /* Apply staggered delays */
    .section.active .d-1 { transition-delay: 0.1s !important; }
    .section.active .d-2 { transition-delay: 0.2s !important; }
    .section.active .d-3 { transition-delay: 0.3s !important; }
    .section.active .d-4 { transition-delay: 0.4s !important; }
    .section.active .d-5 { transition-delay: 0.5s !important; }
    .section.active .d-6 { transition-delay: 0.6s !important; }

    /* ===== STEP 3: FIX LAYOUT ISSUES ===== */
    
    html, body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .navbar { 
        display: none !important; 
    }

    /* Stack all grids */
    .layout-split, 
    .layout-split.reversed { 
        grid-template-columns: 1fr !important; 
        gap: 40px !important;
        text-align: center !important;
        direction: ltr !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .layout-split.reversed .text-col { 
        direction: ltr !important; 
    }

    /* ===== STEP 4: FIX TEXT SIZES ===== */
    
    h1 { 
        font-size: clamp(3rem, 10vw, 4.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }
    
    h2 { 
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }

    .text-col h2,
    .layout-center h2 {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }
    
    .text-col p,
    .layout-center p,
    #hero p,
    #final-cta p {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
        margin-bottom: 30px !important;
    }

    /* ===== STEP 5: FIX VISUAL ELEMENTS ===== */
    
    /* Icons */
    .visual-container i,
    .visual-container .fab,
    .visual-container .fas {
        font-size: clamp(80px, 30vw, 150px) !important;
        max-width: 90vw !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* Special large text (like "0%") */
    .text-col h1[style*="font-size"] {
        font-size: clamp(60px, 20vw, 100px) !important;
    }

    /* ===== STEP 6: FIX CARDS & CONTAINERS ===== */
    
    .glass-card {
        padding: 30px 20px !important;
        border-radius: 20px !important;
        transform: none !important;
        backdrop-filter: blur(10px) !important;
    }

    .glass-card:hover {
        transform: none !important;
    }

    /* Feature grid */
    .grid-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        margin-top: 40px !important;
    }

    .feature-item {
        padding: 30px 20px !important;
        text-align: center !important;
    }

    .feature-item:hover {
        transform: none !important;
    }

    .feature-item i {
        font-size: 40px !important;
    }

    .feature-item h3 {
        font-size: 1.5rem !important;
    }

    .feature-item p {
        font-size: 1rem !important;
    }

    /* ===== STEP 7: FIX CODE BLOCK ===== */
    
    .code-block {
        padding: 20px 15px !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        overflow-x: auto !important;
        max-width: calc(100vw - 40px) !important;
        margin: 0 auto !important;
        white-space: pre !important;
    }

    /* ===== STEP 8: FIX BUTTONS ===== */
    
    #hero-actions, 
    .final-cta-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    .download-pill,
    .contact-btn-outline,
    .naro-link-btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 15px 30px !important;
        font-size: 14px !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* ===== STEP 9: FIX BACKGROUNDS ===== */
    
    .bg-blob {
        display: none !important; /* Hide on mobile to reduce visual clutter */
    }

    /* If you want to keep blobs, use this instead: */
    /*
    .bg-blob {
        filter: blur(60px) !important;
        opacity: 0.15 !important;
    }
    .blob-p {
        width: 80vw !important;
        height: 80vw !important;
        top: -20% !important;
        right: -40% !important;
    }
    .blob-s {
        width: 80vw !important;
        height: 80vw !important;
        bottom: -20% !important;
        left: -40% !important;
    }
    */

    /* ===== STEP 10: FIX VIDEO ===== */
    
    .video-wrapper {
        max-width: calc(100vw - 40px) !important;
        border-radius: 20px !important;
        margin: 0 auto !important;
    }

    /* ===== STEP 11: FIX FOOTER ===== */
    
    .footer-main {
        padding: 60px 20px !important;
    }

    .footer-signature {
        font-size: 16px !important;
        margin-bottom: 30px !important;
    }

    .footer-social {
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .footer-social a {
        width: 50px !important;
        height: 50px !important;
        font-size: 20px !important;
    }

    /* Remove hover effects on touch */
    .footer-social a:hover {
        transform: none !important;
    }

    .footer-social a:active {
        transform: scale(0.9) !important;
    }

    /* ===== STEP 12: FIX DEVELOPER SECTION ===== */
    
    .dev-title {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
        margin-bottom: 20px !important;
    }

    .dev-title b {
        font-size: clamp(2.5rem, 8vw, 3.5rem) !important;
    }

    /* ===== STEP 13: ENSURE ALL ELEMENTS ARE VISIBLE ===== */
    
    * {
        max-width: 100vw !important;
    }

    img, video, iframe {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ===== EXTRA SMALL SCREENS ===== */
@media (max-width: 480px) {
    
    .section {
        padding: 40px 15px !important;
    }

    h1 {
        font-size: clamp(2.5rem, 12vw, 3.5rem) !important;
    }

    h2 {
        font-size: clamp(2rem, 10vw, 2.8rem) !important;
    }

    .text-col p,
    .layout-center p,
    #hero p {
        font-size: 1rem !important;
    }

    .code-block {
        font-size: 10px !important;
        padding: 15px 10px !important;
    }

    .download-pill,
    .contact-btn-outline {
        padding: 12px 20px !important;
        font-size: 12px !important;
    }
}

/* ===== ACCESSIBILITY - REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .anim-element {
        opacity: 1 !important;
        transition: none !important;
    }
}