/*!
 * Money Wise — Brand Theme
 * Design system for getmoneywiseapp.com, aligned 1:1 with the color palette
 * used inside the mobile app (lib/core/theme/app_colors.dart): navy + gold
 * on a permanently dark, "corporate professional" canvas. Layered on top of
 * Bootstrap 5 + the Start Bootstrap "New Age" template (css/styles.css) —
 * this file only overrides tokens/components, it never duplicates Bootstrap.
 *
 * Not user-toggleable light/dark: the app's own Hero Card and nav pill are
 * intentionally an "always-dark island" regardless of the user's theme
 * setting, so a single premium dark canvas is the truest expression of the
 * brand for a marketing site — see TODO.md notes on AppColors.navy.
 */

:root {
  /* --- Core palette (1:1 with lib/core/theme/app_colors.dart) --- */
  --mw-navy: #1e2337;
  --mw-navy-soft: #262c47;
  --mw-gold: #c9a227;
  --mw-gold-soft: #e0be55;
  --mw-ink: #14161f;
  --mw-bg: #10121c;
  --mw-bg-elevated: #171a29;
  --mw-surface: #1c1f30;
  --mw-surface-muted: #262a3d;
  --mw-border: rgba(242, 242, 245, 0.08);
  --mw-text-primary: #f2f2f5;
  --mw-text-secondary: #a0a0ac;
  --mw-text-tertiary: #6b6b78;
  --mw-income: #4ade80;
  --mw-expense: #f87171;

  /* Logo-only gradient — matches the shipped app icon (assets/img/icon.png).
     Reserved for the wordmark/icon; the gold accent above drives all UI/CTAs. */
  --mw-logo-grad-start: #3b82f6;
  --mw-logo-grad-end: #60d4fa;

  --mw-radius-sm: 12px;
  --mw-radius-md: 20px;
  --mw-radius-lg: 28px;
  --mw-shadow-card: 0 20px 45px rgba(0, 0, 0, 0.35);
  --mw-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--mw-bg);
  color: var(--mw-text-secondary);
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-alt {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mw-text-primary);
}

p {
  color: var(--mw-text-secondary);
}

a {
  color: var(--mw-gold-soft);
}
a:hover {
  color: var(--mw-gold);
}

::selection {
  background: var(--mw-gold);
  color: var(--mw-ink);
}

/* ==========================================================================
   Navbar
   ========================================================================== */

#mainNav {
  background-color: rgba(16, 18, 28, 0.9) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mw-border);
}
#mainNav .navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--mw-text-primary) !important;
}
#mainNav .navbar-brand img {
  height: 30px;
  width: 30px;
  border-radius: 8px;
}
#mainNav .navbar-nav .nav-link {
  color: var(--mw-text-secondary) !important;
  font-weight: 500;
  transition: color 0.15s ease;
}
#mainNav .navbar-nav .nav-link:hover,
#mainNav .navbar-nav .nav-link.active {
  color: var(--mw-gold-soft) !important;
}
#mainNav .navbar-toggler {
  color: var(--mw-text-primary);
  border-color: var(--mw-border);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  font-weight: 600;
  letter-spacing: 0.1px;
}

.btn-primary,
.btn-gold {
  background-color: var(--mw-gold) !important;
  border-color: var(--mw-gold) !important;
  color: var(--mw-ink) !important;
}
.btn-primary:hover, .btn-primary:focus,
.btn-gold:hover, .btn-gold:focus {
  background-color: var(--mw-gold-soft) !important;
  border-color: var(--mw-gold-soft) !important;
  color: var(--mw-ink) !important;
}

.btn-outline-primary,
.btn-outline-gold {
  color: var(--mw-text-primary);
  border-color: var(--mw-border);
  background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-gold:hover {
  background-color: var(--mw-surface-muted);
  border-color: var(--mw-gold);
  color: var(--mw-text-primary);
}

.btn-dark,
.btn-navy {
  background-color: var(--mw-navy) !important;
  border-color: var(--mw-navy) !important;
  color: var(--mw-text-primary) !important;
}
.btn-dark:hover, .btn-dark:focus,
.btn-navy:hover, .btn-navy:focus {
  background-color: var(--mw-navy-soft) !important;
  border-color: var(--mw-navy-soft) !important;
}

.btn-light {
  background-color: var(--mw-text-primary) !important;
  border-color: var(--mw-text-primary) !important;
  color: var(--mw-ink) !important;
}
.btn-light:hover {
  background-color: #ffffff !important;
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: var(--mw-text-tertiary) !important;
  border-color: var(--mw-border) !important;
}

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.bg-surface { background-color: var(--mw-surface) !important; }
.bg-elevated { background-color: var(--mw-bg-elevated) !important; }
.bg-navy { background-color: var(--mw-navy) !important; }
.bg-ink { background-color: var(--mw-ink) !important; }
.text-gold { color: var(--mw-gold-soft) !important; }
.text-muted { color: var(--mw-text-secondary) !important; }

.shadow-sm { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important; }
.shadow-lg { box-shadow: var(--mw-shadow-card) !important; }

/* ==========================================================================
   Badges / eyebrows
   ========================================================================== */

.mw-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.05));
  border: 1px solid rgba(201, 162, 39, 0.35);
  color: var(--mw-gold-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.mw-eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mw-gold);
  box-shadow: 0 0 0 4px rgba(201, 162, 39, 0.2);
}

.mw-pill {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mw-pill--new {
  background: rgba(201, 162, 39, 0.15);
  color: var(--mw-gold-soft);
  border: 1px solid rgba(201, 162, 39, 0.4);
}
.mw-pill--soon {
  background: rgba(160, 160, 172, 0.12);
  color: var(--mw-text-secondary);
  border: 1px solid var(--mw-border);
}

/* ==========================================================================
   Sections
   ========================================================================== */

section, aside { padding-top: 6rem; padding-bottom: 6rem; }

.mw-section-heading {
  max-width: 640px;
}
/* Standalone eyebrow text — used both inside .mw-section-heading and above
   section headings that don't use that wrapper (Pricing, FAQ, Roadmap...). */
.eyebrow-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mw-gold-soft);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Masthead / Hero
   ========================================================================== */

.masthead {
  background: radial-gradient(circle at 15% 20%, rgba(201, 162, 39, 0.08), transparent 45%),
              radial-gradient(circle at 85% 0%, rgba(59, 130, 246, 0.1), transparent 40%),
              var(--mw-bg);
  padding-top: 10rem;
  padding-bottom: 5rem;
  border-bottom: 1px solid var(--mw-border);
}

/* ==========================================================================
   Trust / quote bar
   ========================================================================== */

.mw-trust-bar {
  background-color: var(--mw-ink);
  border-top: 1px solid var(--mw-border);
  border-bottom: 1px solid var(--mw-border);
}
.mw-trust-bar blockquote {
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--mw-text-primary);
  font-weight: 500;
}
.mw-trust-bar .mw-trust-icons {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  color: var(--mw-text-tertiary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.mw-trust-icons span { display: inline-flex; align-items: center; gap: 0.5rem; }
.mw-trust-icons i { color: var(--mw-gold-soft); font-size: 1.1rem; }

/* ==========================================================================
   Feature cards
   ========================================================================== */

.mw-feature-card {
  height: 100%;
  padding: 2rem;
  border-radius: var(--mw-radius-md);
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.mw-feature-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 162, 39, 0.35);
  background-color: var(--mw-surface-muted);
}
/* Standalone circular icon badge — reused both inside .mw-feature-card and
   on its own (ex. Roadmap section list items). */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(201, 162, 39, 0.12);
  color: var(--mw-gold-soft);
  font-size: 1.4rem;
}
.mw-feature-card .icon-wrap {
  margin-bottom: 1.25rem;
}
.mw-feature-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}
.mw-feature-card p {
  font-size: 0.95rem;
  margin-bottom: 0;
}
.mw-feature-card .mw-pill {
  margin-bottom: 0.85rem;
}

/* ==========================================================================
   Phone mockup + screenshot placeholders
   ========================================================================== */

.device-wrapper {
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.45));
}

/* Replaces the vendor .screen <img> with a self-contained placeholder until
   real screenshots of the redesigned app are dropped in — see comments in
   index.html next to each usage for exactly which screen belongs there. */
.mw-screen-placeholder {
  position: absolute;
  top: 3.1855955679%;
  left: 6.8870523416%;
  width: 86.2258953168%;
  height: 93.6288088643%;
  border-radius: 30px;
  background: linear-gradient(160deg, var(--mw-navy) 0%, var(--mw-ink) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  overflow: hidden;
}
.mw-screen-placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(201, 162, 39, 0.18), transparent 55%);
}
.mw-screen-placeholder img {
  width: 30%;
  max-width: 72px;
  opacity: 0.9;
  margin-bottom: 1rem;
  position: relative;
}
.mw-screen-placeholder span {
  position: relative;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--mw-gold-soft);
  background: rgba(201, 162, 39, 0.12);
  border: 1px solid rgba(201, 162, 39, 0.3);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.mw-price-card {
  height: 100%;
  border-radius: var(--mw-radius-lg);
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
  padding: 3rem 2.25rem;
}
.mw-price-card--current {
  border-color: rgba(201, 162, 39, 0.4);
  background: linear-gradient(165deg, var(--mw-surface-muted) 0%, var(--mw-surface) 100%);
}
.mw-price-card--soon {
  opacity: 0.92;
}
.mw-price-card .plan-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mw-text-tertiary);
  margin-bottom: 0.75rem;
}
.mw-price-card .plan-price {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--mw-text-primary);
  line-height: 1;
}
.mw-price-card .plan-price small {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mw-text-secondary);
}
.mw-price-card ul {
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 2rem;
}
.mw-price-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  color: var(--mw-text-secondary);
  font-size: 0.95rem;
}
.mw-price-card ul li i {
  color: var(--mw-gold-soft);
  margin-top: 0.2rem;
}
.mw-price-card ul li strong { color: var(--mw-text-primary); }

/* ==========================================================================
   FAQ
   ========================================================================== */

.mw-faq-item {
  border-bottom: 1px solid var(--mw-border);
  padding: 1.75rem 0;
}
.mw-faq-item:first-child { padding-top: 0; }
.mw-faq-item h3 {
  font-size: 1.05rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.mw-faq-item h3 i { color: var(--mw-gold-soft); margin-top: 0.2rem; }
.mw-faq-item p {
  margin: 0.5rem 0 0 2.05rem;
  font-size: 0.95rem;
}

/* ==========================================================================
   CTA
   ========================================================================== */

section.cta {
  position: relative;
  padding: 8rem 0;
  background: linear-gradient(165deg, var(--mw-navy) 0%, var(--mw-ink) 100%);
  background-image: none !important;
}
section.cta::before { display: none; }
section.cta .cta-content { position: relative; z-index: 1; }

/* ==========================================================================
   Footer + modal
   ========================================================================== */

footer.mw-footer {
  background-color: var(--mw-ink) !important;
  border-top: 1px solid var(--mw-border);
}
footer.mw-footer a { color: var(--mw-text-secondary); text-decoration: none; }
footer.mw-footer a:hover { color: var(--mw-gold-soft); }

.modal-content {
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
  color: var(--mw-text-secondary);
}
.modal-header {
  background-color: var(--mw-navy) !important;
}

/* ==========================================================================
   Cards (privacy policy, generic)
   ========================================================================== */

.card {
  background-color: var(--mw-surface);
  border: 1px solid var(--mw-border);
  border-radius: var(--mw-radius-md);
}
.policy-content h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--mw-text-primary);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--mw-border);
  padding-bottom: 0.5rem;
}
.policy-content p, .policy-content li {
  color: var(--mw-text-secondary);
  line-height: 1.8;
  font-size: 1.02rem;
}
.policy-content strong { color: var(--mw-text-primary); }
.policy-content a { color: var(--mw-gold-soft); text-decoration: underline; }

/* ==========================================================================
   Responsive tweaks
   ========================================================================== */

@media (max-width: 991.98px) {
  section, aside { padding-top: 4rem; padding-bottom: 4rem; }
  .masthead { padding-top: 8rem; }
  .mw-trust-bar blockquote { font-size: 1.15rem; }
  section.cta { padding: 5rem 0; }
}

@media (max-width: 767.98px) {
  .mw-price-card { padding: 2.25rem 1.75rem; }
}