/* Heavenly Harvest — Sky Map design language, light celestial gold */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&family=Fraunces:opsz,wght,SOFT@9..144,500..700,50&family=Great+Vibes&display=swap");

:root{
  --sky-top:#0E0803; --sky-mid:#24160A; --sky-low:#4A2E0E; --sky-horizon:#6E4614;
  --gold-600:#B7841C; --gold-500:#D9A42E; --gold-400:#EFC14E; --gold-300:#F7D77F; --gold-100:#FFF3CC;
  --ink:#3A2A10; --ink-soft:#6B5326; --ink-mute:#8C7444;
  --glass:rgba(255,247,226,.9); --glass-strong:rgba(255,251,240,.94);
  --border:rgba(183,132,28,.22); --border-strong:rgba(183,132,28,.45);
  --grad-cta:linear-gradient(90deg,#D9A42E 0%,#EFC14E 55%,#F7D77F 100%);
  --glow-gold:0 0 32px rgba(239,193,78,.55);
  --shadow-card:0 18px 50px rgba(150,100,20,.18);
  --font-wordmark:"Great Vibes",cursive; --font-display:"Fraunces",Georgia,serif;
  --font-eyebrow:"Cinzel",Georgia,serif; --font-body:"DM Sans",system-ui,sans-serif;
  --r-m:16px; --r-l:22px; --answer-h:56px; --cta-h:56px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);min-height:100vh;overflow-x:hidden;line-height:1.5;-webkit-font-smoothing:antialiased;
  background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 40%,var(--sky-low) 78%,var(--sky-horizon) 100%)}

/* ---------- celestial background ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:-1;overflow:hidden}
/* soft golden glow from above (static, no rotating rays) */
.sky::before{content:"";position:absolute;left:50%;top:-30vh;width:110vmax;height:80vmax;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 40%,rgba(255,206,110,.22) 0%,rgba(214,150,50,.10) 30%,transparent 60%)}
.rays{display:none}
.stars{position:absolute;inset:0;opacity:.9;background-image:
  radial-gradient(2px 2px at 12% 18%,#fff6dc,transparent),radial-gradient(1.5px 1.5px at 28% 8%,#fff,transparent),
  radial-gradient(2.5px 2.5px at 72% 14%,#ffe7a8,transparent),radial-gradient(1.5px 1.5px at 86% 30%,#fff,transparent),
  radial-gradient(2px 2px at 8% 46%,#fff,transparent),radial-gradient(1.5px 1.5px at 92% 52%,#fff6dc,transparent),
  radial-gradient(2px 2px at 40% 26%,#fff,transparent),radial-gradient(1px 1px at 60% 38%,#fff,transparent),
  radial-gradient(1.5px 1.5px at 52% 64%,#ffe7a8,transparent),radial-gradient(1px 1px at 20% 78%,#fff,transparent),
  radial-gradient(2px 2px at 78% 72%,#fff,transparent),radial-gradient(1px 1px at 66% 88%,#fff6dc,transparent);
  animation:twinkle 3.5s ease-in-out infinite alternate}
.stars.s2{opacity:.6;background-image:
  radial-gradient(1px 1px at 5% 10%,#fff,transparent),radial-gradient(1px 1px at 18% 34%,#fff,transparent),
  radial-gradient(1px 1px at 34% 52%,#fff,transparent),radial-gradient(1px 1px at 47% 12%,#fff,transparent),
  radial-gradient(1px 1px at 58% 24%,#fff,transparent),radial-gradient(1px 1px at 69% 47%,#fff,transparent),
  radial-gradient(1px 1px at 81% 9%,#fff,transparent),radial-gradient(1px 1px at 95% 40%,#fff,transparent),
  radial-gradient(1px 1px at 14% 62%,#fff,transparent),radial-gradient(1px 1px at 39% 82%,#fff,transparent),
  radial-gradient(1px 1px at 88% 84%,#fff,transparent),radial-gradient(1px 1px at 74% 60%,#fff,transparent);
  animation:twinkle 5s ease-in-out 1.2s infinite alternate}
.stars.s3{opacity:.8;background-image:
  radial-gradient(3px 3px at 24% 22%,rgba(255,226,150,.95),transparent),radial-gradient(3px 3px at 82% 20%,rgba(255,226,150,.95),transparent),
  radial-gradient(2.5px 2.5px at 62% 56%,rgba(255,226,150,.9),transparent),radial-gradient(2.5px 2.5px at 10% 70%,rgba(255,226,150,.9),transparent);
  filter:drop-shadow(0 0 4px rgba(255,210,120,.9));animation:twinkle 2.6s ease-in-out .6s infinite alternate}
/* shooting stars */
.meteor{position:absolute;display:block;width:150px;height:2px;border-radius:2px;opacity:0;
  background:linear-gradient(90deg,#fff8e1 0%,rgba(255,214,120,.7) 25%,transparent 100%);
  transform:rotate(-32deg) translateX(0);animation:meteor 9s linear infinite}
.meteor::before{content:"";position:absolute;left:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(255,220,140,.9)}
.meteor.m1{top:8%;left:78%;animation-delay:1s}
.meteor.m2{top:22%;left:98%;animation-delay:4.5s;animation-duration:11s}
.meteor.m3{top:4%;left:46%;animation-delay:7s;animation-duration:10s}
.meteor.m4{top:36%;left:90%;animation-delay:13s;animation-duration:14s}
@keyframes meteor{0%{opacity:0;transform:rotate(-32deg) translateX(0)}2%{opacity:1}12%{opacity:0;transform:rotate(-32deg) translateX(-70vmax)}100%{opacity:0;transform:rotate(-32deg) translateX(-70vmax)}}
/* golden nebula haze instead of light clouds */
.cloud{position:absolute;border-radius:50%;background:rgba(214,150,52,.22);filter:blur(40px);opacity:.7}
.cloud.c1{width:80vw;height:26vh;left:-25vw;bottom:-6vh;animation:drift 50s ease-in-out infinite alternate}
.cloud.c2{width:70vw;height:22vh;right:-25vw;bottom:4vh;opacity:.55;animation:drift 65s ease-in-out infinite alternate-reverse}
.cloud.c3{width:55vw;height:16vh;left:-10vw;top:24vh;opacity:.35;background:rgba(170,110,200,.18);animation:drift 80s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
@keyframes drift{to{transform:translateX(10vw)}}

/* ---------- layout ---------- */
.wrap{max-width:480px;margin:0 auto;padding:20px 16px 72px;position:relative}
.brand{font-family:var(--font-wordmark);font-size:36px;color:#FFF3CC;text-align:center;margin:6px 0 18px;text-shadow:0 0 18px rgba(255,210,110,.9)}
.brand span{display:none}
.card{background:var(--glass);border:1px solid rgba(255,255,255,.75);border-radius:var(--r-l);padding:28px 20px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-card)}
.scr{display:none;animation:in .5s var(--ease)}
.scr.on{display:block}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.15;color:var(--ink)}
h1{font-size:clamp(30px,8.5vw,40px);text-align:center;margin-bottom:12px}
h2{font-size:clamp(24px,6.5vw,30px);text-align:center;margin-bottom:10px}
h3{font-size:20px;text-align:center}
.gold{color:var(--gold-600);font-style:italic}
.lead{color:var(--ink-soft);text-align:center;margin-bottom:20px;font-size:17px}
.tag{display:block;font-family:var(--font-eyebrow);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-600);margin-bottom:8px;text-align:center}
.meta{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-mute);font-family:var(--font-eyebrow);letter-spacing:.06em}
.q{font-size:clamp(22px,6vw,26px);margin:14px 0 18px;text-align:center!important}
.quote{font-family:var(--font-display);font-style:italic;font-size:24px;text-align:center;color:var(--gold-600);
  padding:18px 14px;margin:14px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ---------- controls ---------- */
input{width:100%;height:52px;border-radius:14px;border:1px solid var(--border-strong);background:rgba(255,255,255,.85);
  color:var(--ink);padding:0 16px;font:500 17px var(--font-body);margin-bottom:14px}
input::placeholder{color:#b19a6a}
input:focus{outline:3px solid rgba(239,193,78,.55);outline-offset:1px}
.cta{width:100%;min-height:var(--cta-h);border:0;border-radius:999px;cursor:pointer;font:700 19px var(--font-body);color:#3a2706;
  background:var(--grad-cta);box-shadow:0 10px 26px rgba(217,164,46,.45),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .15s var(--ease),box-shadow .2s var(--ease);letter-spacing:.02em}
@media (hover:hover){.cta:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(217,164,46,.55),inset 0 1px 0 rgba(255,255,255,.7)}}
.cta:active{transform:translateY(1px)}
.cta:focus-visible,.choice:focus-visible,.tier:focus-visible{outline:3px solid var(--gold-600);outline-offset:3px}
.choices{display:grid;gap:10px}
.choice{min-height:var(--answer-h);text-align:left;padding:14px 18px;border-radius:var(--r-m);border:1px solid rgba(255,255,255,.9);
  background:var(--glass-strong);color:var(--ink);font:500 16px var(--font-body);cursor:pointer;box-shadow:0 4px 14px rgba(150,100,20,.08);
  transition:all .2s var(--ease)}
@media (hover:hover){.choice:hover{border-color:var(--gold-400);box-shadow:var(--glow-gold)}}
.choice.picked{background:var(--gold-100);border-color:var(--gold-500);box-shadow:var(--glow-gold)}

/* ---------- progress / balance ---------- */
.progress{height:8px;border-radius:99px;background:rgba(183,132,28,.15);overflow:hidden;margin:8px 0 14px}
.progress>i{display:block;height:100%;width:0;border-radius:99px;background:var(--grad-cta);box-shadow:0 0 12px rgba(239,193,78,.8);transition:width .45s var(--ease)}
.balance{text-align:center;margin:4px 0 10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.6);border:1px solid var(--border)}
.balance .tag{margin-bottom:2px}
.balance strong{display:block;font-family:var(--font-display);font-size:30px;color:var(--gold-600)}

/* ---------- portals ---------- */
.portals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0}
.portal{text-align:center;font:700 10px/1.2 var(--font-body);color:var(--ink-soft)}
.portal .tile{aspect-ratio:3/4;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:5px;
  background:radial-gradient(ellipse at 50% 70%,#fff 0%,var(--gold-300) 35%,var(--gold-500) 100%);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--gold-400),0 6px 18px rgba(217,164,46,.45),inset 0 0 18px rgba(255,255,255,.8)}
.mini{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px;min-height:8px}
.mini .tile{width:30px;height:40px;font-size:14px;margin:0}
.seal{position:fixed;inset:0;background:radial-gradient(circle,rgba(255,246,218,.85),rgba(249,210,122,.9));display:none;align-items:center;justify-content:center;padding:16px;z-index:10}
.seal.on{display:flex;animation:in .4s var(--ease)}
.seal .card{max-width:400px;text-align:center;background:var(--glass-strong)}
.seal .tile{width:120px!important;height:160px!important;font-size:58px!important;margin:0 auto 14px!important;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1px var(--gold-400),0 0 48px rgba(239,193,78,.9),inset 0 0 18px #fff}}

/* ---------- loader ---------- */
.loader{text-align:center}
.ring{width:84px;height:84px;margin:10px auto 18px;border-radius:50%;border:3px solid rgba(183,132,28,.15);border-top-color:var(--gold-500);animation:spin2 1s linear infinite}
@keyframes spin2{to{transform:rotate(360deg)}}
.list{list-style:none;display:grid;gap:10px;margin:16px 0}
.list li{display:flex;gap:10px}
.list li::before{content:"\2726";color:var(--gold-500)}

/* ---------- offer ---------- */
.video{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r-l);overflow:hidden;background:#2a2010;margin:18px 0;box-shadow:var(--shadow-card);border:3px solid #fff}
.video .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#f7e6b8;text-align:center;padding:16px}
.section{margin-top:22px}
.winners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0}
.winner{text-align:center;font:700 11px var(--font-body);color:var(--ink)}
.winner .av{aspect-ratio:1;border-radius:50%;border:3px solid var(--gold-400);margin-bottom:4px;display:flex;align-items:center;justify-content:center;
  background:var(--gold-100);color:var(--gold-600);font:600 20px var(--font-display);box-shadow:0 0 14px rgba(239,193,78,.5)}
.winner q{display:block;color:var(--ink-mute);font:italic 400 10px var(--font-body);margin-top:2px}
.warning{border:1px solid #e0796a;background:rgba(255,235,228,.9);border-radius:var(--r-m);padding:16px;text-align:center;margin:18px 0;color:#6b2016}
.warning h3{color:#b3321f;font:700 15px var(--font-body);margin-bottom:6px}
.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.tier{border:1px solid rgba(255,255,255,.9);border-radius:var(--r-m);padding:16px 10px;text-align:center;background:var(--glass-strong);cursor:pointer;min-height:100px;
  transition:all .2s var(--ease);color:var(--ink);font:inherit}
.tier strong{display:block;font:600 32px var(--font-display);color:var(--gold-600)}
.tier small{color:var(--ink-mute)}
.tier[aria-pressed="true"]{border-color:var(--gold-500);background:var(--gold-100);box-shadow:var(--glow-gold)}
.badge{font:700 11px var(--font-body);color:#3a2706;background:var(--grad-cta);border-radius:99px;padding:2px 10px;display:inline-block;margin-bottom:4px}
.faq details{border-bottom:1px solid var(--border);padding:14px 0}
.faq summary{cursor:pointer;font-weight:700}
.faq p{color:var(--ink-soft);margin-top:8px}
.foot{text-align:center;color:var(--ink-mute);font-size:12px;margin-top:32px}
.foot a{color:var(--ink-mute)}
.sticky{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(180deg,transparent,rgba(255,231,168,.95) 35%);display:none;z-index:5}
.sticky.on{display:block}
.sticky .cta{max-width:480px;margin:0 auto;display:block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.portal .tile{overflow:hidden;padding:0}
.portal .tile img{width:100%;height:100%;object-fit:cover;display:block}