/* Vexus visual pass: hierarchy, contrast and touch targets shared by public pages. */
:root {
  --vexus-ink: #101a2f;
  --vexus-muted: #59677f;
  --vexus-blue: #3455e8;
  --vexus-blue-strong: #2441ca;
  --vexus-line: #dce4f1;
}

.site-header {
  min-height: 78px;
}

.site-header .nav-inner {
  min-height: 78px;
}

.site-header .main-nav {
  gap: 8px;
}

.site-header .nav-link,
.site-header .nav-trigger {
  min-height: 42px;
  padding: 10px 13px;
  font-size: 15px;
  font-weight: 600;
}

.site-header .nav-actions {
  gap: 9px;
}

.site-header .nav-actions .btn {
  min-height: 44px;
  padding-inline: 17px;
  font-size: 15px;
}

.site-header .icon-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.site-header .brand-logo {
  width: 176px;
  max-height: 48px;
}

.mega-menu {
  width: min(1120px, calc(100vw - 40px));
  padding: 18px 20px 20px;
  border-radius: 14px;
}

.mega-menu-head {
  min-height: 38px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .035em;
}

.mega-grid {
  gap: 8px;
}

.mega-item {
  min-height: 88px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 13px;
  padding: 13px;
  border-radius: 10px;
}

.mega-item .mini-icon {
  width: 48px;
  height: 48px;
  font-size: 23px;
}

.mega-item strong {
  font-size: 15px;
  line-height: 1.25;
}

.mega-item span span,
.mega-network small {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
}

.public-page .subpage-hero {
  padding-block: clamp(74px, 10vw, 132px);
}

.public-page .subpage-hero h1 {
  max-width: 900px;
  font-size: clamp(2.35rem, 5.6vw, 5rem);
  letter-spacing: -.055em;
}

.public-page .subpage-hero .section-copy {
  max-width: 720px;
  font-size: 1.1rem;
}

.logo-carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.logo-carousel-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(28px, 4vw, 62px);
  padding: 10px 2px;
  animation: vexus-network-ticker 42s linear infinite;
}

.logo-carousel:hover .logo-carousel-track {
  animation-play-state: paused;
}

.logo-carousel span {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}

.logo-carousel img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.logo-carousel strong {
  font-size: 15px;
}

@keyframes vexus-network-ticker {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-carousel-track { animation: none; }
}

:root[data-theme="dark"] {
  --vexus-ink: #eff5ff;
  --vexus-muted: #aebed5;
  --vexus-line: #263958;
}

:root[data-theme="dark"] .landing-page,
:root[data-theme="dark"] .public-page {
  background: #07111f;
  color: #eff5ff;
}

:root[data-theme="dark"] .landing-page .hero {
  background:
    radial-gradient(circle at 76% 28%, rgb(55 96 218 / .22), transparent 33%),
    radial-gradient(circle at 18% 8%, rgb(31 72 184 / .16), transparent 35%),
    #07111f !important;
  color: #eff5ff;
}

:root[data-theme="dark"] .landing-page .hero::before {
  background:
    linear-gradient(90deg, #07111f 0%, rgb(7 17 31 / .9) 43%, rgb(7 17 31 / .38) 74%, rgb(7 17 31 / .7) 100%) !important;
  opacity: 1 !important;
}

:root[data-theme="dark"] .landing-page .hero::after {
  background-image: linear-gradient(rgb(113 151 255 / .08) 1px, transparent 1px), linear-gradient(90deg, rgb(113 151 255 / .08) 1px, transparent 1px) !important;
  opacity: .9 !important;
}

:root[data-theme="dark"] .landing-page .hero-art {
  opacity: .24 !important;
  filter: saturate(.85) brightness(.55) !important;
}

:root[data-theme="dark"] .landing-page .hero h1,
:root[data-theme="dark"] .landing-page .hero h1 span,
:root[data-theme="dark"] .landing-page .hero h1 span:last-child,
:root[data-theme="dark"] .landing-page .section-title,
:root[data-theme="dark"] .landing-page .ecosystem-strip h2 {
  color: #f4f8ff !important;
  text-shadow: none;
}

:root[data-theme="dark"] .landing-page .hero-copy,
:root[data-theme="dark"] .landing-page .section-copy,
:root[data-theme="dark"] .landing-page .ecosystem-strip h2,
:root[data-theme="dark"] .landing-page .logo-carousel strong {
  color: #b8c7dc !important;
}

:root[data-theme="dark"] .landing-page .ecosystem-strip {
  border-color: #1f3352 !important;
  background: #0a1729 !important;
}

:root[data-theme="dark"] .landing-page .site-section:not(.dark-section) {
  background: #07111f !important;
}

:root[data-theme="dark"] .landing-page .site-section:nth-of-type(even):not(.dark-section) {
  background: #0a1729 !important;
}

:root[data-theme="dark"] .landing-page .bento-card,
:root[data-theme="dark"] .landing-page .network-card,
:root[data-theme="dark"] .landing-page .pricing-card,
:root[data-theme="dark"] .landing-page .gateway-controls,
:root[data-theme="dark"] .landing-page .explorer-controls,
:root[data-theme="dark"] .landing-page .realtime-showcase,
:root[data-theme="dark"] .landing-page .observability-mock,
:root[data-theme="dark"] .landing-page .wallet-overview {
  border-color: #253a5a !important;
  background: #0e1d33 !important;
  color: #edf4ff !important;
}

:root[data-theme="dark"] .public-page .subpage-hero,
:root[data-theme="dark"] .public-page .site-section {
  background: #07111f !important;
  color: #eff5ff;
}

:root[data-theme="dark"] .public-page .subpage-card,
:root[data-theme="dark"] .public-page .network-card {
  border-color: #263d60 !important;
  background: #0d1c31 !important;
  color: #eff5ff !important;
}

:root[data-theme="dark"] .public-page .subpage-card .muted,
:root[data-theme="dark"] .public-page .section-copy,
:root[data-theme="dark"] .public-page .card-label {
  color: #b5c4dc !important;
}

@media (max-width: 1080px) {
  .site-header .brand-logo { width: 156px; }
  .site-header .nav-link,
  .site-header .nav-trigger { padding-inline: 9px; font-size: 14px; }
  .site-header .nav-actions .btn { padding-inline: 13px; }
}

@media (max-width: 820px) {
  .site-header,
  .site-header .nav-inner { min-height: 72px; }
  .site-header .brand-logo { width: 144px; max-height: 40px; }
  .site-header .icon-btn { width: 44px; height: 44px; }
  .mobile-nav { padding: 14px; }
  .mobile-nav > a { min-height: 48px; font-size: 16px; }
  .mobile-nav .mobile-locale { min-height: 52px; font-size: 15px; }
  .mobile-nav-actions .btn { min-height: 48px; }
}

@media (max-width: 540px) {
  .site-header,
  .site-header .nav-inner { min-height: 66px; }
  .site-header .brand-logo { width: 128px; max-height: 36px; }
  .site-header .nav-actions { gap: 6px; }
  .site-header .icon-btn { width: 42px; height: 42px; }
  .announcement-bar { min-height: 38px; font-size: 12px; }
  .logo-carousel-track { gap: 32px; animation-duration: 30s; }
  .logo-carousel img { width: 28px; height: 28px; }
  .logo-carousel strong { font-size: 14px; }
}