/* ========================
   BASE STYLES
   ======================== */
@font-face {font-family: 'Inter';src: url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');font-display: swap; }
#particles { position: absolute; inset: 0; } /* PARTICLE CONTAINER */
#fx-canvas { position: fixed; inset: 0; z-index: -1; filter: blur(0.2px) saturate(1.1); } /* BACKGROUND PARTICLE CANVAS */

.topbar-spacer { height: 10px; } /* SPACER TO PUSH CONTENT DOWN */
.spacer { flex: 0.1; } /* FLEX SPACER */

:root { --bg:#f6f7fb; --card:#fff; --muted:#6b7280; --accent:#0f6b88; --radius:14px; --max:1050px; --gap:20px; color-scheme: light; } /* COLOR & SIZE VARIABLES */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #0f172a; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* BASE HTML BODY */

.topbar { display:flex; align-items:center; justify-content:center; gap:150px; padding:14px 10px; position:sticky; top:0; backdrop-filter:blur(6px); z-index:20; } /* DESKTOP TOPBAR */
.brand { display:flex; align-items:center; gap:15px; text-decoration:none; color:inherit; } /* BRAND LINK */
.logo { height:48px; width:48px; } /* LOGO SIZE */
.logo img { width:100%; height:100%; object-fit:cover; transition:.25s; } /* LOGO IMAGE */
.brand-title { font-weight:700; margin:0; font-size:2rem; } /* BRAND TITLE */
nav.nav { display:flex; gap:20px; align-items:center; } /* NAVIGATION */
.btn { border:0; background:transparent; padding:8px 12px; border-radius:10px; color:var(--muted); font-weight:600; font-size:.95rem; cursor:pointer; text-decoration:none; } /* BUTTON */
.search input { padding:8px 12px; border-radius:999px; border:1px solid rgba(15,107,136,0.08); min-width:180px; } /* SEARCH INPUT */
.dropdown { position:relative; display:inline-block; } /* DROPDOWN */
.dropdown .menu { opacity:0; visibility:hidden; transform:translateY(10px); transition:all .28s cubic-bezier(.2,.9,.2,1); position:absolute; top:calc(100% + 8px); right:0; min-width:220px; background:var(--card); backdrop-filter:blur(18px) saturate(1.1); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,0.08); padding:8px 0; border:1px solid rgba(15,107,136,0.08); z-index:1000; } /* DROPDOWN MENU */
.dropdown.open .menu, .dropdown:hover .menu { opacity:1; visibility:visible; transform:translateY(0); animation:fadeUp .28s cubic-bezier(.2,.9,.2,1); } /* OPEN MENU ANIMATION */
.dropdown .menu a { display:block; padding:12px 14px; font-weight:600; color:#111827; text-decoration:none; border-radius:6px; margin:2px 6px; transition:background .18s, transform .12s; } /* DROPDOWN LINKS */
.dropdown .menu a:hover { background:rgba(15,107,136,0.08); transform:translateX(4px); } /* LINK HOVER */
@keyframes fadeUp { 0%{opacity:0; transform:translateY(8px);} 100%{opacity:1; transform:translateY(0);} } /* FADE-UP ANIMATION */

.footer { background: var(--card); padding: 16px 24px; text-align: center; border-top: 1px solid rgba(15, 23, 42, 0.08); border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04); font-size: .95rem; color: var(--muted); }

/* ========================
   MOBILE TOPBAR & SIDEBAR
   ======================== */
*, *::before, *::after { box-sizing: border-box; } /* BOX SIZING */
html, body { width:100%; margin:0; padding:0; overflow-x:hidden; } /* NO HORIZONTAL SCROLL */
a { text-decoration:none; color:inherit; } /* LINKS */

@media (max-width: 768px) { .topbar { display:none !important; } .topbar-mobile { display:flex !important; } } /* MOBILE HIDE DESKTOP TOPBAR */
@media (min-width: 769px) { .topbar { display:flex !important; } .topbar-mobile { display:none !important; } } /* DESKTOP SHOW TOPBAR */

.topbar-mobile { position:fixed; top:0; left:0; right:0; z-index:1200; display:flex; align-items:center; gap:8px; padding:8px 12px; width:100%; background: rgba(255,255,255,0.06); backdrop-filter: blur(10px) saturate(1.05); border-bottom:1px solid rgba(255,255,255,0.04); } /* MOBILE TOPBAR */

.brand { display:flex; align-items:center; gap:8px; color:var(--text,#0f172a); } /* MOBILE BRAND */
.brand-logo { height:36px; width:36px; object-fit:cover; border-radius:8px; } /* BRAND LOGO */
.brand-title { font-weight:700; font-size:16px; display:inline-block; } /* BRAND TITLE MOBILE */
.flex-spacer { flex:1 1 auto; min-width:8px; } /* FLEX SPACER MOBILE */

.search-form { flex:0 1 40%; display:flex; align-items:center; max-width:420px; min-width:120px; } /* SEARCH FORM MOBILE */
.search-form input { width:100%; padding:8px 10px; border-radius:12px; border:1px solid rgba(15,23,42,0.08); font-weight:600; font-size:14px; background: rgba(255,255,255,0.85); outline:none; } /* SEARCH INPUT MOBILE */
.search-form input::placeholder { color:#64748b; font-weight:500; } /* SEARCH PLACEHOLDER */

.hamburger { flex:0 0 auto; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.06); padding:8px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; } /* HAMBURGER */
.hamburger svg { color:#111; } /* HAMBURGER ICON */

.mobile-sidebar { position:fixed; top:0; right:-100%; width:84%; max-width:360px; height:100vh; background: rgba(255,255,255,0.98); backdrop-filter:blur(12px); box-shadow:-12px 0 32px rgba(0,0,0,0.25); padding:18px; transition:right 320ms cubic-bezier(.2,.9,.26,1); z-index:1400; display:flex; flex-direction:column; gap:14px; overflow-y:auto; } /* SIDEBAR */
.mobile-sidebar[aria-hidden="false"] { right:0; } /* SIDEBAR OPEN */

.sidebar-header { display:flex; align-items:center; justify-content:space-between; gap:12px; } /* SIDEBAR HEADER */
.sidebar-brand { display:flex; align-items:center; gap:8px; } /* SIDEBAR BRAND */
.close-btn { background:none; border:none; font-size:28px; line-height:1; cursor:pointer; } /* CLOSE BUTTON */

.sidebar-nav { display:flex; flex-direction:column; gap:10px; padding-top:6px; } /* NAV LINKS */
.sidebar-nav a { padding:10px 6px; border-radius:8px; color:#111; font-weight:700; } /* SIDEBAR LINK */
.sidebar-nav a:hover { background:rgba(0,0,0,0.04); } /* HOVER LINK */

.submenu { display:flex; flex-direction:column; gap:6px; } /* SUBMENU CONTAINER */
.submenu-toggle { background:none; border:none; font-weight:700; text-align:left; padding:10px 6px; cursor:pointer; } /* SUBMENU BUTTON */
.submenu-list { list-style:none; margin:0; padding-left:12px; display:flex; flex-direction:column; gap:8px; } /* SUBMENU LIST */
.submenu-list a { font-weight:600; padding:6px 6px; } /* SUBMENU LINK */

.mobile-sidebar-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.32); opacity:0; visibility:hidden; transition:opacity 220ms; z-index:1300; } /* OVERLAY */
.mobile-sidebar-overlay.active { opacity:1; visibility:visible; } /* ACTIVE OVERLAY */