/* 5th & 7th homepage space background, v1.
 * Loaded by index.html only, after the existing styles.
 * All content, layout dimensions, breakpoints and behavior remain in index.css.
 * Transparency belongs to backgrounds and decorative artwork, never the text.
 */
:root {
  color-scheme: dark;
  --bg0: #03060d;
  --bg1: #03060d;
  --card: rgba(8, 13, 27, 0.74);
  --line: rgba(191, 203, 235, 0.22);
  --secondary-color: #c3cede;
  --reading-ink: #f5f6fc;
  --reading-body: #e1e7f1;
  --reading-muted: #c3cede;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
  --shadow2: 0 10px 28px rgba(0, 0, 0, 0.28);
  --space-panel: rgba(8, 13, 27, 0.74);
  --space-link: #d1c2ff;
}

html { background: #03060d; }

body {
  color: var(--reading-body);
  background: #03060d;
  isolation: isolate;
}

/* A fixed decorative layer avoids stretching the image over the long page.
 * It cannot intercept links, touches, carousel drags or the video modal.
 * A solid dark fallback keeps the page readable if the image cannot load.
 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #03060d;
  background-image:
    linear-gradient(180deg, rgba(1, 4, 11, 0.18), rgba(1, 4, 11, 0.24)),
    url("./homepage-space-v1.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.brand .t1 { color: var(--reading-ink); }
.brand .t2 { color: var(--reading-muted); }

.pillLinks a,
.pillLinks a:visited {
  color: #e6e8f5;
  background: rgba(12, 18, 34, 0.80);
  border-color: rgba(187, 197, 226, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.pillLinks a:hover {
  color: #fff;
  background: rgba(37, 31, 66, 0.94);
  border-color: rgba(201, 182, 255, 0.65);
}
.pillLinks a[data-thm-primary-pill="twin-flame"] {
  color: #e6dcff;
  background: rgba(67, 46, 115, 0.78);
  border-color: rgba(199, 177, 255, 0.48);
}

main > header.homeHero {
  --hero-ink: #f7f5ff;
  --hero-body: #e4e8f2;
  --hero-muted: #c5cddd;
  --hero-line: rgba(200, 199, 229, 0.23);
  --hero-purple: #cfbfff;
  --hero-rose: #ffbfd5;
  background: rgba(8, 12, 26, 0.70);
  border-color: var(--hero-line);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
}
main > header.homeHero.homeHero--zodiac {
  background: linear-gradient(180deg, rgba(8, 12, 26, 0.64), rgba(8, 12, 26, 0.74));
  border-color: var(--hero-line);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25);
}

/* Preserve the existing uncropped Zodiac illustration and its desktop/mobile
 * layout. Only this decorative image is softened to let space show through.
 */
.homeHero--zodiac .heroZodiacArtwork img { opacity: 0.40; }
.homeHero--zodiac .heroZodiacArtwork::after {
  background: linear-gradient(to bottom, transparent 72%, rgba(8, 12, 26, 0.28) 91%, rgba(8, 12, 26, 0.70));
}
.homeHero--zodiac .heroZodiacIntroCopy::before {
  background: radial-gradient(ellipse, rgba(5, 8, 19, 0.97) 0%, rgba(5, 8, 19, 0.90) 48%, rgba(5, 8, 19, 0) 76%);
}
main > header.homeHero.homeHero--zodiac .heroHeadline {
  color: var(--hero-ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.70);
}
main > header.homeHero.homeHero--zodiac .subtitleLabel {
  color: var(--hero-muted);
}
main > header.homeHero .heroHouseRomance {
  background: rgba(81, 34, 58, 0.42);
  border-color: rgba(244, 174, 203, 0.31);
}
main > header.homeHero .heroHouseMarriage {
  background: rgba(49, 38, 92, 0.46);
  border-color: rgba(193, 176, 255, 0.31);
}
main > header.homeHero .heroHouseRomance .heroHouseBadge {
  background: rgba(121, 51, 80, 0.42);
}
main > header.homeHero .heroHouseMarriage .heroHouseBadge {
  background: rgba(84, 62, 137, 0.46);
}

/* Accent text is pale lavender; the existing CTA retains a deep purple fill. */
main > header.homeHero .heroTwinFlamePrimaryCta .heroTwinFlameExploreButton {
  background: #5d46ba;
  color: #fff;
  border-color: rgba(205, 187, 255, 0.38);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
}
main > header.homeHero .heroTwinFlamePrimaryCta .heroTwinFlameExploreButton:hover {
  background: #4e39a5;
}
.homeHero--zodiac .heroQuickStoreButton,
.homeHero--zodiac .heroQuickStoreButton:visited {
  color: #f1edff;
  background: rgba(16, 19, 39, 0.82);
  border-color: rgba(206, 191, 249, 0.46);
}
.homeHero--zodiac .heroQuickStoreButton:hover {
  color: #fff;
  background: rgba(49, 37, 82, 0.95);
  border-color: #c8b6fa;
}

/* Reading surfaces retain their original size, spacing and corner radii. */
.trustWrap .card,
.faqBox {
  background: var(--space-panel);
  border-color: var(--line);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22);
}
.items {
  background: rgba(8, 13, 27, 0.58);
  border-color: var(--line);
}
.carouselFade::before,
.testimonialFade::before {
  background: linear-gradient(90deg, rgba(3, 6, 13, 0.90), rgba(3, 6, 13, 0));
}
.carouselFade::after,
.testimonialFade::after {
  background: linear-gradient(270deg, rgba(3, 6, 13, 0.90), rgba(3, 6, 13, 0));
}

.testimonialHeader {
  background: radial-gradient(ellipse at center, rgba(3, 6, 13, 0.85), rgba(3, 6, 13, 0) 72%);
}
.testimonialEyebrow { color: #d1c2ff; }
.testimonialIntro,
.testimonialFineprint { color: var(--reading-muted); }
.testimonialCard {
  background: rgba(12, 17, 33, 0.78);
  border-color: var(--line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
.testimonialFeatured {
  background: rgba(38, 23, 45, 0.80);
  border-color: rgba(222, 177, 220, 0.34);
}
.testimonialCard::before { color: rgba(195, 177, 248, 0.30); }
.testimonialCard blockquote { color: var(--reading-body); }
.testimonialCard footer { color: var(--reading-muted); }
.testimonialCard footer span {
  color: #e0daf3;
  background: rgba(46, 39, 70, 0.64);
  border-color: rgba(196, 181, 232, 0.26);
}
.testimonialCtaCard {
  background: linear-gradient(160deg, rgba(51, 33, 91, 0.88), rgba(11, 17, 34, 0.86));
  border-color: rgba(198, 177, 248, 0.38);
}
.testimonialCtaCard h3 { color: var(--reading-ink); }
.testimonialCtaCard p,
.testimonialCtaStars { color: #e1d9f1; }

/* The examples have nested boxes; tint only the outer backing surface. */
.examplesBox {
  background: rgba(13, 19, 37, 0.70);
  border-color: var(--line);
}
.examplesDetails,
.examplesDetails > .examplesBox {
  background: transparent;
  border-color: var(--line);
}
.exampleGroup + .exampleGroup { border-color: var(--line); }
.examplesSubtle,
.metaLabel,
.metaDivider { color: var(--reading-muted); }
.z {
  background: rgba(8, 12, 25, 0.58);
  border-color: rgba(191, 203, 235, 0.23);
}
.z-aries { color: #ff969c; }
.z-taurus { color: #b1dc8b; }
.z-gemini { color: #f7d17a; }
.z-cancer { color: #95d0ff; }
.z-leo { color: #ffb472; }
.z-virgo { color: #91d8b9; }
.z-libra { color: #eaa8eb; }
.z-scorpio { color: #f3a1cc; }
.z-sagittarius { color: #ffa5a5; }
.z-capricorn { color: #c3cedd; }
.z-aquarius { color: #82ded8; }
.z-pisces { color: #bfb5ff; }

.faqQ { border-top-color: var(--line); }
.faqSiderealNote { color: var(--reading-muted); }
.shorterHR { background: var(--line); }
.inlineLink,
.subtleNote a,
.footerLabel a { color: var(--space-link); }
.inlineLink:hover,
.subtleNote a:hover,
.footerLabel a:hover { color: #ede5ff; }
.footerLabel {
  color: var(--reading-muted);
  background: rgba(3, 6, 13, 0.70);
}
.socialmediaicon {
  /* Preserve the logos' own colors; supply a light backing for dark marks. */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.42));
}
.site-language-footer { color: var(--reading-muted); }
.site-language-footer .site-language-switcher {
  background: rgba(3, 6, 13, 0.80);
}
.site-language-footer .site-language-switcher select:hover { color: #f0e8ff; }

.pillLinks a:focus-visible,
.homeHero--zodiac .heroQuickStoreButton:focus-visible,
.faqQ:focus-visible,
.examplesSummary:focus-visible,
.site-language-footer .site-language-switcher select:focus-visible {
  outline-color: #d5c5ff;
}

/* Honor system requests for stronger contrast without affecting the layout. */
@media (prefers-contrast: more) {
  :root { --space-panel: rgba(5, 9, 19, 0.96); }
  main > header.homeHero,
  main > header.homeHero.homeHero--zodiac,
  .testimonialCard,
  .testimonialFeatured { background: rgba(5, 9, 19, 0.96); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --space-panel: #080d1b; }
  main > header.homeHero,
  main > header.homeHero.homeHero--zodiac,
  .testimonialCard,
  .testimonialFeatured { background: #080d1b; }
}