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

:root {
    --bg-white: #ffffff;
    --text-black: #1d1d1f;
    --apple-blue: #0071e3;
    --header-height: 48px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
body { background-color: var(--bg-white); color: var(--text-black); overflow-x: hidden; }
a { text-decoration: none; color: inherit; }

/* --- PREMIUM HEADER --- */
.global-nav {
    position: fixed; top: 0; width: 100%; height: var(--header-height); z-index: 1000;
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0,0,0,0.1); transition: all 0.3s;
}

.nav-container {
    max-width: 1200px; margin: 0 auto; height: 100%; padding: 0 20px;
    display: flex; justify-content: space-between; align-items: center;
}

/* LOGO */
.nav-logo { display: flex; align-items: center; height: 100%; }
.nav-logo img { height: 28px; width: auto; }

/* DESKTOP LINKS (Hidden on Mobile) */
.desktop-links { display: none; gap: 30px; font-size: 12px; font-weight: 500; color: #333; }
.desktop-links a:hover { color: var(--apple-blue); }

/* ICONS RIGHT */
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-icon { font-size: 16px; color: #333; cursor: pointer; }

/* --- MOBILE MENU TOGGLE (2 Lines Animation) --- */
.menu-toggle {
    width: 20px; height: 12px; position: relative; cursor: pointer; z-index: 1100;
    display: flex; flex-direction: column; justify-content: space-between;
}
.bar {
    width: 100%; height: 1.5px; background: #1d1d1f; border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

/* Animation State (X Shape) */
.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}
.menu-toggle.active .bar:nth-child(2) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* --- FULL SCREEN OVERLAY MENU --- */
.mobile-overlay {
    position: fixed; top: var(--header-height); left: 0; width: 100%; height: 0;
    background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
    overflow: hidden; z-index: 1050; transition: height 0.4s ease;
}
.mobile-overlay.open { height: calc(100vh - var(--header-height)); }

.menu-content {
    padding: 40px 30px; display: flex; flex-direction: column; gap: 25px;
    opacity: 0; transform: translateY(-20px); transition: all 0.4s ease 0.1s;
}
.mobile-overlay.open .menu-content { opacity: 1; transform: translateY(0); }

/* Search inside Menu */
.menu-search {
    width: 100%; padding: 12px 15px; border-radius: 10px; background: #f5f5f7;
    border: none; font-size: 16px; color: #333; outline: none;
}
.menu-search::placeholder { color: #888; }

/* Menu Links */
.menu-link { font-size: 24px; font-weight: 600; color: #1d1d1f; border-bottom: 1px solid #f0f0f0; padding-bottom: 15px; }
.menu-link:hover { color: var(--apple-blue); }
.menu-sublink { font-size: 14px; color: #666; margin-top: -10px; }

/* Desktop Media Query */
@media (min-width: 768px) {
    .menu-toggle { display: none; }
    .desktop-links { display: flex; }
    .mobile-overlay { display: none; }
}