/* ═══════════════════════════════════════
   styles.css — Wallen Nation Fan Portal
   ═══════════════════════════════════════ */

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

:root {
  --parchment:   #E8DCC8;
  --parchment2:  #D4C4A8;
  --dark:        #2C2A1E;
  --dark2:       #1A1810;
  --brown:       #A0622A;
  --brown-light: #C17A3A;
  --brown-dim:   #6B3E18;
  --cream:       #F5EDD8;
  --muted:       #8A7A6A;
  --white:       #FAF5EC;
  --glass:       rgba(160,98,42,0.1);
  --border:      rgba(160,98,42,0.3);
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--parchment);
  color: var(--dark);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Paper texture overlay ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ══ HERO ══════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--dark) 0%, var(--dark2) 100%);
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(160,98,42,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 100%, rgba(160,98,42,0.1) 0%, transparent 60%);
  z-index: 0;
}

.hero-bg-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0.15; z-index: 0;
}

/* Torn paper edge at bottom of hero */
.hero-torn-edge {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 60px;
  z-index: 2;
  background: var(--parchment);
  clip-path: polygon(0% 60%, 2% 30%, 5% 55%, 8% 20%, 12% 50%, 16% 15%, 20% 45%, 24% 25%, 28% 55%, 32% 30%, 36% 50%, 40% 10%, 44% 45%, 48% 20%, 52% 55%, 56% 30%, 60% 50%, 64% 15%, 68% 45%, 72% 25%, 76% 55%, 80% 20%, 84% 50%, 88% 30%, 92% 55%, 96% 25%, 100% 45%, 100% 100%, 0% 100%);
}

.star-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.star {
  position: absolute; border-radius: 50%;
  background: var(--brown-light);
  animation: twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
  opacity: 0;
}
@keyframes twinkle {
  0%,100% { opacity:0; transform:scale(0.8); }
  50%      { opacity:var(--op,0.5); transform:scale(1.2); }
}

.hero-badge {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--border); border-radius: 100px;
  padding: 0.35rem 1.1rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brown-light); background: rgba(160,98,42,0.1);
  margin-bottom: 2rem; backdrop-filter: blur(8px);
}
.hero-badge::before {
  content: ''; width: 6px; height: 6px;
  background: var(--brown-light); border-radius: 50%;
  box-shadow: 0 0 8px var(--brown-light);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; box-shadow:0 0 8px var(--brown-light); }
  50%      { opacity:0.4; box-shadow:0 0 2px var(--brown-light); }
}

.hero-title {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 8vw, 6rem);
  font-weight: 900; line-height: 1.0; letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
  color: var(--cream);
  text-shadow: 2px 4px 20px rgba(0,0,0,0.5);
}
.hero-title em { font-style: italic; font-weight: 400; color: var(--brown-light); }

.hero-sub {
  position: relative; z-index: 1;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: rgba(212,196,168,0.8);
  letter-spacing: 0.06em; margin-bottom: 3rem;
  font-weight: 300; line-height: 1.8; max-width: 420px;
}

.hero-divider {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: 3rem; width: 100%; max-width: 480px;
}
.hero-divider span { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); }
.hero-divider small { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brown-dim); white-space:nowrap; }

.scroll-cue {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--brown-dim); font-size: 0.7rem; letter-spacing: 0.15em;
  text-transform: uppercase; cursor: pointer; transition: color 0.2s;
}
.scroll-cue:hover { color: var(--brown-light); }
.scroll-cue .arrow {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--brown-light), transparent);
  animation: scroll-drop 2s ease-in-out infinite;
}
@keyframes scroll-drop {
  0%   { opacity:0; transform:scaleY(0); transform-origin:top; }
  50%  { opacity:1; transform:scaleY(1); }
  100% { opacity:0; transform:scaleY(1) translateY(20px); }
}

/* ══ FORM SECTION ══════════════════════ */
.section {
  max-width: 580px; margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
  position: relative; z-index: 1;
}

.steps-indicator {
  display: flex; align-items: center; justify-content: center;
  gap: 0; margin-bottom: 2rem;
}
.step-pill {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem; border-radius: 100px;
  border: 1px solid rgba(160,98,42,0.25); background: transparent;
  transition: all 0.3s;
}
.step-pill.active { border-color:var(--brown); background:rgba(160,98,42,0.12); }
.step-pill.done   { border-color:rgba(76,175,80,0.4); background:rgba(76,175,80,0.08); }
.pill-num {
  width:20px; height:20px; border-radius:50%;
  background:rgba(160,98,42,0.2);
  display:flex; align-items:center; justify-content:center;
  font-size:0.65rem; font-weight:600; color:var(--brown-dim);
  transition:all 0.3s;
}
.step-pill.active .pill-num { background:var(--brown); color:#fff; }
.step-pill.done .pill-num   { background:#4CAF50; color:#fff; }
.pill-label { font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); font-weight:500; }
.step-pill.active .pill-label { color:var(--brown); }
.step-pill.done .pill-label   { color:#4CAF50; }
.step-line { flex:1; max-width:40px; height:1px; background:rgba(160,98,42,0.2); }

.form-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 2rem;
  box-shadow: 0 8px 32px rgba(44,42,30,0.12), 0 2px 8px rgba(44,42,30,0.08);
}

.card-eyebrow { font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brown); margin-bottom:0.4rem; }
.card-title   { font-family:'Playfair Display',serif; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:700; color:var(--dark); margin-bottom:0.5rem; line-height:1.2; }
.card-desc    { font-size:0.84rem; color:var(--muted); line-height:1.7; margin-bottom:1.75rem; }

.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.field { display:flex; flex-direction:column; gap:0.45rem; margin-bottom:1.25rem; }
.field label { font-size:0.7rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brown); font-weight:600; }
.field input, .field select {
  background: var(--white); border: 1px solid rgba(160,98,42,0.25);
  border-radius: 8px; padding: 0.8rem 1rem;
  font-family: 'Inter', sans-serif; font-size: 0.9rem;
  color: var(--dark); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%; -webkit-appearance: none;
}
.field select { cursor:pointer; }
.field select option { background:var(--cream); color:var(--dark); }
.field input::placeholder { color:rgba(138,122,106,0.5); }
.field input:focus, .field select:focus {
  border-color: var(--brown);
  box-shadow: 0 0 0 3px rgba(160,98,42,0.1);
}

.btn-submit {
  width:100%; margin-top:0.75rem; padding:1rem;
  background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dim) 100%);
  border:none; border-radius:10px;
  font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:#fff; cursor:pointer;
  transition:opacity 0.2s, transform 0.15s, box-shadow 0.2s;
  box-shadow:0 8px 24px rgba(160,98,42,0.3);
}
.btn-submit:hover  { transform:translateY(-1px); box-shadow:0 12px 32px rgba(160,98,42,0.4); }
.btn-submit:active { transform:translateY(0); }
.btn-submit:disabled { opacity:0.5; cursor:not-allowed; transform:none; }

.status-msg { margin-top:1rem; padding:0.75rem 1rem; border-radius:8px; font-size:0.82rem; display:none; line-height:1.5; }
.status-msg.error   { background:rgba(220,53,69,0.08);  border:1px solid rgba(220,53,69,0.3);  color:#c0392b; display:block; }
.status-msg.loading { background:rgba(160,98,42,0.08);  border:1px solid var(--border);         color:var(--brown); display:block; }
.status-msg.success { background:rgba(76,175,80,0.08);  border:1px solid rgba(76,175,80,0.3);  color:#2e7d32; display:block; }

/* ── Upload ── */
.upload-section { margin-bottom:1.5rem; }
.upload-section-label {
  font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--brown); margin-bottom:0.6rem;
  display:flex; align-items:center; gap:0.5rem;
}
.upload-required { color:var(--muted); font-weight:400; letter-spacing:0.05em; text-transform:none; font-size:0.68rem; }

.up-box {
  border:1.5px dashed rgba(160,98,42,0.35); border-radius:10px;
  padding:1.75rem 1rem; text-align:center; cursor:pointer;
  transition:border-color 0.2s, background 0.2s;
  background:rgba(160,98,42,0.03);
  display:flex; flex-direction:column; align-items:center; gap:0.5rem;
}
.up-box:hover { border-color:var(--brown); background:rgba(160,98,42,0.07); }
.up-label { font-size:0.88rem; font-weight:500; color:var(--dark); }
.up-sub   { font-size:0.72rem; color:var(--muted); }

.up-preview { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--brown); max-height:180px; margin-top:0.5rem; }
.up-preview img { width:100%; height:180px; object-fit:cover; display:block; }
.up-preview .btn-change { position:absolute; bottom:0.6rem; right:0.6rem; display:inline-flex; align-items:center; gap:0.3rem; }

.btn-change {
  background:rgba(160,98,42,0.2); border:1px solid var(--border);
  border-radius:6px; padding:0.3rem 0.75rem;
  font-size:0.72rem; color:var(--brown); cursor:pointer;
  font-family:'Inter',sans-serif; transition:background 0.2s;
}
.btn-change:hover { background:rgba(160,98,42,0.3); }

.id-security-note {
  display:flex; align-items:flex-start; gap:0.6rem;
  background:rgba(160,98,42,0.06); border:1px solid rgba(160,98,42,0.15);
  border-radius:8px; padding:0.75rem 1rem;
  font-size:0.75rem; color:var(--muted); line-height:1.5; margin-bottom:1.5rem;
}

/* ══ INVITE REVEAL ══════════════════════ */
.invite-wrap { text-align:center; animation:fade-up 0.6s ease forwards; }
@keyframes fade-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

.invite-eyebrow { font-size:0.68rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brown); margin-bottom:1.5rem; }

.seal-ring {
  width:100px; height:100px; border-radius:50%;
  border:2px solid var(--brown);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 1.5rem;
  box-shadow:0 0 30px rgba(160,98,42,0.25);
  animation:seal-spin 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes seal-spin { from{transform:scale(0) rotate(-180deg);opacity:0} to{transform:scale(1) rotate(0);opacity:1} }
.seal-icon { font-size:2.5rem; animation:seal-bounce 0.5s 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes seal-bounce { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }

.code-card {
  background:linear-gradient(135deg, rgba(160,98,42,0.1), rgba(160,98,42,0.03));
  border:1px solid var(--brown); border-radius:12px;
  padding:1.5rem 2rem; margin:0 auto 1.5rem; max-width:420px;
  box-shadow:0 0 30px rgba(160,98,42,0.1);
  position:relative; overflow:hidden;
}
.code-label  { font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--brown-dim); margin-bottom:0.6rem; }
.code-value  { font-family:'Playfair Display',serif; font-size:clamp(1.2rem,4vw,1.7rem); font-weight:700; letter-spacing:0.12em; color:var(--brown); word-break:break-all; }
.code-stamp  { position:absolute; top:50%; right:12px; transform:translateY(-50%) rotate(15deg); font-size:0.5rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(160,98,42,0.25); border:1px solid rgba(160,98,42,0.2); padding:0.2rem 0.5rem; border-radius:4px; font-weight:600; pointer-events:none; }

.invite-message { font-size:0.85rem; color:var(--muted); line-height:1.75; margin-bottom:1.75rem; max-width:360px; margin-left:auto; margin-right:auto; }
.invite-message strong { color:var(--brown); }

.invite-actions { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

.btn-copy {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.75rem 1.4rem;
  background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dim) 100%);
  border:none; border-radius:8px;
  font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; cursor:pointer; transition:all 0.2s;
  box-shadow:0 6px 20px rgba(160,98,42,0.3);
}
.btn-copy:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(160,98,42,0.4); }
.btn-copy.copied { background:linear-gradient(135deg,#4CAF50,#2E7D32); box-shadow:0 6px 20px rgba(76,175,80,0.3); }

.btn-email {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.75rem 1.4rem; background:transparent;
  border:1px solid var(--border); border-radius:8px;
  font-family:'Inter',sans-serif; font-size:0.8rem; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--brown); cursor:pointer; transition:all 0.2s;
}
.btn-email:hover { background:var(--glass); border-color:var(--brown); }

/* ══ WAITING STATE ══════════════════════ */
.waiting-state { margin-top:2rem; text-align:center; animation:fade-up 0.5s ease forwards; padding:1.5rem 1rem; border-top:1px solid rgba(160,98,42,0.15); }
.waiting-spinner { position:relative; width:64px; height:64px; margin:0 auto 1.25rem; }
.spinner-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(160,98,42,0.15); border-top-color:var(--brown); border-right-color:var(--brown-dim); animation:spin 1.8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.spinner-crown { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.4rem; animation:crown-pulse 2.5s ease-in-out infinite; }
@keyframes crown-pulse { 0%,100%{opacity:0.5;transform:scale(0.9)} 50%{opacity:1;transform:scale(1.05)} }
.waiting-msg { font-family:'Playfair Display',serif; font-size:clamp(0.9rem,2.5vw,1.05rem); font-style:italic; color:var(--brown); line-height:1.6; min-height:2.5rem; margin-bottom:1.25rem; transition:opacity 0.4s ease; }
.waiting-msg.fade { opacity:0; }
.waiting-reminder { font-size:0.78rem; color:var(--muted); line-height:1.6; display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.btn-remind { display:inline-flex; align-items:center; gap:0.4rem; padding:0.55rem 1.1rem; background:transparent; border:1px solid rgba(160,98,42,0.3); border-radius:100px; font-family:'Inter',sans-serif; font-size:0.75rem; font-weight:500; color:var(--brown); cursor:pointer; transition:all 0.2s; letter-spacing:0.04em; }
.btn-remind:hover { background:var(--glass); border-color:var(--brown); }

/* ══ UPLOAD BOXES ═══════════════════════ */
.upload-section { margin-bottom:1.5rem; }

/* ══ FAN CARD ═══════════════════════════ */
.fan-card {
  width:100%; max-width:480px; margin:0 auto;
  background:linear-gradient(135deg, var(--dark) 0%, var(--dark2) 70%, #2A1800 100%);
  border:1px solid var(--brown);
  border-radius:20px; overflow:hidden;
  box-shadow:0 0 50px rgba(160,98,42,0.2), 0 20px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(160,98,42,0.2);
  animation:card-appear 0.8s cubic-bezier(0.34,1.56,0.64,1) forwards;
  position:relative;
}
.fan-card::before {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(160,98,42,0.015) 30px, rgba(160,98,42,0.015) 60px);
  pointer-events:none;
}
@keyframes card-appear { from{opacity:0;transform:scale(0.9) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }

.fan-card-header {
  background:linear-gradient(135deg, rgba(160,98,42,0.25), rgba(160,98,42,0.06));
  border-bottom:1px solid rgba(160,98,42,0.3);
  padding:1rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between;
}
.fan-card-club { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:900; letter-spacing:0.05em; color:var(--brown-light); }
.fan-card-title-badge { font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--brown-dim); border:1px solid rgba(160,98,42,0.3); padding:0.2rem 0.6rem; border-radius:100px; }

.fan-card-body { padding:1.25rem 1.5rem; display:flex; gap:1.25rem; align-items:flex-start; }
.fan-card-photo-wrap { position:relative; flex-shrink:0; width:90px; height:90px; }
.fan-card-photo { width:90px; height:90px; border-radius:50%; object-fit:cover; border:2px solid var(--brown); display:block; background:var(--dark); }
.fan-card-photo-ring { position:absolute; inset:-4px; border-radius:50%; border:1px solid rgba(160,98,42,0.3); animation:ring-spin 8s linear infinite; background:conic-gradient(from 0deg, transparent 70%, rgba(160,98,42,0.4) 100%); }
@keyframes ring-spin { to{transform:rotate(360deg)} }

.fan-card-info { flex:1; min-width:0; }
.fan-card-name { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--white); margin-bottom:0.2rem; line-height:1.2; }
.fan-card-tier { font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--brown-light); margin-bottom:0.75rem; }
.fan-card-details { display:flex; flex-direction:column; gap:0.3rem; }
.fan-card-detail { display:flex; justify-content:space-between; align-items:center; font-size:0.72rem; gap:0.5rem; }
.detail-label { color:var(--muted); flex-shrink:0; }
.detail-value { color:var(--white); font-weight:500; text-align:right; }

.fan-card-quote { padding:0.75rem 1.5rem; font-family:'Playfair Display',serif; font-style:italic; font-size:0.82rem; color:rgba(193,122,58,0.65); border-top:1px solid rgba(160,98,42,0.15); text-align:center; line-height:1.6; }
.fan-card-footer { background:rgba(160,98,42,0.06); border-top:1px solid rgba(160,98,42,0.2); padding:0.6rem 1.5rem; display:flex; align-items:center; justify-content:space-between; }
.fan-card-hologram { font-size:1.2rem; color:var(--brown); animation:holo-pulse 3s ease-in-out infinite; }
@keyframes holo-pulse { 0%,100%{opacity:0.4;transform:scale(0.9)} 50%{opacity:1;transform:scale(1.1)} }
.fan-card-serial { font-size:0.6rem; letter-spacing:0.15em; color:var(--brown-dim); font-family:'Inter',monospace; }

.card-actions { margin-top:1.5rem; text-align:center; }

/* ══ FLOATING CTA ═══════════════════════ */
.floating-cta { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(0); z-index:888; transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity:1; }
.floating-cta.hidden { transform:translateX(-50%) translateY(120px); opacity:0; pointer-events:none; }
.floating-btn {
  position:relative; display:inline-flex; align-items:center; gap:0.6rem;
  padding:0.9rem 2rem;
  background:linear-gradient(135deg, var(--brown) 0%, var(--brown-dim) 100%);
  border:none; border-radius:100px;
  font-family:'Inter',sans-serif; font-size:0.88rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:#fff; cursor:pointer;
  box-shadow:0 8px 32px rgba(160,98,42,0.45), 0 2px 8px rgba(0,0,0,0.2);
  transition:transform 0.2s, box-shadow 0.2s; overflow:hidden; white-space:nowrap;
}
.floating-btn:hover { transform:translateY(-2px) scale(1.03); box-shadow:0 14px 40px rgba(160,98,42,0.55); }
.floating-btn-pulse { position:absolute; inset:0; border-radius:100px; background:linear-gradient(135deg,rgba(255,255,255,0.2),transparent); animation:btn-shimmer 2.5s ease-in-out infinite; }
@keyframes btn-shimmer { 0%{opacity:0;transform:translateX(-100%)} 50%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }

/* ══ TOAST ══════════════════════════════ */
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(80px); background:var(--dark); border:1px solid var(--border); border-radius:100px; padding:0.7rem 1.5rem; font-size:0.82rem; color:var(--brown-light); backdrop-filter:blur(20px); transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s; opacity:0; z-index:9999; white-space:nowrap; box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.toast.show { transform:translateX(-50%) translateY(0); opacity:1; }

/* ══ FOOTER ══════════════════════════════ */
footer { text-align:center; padding:3rem 1.5rem; border-top:1px solid rgba(160,98,42,0.15); color:var(--muted); font-size:0.72rem; letter-spacing:0.08em; position:relative; z-index:1; }

/* ══ RESPONSIVE ══════════════════════════ */
@media (max-width:520px) {
  .form-row { grid-template-columns:1fr; }
  .form-card { padding:1.75rem 1.25rem; }
  .step-line { max-width:20px; }
  .pill-label { display:none; }
  .step-pill { padding:0.4rem 0.6rem; }
}