/* ===== Landing page specific styles ===== */

/* Hero: subtle radial glow from the app accent colour */
.landing-hero {
  background:
    radial-gradient(ellipse 130% 70% at 50% 0%, rgba(var(--accent-rgb), .12) 0%, transparent 65%),
    var(--bs-body-bg);
  min-height: 52vh;
  display: flex;
  align-items: center;
}

.landing-headline {
  letter-spacing: -0.03em;
  line-height: 1.1;
}

/* Feature cards */
.landing-card {
  background: var(--surface-elevated);
  border-radius: 14px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.landing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(var(--accent-rgb), .18);
}

.landing-icon {
  color: var(--accent);
}

/* Bottom CTA section */
.landing-cta-section {
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(var(--accent-rgb), .07) 0%, transparent 70%),
    var(--bs-body-bg);
}

/* Primary CTA button: glow on hover to match the app's brand feel */
.landing-cta-primary:hover,
.landing-cta-primary:focus-visible {
  box-shadow: 0 0 18px rgba(var(--accent-rgb), .45);
}

/* ===== Dark mode: lift secondary / muted text contrast ===== */
/* Bootstrap's --bs-secondary-color (#a1a1aa) is too dim at small sizes on dark card surfaces */
[data-bs-theme="dark"] .landing-card .text-secondary,
[data-bs-theme="dark"] .landing-hero .text-secondary,
[data-bs-theme="dark"] .landing-hero .lead,
[data-bs-theme="dark"] .landing-features > .container > p,
[data-bs-theme="dark"] .landing-cta-section .text-secondary {
  color: #d1d1db !important; /* zinc-300 – readable on dark surfaces */
}

[data-bs-theme="dark"] footer .text-muted,
[data-bs-theme="dark"] .landing-cta-section .text-muted {
  color: #b0b0bf !important;
}

[data-bs-theme="dark"] footer a.text-muted {
  color: #c4c4ce !important;
}
[data-bs-theme="dark"] footer a.text-muted:hover {
  color: #e8e8f0 !important;
}

/* "Sign in" outline button: keep border visible in dark mode */
[data-bs-theme="dark"] .navbar .btn-outline-secondary {
  border-color: rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.85);
}
[data-bs-theme="dark"] .navbar .btn-outline-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}