/* ---------------- TOP BAR ---------------- */

    .topbar {
      position: fixed;
      z-index: 30;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 72px;
      padding: 0 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      pointer-events: none;
      background: transparent;
      border-bottom: 1px solid transparent;
      box-shadow: none;
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
      transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  backdrop-filter 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                  height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .topbar.is-scrolled {
      background: rgba(1, 9, 24, 0.94);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.85);
      height: 66px;
      pointer-events: auto;
    }

    .topbar.is-scrolled::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1.5px;
      background: linear-gradient(90deg, transparent 0%, rgba(84, 232, 255, 0.35) 15%, rgba(0, 225, 255, 0.85) 50%, rgba(84, 232, 255, 0.35) 85%, transparent 100%);
      box-shadow: 0 0 10px rgba(0, 225, 255, 0.6);
      pointer-events: none;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 13px;
      pointer-events: auto;
    }

    .brand-mark {
      position: relative;
      display: grid;
      place-items: center;
      width: 51px;
      height: 45px;
      color: var(--navy);
      background: var(--ice);
      font-family: Inter, sans-serif;
      font-weight: 900;
      clip-path: polygon(10% 0, 100% 6%, 86% 91%, 0 100%);
      transform: rotate(-5deg);
      box-shadow: 8px 7px 0 rgba(0, 119, 255, .5);
    }

    .brand-mark-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      clip-path: polygon(10% 0, 100% 6%, 86% 91%, 0 100%);
      display: block;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      width: 15px;
      height: 4px;
      right: -8px;
      bottom: 4px;
      background: var(--cyan);
    }

    .brand-title {
      font-family: Inter, sans-serif;
      font-size: 13px;
      font-weight: 900;
      line-height: .95;
      letter-spacing: .06em;
    }

    .brand-title span {
      display: block;
      margin-top: 6px;
      color: var(--cyan);
      font-size: 8px;
      letter-spacing: .3em;
    }

    .mode-switch {
      display: flex;
      padding: 5px;
      background: rgba(1, 10, 27, .55);
      border: 1px solid rgba(255,255,255,.17);
      backdrop-filter: blur(16px);
      transform: skewX(-8deg);
      pointer-events: auto;
    }

    .mode-switch button,
    .mode-switch a {
      padding: 9px 13px;
      cursor: pointer;
      color: #9ec5df;
      background: transparent;
      border: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      transition: 180ms ease;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
    }

    .mode-switch button.active,
    .mode-switch a.active {
      color: var(--navy);
      background: var(--cyan);
    }

    .mode-switch button:hover,
    .mode-switch a:hover {
      color: #ffffff;
      background: rgba(84, 232, 255, 0.2);
    }

    @media (max-width: 768px) {
      .topbar {
        height: 62px;
        padding: 0 16px;
      }
      .brand-mark {
        width: 44px;
        height: 40px;
      }
      .brand-title {
        font-size: 11px;
      }
      .mode-switch {
        padding: 3px;
        transform: skewX(-5deg);
      }
      .mode-switch button,
      .mode-switch a {
        padding: 7px 9px;
        font-size: 8.5px;
        letter-spacing: .04em;
      }
    }

    @media (max-width: 480px) {
      .topbar {
        height: 58px;
        padding: 0 10px;
      }
      .brand-title {
        display: none;
      }
      .mode-switch {
        transform: none;
      }
      .mode-switch button,
      .mode-switch a {
        padding: 6px 7px;
        font-size: 8px;
        letter-spacing: 0.01em;
      }
    }

    .nav-extra {
      display: inline;
    }

    @media (max-width: 520px) {
      .nav-extra {
        display: none;
      }
    }