@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root {
  --nx-bg: #f5f7fb;
  --nx-bg-soft: #eef3ff;
  --nx-ink: #12203a;
  --nx-muted: #4b5a78;
  --nx-surface: rgba(255, 255, 255, 0.88);
  --nx-border: rgba(18, 32, 58, 0.12);
  --nx-primary: #0f5fcf;
  --nx-primary-strong: #0a47a2;
  --nx-accent: #00a6a6;
  --nx-warm: #ff8a3d;
  --nx-shadow: 0 16px 32px rgba(16, 33, 67, 0.12);
}

body {
  font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif !important;
  color: var(--nx-ink);
  background:
    radial-gradient(circle at 14% 12%, rgba(0, 166, 166, 0.14), transparent 26%),
    radial-gradient(circle at 88% 18%, rgba(15, 95, 207, 0.16), transparent 30%),
    linear-gradient(160deg, #f9fbff 0%, var(--nx-bg) 42%, var(--nx-bg-soft) 100%);
  padding-top: 76px !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 32, 58, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 32, 58, 0.03) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 90%);
  z-index: -1;
}

.navbar {
  background: linear-gradient(100deg, rgba(8, 23, 51, 0.94), rgba(12, 48, 106, 0.92)) !important;
  border-bottom: 1px solid rgba(147, 197, 253, 0.2);
  backdrop-filter: blur(8px);
  min-height: 76px;
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.navbar .container {
  min-height: 48px;
}

.navbar.nx-shared-topnav {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto !important;
}

.navbar.nx-shared-topnav .topbar {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.navbar.nx-shared-topnav .brand {
  color: #fff;
  text-decoration: none;
  font-family: 'Sora', 'Trebuchet MS', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.navbar.nx-shared-topnav .brand img {
  width: auto;
  height: 2rem;
  object-fit: contain;
}

.navbar.nx-shared-topnav .brand span {
  font-size: 1.3rem;
}

.navbar.nx-shared-topnav .brand span span {
  color: #63c9ff;
}

.navbar.nx-shared-topnav .nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.navbar.nx-shared-topnav .nav a {
  color: #dbe9ff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.5rem 0.72rem;
  border-radius: 999px;
  border: 1px solid transparent;
}

.navbar.nx-shared-topnav .nav a:hover {
  color: #fff;
  background: rgba(96, 165, 250, 0.16);
  border-color: rgba(147, 197, 253, 0.24);
}

.navbar.nx-shared-topnav .menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(147, 197, 253, 0.3);
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.16);
  color: #fff;
}

.navbar.nx-shared-topnav .mobile-nav {
  display: none;
  flex-direction: column;
  padding: 0.5rem 1rem 0.8rem 1rem;
}

.navbar.nx-shared-topnav .mobile-nav.open {
  display: flex;
}

.navbar-brand-text,
.navbar-brand-xe,
.page-title,
.hero-section h1,
.content-section h2,
.content-section h3,
#document-container-wrapper h1.document-title,
.quiz-card h1,
.quiz-card h2 {
  font-family: 'Sora', 'Trebuchet MS', sans-serif !important;
}

.navbar-brand-xe {
  color: #5bc5ff !important;
}

.hero-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 18%, rgba(0, 166, 166, 0.3), transparent 28%),
    linear-gradient(130deg, #081733 0%, #0f5fcf 72%, #22a7a7 100%) !important;
  box-shadow: inset 0 -36px 48px rgba(8, 23, 51, 0.25);
}

.hero-section::after {
  content: '';
  position: absolute;
  width: 380px;
  height: 380px;
  right: -130px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(255, 138, 61, 0.34), transparent 66%);
  filter: blur(1px);
}

.landing-hero-title,
.page-title {
  letter-spacing: -0.02em;
}

.action-button,
.module-card .action-button-module,
.btn,
.admin-access-button {
  border-radius: 999px !important;
  border: 1px solid transparent;
  font-weight: 700 !important;
  background: linear-gradient(135deg, var(--nx-primary), #1f7aec) !important;
  box-shadow: 0 10px 24px rgba(15, 95, 207, 0.28);
}

.action-button:hover,
.module-card .action-button-module:hover,
.btn:hover,
.admin-access-button:hover {
  background: linear-gradient(135deg, var(--nx-primary-strong), #175fc1) !important;
  transform: translateY(-2px) scale(1.01);
}

.module-card,
.value-prop-card,
.quiz-card,
.content-section,
#document-container-wrapper,
.modal-content,
.badge-item {
  background: var(--nx-surface) !important;
  border: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow) !important;
  backdrop-filter: blur(6px);
}

.module-card,
.value-prop-card,
.quiz-card,
.topic-link,
.accordion-header,
.badge-item {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease !important;
}

.module-card:hover,
.value-prop-card:hover,
.topic-link:hover,
.badge-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px rgba(17, 40, 82, 0.16) !important;
  border-color: rgba(15, 95, 207, 0.32);
}

.icon-placeholder {
  background: linear-gradient(145deg, rgba(15, 95, 207, 0.14), rgba(0, 166, 166, 0.18)) !important;
  color: #0a3f89 !important;
}

.page-title::after,
.featured-modules-section .section-title::after {
  background: linear-gradient(90deg, var(--nx-accent), var(--nx-primary)) !important;
  height: 5px !important;
}

.content-section p,
.content-section ul,
.quiz-card p,
#document-container-wrapper p,
#document-container-wrapper ul {
  color: var(--nx-muted) !important;
}

.topic-link,
.option-button,
.accordion-header,
.selection-container,
#add-edit-question-form,
#performance-chart-container {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: var(--nx-border) !important;
}

.topic-link:hover,
.option-button:hover:not(:disabled),
.accordion-header:hover,
.selection-container label.checkbox-label:hover {
  background: rgba(15, 95, 207, 0.09) !important;
}

.option-button.selected,
.selection-container label.selected {
  background: rgba(15, 95, 207, 0.18) !important;
  color: #0c3f89 !important;
  border-color: rgba(15, 95, 207, 0.45) !important;
}

footer {
  background: linear-gradient(120deg, #081733, #0d2e67) !important;
  border-top: 1px solid rgba(147, 197, 253, 0.2);
}

footer.nx-shared-footer {
  margin-top: auto;
  padding-top: 1.2rem !important;
  padding-bottom: 1.35rem !important;
}

footer.nx-shared-footer .container {
  text-align: center;
}

footer.nx-shared-footer .footer-links {
  margin-top: 0.65rem;
  margin-bottom: 0.65rem;
}

.hero-section,
.value-prop-card,
.module-card,
.page-title-container,
.content-section,
#document-container-wrapper,
.quiz-card {
  animation: nxReveal 0.75s ease both;
}

.value-prop-card:nth-child(2),
.module-card:nth-child(2),
.option-button:nth-child(2) {
  animation-delay: 90ms;
}

.value-prop-card:nth-child(3),
.module-card:nth-child(3),
.option-button:nth-child(3) {
  animation-delay: 150ms;
}

@keyframes nxReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  body {
    background-size: auto, auto, 100% 100%;
    padding-top: 70px !important;
  }

  .hero-section {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
  }

  .landing-hero-title {
    font-size: 2.2rem !important;
  }

  .module-card,
  .value-prop-card,
  .quiz-card,
  #document-container-wrapper,
  .content-section {
    border-radius: 14px !important;
  }

  .navbar {
    min-height: 70px;
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }

  .navbar.nx-shared-topnav .topbar {
    min-height: 70px;
  }

  .navbar.nx-shared-topnav .desktop-nav {
    display: none;
  }

  .navbar.nx-shared-topnav .menu-btn {
    display: inline-grid;
    place-items: center;
  }
}

/* ----- Cross-page improvements for topic pages ----- */
.navbar img[src*="neuronixe-icon.svg"] {
  height: 2rem !important;
  width: auto !important;
}

footer img[src*="neuronixe-icon.svg"],
.footer-logo img[src*="neuronixe-icon.svg"] {
  height: 2.5rem !important;
  width: auto !important;
}

.accordion-content,
.accordion-content p,
.accordion-content li,
.accordion-content td,
.accordion-content th,
.accordion-content .algo-step,
.accordion-content .diagram-box,
.accordion-content .flow-box-styled,
.accordion-content .risk-factor-item {
  overflow-wrap: anywhere;
  word-break: normal;
}

.accordion-content .custom-table-styled th,
.accordion-content .custom-table-styled td {
  white-space: normal !important;
}

.accordion-content .custom-table-styled {
  table-layout: auto;
}

.nx-accordion-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nx-toolbar-btn {
  border: 1px solid rgba(15, 95, 207, 0.28);
  background: rgba(15, 95, 207, 0.1);
  color: #0c4d9e;
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.nx-toolbar-btn:hover {
  background: rgba(15, 95, 207, 0.2);
  transform: translateY(-1px);
}

.nx-concept-map {
  margin: 1rem 0;
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.84);
  padding: 0.9rem;
}

.nx-concept-title {
  margin: 0 0 0.7rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #0c3f89;
}

#breadcrumbs-container.nx-breadcrumb-host {
  margin-top: 1.05rem !important;
  margin-bottom: 0.5rem !important;
  position: relative;
  z-index: 1;
  clear: both;
}

#breadcrumbs-container.nx-breadcrumb-host .breadcrumbs.nx-shared-breadcrumb {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  border-radius: 999px;
  border: 1px solid var(--nx-border);
  background: rgba(255, 255, 255, 0.82);
  padding: 0.42rem 0.72rem;
  color: #536893;
  font-size: 0.84rem;
}

#breadcrumbs-container.nx-breadcrumb-host .breadcrumbs.nx-shared-breadcrumb a {
  color: #224885;
  font-weight: 700;
  text-decoration: none;
}

.nx-concept-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.nx-step {
  border: 1px solid rgba(15, 95, 207, 0.24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(15, 95, 207, 0.07), rgba(0, 166, 166, 0.08));
  padding: 0.65rem 0.7rem;
  font-size: 0.82rem;
  color: #1d3561;
  line-height: 1.4;
}

.nx-step strong {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0f5fcf;
  margin-bottom: 0.25rem;
}

.nx-acronym {
  position: relative;
  display: inline;
  border-bottom: 1px dotted rgba(15, 95, 207, 0.6);
  cursor: help;
}

.nx-acronym::after {
  content: none !important;
}

.nx-acronym::before {
  content: none !important;
}

.nx-acronym:hover::after,
.nx-acronym:hover::before,
.nx-acronym:focus-visible::after,
.nx-acronym:focus-visible::before {
  opacity: 1;
}

.nx-acronym-tooltip {
  position: fixed;
  z-index: 99999;
  min-width: 180px;
  max-width: 340px;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(147, 197, 253, 0.45);
  background: rgba(8, 23, 51, 0.98);
  color: #eaf2ff;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 12px 24px rgba(8, 23, 51, 0.26);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.nx-acronym-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}