:root {
            --primary: #7231ce;
            --accent: #ee9f1e;
            --dark: #1a1a1a;
            --light: #f8f9fa;
        }

        body { font-family: 'Poppins', sans-serif; overflow-x: hidden; color: var(--dark); }

        /* --- Top Bar --- */
        .top-bar { background: var(--dark); color: white; font-size: 0.85rem; padding: 8px 0; }
        .top-bar a { color: #ccc; text-decoration: none; transition: 0.3s; margin-left: 15px; }
        .top-bar a:hover { color: var(--accent); }

        /* --- Sticky Navbar --- */
        .navbar { transition: 0.4s; padding: 9px 0; }
        .navbar.scrolled { background: white; shadow: 0 4px 20px rgba(0,0,0,0.1); padding: 10px 0; }
        .nav-link { font-weight: 600; color: #333 !important; margin: 0 10px; }
        .nav-link:hover { color: var(--primary) !important; }

        /* --- Hero Section (Full Width Image) --- */
        .hero {
            height: 60vh;
            background: linear-gradient(rgba(114, 49, 206, 0.6), rgba(26, 26, 26, 0.8)), 
                        url('https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
            text-align: center;
            color: white;
        }
        .logo{
            max-width: 171px;
        }
        .hero h1 { font-size: 4rem; font-weight: 800; letter-spacing: -1px; }
        .btn-growth {display: flex; align-items: center; background: var(--accent); color: white; padding: 10px 35px; border-radius: 50px; font-weight: 700; border: none; }
        .btn-growth:hover{ background: var(--accent); color: white;}
        .btn-outline { border: 2px solid white; color: white; padding: 13px 35px; border-radius: 50px; font-weight: 700; }
        .btn-outline:hover{border: 2px solid white; color: white;}
        /* --- Service Cards --- */
        .service-card {
            border: none;
            border-bottom: 4px solid transparent;
            transition: 0.4s;
            background: white;
            padding: 40px;
            border-radius: 15px;
        }
        .service-card:hover { 
            transform: translateY(-10px); 
            border-bottom: 4px solid var(--accent);
            box-shadow: 0 20px 40px rgba(114, 49, 206, 0.1);
        }
        .icon-box { color: var(--primary); font-size: 2.5rem; margin-bottom: 20px; }
        /* --- FAQ Accordion --- */
        .accordion-button:not(.collapsed) { background-color: #f3ecff; color: var(--primary); }
        .accordion-button:focus { border-color: var(--primary); box-shadow: none; }

        /* --- Footer --- */
        footer { background: #0f051d; color: #b3b3b3; padding: 80px 0 20px; }
        footer h5 { color: white; font-weight: 700; margin-bottom: 25px; }
        .footer-link { color: #b3b3b3; text-decoration: none; display: block; margin-bottom: 10px; transition: 0.3s; }
        .footer-link:hover { color: var(--accent); padding-left: 5px; }
        
        @media only screen and (max-width: 600px) {
            .hero h1{
                font-size:2rem;
            }
            .btn-growth{
                padding: 10px 13px;
            }
            .btn-outline{
                padding: 13px 20px;
            }
        }