/* ================================================================
   PhoneGal — Marketing site styles
   Brand colors:
     - Spec blue       #3D2FFF (brand-500, low-opacity uses only)
     - UI workhorse    #7C5CFF (brand-600, solid fills — matches the glyph)
     - Accent yellow   #FFB12F (the sound waves in the glyph)
   Tailwind palettes defined in index.php as `brand-*` and `accent-*`.
   Keep CSS variables below in sync with the Tailwind config and with CLAUDE.md.
   ================================================================ */

:root {
  --bg-color: #ffffff;
  --gray-bg: #fafafa;
  --header-border: #e5e5e5;
  --border-gray: #d4d4d4;
  --text-color: #000000;

  --brand-500: #3D2FFF;
  --brand-600: #7C5CFF;
  --brand-700: #7053E6;
  --accent-500: #FFB12F;
  --accent-600: #E69F2A;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1b1b1b;
    --gray-bg: #212121;
    --header-border: #333;
    --border-gray: #444;
    --text-color: rgba(255, 255, 255, 0.8);
  }
}

* { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ----- Nav transitions ----- */
#main-nav {
  transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}

/* ----- Mobile menu open/close animation ----- */
#mobile-menu {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 250ms ease, transform 250ms ease;
}
#mobile-menu.is-open {
  opacity: 1;
  transform: translateY(0);
}
#main-nav.menu-open {
  background-color: #ffffff !important;
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
}
@media (prefers-color-scheme: dark) {
  #main-nav.menu-open { background-color: #1b1b1b !important; }
}

/* Mobile menu link hover/tap (only on devices with hover) */
@media (hover: hover) {
  #mobile-menu a:not(.is-active) span:hover {
    background-color: #fafafa;
  }
  @media (prefers-color-scheme: dark) {
    #mobile-menu a:not(.is-active) span:hover {
      background-color: rgba(255, 255, 255, 0.05);
    }
  }
}
#mobile-menu a:not(.is-active) span:active {
  background-color: #f5f5f5;
}
@media (prefers-color-scheme: dark) {
  #mobile-menu a:not(.is-active) span:active {
    background-color: rgba(255, 255, 255, 0.10);
  }
}

/* ----- Section heading ----- */
.section-heading {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

/* ----- Hero gradient orbs ----- */
.hero-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}
.hero-orb-1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, var(--brand-500) 0%, transparent 70%);
  top: -120px; left: -120px;
}
.hero-orb-2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, var(--accent-500) 0%, transparent 70%);
  bottom: -160px; right: -100px;
}
@media (prefers-color-scheme: dark) {
  .hero-orb { opacity: 0.18; }
}

/* ----- Feature cards ----- */
.feature-card {
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.feature-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  box-shadow: 0 8px 24px -8px rgba(61, 47, 255, 0.25);
}

/* ----- Bottom CTA ----- */
.cta-section {
  background: linear-gradient(180deg, transparent, rgba(61, 47, 255, 0.04));
}
@media (prefers-color-scheme: dark) {
  .cta-section { background: linear-gradient(180deg, transparent, rgba(61, 47, 255, 0.06)); }
}
.cta-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(100px);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
}
.cta-orb-1 {
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--brand-500) 0%, transparent 70%);
  top: -80px; left: 10%;
}
.cta-orb-2 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, var(--accent-500) 0%, transparent 70%);
  bottom: -100px; right: 8%;
}

/* ----- Fade-in animation ----- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { opacity: 0; animation: fadeInUp 0.6s ease forwards; }
.fade-in-up-1 { animation-delay: 0.05s; }
.fade-in-up-2 { animation-delay: 0.20s; }
.fade-in-up-3 { animation-delay: 0.40s; }
.fade-in-up-4 { animation-delay: 0.60s; }

/* ----- Mobile: drop GPU-heavy blur orbs -----
   iOS Safari crashes on zoom when filter:blur() buffers exceed per-tab GPU memory.
   The orbs are purely decorative — hidden on phones, kept on tablet+. */
@media (max-width: 768px) {
  .hero-orb,
  .cta-orb { display: none; }
}

/* ----- Legal pages (Terms, Privacy) -----
   Comfortable reading rhythm for long-form legal copy. */
.legal-prose {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #404040;
}
.legal-prose section { scroll-margin-top: 4rem; }
.legal-prose p { margin: 0; }
.legal-prose p + p { margin-top: 0.75rem; }
.legal-prose a { word-break: break-word; }
.legal-prose ul { list-style-position: outside; }
.legal-prose strong { color: #171717; }
@media (prefers-color-scheme: dark) {
  .legal-prose { color: rgba(255,255,255,0.78); }
  .legal-prose strong { color: #ffffff; }
}
html.dark .legal-prose { color: rgba(255,255,255,0.78); }
html.dark .legal-prose strong { color: #ffffff; }