:root {
            --primary-color: #111;
            --accent-color: #e63946; /* Vibrant Red */
            --bg-grid: #e9ecef;
        }

        body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            /* Dot Grid Pattern */
            background-image: radial-gradient(var(--bg-grid) 1.5px, transparent 1.5px);
            background-size: 24px 24px;
            overflow: hidden; /* Force single page */
            height: 100vh;
            color: var(--primary-color);
        }

        /* Glassmorphism Navbar */
        

        /* Typography Overrides */
        h1, h2, h3, h4, h5, h6, .navbar-brand {
            font-family: 'Poppins', sans-serif;
        }

        /* 3D Phone Container */
        .phone-perspective {
            perspective: 1000px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Modern Phone Frame (Dynamic Island Style) */
        .phone-frame {
            width: 300px;
            height: 600px; /* Base height */
            background: #fff;
            border: 10px solid #2d2d2d;
            border-radius: 40px;
            position: relative;
            box-shadow: 
                -20px 20px 40px rgba(0,0,0,0.15),
                0 0 0 2px #444 inset;
            transition: transform 0.5s ease;
            transform: rotateY(-10deg) rotateX(5deg);
            overflow: hidden;
            /* Responsive adjustment handled in media queries */
        }
        
        .phone-frame:hover {
            transform: rotateY(0deg) rotateX(0deg);
        }

        /* Dynamic Island Notch */
        .notch {
            position: absolute;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: 90px;
            height: 24px;
            background: #000;
            border-radius: 20px;
            z-index: 20;
        }

        /* Screen Content */
        .screen {
            height: 100%;
            width: 100%;
            background: #f8f9fa;
            overflow: hidden;
            display: flex;
            flex-col: column;
            padding-top: 40px; /* Space for notch */
        }

        /* Custom UI Elements within Phone */
        .news-card {
            background: white;
            border-radius: 16px;
            padding: 16px;
            margin: 0 16px 16px 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            border: 1px solid rgba(0,0,0,0.02);
        }

        .tag-pill {
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 4px 8px;
            border-radius: 6px;
            background: #f1f3f5;
            color: #495057;
            display: inline-block;
            margin-bottom: 8px;
        }

        /* Play Store Button */
        .play-store-btn img {
            height: 75px;
            transition: transform 0.2s;
        }
        .play-store-btn:hover img {
            transform: scale(1.05);
        }

        /* Abstract Shapes behind phone */
        .shape-circle {
            position: absolute;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(230, 57, 70, 0.08) 0%, rgba(255,255,255,0) 70%);
            z-index: -1;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Responsive Tweaks */
        @media (max-width: 991px) {
            .phone-perspective {
                perspective: none;
                margin-top: 2rem;
            }
            .phone-frame {
                transform: none; /* No 3D on tablet/mobile */
                height: 500px;
                width: 250px;
                border-width: 8px;
            }
            .shape-circle {
                width: 300px;
                height: 300px;
            }
            body {
                overflow-y: auto; /* scroll allowed on mobile */
                height: auto;
            }
            main {
                padding-bottom: 3rem;
            }
        }
        
        /* Specific height adjustments for desktop single-page fit */
        @media (min-width: 992px) {
            .phone-frame {
                height: 65vh;
                max-height: 620px;
                width: auto;
                aspect-ratio: 9/19.5;
            }
        }