:root {
  --voibe-header-text: var(--color-text-dark, #121212);
  --voibe-brand: var(--color-brand, #FEC007);
}

/* --- Global header (shared across pages) --- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.header-left { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.header-center { display: flex; align-items: center; gap: 2rem; }
.header-right { display: flex; align-items: center; gap: 1rem; }

.header-nav-link {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--voibe-header-text);
  transition: all 0.3s ease;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  position: relative;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.header-nav-link:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.header-nav-link.active { background: rgba(254, 192, 7, 0.2); color: var(--voibe-brand); font-weight: 600; box-shadow: 0 2px 8px rgba(254, 192, 7, 0.2); }

.header-logo { width: 40px; height: 40px; }
.header-brand { font-family: var(--font-brand, 'Satoshi', sans-serif); color: var(--voibe-header-text); font-size: 2rem; font-weight: 600; }

.header-cta {
  background: rgba(254, 192, 7, 0.8);
  padding: 0.6rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  border: 2px solid rgba(254, 192, 7, 0.9);
  color: var(--voibe-header-text);
}
.header-cta:hover { background: rgba(254, 192, 7, 0.95); border-color: var(--voibe-brand); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(254, 192, 7, 0.3); }

/* Mobile menu toggle */
.mobile-menu-toggle { display: none; background: none; border: none; color: var(--voibe-header-text); font-size: 1.5rem; cursor: pointer; padding: 0.5rem; }

/* Apple icon used in CTAs */
.apple-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.4em; }

@media (max-width: 960px) {
  .header { padding: 0.75rem 1rem; }
  .header-brand { font-size: 1.2rem; }
  .header-cta { padding: 0.5rem 1rem; font-size: 0.8rem; }
  /* Hide CTA on smaller screens to keep layout tidy */
  .header-cta { display: none; }

  .header-center {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-direction: column; gap: 0; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 1001;
  }
  .header-center.open { max-height: 400px; }
  .header-nav-link { padding: 1rem 2rem; width: 100%; text-align: left; border-radius: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .mobile-menu-toggle { display: block; }
}