/* Homepage-only funding timeline. All displayed financial data is illustrative. */
.index-page .funding-timeline {
  --funding-ink: #123e67;
  --funding-muted: #5d7481;
  --funding-line: rgba(18, 62, 103, .15);
  --funding-accent: #39734b;
  --funding-teal: #0c8cab;
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 7vw, 104px);
  background:
    radial-gradient(circle at 9% 8%, rgba(12, 140, 171, .12), transparent 31%),
    radial-gradient(circle at 92% 92%, rgba(57, 115, 75, .11), transparent 34%),
    #f4f8fa;
}

.funding-timeline-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: clamp(48px, 6vw, 76px);
}

.funding-kicker,
.funding-stage {
  display: block;
  color: var(--funding-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.funding-timeline-header h2 {
  margin: 12px 0 0;
  color: var(--funding-ink);
  font-size: clamp(38px, 2rem + 2vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -.055em;
}

.funding-timeline-header h2 span {
  color: var(--funding-accent);
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 400;
}

.funding-demo-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 14px;
  border: 1px solid var(--funding-line);
  border-radius: 999px;
  color: var(--funding-muted);
  background: rgba(255, 255, 255, .58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.funding-years {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.funding-years::before,
.funding-years::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: calc(16.666% - 1px);
  right: calc(16.666% - 1px);
  border-radius: 999px;
  pointer-events: none;
}

.funding-years::before {
  top: 37px;
  height: 13px;
  background: linear-gradient(90deg, #78becb, #3d9772 48%, #184f75);
  box-shadow: 0 12px 18px rgba(27, 72, 91, .18);
  transform: perspective(480px) rotateX(56deg);
}

.funding-years::after {
  top: 38px;
  height: 3px;
  background: rgba(255, 255, 255, .58);
}

.funding-year {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.funding-year-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  min-height: 306px;
  padding: 0 22px 26px;
  text-align: center;
}

.funding-milestone {
  position: relative;
  z-index: 2;
  width: 76px;
  height: 76px;
  margin-bottom: 34px;
  border-radius: 50%;
  background: linear-gradient(145deg, #74c8d2, #0c809e 58%, #07556e);
  box-shadow:
    0 10px 0 #07566d,
    0 20px 30px rgba(18, 62, 103, .26),
    inset 0 2px 2px rgba(255, 255, 255, .7);
  transform: perspective(260px) rotateX(20deg);
  transition: transform .35s ease, box-shadow .35s ease;
}

.funding-year:nth-child(2) .funding-milestone {
  background: linear-gradient(145deg, #9ed4ad, #3b8d60 58%, #235f40);
  box-shadow:
    0 10px 0 #235d40,
    0 20px 30px rgba(38, 97, 66, .24),
    inset 0 2px 2px rgba(255, 255, 255, .72);
}

.funding-year:nth-child(3) .funding-milestone {
  background: linear-gradient(145deg, #7caeca, #225b81 58%, #113b60);
  box-shadow:
    0 10px 0 #123d5e,
    0 20px 30px rgba(18, 62, 103, .26),
    inset 0 2px 2px rgba(255, 255, 255, .64);
}

.funding-milestone::before {
  content: '';
  position: absolute;
  inset: 13px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 50%;
  box-shadow: inset 0 5px 10px rgba(0, 0, 0, .10);
}

.funding-milestone span {
  position: absolute;
  inset: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(10, 46, 65, .2);
}

.funding-year-card:hover .funding-milestone {
  transform: perspective(260px) rotateX(20deg) translateY(-7px) scale(1.04);
  box-shadow:
    0 14px 0 #07566d,
    0 28px 38px rgba(18, 62, 103, .28),
    inset 0 2px 2px rgba(255, 255, 255, .7);
}

.funding-year:nth-child(2) .funding-year-card:hover .funding-milestone {
  box-shadow:
    0 14px 0 #235d40,
    0 28px 38px rgba(38, 97, 66, .26),
    inset 0 2px 2px rgba(255, 255, 255, .72);
}

.funding-year:nth-child(3) .funding-year-card:hover .funding-milestone {
  box-shadow:
    0 14px 0 #123d5e,
    0 28px 38px rgba(18, 62, 103, .28),
    inset 0 2px 2px rgba(255, 255, 255, .64);
}

.funding-year-top {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 7px;
}

.funding-year-top h3 {
  margin: 0;
  color: var(--funding-ink);
  font-size: clamp(38px, 3vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.055em;
}

.funding-stage { font-size: 9px; }

.funding-total {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px;
  margin-top: 22px;
}

.funding-total span {
  color: var(--funding-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.funding-total strong {
  color: var(--funding-ink);
  font-size: clamp(25px, 2.2vw, 34px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.index-page.dark-mode .funding-timeline {
  --funding-ink: #e8f3fa;
  --funding-muted: #c3d3db;
  --funding-line: rgba(190, 218, 228, .2);
  --funding-accent: #b4dba7;
  background:
    radial-gradient(circle at 9% 8%, rgba(12, 140, 171, .18), transparent 31%),
    radial-gradient(circle at 92% 92%, rgba(105, 163, 117, .16), transparent 34%),
    #102637;
}

.index-page.dark-mode .funding-demo-badge {
  background: rgba(255, 255, 255, .04);
}

@media (max-width: 767px) {
  .funding-timeline-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .funding-years {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-left: 86px;
  }

  .funding-years::before,
  .funding-years::after {
    top: 36px;
    bottom: 36px;
    left: 31px;
    right: auto;
    height: auto;
  }

  .funding-years::before {
    width: 13px;
    background: linear-gradient(180deg, #78becb, #3d9772 48%, #184f75);
    transform: perspective(480px) rotateY(38deg);
  }

  .funding-years::after {
    left: 33px;
    width: 3px;
    background: rgba(255, 255, 255, .48);
  }

  .funding-year-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 146px;
    align-items: center;
    gap: 18px;
    padding: 22px 20px;
    border: 1px solid rgba(18, 62, 103, .10);
    border-radius: 18px;
    background: rgba(255, 255, 255, .56);
    text-align: left;
  }

  .funding-milestone {
    position: absolute;
    top: 35px;
    left: -84px;
    width: 64px;
    height: 64px;
    margin: 0;
  }

  .funding-milestone::before { inset: 11px; }
  .funding-milestone span { inset: 24px; }

  .funding-year-top {
    align-items: flex-start;
    gap: 5px;
  }

  .funding-total {
    align-items: flex-end;
    margin: 0;
  }

  .index-page.dark-mode .funding-year-card {
    border-color: rgba(190, 218, 228, .12);
    background: rgba(255, 255, 255, .035);
  }
}

@media (max-width: 399px) {
  .funding-years { padding-left: 72px; }
  .funding-milestone { left: -70px; }
  .funding-year-card { grid-template-columns: 1fr; }
  .funding-total { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .funding-milestone { transition: none; }
}
