body {
  --site: 1540px;
}

.reference-home .site-header {
  background-color: #061d38;
  background-image:
    linear-gradient(rgba(3, 21, 43, 0.72), rgba(3, 21, 43, 0.72)),
    url("./assets/modern-header-background.png") !important;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 42px rgba(3, 21, 43, 0.2);
}

.reference-home .main-nav a,
.reference-home .main-nav .menu-item-row > span {
  color: #ffffff;
}

.reference-home .header-actions button,
.reference-home .profile-link,
.reference-home .script-switch,
.reference-home .language-switch {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.reference-home .header-actions button,
.reference-home .profile-link {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.ref-card,
.side-box,
.category-page-grid article {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(220, 227, 235, 0.86);
  box-shadow: 0 16px 38px rgba(3, 27, 56, 0.1);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ref-card:hover,
.category-page-grid article:hover {
  border-color: color-mix(in srgb, var(--theme-primary) 34%, var(--theme-border));
  box-shadow: 0 24px 52px rgba(3, 27, 56, 0.16);
  transform: translateY(-3px);
}

.ref-section-title {
  border-bottom: 1px solid var(--theme-border);
}

.ref-section-title::after {
  background: linear-gradient(90deg, var(--theme-primary), var(--theme-accent));
}

.ref-footer {
  background-color: #03152b;
  background-image:
    linear-gradient(rgba(3, 21, 43, 0.78), rgba(3, 21, 43, 0.9)),
    url("./assets/modern-footer-background.png") !important;
  background-position: center;
  background-size: cover;
  border-top: 4px solid var(--theme-primary);
}

@media (max-width: 900px) {
  .reference-home .site-header {
    background-position: 64% center;
  }

  .ref-card:hover,
  .category-page-grid article:hover {
    transform: none;
  }
}