.site-header{position:fixed;top:20px;left:0;width:100%;z-index:1000;display:flex;justify-content:center}
.header-wrapper{width:92%;max-width:1150px;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(255,255,255,.68) 45%,rgba(255,255,255,.82));backdrop-filter:blur(30px) saturate(190%);-webkit-backdrop-filter:blur(30px) saturate(190%);border:2px solid rgba(255,255,255,.8);border-radius:999px;box-shadow:0 20px 50px rgba(0,0,0,.15),inset 0 2px 3px rgba(255,255,255,.95),inset 0 -2px 4px rgba(255,255,255,.35),inset 0 0 25px rgba(255,255,255,.45);transition:.3s}

.logo img{height:35px;width:auto;transform:translateY(5px)}
.main-nav ul{display:flex;gap:32px;list-style:none;margin:0;padding:0}
.main-nav a{text-decoration:none;color:#000;font-size:18px;font-weight:bold;transition:.3s}
.main-nav a:hover{color:#38d6ff;text-shadow:0 0 12px rgba(56,214,255,.8)}

.demo-btn{padding:12px 25px;border-radius:999px;text-decoration:none;color:#fff;font-weight:600;background:linear-gradient(135deg,#16c4ff,#0b84ff);border:1px solid rgba(255,255,255,.18);transition:.35s ease}
.demo-btn:hover{background:linear-gradient(135deg,#35d2ff,#2a9cff);border-color:rgba(255,255,255,.3);box-shadow:0 5px 5px rgba(22,196,255,.55),inset 0 0 18px rgba(255,255,255,.18)}

.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:0}
.menu-toggle span{display:block;width:25px;height:2px;margin:5px 0;background:#000;border-radius:5px;transition:.3s}
.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(min-width:1800px){
.header-wrapper{max-width:1500px;height:78px}
.main-nav ul{gap:45px}
.main-nav a{font-size:17px}
.demo-btn{padding:14px 32px;font-size:17px}
}

@media(max-width:1300px){

    .header-wrapper{
        width:94%;
        box-sizing:border-box;
    }

    .main-nav ul{
        gap:14px;
    }

    .main-nav a{
        font-size:16px;
        white-space:nowrap;
    }

    .demo-btn{
        padding:12px 20px;
        font-size:15px;
        white-space:nowrap;
        flex-shrink:0;
    }
}

@media(max-width:900px){
.header-wrapper{height:65px;padding:0 18px}
.logo img{height:32px}
.demo-btn{display:none}
.menu-toggle{display:block}
.main-nav{display:none;position:absolute;top:85px;left:50%;transform:translateX(-50%);width:92%;padding:25px;background:rgba(2,6,20,.92);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(255,255,255,.18);border-radius:25px;box-shadow:0 25px 70px rgba(0,0,0,.65)}
.main-nav ul{flex-direction:column;gap:20px;text-align:center}
.main-nav a{font-size:17px;color:#fff}
.main-nav.active{display:block}
.mobile-demo-item{display:block;margin-top:10px}
.mobile-demo{display:inline-block;padding:12px 30px;border-radius:999px;background:#16c4ff;color:#fff!important;box-shadow:0 0 25px rgba(22,196,255,.45)}
}

@media(max-width:480px){
.site-header{top:12px}
.header-wrapper{width:94%}
}

.mobile-demo-item{display:none}
@media(max-width:900px){.mobile-demo-item{display:block}}

/* =========================================
   MOBILE REQUEST DEMO
========================================= */

.mobile-demo-item > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 24px;

    border-radius: 999px;

    color: #ffffff !important;

    background: linear-gradient(
        135deg,
        rgba(22, 196, 255, 0.82),
        rgba(75, 140, 255, 0.62)
    );

    border: 1px solid rgba(255, 255, 255, 0.2);

    box-shadow:
        0 8px 24px rgba(0, 150, 255, 0.2),
        inset 0 0 15px rgba(255, 255, 255, 0.1);

    text-decoration: none;

    font-size: 15px;
    font-weight: 600;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background 0.3s ease;
}


.mobile-demo-item > a:hover {
    transform: translateY(-2px);

    background: linear-gradient(
        135deg,
        rgba(22, 196, 255, 0.95),
        rgba(75, 140, 255, 0.78)
    );

    box-shadow:
        0 12px 30px rgba(0, 150, 255, 0.3),
        inset 0 0 18px rgba(255, 255, 255, 0.12);
}