@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body.menu-open { overflow: hidden; }

.header.hybrid-header {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 18px rgba(15,23,42,.08);
    position: sticky;
    top: 0;
    z-index: 1200;
}
.header.hybrid-header.menu-layer-open { z-index: 6000; }

.hybrid-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.logo { display: flex; align-items: center; min-width: 235px; }
.logo a { text-decoration: none; color: inherit; display: inline-flex; }
.logo h1 { font-family: 'Inter', sans-serif; font-size: clamp(1.05rem, 1.55vw, 1.5rem); font-weight: 800; color: #111827; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.logo .highlight { color: #ff4444; }
.logo a:hover h1 { color: #374151; }

.desktop-nav { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.nav-root { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-item.has-mega::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 16px;
    display: none;
}
.nav-item.has-mega.is-open::after { display: block; }
.nav-link,
.mega-trigger {
    appearance: none;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: #4b5563;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    padding: .58rem .78rem;
    border-radius: 999px;
    font-size: .88rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, transform .16s ease;
}
.nav-link:hover,
.mega-trigger:hover,
.nav-link.is-active,
.mega-trigger.is-active { background: #f3f4ff; color: #111827; }
.nav-link.is-active,
.nav-item.has-mega.is-active > .mega-trigger { background: #111827; color: #fff; }
.mega-trigger::after {
    content: '';
    border-width: 4px 4px 0 4px;
    border-style: solid;
    border-color: #9ca3af transparent transparent transparent;
    transition: transform .16s ease, border-color .16s ease;
}
.nav-item.has-mega.is-open > .mega-trigger { background: #111827; color: #fff; }
.nav-item.has-mega.is-open > .mega-trigger::after,
.nav-item.has-mega.is-active > .mega-trigger::after { border-color: #fff transparent transparent transparent; transform: rotate(180deg); }

.mega-panel {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: max-content;
    min-width: 240px;
    max-width: min(720px, 92vw);
    padding: 1.15rem;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15,23,42,.22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav-item:nth-last-child(-n+3) .mega-panel { left: auto; right: 0; }
.nav-item.has-mega.is-open > .mega-panel { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega-wide .mega-panel { min-width: min(680px, 92vw); }
.mega-col { flex: 1 1 180px; min-width: 170px; }
.mega-title { display: block; color: #111827; font-size: .9rem; font-weight: 800; text-decoration: none; margin: 0 0 .45rem; padding: .25rem .35rem; border-radius: 8px; }
.mega-col a:not(.mega-title) { display: block; color: #4b5563; text-decoration: none; font-size: .86rem; line-height: 1.25; padding: .38rem .45rem; border-radius: 8px; }
.mega-title:hover,
.mega-col a:not(.mega-title):hover { color: #111827; background: #f3f4ff; }
.mega-col a.is-active { background: #fff1f1; color: #b91c1c; font-weight: 800; }

.hybrid-toggle { width: 42px; height: 42px; border-radius: 999px; border: 1px solid rgba(15,23,42,.12); background: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 10px; }
.hybrid-toggle span { display: block; width: 18px; height: 2px; border-radius: 999px; background: #111827; transition: transform .18s ease, opacity .18s ease; }
.hybrid-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hybrid-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hybrid-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-drawer { position: fixed; inset: 0; z-index: 11000; display: flex; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.mobile-drawer.is-open { pointer-events: auto; opacity: 1; }
.drawer-backdrop { flex: 1; background: rgba(15,23,42,.52); }
.drawer-panel { width: min(360px, 88vw); margin-left: auto; background: #fff; padding: 1.15rem; box-shadow: -18px 0 45px rgba(15,23,42,.32); transform: translateX(100%); transition: transform .22s ease-out; overflow-y: auto; }
.mobile-drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.drawer-title { font-weight: 800; font-size: 1rem; color: #111827; }
.drawer-close { position: relative; width: 34px; height: 34px; border-radius: 999px; border: 1px solid rgba(15,23,42,.12); background: #fff; cursor: pointer; }
.drawer-close span { position: absolute; left: 9px; top: 15px; width: 14px; height: 2px; border-radius: 999px; background: #111827; }
.drawer-close span:first-child { transform: rotate(45deg); }
.drawer-close span:last-child { transform: rotate(-45deg); }
.mobile-nav { display: flex; flex-direction: column; gap: .55rem; }
.m-acc { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; background: #fff; }
.m-acc-btn { width: 100%; border: 0; background: #fff; padding: .88rem .95rem; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: #111827; font-family: 'Inter', sans-serif; font-weight: 800; }
.m-acc-main { display: inline-flex; align-items: center; gap: .7rem; }
.m-acc-icon { color: #ff4444; width: 20px; text-align: center; }
.m-acc-arrow { transition: transform .16s ease; color: #64748b; }
.m-acc.is-open .m-acc-arrow { transform: rotate(180deg); }
.m-acc-panel { display: none; padding: .25rem .75rem .8rem 2.85rem; background: #f8fafc; }
.m-acc.is-open .m-acc-panel { display: block; }
.m-acc-panel a,
.mobile-direct { display: flex; align-items: center; gap: .5rem; color: #374151; text-decoration: none; font-size: .92rem; padding: .55rem .35rem; border-radius: 8px; }
.m-acc-panel a:hover,
.mobile-direct:hover { background: #eef2ff; color: #111827; }
.m-acc-panel a.is-active,
.mobile-direct.is-active { background: #111827; color: #fff; font-weight: 800; padding-left: .7rem; }
.m-section-label { display: block; margin: .65rem 0 .2rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.mobile-direct { border: 1px solid #e5e7eb; border-radius: 14px; padding: .85rem .95rem; font-weight: 800; color: #111827; }

@media (max-width: 1180px) {
    .hybrid-inner { padding: .85rem 1.15rem; }
    .nav-root { gap: .15rem; }
    .nav-link, .mega-trigger { font-size: .82rem; padding: .54rem .62rem; }
    .logo { min-width: 210px; }
}
@media (max-width: 1024px) {
    .desktop-nav { display: none; }
    .hybrid-toggle { display: flex; }
    .hybrid-inner { justify-content: space-between; }
    .logo { min-width: 0; }
}
@media (max-width: 520px) {
    .hybrid-inner { padding: .75rem .9rem; }
    .logo h1 { max-width: 230px; }
}