@font-face{font-family:"Rubik";src:url("fonts/rubik.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Varela Round";src:url("fonts/varela.woff2") format("woff2");font-weight:400;font-display:swap}
:root{--navy:#1F2A44;--navy2:#2a3a62;--navy3:#121a2e;--gold:#C8A96A;--gold2:#E6CF97;--gold3:#9a7d45;--cream:#F7F1E6;--cream2:rgba(247,241,230,.8);--cream3:rgba(247,241,230,.58);--ease:cubic-bezier(.22,1,.36,1);--sand:0}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--navy3);color:var(--cream);font-family:"Rubik",system-ui,sans-serif;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;overflow-x:hidden;position:relative;
 background:radial-gradient(90% 50% at 50% 28%,rgba(200,169,106,.12),transparent 65%),radial-gradient(120% 80% at 50% 0%,#2c3c66 0%,var(--navy) 45%,var(--navy3) 100%);background-attachment:fixed}
[hidden]{display:none!important}
.dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.bsd{position:absolute;top:9px;right:14px;font-size:12px;color:var(--cream3);z-index:2}
.brand{position:relative;z-index:2;display:flex;justify-content:center;width:100%;max-width:520px;margin:0 auto;padding:30px 22px 0}
.logo{height:66px;width:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.25))}
body[data-screen="s-quiz"] .logo{height:46px}
.app{position:relative;z-index:1;flex:1;width:100%;max-width:520px;margin:0 auto;padding:8px 20px 24px}
.screen{display:flex;flex-direction:column;animation:enter .6s var(--ease) both}
.screen.leaving{animation:leave .26s ease both}
@keyframes enter{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes leave{to{opacity:0;transform:translateY(-10px);filter:blur(4px)}}
.gold{background:linear-gradient(100deg,#b8955a 0%,#F3DFA8 45%,#C8A96A 60%,#b8955a 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.eyebrow{font-size:14px;letter-spacing:1.5px;color:var(--gold);font-weight:500}
.h-title{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:clamp(34px,10vw,46px);line-height:1.18;margin-top:8px}
/* intro */
.intro{align-items:center;text-align:center;padding-top:10px}
.friend{background:rgba(200,169,106,.12);border:1px solid rgba(200,169,106,.45);color:var(--gold2);border-radius:999px;padding:8px 16px;font-size:14.5px;margin-bottom:14px}
.hg-wrap{display:flex;justify-content:center}
.hg{width:110px;height:auto;overflow:visible;filter:drop-shadow(0 14px 26px rgba(0,0,0,.35))}
.intro-hg{margin:18px 0 6px}
.intro-hg .hg{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(1.5deg)}}
.hg-glow{animation:breathe 3s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35}50%{opacity:.85}}
.hg-sand-top{transform-box:view-box;transform-origin:60px 88px;animation:drainTop 6s linear infinite}
.hg-sand-bot{transform-box:view-box;transform-origin:60px 158px;animation:fillBot 6s linear infinite}
.hg-stream{animation:stream .6s linear infinite}
@keyframes drainTop{0%{transform:translateY(0)}90%,100%{transform:translateY(48px)}}
@keyframes fillBot{0%{transform:scaleY(.15)}90%,100%{transform:scaleY(1.9)}}
@keyframes stream{to{stroke-dashoffset:-16}}
.sub{font-size:18px;font-weight:300;line-height:1.6;color:var(--cream2);margin:10px 4px 20px}
.name-field{display:flex;flex-direction:column;gap:7px;width:min(100%,330px);text-align:right;margin-bottom:16px;font-size:14px;color:var(--gold2)}
.name-field em{font-style:normal;color:var(--cream3);font-size:13px}
.name-field input{font-family:inherit;font-size:17px;color:var(--cream);background:rgba(247,241,230,.06);border:1px solid rgba(200,169,106,.45);border-radius:14px;padding:13px 16px;outline:none;transition:border-color .2s,background .2s}
.name-field input::placeholder{color:rgba(247,241,230,.38)}
.name-field input:focus{border-color:var(--gold2);background:rgba(247,241,230,.1);box-shadow:0 0 0 3px rgba(200,169,106,.22)}
.fine{font-size:13.5px;color:var(--cream3);margin-top:14px;line-height:1.55}
/* buttons */
.btn{font-family:inherit;border:0;cursor:pointer;border-radius:999px;font-size:17.5px;font-weight:500;padding:14px 24px;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:transform .15s var(--ease),filter .15s,box-shadow .2s,background .2s;position:relative;overflow:hidden;-webkit-user-select:none;user-select:none;width:100%}
.btn:active{transform:scale(.97)}
.btn svg{width:22px;height:22px;flex:none}
.btn:focus-visible,.opt:focus-visible,.back:focus-visible,.again:focus-visible,.sim-link:focus-visible,.foot a:focus-visible,.foot button:focus-visible{outline:3px solid var(--gold2);outline-offset:3px}
.primary{background:linear-gradient(135deg,#F1DDA6 0%,#C8A96A 55%,#a8884c 100%);color:var(--navy3);max-width:330px;box-shadow:0 10px 30px rgba(200,169,106,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.primary::after,.wa::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.8s ease-in-out 1.5s infinite}
@keyframes shine{0%,70%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
.ghost{background:rgba(247,241,230,.05);color:var(--cream);border:1px solid rgba(200,169,106,.55)}
.ghost:hover{background:rgba(247,241,230,.1)}
.ghost svg{color:var(--gold2)}
.small{min-height:48px;font-size:15px;padding:10px 14px}
.wa{background:linear-gradient(135deg,#F1DDA6 0%,#C8A96A 55%,#a8884c 100%);color:var(--navy3);box-shadow:0 12px 30px rgba(200,169,106,.32),inset 0 1px 0 rgba(255,255,255,.5);font-weight:600}
.wa svg{width:24px;height:24px}
/* quiz */
.q-top{display:flex;align-items:center;gap:12px;margin:6px 0 22px}
.back{background:rgba(247,241,230,.05);border:1px solid rgba(247,241,230,.28);color:var(--cream);width:42px;height:42px;border-radius:50%;font-size:19px;cursor:pointer;flex:none;font-family:inherit;transition:transform .15s}
.back:active{transform:scale(.92)}
.progress{flex:1;height:8px;border-radius:99px;background:rgba(247,241,230,.1);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.3)}
.progress-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(270deg,#8E7240,#C8A96A 50%,#F3DFA8);box-shadow:0 0 12px rgba(232,207,142,.6);transition:width .55s var(--ease);margin-inline-start:0}
.count{font-size:14px;color:var(--gold2);letter-spacing:.5px;min-width:40px;text-align:left;font-variant-numeric:tabular-nums}
.q-kicker{font-size:13.5px;color:var(--gold);letter-spacing:1px;margin-bottom:8px}
.question{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:clamp(23px,6.6vw,29px);line-height:1.38;margin-bottom:22px;min-height:2.6em}
.q-body.in-next{animation:qin .5s var(--ease) both}
.q-body.in-prev{animation:qinp .5s var(--ease) both}
@keyframes qin{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes qinp{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.options{display:flex;flex-direction:column;gap:12px}
.opt{font-family:inherit;display:flex;align-items:center;gap:14px;width:100%;text-align:right;cursor:pointer;color:var(--cream);font-size:17px;line-height:1.45;padding:15px 16px;border-radius:18px;border:1px solid rgba(200,169,106,.32);background:linear-gradient(180deg,rgba(247,241,230,.075),rgba(247,241,230,.035));box-shadow:0 6px 18px rgba(0,0,0,.12);transition:transform .18s var(--ease),border-color .2s,background .25s,box-shadow .25s;animation:optin .5s var(--ease) both}
.opt:nth-child(2){animation-delay:.05s}.opt:nth-child(3){animation-delay:.1s}.opt:nth-child(4){animation-delay:.15s}
@keyframes optin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (hover:hover){.opt:hover{border-color:var(--gold2);background:rgba(247,241,230,.1);transform:translateX(-3px)}}
.opt:active{transform:scale(.985)}
.opt-mark{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;color:var(--gold2);border:1px solid rgba(200,169,106,.55);background:rgba(31,42,68,.6);transition:all .25s}
.opt.chosen{border-color:var(--gold);background:linear-gradient(135deg,rgba(241,221,166,.22),rgba(200,169,106,.12));box-shadow:0 0 0 1px var(--gold),0 10px 26px rgba(200,169,106,.22)}
.opt.chosen .opt-mark{background:linear-gradient(135deg,#F1DDA6,#C8A96A);color:var(--navy3);border-color:transparent}
/* calc */
.calc{align-items:center;justify-content:center;text-align:center;min-height:56vh}
.calc-hg .hg{width:120px;animation:flip 1.9s var(--ease) both}
@keyframes flip{0%{transform:rotate(0)}40%{transform:rotate(180deg)}100%{transform:rotate(180deg)}}
.calc-text{margin-top:26px;font-size:19px;color:var(--gold2);font-weight:300}
.dots i{font-style:normal;animation:dot 1.2s infinite}.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,100%{opacity:.2}50%{opacity:1}}
/* result card */
.result{gap:0}
.r-card{position:relative;overflow:hidden;text-align:center;border-radius:28px;padding:30px 22px 22px;margin-top:6px;
 background:radial-gradient(120% 70% at 50% 0%,#34466F 0%,var(--navy) 55%,#18213a 100%);
 border:1px solid rgba(200,169,106,.6);box-shadow:0 24px 60px rgba(0,0,0,.4),inset 0 0 0 6px rgba(31,42,68,.9),inset 0 0 0 7px rgba(200,169,106,.28)}
.r-card-glow{position:absolute;left:50%;top:70px;width:300px;height:300px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent),transparent 68%);pointer-events:none;animation:breathe 4s ease-in-out infinite}
.r-card>*{position:relative}
.r-card>.r-card-glow{position:absolute}
.r-card-eyebrow{font-size:14.5px;color:var(--gold);letter-spacing:1px}
.r-emblem{width:66px;height:66px;margin:16px auto 6px;border-radius:50%;display:grid;place-items:center;font-size:30px;color:var(--navy3);background:linear-gradient(135deg,#F3DFA8,var(--accent) 60%,#8E7240);box-shadow:0 0 0 6px rgba(200,169,106,.14),0 10px 26px rgba(0,0,0,.35);animation:pop .8s var(--ease) .15s both}
@keyframes pop{from{transform:scale(.4) rotate(-30deg);opacity:0}to{transform:none;opacity:1}}
.r-name{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:clamp(50px,15vw,66px);line-height:1.1;background:linear-gradient(100deg,#b8955a 0%,#F6E4B0 45%,#C8A96A 65%,#b8955a 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);animation:sheen 5s ease-in-out infinite,enter .8s var(--ease) .25s both}
.r-sub{font-size:17px;font-weight:300;color:var(--cream);margin-top:6px}
.r-second{font-size:14.5px;color:var(--cream3);margin-top:6px}
.r-bars{display:grid;gap:9px;margin:22px auto 4px;max-width:340px}
.bar{display:grid;grid-template-columns:76px 1fr 42px;align-items:center;gap:10px;font-size:14px;color:var(--cream2)}
.bar-l{text-align:right}
.bar.main .bar-l{color:var(--gold2);font-weight:500}
.bar-t{height:8px;border-radius:99px;background:rgba(247,241,230,.1);overflow:hidden;display:block}
.bar-t i{display:block;height:100%;width:0;border-radius:99px;background:var(--c);transition:width 1.1s var(--ease)}
.r-bars.go .bar-t i{width:var(--w)}
.bar-n{font-size:12.5px;color:var(--cream3);text-align:left;font-variant-numeric:tabular-nums}
.r-sign{margin-top:18px;font-size:12px;color:var(--cream3);letter-spacing:.3px}
.r-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 22px}
/* paper */
.paper{background:linear-gradient(180deg,#FBF7EF,#F7F1E6);color:var(--navy);border-radius:26px;padding:8px 22px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.p-sec{padding:20px 0;border-bottom:1px solid rgba(200,169,106,.35)}
.p-sec:last-child{border-bottom:0}
.p-sec h3{font-family:"Varela Round","Rubik",sans-serif;font-weight:400;font-size:20px;color:var(--navy);display:flex;align-items:center;gap:10px;margin-bottom:8px}
.p-sec .ic{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(135deg,#E6CF97,#C8A96A 60%,#9a7d45)}
.p-sec p{font-size:16.5px;line-height:1.75;color:#2b3550}
.p-sec.tip p{background:rgba(200,169,106,.12);border-right:3px solid var(--gold);padding:12px 14px;border-radius:12px}
.p-sec.next h3{color:#8a6c34}
/* cta */
.cta-box{margin-top:22px;padding:26px 20px 22px;border-radius:26px;text-align:center;display:flex;flex-direction:column;gap:12px;
 background:radial-gradient(120% 90% at 50% 0%,rgba(200,169,106,.18),rgba(31,42,68,.5) 60%);border:1px solid rgba(200,169,106,.4)}
.cta-title{font-family:"Varela Round","Rubik",sans-serif;font-size:26px;color:var(--cream)}
.cta-text{font-size:16px;font-weight:300;line-height:1.6;color:var(--cream2);margin-bottom:6px}
.gift{font-size:14px;color:var(--gold2);line-height:1.5;margin:-2px 0 6px}
.sim-link{display:inline-flex;align-items:center;justify-content:center;gap:8px;color:var(--gold2);font-size:15px;text-decoration:none;margin-top:6px;padding:8px;border-bottom:1px dashed rgba(200,169,106,.5);align-self:center}
.sim-link svg{width:18px;height:18px}
.again{font-family:inherit;background:none;border:0;color:var(--cream3);font-size:15px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;margin:22px auto 0;padding:10px}
/* footer */
.foot{position:relative;z-index:1;width:100%;max-width:520px;margin:0 auto;padding:18px 20px calc(22px + env(safe-area-inset-bottom));text-align:center;border-top:1px solid rgba(200,169,106,.22)}
.foot-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.foot a,.foot button{font-family:inherit;display:inline-flex;align-items:center;gap:7px;color:var(--cream);background:rgba(247,241,230,.05);border:1px solid rgba(200,169,106,.4);border-radius:999px;padding:9px 14px;font-size:14px;text-decoration:none;cursor:pointer;min-height:42px}
.foot svg{width:18px;height:18px;color:var(--gold2)}
.sig{margin-top:14px;font-size:13px;color:var(--cream3);line-height:1.6}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,30px);background:var(--cream);color:var(--navy);padding:12px 20px;border-radius:999px;font-size:15px;box-shadow:0 12px 30px rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:50;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:900px){.brand{padding-top:40px}.app{padding-top:16px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}