﻿    /* â”€â”€â”€ NAVBAR â”€â”€â”€ */
    .navbar {
      height: 88px;
      padding-left: clamp(32px, 2.7vw, 48px);
      padding-right: clamp(32px, 2.7vw, 48px);
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      z-index: 100;
      background: #ffffff;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      visibility: hidden;
      pointer-events: none;
    }

    .logo-text {
      display: none;
    }

    .nav-menu {
      display: flex;
      align-items: center;
      gap: clamp(28px, 3vw, 42px);
    }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      line-height: 1;
      font-weight: 400;
      color: #000000;
      text-decoration: none;
      cursor: pointer;
      transition: color var(--motion-150) var(--motion-ease);
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .nav-mobile-toggle {
      display: none;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      margin: 0;
      padding: 0;
      border-radius: var(--radius-12);
      border: 1px solid rgba(184, 151, 58, 0.42);
      background: #ffffff;
      color: #000000;
      cursor: pointer;
      transition: border-color var(--motion-180) var(--motion-ease), background var(--motion-180) var(--motion-ease);
    }

    .nav-mobile-toggle:hover {
      border-color: rgba(184, 151, 58, 0.65);
    }

    .nav-mobile-toggle:focus-visible {
      outline: 2px solid var(--gold-main);
      outline-offset: 2px;
    }

    .nav-mobile-toggle-icon {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 20px;
      pointer-events: none;
    }

    .nav-mobile-toggle-icon span {
      display: block;
      height: 2px;
      border-radius: 1px;
      background: #000000;
      transition: transform var(--motion-220) var(--motion-ease), opacity var(--motion-220) var(--motion-ease);
    }

    body.nav-open .nav-mobile-toggle-icon span:nth-child(1) {
      transform: translateY(7px) rotate(45deg);
    }

    body.nav-open .nav-mobile-toggle-icon span:nth-child(2) {
      opacity: 0;
    }

    body.nav-open .nav-mobile-toggle-icon span:nth-child(3) {
      transform: translateY(-7px) rotate(-45deg);
    }

    .nav-mobile-backdrop {
      display: none;
    }

    /* Duplikat CTA tylko w drawerze na bardzo wÄ…skich telefonach (â‰¤419px) */
    .nav-mobile-menu-cta {
      display: none;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      padding: 14px 18px;
      border-radius: var(--radius-pill);
      font-family: var(--type-body-font-family);
      font-size: var(--type-body-sm-font-size);
      font-weight: 600;
      letter-spacing: 0.06em;
      color: #000000;
      text-decoration: none;
      text-transform: uppercase;
    }

    .nav-mobile-menu-cta:active {
      opacity: 0.92;
    }

    .nav-cta-primary {
      height: 48px;
      padding: 0 26px;
      border-radius: var(--radius-pill);
      font-family: var(--type-body-font-family);
      font-size: var(--type-body-sm-font-size);
      font-weight: 500;
      cursor: pointer;
      transition: border-color var(--motion-180) var(--motion-ease), background-color var(--motion-180) var(--motion-ease);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    .nav-cta-secondary {
      height: 48px;
      padding: 0 24px;
      border-radius: var(--radius-pill);
      font-family: var(--type-body-font-family);
      font-size: var(--type-body-sm-font-size);
      font-weight: 400;
      cursor: pointer;
      transition: border-color var(--motion-180) var(--motion-ease), color var(--motion-180) var(--motion-ease);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

    /* â”€â”€â”€ ECOSYSTEM dropdown (shared structure) â”€â”€â”€ */
    .nav-dropdown {
      position: relative;
      display: inline-flex;
      align-items: stretch;
    }

    .nav-dropdown__trigger {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 0;
      border: none;
      background: none;
      font: inherit;
      font-size: 14px;
      line-height: 1;
      font-weight: 400;
      color: #000000;
      cursor: pointer;
      text-align: left;
      transition: color var(--motion-150) var(--motion-ease);
    }

    .nav-dropdown__caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-top: 2px;
      border-left: 4px solid transparent;
      border-right: 4px solid transparent;
      border-top: 5px solid currentColor;
      opacity: 0.72;
      transition: transform var(--motion-180) var(--motion-ease);
    }

    .nav-dropdown.is-open .nav-dropdown__caret {
      transform: rotate(180deg);
    }

    .nav-dropdown__panel {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .nav-dropdown__link {
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #000000;
      text-decoration: none;
      transition: color var(--motion-150) var(--motion-ease);
    }

