/* WIT Academy Teens — shared landing styles */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter_latin_ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/inter/inter_latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --color-white: #ffffff;
  --color-bg-deep: #02050c;
  --color-bg-mid: #04101a;
  --color-bg-ink: #060608;
  --color-bg-panel: #071326;
  --color-gold: #c9a84c;
  --color-gold-text: #a38a3a;
  --color-gold-cta-start: #cfaf50;
  --color-gold-cta-mid: #e3c563;
  --color-gold-cta-end: #b58f35;
  --color-red: #ef4444;
  --color-green: #22c55e;
  --color-surface-base: rgb(6, 14, 28);
  --color-surface-alt: rgb(7, 18, 36);
  --white-a04: rgba(255, 255, 255, 0.04);
  --white-a08: rgba(255, 255, 255, 0.08);
  --white-a12: rgba(255, 255, 255, 0.12);
  --white-a20: rgba(255, 255, 255, 0.2);
  --white-a40: rgba(255, 255, 255, 0.4);
  --white-a62: rgba(255, 255, 255, 0.62);
  --white-a78: rgba(255, 255, 255, 0.78);
  --black-a24: rgba(0, 0, 0, 0.24);
  --black-a34: rgba(0, 0, 0, 0.34);
  --black-a45: rgba(0, 0, 0, 0.45);
  --gold-a16: rgba(201, 168, 76, 0.16);
  --gold-a20: rgba(201, 168, 76, 0.2);
  --gold-a24: rgba(201, 168, 76, 0.24);
  --gold-a28: rgba(201, 168, 76, 0.28);
  --gold-a32: rgba(201, 168, 76, 0.32);
  --gold-a40: rgba(201, 168, 76, 0.4);
  --gold-a52: rgba(201, 168, 76, 0.52);
  --green-a12: rgba(34, 197, 94, 0.12);
  --green-a62: rgba(34, 197, 94, 0.62);
  --surface-elevated-a92: rgba(8, 16, 28, 0.92);
  --surface-elevated-a98: rgba(14, 25, 43, 0.98);
  --gold-highlight-a92: rgba(238, 203, 110, 0.92);
  --radius-surface: 16px;
  --radius-pill: 999px;
  --content-max: 1240px;
  --content-gutter: clamp(20px, 4vw, 40px);
  --transition: 180ms ease;
  --transition-medium: 280ms ease;
  --shadow-card: 0 18px 42px var(--black-a34);
  --shadow-card-gold:
    0 18px 40px var(--black-a45),
    inset 0 1px 0 var(--white-a04);
  --shadow-glow-text: 0 0 8px var(--gold-a24),
    0 0 20px var(--gold-a20),
    0 0 42px var(--gold-a16);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(72% 58% at 50% 0%, rgba(18, 56, 112, 0.16), rgba(18, 56, 112, 0) 70%),
    linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg-mid) 46%, var(--color-bg-deep) 100%);
  color: var(--color-white);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }

/* ============ Layout shell ============ */
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.rail {
  width: min(calc(var(--content-max) + (var(--content-gutter) * 2)), 100%);
  margin: 0 auto;
  padding-inline: var(--content-gutter);
}

/* ============ Header ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 14px 0;
  background: linear-gradient(180deg, var(--surface-elevated-a98), var(--surface-elevated-a92));
  border-bottom: 1px solid var(--gold-a16);
  backdrop-filter: saturate(140%) blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-header__logo {
  height: 38px;
  width: auto;
}

.site-header__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.site-header__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-a78);
  border: 1px solid var(--white-a12);
  border-radius: var(--radius-pill);
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}

/* ============ Main ============ */
.main {
  flex: 1;
  padding-block: clamp(40px, 6vw, 80px);
}

/* ============ Hero / page header ============ */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.eyebrow {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hero__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.hero__title em {
  font-style: normal;
  color: var(--color-gold);
  text-shadow: var(--shadow-glow-text);
}

.hero__subtitle {
  max-width: 60ch;
  margin: 0;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  color: var(--white-a78);
}

/* ============ Card / panel ============ */
.panel {
  border: 1px solid var(--gold-a28);
  border-radius: var(--radius-surface);
  background:
    linear-gradient(180deg, rgba(10, 22, 40, 0.92), rgba(6, 14, 28, 0.96));
  box-shadow: var(--shadow-card-gold);
  padding: clamp(24px, 4vw, 44px);
}

.panel--narrow { max-width: 720px; margin-inline: auto; }
.panel--center { text-align: center; }

.panel__title {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.panel__lead {
  margin: 0 0 28px;
  color: var(--white-a78);
  line-height: 1.6;
}

/* ============ Form ============ */
.form {
  display: grid;
  gap: 18px;
}

.form__row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form__row--2 { grid-template-columns: 1fr 1fr; }
}

.form__group { display: grid; gap: 8px; }

.form__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white-a78);
}

.form__label .req { color: var(--color-gold); margin-left: 4px; }

.form__legend {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--gold-a16);
  border: 1px solid var(--gold-a32);
  border-radius: var(--radius-pill);
  text-shadow: 0 0 12px var(--gold-a24);
}

.form__input,
.form__select,
.form__textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(2, 8, 16, 0.7);
  border: 1px solid var(--white-a12);
  border-radius: 12px;
  color: var(--color-white);
  font-size: 1rem;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

.form__input::placeholder,
.form__textarea::placeholder { color: var(--white-a40); }

.form__input:focus,
.form__select:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--gold-a52);
  background: rgba(2, 8, 16, 0.9);
  box-shadow: 0 0 0 3px var(--gold-a16);
}

.form__select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-gold) 50%),
                    linear-gradient(135deg, var(--color-gold) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.form__select option { background: var(--color-bg-deep); color: var(--color-white); }

.form__textarea { min-height: 110px; resize: vertical; }

.form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(2, 8, 16, 0.5);
  border: 1px solid var(--white-a08);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}

.form__check input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--color-gold);
  cursor: pointer;
}

.form__check__text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--white-a78);
}

.form__check__text a { color: var(--color-gold); text-decoration: underline; }

.form__hint {
  font-size: 0.84rem;
  color: var(--white-a62);
  line-height: 1.45;
}

.form__error {
  margin: 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.52);
  border-radius: 10px;
  display: none;
}

.form__error.is-visible { display: block; }

/* ============ Button ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 3.5rem;
  padding: 0.95rem 1.8rem;
  border: 1px solid var(--gold-a52);
  border-radius: var(--radius-surface);
  background: linear-gradient(135deg, var(--color-gold-cta-start) 0%, var(--color-gold-cta-end) 100%);
  color: var(--color-bg-ink);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), filter var(--transition), transform var(--transition);
  box-shadow: 0 8px 18px var(--black-a24), inset 0 0 0 1px var(--white-a08);
  text-align: center;
}

.btn:hover {
  border-color: var(--gold-highlight-a92);
  background: linear-gradient(135deg, var(--color-gold-cta-mid) 0%, var(--color-gold-cta-end) 100%);
  color: var(--color-bg-ink);
  filter: saturate(1.06) contrast(1.04);
  box-shadow: 0 10px 22px var(--black-a34), inset 0 0 0 1px var(--white-a20);
  transform: translateY(-1px);
}

.btn:disabled { cursor: wait; filter: saturate(0.65) brightness(0.85); transform: none; }

.btn--block { width: 100%; }

.btn--ghost {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--white-a20);
  box-shadow: none;
}

.btn--ghost:hover {
  background: var(--gold-a16);
  border-color: var(--gold-a52);
  color: var(--color-white);
  filter: none;
  box-shadow: none;
}

/* ============ Steps ============ */
.steps {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 28px 0 12px;
  list-style: none;
  padding: 0;
}

@media (min-width: 720px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

.steps__item {
  position: relative;
  padding: 22px 20px 22px 64px;
  background: rgba(8, 18, 34, 0.7);
  border: 1px solid var(--white-a08);
  border-radius: 12px;
  text-align: left;
}

.steps__num {
  position: absolute;
  top: 22px;
  left: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold-a20);
  border: 1px solid var(--gold-a40);
  color: var(--color-gold);
  font-weight: 800;
}

.steps__title {
  margin: 0 0 6px;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--color-white);
}

.steps__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--white-a78);
}

.steps__item--active { border-color: var(--gold-a52); background: rgba(20, 32, 54, 0.9); }
.steps__item--done .steps__num { background: var(--green-a12); border-color: var(--green-a62); color: var(--color-green); }

/* ============ Success badge ============ */
.success-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--green-a12);
  border: 1px solid var(--green-a62);
  color: var(--color-green);
}

.success-badge svg { width: 44px; height: 44px; }

.pending-badge {
  background: var(--gold-a20);
  border-color: var(--gold-a52);
  color: var(--color-gold);
}

/* ============ Info row (subtle footnote) ============ */
.info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--white-a12);
  font-size: 0.84rem;
  color: var(--white-a62);
  text-align: center;
}

.info-row strong { color: var(--color-white); font-weight: 700; }

/* ============ Action row ============ */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}

/* ============ Footer ============ */
.site-footer {
  margin-top: auto;
  padding: 28px 0 32px;
  border-top: 1px solid var(--gold-a16);
  background: rgba(2, 8, 16, 0.6);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--white-a62);
}

.site-footer__inner a {
  color: var(--white-a78);
  text-decoration: none;
  border-bottom: 1px dashed var(--white-a20);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}

/* ============ Utility ============ */
.text-center { text-align: center; }
.muted { color: var(--white-a62); }
.small { font-size: 0.88rem; }
.gold { color: var(--color-gold); }

.divider {
  margin: 24px 0;
  border: 0;
  border-top: 1px dashed var(--white-a12);
}

/* ============ Section blocks ============ */
.section {
  margin-bottom: clamp(48px, 6vw, 80px);
}

.section__head {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 44px);
}

.section__title {
  margin: 14px 0 10px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
}

.section__lead {
  max-width: 60ch;
  margin: 0 auto;
  color: var(--white-a78);
  line-height: 1.6;
}

.section__lead + .section__lead { margin-top: 1.1em; }

/* ============ Cards grid ============ */
.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  padding: 26px 24px;
  background: linear-gradient(180deg, rgba(10, 22, 40, 0.9), rgba(6, 14, 28, 0.96));
  border: 1px solid var(--gold-a28);
  border-radius: var(--radius-surface);
  box-shadow: var(--shadow-card-gold);
  transition: border-color var(--transition), transform var(--transition);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: var(--gold-a20);
  border: 1px solid var(--gold-a40);
  color: var(--color-gold);
  font-size: 1.2rem;
  font-weight: 800;
}

.card__title {
  margin: 0 0 8px;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--color-white);
}

.card__body {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--white-a78);
}

/* ============ Warning block ============ */
.warning {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.08);
  border-radius: var(--radius-surface);
  margin-bottom: clamp(28px, 4vw, 40px);
}

.warning__icon {
  flex-shrink: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: #fca5a5;
}

.warning__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fecaca;
}

.warning__body {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--white-a78);
}

.warning__body strong { color: var(--color-white); }

/* ============ Alert banner (distinct from steps) ============ */
.alert-banner {
  position: relative;
  text-align: center;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px);
  margin: clamp(20px, 3vw, 28px) 0;
  background:
    linear-gradient(180deg, rgba(239, 68, 68, 0.14), rgba(239, 68, 68, 0.06));
  border: 1px solid rgba(239, 68, 68, 0.42);
  border-radius: var(--radius-surface);
  box-shadow:
    inset 4px 0 0 0 var(--color-red),
    0 12px 28px rgba(239, 68, 68, 0.12);
}

.alert-banner__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 4px 14px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fecaca;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.5);
  border-radius: var(--radius-pill);
}

.alert-banner__title {
  margin: 6px 0 8px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-white);
}

.alert-banner__body {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--white-a78);
}

.alert-banner__body strong { color: var(--color-white); }

/* ============ Benefits list ============ */
.benefits {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) { .benefits { grid-template-columns: repeat(2, 1fr); } }

.benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: rgba(8, 18, 34, 0.7);
  border: 1px solid var(--white-a08);
  border-radius: 12px;
}

.benefit__check {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--green-a12);
  border: 1px solid var(--green-a62);
  color: var(--color-green);
}

.benefit__check svg { width: 16px; height: 16px; }

.benefit__title {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-white);
}

.benefit__body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--white-a78);
}

.benefit--active {
  border-color: var(--gold-a40);
  background: rgba(20, 32, 54, 0.9);
  box-shadow: 0 0 0 1px var(--gold-a16), 0 12px 28px var(--black-a34);
}

.benefit--active .benefit__check {
  background: var(--gold-a20);
  border-color: var(--gold-a52);
  color: var(--color-gold);
}

.benefit--pending .benefit__check {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--white-a20);
  color: var(--white-a62);
}

.benefit__tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--gold-a16);
  border: 1px solid var(--gold-a40);
  border-radius: var(--radius-pill);
  vertical-align: middle;
}

/* ============ Footer expanded ============ */
.site-footer__disclaimer {
  width: 100%;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--white-a08);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--white-a62);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}