/* ═══════════════════════════════════════════════════════════════
   CELESTIA — "midnight observatory" theme
   Fraunces (display serif) + Outfit (UI sans), loaded in index.html
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg:#080B16; --bg2:#0C1020; --panel:#111629; --panel2:#181E38;
  --line:#242C4E; --line2:#2F3860;
  --tx:#EDEFFB; --mut:#8B93B8; --faint:#5A628A;
  --gold:#E8B44A; --gold2:#F6D488; --vio:#8E7CFF; --vio2:#6A5AE0;
  --rose:#F27FB2; --cyan:#6EE7E7; --grn:#4CC38A; --red:#E5484D; --amb:#F5A524;
  --serif:'Fraunces',Georgia,serif;
  --sans:'Outfit','Segoe UI',system-ui,sans-serif;
  --glow-vio:0 0 40px #8e7cff2e;
  --glow-gold:0 0 44px #e8b44a30;
  --card-grad:linear-gradient(160deg,#141a31 0%,#101527 60%,#0e1224 100%);
  --border-grad:linear-gradient(160deg,#3a4370 0%,#242c4e 40%,#1c2340 100%);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
::selection{background:#8e7cff55;color:#fff}
body{
  background:var(--bg);color:var(--tx);
  font:16px/1.65 var(--sans);
  min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ——— cosmic backdrop: nebula + milky way + aurora orbs + zodiac wheel + moon ——— */
.nebula{position:fixed;inset:0;z-index:-6;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 50% at 50% -8%, #2c2160aa 0%, transparent 60%),
    radial-gradient(ellipse 46% 38% at 90% 20%, #123a5e66 0%, transparent 68%),
    radial-gradient(ellipse 50% 40% at 4% 62%, #3d1c5a55 0%, transparent 68%),
    radial-gradient(ellipse 44% 34% at 74% 74%, #5a204666 0%, transparent 70%),
    radial-gradient(ellipse 64% 46% at 40% 112%, #0f2a4a77 0%, transparent 70%);
}
.mway{position:fixed;z-index:-5;pointer-events:none;left:-30%;top:-16%;width:160%;height:64%;
  transform:rotate(-24deg);filter:blur(34px);opacity:.5;
  background:
    radial-gradient(ellipse 46% 26% at 34% 52%, #8e7cff2b 0%, transparent 70%),
    radial-gradient(ellipse 60% 20% at 60% 46%, #d9c9ff21 0%, transparent 70%),
    radial-gradient(ellipse 34% 16% at 78% 56%, #6ee7e716 0%, transparent 70%),
    linear-gradient(90deg,transparent 4%, #b8a9ff12 30%, #ffffff17 52%, #b8a9ff12 74%, transparent 96%)}
.orb{position:fixed;border-radius:50%;filter:blur(90px);opacity:.55;z-index:-4;pointer-events:none;
  animation:drift 26s ease-in-out infinite alternate}
.orb.o1{width:520px;height:520px;top:-170px;left:-130px;background:radial-gradient(circle,#54419966,transparent 70%)}
.orb.o2{width:420px;height:420px;top:30%;right:-170px;background:radial-gradient(circle,#16636347,transparent 70%);animation-delay:-9s}
.orb.o3{width:460px;height:460px;bottom:-190px;left:26%;background:radial-gradient(circle,#8a3f7841,transparent 70%);animation-delay:-17s}
@keyframes drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(50px,36px,0) scale(1.12)}
}
/* slowly rotating zodiac wheel watermark */
.zwheel{position:fixed;z-index:-3;pointer-events:none;
  width:150vmin;height:150vmin;right:-52vmin;top:50%;margin-top:-75vmin;
  opacity:.16;animation:zspin 360s linear infinite}
@keyframes zspin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* glowing moon */
.moonglow{position:fixed;z-index:-3;pointer-events:none;top:86px;right:7%;
  width:150px;height:150px;border-radius:50%;opacity:.8;
  background:radial-gradient(circle at 36% 34%, #fdf8ea 0%, #ece2c4 38%, #cbbf9e 62%, #a3987c 100%);
  box-shadow:0 0 60px 18px #f6e9c53d, 0 0 160px 60px #e8b44a1a, inset -26px -18px 42px #77653fbb;
  animation:moonfloat 14s ease-in-out infinite alternate}
.moonglow::after{content:'';position:absolute;border-radius:50%;
  width:22px;height:22px;left:26%;top:44%;background:#00000014;box-shadow:38px -26px 0 -4px #0000000f, 18px 30px 0 -7px #00000012}
@keyframes moonfloat{from{transform:translateY(0)}to{transform:translateY(16px)}}
@media(max-width:820px){.moonglow{width:92px;height:92px;right:4%;opacity:.55}}
#stars{position:fixed;inset:0;z-index:-2;pointer-events:none}

a{color:var(--vio)}
.container{max-width:1120px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
.mut{color:var(--mut)} .small{font-size:13px} .center{text-align:center}

/* ═══ header ═══ */
header{position:sticky;top:0;z-index:30;
  background:linear-gradient(180deg,#080b16f2 65%,#080b16cc);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid #1c2340}
.hbar{display:flex;align-items:center;gap:14px;padding:14px 0 10px}
.logo{font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  background:linear-gradient(115deg,var(--gold2) 10%,var(--gold) 45%,#c9922f 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px #e8b44a2c)}
.logo small{display:block;font-family:var(--sans);font-weight:500;font-size:10px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--faint);-webkit-text-fill-color:var(--faint);margin-top:1px}
.hsp{flex:1}
.userchip{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--mut)}
.plan-badge{padding:3px 12px;border-radius:20px;font-size:11.5px;font-weight:700;letter-spacing:.06em}
.plan-badge.premium{background:linear-gradient(120deg,#e8b44a2b,#8e7cff26);color:var(--gold2);
  border:1px solid #e8b44a5c;box-shadow:0 0 18px #e8b44a22;text-shadow:0 0 12px #e8b44a55}
.plan-badge.free{background:var(--panel2);color:var(--mut);border:1px solid var(--line)}

/* ═══ nav ═══ */
nav.tabs{display:flex;gap:6px;overflow-x:auto;padding:6px 0 12px;scrollbar-width:none}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs button{flex-shrink:0;position:relative;background:transparent;border:1px solid transparent;
  color:var(--mut);padding:9px 17px;border-radius:24px;cursor:pointer;
  font:500 14px var(--sans);letter-spacing:.01em;transition:all .22s cubic-bezier(.4,0,.2,1)}
nav.tabs button:hover{color:var(--tx);background:#161c3355;transform:translateY(-1px)}
nav.tabs button.on{color:var(--gold2);border-color:#e8b44a3d;
  background:linear-gradient(160deg,#1c1c33,#141628);
  box-shadow:0 4px 22px #00000055, inset 0 1px 0 #ffffff0a, 0 0 24px #e8b44a14}

/* ═══ sections — one continuous scroll ═══ */
section.tab{display:block;padding:44px 0 54px;scroll-margin-top:118px;position:relative}
section.tab + section.tab::before{ /* ornamental divider between sections */
  content:'✦';display:block;text-align:center;color:#e8b44a99;font-size:13px;
  margin:-14px auto 44px;text-shadow:0 0 16px #e8b44a66;
  background:
    linear-gradient(90deg,transparent 0%,#2a3152 18%,#e8b44a55 50%,#2a3152 82%,transparent 100%)
    center/min(560px,80%) 1px no-repeat}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
h2.title{font-family:var(--serif);font-size:clamp(30px,4.4vw,42px);font-weight:600;line-height:1.15;
  letter-spacing:.01em;margin-bottom:6px;
  background:linear-gradient(120deg,#f4f0ff 20%,#cfc4ff 60%,#9d8df1 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
p.sub{color:var(--mut);margin-bottom:26px;font-size:15.5px;max-width:640px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:760px){.grid2,.grid3{grid-template-columns:1fr}}

/* ═══ cards — glass with gradient border ═══ */
.card{position:relative;border-radius:var(--r-lg);padding:24px;
  background:var(--card-grad) padding-box,var(--border-grad) border-box;
  border:1px solid transparent;
  box-shadow:0 14px 44px #00000042, inset 0 1px 0 #ffffff08;
  transition:transform .25s ease,box-shadow .25s ease}
.card:hover{box-shadow:0 18px 54px #00000055, inset 0 1px 0 #ffffff0a, var(--glow-vio)}
.card h3{font-family:var(--serif);font-size:19px;font-weight:600;margin-bottom:12px;color:var(--gold2);letter-spacing:.02em}
.card h3 .em{font-size:21px;margin-right:8px}

/* ═══ forms ═══ */
input,select,textarea{background:#0d1122;border:1px solid var(--line);color:var(--tx);
  padding:12px 15px;border-radius:var(--r-sm);font:15px var(--sans);width:100%;
  transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vio);
  box-shadow:0 0 0 3px #8e7cff26, 0 0 24px #8e7cff18}
label{display:block;color:var(--mut);font-size:12.5px;font-weight:500;letter-spacing:.05em;
  text-transform:uppercase;margin:14px 0 6px}

/* ═══ buttons ═══ */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:linear-gradient(135deg,var(--vio) 0%,var(--vio2) 100%);
  border:0;color:#fff;padding:12px 26px;border-radius:12px;
  font:600 15px var(--sans);letter-spacing:.02em;cursor:pointer;overflow:hidden;
  box-shadow:0 6px 24px #6a5ae04d, inset 0 1px 0 #ffffff2e;
  transition:all .22s cubic-bezier(.4,0,.2,1)}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px #6a5ae066, inset 0 1px 0 #ffffff2e;filter:brightness(1.08)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.gold{background:linear-gradient(135deg,var(--gold2) 0%,var(--gold) 45%,#c9922f 100%);
  color:#2a1d04;box-shadow:0 6px 26px #e8b44a45, inset 0 1px 0 #ffffff55}
.btn.gold::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,#ffffff59,transparent);
  transform:skewX(-20deg);animation:sheen 4.5s ease-in-out infinite}
@keyframes sheen{0%,72%{left:-80%}88%,100%{left:130%}}
.btn.gold:hover{box-shadow:0 10px 36px #e8b44a5e, inset 0 1px 0 #ffffff55}
.btn.ghost{background:#ffffff08;border:1px solid var(--line2);color:var(--tx);box-shadow:none}
.btn.ghost:hover{border-color:var(--vio);background:#8e7cff12;box-shadow:0 0 20px #8e7cff1a}
.btn.sm{padding:8px 16px;font-size:13px;border-radius:10px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* ═══ hero (Today tab) ═══ */
.hero{position:relative;border-radius:26px;padding:44px 40px 40px;margin-bottom:26px;overflow:hidden;
  background:
    radial-gradient(ellipse 90% 130% at 78% -20%, #2b2358cc 0%, transparent 55%),
    radial-gradient(ellipse 60% 90% at 12% 110%, #12324e77 0%, transparent 60%),
    linear-gradient(160deg,#151a33 0%,#0d1124 100%);
  border:1px solid #2b3358;
  box-shadow:0 24px 70px #00000059, inset 0 1px 0 #ffffff0d}
.hero::before{content:'✦';position:absolute;top:18px;right:26px;font-size:15px;color:#e8b44a88;
  text-shadow:0 0 16px #e8b44a;animation:twinkle 3s ease-in-out infinite}
.hero::after{content:'✧';position:absolute;bottom:22px;right:14%;font-size:11px;color:#8e7cff99;
  text-shadow:0 0 14px #8e7cff;animation:twinkle 4s ease-in-out infinite reverse}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
.hero h2{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.6vw,46px);line-height:1.12;margin-bottom:10px;
  background:linear-gradient(115deg,#fff 15%,var(--gold2) 55%,var(--gold) 90%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:#aeb5d9;font-size:16px;max-width:560px}
.hero .date-line{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 16px;
  border-radius:20px;background:#ffffff0a;border:1px solid #ffffff14;
  font-size:13.5px;color:var(--gold2);letter-spacing:.04em}

/* ═══ zodiac picker ═══ */
.signgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:16px 0}
@media(max-width:640px){.signgrid{grid-template-columns:repeat(4,1fr);gap:8px}}
.signgrid button{position:relative;background:linear-gradient(165deg,#141a31,#0f1426);
  border:1px solid var(--line);border-radius:var(--r-md);padding:13px 4px 10px;
  cursor:pointer;color:var(--tx);font:inherit;text-align:center;
  transition:all .22s cubic-bezier(.4,0,.2,1)}
.signgrid button .sym{font-size:24px;display:block;color:var(--vio);
  transition:transform .25s,color .25s;filter:drop-shadow(0 0 8px #8e7cff33)}
.signgrid button .nm{font-size:11px;letter-spacing:.05em;color:var(--mut);transition:color .2s}
.signgrid button:hover{transform:translateY(-3px);border-color:var(--vio);box-shadow:0 10px 26px #00000048, var(--glow-vio)}
.signgrid button:hover .sym{transform:scale(1.18)}
.signgrid button.on{border-color:#e8b44a77;
  background:radial-gradient(ellipse 120% 90% at 50% 0%,#2b2547,#151a31 70%);
  box-shadow:0 8px 28px #00000052, var(--glow-gold)}
.signgrid button.on .sym{color:var(--gold2);filter:drop-shadow(0 0 12px #e8b44a66)}
.signgrid button.on .nm{color:var(--gold2)}

/* ═══ horoscope ═══ */
.energybar{height:9px;background:#0c1020;border:1px solid #1e2544;border-radius:6px;overflow:hidden;margin:7px 0 3px}
.energybar i{display:block;height:100%;border-radius:6px;position:relative;
  background:linear-gradient(90deg,var(--vio) 0%,var(--rose) 55%,var(--gold) 100%);
  background-size:200% 100%;animation:flow 3.2s linear infinite;
  box-shadow:0 0 12px #8e7cff66}
@keyframes flow{from{background-position:0 0}to{background-position:200% 0}}

/* ═══ chart wheel ═══ */
.wheelwrap{display:flex;gap:28px;align-items:flex-start;flex-wrap:wrap}
.wheel{flex:0 0 340px;max-width:100%;filter:drop-shadow(0 10px 30px #00000066)}
.planettable{width:100%;border-collapse:collapse;font-size:14px}
.planettable td{padding:8px 9px;border-bottom:1px solid #1d2444}
.planettable tr{transition:background .15s}
.planettable tr:hover{background:#8e7cff0d}
.planettable tr:last-child td{border-bottom:0}
.planettable .psym{color:var(--vio);font-size:18px;width:30px;text-shadow:0 0 10px #8e7cff44}
.rx{color:var(--amb);font-size:11px;font-weight:800;letter-spacing:.05em;text-shadow:0 0 8px #f5a52444}

/* ═══ tarot ═══ */
.tarotrow{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin:26px 0;perspective:1200px}
.tcard{width:178px;min-height:272px;position:relative;text-align:center;cursor:default;
  padding:20px 15px 16px;border-radius:16px;
  background:
    radial-gradient(ellipse 110% 60% at 50% -8%, #2c2650 0%, transparent 60%),
    linear-gradient(170deg,#1b2140 0%,#12172c 100%);
  border:1px solid transparent;
  background-clip:padding-box;
  box-shadow:0 16px 44px #00000059, inset 0 1px 0 #ffffff0d, inset 0 0 0 1px #e8b44a1f;
  animation:deal .6s cubic-bezier(.22,.9,.3,1.2) backwards;
  transition:transform .3s ease,box-shadow .3s ease}
.tcard:nth-child(2){animation-delay:.14s}
.tcard:nth-child(3){animation-delay:.28s}
@keyframes deal{from{opacity:0;transform:translateY(46px) rotateY(70deg) scale(.85)}to{opacity:1;transform:none}}
.tcard:hover{transform:translateY(-8px) rotateZ(-1deg);box-shadow:0 26px 60px #00000070, var(--glow-gold), inset 0 0 0 1px #e8b44a40}
.tcard::before{content:'';position:absolute;inset:7px;border:1px solid #e8b44a26;border-radius:11px;pointer-events:none}
.tcard.rev{box-shadow:0 16px 44px #00000059, inset 0 1px 0 #ffffff0d, inset 0 0 0 1px #e5484d33}
.tcard.rev::before{border-color:#e5484d2e}
.tcard .tname{font-family:var(--serif);font-weight:600;font-size:17px;color:var(--gold2);margin:10px 0 7px;
  text-shadow:0 0 18px #e8b44a30}
.tcard .tpos{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.tcard .tmean{font-size:13px;line-height:1.55;color:#c6cbe8}
.tcard .revtag{position:absolute;top:11px;right:13px;font-size:9px;font-weight:800;color:var(--red);
  letter-spacing:.14em;text-shadow:0 0 10px #e5484d55}
.tcard .tsym{font-size:40px;display:block;filter:drop-shadow(0 4px 14px #00000066)}

/* ═══ numerology ═══ */
.numgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.numcard{position:relative;text-align:center;border-radius:var(--r-lg);padding:24px 18px;overflow:hidden;
  background:var(--card-grad) padding-box,var(--border-grad) border-box;border:1px solid transparent;
  box-shadow:0 14px 40px #00000042, inset 0 1px 0 #ffffff08;
  transition:transform .25s,box-shadow .25s}
.numcard:hover{transform:translateY(-4px);box-shadow:0 20px 52px #00000055, var(--glow-gold)}
.numcard::before{content:'';position:absolute;top:-40%;left:50%;width:150%;height:80%;transform:translateX(-50%);
  background:radial-gradient(ellipse,#e8b44a12,transparent 65%);pointer-events:none}
.numcard .big{font-family:var(--serif);font-size:52px;font-weight:600;line-height:1.05;
  background:linear-gradient(160deg,var(--gold2),var(--gold) 70%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px #e8b44a2e)}
.numcard .lbl{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}

/* ═══ calendar ═══ */
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:16px}
.calgrid .dow{text-align:center;color:var(--faint);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;padding:6px 0}
.calday{background:linear-gradient(165deg,#131831,#0e1225);border:1px solid #1d2444;border-radius:12px;
  min-height:74px;padding:8px;font-size:12px;transition:all .2s}
.calday:hover{border-color:var(--vio);transform:translateY(-2px);box-shadow:0 8px 20px #00000040, var(--glow-vio)}
.calday.today{border-color:#e8b44a88;background:radial-gradient(ellipse at 50% 0%,#2b2547,#151a31);
  box-shadow:var(--glow-gold)}
.calday .dn{color:var(--mut);font-weight:600}
.calday.today .dn{color:var(--gold2)}
.calday .moon{font-size:16px}
.calday .msign{color:var(--vio);font-size:12px}

/* ═══ journal ═══ */
.jentry{border-radius:var(--r-md);padding:16px 18px;margin-bottom:12px;
  background:var(--card-grad) padding-box,var(--border-grad) border-box;border:1px solid transparent;
  box-shadow:0 8px 26px #00000038;transition:transform .2s,box-shadow .2s}
.jentry:hover{transform:translateX(3px);box-shadow:0 10px 30px #00000045, var(--glow-vio)}
.jentry .jdate{font-family:var(--serif);color:var(--gold2);font-weight:600;font-size:15px}
.jentry .jmood{color:var(--mut);font-size:13px;margin-left:10px}
.jentry p{margin-top:7px;white-space:pre-wrap;font-size:14.5px;color:#d4d8ee}

/* ═══ AI output ═══ */
.ai-out{display:none;position:relative;border-radius:var(--r-lg);padding:26px 26px 24px;margin-top:18px;
  white-space:pre-wrap;font-size:15.5px;line-height:1.75;color:#dfe2f5;
  background:
    radial-gradient(ellipse 100% 70% at 50% -10%, #322a5e55 0%, transparent 60%),
    linear-gradient(165deg,#191f3d,#111629);
  border:1px solid #8e7cff4d;
  box-shadow:0 18px 50px #00000052, 0 0 44px #8e7cff1c, inset 0 1px 0 #ffffff0c}
.ai-out.show{display:block;animation:rise .5s cubic-bezier(.22,.9,.3,1)}
.ai-out::before{content:'✨ CELESTIA READS';position:absolute;top:-9px;left:22px;
  font-size:9.5px;font-weight:800;letter-spacing:.24em;color:var(--gold2);
  background:var(--bg2);padding:2px 12px;border-radius:10px;border:1px solid #e8b44a44}
.quota{font-size:12px;color:var(--faint);letter-spacing:.03em}

/* ═══ pricing ═══ */
.pricegrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;margin-top:24px;align-items:stretch}
@media(max-width:860px){.pricegrid{grid-template-columns:1fr;max-width:430px;margin-left:auto;margin-right:auto}}
.price{position:relative;text-align:center;border-radius:22px;padding:32px 26px;
  background:var(--card-grad) padding-box,var(--border-grad) border-box;border:1px solid transparent;
  box-shadow:0 16px 46px #00000045, inset 0 1px 0 #ffffff08;
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s}
.price:hover{transform:translateY(-6px);box-shadow:0 24px 60px #00000058, var(--glow-vio)}
.price.hot{transform:scale(1.03);z-index:2;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, #33285c 0%, transparent 60%),
    linear-gradient(168deg,#1c2140 0%,#131834 100%) padding-box,
    linear-gradient(160deg,#e8b44a 0%,#8e7cff 55%,#e8b44a 110%) border-box;
  border:1.5px solid transparent;
  box-shadow:0 24px 64px #00000059, 0 0 52px #e8b44a1f, inset 0 1px 0 #ffffff10}
.price.hot:hover{transform:scale(1.03) translateY(-6px)}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(120deg,var(--gold2),var(--gold));color:#2a1d04;
  font-size:10.5px;font-weight:800;letter-spacing:.16em;padding:5px 16px;border-radius:14px;
  text-transform:uppercase;box-shadow:0 6px 20px #e8b44a4d}
.price h3{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--tx);letter-spacing:.02em}
.price .amt{font-family:var(--serif);font-size:46px;font-weight:600;margin:12px 0 2px;
  background:linear-gradient(160deg,var(--gold2),var(--gold) 75%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 24px #e8b44a26)}
.price .per{color:var(--faint);font-size:13px;margin-bottom:16px;letter-spacing:.04em}
.price ul{list-style:none;text-align:left;margin:18px 0 22px;font-size:14px}
.price ul li{padding:7px 0;color:var(--mut);border-bottom:1px dashed #232b4e}
.price ul li:last-child{border-bottom:0}
.price ul li b{color:var(--tx);font-weight:500}
.price ul li::before{content:'✦ ';color:var(--vio);text-shadow:0 0 8px #8e7cff55}

/* ═══ payment / QR ═══ */
.qrbox{background:#fff;border-radius:16px;padding:15px;display:inline-block;margin:14px auto;
  box-shadow:0 12px 36px #00000059, 0 0 0 6px #ffffff0d}
.upiid{font-family:ui-monospace,Menlo,monospace;background:#0d1122;border:1px solid var(--line2);
  padding:9px 16px;border-radius:10px;display:inline-block;margin:10px 0;user-select:all;
  color:var(--cyan);letter-spacing:.03em}

/* ═══ modals ═══ */
.overlay{position:fixed;inset:0;background:#05070fd9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:50;display:none;align-items:flex-start;justify-content:center;overflow-y:auto;padding:6vh 16px}
.overlay.show{display:flex}
.modal{position:relative;width:100%;max-width:452px;border-radius:22px;padding:32px 30px;
  background:
    radial-gradient(ellipse 120% 55% at 50% -8%, #2c2550aa 0%, transparent 60%),
    linear-gradient(168deg,#161b34,#0f1428) padding-box,
    var(--border-grad) border-box;
  border:1px solid transparent;
  box-shadow:0 40px 100px #000000a6, inset 0 1px 0 #ffffff0d;
  animation:pop .32s cubic-bezier(.22,.9,.3,1.15)}
@keyframes pop{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.modal h3{font-family:var(--serif);color:var(--gold2);margin-bottom:5px;font-size:24px;font-weight:600}
.modal .x{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--faint);
  font-size:24px;cursor:pointer;transition:color .2s,transform .2s}
.modal .x:hover{color:var(--tx);transform:rotate(90deg)}
.msg{padding:11px 15px;border-radius:10px;margin-top:14px;font-size:14px;display:none}
.msg.err{display:block;background:#3a151877;border:1px solid #e5484d4d;color:#ff9b9e}
.msg.ok{display:block;background:#0f352477;border:1px solid #4cc38a4d;color:var(--grn)}

/* ═══ announcement ═══ */
.announce{position:relative;border-radius:var(--r-md);padding:13px 18px;margin-top:16px;font-size:14px;
  background:linear-gradient(100deg,#2b235255,#1c214066);border:1px solid #8e7cff44;
  box-shadow:0 8px 26px #00000038, 0 0 26px #8e7cff14}

/* ═══ aspects ═══ */
.asplist{font-size:14px}
.asplist li{list-style:none;padding:9px 2px;border-bottom:1px solid #1d2444;transition:background .15s,padding-left .2s}
.asplist li:hover{background:#8e7cff0a;padding-left:8px}
.asplist li:last-child{border-bottom:0}
.asplist .asym{color:var(--gold2);margin:0 5px;text-shadow:0 0 10px #e8b44a4d}

/* ═══ footer ═══ */
footer{position:relative;border-top:1px solid #1c2340;padding:34px 0 40px;margin-top:20px;
  color:var(--faint);font-size:13px;text-align:center;
  background:linear-gradient(180deg,transparent,#0a0d1a)}
footer::before{content:'✦ ✧ ✦';display:block;color:#e8b44a55;letter-spacing:18px;margin-bottom:14px;font-size:11px}
footer p{max-width:640px;margin:0 auto 7px}

/* ═══ toast ═══ */
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:99;display:none;
  padding:13px 26px;border-radius:14px;font-size:14px;font-weight:500;color:var(--tx);
  background:linear-gradient(168deg,#1d2342,#141a31) padding-box,
    linear-gradient(120deg,var(--vio),var(--gold)) border-box;
  border:1px solid transparent;
  box-shadow:0 16px 48px #000000a0, 0 0 30px #8e7cff26;
  animation:toastin .3s cubic-bezier(.22,.9,.3,1.2)}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ═══ back to top ═══ */
#totop{position:fixed;bottom:26px;right:26px;z-index:40;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--line2);background:linear-gradient(165deg,#1c2342,#131834);color:var(--gold2);
  font-size:19px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(12px);
  box-shadow:0 10px 30px #00000059, 0 0 20px #e8b44a14;
  transition:opacity .3s,transform .3s,border-color .2s}
#totop.vis{opacity:1;pointer-events:auto;transform:none}
#totop:hover{border-color:var(--gold);box-shadow:0 12px 34px #00000066, var(--glow-gold)}

/* ═══ scroll-reveal ═══ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.9,.3,1),transform .7s cubic-bezier(.22,.9,.3,1)}
.reveal.vis{opacity:1;transform:none}

/* ═══ accessibility ═══ */
:focus-visible{outline:2px solid var(--vio);outline-offset:2px;border-radius:6px}
.btn:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}

/* ═══ small screens ═══ */
@media(max-width:640px){
  .container{padding:0 15px}
  .hero{padding:30px 22px 28px;border-radius:20px}
  .card{padding:18px}
  section.tab{padding:34px 0 42px;scroll-margin-top:104px}
  .tcard{width:46%;min-width:150px}
  .logo{font-size:22px}
  #totop{bottom:18px;right:16px}
}

/* ═══ scrollbar & misc ═══ */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:#232b4e;border-radius:6px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#2f3860}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}