/* =========================================================
   ReadThisAloud - EXACT INDEX.HTML VISUAL BACKGROUND
   This file intentionally overrides the older site.css colors.
========================================================= */

:root {
  --nvr-index-text: #f5fbff;
  --nvr-index-muted: #a8c7da;
  --nvr-index-cyan: #20f0ff;
  --nvr-index-blue: #2388ff;
  --nvr-shadow-text: -8px 6px 14px rgba(0,0,0,.60);
}

/* EXACT homepage background */
html {
  min-height: 100%;
  background: #02040a;
}

body {
  min-height: 100vh;
  color: var(--nvr-index-text);
  background:
    radial-gradient(circle at 18% 8%, rgba(32, 240, 255, 0.16), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(35, 136, 255, 0.16), transparent 38%),
    radial-gradient(circle at 50% 55%, rgba(32, 240, 255, 0.08), transparent 48%),
    linear-gradient(
      180deg,
      #02040a 0%,
      #04101e 26%,
      #06223a 52%,
      #05182c 76%,
      #02040a 100%
    ) !important;
  background-attachment: fixed !important;
  overflow-x: hidden;
}

/* EXACT homepage 46px technical grid */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(32, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 80%);
}

/* EXACT homepage light wash */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.028),
      transparent 18%,
      rgba(32,240,255,.045) 46%,
      transparent 72%,
      rgba(255,255,255,.018)
    ),
    linear-gradient(
      115deg,
      transparent 0%,
      rgba(255,255,255,.035) 26%,
      transparent 48%
    );
  opacity: .9;
}

/* CRITICAL:
   The original site.css gives several page areas darker painted surfaces.
   These must remain transparent so the homepage background is visible. */
body > main,
main,
main > section,
section,
.hero,
.hero.compact,
.features-page,
.feature-hero,
.feature-flow-section,
.feature-benefit-section,
.feature-final-section {
  background: transparent !important;
}

/* Put real content above the fixed grid/light layers. */
body > main,
body > footer {
  position: relative;
  z-index: 1;
}

#nvrSiteHeader {
  position: sticky;
  z-index: 1000;
}

/* Match the homepage footer instead of the old solid site.css footer. */
.site-footer,
body > footer {
  background: rgba(3, 7, 17, 0.38) !important;
  border-top: 1px solid rgba(32,240,255,.10) !important;
}

/* Match homepage text palette. */
.lead,
.feature-grid p,
.price-grid p,
.panel p,
.faq p,
.site-footer,
.site-footer a {
  color: var(--nvr-index-muted);
}

/* Large heading depth */
.hero h1,
main h1,
.section-heading h2,
.feature-final-cta h2 {
  text-shadow: var(--nvr-shadow-text);
}

/* =========================================================
   SHADOWS - DOWN / LEFT
========================================================= */

#nvrSiteHeader .nvr-nav-pill,
#nvrSiteHeader .nvr-hamburger,
.hero-actions .btn,
main .btn {
  box-shadow:
    -9px 9px 20px rgba(0,0,0,.36),
    -3px 5px 12px rgba(0,0,0,.22),
    0 0 18px rgba(32,240,255,.10),
    inset 0 1px 0 rgba(255,255,255,.055);
}

/* =========================================================
   UNIVERSAL APPROVED BUTTON HOVER
========================================================= */

a.btn,
button.btn,
.nvr-nav-pill,
.nvr-buy-pill,
.cookie-btn,
.back-to-top,
.nvr-hamburger {
  transition:
    color .2s ease,
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
.nvr-nav-pill:hover,
.nvr-nav-pill:focus-visible,
.nvr-buy-pill:hover,
.nvr-buy-pill:focus-visible,
.cookie-btn:hover,
.cookie-btn:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible,
.nvr-hamburger:hover,
.nvr-hamburger:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    #0c7088 0%,
    #0b5f82 42%,
    #104d80 72%,
    #123d6d 100%
  ) !important;
  border-color: rgba(91,230,255,.95) !important;
  box-shadow:
    -10px 10px 24px rgba(0,0,0,.46),
    -4px 6px 14px rgba(0,0,0,.28),
    0 0 26px rgba(32,240,255,.24),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 0 8px rgba(255,255,255,.10);
  transform: translateY(-1px);
}

/* =========================================================
   SHARED TILE / PANEL DEPTH + HOMEPAGE-STYLE SHEEN
========================================================= */

.panel,
.feature-grid > article,
.price-grid > article,
.faq details {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    -16px 16px 34px rgba(0,0,0,.42),
    -6px 8px 20px rgba(0,0,0,.24),
    0 0 24px rgba(32,240,255,.08),
    inset 0 1px 0 rgba(255,255,255,.045);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}

.panel::before,
.feature-grid > article::before,
.price-grid > article::before,
.faq details::before {
  content: "";
  position: absolute;
  top: -55%;
  left: -120%;
  width: 68%;
  height: 210%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    transparent,
    rgba(255,255,255,.10),
    transparent
  );
  transform: rotate(14deg);
  transition: left .55s ease;
}

.panel > *,
.feature-grid > article > *,
.price-grid > article > *,
.faq details > * {
  position: relative;
  z-index: 1;
}

.panel:hover,
.feature-grid > article:hover,
.price-grid > article:hover,
.faq details:hover {
  transform: translateY(-5px);
  border-color: rgba(32,240,255,.46);
  box-shadow:
    -20px 20px 42px rgba(0,0,0,.50),
    -7px 10px 24px rgba(0,0,0,.28),
    0 0 34px rgba(32,240,255,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.panel:hover::before,
.feature-grid > article:hover::before,
.price-grid > article:hover::before,
.faq details:hover::before {
  left: 165%;
}

/* Slightly blue the old teal panels so they belong to index.html. */
.panel,
.feature-grid > article,
.price-grid > article,
.faq details {
  background:
    radial-gradient(circle at 10% 0%, rgba(32,240,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(12,39,68,.72), rgba(6,20,37,.74)) !important;
  border-color: rgba(32,240,255,.18) !important;
}

/* Keep page layout responsive */
@media (max-width: 760px) {
  body {
    background-attachment: scroll !important;
  }

  .hero h1,
  main h1,
  .section-heading h2,
  .feature-final-cta h2 {
    text-shadow: -5px 4px 10px rgba(0,0,0,.56);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel::before,
  .feature-grid > article::before,
  .price-grid > article::before,
  .faq details::before {
    transition: none;
  }
}