/* ═══════════════════════════════════════
   TMatch Page Styles
   ═══════════════════════════════════════ */

/* ---------- Hero ---------- */
.tm-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  margin-top: -64px;
  padding: 144px 144px 96px;
  overflow: hidden;
}

.tm-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(238, 245, 241, 0) 55%, rgb(238, 245, 241) 100%),
    radial-gradient(ellipse 100% 115% at 50% 32%,
      rgb(255, 253, 243) 0%,
      rgb(238, 245, 241) 51%,
      rgb(198, 224, 210) 100%
    );
}

/* Left yellow-green blob */
.tm-hero__bg::before {
  content: '';
  position: absolute;
  width: 68%;
  height: 90%;
  left: -8%;
  top: -10%;
  border-radius: 50%;
  transform: rotate(25deg);
  filter: blur(50px);
  background: linear-gradient(175.44deg,
    rgba(247, 243, 113, 0.18) 12.89%,
    rgba(0, 188, 107, 0.18) 27.36%,
    rgba(0, 188, 107, 0) 50%
  );
}

/* Right yellow-green blob */
.tm-hero__bg::after {
  content: '';
  position: absolute;
  width: 62%;
  height: 85%;
  right: -8%;
  top: -10%;
  border-radius: 50%;
  transform: rotate(155deg);
  filter: blur(50px);
  background: linear-gradient(147.56deg,
    rgba(247, 243, 113, 0.18) 24.89%,
    rgba(0, 188, 107, 0.18) 34.98%,
    rgba(0, 188, 107, 0) 50%
  );
}

.tm-hero__title {
  position: relative;
  z-index: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 64px;
  line-height: 72px;
  letter-spacing: -2.56px;
  color: #1c5b5d;
  text-align: center;
  margin: 0;
}

/* ---------- App Section ---------- */
.tm-app {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 144px;
}

.tm-app__inner {
  display: flex;
  align-items: center;
  gap: 64px;
  max-width: 1200px;
  width: 100%;
}

.tm-app__portals {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 16px;
  padding: 48px 24px;
  flex-shrink: 0;
}

.tm-app__portal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.tm-app__portal-name {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 30px;
  line-height: 28px;
  letter-spacing: -0.6px;
  text-align: center;
  margin: 0;
}

.tm-app__portal-name--tmind {
  color: #447569;
}

.tm-app__portal-name--tmatch {
  color: #1f9a73;
}

.tm-app__portal-sub {
  font-family: 'Inter', sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #444846;
  text-align: center;
  margin: 0;
}

.tm-app__portal-icon {
  width: 64px;
  height: 64px;
}

.tm-app__connector {
  width: 64px;
  height: 108px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.tm-app__connector img {
  width: 64px;
  height: auto;
}

.tm-app__text {
  flex: 1;
  min-width: 0;
}

.tm-app__text h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  margin: 0 0 32px;
}

.tm-app__text p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1a1c1b;
  margin: 0 0 16px;
}

.tm-app__text p:last-child {
  margin-bottom: 0;
}

.tm-app__text .tm-highlight {
  font-weight: 600;
  color: #1f9a73;
}

/* ---------- Directory Section ---------- */
.tm-directory {
  padding: 96px 144px;
}

.tm-directory__inner {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  max-width: 1152px;
  margin: 0 auto;
}

.tm-directory__text {
  flex: 1;
  min-width: 0;
}

.tm-directory__text h2 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  margin: 0 0 32px;
}

.tm-directory__text p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1a1c1b;
  margin: 0 0 16px;
}

.tm-directory__text p:last-of-type {
  margin-bottom: 32px;
}

.tm-directory__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  background: #1c5b5d;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.tm-directory__cta:hover {
  opacity: 0.9;
}

/* Profile card */
.tm-profile-card {
  flex-shrink: 0;
  width: 586px;
  border-radius: 16px;
  background: linear-gradient(to top, #fdfdf4, #e3f1ec 78%, #daf2e8);
  box-shadow: 0px 13px 50px -16px rgba(0, 0, 0, 0.25);
  padding: 48px;
  display: flex;
  gap: 36px;
  overflow: hidden;
}

.tm-profile-card__photo {
  width: 200px;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.tm-profile-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.tm-profile-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.tm-profile-card__name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #447569;
  margin: 0;
}

.tm-profile-card__title {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #444846;
  margin: 0;
}

.tm-profile-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tm-profile-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background: #f8fbf9;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #1a1c1b;
}

.tm-profile-card__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tm-profile-card__detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #447569;
}

.tm-profile-card__detail img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.tm-profile-card__detail strong {
  color: #1a1c1b;
  font-weight: 600;
}

.tm-profile-card__book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 125px;
  border-radius: 360px;
  background: linear-gradient(94deg, #f99522 50%, #fee478 100%);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.tm-profile-card__book:hover {
  opacity: 0.9;
}

/* ---------- How It Works ---------- */
.tm-how {
  padding: 96px 144px;
}

.tm-how__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.tm-how__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  text-align: center;
  margin: 0 0 48px;
}

.tm-how__steps {
  display: flex;
  gap: 64px;
  position: relative;
}

.tm-how__steps::before {
  content: '';
  position: absolute;
  top: 47px;
  left: 173px;
  width: 792px;
  height: 1px;
  background: #c4c7c5;
}

.tm-how__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.tm-how__num {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #447569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.72px;
  color: #fff;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tm-how__step-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: -0.24px;
  color: #1c5b5d;
  margin: 0;
}

.tm-how__step-desc {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1a1c1b;
  margin: 8px 0 0;
}

/* ---------- Features Grid ---------- */
.tm-features {
  padding: 96px 144px;
}

.tm-features__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.tm-features__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  text-align: center;
  margin: 0 0 48px;
}

.tm-features__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.tm-features__card {
  background: #447569;
  border-radius: 10px;
  padding: 48px;
  color: #fff;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tm-features__card--wide {
  width: calc(50% - 12px);
  flex-shrink: 0;
}

.tm-features__card--narrow {
  flex: 1;
  min-width: 400px;
}

.tm-features__card h3 {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  letter-spacing: -0.28px;
  margin: 0 0 16px;
}

.tm-features__card p {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  margin: 0;
}

.tm-features__note {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  line-height: 20px;
  color: #747876;
  margin-top: 0;
}

.tm-features__note a {
  color: #747876;
  text-decoration: underline;
}

/* ---------- FAQ ---------- */
.tm-faq {
  padding: 96px 144px;
  background: #fff;
}

.tm-faq__inner {
  max-width: 1152px;
  margin: 0 auto;
}

.tm-faq__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  text-align: center;
  margin: 0 0 48px;
}

.tm-faq__list {
  padding: 0 24px;
}

.tm-faq__item {
  border-bottom: 1px solid #c4c7c5;
  padding: 32px 12px;
}

.tm-faq__question {
  display: flex;
  align-items: center;
  gap: 32px;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.tm-faq__question-text {
  flex: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.4px;
  color: #1a1c1b;
}

.tm-faq__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.tm-faq__icon--add {
  display: block;
}

.tm-faq__icon--remove {
  display: none;
}

.tm-faq__answer {
  display: none;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #1a1c1b;
  margin-top: 16px;
  padding-right: 56px;
}

.tm-faq__item.is-open .tm-faq__icon--add {
  display: none;
}

.tm-faq__item.is-open .tm-faq__icon--remove {
  display: block;
}

.tm-faq__item.is-open .tm-faq__answer {
  display: block;
}

/* ---------- Bottom CTA ---------- */
.tm-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  padding: 96px 144px;
  overflow: hidden;
}

.tm-cta__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tm-cta__glow-green {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-23.37deg);
  width: 382px;
  height: 248px;
  filter: blur(50px);
  background: radial-gradient(circle, rgba(157, 237, 193, 1) 0%, rgba(143, 231, 182, 0.3) 100%);
}

.tm-cta__glow-yellow {
  position: absolute;
  top: 42%;
  left: 30%;
  transform: rotate(-38.53deg);
  width: 190px;
  height: 276px;
  filter: blur(50px);
  background: linear-gradient(175deg, rgba(244, 225, 79, 0.3) 13%, rgba(229, 253, 106, 0.3) 27%);
}

.tm-cta__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  max-width: 700px;
  text-align: center;
}

.tm-cta__title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.96px;
  color: #1c5b5d;
  margin: 0;
}

.tm-cta__buttons {
  display: flex;
  gap: 24px;
  align-items: center;
}

.tm-cta__btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 360px;
  background: linear-gradient(94deg, #f99522 50%, #fee478 100%);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.tm-cta__btn-primary:hover {
  opacity: 0.9;
}

.tm-cta__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: 360px;
  border: 1px solid #447569;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: #1c4f44;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}

.tm-cta__btn-secondary:hover {
  background: rgba(68, 117, 105, 0.05);
}

.tm-cta__disclaimer {
  position: relative;
  z-index: 1;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  line-height: 24px;
  color: #444846;
  text-align: center;
  margin-top: 48px;
  max-width: 1287px;
  width: 100%;
}

/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */

@media (max-width: 1200px) {
  .tm-hero,
  .tm-app,
  .tm-directory,
  .tm-how,
  .tm-features,
  .tm-faq,
  .tm-cta {
    padding-left: 48px;
    padding-right: 48px;
  }

  .tm-directory__inner {
    flex-direction: column;
  }

  .tm-profile-card {
    width: 100%;
  }

  .tm-how__steps::before {
    display: none;
  }
}

@media (max-width: 968px) {
  .tm-hero__title {
    font-size: 44px;
    line-height: 52px;
    letter-spacing: -1.76px;
  }

  .tm-app__inner {
    flex-direction: column;
  }

  .tm-app__text h2,
  .tm-directory__text h2,
  .tm-how__title,
  .tm-features__title,
  .tm-faq__title,
  .tm-cta__title {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.72px;
  }

  .tm-how__steps {
    flex-direction: column;
    gap: 48px;
    align-items: center;
  }

  .tm-how__step {
    max-width: 400px;
  }

  .tm-features__card--wide,
  .tm-features__card--narrow {
    width: 100%;
    min-width: 0;
    flex: none;
  }

  .tm-profile-card {
    flex-direction: column;
    align-items: center;
  }

  .tm-profile-card__photo {
    width: 100%;
    height: 240px;
  }
}

@media (max-width: 640px) {
  .tm-hero,
  .tm-app,
  .tm-directory,
  .tm-how,
  .tm-features,
  .tm-faq,
  .tm-cta {
    padding-left: 24px;
    padding-right: 24px;
  }

  .tm-hero {
    min-height: 400px;
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .tm-hero__title {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1.28px;
  }

  .tm-app__portals {
    flex-direction: column;
    gap: 24px;
  }

  .tm-app__connector {
    width: auto;
    height: auto;
    transform: rotate(90deg);
  }

  .tm-app__text h2,
  .tm-directory__text h2,
  .tm-how__title,
  .tm-features__title,
  .tm-faq__title,
  .tm-cta__title {
    font-size: 28px;
    line-height: 36px;
    letter-spacing: -0.56px;
  }

  .tm-faq__question {
    gap: 16px;
  }

  .tm-faq__question-text {
    font-size: 17px;
  }

  .tm-cta__buttons {
    flex-direction: column;
    width: 100%;
  }

  .tm-cta__btn-primary,
  .tm-cta__btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .tm-directory__cta {
    width: 100%;
    text-align: center;
  }
}