/* ============================================================
   RYTELL SITE-WIDE OVERHAUL LAYER
   Loaded after style.css / pages.css on every inner page.
   Brings the redesign language (Space Grotesk display type,
   circular RDS mark, particle hero fields) to the whole site.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ---- Display typography ---- */
h1, h2, h3, h4,
.nav__logo,
.footer__logo,
.btn {
  font-family: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  letter-spacing: -0.015em;
}

/* ---- Circular RDS mark ---- */
.nav__mark {
  height: 36px;
  width: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 140, 66, 0.35), 0 0 14px -2px rgba(255, 92, 0, 0.35);
}

.footer__mark {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(255, 140, 66, 0.3);
}

/* ---- Particle field inside dark hero bands ---- */
.page-hero {
  position: relative;
  overflow: hidden;
}

.page-hero > .container {
  position: relative;
  z-index: 2;
}

canvas.hero-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* keep the existing decorative grid behind the particles */
.page-hero .hero__bg-grid { z-index: 1; }

/* ---- Backlit content surfaces ----
   Light reading areas sit on a soft blue ambient glow instead of
   flat white — ties the light pages into the dark cinematic theme. */
body {
  background:
    radial-gradient(90% 40% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 70%),
    radial-gradient(70% 50% at 15% 35%, rgba(190, 215, 255, 0.35), rgba(190, 215, 255, 0) 70%),
    radial-gradient(70% 50% at 85% 70%, rgba(170, 205, 255, 0.30), rgba(170, 205, 255, 0) 70%),
    linear-gradient(180deg, #f6f9ff 0%, #eef4fd 100%);
}

/* article body = backlit panel (blog posts) */
.article {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(190, 215, 255, 0.55);
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow:
    0 0 60px rgba(150, 190, 255, 0.35),
    0 0 160px rgba(140, 185, 255, 0.22),
    0 8px 40px rgba(20, 50, 110, 0.06);
}

/* FAQ content gets the same treatment */
.faq-page {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(190, 215, 255, 0.55);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow:
    0 0 60px rgba(150, 190, 255, 0.35),
    0 0 160px rgba(140, 185, 255, 0.22),
    0 8px 40px rgba(20, 50, 110, 0.06);
}

/* light gray utility blocks pick up the blue cast so nothing reads flat gray */
.cta-section { background: #e9f0fc; }

@media (max-width: 700px) {
  .article, .faq-page { padding: 28px 20px; border-radius: 14px; }
}

/* ---- Mobile nav/footer fit (inner pages) ----
   style.css never hid the header social icons on small screens,
   which pushed the nav wider than the viewport. */
@media (max-width: 760px) {
  .nav__social { display: none; }
  .footer__links { flex-wrap: wrap; row-gap: 10px; }
  .footer__copy { max-width: 100%; }
}

/* ---- Buttons: pill + glow to match the new homepage ---- */
.btn {
  border-radius: 999px;
}

.btn--primary,
.btn.btn--primary {
  box-shadow: 0 6px 24px -8px rgba(255, 92, 0, 0.45);
}