:root {
  --gold: oklch(0.82 0.17 84);
  --background: oklch(0.18 0.08 258);
  --foreground: oklch(0.97 0.015 90);
  --card: oklch(0.23 0.09 258);
  --muted: oklch(0.80 0.025 90);
  --input: oklch(0.97 0.015 90 / 22%);
  --border: oklch(0.82 0.17 84 / 28%);
  --destructive: oklch(0.62 0.22 28);
  --radius: 0.6rem;
}

* { box-sizing: border-box; }
html { background: var(--background); }
body {
  margin: 0;
  min-width: 320px;
  background-color: var(--background);
  color: var(--foreground);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  background-image:
    radial-gradient(circle at 50% 0%, oklch(0.30 0.12 258 / 35%), transparent 55%),
    linear-gradient(180deg, oklch(0.20 0.10 258), oklch(0.15 0.07 258));
}

button, input, textarea, select { font: inherit; }
button, select { cursor: pointer; }

.banner {
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid oklch(0.82 0.17 84 / 40%);
  background: oklch(0.20 0.12 258);
}
.banner img { display: block; width: 100%; height: auto; }
.banner-mobile { display: none !important; }

.main-content {
  width: min(100% - 2rem, 42rem);
  margin: 0 auto;
  padding: 2rem 0 3rem;
}

.page-title { margin-bottom: 2rem; text-align: center; }
.page-title h1 {
  margin: 0;
  color: var(--gold);
  font-size: clamp(1.875rem, 5vw, 2.25rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.church-title { margin: .25rem 0 0; font-size: clamp(1.25rem, 4vw, 1.5rem); font-weight: 700; }
.conference-title { margin: 1rem 0 0; font-size: clamp(1.125rem, 3.5vw, 1.25rem); font-weight: 600; }
.conference-hi { margin: 0; color: var(--gold); font-size: clamp(1rem, 3vw, 1.125rem); font-weight: 500; }
.gold-line { width: 5rem; height: 2px; margin: 1rem auto 0; background: var(--gold); }
.intro { margin: 1rem 0 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }

.form-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.25rem;
  border: 1px solid oklch(0.82 0.17 84 / 30%);
  border-radius: .75rem;
  background: oklch(0.23 0.09 258 / 95%);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,.45);
}
.field-group { display: flex; flex-direction: column; gap: .5rem; }
.field-group label { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; font-size: .875rem; font-weight: 600; line-height: 1.4; }
.field-group label small { color: var(--muted); font-size: .75rem; font-weight: 400; }
.field-group label b, .field-group label strong { color: var(--gold); }
.field-group label strong { font-weight: 700; }

input, textarea, select {
  width: 100%;
  color: var(--foreground);
  border: 1px solid var(--input);
  border-radius: .375rem;
  background: transparent;
  outline: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input, select { height: 2.5rem; padding: .5rem .75rem; }
textarea { min-height: 60px; padding: .625rem .75rem; resize: vertical; }
input::placeholder, textarea::placeholder, select:invalid { color: oklch(0.80 0.025 90 / 80%); }
input:focus, textarea:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
select { appearance: auto; }
option { color: #15192b; background: #fff; }

.phone-row { display: flex; gap: .5rem; width: 100%; }
#country { width: 52%; flex: 0 0 52%; }
#phone { min-width: 0; flex: 1; }
.hint { margin: 0; color: var(--muted); font-size: .75rem; }

.message { margin: 0; padding: .5rem .75rem; border-radius: .5rem; font-size: .875rem; line-height: 1.45; }
.message.error { color: #fff; border: 1px solid oklch(0.62 0.22 28 / 40%); background: oklch(0.62 0.22 28 / 15%); }

.submit-button {
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: .375rem;
  color: oklch(0.18 0.08 258);
  background: var(--gold);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: opacity .15s ease, transform .15s ease;
}
.submit-button:hover { opacity: .9; }
.submit-button:active { transform: translateY(1px); }
.submit-button:disabled { opacity: .5; cursor: not-allowed; }
.required-note { margin: 0; color: var(--muted); text-align: center; font-size: .75rem; line-height: 1.6; }
.required-note b { color: var(--gold); }

.modal[hidden], .message[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1rem; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); }
.modal-card { position: relative; width: min(100%, 24rem); padding: 1.5rem; border: 1px solid var(--border); border-radius: .75rem; background: oklch(0.20 0.08 258); box-shadow: 0 25px 60px rgba(0,0,0,.5); }
.modal-card p { color: var(--muted); line-height: 1.6; }
.success-title { display: flex; align-items: center; gap: .5rem; color: var(--gold); font-weight: 700; }
.check-icon { display: inline-grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 2px solid var(--gold); border-radius: 50%; font-size: .8rem; }

@media (min-width: 640px) {
  .banner-desktop { display: block !important; }
  .banner-mobile { display: none !important; }
  .main-content { padding-top: 3rem; }
  .form-card { padding: 2rem; }
  .intro { font-size: 1rem; }
  #country { width: 12rem; flex-basis: 12rem; }
}

@media (max-width: 639px) {
  .banner-desktop { display: none !important; }
  .banner-mobile { display: block !important; }
}