/* ============================================================
   ASTROLOGICS - homepage-specific styles
   ============================================================ */

/* ——————————————————— HERO ——————————————————— */
.hero { position:relative; overflow:hidden; background:var(--grad-dawn); padding-top:clamp(28px,4vw,52px); }
.hero-rays {
  position:absolute; top:-44%; left:50%; transform:translateX(-50%);
  width:130%; aspect-ratio:1; pointer-events:none; opacity:.5;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(255,179,71,.0) 0deg, rgba(255,179,71,.22) 4deg, rgba(255,179,71,0) 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 38%, transparent 60%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0 38%, transparent 60%);
  animation: spin 90s linear infinite;
}
@keyframes spin { to { transform:translateX(-50%) rotate(360deg);} }
.hero-mandala {
  position:absolute; right:-6%; top:6%; font-size:34rem; line-height:1; color:rgba(201,162,39,.07);
  pointer-events:none; user-select:none; font-family:var(--font-deva); animation:spin 160s linear infinite;
}
.hero-grid {
  display:grid; gap:clamp(28px,4vw,56px); align-items:center;
  grid-template-columns:1fr; padding-block:clamp(30px,5vw,56px) clamp(40px,5vw,64px);
}
@media(min-width:960px){ .hero-grid{ grid-template-columns:1.15fr .85fr; } }
.hero-copy h1 { margin:.4rem 0 .2rem; }
.hero-copy .lead { max-width:46ch; margin-top:.9rem; }
.hero-cta { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-online { display:flex; align-items:center; gap:.9rem; margin-top:1.6rem; }
.avastack { display:flex; }
.avastack .ava-fallback { width:40px; height:40px; font-size:.9rem; margin-left:-12px; box-shadow:0 0 0 3px var(--bg); }
.avastack .ava-fallback:first-child { margin-left:0; }
.hero-online p { font-size:.92rem; color:var(--ink-2); }
.hero-online b { color:var(--ink); }

/* hero free-kundli card */
.hero-card {
  background:var(--card); border-radius:var(--r-lg); padding:1.5rem; box-shadow:var(--sh-lg);
  border:1px solid var(--line); position:relative;
}
.hero-card::before {
  content:""; position:absolute; inset:0; border-radius:var(--r-lg); padding:1.5px;
  background:var(--grad-gold);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:.6; pointer-events:none;
}
.hk-tab { display:flex; gap:.4rem; background:var(--bg-2); padding:.3rem; border-radius:var(--r-pill); margin-bottom:1.1rem; }
.hk-tab button { flex:1; padding:.55rem; border-radius:var(--r-pill); font-weight:800; font-size:.86rem; color:var(--ink-3); }
.hk-tab button.active { background:#fff; color:var(--saffron-deep); box-shadow:var(--sh-xs); }
.fld { display:block; margin-bottom:.7rem; }
.fld span { display:block; font-size:.76rem; font-weight:800; color:var(--ink-2); margin-bottom:.25rem; letter-spacing:.02em; }
.fld input {
  width:100%; padding:.72rem .85rem; border-radius:var(--r-sm); background:var(--card-tint);
  border:1.5px solid var(--line); transition:border-color .2s, box-shadow .2s;
}
.fld input:focus { outline:none; border-color:var(--saffron); box-shadow:0 0 0 3px rgba(255,122,26,.14); }
.fld-row { display:grid; grid-template-columns:1.3fr 1fr; gap:.7rem; }

/* marquee */
.marquee { border-block:1px solid var(--line); background:rgba(255,255,255,.5); overflow:hidden; padding:.7rem 0; }
.marquee-track { display:flex; gap:1.4rem; width:max-content; animation:scroll 38s linear infinite; }
.marquee-track span { font-family:var(--font-display); font-weight:500; font-size:1.05rem; color:var(--ink-3); white-space:nowrap; }
.marquee-track span:nth-child(2n){ color:var(--gold); }
@keyframes scroll { to { transform:translateX(-50%);} }

/* ——————————————————— Brand story (ancient ↔ modern) ——————————————————— */
.story { display:grid; gap:1rem; align-items:stretch; grid-template-columns:1fr; }
@media(min-width:880px){ .story{ grid-template-columns:1fr auto 1fr; } }
.story-side {
  background:var(--card); border-radius:var(--r-lg); padding:1.8rem; box-shadow:var(--sh-sm);
  border:1px solid var(--line-2); position:relative; overflow:hidden;
}
.story-side.ancient { background:linear-gradient(160deg,#FFF6E6,#FFFBF4); border-color:var(--gold-soft); }
.story-side.modern  { background:linear-gradient(160deg,#F4F1FF,#FBFAFF); border-color:#D9D0F5; }
.story-side .story-ic { font-size:2.4rem; display:block; margin-bottom:.5rem; }
.story-side h3 { margin-bottom:.4rem; }
.story-side.ancient h3 { color:var(--maroon); }
.story-side.modern h3 { color:var(--indigo); }
.story-side p { color:var(--ink-2); font-size:.96rem; }
.story-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.story-tags li { font-size:.74rem; font-weight:800; padding:.3em .7em; border-radius:var(--r-pill); background:rgba(255,255,255,.7); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-2); }
.story-side.modern .story-tags li { box-shadow:inset 0 0 0 1px #D9D0F5; color:var(--indigo); }
.story-bridge { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; padding:.5rem 1rem; position:relative; }
.story-bridge .sb-line { position:absolute; top:50%; left:-10%; right:-10%; height:2px; background:linear-gradient(90deg,var(--gold-soft),var(--indigo)); opacity:.4; }
@media(max-width:879px){ .story-bridge .sb-line{ display:none; } }
.story-bridge .sb-orb {
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; color:#fff;
  background:var(--grad-sunrise); box-shadow:var(--sh-md), 0 0 0 6px var(--bg); position:relative; z-index:1;
}
.story-bridge b { font-family:var(--font-display); font-weight:600; margin-top:.5rem; }
.story-bridge small { color:var(--ink-3); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:800; }

/* ——————————————————— Ecosystem pillars ——————————————————— */
.pillar { background:var(--card); border-radius:var(--r-md); padding:1.5rem 1.3rem; box-shadow:var(--sh-sm); border:1px solid var(--line-2); position:relative; transition:.3s var(--ease); }
.pillar:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--gold-soft); }
.pillar.featured { background:linear-gradient(180deg,#FBFAFF,#F4F1FF); border-color:#D9D0F5; }
.pillar .pi { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; margin-bottom:.8rem; }
.pillar h3 { font-size:1.18rem; margin-bottom:.7rem; }
.pillar ul li { font-size:.9rem; color:var(--ink-2); font-weight:600; padding:.32rem 0; border-bottom:1px dashed var(--line); display:flex; align-items:center; gap:.5rem; }
.pillar ul li::before { content:"✦"; color:var(--gold); font-size:.7rem; }
.pillar ul li:last-child { border-bottom:none; }
.pill-link { display:inline-block; margin-top:.9rem; font-weight:800; font-size:.88rem; color:var(--saffron-deep); }
.pill-link:hover { color:var(--maroon); }

/* ——————————————————— AI band (signature, dark) ——————————————————— */
.ai-band { background:radial-gradient(120% 120% at 80% 0%, #3a2114 0%, #1b110a 55%, #150c06 100%); color:#FFF1E0; position:relative; overflow:hidden; }
.ai-stars { position:absolute; inset:0; opacity:.6; pointer-events:none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(232,184,75,.9), transparent),
    radial-gradient(1.5px 1.5px at 28% 68%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 52% 32%, rgba(232,184,75,.8), transparent),
    radial-gradient(1.5px 1.5px at 74% 58%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 24%, rgba(232,184,75,.8), transparent),
    radial-gradient(1.5px 1.5px at 64% 82%, rgba(255,255,255,.5), transparent);
}
.ai-grid { display:grid; gap:2rem; align-items:center; grid-template-columns:1fr; }
@media(min-width:920px){ .ai-grid{ grid-template-columns:1.05fr .95fr; } }
.ai-feats { display:grid; gap:1rem; }
.ai-feat { display:flex; gap:1rem; background:rgba(255,255,255,.05); border:1px solid rgba(232,184,75,.22); border-radius:var(--r-md); padding:1.1rem 1.2rem; transition:.3s var(--ease); }
.ai-feat:hover { background:rgba(255,255,255,.09); transform:translateX(4px); }
.af-ic { font-size:1.6rem; width:48px; height:48px; flex:none; display:grid; place-items:center; border-radius:13px; background:rgba(232,184,75,.14); box-shadow:inset 0 0 0 1px rgba(232,184,75,.3); }
.ai-feat h4 { font-family:var(--font-body); font-weight:800; color:#fff; margin-bottom:.15rem; }
.ai-feat p { font-size:.88rem; color:#E2CDB4; }
/* AI demo chat */
.ai-demo { background:rgba(255,255,255,.06); border:1px solid rgba(232,184,75,.3); border-radius:var(--r-lg); padding:1.3rem; box-shadow:var(--sh-lg); backdrop-filter:blur(4px); }
.aid-head { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:.86rem; color:var(--gold-soft); padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid rgba(232,184,75,.22); }
.aid-msg { max-width:88%; padding:.7rem .9rem; border-radius:16px; font-size:.9rem; margin-bottom:.6rem; line-height:1.45; }
.aid-msg.user { margin-left:auto; background:var(--grad-saffron); color:#fff; border-bottom-right-radius:5px; }
.aid-msg.bot { background:rgba(255,255,255,.1); color:#FAEEDD; border:1px solid rgba(232,184,75,.2); border-bottom-left-radius:5px; }
.aid-msg.bot b { color:var(--gold-soft); }
.aid-msg.typing { display:inline-flex; gap:5px; padding:.85rem .9rem; }
.aid-msg.typing span { width:7px; height:7px; border-radius:50%; background:var(--gold-soft); opacity:.5; animation:blink 1.3s infinite; }
.aid-msg.typing span:nth-child(2){ animation-delay:.2s; } .aid-msg.typing span:nth-child(3){ animation-delay:.4s; }
@keyframes blink { 0%,60%,100%{ opacity:.3; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }
.aid-input { display:flex; align-items:center; justify-content:space-between; margin-top:.5rem; padding:.7rem .9rem; border-radius:var(--r-pill); background:rgba(0,0,0,.25); border:1px solid rgba(232,184,75,.25); color:#C9B79C; font-size:.86rem; }
.aid-input i { color:var(--gold-soft); font-style:normal; }

/* ——————————————————— Report cards ——————————————————— */
.report-card { padding:1.4rem; display:flex; flex-direction:column; }
.rc-ic { width:54px; height:54px; border-radius:15px; display:grid; place-items:center; font-size:1.6rem; color:#fff; margin-bottom:.9rem; box-shadow:var(--sh-sm); }
.report-card h3 { font-size:1.1rem; margin-bottom:.35rem; }
.report-card p { font-size:.86rem; color:var(--ink-2); flex:1; margin-bottom:1rem; }
.rc-foot { display:flex; align-items:center; justify-content:space-between; padding-top:.9rem; border-top:1px dashed var(--line); }
.rc-price { font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--maroon); }

/* ——————————————————— Consult ways ——————————————————— */
.consult-way { padding:1.8rem 1.6rem; position:relative; text-align:left; display:flex; flex-direction:column; }
.consult-way.featured { background:linear-gradient(180deg,#FFFBF2,#FFF4E0); border-color:var(--gold-soft); box-shadow:var(--sh-md); }
.cw-ic { width:60px; height:60px; border-radius:17px; display:grid; place-items:center; font-size:1.7rem; margin-bottom:1rem; }
.consult-way h3 { margin-bottom:.4rem; }
.consult-way p { color:var(--ink-2); font-size:.94rem; flex:1; margin-bottom:1.2rem; }

/* ——————————————————— Tools band ——————————————————— */
.tools-band {
  display:grid; gap:2rem; align-items:center; grid-template-columns:1fr;
  background:linear-gradient(120deg,#FFF6E6,#FFFFFF); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:clamp(1.8rem,3vw,2.6rem); box-shadow:var(--sh-sm);
}
@media(min-width:820px){ .tools-band{ grid-template-columns:1fr 1fr; } }
.tools-links { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
.tool-link {
  display:flex; flex-direction:column; gap:.1rem; padding:1rem; border-radius:var(--r-md);
  background:#fff; border:1px solid var(--line-2); box-shadow:var(--sh-xs); font-weight:800; transition:.25s var(--ease);
}
.tool-link span { font-size:1.5rem; }
.tool-link small { font-weight:600; color:var(--ink-3); font-size:.78rem; }
.tool-link:hover { transform:translateY(-3px); box-shadow:var(--sh-sm); border-color:var(--gold-soft); }

/* ——————————————————— Why ——————————————————— */
.why { padding:1.4rem; text-align:center; }
.why-ic { width:64px; height:64px; border-radius:50%; display:grid; place-items:center; font-size:1.8rem; margin:0 auto .9rem; background:var(--grad-dawn); box-shadow:inset 0 0 0 1.5px var(--gold-soft); }
.why h4 { font-family:var(--font-body); font-weight:800; margin-bottom:.3rem; }
.why p { font-size:.88rem; color:var(--ink-2); }

/* ——————————————————— Shop tiles ——————————————————— */
.shop-tile { padding:.9rem; text-align:center; }
.st-img { aspect-ratio:1; border-radius:var(--r-sm); display:grid; place-items:center; font-size:2.6rem; margin-bottom:.7rem; box-shadow:inset 0 -20px 40px -20px rgba(0,0,0,.35); }
.shop-tile h4 { font-family:var(--font-body); font-weight:800; font-size:.94rem; }
.st-price { font-weight:800; color:var(--maroon); margin-top:.2rem; }
.st-price s { color:var(--ink-3); font-weight:500; font-size:.82rem; margin-left:.3rem; }

/* ——————————————————— Deity tiles (devotional band) ——————————————————— */
.deity-tile {
  display:flex; flex-direction:column; align-items:center; gap:.3rem; text-align:center;
  padding:1.6rem 1rem; border-radius:var(--r-md); background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(232,184,75,.3); color:#FFF1E0; transition:.3s var(--ease);
}
.deity-tile span { font-size:2.2rem; }
.deity-tile b { font-family:var(--font-display); font-weight:560; font-size:1.15rem; }
.deity-tile small { color:#FFD9B0; font-size:.8rem; }
.deity-tile:hover { transform:translateY(-4px); background:rgba(255,255,255,.14); }

/* ——————————————————— App band ——————————————————— */
.ab-grid { display:grid; gap:2rem; align-items:center; grid-template-columns:1fr; padding:clamp(2rem,4vw,3.4rem); position:relative; z-index:1; }
@media(min-width:840px){ .ab-grid{ grid-template-columns:1.2fr .8fr; } }
.ab-phone { display:flex; justify-content:center; }
.phone {
  width:230px; border-radius:30px; background:linear-gradient(180deg,#fff,#FFF4E2); padding:1rem; box-shadow:var(--sh-lg);
  border:6px solid #1b110a; position:relative;
}
.phone-not { display:flex; align-items:center; gap:.4rem; background:#FFF; border-radius:12px; padding:.6rem .7rem; font-size:.78rem; font-weight:800; box-shadow:var(--sh-xs); color:var(--ink); }
.phone-card { margin-top:.7rem; background:var(--grad-dawn); border-radius:12px; padding:.8rem; font-size:.82rem; box-shadow:inset 0 0 0 1px var(--line); color:var(--ink); }
.phone-card.alt { background:var(--grad-saffron); color:#fff; font-weight:800; text-align:center; }

/* ——————————————————— Blog ——————————————————— */
.blog-card { overflow:hidden; display:flex; flex-direction:column; }
.bc-img { aspect-ratio:16/9; display:grid; place-items:center; font-size:3rem; }
.bc-body { padding:1.2rem; }
.bc-body h3 { font-size:1.12rem; margin:.6rem 0 .4rem; line-height:1.2; }

/* ——————————————————— Final CTA ——————————————————— */
.final-cta {
  text-align:center; background:var(--grad-sunrise); border-radius:var(--r-xl); padding:clamp(2.4rem,5vw,4rem);
  color:#fff; box-shadow:var(--sh-md); position:relative; overflow:hidden;
}
.final-cta h2 { color:#fff; }
.final-cta::after { content:"۞"; position:absolute; right:-3%; bottom:-30%; font-size:18rem; color:rgba(255,255,255,.12); font-family:var(--font-deva); }