:root{
--bg:#fff;
--accent:#0b74de;
--muted:#555;
--shadow: rgba(11, 116, 222, .12);
}
        body {
            font-family: "Cambo", sans-serif;
            background-color: #ffffff;
            overflow-x: hidden;
        }

.site-header{
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(6px);
            border-bottom: 1px solid rgba(6, 30, 85, 0.1);
            position: sticky;
            top: 0;
            z-index: 40;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        }
.nav-wrap{max-width:1100px; margin:0 auto; padding:0.6rem 1rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}


.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:inherit}
.brand .logo{width:36px; height:36px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#6fb3ff); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:700}
.brand .title{font-weight:600}


nav ul{list-style:none; margin:0; padding:0; display:flex; gap:.2rem; align-items:center}
nav li{position:relative}
nav > ul > li > a{display:block; padding:.6rem .9rem; text-decoration:none; color:var(--muted); border-radius:8px}
nav > ul > li > a:hover, nav > ul > li > a.active{color:var(--accent); background:#f6fbff}


.submenu{position:absolute; left:0; top:calc(100% + 6px); min-width:220px; background:#fff; box-shadow:0 8px 20px var(--shadow); border-radius:8px; padding:.4rem 0; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .18s ease; z-index:30}
.submenu a{display:block; padding:.6rem .9rem; color:var(--muted); text-decoration:none}
.submenu a:hover{background:#f2f8ff; color:var(--accent)}


@media (min-width:768px){
.mobile-toggle{display:none}
.submenu-trigger:hover > .submenu{opacity:1; visibility:visible; transform:none}
}
        .mobile-menu-button {
            display: inline-block;
            padding: 10px;
            border-radius: 12px;
            color: #061e55;
            cursor: pointer;
            border: none;
            background: none;
            transition: all 0.3s ease;
        }
        .mobile-menu-button:hover {
            background: #fef3c7;
            transform: scale(1.05);
        }
        @media(min-width:768px) {
            .mobile-menu-button {
                display: none;
            }
        }


.mobile-toggle{background:transparent; border:0; display:inline-flex; align-items:center; gap:.5rem; padding:.4rem; cursor:pointer}
.mobile-toggle .bar{width:22px; height:2px; background:#111; display:block; border-radius:2px}
.mobile-toggle:focus{outline:2px solid #cfe6ff}


.mobile-menu{position:absolute; inset:58px 1rem auto 1rem; background:#fff; border-radius:10px; box-shadow:0 20px 40px rgba(0,0,0,.06); overflow:hidden; max-height:0; transition:max-height .25s ease; z-index:40}
.mobile-menu.open{max-height:600px}
.mobile-menu ul{display:flex; flex-direction:column; gap:0}
.mobile-menu a{padding:.9rem 1rem; border-bottom:1px solid #f1f5f9}


.mobile-submenu{display:none; flex-direction:column; padding-left:.6rem}
.mobile-submenu.open{display:flex}
.submenu-toggle{display:flex; justify-content:space-between; align-items:center}


@media (max-width:767px){ nav.desktop{display:none} }
@media (min-width:768px){ nav.mobile{display:none} .mobile-menu{display:none} }


.cta{background:var(--accent); color:#fff; padding:.5rem .75rem; border-radius:8px; text-decoration:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}