/* ============================================================
   ARZ SOLUTIONS — Navigation  (Monochrome Editorial theme)
   Desktop: sticky glass navbar (top)
   Mobile : glass bottom tab bar (6 tabs)
   ============================================================ */


/* ============================================================
   DESKTOP STICKY NAVBAR
   ============================================================ */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: var(--nav-h);
  display: none;                 /* shown at >= 1024px */
  align-items: center;
  background: rgba(250,248,242,0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(26,36,47,0.07);
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              background 0.3s,
              box-shadow 0.3s;
}

@media (min-width: 1024px) { .site-nav { display: flex; } }

.site-nav.scrolled {
  background: rgba(250,248,242,0.94);
  box-shadow: 0 2px 24px rgba(26,36,47,0.07);
}

.site-nav.nav-hidden { transform: translateY(-100%); }

.nav-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.nav-logo img,
.nav-logo svg { height: 40px; width: auto; }

/* Nav links + sliding pill */
.nav-links-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  position: relative;
}

.nav-pill {
  position: absolute;
  height: 36px;
  background: rgba(26,36,47,0.07);
  border-radius: 9999px;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.35s cubic-bezier(0.22,1,0.36,1),
              width 0.35s cubic-bezier(0.22,1,0.36,1);
  pointer-events: none;
  z-index: 0;
}

.nav-links li a {
  display: block;
  padding: 8px 18px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--clr-ink-70);
  border-radius: 9999px;
  transition: color 0.2s;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-decoration: none;
}

.nav-links li a:hover { color: var(--clr-ink); }
.nav-links li a.active { color: var(--clr-ink); font-weight: 600; }

/* CTA */
.nav-cta-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 9999px;
  background: var(--clr-ink);
  color: var(--clr-cream);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.22,1,0.36,1),
              background 0.2s,
              box-shadow 0.2s;
  white-space: nowrap;
  cursor: none;
}

@media (pointer: coarse) { .nav-cta { cursor: pointer; } }

.nav-cta:hover {
  transform: translateY(-1px);
  background: var(--clr-ink-rich);
  box-shadow: 0 6px 20px rgba(26,36,47,0.20);
}


/* ============================================================
   MOBILE TOP — TRAY + TWO INNER ELEMENTS
   Outer cream-glass tray (the rounded container), with an inner
   logo pill on the left and an inner phone circle on the right.
   Both inner elements have their own distinct shape inside the tray.
   ============================================================ */
.mobile-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 16px;                              /* visible gap between pill and circle */
  /* Rectangle anchored to the top edge, rounded only on the bottom corners.
     Padding-top respects the notch / status-bar safe area on iOS. */
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 14px 14px;
  background: rgba(250,248,242,0.94);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid rgba(26,36,47,0.08);
  border-radius: 0 0 26px 26px;
  box-shadow: 0 4px 18px rgba(26,36,47,0.06);
}

@media (min-width: 1024px) { .mobile-top { display: none; } }

/* Inner element 1: logo pill (sits inside the outer tray, own shape) */
.mobile-top-logo {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 7px 22px;
  background: var(--clr-white);
  border: 1px solid rgba(26,36,47,0.08);
  border-radius: 9999px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  min-height: 46px;
  transition: background 0.18s, transform 0.18s;
}

.mobile-top-logo:active {
  background: var(--clr-cream);
  transform: scale(0.985);
}

.mobile-top-logo img {
  height: 32px;
  width: auto;
  display: block;
}

/* Inner element 2: phone circle — own shape + ringing animation */
.mobile-top-action {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-white);
  border: 1px solid rgba(26,36,47,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: background 0.18s, transform 0.18s;
}

.mobile-top-action:active {
  background: var(--clr-cream);
  transform: scale(0.92);
}

/* Pulse ring radiating out — signals "live call action" */
.mobile-top-action::before,
.mobile-top-action::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid var(--clr-ink);
  opacity: 0;
  pointer-events: none;
  animation: mobile-cta-ring 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.mobile-top-action::after { animation-delay: 1.2s; }

@keyframes mobile-cta-ring {
  0%   { opacity: 0.55; transform: scale(1);   }
  80%  { opacity: 0;    transform: scale(1.7); }
  100% { opacity: 0;    transform: scale(1.7); }
}

/* Phone icon wiggles briefly at the end of each pulse — like it's ringing */
.mobile-top-action svg {
  animation: mobile-cta-wiggle 2.4s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes mobile-cta-wiggle {
  0%, 84%, 100%      { transform: rotate(0deg); }
  86%                { transform: rotate(-14deg); }
  89%                { transform: rotate(12deg); }
  92%                { transform: rotate(-10deg); }
  95%                { transform: rotate(6deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-top-action::before,
  .mobile-top-action::after,
  .mobile-top-action svg { animation: none; }
}


/* ============================================================
   MOBILE BOTTOM TAB BAR
   ============================================================ */
.mobile-tabs {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: rgba(250,248,242,0.90);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(26,36,47,0.08);
  border-radius: 20px 20px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(26,36,47,0.06);
}

@media (min-width: 1024px) { .mobile-tabs { display: none; } }

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 6px 8px;
  text-decoration: none;
  color: var(--clr-ink-30);
  transition: color 0.22s;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--tab-h);
}

.tab-icon-wrap {
  width: 40px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  transition: background 0.22s cubic-bezier(0.22,1,0.36,1),
              transform 0.22s cubic-bezier(0.22,1,0.36,1);
}

.tab-item svg {
  width: 20px; height: 20px;
  stroke: currentColor;
  transition: stroke 0.22s;
}

.tab-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.22s;
  line-height: 1;
}

/* Active state — ink pill behind icon */
.tab-item.active { color: var(--clr-ink); }

.tab-item.active .tab-icon-wrap {
  background: var(--clr-ink);
  transform: translateY(-2px);
}

.tab-item.active .tab-icon-wrap svg { stroke: var(--clr-cream); }

.tab-item.active .tab-label { color: var(--clr-ink); }