:root {
  /* --- Core Brand Colors --- */
  --primary-color: #0B1E3D;       /* Navy Core */
  --secondary-color: #C9A13D;     /* Gold Accent */
  --accent-blue: #2E74C9;         /* Arrow Momentum */
  --success-green: #1DBF73;       /* Candlestick Up */
  --danger-red: #D45A55;          /* Pullback */
  --light-bg: #F5F6FA;            /* Page Background */
  --text-color: #495057;          /* Main Text */

  /* --- Gradients & Shadows --- */
  --hero-gradient: linear-gradient(135deg, #0B1E3D 0%, #2E74C9 100%);
  --card-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  /* --- Typography --- */
  --font-header: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Inter', sans-serif;

  /* --- Layout Tweaks --- */
  --radius-base: 0.75rem;
  --transition-fast: 0.25s ease-in-out;
}

/* === Example Usage === */
body {
  .text-primary { color: #004085 !important; } /* TradeLenz navy */
  .border-warning { border-color: #ffc107 !important; } /* Gold accent */
  .disclaimer-text p { line-height: 1.7; }
  .disclaimer-text h5 {
    border-left: 4px solid #ffc107;
    padding-left: .75rem;
  }
  background-color: #F5F6FA; /* light-bg variable */
  font-family: var(--font-body);
}

.navbar-dark {
  background-color: var(--primary-color);
}

.btn-primary {
  background-color: var(--secondary-color);
  border: none;
  color: var(--primary-color);
  font-weight: 600;
  transition: var(--transition-fast);
}

.btn-primary:hover {
  background-color: var(--accent-blue);
  color: #fff;
}

.card {
  border-radius: var(--radius-base);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.10);
}

/* === TradeLenz Pro Brand Card === */
.brand-card {
  border: 1px solid var(--secondary-color);
  border-radius: var(--radius-base);
  box-shadow: var(--card-shadow);
  background-color: #fff;
  overflow: hidden;
  transition: transform 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

.brand-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- Header --- */
.brand-card .card-header {
  background: var(--hero-gradient);
  color: #fff;
  text-align: center;
  font-family: var(--font-header);
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 1rem 1.25rem;
  border-bottom: none;
}

/* --- Body --- */
.brand-card .card-body {
  padding: 2rem 2.25rem;
  background-color: #fff;
}

/* --- Footer --- */
.brand-card .card-footer {
  background-color: var(--light-bg);
  color: var(--text-color);
  font-size: 0.85rem;
  text-align: center;
  padding: 1rem;
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* --- Buttons inside brand cards --- */
.brand-card .btn-primary {
  background-color: var(--secondary-color);
  border: none;
  color: var(--primary-color);
  font-weight: 600;
  letter-spacing: 0.2px;
  transition: var(--transition-fast);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.brand-card .btn-primary:hover {
  background: linear-gradient(135deg, var(--secondary-color), var(--accent-blue));
  color: #fff;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

/* --- Icon sizing consistency --- */
.brand-card i {
  vertical-align: middle;
  margin-right: 4px;
}

/* --- Input styling consistency --- */
.brand-card .form-control {
  border-radius: var(--radius-base);
  border-color: rgba(0, 0, 0, 0.1);
  transition: border-color var(--transition-fast);
}

.brand-card .form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 0.2rem rgba(46, 116, 201, 0.25);
}

/* ---------- NAVBAR POLISH ---------- */

/* Reduce vertical space */
.navbar-light {
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
}

/* Icon size consistency */
.navbar-light .navbar-brand img {
  height: 42px !important;
}

/* Nav links */
.navbar-light .nav-link {
  color: var(--primary-color) !important;
  font-weight: 600;
  padding: .35rem .75rem !important;
  transition: color .25s ease, text-decoration .25s ease;
}

/* Hover / focus */
.navbar-light .nav-link:hover {
  color: var(--secondary-color) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Active link style */
.navbar-light .nav-link.active {
  color: var(--secondary-color) !important;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Login button improvements */
.navbar-light .btn-warning {
  padding: .45rem 1.3rem;
  border-radius: .5rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.navbar-light .btn-warning:hover {
  background-color: var(--accent-blue);
  color: #fff;
}

/* ---------- APP NAV ---------- */

.navbar-dark {
  padding-top: .45rem !important;
  padding-bottom: .45rem !important;
}

.navbar-dark .navbar-brand img {
  height: 36px !important;
}

.navbar-dark .nav-link {
  color: #ffffffcc !important; /* 80% white */
  font-weight: 500;
  padding: .35rem .75rem !important;
  transition: color .25s ease, text-decoration .25s ease;
}

.navbar-dark .nav-link:hover {
  color: var(--secondary-color) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.navbar-dark .nav-link.active {
  color: var(--secondary-color) !important;
  font-weight: 700;
}

/* Footer readability & spacing */
footer p,
footer span {
  color: rgba(255,255,255,0.85) !important;
}

footer a {
  color: rgba(255,255,255,0.85) !important;
  transition: opacity .25s ease, text-decoration .25s ease;
}

footer a:hover {
  opacity: .7;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Subtle spacing improvements */
footer .list-inline {
  margin-top: .75rem;
}

footer i {
  font-size: 1.1rem;
  margin: 0 .25rem;
}

footer i:hover {
  transform: translateY(-2px);
  transition: transform .2s ease;
}

.footer-link {
  color: rgba(255,255,255,0.75) !important;
  text-decoration: none;
  display: block;
  margin-bottom: .4rem;
  transition: opacity .25s ease, color .25s ease;
}

.footer-link:hover {
  color: var(--secondary-color) !important;
  opacity: .9;
  text-decoration: underline;
  text-underline-offset: 3px;
}

footer.footer-dark {
  box-shadow: 0 -4px 8px rgba(0,0,0,0.15);
}

/* ==========================================
   Premium CTA Band Styling (TradeLenz Pro)
   ========================================== */

.tlp-cta-band {
    /* Matte gradient background */
    background: linear-gradient(
        to bottom,
        #1a1f23 0%,   /* dark charcoal */
        #111518 100%  /* slightly deeper matte */
    );

    /* Clean, subtle section separation */
    border-top: 1px solid rgba(255, 255, 255, 0.08);

    /* Slightly more vertical breathing room */
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
}

/* Gold CTA button refined hover */
.tlp-cta-gold-btn {
    background-color: #d4a017;   /* your gold */
    border-color: #d4a017;
    color: #000;
    font-weight: 600;
    padding: 0.55rem 1.2rem;
    transition: all 0.25s ease;
}

.tlp-cta-gold-btn:hover {
    background-color: #e0b33b;   /* slightly lighter gold */
    border-color: #e0b33b;
    box-shadow: 0 0 12px rgba(224, 179, 59, 0.5); /* soft premium glow */
    transform: translateY(-1px);
}
/* ============================================================
   TRADELENZ PRO — PRE-LAUNCH STYLE
   ============================================================ */
:root {
  --tlp-navy: #0d1b2a;
  --tlp-navy-light: #1b263b;
  --tlp-teal: #00a896;
  --tlp-gold: #f4b400;
  --tlp-gray: #f8f9fa;
}

/* ------------------------------------------------------------
   HERO — Simplified for Prelaunch
------------------------------------------------------------ */
.tlp-hero-simple {
  background: linear-gradient(
    135deg,
    var(--tlp-navy) 0%,
    var(--tlp-navy-light) 100%
  );
  color: white;
}

/* ------------------------------------------------------------
   BUTTONS
------------------------------------------------------------ */
.btn-tlp-primary {
  background-color: var(--tlp-teal);
  border: none;
  color: #fff;
}
.btn-tlp-primary:hover {
  background-color: #009e8b;
}

.btn-tlp-gold {
  background-color: var(--tlp-gold);
  color: #000;
  border: none;
}
.btn-tlp-gold:hover {
  background-color: #e0a300;
}

/* ------------------------------------------------------------
   CARDS
------------------------------------------------------------ */
.tlp-info-card,
.tlp-feature-block {
  background: white;
  border-radius: 8px;
  border: 1px solid #e1e5ea;
  transition: .2s ease;
}
.tlp-info-card:hover,
.tlp-feature-block:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* ------------------------------------------------------------
   CTA SECTION
------------------------------------------------------------ */
.tlp-cta {
  background: var(--tlp-navy-light);
}
/* ============================================================
   PRE-LAUNCH HEADER — CLEAN, PROFESSIONAL
   ============================================================ */

.tlp-prelaunch-header {
  background: var(--tlp-navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.tlp-brand {
  letter-spacing: 0.5px;
}

.tlp-nav-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease;
}

.tlp-nav-link:hover {
  color: var(--tlp-teal);
}

/* Mobile */
@media (max-width: 576px) {
  .tlp-prelaunch-header nav {
    gap: 1rem;
  }
  .tlp-brand {
    font-size: 1.3rem;
  }
}
.tlp-update-card {
    background: #ffffff;
    border-radius: 10px;
    border: 1px solid #e3e6ec;
    transition: all .2s ease;
}

.tlp-update-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.05);
}

.strength-bar {
    height: 6px;
    width: 0%;
    background-color: #dc3545; /* red */
    border-radius: 4px;
    transition: width 0.4s ease, background-color 0.4s ease;
}

.strength-weak     { background-color: #dc3545 !important; }  /* red */
.strength-medium   { background-color: #fd7e14 !important; }  /* orange */
.strength-strong   { background-color: #ffc107 !important; }  /* gold */
.strength-excellent{ background-color: #198754 !important; }  /* green */

/* ================================
   GLOBAL FLASH MESSAGING STYLES
   ================================ */
.tlp-alert {
    margin: 20px auto;
    padding: 14px 20px;
    border-radius: 8px;
    max-width: 500px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    animation: flashFade 0.6s ease-out;
}

/* Colors */
.tlp-alert-success {
    background: #e8f9f0;
    color: #0a6640;
    border: 1px solid #b6e7cd;
}

.tlp-alert-error {
    background: #fdecea;
    color: #b71c1c;
    border: 1px solid #f5c6c6;
}

.tlp-alert-warning {
    background: #fff8e1;
    color: #795548;
    border: 1px solid #ffecb3;
}

/* Fade-in animation */
@keyframes flashFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* TradeLenz Gradient Header */
.tlp-gradient-header {
  background: linear-gradient(
    135deg,
    #0b1d2a 0%,
    #102a3a 45%,
    #16384f 100%
  );
  color: #ffffff;
}

.tlp-gradient-header .text-muted {
  color: rgba(255,255,255,0.65) !important;
}

.tlp-gradient-stat {
  min-width: 110px;
}
/* Allow full-bleed hero sections */
.tlp-dashboard-hero {
  background: linear-gradient(
    135deg,
    #071821 0%,
    #0c2a3d 45%,
    #123f5a 100%
  );
  color: #ffffff;
  border-radius: 16px;
  margin: 2rem auto;
  padding: 2.5rem 0;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);

  /* KEY: isolate from parent backgrounds */
  position: relative;
  z-index: 1;
}