@import url("./styles.css");

/* The blue-violet design remains primary. Rose is only a light accent. */
:root {
  --rose: #ef8fbd;
  --rose-soft: #fff1f8;
}

.glow-two {
  background: rgba(239, 143, 189, 0.14);
}

.orbit-b {
  border-color: rgba(239, 143, 189, 0.52);
}

.campaign.active {
  border-color: rgba(218, 75, 145, 0.38);
  background: var(--rose-soft);
  color: #b63a79;
}

.card-index {
  background: var(--rose-soft);
  color: #bd4a82;
}

.campaign-number {
  color: #ffa9d1;
}

.final-cta-inner::after {
  border-color: rgba(239, 143, 189, 0.5);
}

/* A slightly larger type scale without changing the original composition. */
body {
  font-size: 17px;
}

.nav a,
.button {
  font-size: 15px;
}

.language,
.hero-note,
.floating-card,
.footer {
  font-size: 12px;
}

.hero-description {
  font-size: 18px;
  line-height: 1.6;
}

.button {
  min-height: 54px;
}

.section-topline,
.campaign-switch,
.campaign-card p,
.benefit-card p,
.step-list p,
.faq details p {
  font-size: 14px;
}

.campaign-card h2 {
  font-size: clamp(24px, 2.4vw, 34px);
}

.section-heading h2 {
  font-size: clamp(29px, 3.3vw, 46px);
}

.benefit-card h3,
.step-list h3 {
  font-size: 19px;
}

.steps-summary {
  font-size: 17px;
}

@media (max-width: 850px) {
  .hero {
    gap: 24px;
  }

  .hero-description {
    font-size: 17px;
    max-width: 620px;
  }
}

@media (max-width: 620px) {
  body {
    font-size: 16px;
  }

  h1 {
    font-size: clamp(38px, 10.2vw, 46px);
    line-height: 1.08;
  }

  .hero-description {
    font-size: 16px;
    line-height: 1.58;
  }

  .hero-actions {
    width: 100%;
  }

  .hero-actions .button {
    width: 100%;
  }

  .section-heading h2 {
    font-size: clamp(29px, 8vw, 38px);
  }

  .campaign-card h2 {
    font-size: 26px;
  }

  .benefit-card h3,
  .step-list h3 {
    font-size: 18px;
  }

  .benefit-card p,
  .step-list p,
  .faq details p {
    font-size: 14px;
    line-height: 1.6;
  }

  .steps-summary,
  .faq summary {
    font-size: 16px;
  }

  .final-cta h2 {
    font-size: 32px;
  }
}

@media (max-width: 390px) {
  .hero-actions {
    flex-direction: column;
  }

  .button {
    padding-inline: 16px;
  }
}