*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #24313f;
  background:
    radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.9) 0 0.8rem, transparent 0.9rem),
    radial-gradient(circle at 88% 18%, rgba(182, 237, 230, 0.7) 0 1.2rem, transparent 1.3rem),
    linear-gradient(135deg, #f6fbf9 0%, #eaf8f5 42%, #fff7ef 100%);
  min-height: 100vh;
}

.page {
  max-width: 78rem;
  margin: 0 auto;
  padding: 5.6rem 2rem 6.4rem;
}

.language-toggle {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  width: fit-content;
  margin: 0 auto 2.6rem;
  padding: 0.5rem;
  background: rgba(255, 255, 255, 0.74);
  border: 0.1rem solid rgba(100, 185, 173, 0.22);
  border-radius: 999rem;
  box-shadow: 0 1rem 2.4rem rgba(31, 95, 91, 0.09);
}

.language-toggle__button {
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: 800;
  color: #456263;
  background: transparent;
  border: none;
  border-radius: 999rem;
  padding: 0.8rem 1.4rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.language-toggle__button--active {
  color: #fff;
  background: #1d8f87;
  box-shadow: 0 0.8rem 1.8rem rgba(29, 143, 135, 0.22);
}

.header {
  text-align: center;
  margin-bottom: 3.2rem;
  position: relative;
  isolation: isolate;
}

.header::before,
.header::after {
  content: "";
  position: absolute;
  border-radius: 999rem;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: inset 0 0 0 0.1rem rgba(100, 185, 173, 0.16);
  z-index: -1;
}

.header::before {
  width: 7.2rem;
  height: 7.2rem;
  top: -2.8rem;
  left: 4%;
}

.header::after {
  width: 4.6rem;
  height: 4.6rem;
  right: 8%;
  bottom: -1.8rem;
}

.header__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #237c72;
  background: rgba(255, 255, 255, 0.82);
  border: 0.1rem solid rgba(100, 185, 173, 0.28);
  border-radius: 999rem;
  padding: 0.7rem 1.4rem;
  margin-bottom: 1.6rem;
}

.header h1 {
  font-size: clamp(3.2rem, 6vw, 5.4rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: #163b46;
  margin-bottom: 1.4rem;
}

.header__subtitle {
  font-size: 1.8rem;
  color: #587071;
  max-width: 56rem;
  margin: 0 auto;
}

.header__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.header__pills span {
  font-size: 1.4rem;
  color: #456263;
  background: rgba(255, 255, 255, 0.72);
  border: 0.1rem solid rgba(100, 185, 173, 0.2);
  border-radius: 999rem;
  padding: 0.8rem 1.3rem;
  box-shadow: 0 0.8rem 2rem rgba(31, 95, 91, 0.08);
}

.form {
  background: rgba(255, 255, 255, 0.9);
  border: 0.1rem solid rgba(255, 255, 255, 0.85);
  border-radius: 2.8rem;
  box-shadow: 0 2.4rem 7rem rgba(39, 92, 88, 0.15);
  padding: 3.6rem;
  backdrop-filter: blur(1rem);
}

.form__section {
  margin-bottom: 3.4rem;
  padding: 2.2rem;
  background: #ffffff;
  border: 0.1rem solid #e7f1ee;
  border-radius: 2rem;
}

.form__section:last-of-type {
  margin-bottom: 2.6rem;
}

.form__section-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 1.9rem;
  font-weight: 750;
  color: #1b4e59;
  margin-bottom: 2rem;
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem dashed #cfe4df;
}

.form__section-title::before {
  content: "";
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999rem;
  background: #80d7c8;
  box-shadow: 1.2rem 0 0 #ffd6a6;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.form__field--full {
  grid-column: 1 / -1;
}

.form__field label {
  font-size: 1.4rem;
  font-weight: 700;
  color: #355457;
}

.required {
  color: #e97171;
}

.form__field input,
.form__field select,
.form__field textarea {
  font-family: inherit;
  font-size: 1.5rem;
  padding: 1.2rem 1.4rem;
  border: 0.1rem solid #cfe0dc;
  border-radius: 1.2rem;
  background: #fbfffd;
  color: #24313f;
  box-shadow: inset 0 0.1rem 0.2rem rgba(36, 49, 63, 0.03);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.form__field input::placeholder,
.form__field textarea::placeholder {
  color: #8da09d;
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  background: #fff;
  border-color: #62cbbc;
  box-shadow: 0 0 0 0.4rem rgba(98, 203, 188, 0.18);
}

.form__field input:invalid:not(:placeholder-shown),
.form__field select:invalid,
.form__field textarea:invalid:not(:placeholder-shown) {
  border-color: #e63946;
}

.form__field textarea {
  resize: vertical;
  min-height: 13rem;
}

.form__turnstile {
  display: flex;
  justify-content: center;
  margin-bottom: 2.4rem;
}

.form__message {
  padding: 1.3rem 1.6rem;
  border-radius: 1.2rem;
  font-size: 1.4rem;
  margin-bottom: 2rem;
}

.form__message--success {
  background: #e8fbf2;
  color: #1d7350;
  border: 0.1rem solid #a9ead0;
}

.form__message--error {
  background: #fff0ed;
  color: #b94635;
  border: 0.1rem solid #ffc6bc;
}

.form__submit {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1.7rem;
  font-weight: 800;
  padding: 1.6rem 2rem;
  background: linear-gradient(135deg, #41b7a8 0%, #1d8f87 100%);
  color: #fff;
  border: none;
  border-radius: 999rem;
  cursor: pointer;
  box-shadow: 0 1.2rem 2.8rem rgba(29, 143, 135, 0.26);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.form__submit:hover:not(:disabled) {
  transform: translateY(-0.1rem);
  box-shadow: 0 1.5rem 3.2rem rgba(29, 143, 135, 0.32);
}

.form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 60rem) {
  .page {
    padding: 3.6rem 1.4rem 4.8rem;
  }

  .language-toggle {
    margin-bottom: 2rem;
  }

  .form__grid {
    grid-template-columns: 1fr;
  }

  .form {
    padding: 1.4rem;
    border-radius: 2.2rem;
  }

  .form__section {
    padding: 1.8rem;
  }

  .header h1 {
    font-size: 3.4rem;
  }

  .header::before {
    width: 4.8rem;
    height: 4.8rem;
    top: -1.8rem;
    left: 0;
  }

  .header::after {
    width: 3.2rem;
    height: 3.2rem;
    right: 0.4rem;
    bottom: -1rem;
  }
}