/* =========================================================
   Survey — "Which perspective?" chooser
   ========================================================= */

.survey-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 4rem) var(--gutter);
  background: #3a5ae8 url("../assest/images/survey-bg.webp") center / cover no-repeat;
  overflow: hidden;
}

.survey {
  width: 100%;
  max-width: 46rem;
  text-align: center;
}

.survey__back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
  color: var(--white);
  opacity: .85;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .95rem;
  text-decoration: none;
  transition: opacity .25s var(--ease);
}
.survey__back:hover { opacity: 1; }
.survey__back svg { transform: rotate(180deg); flex: none; }

.survey__title {
  margin: 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  color: var(--white);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.25;
}

.survey__subtitle {
  margin: .6rem 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  color: var(--white);
  opacity: .92;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  line-height: 1.4;
}

.survey__options {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(2rem, 5vh, 3rem);
}

.survey-card {
  position: relative;
  flex: 1 1 20rem;
  max-width: 22rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.6rem);
  border-radius: 20px;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 20px 45px -22px rgba(15, 25, 60, .45);
  transition: transform .35s var(--ease-hover), box-shadow .35s var(--ease-hover);
}

.survey-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 55px -20px rgba(15, 25, 60, .55);
}

.survey-card--supplier {
  background: linear-gradient(115.43deg, #FFFFFF 54.43%, #78CB9B 138.25%);
}

.survey-card--buyer {
  background: linear-gradient(133.3deg, #FFFFFF 63.17%, #2C5BFD 208.9%);
}

.survey-card__icon {
  position: absolute;
  top: clamp(1.1rem, 1.8vw, 1.5rem);
  right: clamp(1.1rem, 1.8vw, 1.5rem);
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
}

.survey-card__kicker {
  margin: 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 500;
  color: var(--ink-900);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.survey-card__role {
  margin: .1rem 0 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.survey-card--supplier .survey-card__role {
  background-image: linear-gradient(180deg, #78CB9B 10.1%, #C1D177 100%);
}

.survey-card--buyer .survey-card__role {
  background-image: linear-gradient(180deg, #2C5BFD 0%, #5EE0F7 100%);
}

.survey-card__cta {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: clamp(1.3rem, 2.6vw, 1.9rem);
  font-family: var(--font-ui);
  font-weight: 500;
  color: var(--ink-900);
  font-size: clamp(.92rem, 1.1vw, 1rem);
}

.survey-card__cta svg {
  flex: none;
  transition: transform .3s var(--ease);
}

.survey-card:hover .survey-card__cta svg { transform: translateX(4px); }

/* Fallback for engines without background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .survey-card--supplier .survey-card__role { color: #78CB9B; -webkit-text-fill-color: currentColor; }
  .survey-card--buyer .survey-card__role { color: #2C5BFD; -webkit-text-fill-color: currentColor; }
}

@media (max-width: 640px) {
  .survey__options { flex-direction: column; align-items: stretch; }
  .survey-card {
    flex: 1 1 10rem;
    max-width: none;
    padding: 1.1rem 1.25rem 1rem;
  }
  .survey-card__cta { margin-top: .9rem; }
}