.join-page{background:var(--clr-bg);min-height:100vh;display:flex;flex-direction:column}.join-container{flex:1;width:100%;max-width:600px;margin:0 auto;padding:calc(var(--nav-height) + 2rem) 1.5rem 4rem;display:flex;flex-direction:column;justify-content:center}.join-header{text-align:center;margin-bottom:2.5rem}.join-header__title{font-family:var(--ff-heading);font-size:clamp(2rem,5vw,2.5rem);font-weight:700;margin-bottom:.5rem}.join-header__title span{color:var(--clr-gold)}.join-header__subtitle{color:var(--clr-grey);font-size:1rem}.join-card{background:var(--clr-surface);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:2rem;position:relative;overflow:hidden;box-shadow:0 10px 40px #0000004d}.join-progress{margin-bottom:2.5rem}.join-progress__bar{height:4px;background:#ffffff1a;border-radius:2px;margin-bottom:1rem;position:relative;overflow:hidden}.join-progress__fill{height:100%;background:var(--clr-gold);border-radius:2px;transition:width .4s var(--ease-out)}.join-progress__steps{display:flex;justify-content:space-between;font-size:.8rem;color:var(--clr-grey-dim);font-weight:500}.join-step.active{color:var(--clr-gold)}.form-step{display:none;animation:fadeIn .4s var(--ease-out)}.form-step.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.form-step__title{font-family:var(--ff-heading);font-size:1.5rem;margin-bottom:1.5rem;text-align:center}.form-group{margin-bottom:1.5rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.form-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.5rem;color:var(--clr-grey)}.form-label-opt{font-weight:400;color:var(--clr-grey-dim);font-size:.75rem;margin-left:.25rem}.form-input,.form-select{width:100%;padding:.8rem 1rem;background:var(--clr-bg);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--clr-white);font-family:var(--ff-body);font-size:.95rem;transition:.2s}.form-input:focus,.form-select:focus{outline:none;border-color:var(--clr-gold);box-shadow:0 0 0 3px var(--clr-gold-glow)}.form-textarea{resize:vertical}.category-select{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.category-option input{display:none}.category-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem 1rem;background:var(--clr-bg);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);cursor:pointer;transition:.2s;height:100%}.category-icon{margin-bottom:.75rem;color:var(--clr-grey);transition:.2s}.category-card span{font-size:.9rem;font-weight:600;color:var(--clr-grey);transition:.2s}.category-option input:checked+.category-card{background:#d4af371a;border-color:var(--clr-gold)}.category-option input:checked+.category-card .category-icon,.category-option input:checked+.category-card span{color:var(--clr-gold)}.category-card:hover{border-color:#ffffff4d}.file-upload{position:relative;width:100%}.file-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:2}.file-upload__area{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;border:2px dashed rgba(255,255,255,.15);border-radius:var(--radius-md);background:#ffffff05;transition:.2s}.file-upload:hover .file-upload__area{border-color:var(--clr-gold);background:#d4af370d}.file-upload__icon{margin-bottom:.5rem;color:var(--clr-grey-dim)}.file-upload__preview{margin-top:1rem;display:none;width:100px;height:100px;border-radius:var(--radius-sm);background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.2)}.form-actions{display:flex;gap:1rem;margin-top:2rem}.btn--full{width:100%;justify-content:center}.join-success{text-align:center;padding:2rem 0;animation:fadeIn .5s var(--ease-out)}.join-success__icon{width:80px;height:80px;border-radius:50%;background:#d4af371a;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem}.join-success__title{font-family:var(--ff-heading);font-size:2rem;margin-bottom:1rem}.join-success__text{color:var(--clr-grey);margin-bottom:2rem;line-height:1.6}@media(max-width:600px){.form-row{grid-template-columns:1fr;gap:0}.category-select{gap:.5rem}.category-card{padding:1rem .5rem}.join-container{padding-left:1rem;padding-right:1rem}}.social-links-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}.social-input-group{display:flex;align-items:center;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:0 .85rem;transition:all .3s var(--ease-out)}.social-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--clr-grey-dim);flex-shrink:0;transition:all .3s}.social-icon svg{width:100%;height:100%}.social-input-group .form-input{border:none!important;background:transparent!important;box-shadow:none!important;padding-left:.75rem;font-size:.9rem}.social-input-group:focus-within{background:#ffffff0f;transform:translateY(-2px);box-shadow:0 4px 20px #0003}.social-input-group.spotify:focus-within,.social-input-group.spotify:has(input:not(:placeholder-shown)){border-color:#1db954;box-shadow:0 0 15px #1db9541a}.social-input-group.spotify:focus-within .social-icon,.social-input-group.spotify:has(input:not(:placeholder-shown)) .social-icon{color:#1db954;opacity:1}.social-input-group.apple:focus-within,.social-input-group.apple:has(input:not(:placeholder-shown)){border-color:#fa2d48;box-shadow:0 0 15px #fa2d481a}.social-input-group.apple:focus-within .social-icon,.social-input-group.apple:has(input:not(:placeholder-shown)) .social-icon{color:#fa2d48;opacity:1}.social-input-group.soundcloud:focus-within,.social-input-group.soundcloud:has(input:not(:placeholder-shown)){border-color:#f50;box-shadow:0 0 15px #ff55001a}.social-input-group.soundcloud:focus-within .social-icon,.social-input-group.soundcloud:has(input:not(:placeholder-shown)) .social-icon{color:#f50;opacity:1}.social-input-group.instagram:focus-within,.social-input-group.instagram:has(input:not(:placeholder-shown)){border-color:#e4405f;box-shadow:0 0 15px #e4405f1a}.social-input-group.instagram:focus-within .social-icon,.social-input-group.instagram:has(input:not(:placeholder-shown)) .social-icon{color:#e4405f;opacity:1}.social-input-group.youtube:focus-within,.social-input-group.youtube:has(input:not(:placeholder-shown)){border-color:red;box-shadow:0 0 15px #ff00001a}.social-input-group.youtube:focus-within .social-icon,.social-input-group.youtube:has(input:not(:placeholder-shown)) .social-icon{color:red;opacity:1}.social-input-group.tiktok:focus-within,.social-input-group.tiktok:has(input:not(:placeholder-shown)){border-color:#00f2ea;box-shadow:0 0 15px #00f2ea1a}.social-input-group.tiktok:focus-within .social-icon,.social-input-group.tiktok:has(input:not(:placeholder-shown)) .social-icon{color:#00f2ea;opacity:1}.social-input-group.facebook:focus-within,.social-input-group.facebook:has(input:not(:placeholder-shown)){border-color:#1877f2;box-shadow:0 0 15px #1877f21a}.social-input-group.facebook:focus-within .social-icon,.social-input-group.facebook:has(input:not(:placeholder-shown)) .social-icon{color:#1877f2;opacity:1}.social-input-group.telegram:focus-within,.social-input-group.telegram:has(input:not(:placeholder-shown)){border-color:#26a5e4;box-shadow:0 0 15px #26a5e41a}.social-input-group.telegram:focus-within .social-icon,.social-input-group.telegram:has(input:not(:placeholder-shown)) .social-icon{color:#26a5e4;opacity:1}@media(max-width:850px){.social-links-grid{grid-template-columns:1fr}}
