@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

            :root {
                --primary-green: #1a4b3d;
                --secondary-green: #2d5a4a;
                --accent-orange: #ff6b35;
                --accent-yellow: #ffc107;
                --light-gray: #e8e8e8;
                --dark-gray: #666;
                --white: #ffffff;
                --black: #000000;
                --card-radius: 20px;
                --button-radius: 50px;
                --shadow-light: 0 2px 8px rgba(0, 0, 0, 0.1);
                --shadow-medium: 0 4px 16px rgba(0, 0, 0, 0.15);
                --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.2);
            }

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

            body {
                font-family:
                    "Inter",
                    -apple-system,
                    BlinkMacSystemFont,
                    "Segoe UI",
                    system-ui,
                    sans-serif;
                background: var(--primary-green);
                min-height: 100vh;
                color: var(--white);
                position: relative;
            }
            .body {
                width: 100%;
                height: 100%;
                min-height: 100vh;
                background-image: url("./img/table_green.png");
                background-position: center;
                background-size: 500px;
                background-repeat: repeat;
            }

            body::before {
                content: "";
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(
                    135deg,
                    rgba(26, 75, 61, 0.95) 0%,
                    rgba(45, 90, 74, 0.9) 100%
                );
                z-index: -1;
            }

            .container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 16px;
                position: relative;
                z-index: 1;
                min-height: 100vh;

                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            .header {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                text-align: center;
                margin-bottom: 60px;
                padding-top: 24px;
                gap: 32px;
            }

            .header-text {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
                text-align: left;
            }

            .logo-container {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 16px;
            }

            .app-icon {
                width: 80px;
                height: 80px;
                border-radius: 18px;
                background: url("./img/app_icon.png") no-repeat center center;
                background-size: contain;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32px;
                font-weight: 800;
                color: white;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
                box-shadow: var(--shadow-medium);
            }

            .main-title {
                font-size: 3.5rem;
                font-weight: 900;
                color: var(--white);
                text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                letter-spacing: -0.02em;
            }

            .subtitle {
                font-size: 1.5rem;
                color: rgba(255, 255, 255, 0.9);
                font-weight: 600;
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .main-content {
                display: flex;
                /* gap: 16px; */
                align-items: center;
                justify-content: center;
            }

            .slider-section {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(20px);
                border-radius: var(--card-radius);
                padding: 24px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: var(--shadow-heavy);
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .download-section {
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(20px);
                border-radius: var(--card-radius);
                padding: 24px;
                padding-left: 40px;
                border: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: var(--shadow-heavy);
                transform: perspective(1000px) rotateY(-5deg);
            }

            .download-section h2 {
                font-size: 1.5rem;
                font-weight: 800;
                margin-bottom: 16px;
                color: var(--white);
                text-align: center;
            }

            .download-buttons {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 20px;
            }

            .download-btn,
            .testflight-btn {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 8px;
                padding: 12px 24px;
                border-radius: var(--button-radius);
                font-size: 1rem;
                font-weight: 700;
                text-decoration: none;
                transition: all 0.3s ease;
                border: none;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }

            .download-btn {
                background: linear-gradient(
                    135deg,
                    var(--accent-orange) 0%,
                    var(--accent-yellow) 100%
                );
                color: var(--white);
                box-shadow: var(--shadow-medium);
            }

            .download-btn:hover {
                transform: translateY(-2px);
                box-shadow: var(--shadow-heavy);
            }

            .testflight-btn {
                background: rgba(255, 255, 255, 0.9);
                color: var(--primary-green);
                border: 2px solid rgba(255, 255, 255, 0.3);
            }

            .testflight-btn:hover {
                background: var(--white);
                transform: translateY(-2px);
                box-shadow: var(--shadow-heavy);
            }

            .version-info {
                background: rgba(255, 255, 255, 0.1);
                border-radius: 12px;
                padding: 16px;
                margin-bottom: 12px;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .version-info h3 {
                font-size: 1.1rem;
                font-weight: 700;
                margin-bottom: 8px;
                color: var(--white);
            }

            .version-number {
                font-family:
                    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
                font-size: 1.2rem;
                font-weight: 600;
                color: var(--accent-yellow);
                margin-bottom: 16px;
            }

            .changelog {
                list-style: none;
                padding: 0;
            }

            .changelog li {
                font-family:
                    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", monospace;
                font-size: 0.9rem;
                color: rgba(255, 255, 255, 0.8);
                margin-bottom: 4px;
            }

            .footer {
                text-align: center;
                margin-top: 40px;
                padding: 24px 0;
                border-top: 1px solid rgba(255, 255, 255, 0.2);
            }

            .signature {
                font-size: 0.9rem;
                color: rgba(255, 255, 255, 0.6);
                font-style: italic;
            }

            .signature a {
                color: var(--accent-yellow);
                text-decoration: none;
                font-weight: 600;
            }

            .signature a:hover {
                color: var(--accent-orange);
            }

            .icon {
                width: 24px;
                height: 24px;
                fill: currentColor;
            }

            /* Mobile Responsive */
            @media (max-width: 768px) {

                .container {
                    padding-bottom: 40px;
                }

                .main-content {
                    grid-template-columns: 1fr;
                    gap: 40px;
                }

                .main-title {
                    font-size: 2.5rem;
                }

                .subtitle {
                    font-size: 1.2rem;
                }

                .download-section,
                .slider-section {
                    padding: 24px;
                }

                .app-icon {
                    width: 60px;
                    height: 60px;
                    border-radius: 18px;
                }

                .header {
                    gap: 18px;
                }

                .main-title {
                    font-size: 2.2rem;
                }


            }

            /* Animations */
            @keyframes fadeInUp {
                from {
                    opacity: 0;
                    transform: translateY(30px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .container > * {
                animation: fadeInUp 0.8s ease-out;
            }

            .container > *:nth-child(2) {
                animation-delay: 0.2s;
            }

            .container > *:nth-child(3) {
                animation-delay: 0.4s;
            }

            .container > *:nth-child(4) {
                animation-delay: 0.6s;
            }

            /* -------------------------------------------------- */
            /* Portrait Slider & Colour Toggle                   */
            /* -------------------------------------------------- */

            .slider-container {
                position: relative;
                max-width: 360px;
                margin: 0 auto;
                box-shadow: 
                    2px 4px 8px rgba(0, 0, 0, 0.1),
                    4px 8px 16px rgba(0, 0, 0, 0.15),
                    6px 16px 32px rgba(0, 0, 0, 0.2),
                    8px 32px 64px rgba(0, 0, 0, 0.25);
            }

            /* Swiper container */
            .slider-portrait {
                width: 100%;
                margin: 0 auto;
                border-radius: var(--card-radius);
                overflow: hidden;
                box-shadow: var(--shadow-heavy);
                position: relative;
            }

            /* Phone frame overlay */
            .phone-frame-overlay {
                position: absolute;
                top: -10%;
                left: -6%;
                right: -6%;
                bottom: -10%;
                background: url("./img/screens/mockup.png") no-repeat center center;
                background-size: contain;
                pointer-events: none;
                z-index: 10;
            }

            /* Maintain 9:16 portrait ratio */
            .slider-portrait .swiper-wrapper {
                aspect-ratio: 219/475;
            }

            /* Fallback for browsers without aspect-ratio support */
            @supports not (aspect-ratio: 9/16) {
                .slider-portrait::before {
                    content: "";
                    float: left;
                    padding-top: 216.78%; /* 16 / 9 * 100% */
                }
            }

            /* Slide content */
            .slider-portrait img,
            .slider-portrait video {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .slider-portrait video {
                background: var(--black);
            }

            /* Swiper navigation */
            .swiper-button-prev,
            .swiper-button-next {
                color: var(--accent-yellow);
                text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
            }

            .swiper-pagination-bullet {
                background: rgba(255, 255, 255, 0.6);
                opacity: 1;
            }

            .swiper-pagination-bullet-active {
                background: var(--accent-yellow);
            }

            /* Custom Slider Controls */
            .custom-slider-controls {
                position: absolute;
                top: 50%;
                left: 0;
                right: 0;
                transform: translateY(-50%);
                pointer-events: none;
                z-index: 15;

                display: flex;
                justify-content: space-between;
                align-items: center;
                /* padding: 0 16px; */
            }

            .custom-prev-btn,
            .custom-next-btn {
                /* position: absolute; */
                top: 0;
                width: 48px;
                height: 48px;
                background: rgba(255, 255, 255, 0.9);
                border: none;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                transition: all 0.3s ease;
                pointer-events: auto;
                box-shadow: var(--shadow-medium);
                backdrop-filter: blur(10px);
            }

            .custom-prev-btn {
                left: -60px;
            }

            .custom-next-btn {
                right: -60px;
            }

            .custom-prev-btn:hover,
            .custom-next-btn:hover {
                background: var(--white);
                transform: translateY(-2px);
                box-shadow: var(--shadow-heavy);
            }

            .custom-prev-btn .icon,
            .custom-next-btn .icon {
                width: 24px;
                height: 24px;
                fill: var(--primary-green);
            }

            /* Custom Pagination */
            .custom-pagination {
                display: flex;
                justify-content: center;
                gap: 8px;
                padding: 0 16px;
            }

            .custom-pagination-dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.4);
                cursor: pointer;
                transition: all 0.3s ease;
                border: 2px solid transparent;
            }

            .custom-pagination-dot:hover {
                background: rgba(255, 255, 255, 0.6);
                transform: scale(1.1);
            }

            .custom-pagination-dot.active {
                background: linear-gradient(
                    135deg,
                    var(--accent-orange) 0%,
                    var(--accent-yellow) 100%
                );
                border-color: rgba(255, 255, 255, 0.3);
                transform: scale(1.2);
            }

            /* Mobile responsive adjustments for custom controls */
            @media (max-width: 768px) {

                .main-content {
                    flex-direction: column;
                }

                .download-section {
                    transform: perspective(1000px) rotateY(0deg);
                }

                .xslider-section {
                    transform: perspective(1000px) rotateY(0deg) !important;
                }

                .header {
                    margin-bottom: 10px;
                }

                .custom-prev-btn {
                    left: -50px;
                }

                .custom-next-btn {
                    right: -50px;
                }

                .custom-prev-btn,
                .custom-next-btn {
                    width: 40px;
                    height: 40px;
                }

                .custom-prev-btn .icon,
                .custom-next-btn .icon {
                    width: 20px;
                    height: 20px;
                }

                .custom-pagination {
                    margin-top: 20px;
                }

                .custom-pagination-dot {
                    width: 10px;
                    height: 10px;
                }
            }

            /* Smartphone responsive styles */
            @media (max-width: 480px) {
                .slider-container {
                    max-width: 300px;
                }

                .custom-slider-controls-container {
                    max-width: 240px !important;
                }

                .download-section {
                    margin-top: 20px;
                }

                .custom-prev-btn {
                    left: -35px;
                }

                .custom-next-btn {
                    right: -35px;
                }

                .custom-prev-btn,
                .custom-next-btn {
                    width: 36px;
                    height: 36px;
                }

                .custom-prev-btn .icon,
                .custom-next-btn .icon {
                    width: 18px;
                    height: 18px;
                }

                .custom-pagination {
                    margin-top: 16px;
                }

                .custom-pagination-dot {
                    width: 8px;
                    height: 8px;
                }

                .header {
                    margin-bottom: 50px;
                }
                
            }

            /* -------------------------------------------------- */

            .relative {
                position: relative;
            }

            .custom-slider-controls-container {
                position: relative;
                max-width: 360px;
                margin: 0 auto;
                margin-top: 54px;
            }

            .xslider-section {
                position: relative;
                transform: perspective(1000px) rotateY(3deg);
                z-index: 10;
            }

            @media (min-width: 1000px) {
                .main-content {
                    margin: 50px 0 110px 0;
                }



                .header {
                    margin-top: 30px;
                }
                
            }