/* --- BASE STYLES --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Orbitron", sans-serif;
        }

        body {
            background: radial-gradient(circle at top, #2b0a3d, #000);
            color: #fff;
            overflow-x: hidden;
        }

        /* --- HEADER --- */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 8%;
            flex-wrap: wrap;
            gap: 20px;
        }

        .logo { width: 160px; }

        .store-buttons {
            display: flex;
            gap: 10px;
        }

        .store-buttons img {
            width: 130px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .store-buttons img:hover { transform: scale(1.05); }

        /* --- HERO SECTION --- */
        .hero {
            text-align: center;
            padding: 45px 20px;
            background-image: url("../images/hero-bg.png");
            background-size: 400px auto;
            background-repeat: no-repeat;
            background-position: center 10%;
            position: relative;
        }

        .hero h1 {
            font-size: 50px;
            margin-bottom: 20px;
            text-transform: uppercase;
            font-weight: 800;
            line-height: 1.2;
        }

        .hero h1 .underlined {
            border-bottom: 5px solid #fff;
            display: inline-block;
        }

        .hero h1 .outline {
            color: transparent;
            -webkit-text-stroke: 1px #fff;
            margin: 0 10px;
        }

        .hero-img {
            width: 320px;
            max-width: 80%;
            margin: 20px 0;
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
            position: relative;
            z-index: 2;
        }

        .hero h2 {
            font-size: 32px;
            font-weight: 800;
            letter-spacing: 1px;
            margin-top: 10px;
            text-transform: uppercase;
        }

        .hero h2 .outline {
            color: transparent;
            -webkit-text-stroke: 1px #fff;
            display: inline-block;
            margin: 0 5px;
        }

        /* --- HEART DIVIDER --- */
        .heart-divider {
            text-align: center;
            padding: 10px 0 20px 0;
        }

        .heart-divider img {
            width: 85px;
            filter: drop-shadow(0 0 20px rgba(255, 75, 75, 0.4));
        }

        /* --- FEATURES (Updated for Bigger Width) --- */
        .features-container {
            max-width: 1450px; 
            margin: 0 auto;
            padding: 40px 2%;
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .feature {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 25px 60px; 
            border-radius: 25px;
            min-height: 220px; 
            position: relative;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
            transition: transform 0.3s;
            width: 100%;
            overflow: hidden;
        }

        .feature:hover { transform: translateY(-5px); }

        .feature-icon {
            flex: 0 0 120px; 
            display: flex;
            justify-content: center;
        }

        .feature-icon img {
            width: 100px;
            filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.3));
        }

        .feature-content-wrapper {
            flex: 1;
            display: flex;
            align-items: center; 
            justify-content: space-between;
            padding: 0 50px; 
            gap: 30px; 
        }

        .feature-text {
            flex: 1; 
            padding-right: 20px;
            min-width: 0; 
        }

        .feature h3 { font-size: 28px; margin-bottom: 12px; } 
        .feature p { font-size: 16px; line-height: 1.5; opacity: 0.9; }

        .feature button {
            flex: 0 0 240px; 
            padding: 15px 10px; 
            border-radius: 12px;
            border: 2px solid #fff;
            background: #000;
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
            white-space: nowrap; 
        }

        .feature button:hover { background: #fff; color: #000; }

        .feature-preview {
            flex: 0 0 180px;
            display: flex;
            justify-content: center;
        }

        .feature-preview img {
            width: 160px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.1);
            padding: 3px;
        }

        /* COLORS */
        .green { background: linear-gradient(135deg, #6ede41, #44a433); }
        .blue { background: linear-gradient(135deg, #008aef, #1bb3df); }
        .purple { background: linear-gradient(135deg, #8b4ac9, #5f04b5); }
        .orange { background: linear-gradient(135deg, #f9692d, #d48200); }
        .teal { background: linear-gradient(135deg, #38e9bb, #01674e); }
        .yellow { background: linear-gradient(135deg, #ffec5a, #d48200); color: #fff; }

        /* --- SCREENS SECTION --- */
        .screens {
            text-align: center;
            padding: 40px 20px;
            position: relative;
        }

        .screens h2 {
            font-size: 60px;
            font-weight: 800;
            margin-bottom: 50px;
            text-transform: uppercase;
        }

        .screens h2 .outline {
            color: transparent;
            -webkit-text-stroke: 1px #fff;
        }

        .image-display-container {
            position: relative;
            max-width: 1100px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bg-image { width: 100%; max-width: 900px; opacity: 0.5; }

        .front-image {
            position: absolute;
            z-index: 2;
            top: 60%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 95%;
            max-width: 1040px;
            filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.8));
        }

        /* --- FOOTER --- */
        .footer {
            text-align: center;
            padding: 100px 30px 100px 30px;
            position: relative;
            margin-top: 120px;
            background-color: #000;
            background-image: linear-gradient(to top, #000000 0%, #1B003B 40%, rgba(55, 16, 92, 0.6) 80%, rgba(86, 0, 169, 0) 100%), url("../images/footer-bg.png");
            background-size: cover, 330px auto;
            background-repeat: no-repeat;
            background-position: center;
            background-blend-mode: screen;
        }

        .footer h2 {
            font-size: 40px;
            margin-bottom: 30px;
            text-transform: uppercase;
            font-weight: 800;
        }

        .footer h2 span { color: #f9692d; -webkit-text-stroke: 1px white; }

        .footer-menu {
            display: flex;
            justify-content: center; 
            flex-wrap: wrap;         
            gap: 40px;               
            padding: 15px 20px;
            background: #000;
        }

        .footer-menu a {
            color: #FFFFFF;         
            text-decoration: none;   
            font-size: 14px;        
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1.2px;   
            transition: all 0.3s ease;
            opacity: 0.8;           
        }

        .footer-menu a:hover { opacity: 1; transform: translateY(-3px); }

        /* --- RESPONSIVE BREAKPOINTS --- */
        @media (max-width: 1100px) {
            .feature-content-wrapper { padding: 0 20px; }
            .feature h3 { font-size: 22px; }
            .screens h2 { font-size: 40px; }
        }

        @media (max-width: 900px) {
            .feature {
                flex-direction: column;
                text-align: center;
                padding: 40px 20px;
            }
            .feature-content-wrapper {
                flex-direction: column;
                padding: 20px 0;
            }
            .feature-text { padding-right: 0; margin-bottom: 20px; }
            .feature button { flex: none; width: 100%; max-width: 280px; }
            .front-image { position: relative; top: 0; left: 0; transform: none; margin-top: -55%; }
            .footer { margin-top: 40px; }
        }

        @media (max-width: 600px) {
            .header { justify-content: center; }
            .hero h1 { font-size: 30px; }
            .hero h2 { font-size: 20px; }
            .hero-img { width: 220px; }
            .footer h2 { font-size: 26px; }
            .footer-menu { gap: 20px; flex-direction: column; align-items: center; }
            .store-buttons img { width: 110px; }
        }