/* ============================================
   THEME 3: Soft Azure Sky (Friendly / Consumer)
   Approachable, friendly, modern consumer finance
   ============================================ */

:root {
  --color-primary: #075985;
  --color-primary-light: #0C7BA8;
  --color-primary-dark: #0C4A6E;

  --color-accent: #0EA5E9;
  --color-accent-dark: #0284C7;
  --color-accent-light: #E0F2FE;

  --color-gold: #38BDF8;
  --color-gold-light: #F0F9FF;

  --color-bg: #FFFFFF;
  --color-bg-alt: #F0F9FF;
  --color-bg-dark: #075985;
  --color-bg-section: #E0F2FE;

  --color-text: #0C4A6E;
  --color-text-light: #475569;
  --color-text-muted: #7D8DA1;
  --color-text-inverse: #FFFFFF;

  --color-border: #DBEAFE;
  --color-border-dark: #BAE6FD;

  --shadow-accent: 0 8px 24px rgba(14, 165, 233, 0.3);
}

.btn-primary {
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
}

.hero {
  background: linear-gradient(135deg, #075985 0%, #0C7BA8 60%, #0EA5E9 100%);
}

.hero-content h1 .accent {
  background: linear-gradient(135deg, #BAE6FD 0%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero::before {
  background: radial-gradient(circle, rgba(186, 230, 253, 0.25) 0%, transparent 60%);
}

.hero::after {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 60%);
}

.logo-icon {
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%);
}

.hero-stat-value {
  color: #BAE6FD;
}

.cta-section {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

/* Theme 3 — hero-brand prominent styling */
.hero-brand {
  background: linear-gradient(135deg, #FFFFFF 0%, #BAE6FD 40%, #67E8F9 70%, #FFFFFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 10px 32px rgba(34, 211, 238, 0.5));
}

/* ============================================
   Photo backgrounds — Hero & CTA (no shadows, no glow)
   A flat blue overlay keeps white text readable
   while the photo stays clearly visible.
   ============================================ */

/* ---- Hero ---- */
.hero.hero-centered {
  background:
    linear-gradient(rgba(7, 89, 133, 0.62), rgba(12, 74, 110, 0.70)),
    url("../images/hero-1920.webp") center 30% / cover no-repeat;
  background-color: #0C4A6E;
}

@media (max-width: 1024px) {
  .hero.hero-centered {
    background:
      linear-gradient(rgba(7, 89, 133, 0.66), rgba(12, 74, 110, 0.74)),
      url("../images/hero-1024.webp") center 30% / cover no-repeat;
    background-color: #0C4A6E;
  }
}

/* Remove decorative glows */
.hero.hero-centered::before,
.hero.hero-centered::after,
.cta-section::before {
  display: none;
}

/* Solid white brand text, no shadow/filter */
.hero-centered .hero-brand {
  background: none;
  -webkit-text-fill-color: #FFFFFF;
  color: #FFFFFF;
  filter: none;
  text-shadow: none;
}

.hero-centered .hero-lede,
.hero-centered .hero-trust {
  color: #FFFFFF;
  text-shadow: none;
}

/* Flat buttons inside photo sections */
.hero-centered .btn,
.cta-section .btn {
  box-shadow: none;
}
.hero-centered .btn-primary:hover,
.cta-section .btn-primary:hover {
  box-shadow: none;
}
.hero-centered .btn-outline,
.cta-section .btn-outline {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  background: transparent;
}
.hero-centered .btn-outline:hover,
.cta-section .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- CTA banner ---- */
.cta-section {
  background:
    linear-gradient(rgba(7, 89, 133, 0.70), rgba(12, 74, 110, 0.76)),
    url("../images/cta-1920.webp") center / cover no-repeat;
  background-color: #0C4A6E;
}

@media (max-width: 1024px) {
  .cta-section {
    background:
      linear-gradient(rgba(7, 89, 133, 0.72), rgba(12, 74, 110, 0.78)),
      url("../images/cta-1024.webp") center / cover no-repeat;
    background-color: #0C4A6E;
  }
}

.cta-content h2,
.cta-content p {
  color: #FFFFFF;
  text-shadow: none;
}

/* ============================================
   Wordmark logo — "FrontPay" prominent + small "Review" tag
   ============================================ */
.logo {
  gap: 8px;
  align-items: center;
}

.logo-brand {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, #0284C7 0%, #0EA5E9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #0284C7;
}

.logo-tag {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #075985;
  background: #E0F2FE;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}

/* Footer (dark background) version */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.footer-brand .logo-brand {
  font-size: 2rem;
  background: linear-gradient(135deg, #38BDF8 0%, #7DD3FC 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #38BDF8;
}
.footer-brand .logo-tag {
  color: #0C4A6E;
  background: #7DD3FC;
}

@media (max-width: 480px) {
  .logo-brand { font-size: 1.5rem; }
}