@import url('/assets/css/onboarding-additions.css');

:root {
    color-scheme: dark;
    --bg: #09070d;
    --surface: #121018;
    --surface-2: #18141e;
    --text: #f8f4f8;
    --muted: #aaa1ae;
    --line: rgba(255,255,255,.1);
    --pink: #ff4f9a;
    --pink-2: #bd4cff;
    --violet: #7557ff;
    --danger: #ff6d85;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); overflow-x: hidden; }
button, input, textarea { font: inherit; }
a { color: inherit; }
.page-glow { position: fixed; width: 34rem; height: 34rem; border-radius: 50%; filter: blur(110px); opacity: .14; pointer-events: none; z-index: -2; }
.page-glow-one { background: var(--pink); top: -14rem; left: -10rem; }
.page-glow-two { background: var(--violet); right: -15rem; bottom: -15rem; }
.site-header { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 78px; padding: 0 clamp(20px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, rgba(9,7,13,.92), rgba(9,7,13,.35), transparent); backdrop-filter: blur(6px); }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; font-family: Manrope, sans-serif; font-weight: 700; letter-spacing: -.03em; }
.brand strong { color: #ff86b9; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--pink), var(--pink-2)); box-shadow: 0 10px 35px rgba(255,79,154,.26); }
.site-nav { display: flex; align-items: center; gap: 18px; }
.nav-link { border: 0; background: none; color: #d8d0db; text-decoration: none; cursor: pointer; padding: 8px; }
.welcome { color: var(--muted); }
.inline-form { display: inline; }
.site-main { min-height: 100vh; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 14px; padding: 13px 20px; text-decoration: none; cursor: pointer; color: #fff; background: rgba(255,255,255,.05); transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
.button.primary { background: linear-gradient(135deg, #ff4f9a, #b846df); border-color: transparent; box-shadow: 0 14px 42px rgba(216,62,154,.28); }
.button.primary:hover { box-shadow: 0 18px 55px rgba(216,62,154,.38); }
.button.ghost { background: rgba(255,255,255,.04); backdrop-filter: blur(10px); }
.button-small { padding: 10px 16px; border-radius: 12px; }
.button-large { padding: 16px 22px; font-weight: 700; }
.full-width { width: 100%; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #d8a8c7; text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; }
.eyebrow span { width: 26px; height: 1px; background: linear-gradient(90deg, var(--pink), transparent); }
.hero-shell { position: relative; min-height: 100svh; display: grid; align-items: center; padding: 120px clamp(24px, 8vw, 130px) 70px; isolation: isolate; overflow: hidden; }
.hero-shell::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 52% 32%, rgba(168,71,140,.18), transparent 34%), linear-gradient(90deg, rgba(9,7,13,.98) 0%, rgba(9,7,13,.78) 38%, rgba(9,7,13,.2) 70%, rgba(9,7,13,.8) 100%); z-index: -1; }
.hero-portraits { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.portrait { position: absolute; background-size: cover; background-position: center top; filter: saturate(.72) contrast(1.04); transition: transform .22s ease-out; transform: translate3d(var(--mx,0),var(--my,0),0) scale(1.04); }
.portrait-left { left: 3%; top: 17%; width: 25vw; height: 72vh; border-radius: 42px; opacity: .36; background-image: linear-gradient(to top, rgba(9,7,13,.72), transparent), url('https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=900&q=82'); }
.portrait-right { right: -2%; top: 8%; width: 30vw; height: 82vh; border-radius: 48px; opacity: .42; background-image: linear-gradient(to top, rgba(9,7,13,.78), transparent), url('https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=82'); }
.portrait-center { right: 24%; bottom: -8%; width: 25vw; height: 74vh; border-radius: 46px; opacity: .2; background-image: linear-gradient(to top, rgba(9,7,13,.9), transparent), url('https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=900&q=82'); }
.hero-vignette { position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 0, transparent 30%), radial-gradient(circle at center, transparent 35%, rgba(9,7,13,.72) 100%); }
.hero-content { max-width: 850px; position: relative; z-index: 2; }
.hero-content h1, .member-home h1 { font-family: Manrope, sans-serif; font-size: clamp(3.4rem, 7.4vw, 7.2rem); line-height: .93; letter-spacing: -.065em; margin: 22px 0; }
.hero-content h1 em { font-style: normal; background: linear-gradient(90deg,#fff,#ff9cc4 58%,#c38cff); -webkit-background-clip: text; color: transparent; }
.lead { max-width: 630px; color: #c0b7c3; font-size: clamp(1.05rem,1.8vw,1.3rem); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 34px; color: #8f8794; font-size: .86rem; }
.trust-row span { display: flex; align-items: center; gap: 8px; }
.trust-row span::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: #ff68a8; }
.scroll-hint { position: absolute; right: clamp(24px,5vw,72px); bottom: 34px; writing-mode: vertical-rl; color: #77707c; text-transform: uppercase; letter-spacing: .16em; font-size: .65rem; display: flex; align-items: center; gap: 10px; }
.scroll-hint span { width: 1px; height: 44px; background: linear-gradient(to bottom,var(--pink),transparent); }
.feature-band { padding: 110px clamp(24px,8vw,130px) 130px; background: linear-gradient(180deg,#09070d,#0e0a12); }
.feature-copy { max-width: 700px; }
.feature-copy h2 { font-family: Manrope,sans-serif; font-size: clamp(2.4rem,5vw,4.8rem); line-height: 1; letter-spacing: -.05em; margin: 18px 0; }
.feature-copy p { color: var(--muted); font-size: 1.05rem; line-height: 1.75; }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 55px; }
.feature-card { min-height: 260px; padding: 30px; border: 1px solid var(--line); background: rgba(255,255,255,.025); border-radius: 24px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s ease, background .25s ease; }
.feature-card:hover { transform: translateY(-7px); background: rgba(255,255,255,.045); }
.feature-card.featured { background: radial-gradient(circle at 20% 15%,rgba(255,79,154,.2),transparent 38%),rgba(255,255,255,.035); }
.feature-number { color: #8f8794; margin-bottom: auto; }
.feature-card h3 { font-size: 1.45rem; margin: 0 0 8px; }
.feature-card p { color: var(--muted); line-height: 1.55; margin: 0; }
.member-home { min-height: 100svh; display: grid; place-items: center; grid-template-columns: 1.2fr .8fr; gap: 60px; padding: 120px clamp(24px,8vw,130px); }
.member-home h1 { font-size: clamp(3rem,6vw,6rem); }
.member-copy p { color: var(--muted); max-width: 580px; line-height: 1.7; }
.glass-panel { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.05); backdrop-filter: blur(18px); display: flex; align-items: center; gap: 14px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: #56df9b; box-shadow: 0 0 18px rgba(86,223,155,.6); }
.glass-panel p { margin: 4px 0 0; color: var(--muted); }
.auth-stage { min-height: 100svh; display: grid; grid-template-columns: minmax(420px,.92fr) minmax(500px,1.08fr); }
.auth-visual { position: relative; overflow: hidden; min-height: 100svh; background: #0e0b12; }
.auth-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(to top,rgba(9,7,13,.94),transparent 50%),linear-gradient(90deg,transparent,rgba(9,7,13,.32)); }
.auth-portrait { position:absolute; inset:-4%; background-size: cover; background-position:center; transition: transform .22s ease-out; transform: translate3d(var(--mx,0),var(--my,0),0) scale(1.06); }
.register-visual .auth-portrait { background-image:url('https://images.unsplash.com/photo-1524250502761-1ac6f2e30d43?auto=format&fit=crop&w=1200&q=84'); }
.login-visual .auth-portrait { background-image:url('https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?auto=format&fit=crop&w=1200&q=84'); }
.auth-orb { position:absolute; width:360px; height:360px; border-radius:50%; background:var(--pink); filter:blur(120px); opacity:.28; right:-120px; bottom:8%; z-index:2; transition:transform .22s ease-out; transform:translate3d(var(--mx,0),var(--my,0),0); }
.auth-quote { position:absolute; z-index:3; left:44px; right:44px; bottom:44px; display:flex; gap:18px; align-items:flex-start; }
.auth-quote span { color:#ff92bd; font-family:Manrope,sans-serif; font-weight:800; }
.auth-quote p { margin:0; font-size:1.2rem; line-height:1.55; max-width:520px; text-shadow:0 2px 20px #000; }
.auth-panel { padding: 120px clamp(34px,7vw,110px) 70px; display:flex; flex-direction:column; justify-content:center; background: radial-gradient(circle at 85% 20%,rgba(137,69,168,.1),transparent 28%),var(--bg); }
.auth-panel-centered { justify-content:center; }
.mobile-brand { display:none; }
.auth-heading { max-width:620px; margin-bottom:30px; }
.auth-heading h1 { font-family:Manrope,sans-serif; font-size:clamp(2.8rem,5vw,5rem); letter-spacing:-.055em; line-height:.98; margin:17px 0; }
.auth-heading p { color:var(--muted); line-height:1.6; }
.modern-form { width:min(620px,100%); display:grid; gap:18px; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:grid; gap:8px; }
.field > span, .choice-fieldset legend { color:#cfc6d1; font-size:.86rem; font-weight:600; }
.field input, .field textarea { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#fff; padding:14px 15px; border-radius:13px; outline:none; transition:border-color .2s,box-shadow .2s,background .2s; }
.field input:focus, .field textarea:focus { border-color:rgba(255,93,165,.7); box-shadow:0 0 0 4px rgba(255,79,154,.08); background:rgba(255,255,255,.05); }
.field textarea { resize:vertical; min-height:170px; line-height:1.6; }
.choice-fieldset { border:0; padding:0; margin:2px 0; }
.choice-fieldset legend { margin-bottom:10px; }
.choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.choice-card { position:relative; min-height:88px; padding:12px 8px; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; cursor:pointer; background:rgba(255,255,255,.025); color:#cfc6d1; text-align:center; font-size:.8rem; transition:.2s ease; }
.choice-card input { position:absolute; opacity:0; }
.choice-card:has(input:checked) { border-color:#ff63a6; background:rgba(255,79,154,.1); box-shadow:0 0 0 3px rgba(255,79,154,.06); color:#fff; }
.choice-icon { font-size:1.2rem; color:#ff7fb5; }
.check-row { display:flex; align-items:center; gap:10px; color:#aaa1ae; font-size:.86rem; cursor:pointer; }
.check-row input { accent-color:var(--pink); width:17px; height:17px; }
.alert { border:1px solid rgba(255,96,132,.35); background:rgba(120,31,55,.28); color:#ffd7e0; padding:13px 15px; border-radius:13px; margin-bottom:18px; }
.form-switch { margin:0; text-align:center; color:#8f8794; font-size:.88rem; }
.form-switch a { color:#ff8fbc; text-decoration:none; }
.onboarding-shell { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:130px 0 70px; }
.onboarding-topbar { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; }
.onboarding-topbar h1 { font-family:Manrope,sans-serif; font-size:clamp(2.7rem,6vw,5.4rem); letter-spacing:-.06em; margin:17px 0 0; }
.step-counter { font-family:Manrope,sans-serif; color:#776f7c; font-size:1.1rem; }
.step-counter strong { color:#fff; font-size:2rem; }
.progress-track { height:2px; background:rgba(255,255,255,.08); margin:34px 0 60px; overflow:hidden; }
.progress-track span { display:block; height:100%; width:25%; background:linear-gradient(90deg,var(--pink),var(--violet)); transition:width .35s ease; }
.onboarding-form { max-width:900px; margin:0 auto; }
.onboarding-step { display:none; min-height:390px; animation:stepIn .35s ease both; }
.onboarding-step.is-active { display:block; }
@keyframes stepIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.step-copy { margin-bottom:30px; }
.step-label { color:#ff79b1; font-size:.68rem; letter-spacing:.18em; font-weight:800; }
.step-copy h2 { font-family:Manrope,sans-serif; font-size:clamp(2rem,4vw,3.6rem); letter-spacing:-.04em; margin:8px 0; }
.step-copy p { color:var(--muted); margin:0; line-height:1.6; }
.large-choice-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.large-choice { position:relative; min-height:190px; border:1px solid var(--line); border-radius:23px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(255,255,255,.025); cursor:pointer; transition:.2s ease; }
.large-choice input, .stacked-choice input { position:absolute; opacity:0; }
.large-choice > span { font-size:2rem; color:#ff83b8; }
.large-choice strong { font-size:1.1rem; }
.large-choice:has(input:checked), .stacked-choice:has(input:checked) { border-color:#ff61a5; background:radial-gradient(circle at 50% 0,rgba(255,79,154,.15),transparent 60%),rgba(255,255,255,.04); box-shadow:0 12px 40px rgba(177,45,121,.12); }
.stacked-choices { display:grid; gap:12px; }
.stacked-choice { position:relative; display:block; padding:20px 22px; border:1px solid var(--line); border-radius:18px; cursor:pointer; background:rgba(255,255,255,.025); transition:.2s ease; }
.stacked-choice span { display:grid; gap:4px; }
.stacked-choice small { color:var(--muted); line-height:1.5; }
.bio-field { position:relative; }
.char-count { position:absolute; right:15px; bottom:12px; color:#77707c!important; font-size:.75rem!important; }
.prompt-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.prompt-chips button { border:1px solid var(--line); color:#b8afbb; background:rgba(255,255,255,.025); border-radius:999px; padding:8px 12px; cursor:pointer; }
.photo-upload { min-height:270px; border:1px dashed rgba(255,255,255,.18); border-radius:25px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; cursor:pointer; background:rgba(255,255,255,.02); }
.photo-upload input { display:none; }
.photo-preview { width:104px; height:104px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,rgba(255,79,154,.2),rgba(117,87,255,.2)); background-size:cover; background-position:center; border:1px solid var(--line); margin-bottom:6px; overflow:hidden; }
.photo-preview b { font-size:2rem; font-weight:400; }
.photo-preview.has-image { border-color:#ff78b2; }
.photo-upload small { color:var(--muted); }
.onboarding-actions { display:flex; justify-content:space-between; align-items:center; margin-top:35px; padding-top:22px; border-top:1px solid var(--line); }
.onboarding-actions button[disabled] { opacity:.35; cursor:not-allowed; transform:none; }
.onboarding-alert { max-width:900px; margin:0 auto 24px; }
@media (max-width: 980px) {
    .portrait-left { width:38vw; opacity:.22; }
    .portrait-right { width:42vw; opacity:.28; }
    .portrait-center { display:none; }
    .feature-grid { grid-template-columns:1fr; }
    .feature-card { min-height:210px; }
    .auth-stage { grid-template-columns:1fr; }
    .auth-visual { display:none; }
    .auth-panel { min-height:100svh; padding:110px 24px 60px; }
    .mobile-brand { display:block; position:absolute; top:27px; left:24px; text-decoration:none; font-family:Manrope,sans-serif; font-weight:800; }
    .choice-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 680px) {
    .site-header { height:66px; padding:0 18px; }
    .brand > span:last-child, .welcome { display:none; }
    .hero-shell { padding:100px 22px 60px; align-items:end; }
    .hero-content h1 { font-size:clamp(3.25rem,15vw,5.3rem); }
    .lead { font-size:1rem; }
    .portrait-left { left:-30%; top:12%; width:86vw; height:62vh; opacity:.18; }
    .portrait-right { right:-34%; width:88vw; height:68vh; opacity:.26; }
    .hero-actions { display:grid; }
    .scroll-hint { display:none; }
    .feature-band { padding:85px 22px; }
    .field-row { grid-template-columns:1fr; }
    .auth-heading h1 { font-size:3.2rem; }
    .onboarding-shell { width:min(100% - 28px,1080px); padding-top:100px; }
    .onboarding-topbar { align-items:flex-start; }
    .onboarding-topbar h1 { font-size:3.2rem; }
    .large-choice-grid { grid-template-columns:1fr; }
    .large-choice { min-height:120px; }
    .onboarding-actions { gap:10px; }
    .onboarding-actions .button { flex:1; padding-inline:12px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; }
}