:root{
  --black:#070410; --plum:#150b26; --violet:#2a1544; --purple:#6d4a9e;
  --gold:#c9a45c; --gold-hi:#e8c886; --gold-dim:#8a6a2f;
  --ivory:#f0e7d3; --ivory-dim:rgba(240,231,211,.62);
  --card-w:min(200px,26vw); --card-h:calc(var(--card-w)*1.7);
  --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,'Segoe UI',Inter,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--black);color:var(--ivory);font-family:var(--sans);min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(1200px 700px at 50% -10%,#2a1544 0%,#150b26 45%,#070410 100%);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(600px 300px at 20% 80%,rgba(109,74,158,.14),transparent 70%),
             radial-gradient(700px 320px at 85% 15%,rgba(201,164,92,.08),transparent 70%);}
#app{position:relative;z-index:1;max-width:1060px;margin:0 auto;padding:0 20px 90px}
.hidden{display:none!important}

/* ambient particles + mist */
#stars,#mist{position:fixed;inset:0;pointer-events:none;z-index:0}
#stars{z-index:0}
#mist{background:radial-gradient(60% 40% at 50% 60%,rgba(109,74,158,.10),transparent 70%);filter:blur(6px);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateY(-12px)}to{transform:translateY(14px)}}
.star{position:absolute;border-radius:50%;background:var(--gold-hi);opacity:.5;animation:tw var(--tw,4s) ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12}50%{opacity:.7}}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(1000px 700px at 50% 40%,#241240 0%,#0d0618 60%,#050309 100%);overflow:hidden}
#intro .beam{position:absolute;top:-20%;left:50%;width:340px;height:140%;transform:translateX(-50%) rotate(12deg);
  background:linear-gradient(180deg,transparent,rgba(232,200,134,.14),transparent);filter:blur(4px);animation:sweep 4.6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:translateX(-70%) rotate(12deg);opacity:.4}50%{transform:translateX(-30%) rotate(12deg);opacity:1}}
#intro .ring{position:absolute;width:min(70vmin,460px);height:min(70vmin,460px);border:1px solid rgba(201,164,92,.35);border-radius:50%;animation:ringpulse 3s ease-in-out infinite}
#intro .ring.r2{width:min(52vmin,340px);height:min(52vmin,340px);animation-delay:.6s;opacity:.7}
@keyframes ringpulse{0%,100%{transform:scale(.96);opacity:.35}50%{transform:scale(1.03);opacity:.8}}
#introCards{display:flex;gap:18px;perspective:900px;z-index:2}
#introCards .mini{width:110px;height:187px;border-radius:12px;background:url('/assets/card-back.svg') center/cover;border:1px solid rgba(201,164,92,.6);
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 34px rgba(201,164,92,.18);opacity:0}
#intro.done .mini{animation:cardin 1.1s cubic-bezier(.2,.8,.25,1) forwards}
#intro.done .mini:nth-child(2){animation-delay:.35s}#intro.done .mini:nth-child(3){animation-delay:.7s}
@keyframes cardin{from{opacity:0;transform:translateZ(-320px) rotateY(28deg) translateY(60px)}to{opacity:1;transform:translateZ(0) rotateY(0) translateY(0)}}
#introTitle{margin-top:34px;font-family:var(--serif);font-size:clamp(20px,4.5vw,34px);letter-spacing:.35em;color:var(--gold-hi);opacity:0;z-index:2}
#intro.done #introTitle{animation:fadeup 1s ease .9s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#skipIntro{position:absolute;bottom:34px;z-index:3;background:transparent;border:1px solid rgba(201,164,92,.5);color:var(--ivory);
  letter-spacing:.3em;font-size:12px;padding:10px 26px;border-radius:999px;cursor:pointer}
#skipIntro:hover{background:rgba(201,164,92,.12)}

/* ---------- header/footer ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0 8px}
.brand{font-family:var(--serif);letter-spacing:.4em;font-size:13px;color:var(--gold)}
footer{margin-top:70px;text-align:center;font-size:12px;color:rgba(240,231,211,.4)}
footer a{color:rgba(240,231,211,.55);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.3)}
footer a:hover{color:var(--gold-hi)}
.eyebrow{text-align:center;font-size:12px;letter-spacing:.45em;color:var(--gold);margin:26px 0 12px}
h1.title{font-family:var(--serif);font-weight:400;text-align:center;font-size:clamp(30px,6vw,54px);line-height:1.15;color:var(--ivory)}
h1.title em{color:var(--gold-hi);font-style:normal}
.sub{text-align:center;color:var(--ivory-dim);max-width:620px;margin:16px auto 0;line-height:1.7;font-size:15px}

/* ---------- question ---------- */
.qwrap{max-width:640px;margin:38px auto 0;background:rgba(21,11,38,.55);border:1px solid rgba(201,164,92,.28);
  border-radius:18px;padding:30px 28px;backdrop-filter:blur(8px);box-shadow:0 24px 70px rgba(0,0,0,.5)}
.qlabel{font-size:11px;letter-spacing:.4em;color:var(--gold);margin-bottom:12px}
textarea{width:100%;min-height:110px;background:rgba(7,4,16,.7);border:1px solid rgba(201,164,92,.35);border-radius:12px;
  color:var(--ivory);font-size:16px;font-family:var(--serif);padding:16px;resize:vertical;line-height:1.6}
textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,164,92,.15)}
.qmeta{display:flex;justify-content:space-between;font-size:12px;color:var(--ivory-dim);margin-top:8px}
.qerr{color:#e89a9a;font-size:13px;min-height:20px;margin-top:6px}
.btn{display:block;width:100%;margin-top:14px;padding:17px;border:none;border-radius:999px;cursor:pointer;
  font-size:14px;letter-spacing:.32em;font-weight:700;color:#1a0f02;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold) 55%,#a37f3c);box-shadow:0 12px 40px rgba(201,164,92,.35)}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:wait;filter:none}
.btn.ghost{background:transparent;color:var(--ivory);border:1px solid rgba(201,164,92,.5);box-shadow:none;font-weight:400}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.btnrow .btn{width:auto;flex:1;min-width:170px;margin-top:0}
.fineprint{text-align:center;font-size:12px;color:var(--ivory-dim);margin-top:12px}

/* ---------- spread / cards ---------- */
.spread{display:flex;justify-content:center;gap:clamp(10px,3vw,30px);perspective:1400px;margin:40px 0 10px;flex-wrap:nowrap}
.slot{display:flex;flex-direction:column;align-items:center;gap:12px}
.slot .pos{font-size:11px;letter-spacing:.42em;color:var(--gold)}
.card3d{width:var(--card-w);height:var(--card-h);position:relative;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.25,1)}
.face{position:absolute;inset:0;border-radius:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  border:1px solid rgba(201,164,92,.65);box-shadow:0 22px 55px rgba(0,0,0,.65),0 0 30px rgba(201,164,92,.14)}
.face img{width:100%;height:100%;object-fit:cover;display:block}
.face.back{transform:rotateY(0deg)}
.face.front{transform:rotateY(180deg)}
.card3d.flipped{transform:rotateY(180deg)}
.card3d .shine{position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(232,200,134,.28) 48%,transparent 62%);opacity:0}
.card3d.flipped .shine{animation:shine 1.1s ease .15s}
@keyframes shine{from{opacity:0;transform:translateX(-30%)}30%{opacity:1}to{opacity:0;transform:translateX(30%)}}
.enter1{animation:enter1 1s cubic-bezier(.2,.8,.25,1) both}
.enter2{animation:enter2 1s cubic-bezier(.2,.8,.25,1) .18s both}
.enter3{animation:enter3 1s cubic-bezier(.2,.8,.25,1) .36s both}
@keyframes enter1{from{opacity:0;transform:translateZ(-420px) translateY(-70px) rotateY(20deg)}to{opacity:1;transform:none}}
@keyframes enter2{from{opacity:0;transform:translateY(220px) scale(.85)}to{opacity:1;transform:none}}
@keyframes enter3{from{opacity:0;transform:translateX(260px) rotateY(-24deg)}to{opacity:1;transform:none}}
.reveal-flash{animation:rflash 1s ease}
@keyframes rflash{0%{filter:brightness(1)}30%{filter:brightness(1.7) drop-shadow(0 0 26px rgba(232,200,134,.8))}100%{filter:brightness(1)}}
.shake{animation:shk .5s ease}
@keyframes shk{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.cardname{font-family:var(--serif);font-size:15px;color:var(--ivory);text-align:center;min-height:22px}
.cardori{font-size:10px;letter-spacing:.3em;color:var(--gold);text-align:center;min-height:16px}

/* ---------- locked / price ---------- */
.lockbox{max-width:600px;margin:26px auto 0;text-align:center;background:rgba(21,11,38,.55);border:1px solid rgba(201,164,92,.3);
  border-radius:18px;padding:32px 26px;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.lockbox h2{font-family:var(--serif);font-weight:400;letter-spacing:.25em;font-size:clamp(18px,3.6vw,26px);color:var(--gold-hi)}
.lockbox p{color:var(--ivory-dim);line-height:1.7;margin:14px 0;font-size:15px}
.price{font-family:var(--serif);font-size:44px;color:var(--ivory);margin:8px 0}
.price small{font-size:16px;color:var(--ivory-dim);letter-spacing:.2em}

/* ---------- locked (payment) view: everything above the fold ---------- */
#readingBox.locked .eyebrow{margin:14px 0 8px}
#readingBox.locked h1.title{font-size:clamp(24px,4vw,34px)}
#readingBox.locked .spread{--card-w:min(148px,22vw);margin:20px 0 6px;gap:clamp(8px,2vw,20px)}
#readingBox.locked .slot{gap:8px}
#readingBox.locked .lockbox{margin-top:14px;padding:24px 22px}
#readingBox.locked .lockbox h2{font-size:clamp(16px,3vw,22px)}
#readingBox.locked .lockbox p{margin:10px 0;font-size:14px}
#readingBox.locked .price{font-size:34px;margin:4px 0}
#readingBox.locked .btn{padding:14px;margin-top:10px}
@media (max-width:640px){
  #readingBox.locked .spread{--card-w:min(92px,27vw)}
  #readingBox.locked h1.title{font-size:24px}
}

/* ---------- report ---------- */
.report{max-width:760px;margin:34px auto 0}
.report .rq{background:rgba(21,11,38,.5);border-left:3px solid var(--gold);padding:18px 22px;border-radius:0 14px 14px 0;margin-bottom:26px}
.report .rq .k{font-size:11px;letter-spacing:.4em;color:var(--gold)}
.report .rq .v{font-family:var(--serif);font-size:20px;margin-top:8px;line-height:1.5}
.sect{margin:30px 0}
.sect .num{font-size:12px;letter-spacing:.4em;color:var(--gold)}
.sect h3{font-family:var(--serif);font-weight:400;font-size:24px;margin:6px 0 10px}
.sect p{line-height:1.85;color:#e8dfc9;font-size:15.5px}
.sect .cname{color:var(--gold-hi);font-family:var(--serif)}
.disclaimer{font-size:12.5px;color:var(--ivory-dim);border-top:1px solid rgba(201,164,92,.25);padding-top:18px;line-height:1.7}

/* ---------- modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:rgba(5,3,9,.72);padding:20px}
.modal .box{max-width:440px;width:100%;background:#160c28;border:1px solid rgba(201,164,92,.4);border-radius:18px;padding:30px 26px;text-align:center}
.modal h3{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:12px}
.modal p{color:var(--ivory-dim);font-size:14px;line-height:1.7;margin-bottom:18px}
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:70;background:#1d1233;border:1px solid var(--gold);
  color:var(--ivory);padding:12px 26px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none}
#toast.show{opacity:1}
.loader{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0}
.orb{width:74px;height:74px;border-radius:50%;border:2px solid rgba(201,164,92,.25);border-top-color:var(--gold-hi);animation:spin 1.1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loader p{color:var(--ivory-dim);font-family:var(--serif);font-size:16px;letter-spacing:.1em}

@media (max-width:640px){
  :root{--card-w:min(104px,28vw)}
  .qwrap{padding:22px 18px}
  .btnrow .btn{min-width:100%}
  #introCards .mini{width:84px;height:143px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}