﻿            /* Specific page styles embedded for convenience */
            .mockup-glass {
                background: rgba(255, 255, 255, 0.45);
                backdrop-filter: blur(24px) saturate(150%);
                -webkit-backdrop-filter: blur(24px) saturate(150%);
                border: 1px solid rgba(255, 255, 255, 0.6);
                box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.15);
            }

            .phone-frame {
                background: #fff;
                border-radius: 2.5rem;
                border: 8px solid #1e293b;
                box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
                position: relative;
                overflow: hidden;
            }

            .phone-notch {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 40%;
                height: 24px;
                background: #1e293b;
                border-bottom-left-radius: 16px;
                border-bottom-right-radius: 16px;
                z-index: 50;
            }

            .purple-gradient-text {
                background: linear-gradient(135deg, #6200EE 0%, #b84bf0 100%);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .hero-bg {
                background-image: url('../../img/Gemini_Generated_Image_tji7owtji7owtji7.png');
                background-size: cover;
                background-position: center 20%;
            }

            .tags-anim {
                animation: float 6s ease-in-out infinite;
            }

            @keyframes float {

                0%,
                100% {
                    transform: translateY(0px);
                }

                50% {
                    transform: translateY(-10px);
                }
            }

            /* Phone floating animations */
            .float-phone-left {
                animation: floatPhoneLeft 7s ease-in-out infinite;
            }

            .float-phone-right {
                animation: floatPhoneRight 8s ease-in-out infinite;
            }

            @keyframes floatPhoneLeft {

                0%,
                100% {
                    transform: rotate(-12deg) translateY(0px);
                }

                50% {
                    transform: rotate(-12deg) translateY(-18px);
                }
            }

            @keyframes floatPhoneRight {

                0%,
                100% {
                    transform: rotate(12deg) translateY(0px);
                }

                50% {
                    transform: rotate(12deg) translateY(-14px);
                }
            }

            /* Floating asset tag animations — staggered delays for depth */
            .float-1 {
                animation: floatTag 5s ease-in-out infinite;
                animation-delay: 0s;
            }

            .float-2 {
                animation: floatTag 6.5s ease-in-out infinite;
                animation-delay: -1.5s;
            }

            .float-3 {
                animation: floatTag 7s ease-in-out infinite;
                animation-delay: -3s;
            }

            .float-4 {
                animation: floatTag 5.5s ease-in-out infinite;
                animation-delay: -4.5s;
            }

            @keyframes floatTag {

                0%,
                100% {
                    transform: translateY(0px) scale(1);
                }

                50% {
                    transform: translateY(-12px) scale(1.02);
                }
            }

            /* Active Link Glow */
            .nav-link.active {
                color: #6200EE !important;
                text-shadow: 0 0 15px rgba(98, 0, 238, 0.4);
                position: relative;
            }

            .nav-link.active::after {
                content: '';
                position: absolute;
                bottom: -4px;
                left: 0;
                width: 100%;
                height: 2px;
                background: #6200EE;
                box-shadow: 0 0 10px rgba(98, 0, 238, 0.6);
                border-radius: 2px;
            }