.page {
  max-width: 1180px;
  margin: 0 auto;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 30px;
  border-radius: 24px;
  background: linear-gradient(135deg, #0f4c81 0%, #2a6fd6 55%, #4e8ef7 100%);
  color: #fff;
  box-shadow: 0 20px 50px rgba(15, 76, 129, 0.22);
  margin-bottom: 24px;
}

.heroEyebrow {
  font-size: 0.82rem;
  font-weight: 600;
  opacity: 0.9;
  margin-bottom: 8px;
}

.hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 10px;
}

.heroText {
  max-width: 620px;
  line-height: 1.6;
  opacity: 0.92;
}

.heroCta,
.ctaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px;
  border-radius: 999px;
  background: #fff;
  color: #0f4c81;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.statsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.statCard,
.panel,
.ctaPanel {
  background: #fff;
  border: 1px solid rgba(15, 76, 129, 0.08);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15, 76, 129, 0.08);
}

.statCard {
  padding: 22px;
}

.statPrimary {
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
}

.statCard span,
.panelHead p,
.ctaPanel p {
  color: #6c757d;
}

.statCard strong {
  display: block;
  font-size: 2rem;
  color: #0f4c81;
  margin: 8px 0;
}

.statCard p {
  font-size: 0.85rem;
  color: #6c757d;
}

.gridTwo {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
  margin-bottom: 24px;
}

.panel {
  padding: 24px;
}

.panel h2,
.ctaPanel h2 {
  color: #0f4c81;
  font-size: 1.25rem;
  margin-bottom: 18px;
}

.panelHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panelHead h2 {
  margin-bottom: 6px;
}

.ringGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.scoreRingWrap {
  text-align: center;
}

.scoreRing {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}

.scoreRingInner {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scoreRingInner strong {
  color: #0f4c81;
  font-size: 1.35rem;
  line-height: 1;
}

.scoreRingInner span,
.scoreRingWrap small {
  color: #6c757d;
  font-size: 0.78rem;
}

.choiceBars,
.barRow {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.barHead {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.barTrack,
.moduleTrack {
  height: 10px;
  background: #edf2fa;
  border-radius: 999px;
  overflow: hidden;
}

.barFill,
.moduleFillBlue,
.moduleFillGreen {
  height: 100%;
  border-radius: 999px;
}

.blue { background: linear-gradient(90deg, #2a6fd6, #4e8ef7); }
.green { background: linear-gradient(90deg, #1e9e52, #28a745); }
.amber { background: linear-gradient(90deg, #ffb300, #ffc107); }
.red { background: linear-gradient(90deg, #e4534b, #dc3545); }

.legend {
  display: flex;
  gap: 16px;
  color: #6c757d;
  font-size: 0.85rem;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dotBlue,
.dotGreen {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.dotBlue { background: #2a6fd6; }
.dotGreen { background: #28a745; }

.moduleGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.moduleCard {
  background: #f8fbff;
  border: 1px solid #e8eef8;
  border-radius: 16px;
  padding: 16px;
}

.moduleTitle {
  font-weight: 700;
  color: #0f4c81;
  margin-bottom: 14px;
}

.moduleBars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.moduleBarRow {
  display: grid;
  grid-template-columns: 56px 1fr 34px;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  color: #6c757d;
}

.moduleFillBlue { background: linear-gradient(90deg, #2a6fd6, #4e8ef7); }
.moduleFillGreen { background: linear-gradient(90deg, #1e9e52, #28a745); }

.ctaPanel {
  margin-top: 24px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.errorBox {
  background: #fff3f3;
  border: 1px solid #f5c2c7;
  border-radius: 20px;
  padding: 28px;
  color: #842029;
}

@media (max-width: 980px) {
  .statsGrid,
  .moduleGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gridTwo,
  .ringGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hero,
  .ctaPanel {
    flex-direction: column;
    align-items: flex-start;
  }

  .statsGrid,
  .moduleGrid {
    grid-template-columns: 1fr;
  }
}