/* ============================================================
   Vedic Astrology hero — /vedic-astrology/
   Title under an arc of the 9 grahas (the ecliptic) and a zodiac band, star field behind.
   ============================================================ */
:root {
  --blue: #0a94ba;
  --blue-rgb: 10, 148, 186;
  --blue-soft: #5fc3df;   /* lighter tint of the brand blue, for text on dark */
}

.vhero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.5rem 0 0;
  overflow: hidden;
}
#vStarCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.vhero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 45% at 50% 50%,
              rgba(var(--blue-rgb), 0.10) 0%, rgba(var(--blue-rgb), 0.03) 45%, transparent 70%);
}

/* The sky: 9 grahas on the ecliptic arc */
.vhero__sky {
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  aspect-ratio: 1200 / 400;
}
.vsky {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}
.vsky__arc { fill: none; stroke: url(#vArcFade); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vsky__arc--m { stroke: url(#vArcFadeM); }
.vsky__arc--faint { stroke: url(#vArcFadeFaint); stroke-dasharray: 3 9; }
.vsky__dot { fill: #8fd3e8; }
.vsky__dot--sun { fill: #cdeef8; }
.vsky__node { fill: #0a0a0f; stroke: #8fd3e8; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vsky__name {
  fill: rgba(143, 211, 232, 0.75);
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
  text-anchor: middle;
}
.vsky__name--m { font-size: 15px; dominant-baseline: middle; }
.vsky--m { display: none; }

/* Zodiac band (12 signs) around the planet arc */
.vband__edge { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vband__div  { stroke: rgba(255, 255, 255, 0.2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.vband__sign {
  fill: rgba(255, 255, 255, 0.34);
  font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', 'DejaVu Sans', 'Apple Symbols', sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
}

/* The title */
.vhero__title {
  position: absolute;
  left: 0; right: 0;
  top: 63%;
  transform: translateY(-50%);
  z-index: 2;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  font-family: var(--title-font);
  font-weight: 300;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 0 24px rgba(10, 10, 15, 0.9), 0 0 6px rgba(10, 10, 15, 0.9);
}
.vhero__title em {
  display: block;
  color: var(--blue-soft);
  font-style: italic;
}
.vhero__title span {
  display: block;
  margin-top: 0.35em;
  font-size: 0.52em;
  color: #f0ede8;
}

/* Phones: separate, taller arc with readable names; title below */
@media (max-width: 767px) {
  .vhero { padding: 1.5rem 0 2.5rem; }
  .vhero__sky { aspect-ratio: auto; width: 100%; }
  .vsky--d { display: none; }
  .vsky--m { display: block; position: relative; inset: auto; width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
  .vhero__title { position: relative; top: auto; transform: none; margin-top: -3em; }
}