/* Base styles for light mode */
        body {
            font-family: 'Poppins', sans-serif;
            font-family: 'Josefin Sans', sans-serif;
            /* font-family: 'Laila', sans-serif; */
            background-color: #fdfdfd;
            color: #333;
            transition: background-color 0.3s, color 0.3s;
            overflow-x: clip; /* Prevent AOS horizontal overflow without creating a second vertical scroller. */
        }
        section {
            overflow-x: clip;
        }
        .text-custom-yellow { color: #ffb400; }
        .bg-custom-yellow { background-color: #ffb400; }
        .border-custom-yellow { border-color: #ffb400; }
        .bg-custom-dark-card { background-color: #f5f5f5; }
        .header-bg { background-color: rgba(253, 253, 253, 0.8); }

        /* Dark mode styles */
        .dark body {
            background-color: #111111;
            color: #d1d5db; /* A light gray for text */
        }
        .dark .bg-custom-dark-card { background-color: #1a1a1a; }
        .dark .text-white { color: #fff; }
        .dark .text-slate-400 { color: #94a3b8; }
        .dark .border-slate-700 { border-color: #334155; }
        .dark .header-bg { background-color: rgba(17, 17, 17, 0.8); }
        .dark .form-input {
            background-color: #1a1a1a;
            border-color: #334155;
            color: #d1d5db;
        }
        .dark .form-input:focus {
            ring-color: #ffb400;
        }

        /* --- GRADIENT STYLES --- */
        .gradient-text {
            background: linear-gradient(90deg, #ffb400, #ff7e5f);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }
        .gradient-button {
            background-image: linear-gradient(to right, #ffb400 0%, #ff7e5f 51%, #ffb400 100%);
            transition: 0.5s;
            background-size: 200% auto;
        }
        .gradient-button:hover {
            background-position: right center;
        }
        .gradient-border-pink::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ec4899, #f87171); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .gradient-border-green::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #22c55e, #84cc16); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .gradient-border-yellow::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #eab308, #ffb400); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .gradient-border-purple::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #a855f7, #d946ef); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .gradient-border-red::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #ef4444, #f97316); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
        .gradient-border-blue::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #3b82f6, #6366f1); border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }


        /* --- APP PROJECT MOCKUPS --- */
        .billway-mockup-stage,
        .bitmonie-mockup-stage {
            position: relative;
            height: 12rem;
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 45%, rgba(255, 180, 0, 0.18), transparent 55%),
                #f5f5f5;
        }
        .dark .billway-mockup-stage,
        .dark .bitmonie-mockup-stage {
            background:
                radial-gradient(circle at 50% 45%, rgba(255, 180, 0, 0.14), transparent 55%),
                #1a1a1a;
        }
        .billway-phone,
        .bitmonie-phone {
            position: absolute;
            bottom: -0.65rem;
            width: 5.25rem;
            height: 10.1rem;
            overflow: hidden;
            border: 0.34rem solid #111111;
            border-radius: 1.2rem;
            background: #111111;
            box-shadow: 0 1.2rem 2.2rem rgba(0, 0, 0, 0.28);
        }
        .billway-phone::before,
        .bitmonie-phone::before {
            content: '';
            position: absolute;
            top: 0.35rem;
            left: 50%;
            z-index: 2;
            width: 2.2rem;
            height: 0.45rem;
            transform: translateX(-50%);
            border-radius: 999px;
            background: #111111;
        }
        .billway-phone img,
        .bitmonie-phone img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }
        .billway-phone-main,
        .bitmonie-phone-main {
            left: 50%;
            z-index: 3;
            width: 6.25rem;
            height: 11.4rem;
            bottom: -0.45rem;
            transform: translateX(-50%);
        }
        .billway-phone-side,
        .bitmonie-phone-side {
            z-index: 1;
            opacity: 0.9;
            filter: saturate(0.95);
        }
        .billway-phone-left,
        .bitmonie-phone-left {
            left: calc(50% - 7.05rem);
            transform: rotate(-9deg);
        }
        .billway-phone-right,
        .bitmonie-phone-right {
            right: calc(50% - 7.05rem);
            transform: rotate(9deg);
        }

        .atompay-mockup-stage,
        .wakaevent-mockup-stage,
        .veritas-mockup-stage,
        .africanbuyer-mockup-stage,
        .royalthree-mockup-stage {
            position: relative;
            height: 12rem;
            overflow: hidden;
            background:
                radial-gradient(circle at 50% 45%, rgba(255, 180, 0, 0.18), transparent 55%),
                #f5f5f5;
        }
        .dark .atompay-mockup-stage,
        .dark .wakaevent-mockup-stage,
        .dark .veritas-mockup-stage,
        .dark .africanbuyer-mockup-stage,
        .dark .royalthree-mockup-stage {
            background:
                radial-gradient(circle at 50% 45%, rgba(255, 180, 0, 0.14), transparent 55%),
                #1a1a1a;
        }
        .atompay-screen,
        .wakaevent-screen,
        .veritas-screen,
        .africanbuyer-screen,
        .royalthree-screen {
            position: absolute;
            bottom: -0.85rem;
            width: 5.8rem;
            height: 10.8rem;
            overflow: hidden;
            border: 0.28rem solid #111111;
            border-radius: 1rem;
            background: #111111;
            box-shadow: 0 1.2rem 2.2rem rgba(0, 0, 0, 0.25);
        }
        .atompay-screen::before,
        .wakaevent-screen::before,
        .veritas-screen::before,
        .africanbuyer-screen::before,
        .royalthree-screen::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 2;
            height: 0.55rem;
            background: #111111;
        }
        .atompay-screen img,
        .wakaevent-screen img,
        .veritas-screen img,
        .africanbuyer-screen img,
        .royalthree-screen img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            display: block;
        }
        .atompay-screen-main,
        .wakaevent-screen-main,
        .veritas-screen-main,
        .africanbuyer-screen-main,
        .royalthree-screen-main {
            left: 50%;
            z-index: 3;
            width: 6.9rem;
            height: 11.8rem;
            bottom: -0.6rem;
            transform: translateX(-50%);
        }
        .atompay-screen-side,
        .wakaevent-screen-side,
        .veritas-screen-side,
        .africanbuyer-screen-side,
        .royalthree-screen-side {
            z-index: 1;
            opacity: 0.88;
            filter: saturate(0.95);
        }
        .atompay-screen-left,
        .wakaevent-screen-left,
        .veritas-screen-left,
        .africanbuyer-screen-left,
        .royalthree-screen-left {
            left: calc(50% - 7.4rem);
            transform: rotate(-7deg);
        }
        .atompay-screen-right,
        .wakaevent-screen-right,
        .veritas-screen-right,
        .africanbuyer-screen-right,
        .royalthree-screen-right {
            right: calc(50% - 7.4rem);
            transform: rotate(7deg);
        }

        /* --- NEW MOBILE MENU STYLES --- */
        .mobile-menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(17, 17, 17, 0.98);
            z-index: 100;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }
        .mobile-menu-overlay.open {
            opacity: 1;
            visibility: visible;
        }
        .mobile-menu-overlay .close-btn {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            font-size: 2.5rem;
            color: white;
            cursor: pointer;
            line-height: 1;
        }
        .mobile-menu-overlay a {
            font-size: 2rem;
            font-weight: 600;
            color: white;
            margin: 0.75rem 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease;
        }
         .mobile-menu-overlay a:hover {
            color: #ffb400;
        }
        .mobile-menu-overlay.open a {
            opacity: 1;
            transform: translateY(0);
        }
        .mobile-menu-overlay.open a:nth-child(2) { transition-delay: 0.1s; }
        .mobile-menu-overlay.open a:nth-child(3) { transition-delay: 0.2s; }
        .mobile-menu-overlay.open a:nth-child(4) { transition-delay: 0.3s; }
        .mobile-menu-overlay.open a:nth-child(5) { transition-delay: 0.4s; }
        .mobile-menu-overlay.open a:nth-child(6) { transition-delay: 0.5s; }
        .mobile-menu-overlay.open a:nth-child(7) { transition-delay: 0.6s; }
        .mobile-menu-overlay.open button { transition-delay: 0.7s; } /* Delay for mobile theme toggle */
        
        .mobile-menu-overlay a:nth-child(2) { transition-delay: 0.3s; }
        .mobile-menu-overlay a:nth-child(3) { transition-delay: 0.25s; }
        .mobile-menu-overlay a:nth-child(4) { transition-delay: 0.2s; }
        .mobile-menu-overlay a:nth-child(5) { transition-delay: 0.15s; }
        .mobile-menu-overlay a:nth-child(6) { transition-delay: 0.1s; }
        .mobile-menu-overlay a:nth-child(7) { transition-delay: 0.05s; }

        /* --- HERO IMAGE FLOAT ANIMATION --- */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }

        /* --- SCROLL TO TOP STYLES --- */
        #scroll-to-top {
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }