/* SCROLL PROGRESS */
.scroll-progress{position:fixed;top:0;left:0;height:1px;background:var(--primary);z-index:99999;transform-origin:left;transform:scaleX(0);width:100%;transition:transform .1s linear}

/* HEADER */
.header{position:fixed;top:0;left:0;width:100%;z-index:100;padding:24px 0;transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.header.scrolled{background:color-mix(in srgb,var(--bg) 75%,transparent);backdrop-filter:blur(12px);border-bottom-color:color-mix(in srgb,var(--border) 40%,transparent)}
.header-inner{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:0 clamp(16px,4vw,64px)}
.header-logo{font-family:'Cinzel Decorative',serif;font-size:clamp(18px,2vw,24px);font-weight:700;letter-spacing:1px;text-transform:uppercase}
.header-nav{display:flex;align-items:center;gap:8px}
.header-nav a{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);padding:8px 16px;border-radius:9999px;transition:color .3s,background .3s;position:relative}
.header-nav a:hover,.header-nav a.active{color:var(--fg);background:var(--surface)}
.header-actions{display:flex;align-items:center;gap:8px}
.header-btn{width:40px;height:40px;border-radius:50%;border:1px solid color-mix(in srgb,var(--border) 50%,transparent);display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 50%,transparent);backdrop-filter:blur(8px);transition:all .3s;font-size:16px}
.header-btn:hover{background:var(--fg);color:var(--bg)}
.mobile-toggle{display:none;width:40px;height:40px;align-items:center;justify-content:center;font-size:20px}
@media(max-width:1024px){
  .header-nav{display:none}
  .mobile-toggle{display:flex}
}
.mobile-menu{display:none;position:fixed;inset:0;z-index:99;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:24px}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:24px;font-weight:600;color:var(--muted);transition:color .3s}
.mobile-menu a:hover{color:var(--fg)}
.mobile-close{position:absolute;top:24px;right:24px;font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center}