/* ============================================================
   VITERNO — shared site navigation.
   ONE source of truth for every page (index, portfolio, services,
   privacy, terms, 404). Edit here → every page updates. Self-contained
   plain CSS so it renders identically on the React pages and the static
   pages alike.
   ============================================================ */
.vnav, .vnav * { box-sizing: border-box; }
.vnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  font-family: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif;
  transition: background .3s ease, backdrop-filter .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.vnav-inner {
  max-width: 80rem; margin: 0 auto; height: 80px; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (min-width: 640px) { .vnav-inner { padding: 0 2rem; } }

/* frosted glass once the page is scrolled (matches the homepage .glass-nav) */
.vnav.scrolled {
  background: linear-gradient(180deg, rgba(12,12,14,0.72), rgba(8,8,10,0.60));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px -20px rgba(0,0,0,0.80), 0 1px 0 rgba(239,27,37,0.18), inset 0 1px 0 rgba(255,255,255,0.10);
}

/* brand lockup */
.vnav-brand { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; flex-shrink: 0; }
.vnav-logo { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 6px 16px rgba(239,27,37,0.35)); display: block; }
.vnav-word { display: flex; flex-direction: column; justify-content: center; line-height: 1; }
.vnav-word b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1; }
.vnav-word i { font-size: 10px; letter-spacing: 0.32em; color: #A1A1AA; font-weight: 500; font-style: normal; line-height: 1; margin-top: 5px; }

/* primary links */
.vnav-links { display: none; align-items: center; gap: 2.25rem; }
@media (min-width: 768px) { .vnav-links { display: flex; } }
.vnav-links a { position: relative; font-size: 14px; color: #E4E4E7; text-decoration: none; transition: color .2s; white-space: nowrap; }
.vnav-links a:hover { color: #fff; }
.vnav-links a.active { color: #fff; }
.vnav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 0; background: #EF1B25; transition: width .3s; }
.vnav-links a:hover::after, .vnav-links a.active::after { width: 100%; }

/* right cluster */
.vnav-cta { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.vnav-login {
  display: none; align-items: center; height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15); color: #F4F4F5; font-size: 14px; font-weight: 500;
  text-decoration: none; transition: border-color .2s, color .2s; white-space: nowrap;
}
.vnav-login:hover { border-color: rgba(255,255,255,0.40); }
@media (min-width: 640px) { .vnav-login { display: inline-flex; } }
.vnav-get {
  display: none; align-items: center; gap: 0.5rem; height: 44px; padding: 0 1.25rem; border-radius: 999px;
  background: linear-gradient(180deg, #EF1B25, #C8101A); color: #fff; font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(239,27,37,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform .3s cubic-bezier(0.22,1,0.36,1), box-shadow .3s;
}
.vnav-get:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(239,27,37,0.85), inset 0 1px 0 rgba(255,255,255,0.25); }
@media (min-width: 640px) { .vnav-get { display: inline-flex; } }
.vnav-get svg { width: 14px; height: 14px; }

/* mobile burger */
.vnav-burger { display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: #F4F4F5; cursor: pointer; padding: 0; }
@media (min-width: 768px) { .vnav-burger { display: none; } }
.vnav-burger svg { width: 22px; height: 22px; }

/* mobile dropdown */
.vnav-mobile {
  display: none;
  background: linear-gradient(180deg, rgba(12,12,14,0.96), rgba(8,8,10,0.93));
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.vnav-mobile.open { display: block; }
@media (min-width: 768px) { .vnav-mobile, .vnav-mobile.open { display: none; } }
.vnav-mobile-inner { padding: 0.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 0.125rem; }
.vnav-mobile a { color: #F4F4F5; text-decoration: none; font-size: 16px; padding: 0.65rem 0; }
.vnav-mobile a.active { color: #FF3B47; }
.vnav-mobile .vnav-login-m { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 0.5rem; padding-top: 1rem; }
.vnav-mobile .vnav-get-m {
  margin-top: 0.75rem; height: 48px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #EF1B25, #C8101A); color: #fff; font-weight: 600;
  box-shadow: 0 10px 30px -10px rgba(239,27,37,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
}