@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@600;700&display=swap');

#multiStepForm {
  --form-cyan:#50dfdb; --form-blue:#5677ff; --form-violet:#b345ec;
  position:relative; isolation:isolate; box-sizing:border-box; width:100%; max-width:none;
  margin:38px auto 64px; padding:clamp(24px,4vw,48px); overflow:hidden;
  border:1px solid rgba(255,255,255,.11); border-radius:30px;
  background:linear-gradient(145deg,rgba(13,27,46,.97),rgba(6,14,27,.98));
  box-shadow:0 35px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.06);
  font-family:'Manrope',sans-serif; transition:border-color .3s,box-shadow .3s,transform .3s;
}
#multiStepForm:hover { transform:translateY(-3px); border-color:rgba(80,223,219,.28); box-shadow:0 42px 100px rgba(0,0,0,.53),0 0 60px rgba(80,223,219,.055); }
#multiStepForm::before { content:""; position:absolute; z-index:-2; width:560px; height:560px; top:-380px; left:-150px; border-radius:50%; background:radial-gradient(circle,rgba(80,223,219,.24),rgba(86,119,255,.09) 48%,transparent 70%); filter:blur(10px); animation:contributionAurora 10s ease-in-out infinite alternate; }
#multiStepForm::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.16; pointer-events:none; background-image:linear-gradient(115deg,transparent 30%,rgba(80,223,219,.14) 47%,transparent 63%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:230% 100%,34px 34px,34px 34px; animation:contributionSweep 9s linear infinite; }
@keyframes contributionAurora { to{transform:translate3d(600px,240px,0) scale(1.18)} }
@keyframes contributionSweep { to{background-position:-230% 0,34px 17px,34px 17px} }

#multiStepForm .progress-bar-container { height:4px; margin:-2px 0 28px; border:0; background:rgba(255,255,255,.07); }
#multiStepForm .progress-bar { width:100%!important; background:linear-gradient(90deg,var(--form-cyan),var(--form-blue),var(--form-violet)); box-shadow:0 0 18px rgba(80,223,219,.5); }
#multiStepForm .step.active { position:relative; display:block; animation:contributionEnter .55s cubic-bezier(.2,.8,.2,1) both; }
@keyframes contributionEnter { from{opacity:0;transform:translateY(18px)} }

.contribution-kicker { display:inline-flex; align-items:center; gap:8px; margin-bottom:10px; color:var(--form-cyan); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.contribution-kicker::before { content:""; width:25px; height:2px; background:var(--form-cyan); box-shadow:0 0 10px var(--form-cyan); }
#multiStepForm h2 { max-width:820px; margin:0 0 32px; color:#f8fbff; font:700 clamp(28px,4vw,48px)/1.08 'Space Grotesk',sans-serif; letter-spacing:-.04em; text-wrap:balance; }
.contribution-lead { max-width:680px; margin:13px 0 28px; color:#91a0b6; font-size:14px; line-height:1.65; }

#multiStepForm .groupe { position:relative; margin-bottom:16px; }
#multiStepForm .groupe.flex-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
#multiStepForm .groupe.flex-row>div { margin:0!important; min-width:0; }
#multiStepForm .groupe label { margin:0 0 8px; color:#b8c3d3; font-size:11px; font-weight:800; letter-spacing:.075em; text-transform:uppercase; }
#multiStepForm input[type="text"],#multiStepForm input[type="email"],#multiStepForm textarea,#multiStepForm select { min-height:52px; padding:14px 15px; border:1px solid rgba(255,255,255,.115); border-radius:14px; outline:0; background:rgba(3,10,20,.66); color:#f8fbff; font:600 14px 'Manrope'; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); transition:border-color .22s,box-shadow .22s,background .22s,transform .22s; }
#multiStepForm input:hover,#multiStepForm textarea:hover,#multiStepForm select:hover { background:rgba(6,15,29,.86); border-color:rgba(80,223,219,.32); }
#multiStepForm input:focus,#multiStepForm textarea:focus,#multiStepForm select:focus { transform:translateY(-1px); border-color:var(--form-cyan); background:rgba(7,17,32,.94); box-shadow:0 0 0 4px rgba(80,223,219,.11),0 10px 28px rgba(0,0,0,.18); }
#multiStepForm input[readonly] { color:#8f9db1; cursor:not-allowed; background:rgba(255,255,255,.025); }

#additional-fields-container { display:grid; grid-template-columns:minmax(0,1fr); gap:14px; margin:24px 0 18px; }
#additional-fields-container:empty { display:none; }
#additional-fields-container .groupe { margin:0; padding:15px; border:1px solid rgba(255,255,255,.1); border-radius:18px; background:linear-gradient(145deg,rgba(255,255,255,.052),rgba(255,255,255,.018)); box-shadow:0 15px 30px rgba(0,0,0,.16); animation:lyricCardIn .38s cubic-bezier(.2,.8,.2,1) both; transition:transform .24s,border-color .24s,box-shadow .24s; }
#additional-fields-container .groupe:hover { transform:translateY(-3px); border-color:rgba(80,223,219,.32); box-shadow:0 20px 38px rgba(0,0,0,.22),0 0 25px rgba(80,223,219,.04); }
@keyframes lyricCardIn { from{opacity:0;transform:scale(.96) translateY(12px)} }
#additional-fields-container textarea { width:100%; height:190px; min-height:190px; max-height:190px; resize:none; overflow-y:auto; line-height:1.65; }
#additional-fields-container .delete { margin-top:10px; padding:8px 11px; border:1px solid rgba(255,92,119,.25); border-radius:10px; background:rgba(255,72,104,.08); color:#ff91a5; font:700 11px 'Manrope'; cursor:pointer; transition:.2s; }
#additional-fields-container .delete:hover { transform:translateY(-2px); color:#fff; background:rgba(255,72,104,.22); border-color:rgba(255,92,119,.52); }

#multiStepForm .add-elements { display:grid; grid-template-columns:1fr 54px; gap:10px; align-items:end; margin-top:22px; padding:18px; border:1px dashed rgba(80,223,219,.25); border-radius:18px; background:rgba(80,223,219,.035); }
#multiStepForm .add-elements label { grid-column:1/-1; }
#multiStepForm #add-button { display:grid; place-items:center; width:52px; height:52px; min-height:52px; margin:0!important; border:0; border-radius:14px; background:linear-gradient(135deg,var(--form-cyan),var(--form-blue)); color:#fff; font-size:25px; box-shadow:0 10px 28px rgba(86,119,255,.25); transition:transform .2s,box-shadow .2s,filter .2s; }
#multiStepForm #add-button:hover { transform:translateY(-3px) rotate(4deg); box-shadow:0 15px 32px rgba(80,223,219,.25); filter:brightness(1.12); }
#multiStepForm .multi-buttons { margin-top:20px; }
#multiStepForm .btn-next { position:relative; min-height:58px; overflow:hidden; border-radius:16px; background:linear-gradient(105deg,var(--form-blue),var(--form-violet) 52%,var(--form-cyan)); background-size:180% 100%; font:800 14px 'Manrope'; letter-spacing:.02em; box-shadow:0 15px 35px rgba(86,119,255,.25); transition:transform .22s,box-shadow .22s,background-position .4s; }
#multiStepForm .btn-next::after { content:"→"; display:inline-block; margin-left:12px; font-size:20px; vertical-align:-1px; transition:transform .22s; }
#multiStepForm .btn-next:hover { transform:translateY(-3px); background-position:100% 0; box-shadow:0 20px 42px rgba(86,119,255,.36); }
#multiStepForm .btn-next:hover::after { transform:translateX(5px); }
#multiStepForm #error-message { margin:0 0 18px!important; padding:13px 16px; border:1px solid rgba(255,76,108,.28); border-radius:13px; background:rgba(255,57,91,.09); color:#ff93a6!important; font:700 13px 'Manrope'!important; }

@media(max-width:720px){#multiStepForm{width:100%;max-width:480px;margin:20px auto 40px;padding:22px 15px;border-radius:23px}#multiStepForm .groupe.flex-row,#additional-fields-container{grid-template-columns:1fr}#multiStepForm h2{margin-bottom:26px;font-size:29px}.contribution-lead{margin-bottom:22px}#multiStepForm .add-elements{padding:13px}.main-content{overflow:visible}}
@media(max-width:560px){#multiStepForm{width:100%;max-width:390px}}
@media(max-width:420px){#multiStepForm{width:100%;max-width:320px}}
@media(prefers-reduced-motion:reduce){#multiStepForm,#multiStepForm::before,#multiStepForm::after,#multiStepForm *{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}