:root { --nav-height: 96px; }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      background-color: #faf7f2;
      color: #2e241c;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
      padding-top: var(--nav-height);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #f5f3ef; }
    ::-webkit-scrollbar-thumb { background: #c49a38; border-radius: 3px; }
    #main-nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--nav-height);
      z-index: 1000;
      background: rgba(14, 10, 8, 0.96);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(196,154,56,0.2);
    }
    .nav-link {
      position: relative;
      font-size: .72rem;
      font-weight: 500;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(232,213,163,.75);
      padding: 4px 0;
      text-decoration: none;
    }
    .nav-link.active { color: #c49a38; }
    .nav-link::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -2px;
      height: 1px;
      background: #c49a38;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease;
    }
    .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
    #mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: rgba(26,20,16,.98);
      backdrop-filter: blur(20px);
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.4,0,.2,1);
    }
    #mobile-menu.open { transform: translateX(0); }