html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { -webkit-font-smoothing: antialiased; }

.font-display { letter-spacing: -0.02em; }

.hero-bg {
  background:
    radial-gradient(ellipse 60% 70% at 85% 10%, rgba(122, 79, 168, 0.55), transparent 70%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(104, 204, 209, 0.16), transparent 70%),
    linear-gradient(160deg, #2B1840 0%, #3A1F57 55%, #2B1840 100%);
}

.eyebrow {
  font-family: Figtree, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid #68CCD1; outline-offset: 3px; }
.btn-primary { background: #582C83; color: #fff; box-shadow: 0 10px 24px -10px rgba(88, 44, 131, .7); }
.btn-primary:hover { background: #462268; }
.btn-light { background: #fff; color: #582C83; }
.btn-light:hover { background: #F1EBF7; }
.btn-ghost-dark { border: 1.5px solid rgba(255,255,255,.35); color: #fff; }
.btn-ghost-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-ghost { border: 1.5px solid #DCD5CB; color: #582C83; background: #fff; }
.btn-ghost:hover { border-color: #582C83; }

/* Form */
.form-input {
  width: 100%;
  border: 1.5px solid #E4DDD2;
  border-radius: 14px;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  color: #221C29;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input::placeholder { color: #9A93A3; }
.form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23582C83' stroke-width='2.2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}
.form-select { color: #9A93A3; }
.form-select.has-value { color: #221C29; }
.form-select option { color: #221C29; }
.form-input:focus { outline: none; border-color: #582C83; box-shadow: 0 0 0 4px rgba(88, 44, 131, .14); }

/* Candidate checklist */
.check-item { cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.check-item:hover { border-color: #C9B6DE; }
.check-item input { position: absolute; opacity: 0; pointer-events: none; }
.check-box { transition: background-color .2s ease, border-color .2s ease; }
.check-box svg { opacity: 0; transform: scale(.6); transition: opacity .2s ease, transform .2s ease; }
.check-item input:checked ~ .check-box { background: #582C83; border-color: #582C83; }
.check-item input:checked ~ .check-box svg { opacity: 1; transform: scale(1); }
.check-item:has(input:checked) { border-color: #582C83; background: #FBF9FD; box-shadow: 0 6px 18px -10px rgba(88,44,131,.5); }
.check-item:has(input:focus-visible) { outline: 3px solid #68CCD1; outline-offset: 2px; }

/* Steps connector */
.step-line { background-image: linear-gradient(90deg, rgba(255,255,255,.35) 40%, transparent 0); background-size: 8px 1.5px; background-repeat: repeat-x; background-position: center; }

/* FAQ */
.faq-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.faq-panel > div { overflow: hidden; }
.faq-item.open .faq-panel { grid-template-rows: 1fr; }
.faq-icon { transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* Photo cards with readable text over images */
.photo-shade { background: linear-gradient(180deg, rgba(31,16,48,0) 25%, rgba(31,16,48,.72) 60%, rgba(31,16,48,.94) 100%); }

/* Reveal on scroll (only applied once JS has run) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* Mobile sticky CTA bar */
.mobile-cta { transform: translateY(110%); transition: transform .3s ease; }
.mobile-cta.show { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover { transform: none; }
}