html {
        scroll-behavior: smooth;
        scroll-padding-top: 74px;
    }

    @media(max-width:900px) {
        html {
            scroll-padding-top: 66px;
        }
    }

    @media(max-width:560px) {
        html {
            scroll-padding-top: 60px;
        }
    }

    .grad-hero {
        background: radial-gradient(1200px 500px at 10% -10%, rgba(255, 77, 109, .35), transparent 50%), radial-gradient(900px 450px at 90% 20%, rgba(14, 165, 233, .35), transparent 55%), radial-gradient(1200px 550px at 30% 110%, rgba(138, 75, 255, .30), transparent 55%), linear-gradient(160deg, #11162a 0%, #0b0f1a 60%);
    }

    .grad-light {
        background: linear-gradient(180deg, #fff 0%, #f6f9ff 100%);
    }

    .grad-soft {
        background: linear-gradient(180deg, #fef6ff 0%, #ecf8ff 100%);
    }

    .grad-mango {
        background: linear-gradient(180deg, rgba(245, 158, 11, .12), rgba(6, 214, 160, .12));
    }

    .grad-faq {
        background: linear-gradient(180deg, rgba(138, 75, 255, .15), rgba(14, 165, 233, .15));
    }

    .grad-visual {
        background: linear-gradient(180deg, #071427 0%, #071025 60%);
    }

    .grad-cta {
        background: linear-gradient(180deg, #0b0f1a 0%, #11162a 100%);
    }

    .grad-overview {
        background: linear-gradient(180deg, #f8fbff 0%, #f1f8ff 100%);
    }

    .grad-text-brand {
        background: linear-gradient(90deg, #111, #0ea5e9 50%, #8a4bff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-text-hero {
        background: linear-gradient(90deg, #0ea5e9, #ff4d6d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-text-step {
        background: linear-gradient(90deg, #4f46e5, #06d6a0);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-text-prop {
        background: linear-gradient(90deg, #0ea5e9, #8a4bff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-text-faq {
        background: linear-gradient(90deg, #ff4d6d, #0ea5e9);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-text-form {
        background: linear-gradient(90deg, #172554, #0ea5e9 60%, #8a4bff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .grad-btn {
        background: linear-gradient(135deg, #0ea5e9, #8a4bff);
    }

    .grad-btn-cta {
        background: linear-gradient(135deg, #f59e0b, #ff4d6d);
    }

    .grad-btn-form {
        background: linear-gradient(90deg, #f59e0b, #ff4d6d 80%);
    }

    .grid-lines {
        background: linear-gradient(transparent 39px, rgba(255, 255, 255, .2) 40px, transparent 41px) 0 0/100% 40px, linear-gradient(90deg, transparent 39px, rgba(255, 255, 255, .2) 40px, transparent 41px) 0 0/40px 100%;
    }

    .dropdown-menu {
        display: none;
    }

    .dropdown-menu.show {
        display: block;
    }

    /* Mobile Menu - Fixed Styles */
    .mobile-menu {
        position: fixed;
        top: 74px;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 300px;
        background-color: #ffffff;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 9999;
        box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }

    @media (max-width: 768px) {
        .mobile-menu {
            top: 66px;
        }
    }

    @media (max-width: 560px) {
        .mobile-menu {
            top: 60px;
        }
    }

    .mobile-menu.open {
        transform: translateX(0);
    }

    /* Overlay when menu is open */
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .mobile-overlay.open {
        opacity: 1;
        visibility: visible;
    }

    .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease;
    }

    .faq-item.active .faq-a {
        max-height: 260px;
    }

    .carousel {
        display: none;
    }

    .carousel.open {
        display: flex;
    }

    .iti {
        width: 100%;
        z-index: 12010 !important;
    }

    .iti input {
        padding-left: 80px !important;
        height: 48px;
        border: 1px solid #e7ecf3;
        background: #fff;
        border-radius: 10px;
        width: 100%;
    }

    .iti input:focus {
        border-color: rgba(14, 165, 233, .45);
        outline: none;
    }

    .iti--container {
        z-index: 12010 !important;
    }

    /* Language dropdown style */
    .nav-lang-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        cursor: pointer;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid #e8edf6;
        background: #fff;
        transition: background .18s, color .18s, transform .18s;
    }

    .nav-lang-btn:hover {
        background: steelblue;
        /* blue */
        border-color: #78c8ee;
        /* light blue border */
        transform: translateY(-2px);
    }

    .nav-lang-btn:hover,
    .nav-lang-btn:hover * {
        color: #ffffff !important;
        /* keep text/icons white on hover */
    }

    .dropdown-menu {
        position: absolute;
        top: 44px;
        right: 0;
        min-width: 220px;
        max-height: 360px;
        overflow: auto;
        background: #fff;
        border: 1px solid #e7ecf3;
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
        display: none;
        z-index: 12000;
    }

    .dropdown-menu.show {
        display: block;
    }

    .dropdown-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        font-weight: 700;
        cursor: pointer;
        color: #0d1222;
    }

    .dropdown-item img {
        width: 20px;
        height: 14px;
        border-radius: 2px;
    }

    .dropdown-item:hover {
        background: #f3f6fb;
    }

    /* FAQ: force question text to black */
    .faq-q span,
    .faq-q .grad-text-faq {
        color: #000 !important;
        background: none !important;
        -webkit-background-clip: initial !important;
        -webkit-text-fill-color: initial !important;
    }

    /* Hamburger button styling */
    #hamburger {
        display: none;
        cursor: pointer;
        padding: 8px;
        z-index: 10000;
    }

    @media (max-width: 768px) {
        #hamburger {
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }