/* ==========================================================================
   HOME PAGE — Dawn Vedic
   Loads after orion-design-system.css. Only page-specific layout lives here;
   colors, type, and components come from the shared design system.
   ========================================================================== */

.zodiac-art-sprite { display: none; }

/* ---- HERO ---- */
.hr-hero {
  background: linear-gradient(180deg, #FBF6EC 0%, var(--bg-page) 100%);
  padding: var(--space-8) 0 var(--space-7);
}
.hr-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 900px) { .hr-hero__grid { grid-template-columns: 1fr; } }

.hr-hero__copy h1 {
  font-size: var(--fs-display);
  max-width: 560px;
}
.hr-hero__lead {
  font-size: var(--fs-body-lg);
  max-width: 480px;
  margin-bottom: var(--space-4);
}
.hr-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0.85rem 1.65rem;
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-body);
}
.hr-btn--primary { background: var(--accent-maroon); color: var(--text-on-accent); }
.hr-btn--primary:hover { background: var(--accent-maroon-hover); text-decoration: none; }
.hr-btn--ghost { border: 1px solid var(--border-strong); color: var(--text-primary); }
.hr-btn--ghost:hover { background: var(--bg-sunken); text-decoration: none; }

.hr-trust-pills { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.hr-trust-pills li {
  font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
}

.hr-hero__art {
  display: flex;
  justify-content: center;
  min-height: 360px;
}
.hr-solar-system {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(244, 174, 83, 0.11) 0 18%, transparent 38%),
    radial-gradient(circle at 50% 50%, rgba(140, 42, 58, 0.08), transparent 66%);
}
.hr-solar-system__glow {
  position: absolute;
  inset: 13%;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 188, 90, 0.28), transparent 14%),
    radial-gradient(circle at 49% 45%, rgba(255, 255, 255, 0.5), transparent 6%);
  filter: blur(2px);
}
.hr-solar-system__sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff7bf 0 12%, #fbbf24 34%, #f97316 72%, #c2410c 100%);
  box-shadow: 0 0 0 1px rgba(194, 65, 12, 0.2), 0 0 28px rgba(249, 115, 22, 0.36);
  transform: translate(-50%, -50%);
}
.hr-orbit {
  --orbit-size: 100%;
  --planet-size: 8px;
  --orbit-tilt: 0.97;
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orbit-size);
  aspect-ratio: 1;
  border: 1px solid rgba(120, 90, 70, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--planet-angle)) scaleY(var(--orbit-tilt));
}
.hr-planet {
  position: absolute;
  left: 50%;
  top: calc(var(--planet-size) / -2);
  width: var(--planet-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--planet-color);
  box-shadow: inset -2px -2px 4px rgba(37, 22, 15, 0.28), 0 0 0 1px rgba(57, 35, 20, 0.12);
  transform: translateX(-50%) scaleY(1.03) rotate(var(--planet-counter));
}
.hr-orbit--mercury { --orbit-size: 28%; --planet-size: 5px; --planet-angle: -32deg; --planet-counter: 32deg; --planet-color: #8f8580; }
.hr-orbit--venus { --orbit-size: 40%; --planet-size: 8px; --planet-angle: 42deg; --planet-counter: -42deg; --planet-color: #d8ad68; }
.hr-orbit--earth { --orbit-size: 52%; --planet-size: 9px; --planet-angle: 118deg; --planet-counter: -118deg; --planet-color: #3b82c4; }
.hr-orbit--mars { --orbit-size: 64%; --planet-size: 7px; --planet-angle: 195deg; --planet-counter: -195deg; --planet-color: #c46545; }
.hr-orbit--jupiter { --orbit-size: 78%; --planet-size: 18px; --planet-angle: 274deg; --planet-counter: -274deg; --planet-color: linear-gradient(145deg, #e0b987 0 35%, #b7794a 36% 52%, #ead2aa 53% 74%, #9f5c35 75%); }
.hr-orbit--saturn { --orbit-size: 88%; --planet-size: 15px; --planet-angle: 328deg; --planet-counter: -328deg; --planet-color: #d8c18b; }
.hr-orbit--uranus { --orbit-size: 96%; --planet-size: 12px; --planet-angle: 72deg; --planet-counter: -72deg; --planet-color: #8fd5d8; }
.hr-orbit--neptune { --orbit-size: 104%; --planet-size: 12px; --planet-angle: 232deg; --planet-counter: -232deg; --planet-color: #537bd9; }
.hr-planet--saturn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 7px;
  border: 1px solid rgba(128, 90, 47, 0.55);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-16deg);
}

@media (max-width: 900px) {
  .hr-hero__art { min-height: 300px; }
  .hr-solar-system { width: min(86vw, 340px); }
}

/* ---- SERVICES ---- */
.hr-services { padding: var(--space-7) 0; }
.hr-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
@media (max-width: 900px) { .hr-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hr-services__grid { grid-template-columns: 1fr; } }

.hr-service {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: block;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.hr-service:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.hr-service__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--accent-maroon);
  margin-bottom: var(--space-3);
}
.hr-service__icon svg { width: 26px; height: 26px; }
.hr-service h2 { font-size: var(--fs-h3); margin-bottom: 6px; }
.hr-service p { font-size: 14px; margin-bottom: var(--space-2); }
.hr-service__cta { font-size: 13px; font-weight: 600; color: var(--accent-maroon); }

/* ---- TODAY'S HOROSCOPE ---- */
.hr-today-section { padding: var(--space-7) 0; background: var(--bg-card-alt); }

/* Premium framed panel: the whole block (title, quote, carousel) sits inside
   one bordered card with a gold top accent, rather than floating loose on
   the section stripe. */
.hr-today {
  position: relative;
  display: block;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 48px rgba(58, 42, 18, 0.10);
  overflow: hidden;
}
.hr-today::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, #BA7517, #E8A33D 50%, #BA7517);
}

.hr-today__head { margin-bottom: var(--space-4); }
.hr-today__date { color: var(--text-muted); font-size: 13px; }
.hr-today__body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
@media (max-width: 800px) { .hr-today__body { grid-template-columns: 1fr; } }

.hr-today__quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  color: var(--accent-maroon);
  margin: 0 0 var(--space-3);
}
.hr-today__all { font-size: 13px; font-weight: 600; }

.hr-today__carousel { position: relative; display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.hr-today__viewport {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}
.hr-signs { display: flex; gap: var(--space-3); }
.hr-sign {
  flex: 0 0 200px;
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  scroll-snap-align: start;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.hr-sign:hover {
  text-decoration: none;
  transform: translateY(-3px);
  border-color: #BA7517;
  box-shadow: 0 12px 26px rgba(186, 117, 23, 0.16);
}
.hr-sign__icon img { width: 48px; height: 48px; margin: 0 auto var(--space-1); display: block; }
.hr-sign__name { display: block; font-family: var(--font-display); font-size: 16px; color: var(--text-primary); }
.hr-sign__dates { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.hr-sign__blurb { font-size: 12.5px; margin: 0; }

.hr-today__nav {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  font-size: 18px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.hr-today__nav:hover { background: var(--bg-sunken); border-color: #BA7517; color: #854F0B; }
.hr-today__dots { display: flex; justify-content: center; gap: 6px; margin-top: var(--space-3); }

/* Two rashi cards per carousel page on phones. Overlay the arrows so they
   do not steal the width the second card needs. */
@media (max-width: 720px) {
  .hr-today {
    padding: var(--space-4) var(--space-3);
  }

  .hr-today__carousel {
    gap: 0;
  }

  .hr-today__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .hr-today__viewport::-webkit-scrollbar {
    display: none;
  }

  .hr-today__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    font-size: 16px;
    box-shadow: 0 4px 12px rgba(42, 33, 23, 0.14);
  }

  .hr-today__nav--prev { left: 4px; }
  .hr-today__nav--next { right: 4px; }

  .hr-signs {
    gap: 12px;
  }

  .hr-sign {
    flex: 0 0 calc((100cqi - 12px) / 2);
    width: calc((100cqi - 12px) / 2);
    min-width: 0;
    max-width: none;
    padding: 0.7rem 0.55rem;
  }

  .hr-sign__icon img {
    width: 40px;
    height: 40px;
  }

  .hr-sign__name { font-size: 14px; }
  .hr-sign__blurb { font-size: 12px; }
}

/* ---- WHY ORION ---- */
.hr-split { padding: var(--space-7) 0; }
.hr-why { text-align: center; max-width: 680px; margin: 0 auto; }
.hr-why__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 640px) { .hr-why__stats { grid-template-columns: repeat(2, 1fr); } }
.hr-why__stats div { display: flex; flex-direction: column; }
.hr-why__stats strong { font-family: var(--font-display); font-size: 32px; color: var(--accent-maroon); }
.hr-why__stats span { font-size: 13px; color: var(--text-secondary); }

/* ---- PREMIUM REPORTS ---- */
.hr-reports { padding: var(--space-7) 0; background: var(--bg-card-alt); }
.hr-reports__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.hr-reports__head a { font-size: 14px; font-weight: 600; }
.hr-reports__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 900px) { .hr-reports__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hr-reports__grid { grid-template-columns: 1fr; } }
.hr-report {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-align: center;
}
.hr-report:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.hr-report__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: 0 auto var(--space-2);
  border-radius: 50%;
  background: var(--bg-sunken);
  font-size: 18px;
}
.hr-report h3 { font-size: 16px; margin-bottom: 4px; }
.hr-report p { font-size: 13px; margin: 0; }

/* ---- TRUST BAR ---- */
.hr-bar { padding: var(--space-4) 0; border-top: 1px solid var(--border-soft); }
.hr-bar__row {
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-5);
  font-size: 13px; color: var(--text-secondary); font-weight: 500;
}

/* ---- UNIVERSE CTA ---- */
.home-universe-cta { padding: 0 var(--space-4) var(--space-7); max-width: 1160px; margin: 0 auto; }
.home-universe-cta__panel {
  background: linear-gradient(120deg, var(--accent-maroon), #6E1F2C);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  color: var(--text-on-accent);
}
.home-universe-cta__copy h2 { color: var(--text-on-accent); font-size: var(--fs-h2); margin-bottom: 6px; }
.home-universe-cta__copy p { color: rgba(251,238,232,0.85); margin: 0; }
.home-universe-cta__planet {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent-saffron);
  flex-shrink: 0;
  display: none;
}
.home-universe-cta__button { background: var(--accent-saffron); color: var(--text-on-gold); }
.home-universe-cta__button:hover { background: var(--accent-saffron-hover); }

/* ---------------------------------------------------------------- referral --
   Invite panel. The reward figure in the markup mirrors CREDIT_REWARDS.REFERRAL
   in subscription-config.js; they have to move together or the page promises
   what the wallet will not pay. */

.hr-referral {
  padding: 56px 0;
}

.hr-referral__panel {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  padding: 34px 36px;
  border: 1px solid var(--border-soft, #E6DCC6);
  border-radius: var(--radius-lg, 16px);
  background: var(--bg-card-alt, #FBF6EC);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(58, 42, 18, 0.08));
}

.hr-referral__copy {
  flex: 1 1 420px;
  min-width: 0;
}

.hr-referral__copy h2 {
  margin: 6px 0 12px;
  color: var(--text-primary, #2A2117);
  font-family: var(--font-display, Georgia, serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

.hr-referral__copy > p {
  max-width: 56ch;
  margin: 0 0 16px;
  color: var(--text-secondary, #6B5A44);
  line-height: 1.65;
}

.hr-referral__steps {
  margin: 0 0 20px;
  padding-left: 20px;
  max-width: 52ch;
  color: var(--text-secondary, #6B5A44);
  font-size: var(--fs-caption, 0.8125rem);
  line-height: 1.9;
}

.hr-referral__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.hr-referral__small {
  margin: 0;
  max-width: 60ch;
  color: var(--text-muted, #9C8D75);
  font-size: var(--fs-caption, 0.8125rem);
}

/* The number, as the thing the eye lands on. */
.hr-referral__badge {
  display: grid;
  flex: 0 0 auto;
  place-content: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--accent-maroon, #8C2A3A);
  color: var(--text-on-accent, #FBEEE8);
  text-align: center;
}

.hr-referral__amount {
  display: block;
  font-family: var(--font-display, Georgia, serif);
  font-size: 3.25rem;
  line-height: 1;
}

.hr-referral__unit {
  display: block;
  margin-top: 4px;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.9;
}

@media (max-width: 760px) {
  .hr-referral { padding: 40px 0; }

  .hr-referral__panel {
    padding: 26px 22px;
    gap: 24px;
  }

  /* The badge is decoration, and on a narrow screen it costs a scroll for
     nothing. The figure is already in the heading. */
  .hr-referral__badge { display: none; }
}