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

        body {
            font-family: "DM Sans", sans-serif;
            /* /////ssfont-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; */
            background: linear-gradient(0deg, #121212 80%, #360C66 100%);
            min-height: 100vh;
            color: #ffffff;
            overflow-x: hidden;
        }

        /* Header Styles */
        .navbar {
            padding: 1.5rem 0;
            background: transparent !important;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            color: white !important;
            text-decoration: none;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            margin-right: 8px;
            background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }

        .language-selector {
            background: transparent;
            border: none;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            cursor: pointer;
        }

        .language-selector option {
            background: #241553;
        }

        /* Hero Section */
        .hero-section {
            padding: 3rem 0 6rem;
            position: relative;
        }

        .hero-title {
            font-weight: 700;
            font-style: Bold;
            font-size: 65px;
            leading-trim: NONE;
            line-height: 120%;
            letter-spacing: -0.6%;
        }

        .hero-subtitle {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 3rem;
        }

        .app-label {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.3rem 1rem;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-bottom: 2rem;
            color: #C0AAFF;
        }

        /* Store Buttons */
        .store-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .store-btn {
            display: inline-flex;
            align-items: center;
            padding: 0.55rem 1rem;
            border-radius: 10px;
            text-decoration: none;
            border: none !important;
            transition: transform 0.3s ease;
        }

        .store-btn:hover {
            transform: translateY(-2px);
        }

        .google-play {
            background: #2A2A2A;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .app-store {
            background: #2A2A2A;
            color: white;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .store-btn i {
            font-size: 1.5rem;
            margin-right: 0.75rem;
        }

        .store-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .store-text small {
            font-size: 0.75rem;
            opacity: 0.9;
        }

        .store-text span {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Phone Mockup */
        .phone-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1000px;
        }

        .phone-mockup {
            width: 320px;
            height: 650px;
            position: relative;
            display: flex;
            /* enable flexbox */
            align-items: center;
            /* vertical center */
            justify-content: center;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotateY(-5deg);
            }

            50% {
                transform: translateY(-20px) rotateY(-5deg);
            }
        }

        .phone-frame {
            width: 100%;
            height: 100%;
            background: #1a1a1a;
            border-radius: 40px;
            padding: 10px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            position: relative;
        }

        .phone-screen {
            width: 100%;
            height: 100%;
            background: #000;
            border-radius: 30px;
            overflow: hidden;
            position: relative;
        }

        .phone-notch {
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 150px;
            height: 25px;
            background: #1a1a1a;
            border-radius: 0 0 15px 15px;
            z-index: 10;
        }

        .phone-content {
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzAwIiBoZWlnaHQ9IjYwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMzAwIiBoZWlnaHQ9IjYwMCIgZmlsbD0iIzFhMGYyZSIvPjx0ZXh0IHg9IjIwIiB5PSI4MCIgZmlsbD0id2hpdGUiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSJib2xkIj5Ib3d3ZTwvdGV4dD48L3N2Zz4=');
            background-size: cover;
            background-position: center;
        }

        /* Orange decorative element */
        .decorative-hand {
            position: absolute;
            right: -50px;
            top: 50%;
            transform: translateY(-50%);
            width: 200px;
            height: 200px;
            background: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
            border-radius: 50% 50% 50% 70%;
            opacity: 0.8;
            z-index: -1;
        }

        /* Vision Section */
        .vision-section {
            padding: 6rem 0;
            text-align: center;
        }

        .section-label {
            display: inline-block;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.5rem 1.5rem;
            border-radius: 20px;
            font-size: 0.9rem;
            margin-bottom: 2rem;
        }

        .vision-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 2rem;
        }

        .vision-text {
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            max-width: auto;
            margin: 0 auto;
            width: 1064.9434814453125;

            font-weight: 300;
            font-style: Light;
            font-size: 16px;
            leading-trim: NONE;
            line-height: 120%;
            letter-spacing: -2%;
            text-align: center;


        }

        /* Screenshots Section */
        .screenshots-section {
            padding: 6rem 0;
            text-align: center;
        }

        .screenshots-title {
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 3rem;
        }

        .screenshots-carousel {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 2rem;
            padding: 2rem 0;
        }

        .screenshot-phone {
            width: 280px;
            height: 580px;
            background: #1a1a1a;
            border-radius: 35px;
            padding: 8px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
            transition: transform 0.3s ease;
        }

        .screenshot-phone:hover {
            transform: scale(1.05);
        }

        .screenshot-phone.side {
            opacity: 0.5;
            transform: scale(0.9);
        }

        .screenshot-screen {
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            border-radius: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.9rem;
        }

        .carousel-nav {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 50px;
            height: 50px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .carousel-nav:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        /* Footer */
        footer {
            padding: 2rem 0 2rem;
            text-align: center;
            color: rgb(147 147 147 / 60%);
            font-size: 0.9rem;
            background: #0F0F0F;
        }

        .footer-p {
            margin-bottom: 0;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .hero-title {
                font-size: 2.5rem;
            }

            .phone-mockup {
                width: 280px;
                height: 570px;
            }

            .decorative-hand {
                width: 150px;
                height: 150px;
                right: -30px;
            }
        }

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

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

            .store-buttons {
                justify-content: center;
            }

            .phone-container {
                margin-top: 3rem;
            }

            .screenshots-carousel {
                flex-direction: column;
            }

            .screenshot-phone.side {
                display: none;
            }

        }

        @media only screen and (min-width: 436px) {
            .bg-main-mockup2 {
                z-index: 2;
                left: -45px !important;
                /* middle */
            }

            .bg-main-home-cs {
                z-index: 3;
                left: 180px !important;
                /* top */
            }

        }
        
        @media only screen and (max-width: 435px) {
            .bg-main-mockup1{
                width: 100% !important;
            }

            .bg-main-mockup2 {
                z-index: 2;
                left: -162px !important;
                width: 465px !important;
                /* middle */
            }

            .bg-main-home-cs {
                z-index: 3;
                left: 0px !important;
                /* top */
            }
        }

        .play-ios {
            font-family: sans-serif;
        }

        .appHed {
            color: #C0AAFF;
        }

        /* layering order */
        .bg-main-mockup1 {
            z-index: 1;
            /* bottom */
        }

        

        .phone-mockup img {
            position: absolute;
            /* stack all images */
            top: 0;
            left: 0;
            width: auto;
            /* make all images fit container */
            height: auto;
        }