/* ============================================================
   ZIRYVO — UI components
   Nav, buttons, badges, accordion, language switch.
   ============================================================ */

/* ---------------- Navigation ---------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  transition: transform 0.6s var(--ease);
}

/* The scrim that keeps the nav legible is a separate layer, taller than the
   bar itself and fading to nothing well below it. A background or a
   backdrop-filter on .nav would end abruptly at 72px and draw a visible
   horizontal line across the hero; so would a border-bottom. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 260%;
  pointer-events: none;
  z-index: -1;              /* behind the bar's own content, above the page */
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.52) 28%,
    rgba(0, 0, 0, 0.22) 60%,
    rgba(0, 0, 0, 0) 100%);
  opacity: 0.9;
  transition: opacity 0.5s ease;
}

/* Once the hero is behind it the scrim simply deepens. Still no hard edge. */
.nav.is-stuck::before { opacity: 1; }

/* Retreats on scroll down, returns on scroll up — mirrors the reference. */
.nav.is-hidden { transform: translate3d(0, -100%, 0); }

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.brand img {
  height: 25px;
  width: auto;
  transition: transform 0.6s var(--ease);
}
.brand:hover img { transform: scale(1.06); }
.brand__word {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
}
.nav__links a {
  position: relative;
  font-size: 0.845rem;
  color: var(--fg-dim);
  transition: color 0.4s var(--ease-soft);
  padding-block: 4px;
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.55s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current='true'] { color: var(--fg); }
.nav__links a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__right { display: flex; align-items: center; gap: 14px; }

/* ---------------- Language switch ---------------- */
.lang {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px;
  gap: 2px;
}
.lang button {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 100px;
  color: var(--fg-faint);
  transition: color 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.lang button:hover { color: var(--fg-dim); }

/* The pill is 28px tall, which is right visually and too small for a
   thumb. An invisible hit area extends it to 44px on touch screens without
   changing how it looks. The horizontal inset stays small so neighbouring
   buttons don't steal each other's taps. */
@media (pointer: coarse) {
  .lang button { position: relative; }
  .lang button::after {
    content: '';
    position: absolute;
    inset: -8px -2px;
  }
}
.lang button[aria-pressed='true'] {
  color: #000;
  background: #fff;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 100px;
  font-weight: 500;
  white-space: nowrap;
  transition: transform 0.55s var(--ease), background 0.55s var(--ease),
              border-color 0.55s var(--ease), color 0.55s var(--ease);
}
.btn svg { transition: transform 0.55s var(--ease); flex-shrink: 0; }
.btn:hover svg { transform: translateX(4px); }

.btn--lg { padding: 15px 30px; font-size: 0.92rem; }
.btn--sm { padding: 9px 19px;  font-size: 0.845rem; }

.btn--solid {
  background: #fff;
  color: #000;
  border: 1px solid #fff;
}
.btn--solid:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}

.btn--ghost {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--line);
}
.btn--ghost:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.30);
}

/* Text link with an underline that wipes in from the left. */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-dim);
  transition: color 0.4s var(--ease-soft);
}
.link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.link:hover { color: var(--fg); }
.link:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------------- Badge ---------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 8px 17px;
  font-size: 0.655rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.badge__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: badge-pulse 2.8s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%      { opacity: 0.95; transform: scale(1); }
}

/* ---------------- Accordion (FAQ) ---------------- */
.acc__item { border-bottom: 1px solid var(--line-soft); }

.acc__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  text-align: left;
  padding: clamp(22px, 2.6vw, 30px) 0;
  font-size: clamp(1rem, 1.6vw, 1.28rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg-dim);
  transition: color 0.45s var(--ease-soft);
}
.acc__trigger:hover,
.acc__item.is-open .acc__trigger { color: var(--fg); }

/* Plus that rotates into a minus. */
.acc__icon {
  position: relative;
  flex-shrink: 0;
  width: 15px; height: 15px;
  transition: transform 0.6s var(--ease);
}
.acc__icon::before,
.acc__icon::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: currentColor;
  transition: opacity 0.45s var(--ease), transform 0.6s var(--ease);
}
.acc__icon::before { width: 15px; height: 1px; transform: translate(-50%, -50%); }
.acc__icon::after  { width: 1px; height: 15px; transform: translate(-50%, -50%); }
.acc__item.is-open .acc__icon { transform: rotate(180deg); }
.acc__item.is-open .acc__icon::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }

/* Height is driven from JS so the transition has a real target. */
.acc__panel {
  overflow: hidden;
  height: 0;
  transition: height 0.62s var(--ease), opacity 0.5s var(--ease-soft);
  opacity: 0;
}
.acc__item.is-open .acc__panel { opacity: 1; }
.acc__panel > div { padding-bottom: clamp(24px, 3vw, 34px); }
.acc__panel p { max-width: 68ch; color: var(--fg-soft); }

/* ---------------- Mobile menu ---------------- */
.nav__toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.nav__toggle:hover { border-color: rgba(255, 255, 255, 0.3); }
.nav__toggle span {
  position: relative;
  width: 15px; height: 1px;
  background: currentColor;
  transition: background 0.3s var(--ease);
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 15px; height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease);
}
.nav__toggle span::before { top: -5px; }
.nav__toggle span::after  { top: 5px; }

body.menu-open .nav__toggle span { background: transparent; }
body.menu-open .nav__toggle span::before { transform: translateY(5px) rotate(45deg); }
body.menu-open .nav__toggle span::after  { transform: translateY(-5px) rotate(-45deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  padding: calc(var(--nav-h) + 40px) var(--gut) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }

.menu__links { display: flex; flex-direction: column; gap: 4px; }
.menu__links a {
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.24;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
body.menu-open .menu__links a { opacity: 1; transform: none; }
body.menu-open .menu__links a:nth-child(1) { transition-delay: 0.08s; }
body.menu-open .menu__links a:nth-child(2) { transition-delay: 0.14s; }
body.menu-open .menu__links a:nth-child(3) { transition-delay: 0.20s; }
body.menu-open .menu__links a:nth-child(4) { transition-delay: 0.26s; }
body.menu-open .menu__links a:nth-child(5) { transition-delay: 0.32s; }

.menu__foot {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease) 0.36s, transform 0.7s var(--ease) 0.36s;
}
body.menu-open .menu__foot { opacity: 1; transform: none; }
.menu__foot .btn { width: 100%; }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__right .btn--sm { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 901px) {
  .menu { display: none; }
}

/* ============================================================
   Accent touches
   The lime appears only as punctuation: labels, a live dot, the
   open FAQ marker, and arrows.
   ============================================================ */

/* Live indicator in the hero badge */
.badge__dot { background: var(--lime); }

/* FAQ: the marker picks up the accent only while a panel is open */
.acc__item.is-open .acc__icon { color: var(--lime); }


/* Text links resolve to lime on hover rather than plain white */
.link:hover { color: var(--lime); }

/* Ghost button arrow */
.btn--ghost:hover svg { color: var(--lime); }