/* ============================================================
   ExhibitSecure — cover site theme
   Palette: white / blue / black (per brand guide)
   Layered on Bootstrap 5.3 via CSS-variable overrides.
   ============================================================ */

:root {
  --es-navy:      #142F4A;   /* primary brand — matches app sidebar/navbar */
  --es-navy-deep: #0D2236;   /* hero gradients, footer */
  --es-accent:    #2E86DE;   /* CTAs — the one blue */
  --es-accent-dk: #2272C4;
  --es-ink:       #1A1A2E;   /* near-black body text */
  --es-black:     #0B0F14;   /* footer base */
  --es-paper:     #F7F9FC;   /* alternate section background */
  --es-line:      #E3EAF2;
  --es-blue-soft: #EAF3FC;
  --es-blue-mist: #7FB7F0;

  /* Bootstrap re-theme */
  --bs-primary: var(--es-accent);
  --bs-primary-rgb: 46, 134, 222;
  --bs-dark: var(--es-navy);
  --bs-dark-rgb: 20, 47, 74;
  --bs-body-color: var(--es-ink);
  --bs-body-font-family: "Source Sans 3", "Source Sans Pro", -apple-system, "Segoe UI", Arial, sans-serif;
  --bs-link-color: var(--es-accent);
  --bs-link-hover-color: var(--es-accent-dk);
  --bs-border-color: var(--es-line);
}

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { font-size: 1.0625rem; }

h1, h2, h3, h4, h5 { color: var(--es-navy); font-weight: 700; letter-spacing: -0.01em; }
.lead { color: #44556B; }
.text-accent { color: var(--es-accent) !important; }
.section-paper { background: var(--es-paper); }
.eyebrow {
  display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--es-accent); margin-bottom: .75rem;
}

/* ---------- buttons ---------- */
.btn { border-radius: 7px; font-weight: 600; }
.btn-primary {
  --bs-btn-bg: var(--es-accent); --bs-btn-border-color: var(--es-accent);
  --bs-btn-hover-bg: var(--es-accent-dk); --bs-btn-hover-border-color: var(--es-accent-dk);
  --bs-btn-active-bg: var(--es-accent-dk); --bs-btn-active-border-color: var(--es-accent-dk);
}
.btn-outline-light:hover { color: var(--es-navy); }
.btn-lg { padding: .75rem 1.75rem; }

/* ---------- navbar ---------- */
.navbar-es {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.navbar-es.is-scrolled { border-bottom-color: var(--es-line); box-shadow: 0 2px 18px rgba(13, 34, 54, .07); }
.navbar-es .nav-link { color: var(--es-navy); font-weight: 600; }
.navbar-es .nav-link:hover, .navbar-es .nav-link.active { color: var(--es-accent); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--es-navy) 0%, var(--es-navy-deep) 70%, var(--es-black) 100%);
  padding: 9.5rem 0 0;
}
.hero h1 { color: #fff; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.12; }
.hero .lead { color: #C7D8E8; font-size: 1.25rem; max-width: 38rem; }
.hero-motif {
  position: absolute; right: -60px; top: -40px; width: 480px; opacity: .14;
  pointer-events: none; user-select: none;
}
.hero-shot { display: block; width: 100%; height: auto; }
.hero-shot-wrap { margin-top: 3.5rem; transform: translateY(1px); }

/* ---------- trust strip ---------- */
.trust-strip { background: var(--es-navy-deep); color: #AFC3D6; font-size: .95rem; }
.trust-strip .divider { color: #2A4A68; }

/* ---------- feature cards ---------- */
.feature-card {
  background: #fff; border: 1px solid var(--es-line); border-radius: 12px;
  padding: 1.75rem; height: 100%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(13, 34, 54, .10); border-color: #CBDDF0; }
.feature-icon {
  width: 52px; height: 52px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; margin-bottom: 1.1rem;
  background: var(--es-blue-soft); color: var(--es-accent);
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.feature-card p { color: #51637A; font-size: .98rem; margin-bottom: 0; }

/* ---------- how it works ---------- */
.step-num {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--es-navy); color: #fff; font-weight: 700; font-size: 1.2rem;
}
.step-connector { border-left: 2px dashed #C7D4E2; margin-left: 22px; min-height: 28px; }

/* ---------- module rows (features page) ---------- */
.module-shot { border-radius: 14px; box-shadow: 0 18px 44px rgba(13, 34, 54, .14); width: 100%; height: auto; }
.module-kicker { font-family: Consolas, "SFMono-Regular", monospace; font-size: .8rem; color: var(--es-accent); letter-spacing: .06em; }

/* ---------- security page ---------- */
.assurance-card { border-left: 4px solid var(--es-accent); background: #fff; border-radius: 0 10px 10px 0; }
.hash-chip {
  font-family: Consolas, "SFMono-Regular", monospace; font-size: .82rem;
  background: var(--es-navy-deep); color: var(--es-blue-mist);
  border-radius: 6px; padding: .25rem .6rem; display: inline-block;
}

/* ---------- pricing ---------- */
.price-card { border: 1px solid var(--es-line); border-radius: 14px; background: #fff; height: 100%; }
.price-card .card-header { background: transparent; border-bottom: 1px solid var(--es-line); padding: 1.5rem 1.5rem 1.1rem; }
.price-card.featured { border: 2px solid var(--es-accent); box-shadow: 0 18px 44px rgba(46, 134, 222, .16); position: relative; }
.price-card .check { color: var(--es-accent); flex: none; }
.badge-popular {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--es-accent); color: #fff; font-size: .75rem; font-weight: 700;
  letter-spacing: .08em; padding: .3rem .9rem; border-radius: 999px; text-transform: uppercase;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: linear-gradient(135deg, var(--es-navy) 0%, var(--es-navy-deep) 100%);
  color: #fff; border-radius: 18px; position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band .motif { position: absolute; right: -40px; bottom: -90px; width: 320px; opacity: .15; }

/* ---------- forms ---------- */
.form-control, .form-select { border-color: var(--es-line); padding: .65rem .9rem; }
.form-control:focus, .form-select:focus {
  border-color: var(--es-accent); box-shadow: 0 0 0 .2rem rgba(46, 134, 222, .18);
}

/* ---------- footer ---------- */
.footer-es { background: var(--es-black); color: #93A5B8; font-size: .95rem; }
.footer-es a { color: #C2D2E2; text-decoration: none; }
.footer-es a:hover { color: #fff; }
.footer-es h6 { color: #fff; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-es .footer-top { border-bottom: 1px solid #1C2733; }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(160deg, var(--es-navy) 0%, var(--es-navy-deep) 100%);
  color: #fff; padding: 8.5rem 0 4rem;
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: #C7D8E8; }

/* ---------- legal prose ---------- */
.prose-legal h2 { font-size: 1.35rem; margin-top: 2.2rem; }
.prose-legal p, .prose-legal li { color: #3C4C60; }

/* ---------- misc ---------- */
.icon-blip { width: 40px; height: 40px; border-radius: 9px; background: var(--es-blue-soft); color: var(--es-accent); display: flex; align-items: center; justify-content: center; flex: none; }
.kpi { font-size: 2.4rem; font-weight: 700; color: var(--es-navy); line-height: 1; }
@media (max-width: 575.98px) { .hero { padding-top: 7.5rem; } }