/* ============================================================
   Home / landing page — high-level platform overview with three
   clickable cards routing to the main sections. It is the first
   impression, so it stays clean, spacious and brand-consistent.
   ============================================================ */

.home-main {
  max-width: 1560px;
  margin: 0 auto;
  padding: 34px 48px 52px;
}

/* ---- Intro ---- */
.home-intro {
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
}
.home-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  color: #0bb89c;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.home-title {
  color: #1b2733;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.2px;
  margin: 0 0 14px;
}
.home-lead {
  color: #55636b;
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

/* ---- Headline figures ---- */
.home-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px auto 0;
  max-width: 1200px;
}
.home-stat {
  flex: 1 1 140px;
  min-width: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px;
  background: #f7fbfa;
  border: 1px solid #e6ece9;
  border-radius: 12px;
}
.home-stat-value {
  color: #0bb89c;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  /* Equal-width digits so the count-up in count_up.js does not jitter as it
     runs through 9 -> 10 -> 100. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  display: inline-block;
  text-align: center;
}
.home-stat-label {
  color: #7d8f88;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

/* ---- "Data in use" line ----------------------------------------------------
   Sits under the three cards, not above them: the visitor should first see what
   the platform is and where to go, and meet the usage evidence on the way out.
   Read live from the download registry, but styled as a quiet footnote rather
   than a headline panel, which would read as marketing on an institutional tool. */
.home-usage {
  margin: 30px auto 0;
  padding-top: 20px;
  border-top: 1px solid #e9eeec;
  text-align: center;
}
.home-usage-line {
  margin: 0;
  color: #7d8f88;
  font-size: 13.5px;
  line-height: 1.6;
}

/* ---- Live usage panel -------------------------------------------------------
   Presented as counters rather than a sentence: figures are scannable, and the
   pulsing badge says the numbers are a live record from the download registry
   rather than a marketing claim. */
.home-usage-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.home-usage-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #eafaf5;
  color: #0b7d6a;
  border: 1px solid #cdeee4;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: default;
}
.home-usage-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #0bb89c;
  box-shadow: 0 0 0 0 rgba(11, 184, 156, 0.55);
  animation: home-usage-pulse 2.2s ease-out infinite;
}
@keyframes home-usage-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(11, 184, 156, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(11, 184, 156, 0); }
  100% { box-shadow: 0 0 0 0 rgba(11, 184, 156, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .home-usage-dot { animation: none; }
}
.home-usage-since {
  font-size: 12px;
  color: #93a29c;
}
.home-usage-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 40px;
}
.home-usage-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 112px;
}
.home-usage-value {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.1;
  color: #0bb89c;
  font-variant-numeric: tabular-nums;
}
.home-usage-label {
  font-size: 12.5px;
  font-weight: 600;
  color: #7d8f88;
}
@media (max-width: 560px) {
  .home-usage-stats { gap: 12px 24px; }
  .home-usage-value { font-size: 23px; }
}

/* ---- Section label above the cards ---- */
.home-section-head {
  text-align: center;
  margin: 32px 0 20px;
  position: relative;
}
.home-section-head::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e9eeec;
  z-index: 0;
}
.home-section-label {
  position: relative;
  z-index: 1;
  display: inline-block;
  background: #ffffff;
  padding: 0 18px;
  color: #7d8f88;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* ---- Cards ---- */
.home-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}
.home-card-link {
  text-decoration: none;
  display: block;
  height: 100%;
}
.home-card {
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e6ece9;
  border-radius: 16px;
  padding: 24px 26px 22px;
  box-shadow: 0 2px 10px rgba(16, 40, 34, 0.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
}
.home-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: #0bb89c;
}
.home-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 38px rgba(16, 40, 34, 0.13);
  border-color: #cfe6df;
}
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.home-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eafaf5;
  border-radius: 14px;
}
.home-card-icon-img {
  width: 26px;
  height: 26px;
  display: block;
}
.home-card-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #0bb89c;
  background: #eafaf5;
  border-radius: 999px;
  padding: 5px 12px;
}
.home-card-title {
  color: #1b3b5a;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px;
}
.home-card-desc {
  color: #55636b;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 14px;
}
.home-card-points {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.home-card-point {
  position: relative;
  color: #55636b;
  font-size: 13.5px;
  line-height: 1.5;
  padding: 3px 0 3px 18px;
  /* A global `li { list-style: square }` rule in styles.css beats `list-style:none`
     on the parent list, so it has to be cleared on the item itself. Otherwise the
     theme's square marker renders alongside our coloured dot. */
  list-style: none;
}
.home-card-point::marker {
  content: "";
}
.home-card-point::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0bb89c;
}
.home-card-cta {
  margin-top: auto;
  color: #0bb89c;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.home-card-arrow {
  transition: transform .18s ease;
}
.home-card:hover .home-card-arrow {
  transform: translateX(5px);
}

/* ---- Per-card accents (harmonious, brand-adjacent) ---- */
.card-index::before { background: #0bb89c; }

.card-sim::before { background: #2f8f7d; }
.card-sim .home-card-icon { background: #e7f4f0; }
.card-sim .home-card-badge { color: #2f8f7d; background: #e7f4f0; }
.card-sim .home-card-point::before { background: #2f8f7d; }
.card-sim .home-card-cta { color: #2f8f7d; }

.card-evidence::before { background: #d99a3c; }
.card-evidence .home-card-icon { background: #fbf1e0; }
.card-evidence .home-card-badge { color: #c9862c; background: #fbf1e0; }
.card-evidence .home-card-point::before { background: #d99a3c; }
.card-evidence .home-card-cta { color: #c9862c; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .home-cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .home-title { font-size: 25px; }
  .home-lead { font-size: 15px; }
  .home-main { padding: 26px 16px 40px; }
  .home-stat { flex: 1 1 44%; }
}