:root {
  /* Brand Palette - Perfect Provisions Gold & Deep Slate Navy */
  --brand-gold: #c88a1a;
  --brand-gold-light: #eab308;
  --brand-gold-hover: #b47814;
  --brand-navy: #0f172a;
  --brand-navy-light: #1e293b;
  --brand-accent: #f59e0b;
  --brand-accent-glow: rgba(200, 138, 26, 0.25);
  
  /* Light theme variables */
  --page-bg: #fbfbfa;
  --surface-bg: #ffffff;
  --surface-bg-alt: #f4f4f2;
  --surface-card: #ffffff;
  --border-color: #e5e5e0;
  --border-subtle: #d6d6d0;
  --text-primary: #1c1917;
  --text-muted: #57534e;
  --text-heading: #1c1917;
  
  --hero-bg: radial-gradient(ellipse at top, #292524 0%, #0c0a09 100%);
  --hero-text: #ffffff;
  --hero-subtitle: #f5f5f4;
  --on-brand: #ffffff;
  --logo-plate: #ffffff;
  --banner-start: #92400e;
  --banner-mid: #b45309;
  --banner-end: #c88a1a;
  --banner-text: #ffffff;
  
  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  --card-hover-shadow: 0 20px 30px -10px rgba(200, 138, 26, 0.2);
}

[data-bs-theme="dark"] {
  /* Dark theme overrides */
  --page-bg: #090d16;
  --surface-bg: #0f172a;
  --surface-bg-alt: #1e293b;
  --surface-card: #141e33;
  --border-color: #1e293b;
  --border-subtle: #334155;
  --text-primary: #f8fafc;
  --text-muted: #94a3b8;
  --text-heading: #ffffff;
  
  --hero-bg: radial-gradient(ellipse at top, #1e293b 0%, #070a12 100%);
  --hero-text: #ffffff;
  --hero-subtitle: #f5f5f4;
  --on-brand: #ffffff;
  --logo-plate: #ffffff;
  --banner-text: #ffffff;
  
  --card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
  --card-hover-shadow: 0 20px 35px -10px rgba(200, 138, 26, 0.25);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--page-bg);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-heading);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-gold {
  color: var(--brand-gold) !important;
}

.text-accent {
  color: var(--brand-accent) !important;
}

.bg-surface {
  background-color: var(--surface-card) !important;
}

.bg-surface-alt {
  background-color: var(--surface-bg-alt) !important;
}

/* Navbar */
.navbar {
  background-color: var(--surface-bg) !important;
  border-bottom: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.navbar-brand {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--text-heading);
}

.navbar-brand img {
  max-height: 48px;
  width: auto;
}

.nav-link {
  color: var(--text-muted);
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav-link:hover, .nav-link.active {
  color: var(--brand-gold);
}

/* Buttons */
.btn-gold {
  background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 100%);
  border: none;
  color: var(--on-brand) !important;
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  border-radius: 0.5rem;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(200, 138, 26, 0.3);
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--brand-gold-hover) 0%, var(--brand-gold) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(200, 138, 26, 0.45);
}

.btn-outline-gold {
  border: 1.5px solid var(--brand-gold);
  color: var(--brand-gold);
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.65rem 1.4rem;
  transition: all 0.2s ease;
}

.btn-outline-gold:hover {
  background-color: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--on-brand);
  transform: translateY(-2px);
}

/* Hero Section */
.hero-section {
  background: var(--hero-bg);
  color: var(--hero-text);
  padding: 4.5rem 0 5rem 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border-color);
}

.hero-section::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 450px;
  background: radial-gradient(circle, rgba(200, 138, 26, 0.2) 0%, rgba(245, 158, 11, 0.08) 50%, transparent 70%);
  pointer-events: none;
}

.hero-title {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--hero-text);
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 2.1rem;
  }
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--hero-subtitle);
}

.hero-features,
.hero-features div,
.hero-section .text-muted:not(.pp-card *) {
  color: var(--hero-text) !important;
}

/* Scripture Callout Card */
.scripture-card {
  background: linear-gradient(135deg, rgba(200, 138, 26, 0.12) 0%, rgba(245, 158, 11, 0.05) 100%);
  border-left: 4px solid var(--brand-gold);
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 1.5rem 2rem;
}

/* Cards */
.pp-card {
  background-color: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  box-shadow: var(--card-shadow);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  position: relative;
}

.pp-card p {
  color: var(--text-primary);
}

.pp-card p.text-muted,
.pp-card span.text-muted {
  color: var(--text-muted) !important;
}

.hero-section .pp-card {
  color: var(--text-primary) !important;
}

.hero-section .pp-card p {
  color: var(--text-primary) !important;
}

.pp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-shadow);
  border-color: rgba(200, 138, 26, 0.4);
}

/* Pillar icon badge */
.pillar-icon {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(200, 138, 26, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  border: 1px solid rgba(200, 138, 26, 0.25);
}

.pillar-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Board member card */
.board-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.board-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0.75rem 0.75rem 0 0;
}

/* Gallery items */
.gallery-item {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  border: 1px solid var(--border-color);
  background-color: var(--surface-bg-alt);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 1rem;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* Announcement Banner */
.announcement-banner {
  background: linear-gradient(90deg, var(--banner-start) 0%, var(--banner-mid) 50%, var(--banner-end) 100%);
  color: var(--banner-text);
  padding: 0.65rem 1rem;
  font-weight: 600;
  text-align: center;
  font-size: 0.95rem;
}

/* Footer */
footer {
  background-color: var(--surface-bg);
  border-top: 1px solid var(--border-color);
  color: var(--text-muted);
}

.pp-logo {
  background-color: var(--logo-plate);
  border-radius: 0.4rem;
  padding: 0.2rem 0.3rem;
}

.account-tagline,
.account-home-link {
  color: var(--hero-text);
}

.account-home-link:hover {
  color: var(--brand-gold-light);
}

.support-band {
  background: var(--hero-bg);
  color: var(--hero-text);
}

.support-band h2,
.support-lead {
  color: var(--hero-text);
}

.support-lead {
  max-width: 720px;
}

.pp-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}