.epilepsy-hero {
  background: var(--color-navy);
}

/* ── Layout ───────────────────────────────────────────── */
.epilepsy-hero__inner {
  display: flex;
  align-items: center;
  gap: 112px;
}

/* ── Left column ──────────────────────────────────────── */
.epilepsy-hero__content {
  width: 51%;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.epilepsy-hero__text-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.epilepsy-hero__heading-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Heading ──────────────────────────────────────────── */
.epilepsy-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
}

.epilepsy-hero__heading-line1 {
  color: var(--color-white);
  display: block;
}

.epilepsy-hero__heading-line2 {
  font-weight: 400;
  background: linear-gradient(
    90deg,
    var(--color-white) 0%,
    #f5f9f9 7.14%,
    #ecf2f3 14.29%,
    #e2eced 21.43%,
    #d9e6e7 28.57%,
    #cfdfe1 35.71%,
    #c6d9db 42.86%,
    #bcd3d5 50%,
    #b3cccf 57.14%,
    #aac7c9 64.29%,
    #a0c0c3 71.43%,
    #97babd 78.57%,
    #8eb4b8 85.71%,
    #84aeb2 92.86%,
    var(--color-teal-light) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

/* ── Description ──────────────────────────────────────── */
.epilepsy-hero__description {
  color: var(--color-white-70);
  margin: 0;
  max-width: 561px;
}

/* ── Buttons — use .button .button--primary/.button--outlined ── */
.epilepsy-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

/* ── Stats ────────────────────────────────────────────── */
.epilepsy-hero__stats {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  column-gap: 40px;
  row-gap: 24px;
  align-items: flex-start;
  padding-top: 23px;
  border-top: 1px solid var(--color-white-10);
}

.epilepsy-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 114px;
  flex-shrink: 0;
}

.epilepsy-hero__stat svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.epilepsy-hero__stat-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.epilepsy-hero__stat-number {
  color: var(--color-white);
  display: block;
}

.epilepsy-hero__stat-label {
  color: var(--color-white-60);
  display: block;
}

/* ── Right visual column ──────────────────────────────── */
.epilepsy-hero__visual {
  flex: 1;
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Concentric rings decoration */
.epilepsy-hero__rings {
  width: 100%;
  max-width: 384px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}

.epilepsy-hero__rings svg {
  width: 100%;
  height: 100%;
}

/* White card – Board Certified */
.epilepsy-hero__card-certified {
  align-self: flex-end;
  max-width: 265px;
  width: fit-content;
  background: var(--color-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}

.epilepsy-hero__card-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(91, 138, 142, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.epilepsy-hero__card-certified-label {
  color: var(--color-text-muted);
  display: block;
}

.epilepsy-hero__card-certified-value {
  color: var(--color-navy);
  display: block;
  white-space: nowrap;
}

/* Teal gradient card – Same-Week */
.epilepsy-hero__card-appointment {
  max-width: 265px;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(
    135deg,
    #5b8a8e 0%,
    #5e8c90 8.33%,
    #608f93 16.67%,
    #639195 25%,
    #669498 33.33%,
    #68969a 41.67%,
    #6b999d 50%,
    #6e9b9f 58.33%,
    #709ea2 66.67%,
    #73a0a4 75%,
    #76a3a7 83.33%,
    #78a5a9 91.67%,
    #7ba8ac 100%
  );
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 24px;
}

.epilepsy-hero__card-appt-title {
  color: var(--color-white);
  margin: 0;
}

.epilepsy-hero__card-appt-subtitle {
  color: var(--color-white-90);
  margin-top: 12px;
}

.epilepsy-hero__card-appt-footer {
  border-top: 1px solid var(--color-white-10);
  padding-top: 11px;
}

.epilepsy-hero__card-appt-footer p {
  color: var(--color-white);
  margin: 0;
}

/* ── Tablet (≤ 1200px) ────────────────────────────────── */
@media (max-width: 1200px) {
  .epilepsy-hero__inner {
    gap: 48px;
  }
}

@media (max-width: 1023px) {
  .epilepsy-hero__inner {
    flex-direction: column;
  }

  .epilepsy-hero__content {
    width: 100%;
  }

  .epilepsy-hero__visual {
    width: 100%;
  }
}

/* ── Mobile (< 768px) ─────────────────────────────────── */
@media (max-width: 767px) {
  .epilepsy-hero__inner {
    gap: 32px;
  }

  .epilepsy-hero__visual {
    gap: 27px;
  }

  .epilepsy-hero__rings {
    max-width: 253px;
  }

  .epilepsy-hero__description {
    max-width: 100%;
  }

  .epilepsy-hero__buttons {
    gap: 16px;
  }

  .epilepsy-hero__stats {
    gap: 14px;
  }

  .epilepsy-hero__stat {
    width: 105px;
  }

  .epilepsy-hero__card-certified {
    padding: 16px;
    border-radius: 16px;
    gap: 10px;
  }

  .epilepsy-hero__card-avatar {
    width: 32px;
    height: 32px;

    svg {
      width: 16px;
      height: 16px;
    }
  }

  .epilepsy-hero__card-certified-label {
    font-size: 9px;
    line-height: 1.44;
  }

  .epilepsy-hero__card-certified-value {
    font-size: 11px;
    line-height: 1.45;
  }

  .epilepsy-hero__card-appointment {
    padding: 16px;
    border-radius: 16px;
    gap: 8px;
  }

  .epilepsy-hero__card-appt-subtitle {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 8px;
  }

  .epilepsy-hero__card-appt-footer {
    padding-top: 7px;
  }

  .epilepsy-hero__card-appt-footer p {
    font-size: 9px;
    line-height: 1.44;
  }
}