@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

header{position:relative;z-index:1000}
.topbar{background:#fff;border-bottom:1px solid #eee}
.topbar-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.topbar .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.brand-note{font-size:12px;line-height:1.45;color:#777}
.brand-logo{display:block;width:min(306px,38vw);flex:0 1 auto;line-height:0}
.brand-logo img{display:block;width:100%;height:auto}
.magazine-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 17px;border-radius:30px;background:#111;color:#fff;text-decoration:none;font-size:12px;font-weight:700;transition:.25s ease}
.magazine-btn:hover{background:#333;transform:translateY(-1px)}
.nav{position:sticky;top:0;z-index:9999;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid #e9e9e9;box-shadow:0 4px 15px rgba(0,0,0,.04)}
.nav .container{width:min(1180px,calc(100% - 40px));min-height:50px;margin:0 auto;display:flex;justify-content:center;align-items:center}
.nav> .container>ul{display:flex;justify-content:center;align-items:center;gap:4px;margin:0;padding:0;list-style:none}
.nav li{position:relative}
.nav li>a{position:relative;display:flex;align-items:center;justify-content:center;padding:16px 20px;color:#555;text-decoration:none;font-size:12px;font-weight:800;letter-spacing:.7px;transition:color .25s ease}
.nav li>a:hover,.nav li>a.active{color:#1677d2}
.nav li>a.active:after{content:"";position:absolute;left:18px;right:18px;bottom:6px;height:3px;border-radius:10px;background:#1677d2}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;display:none;width:360px;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 4px;margin:0;padding:8px;list-style:none;background:#fff;border:1px solid #e5edf3;border-radius:0 0 6px 6px;box-shadow:0 12px 24px rgba(16,45,77,.12);transform:translateX(-50%)}
.nav-dropdown:hover>.nav-dropdown-menu,.nav-dropdown:focus-within>.nav-dropdown-menu{display:grid}
.nav-dropdown-menu li>a{display:block;padding:9px 10px!important;color:#556b7d!important;font-size:11px!important;letter-spacing:0!important;text-transform:none;border-radius:3px}
.nav-dropdown-menu li>a:hover{background:#edf5fb;color:#087bdc!important}
.nav-dropdown>a.active:after{left:14px!important;right:14px!important}
footer{margin-top:20px;background:#082c4e;color:#d8e8f5;padding:38px 0}
footer>.container{width:min(1180px,calc(100% - 40px));margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
.footer-logo{width:170px;padding:4px;background:#fff}
.footer-logo img{display:block;width:100%;height:auto}
footer p{font-size:12px;line-height:1.7;color:#a9c1d5}
footer h4{margin:0 0 13px;color:#fff}
footer a{display:block;margin:8px 0;color:#a9c1d5;text-decoration:none;font-size:12px}
.copyright{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#91abc0;font-size:10px}.visitor-count{display:flex;align-items:center;gap:8px;flex:0 0 auto}.visitor-count>span{font-size:10px;text-transform:uppercase}.visitor-count strong{min-width:54px;padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(255,255,255,.06);color:#fff;font-size:13px;text-align:center}.copyright-text{text-align:right}
@media(max-width:900px){.brand-logo{width:min(250px,38vw)}.topbar .container,.nav .container,footer>.container{width:min(100% - 28px,700px)}.footer-grid{gap:26px}}
@media(max-width:768px){.nav{overflow-x:auto}.nav .container{width:max-content;min-width:100%;justify-content:center}.nav> .container>ul{gap:0}.nav li>a{padding:14px 13px;font-size:11px}.nav li>a.active:after{left:12px;right:12px;bottom:5px}.nav-dropdown-menu{position:fixed;top:50px;left:14px;right:14px;width:auto;max-height:calc(100vh - 64px);overflow-y:auto;transform:none}}
@media(max-width:560px){.brand-logo{width:min(210px,42vw)}.topbar-inner{min-height:78px;gap:12px}.magazine-btn{padding:10px 12px;font-size:10px}.footer-grid{grid-template-columns:1fr;gap:22px}.nav-dropdown-menu{grid-template-columns:1fr}.copyright{align-items:flex-start;flex-direction:column;gap:12px}.copyright-text{text-align:left}}
