/* =================================
           1. BASE STYLES & VARIABLES
           ================================= */
        :root {
            /* Your Premium Dark Theme */
            --background-darker: #051a13;
            --background-dark: #08291e;

            /* High-contrast Accent */
            --accent-color: #F0F9FA;
            /* Vibrant Aqua/Green for CTA */
            --text-primary: #EAEAEA;
            /* Light Gray for main text */
            --text-secondary: #A0A0B0;
            /* Muted Gray for paragraphs */
            --header-link: #C5D8C4;
            /* Slightly lighter color for nav links */
            --radius-default: 12px;
            --font-family: 'Poppins', sans-serif;
        }



        .hero-container {
            width: 100%;
            max-width: 90%;
            margin: 0 auto;
            display: flex;
            align-items: center;
            gap: 5rem;
        }

        /* =================================
           2. SAASFLOW TEMPLATE STYLING
           ================================= */
        .home-hero {
            position: relative;
            background-color: var(--background-darker);
            /* Base gradients */
            background-image:
                radial-gradient(circle at 10% 90%, rgba(8, 41, 30, 0.4) 1%, transparent 70%),
                radial-gradient(circle at 90% 10%, rgba(8, 41, 30, 0.5) 1%, transparent 70%);
            min-height: 95vh;
            padding-bottom: 60px;
            overflow: hidden;
            z-index: 1;
        }

        /* Light Blob 1 */
        .home-hero::before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
            border-radius: 50%;
            top: 20%;
            left: -10%;
            animation: floatLight1 45s ease-in-out infinite alternate,
                pulseGlow 12s ease-in-out infinite;
            z-index: -1000;
        }

        /* Rotating Halo */
        .home-hero .halo {
            position: absolute;
            width: 900px;
            height: 900px;
            border-radius: 50%;
            background: conic-gradient(from 0deg,
                    rgba(255, 255, 255, 0.06),
                    transparent 60%,
                    rgba(255, 255, 255, 0.06));
            top: 50%;
            left: 80%;
            transform: translate(-50%, -50%);
            animation: rotateHalo 120s linear infinite;
            z-index: -1000;
        }

        /* Floating Particles */
        .home-hero .particle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.35);
            animation: floatParticle 25s ease-in-out infinite;
        }

        .home-hero .particle:nth-child(1) {
            top: 20%;
            left: 10%;
            animation-delay: 0s;
        }

        .home-hero .particle:nth-child(2) {
            top: 40%;
            left: 80%;
            animation-delay: 8s;
        }

        .home-hero .particle:nth-child(3) {
            top: 70%;
            left: 30%;
            animation-delay: 15s;
        }

        .home-hero .particle:nth-child(4) {
            top: 55%;
            left: 50%;
            animation-delay: 20s;
        }

        /* Animations */
        @keyframes floatLight1 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(80px, -50px) scale(1.2);
            }

            100% {
                transform: translate(-40px, 60px) scale(0.9);
            }
        }

        @keyframes floatLight2 {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(-60px, 40px) scale(1.15);
            }

            100% {
                transform: translate(70px, -40px) scale(0.95);
            }
        }

        @keyframes pulseGlow {

            0%,
            100% {
                opacity: 0.3;
            }

            50% {
                opacity: 0.6;
            }
        }

        @keyframes rotateHalo {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }

            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }

        @keyframes floatParticle {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.2;
            }

            50% {
                transform: translate(40px, -60px) scale(1.2);
                opacity: 0.6;
            }

            100% {
                transform: translate(-30px, 50px) scale(1);
                opacity: 0.3;
            }
        }




        /* --- Header & Navigation --- */
        #hero-main-header {
            padding: 25px 0;
            

        }

        #hero-main-header .container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--text-primary);
            text-decoration: none;
            display: flex;
            align-items: center;
        }

        #logo img {
            width: 170px;
            height: auto;
            margin: -7% 18%;
        }

        #logo span {
            color: var(--primary-color);
        }

        /* Styling for the small icon next to the logo text */
        #logo i {
            color: var(--accent-color);
            margin-right: 8px;
        }

        .mobile-menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.8rem;
            color: var(--accent-color);
            margin-left: auto; /* push it to the right */
            background: none;
            border: none;
            outline: none;
            transition: transform 0.3s ease;
        }

        /* Optional: icon rotation when active */
        .mobile-menu-toggle.active i {
            transform: rotate(90deg);
            transition: transform 0.3s ease;
        }

        #hero-main-nav {
            flex-grow: 1;
            display: flex;
            /* Allows nav to take up center space */
            justify-content: right;
        }

        #hero-main-nav ul {
            display: flex;
            justify-content: center;
            list-style: none;
            padding: 0;
            margin: 10px;
        }

        a:hover {
            text-decoration: none;
        }

        #hero-main-nav ul li {
            margin: 0 20px;
        }

        .hero-nav-link {
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .hero-nav-link a:hover,
        .hero-nav-link a.active {
            color: var(--primary-blue);
            text-decoration: none;
        }

        .hero-nav-link a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 3px;
            background-color: var(--primary-blue);
            transition: width 0.3s ease;
        }

        .hero-nav-link a:hover::after,
        .hero-nav-link a.active::after {
            width: 100%;
        }

        .get-started-button {
            /* Matches the right-side button from the template */
            background-color: var(--accent-color);
            padding: 10px 20px;
            border-radius: 30px;
            color: var(--background-darker);
            font-weight: 700;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        .hero-btn-ghost {
            background-color: transparent;
            color: var(--accent-color);
            padding: 7px 15px;
            border: 2px solid var(--accent-color);
            border-radius: 30px;
            margin-right: 5px;
        }
        @media screen and (max-width: 768px) {
            .mobile-menu-toggle {
                display: block;
            }

            #hero-main-nav {
                display: none;
                flex-direction: column;
                background: #051a13;
                position: absolute;
                top: 70px;
                left: 15%;
                width: 80%;
                padding: 1rem;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                z-index: 100;
            }

            #hero-main-nav.active {
                display: flex;
            }

            #hero-main-nav ul {
                flex-direction: column;
            }

            #hero-main-nav ul li {
                margin-bottom: 10px;
            }
        }

        .get-started-button:hover {
            background-color: #ffffffca;
        }

        /* --- Hero Content Section --- */
        #hero-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: calc(95vh - 80px);
            gap: 40px;
        }

        .hero-text-area {
            max-width: 55%;
        }

        .trust-badge {
            display: inline-flex;
            align-items: center;
            background-color: rgba(0, 255, 192, 0.1);
            color: var(--accent-color);
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 25px;
            border: 1px solid rgba(0, 255, 192, 0.3);
        }

        .trust-badge i {
            margin-right: 8px;
        }

        .hero-text-area h1 {
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 20px;
            font-weight: 900;
            color: var(--text-primary);
        }

        .hero-text-area .highlight {
            color: var(--accent-color);
        }

        .hero-text-area p {
            font-size: 1.25rem;
            margin-bottom: 40px;
            color: var(--text-secondary);
        }

        /* --- CTAs --- */
        .cta-group {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 50px;
        }

        .hero-button-primary {
            /* The main "Start Free Trial" button */
            background-color: var(--accent-color);
            color: var(--background-darker);
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 10px 20px rgba(0, 255, 192, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .hero-button-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(0, 255, 192, 0.5);
        }

        .button-secondary {
            /* The "Book a Demo" button */
            background: none;
            border: 1px solid var(--text-secondary);
            color: var(--text-primary);
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .button-secondary:hover {
            border-color: var(--accent-color);
            color: var(--accent-color);
        }

        /* --- Stat Bar --- */
        .stat-bar {
            display: flex;
            gap: 40px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-item {
            display: flex;
            flex-direction: column;
        }

        .stat-item strong {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--accent-color);
        }

        .stat-item span {
            font-size: 0.9rem;
            color: var(--text-secondary);
            white-space: nowrap;
        }

        /* --- Mockup Area --- */
        .mockup-area {
            position: relative;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 40px 0;
            background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
            border-radius: var(--radius-default);
            overflow: hidden;
            /* keeps pseudo-shapes inside */
        }

        /* Abstract white shape */
        .mockup-area::before {
            content: "";
            position: absolute;
            width: 600px;
            height: 400px;
            filter: blur(80px);
            border-radius: 50% 40% 60% 50% / 55% 45% 55% 45%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(25deg);
            z-index: 0;
            /* stays behind image */
        }

        .mockup-image-wrapper {
            position: relative;
            border-radius: 16px;
            transform: perspective(1000px) rotateY(0deg) scale(1.0);
            transition: all 0.5s ease;
            max-width: 100%;
            overflow: hidden;
            z-index: 1;
            /* ensures image stays above shape */
        }


        .mockup-image-wrapper img {
            display: block;
            width: 100%;
            height: 100%;
            justify-items: center;
            /* Optional: Add a slight tint to the image to integrate with the dark theme */
            /* filter: saturate(1.1) brightness(0.95); */
        }

        /* --- Responsiveness --- */
        @media (max-width: 1024px) {
            #hero-content {
                flex-direction: column;
                text-align: center;
                min-height: auto;
                padding-top: 50px;
            }

            .hero-text-area {
                max-width: 100%;
                order: 2;
            }

            .mockup-area {
                width: 90%;
                order: 1;
                padding: 20px 0;
                background: none;
                /* Remove background gradient on mobile */
            }

            .hero-text-area h1 {
                font-size: 3rem;
            }

            .cta-group {
                justify-content: center;
                flex-wrap: wrap;
            }

            .stat-bar {
                justify-content: center;
                gap: 20px;
                padding-top: 30px;
            }

            #hero-main-nav {
                display: none;
                /* Mobile menu behavior requires JS */
            }
        }