/* subpages.css — navy + gold astro design for Tools, Kundli, Support, Courses, Daily, Blog… */
:root{--sp-gold:#e9bd63;--sp-gold2:#ffe8a6;--sp-goldd:#b98a2e;--sp-cream:#f6e7bd}
@property --sp-a{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes spSpin{to{transform:rotate(360deg)}}
@keyframes spTwinkle{from{opacity:.15}to{opacity:1}}
@keyframes spScroll{to{transform:translateX(-50%)}}
@keyframes spOrbit{
  from{transform:rotate(0deg) translateY(calc(var(--r) * -1)) rotate(0deg)}
  to{transform:rotate(360deg) translateY(calc(var(--r) * -1)) rotate(-360deg)}
}
@keyframes spIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Header ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,#0b1d3f,#050d1f)!important;
  border-bottom:1px solid rgba(233,189,99,.55);box-shadow:0 6px 22px rgba(0,0,0,.28);
}
.top .brand{display:inline-flex;align-items:center;gap:16px!important}
.links a.lang::before,.links a.lang::after{content:none!important}
.top a{transition:color .2s}
.links a:not(.lang),.navlinks a{position:relative;color:#eef2f8}
.links a:not(.lang)::before,.navlinks a::before{content:"\2726";margin-right:6px;color:var(--sp-gold);opacity:.85;font-size:.85em}
.links a[href="/"]::before,.navlinks a[href="/"]::before,.links a[href="/en/"]::before,.navlinks a[href="/en/"]::before{content:"\2302"}
.links a[href*="tools"]::before,.navlinks a[href*="tools"]::before{content:"\2726"}
.links a[href*="support"]::before,.navlinks a[href*="support"]::before{content:"?"}
.links a[href*="daily"]::before,.navlinks a[href*="daily"]::before{content:"\263D"}
.links a[href*="blog"]::before,.navlinks a[href*="blog"]::before{content:"\270E"}
.links a[href*="kundli"]::before,.navlinks a[href*="kundli"]::before{content:"\2727"}
.links a[href*="courses"]::before,.navlinks a[href*="courses"]::before{content:"\2731"}
.links a[href*="puja"]::before,.navlinks a[href*="puja"]::before{content:"\0950"}
.links a:not(.lang)::after,.navlinks a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:linear-gradient(90deg,transparent,var(--sp-gold),transparent);transform:scaleX(0);transition:transform .25s;
}
.links a:not(.lang):hover,.navlinks a:hover{color:var(--sp-gold2);text-shadow:0 0 12px rgba(233,189,99,.5)}
.links a:not(.lang):hover::after,.navlinks a:hover::after{transform:scaleX(1)}
.lang{border-color:rgba(233,189,99,.55)!important;color:var(--sp-gold2)}
@media(max-width:800px){.links a:not(.lang)::before{content:none}}

/* Logo with two orbiting stars (logo itself unchanged) */
.spMark{position:relative;display:inline-flex;width:42px;height:42px;flex:0 0 auto;margin-left:6px;--r:30px}
.spMark img{width:42px;height:42px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(233,189,99,.85)}
.spStar{position:absolute;left:50%;top:50%;line-height:1;pointer-events:none;color:var(--sp-gold2);text-shadow:0 0 6px rgba(233,189,99,.9);font-style:normal}
.spStar.a{font-size:12px;margin:-6px 0 0 -6px;animation:spOrbit 8s linear infinite}
.spStar.b{font-size:8px;margin:-4px 0 0 -4px;opacity:.7;animation:spOrbit 8s linear -4s infinite}

/* Slim mantra + zodiac strip (wide screens) */
.spTicker{display:none}
@media(min-width:820px){
  .spTicker{display:flex;align-items:center;gap:18px;width:min(1040px,calc(100% - 28px));margin:-6px auto 8px;padding:0 0 6px;
    border-bottom:1px solid rgba(233,189,99,.22);font-size:13px;font-weight:600}
  .spMantra{flex:0 0 auto;color:var(--sp-gold);font-weight:700;white-space:nowrap}
  .spMarquee{flex:1 1 auto;min-width:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
            mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
  .spTrack{display:flex;width:max-content;animation:spScroll 70s linear infinite}
  .spMarquee:hover .spTrack{animation-play-state:paused}
  .spSet{display:flex;gap:28px;padding-right:28px;white-space:nowrap;color:var(--sp-cream)}
  .spSet i{font-style:normal;color:var(--sp-gold);margin-right:6px}
}

/* ---------- Hero: stars + turning zodiac wheel ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero>.wrap{position:relative;z-index:2}
.spStars{position:absolute;inset:0;z-index:0;pointer-events:none}
.spStars::before,.spStars::after{content:"";position:absolute;inset:0;background-repeat:no-repeat}
.spStars::before{
  background-image:radial-gradient(1.5px 1.5px at 8% 24%,rgba(255,232,166,.95),transparent 70%),radial-gradient(1px 1px at 22% 70%,rgba(255,232,166,.9),transparent 70%),radial-gradient(2px 2px at 41% 18%,rgba(255,232,166,.9),transparent 70%),radial-gradient(1px 1px at 58% 78%,rgba(255,232,166,.9),transparent 70%),radial-gradient(1.5px 1.5px at 73% 30%,rgba(255,232,166,.9),transparent 70%),radial-gradient(1px 1px at 90% 62%,rgba(255,232,166,.9),transparent 70%);
  animation:spTwinkle 3.4s ease-in-out infinite alternate}
.spStars::after{
  background-image:radial-gradient(1px 1px at 15% 50%,rgba(255,255,255,.85),transparent 70%),radial-gradient(1.5px 1.5px at 33% 34%,rgba(255,255,255,.8),transparent 70%),radial-gradient(1px 1px at 50% 58%,rgba(255,255,255,.85),transparent 70%),radial-gradient(1px 1px at 66% 14%,rgba(255,255,255,.8),transparent 70%),radial-gradient(1.5px 1.5px at 83% 80%,rgba(255,255,255,.8),transparent 70%);
  animation:spTwinkle 5.1s ease-in-out -2s infinite alternate}
.spWheel{position:absolute;z-index:1;right:-120px;top:50%;width:440px;height:440px;margin-top:-220px;color:var(--sp-gold);opacity:.17;pointer-events:none;animation:spSpin 140s linear infinite}
.spWheel .wg{fill:currentColor;font:600 20px/1 sans-serif;text-anchor:middle;dominant-baseline:central}
@media(max-width:700px){.spWheel{width:300px;height:300px;margin-top:-150px;right:-140px}}
.hero h1{text-shadow:0 0 30px rgba(233,189,99,.22)}

/* ---------- Divider ---------- */
.spDivider{display:flex;align-items:center;gap:14px;margin:0 0 24px;color:var(--sp-goldd)}
.spDivider .ln{flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.spDivider .ln:last-child{background:linear-gradient(270deg,transparent,currentColor)}
.spDivider svg{width:40px;height:40px;flex:0 0 auto;overflow:visible}
.spDivider .ring{transform-origin:20px 20px;animation:spSpin 60s linear infinite}

/* ---------- Cards, tiles, buttons ---------- */
.card,.toolTile,.option,.fact,.sign{transition:border-color .3s,box-shadow .3s,transform .25s}
.card:hover,.toolTile:hover{border-color:rgba(185,138,46,.85);box-shadow:0 14px 38px rgba(185,138,46,.2)}
.option:hover,.fact:hover{border-color:rgba(185,138,46,.7);box-shadow:0 6px 18px rgba(185,138,46,.14)}
.toolTile .ico{
  width:52px;height:52px;border-radius:50%;color:var(--sp-gold2);
  background:radial-gradient(circle at 30% 25%,rgba(255,232,166,.28),rgba(233,189,99,.06) 62%),#07142d;
  border:1px solid rgba(233,189,99,.65);box-shadow:0 0 0 4px rgba(233,189,99,.1),0 0 16px rgba(233,189,99,.28);
}
.button:not(.ghost):not(.dark):hover,.pill:hover{box-shadow:0 0 0 4px rgba(233,189,99,.25),0 8px 24px rgba(233,189,99,.4)}
.result.show{animation:spIn .5s ease}

/* ---------- Footer ---------- */
.foot{position:relative;overflow:hidden}
.foot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(1px 1px at 8% 30%,rgba(255,232,166,.8),transparent 60%),radial-gradient(1.5px 1.5px at 30% 70%,rgba(233,189,99,.7),transparent 60%),radial-gradient(1px 1px at 55% 25%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.5px 1.5px at 78% 65%,rgba(233,189,99,.7),transparent 60%),radial-gradient(1px 1px at 94% 28%,rgba(255,232,166,.8),transparent 60%);
  animation:spTwinkle 5s ease-in-out infinite alternate;
}
.foot>*{position:relative}
.spZodiac{display:flex;justify-content:space-between;align-items:center;gap:6px;width:min(1040px,calc(100% - 28px));margin:0 auto 16px;color:var(--sp-gold);font-size:18px;line-height:1;
  padding-bottom:12px;border-bottom:1px solid rgba(233,189,99,.3)}
.spZodiac span{opacity:.5;animation:spTwinkle 3.2s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.mobileBar,.mobile-actions{box-shadow:0 -8px 26px rgba(233,189,99,.14)}

/* ---------- Scroll reveal (only while JS runs) ---------- */
html.sp-js .sp-rv{
  opacity:0;translate:0 22px;
  transition:opacity .7s ease,translate .7s cubic-bezier(.2,.7,.2,1),border-color .3s,box-shadow .3s,transform .25s;
  transition-delay:var(--sp-d,0s),var(--sp-d,0s),0s,0s,0s;
}
html.sp-js .sp-rv.sp-in{opacity:1;translate:0 0}

@media(prefers-reduced-motion:reduce){
  .spStar,.spTrack,.spStars::before,.spStars::after,.spWheel,.spDivider .ring,.foot::before,.spZodiac span{animation:none!important}
  .result.show{animation:none}
}