/* uzivo18 — visual language borrowed from the noxaluna dream test (palette, Fraunces + Outfit, starfield,
   gender cards, phase stepper, option rows, iOS-style wheel picker). */
:root{
  --bg0:#0a0510; --bg:#160a22; --card:#1f1030; --card-glass:rgba(31,16,48,.62);
  --border:#3a2150; --border-soft:rgba(255,61,122,.22);
  --fg:#FBF3F8; --muted:#C2A8C4; --dim:#7F6A8E;
  --lav:#B98CFF; --rose:#FF3D7A; --gold:#FFB86B; --on-accent:#1a0c22;
  --grad:linear-gradient(100deg,#FF3D7A 0%,#FF6A8E 45%,#FFB86B 100%);
  --grad2:linear-gradient(135deg,#B98CFF,#FF3D7A);
  --ok:#7CE0B0; --bad:#FF8FA8;
  --serif:"Fraunces",Georgia,serif; --sans:"Outfit",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:radial-gradient(1200px 800px at 50% -10%,rgba(255,61,122,.16),transparent 60%),
             radial-gradient(900px 600px at 85% 20%,rgba(185,140,255,.10),transparent 55%),
             linear-gradient(var(--bg) 0%,var(--bg0) 100%);
  background-color:var(--bg0);color:var(--fg);font-family:var(--sans);font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;letter-spacing:-.01em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* starfield */
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.stars span{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);animation:twinkle 4s ease-in-out infinite,drift 28s ease-in-out infinite;will-change:transform,opacity}
.stars span.pink{background:#FF8FB5;box-shadow:0 0 8px rgba(255,61,122,.9)}
.stars span.gold{background:#FFD08A;box-shadow:0 0 8px rgba(255,184,107,.9)}
.stars i{position:absolute;width:140px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,#fff 60%,transparent);opacity:0;transform:rotate(-28deg);animation:shoot 7s linear infinite}
.stars b{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:aurora 22s ease-in-out infinite alternate}
.stars b.a1{width:60vw;height:60vw;left:-20vw;top:-10vh;background:#ff3d7a}
.stars b.a2{width:55vw;height:55vw;right:-20vw;top:20vh;background:#7c3aed;animation-delay:-7s}
.stars b.a3{width:50vw;height:50vw;left:10vw;bottom:-25vh;background:#ff8a5c;animation-delay:-14s;opacity:.35}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
@keyframes drift{0%,100%{translate:0 0}25%{translate:12px -18px}50%{translate:-8px -34px}75%{translate:-16px -10px}}
@keyframes shoot{0%,88%{opacity:0;translate:0 0}90%{opacity:1}100%{opacity:0;translate:-420px 220px}}
@keyframes aurora{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-4vh) scale(1.15)}100%{transform:translate(-4vw,5vh) scale(.95)}}
@media (prefers-reduced-motion:reduce){.stars span,.stars i,.stars b{animation:none}}

/* header */
header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:14px 18px;
  background:rgba(9,7,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(43,37,80,.6)}
.logo{display:inline-flex;align-items:center;gap:10px;justify-self:center}
.hright{justify-self:end}
.logo svg{display:block}
.logo .word{font-family:var(--serif);font-size:24px;font-weight:500;letter-spacing:.02em}
.logo .word b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.navlink{font-size:14px;color:var(--muted)}
.navlink:hover{color:var(--fg)}

/* lander shell */
.ld{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:40px 22px 70px}
.ld-badge{display:block;text-align:center;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.ld h1{text-align:center;font-size:clamp(32px,5.6vw,48px);margin-bottom:18px}
.ld .sub{text-align:center;color:var(--muted);font-size:16.5px;max-width:540px;margin:0 auto 34px}
.iam{text-align:center;font-family:var(--serif);font-size:24px;margin-bottom:20px}
.gcards{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gcard{border:1px solid var(--border);border-radius:20px;overflow:hidden;cursor:pointer;background:var(--card-glass);
  transition:transform .25s,border-color .25s,box-shadow .25s;text-align:center;display:block}
.gcard:hover{transform:translateY(-3px);border-color:var(--lav);box-shadow:0 18px 44px rgba(7,6,16,.5)}
.gcard .gimg{display:block;width:100%;height:250px;object-fit:cover;object-position:center 10%;background:radial-gradient(120% 100% at 50% 0,rgba(233,190,124,.12),transparent 70%)}
.gcard .glab{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;color:#fff;font-size:16px;font-weight:500;text-align:left}
.gcard .glab small{display:block;font-size:12px;font-weight:300;opacity:.85}
.gcard.g-man .glab{background:linear-gradient(100deg,#6d3df0,#b14bff)}
.gcard.g-woman .glab{background:linear-gradient(100deg,#ff3d7a,#ff7a5c)}
.gcard:hover{box-shadow:0 18px 50px -10px rgba(255,61,122,.55)}
.gcard .gimg{height:290px;object-position:center 15%}
.trust{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:var(--dim);font-size:13px;margin-top:30px}
.trust i{font-style:normal;color:var(--gold)}
.fine{color:var(--dim);font-size:12.5px;text-align:center;margin-top:40px;line-height:1.7}
.fine a{color:var(--muted);text-decoration:underline}
@media (max-width:420px){.gcard .gimg{height:200px}.gcards{gap:12px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:9999px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:transform .25s,box-shadow .25s,opacity .25s;border:none}
.btn-primary{background:var(--grad);color:#fff;font-weight:800;padding:16px 34px;box-shadow:0 6px 40px rgba(255,61,122,.45),0 2px 14px rgba(255,184,107,.25);text-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn-primary:hover{transform:translateY(-2px)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn.big{width:100%;padding:17px 20px;font-size:16px}
.btn-ghost{background:transparent;color:var(--fg);padding:14px 32px;border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--lav);color:var(--lav)}

/* quiz shell + phase stepper */
.shell{position:relative;z-index:10;max-width:640px;margin:0 auto;padding:30px 22px 90px}
.phases{display:flex;align-items:center;margin-bottom:8px}
.msd{flex:none;width:27px;height:27px;border-radius:50%;border:1px solid var(--border);background:rgba(21,17,48,.8);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--dim);transition:all .35s}
.msd.done{background:var(--grad);border-color:transparent;color:var(--on-accent);font-weight:500}
.msd.act{background:var(--grad);border-color:transparent;color:#fff;font-weight:700;box-shadow:0 0 0 5px rgba(255,61,122,.18),0 0 22px rgba(255,61,122,.6);transform:scale(1.15)}
.msl{flex:1;height:3px;background:rgba(43,37,80,.8);position:relative;overflow:hidden;border-radius:3px}
.msl i{position:absolute;inset:0;width:0;background:var(--grad);transition:width .45s cubic-bezier(.4,0,.2,1)}
.ph-label{text-align:center;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--rose);margin:12px 0 2px;font-weight:600}
.stepnum{font-size:12px;color:var(--dim);letter-spacing:.12em;text-align:right;margin-bottom:22px}

/* steps */
.step{display:none}
.step.on{display:block;animation:fadeUp .4s cubic-bezier(.4,0,.2,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.q-eyebrow{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.q-title{font-size:clamp(26px,4.4vw,34px);margin-bottom:10px}
.q-help{color:var(--muted);font-size:15px;margin-bottom:26px}
.q-help b{color:var(--rose);font-weight:500}
.field{margin-bottom:22px}
.field label,.flab{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.inp{width:100%;background:var(--card-glass);border:1px solid var(--border);border-radius:16px;color:var(--fg);font-family:var(--sans);font-size:17px;font-weight:300;padding:16px 18px;outline:none;transition:border-color .25s}
.inp::placeholder{color:var(--dim)}
.inp:focus{border-color:var(--lav)}
.actions{display:flex;justify-content:space-between;align-items:center;margin-top:30px;gap:16px}
.back{background:none;border:none;color:var(--dim);font-family:var(--sans);font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:10px 0}
.back:hover{color:var(--fg)}
.skip{background:none;border:none;color:var(--dim);font-family:var(--sans);font-size:14px;cursor:pointer;text-decoration:underline}
.hint{font-size:13px;color:var(--dim);margin-top:10px}
.err{color:var(--bad);font-size:14px;margin-top:12px;min-height:1em}

/* option rows */
.opts{display:grid;gap:12px}
@keyframes optIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.opts .opt{opacity:0;animation:optIn .45s cubic-bezier(.22,.8,.3,1) forwards}
.opts .opt:nth-child(1){animation-delay:.03s}.opts .opt:nth-child(2){animation-delay:.09s}.opts .opt:nth-child(3){animation-delay:.15s}
.opts .opt:nth-child(4){animation-delay:.21s}.opts .opt:nth-child(5){animation-delay:.27s}.opts .opt:nth-child(6){animation-delay:.33s}
.opt{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;width:100%;border:1px solid var(--border);border-radius:18px;background:var(--card-glass);
  padding:14px 16px;transition:transform .15s,border-color .2s,box-shadow .2s,background .2s;font-family:var(--sans);color:var(--fg);font-size:16.5px;font-weight:500;position:relative;backdrop-filter:blur(6px)}
.opt::after{content:"›";margin-left:auto;font-size:24px;color:var(--rose);opacity:.8;flex:none;line-height:1}
.opt:hover{border-color:var(--rose);transform:translateY(-2px);box-shadow:0 12px 34px -12px rgba(255,61,122,.55)}
.opt:active{transform:scale(.98)}
.opt.on,.opt:has(input:checked){background:linear-gradient(100deg,rgba(255,61,122,.22),rgba(255,184,107,.14));border-color:var(--rose);box-shadow:0 0 0 1px var(--rose),0 14px 40px -14px rgba(255,61,122,.7)}
.opt.on::after,.opt:has(input:checked)::after{content:"✓";color:#fff;background:var(--grad);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;font-size:15px;font-weight:800;opacity:1}
.opt .em{flex:none;font-size:24px;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,#3b1646,#2a1838);text-align:center}
.opt small{display:block;color:var(--muted);font-size:13px;margin-top:2px;font-weight:300}
.opt > span:not(.em){flex:1}
.opts div.opt::after{content:""}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opts.row{grid-template-columns:repeat(2,1fr)}
.opts.row .opt{justify-content:center;padding:13px 10px;font-size:15px}
.opts.row .opt .em{display:none}
.opts.row .opt::after{display:none}
.opts.row .opt > span{flex:none}

/* wheel picker */
.dpick{position:relative;border:1px solid var(--border);border-radius:18px;background:var(--card-glass);display:grid;grid-template-columns:1fr 1.2fr 1.2fr;padding:6px 10px;overflow:hidden}
.dpick .sel-line{position:absolute;left:14px;right:14px;top:50%;height:46px;transform:translateY(-50%);border-top:1px solid rgba(255,61,122,.6);border-bottom:1px solid rgba(255,61,122,.6);pointer-events:none;border-radius:2px}
.wheel{height:230px;overflow-y:auto;text-align:center;position:relative;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask:linear-gradient(180deg,transparent 2%,#000 32%,#000 68%,transparent 98%);mask:linear-gradient(180deg,transparent 2%,#000 32%,#000 68%,transparent 98%)}
.wheel::-webkit-scrollbar{display:none}
.wheel .wpad{height:92px}
.wheel .wi{height:46px;line-height:46px;color:var(--dim);font-size:17px;cursor:pointer;transition:color .2s,font-size .2s;user-select:none}
.wheel .wi.on{color:var(--fg);font-family:var(--serif);font-size:21px;font-weight:500}
.pick-note{font-size:13px;color:var(--dim);margin-top:12px}
.pick-note i{font-style:normal;color:var(--gold)}

/* photos */
.upl{display:flex;align-items:center;justify-content:center;gap:10px;border:1px dashed var(--lav);border-radius:16px;padding:22px;text-align:center;cursor:pointer;color:var(--lav);background:rgba(167,139,250,.06);font-weight:400}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:14px;border:1px solid var(--border);cursor:pointer}

/* consent */
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--muted);margin-top:20px;line-height:1.55;cursor:pointer}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;border-radius:7px;border:1px solid var(--lav);background:transparent;margin-top:1px;display:grid;place-items:center}
.consent input:checked{background:var(--grad);border-color:transparent}
.consent input:checked::after{content:"✓";color:var(--on-accent);font-size:14px;font-weight:700}
.consent a{color:var(--lav);text-decoration:underline}

/* result / slots */
.res{text-align:center;padding:10px 0}
.res .cico{font-size:52px;display:inline-block;animation:celebPop .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes celebPop{0%{transform:scale(.3) rotate(-12deg);opacity:0}70%{transform:scale(1.15) rotate(4deg)}100%{transform:scale(1) rotate(0)}}
.res h2{font-size:clamp(26px,4.4vw,34px);margin:18px 0 12px}
.res p{color:var(--muted);font-size:15.5px;max-width:460px;margin:0 auto 24px}
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}
.slots .day{grid-column:1/-1;color:var(--gold);font-size:12px;letter-spacing:.22em;text-transform:uppercase;margin-top:12px}
.slots .opt{justify-content:center;padding:14px 8px;font-size:15px;animation:none;opacity:1}

/* generic doc pages (privacy) */
.doc{position:relative;z-index:10;max-width:720px;margin:0 auto;padding:30px 22px 60px}
.doc h1{font-size:clamp(26px,5vw,36px);margin:10px 0 16px}
.doc h2{font-size:19px;margin:26px 0 8px}
.doc p,.doc li{color:var(--muted);font-size:15px}
.doc ul{padding-left:20px}
footer{position:relative;z-index:10;border-top:1px solid rgba(43,37,80,.6);padding:20px 22px 34px;font-size:12.5px;color:var(--dim);text-align:center}
footer a{color:var(--dim)}

[hidden]{display:none!important}

/* gamification */
.xp{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(255,184,107,.1);border:1px solid rgba(255,184,107,.3);border-radius:999px;padding:5px 12px}
.gain{position:fixed;z-index:400;pointer-events:none;color:var(--gold);font-size:14px;font-weight:800;text-shadow:0 0 12px rgba(255,184,107,.8);animation:gainUp .9s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes gainUp{0%{opacity:0;transform:translateY(6px) scale(.8)}25%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.1)}}
.stepbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

/* legal footer */
footer .flinks{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
footer .flinks a{color:var(--muted);font-size:13px}
footer .flinks a:hover{color:var(--fg)}
footer p{max-width:640px;margin:8px auto 0;line-height:1.6}
footer p a{text-decoration:underline}
.fbadges{display:flex;gap:10px;justify-content:center;align-items:center;margin:6px 0 10px}
.rta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:40px;border:2px solid #cfcfcf;border-radius:4px;background:#fff;color:#111;line-height:1;text-decoration:none}
.rta b{font:900 17px/1 Arial,Helvetica,sans-serif;letter-spacing:.5px}
.rta span{font:700 5.2px/1 Arial,Helvetica,sans-serif;letter-spacing:.3px;margin-top:2px}
.b18{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid #fff;color:#fff;font:900 14px/1 Arial,sans-serif;background:#c8102e}