.xpl-site-header, .xpl-site-footer { font-family: -apple-system, BlinkMacSystemFont, "SF Pro SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; }
.xpl-site-header *, .xpl-site-footer * { box-sizing: border-box; }
.xpl-site-header a, .xpl-site-footer a { color: inherit; text-decoration: none; }
.xpl-site-header { position: sticky; z-index: 1000; top: 0; height: 52px; border-bottom: 1px solid rgba(0, 0, 0, .08); background: rgba(250, 250, 252, .9); backdrop-filter: saturate(180%) blur(20px); }
.xpl-header-inner { position: relative; display: flex; align-items: center; width: min(1200px, calc(100% - 40px)); height: 100%; margin: 0 auto; }
.xpl-brand { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; color: #1d1d1f; font-size: 16px; font-weight: 650; letter-spacing: -.02em; }
.xpl-brand-mark { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; color: #fff; background: #111; font-size: 14px; font-weight: 750; }
.xpl-primary-navigation { margin: 0 auto; }
.xpl-nav-list { display: flex; align-items: stretch; gap: 3px; height: 52px; margin: 0; padding: 0; list-style: none; }
.xpl-nav-item { position: relative; display: flex; align-items: center; }
.xpl-nav-item > a { display: flex; align-items: center; height: 100%; padding: 0 13px; color: #333336; font-size: 12px; white-space: nowrap; }
.xpl-nav-panel { position: absolute; top: 52px; left: 50%; width: 250px; padding: 22px 24px 24px; border: 1px solid rgba(0, 0, 0, .07); border-radius: 0 0 20px 20px; background: rgba(255, 255, 255, .98); box-shadow: 0 22px 50px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.xpl-nav-panel-wide { width: 440px; }
.xpl-nav-panel-right { right: 0; left: auto; transform: translate(0, -8px); }
.xpl-nav-item:hover .xpl-nav-panel, .xpl-nav-item:focus-within .xpl-nav-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.xpl-nav-item:hover .xpl-nav-panel-right, .xpl-nav-item:focus-within .xpl-nav-panel-right { transform: translate(0, 0); }
.xpl-nav-panel p { margin: 0 0 13px; color: #86868b; font-size: 11px; font-weight: 650; letter-spacing: .08em; }
.xpl-nav-panel ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.xpl-nav-panel-wide ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.xpl-nav-panel a { display: block; padding: 7px 0; color: #1d1d1f; font-size: 15px; font-weight: 560; }
.xpl-nav-panel a:hover, .xpl-nav-panel a:focus-visible { color: #0071e3; }
.xpl-header-cta { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; color: #fff !important; background: #0071e3; font-size: 12px; }
.xpl-menu-toggle { position: relative; display: none; width: 36px; height: 36px; margin-left: auto; padding: 0; border: 0; background: transparent; cursor: pointer; }
.xpl-menu-toggle span { position: absolute; left: 9px; width: 18px; height: 1px; background: #1d1d1f; transition: transform .2s ease, top .2s ease; }
.xpl-menu-toggle span:first-child { top: 14px; }
.xpl-menu-toggle span:last-child { top: 21px; }
.xpl-menu-toggle[aria-expanded="true"] span:first-child { top: 18px; transform: rotate(45deg); }
.xpl-menu-toggle[aria-expanded="true"] span:last-child { top: 18px; transform: rotate(-45deg); }

.xpl-site-footer { padding: 58px 24px 24px; color: #d2d2d7; background: #111; }
.xpl-footer-inner { width: min(1200px, 100%); margin: 0 auto; }
.xpl-footer-brand .xpl-brand { color: #fff; }
.xpl-footer-brand .xpl-brand-mark { color: #111; background: #fff; }
.xpl-footer-brand p { max-width: 420px; margin: 18px 0 0; color: #86868b; font-size: 14px; line-height: 1.65; }
.xpl-footer-navigation { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px; margin-top: 52px; padding-top: 38px; border-top: 1px solid #333; }
.xpl-footer-navigation section { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.xpl-footer-navigation h2 { margin: 0 0 5px; color: #f5f5f7; font-size: 13px; }
.xpl-footer-navigation a { color: #a1a1a6; font-size: 12px; line-height: 1.35; }
.xpl-footer-navigation a:hover, .xpl-footer-navigation a:focus-visible { color: #fff; text-decoration: underline; }
.xpl-footer-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-top: 20px; border-top: 1px solid #333; color: #6e6e73; font-size: 12px; }
.xpl-footer-bottom span:last-child { display: flex; gap: 20px; }

@media (max-width: 1040px) {
    body.xpl-nav-open { overflow: hidden; }
    .xpl-header-inner { width: calc(100% - 28px); }
    .xpl-primary-navigation { position: fixed; top: 52px; right: 0; bottom: 0; left: 0; display: none; overflow-y: auto; margin: 0; padding: 18px 24px 60px; background: rgba(250, 250, 252, .99); }
    .xpl-primary-navigation.is-open { display: block; }
    .xpl-nav-list { display: block; height: auto; }
    .xpl-nav-item { display: block; padding: 17px 0; border-bottom: 1px solid rgba(0, 0, 0, .12); }
    .xpl-nav-item > a { height: auto; padding: 0; font-size: 26px; font-weight: 650; letter-spacing: -.035em; }
    .xpl-nav-panel, .xpl-nav-panel-right, .xpl-nav-panel-wide { position: static; width: auto; padding: 14px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
    .xpl-nav-item:hover .xpl-nav-panel, .xpl-nav-item:focus-within .xpl-nav-panel, .xpl-nav-item:hover .xpl-nav-panel-right, .xpl-nav-item:focus-within .xpl-nav-panel-right { transform: none; }
    .xpl-nav-panel p { display: none; }
    .xpl-nav-panel-wide ul { grid-template-columns: 1fr; }
    .xpl-nav-panel a { padding: 5px 0; color: #6e6e73; font-size: 15px; font-weight: 450; }
    .xpl-menu-toggle { display: block; }
    .xpl-header-cta { margin-left: 8px; }
    .xpl-footer-navigation { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .xpl-site-header { height: 48px; }
    .xpl-primary-navigation { top: 48px; }
    .xpl-header-cta { display: none; }
    .xpl-footer-navigation { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
    .xpl-footer-bottom { flex-direction: column; }
}