/* ===========================
   EPRO Recovery – Bootstrap 5 Overrides
   =========================== */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;500;600&display=swap');

:root {
  --epro-blue: #5b8fc9;
  --epro-green: #2d6a3f;
  --epro-green-mid: #3a7d4f;
  --epro-logo-blue: #4a7db5;
  --epro-gray-section: #f2f2f2;
  --epro-footer-bg: #232323;
}

body { font-family: 'Open Sans', sans-serif; }

/* ── LOGO ── */
.epro-logo { text-decoration: none; line-height: 1; }
.epro-logo .logo-epro {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--epro-logo-blue);
  display: block;
  letter-spacing: -0.5px;
}
.epro-logo .logo-sub {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--epro-green);
  letter-spacing: 1.5px;
  text-transform: lowercase;
  display: block;
  margin-top: -3px;
}

/* ── NAV ── */
.navbar { box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.navbar-nav .nav-link { color: #2c2c2c !important; font-weight: 500; font-size: 0.95rem; }
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active { color: var(--epro-logo-blue) !important; }
.btn-signin {
  background: var(--epro-green); color: white !important;
  border-radius: 50px; padding: 8px 24px !important;
  font-weight: 600; font-size: 0.9rem; transition: background 0.2s;
}
.btn-signin:hover { background: var(--epro-green-mid); }

/* ── BUTTONS ── */
.btn-epro {
  background: var(--epro-green); color: white;
  border-radius: 50px; padding: 10px 28px;
  font-size: 0.9rem; font-weight: 700; border: none;
  text-decoration: none; display: inline-block;
  transition: background 0.2s, transform 0.15s;
}
.btn-epro:hover { background: var(--epro-green-mid); color: white; transform: translateY(-1px); }

/* ── HERO ── */
.epro-hero { background: var(--epro-blue); padding: 64px 0 80px; }
.epro-hero h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700; color: white; line-height: 1.2;
}
.epro-hero h1 strong { font-weight: 800; }

/* ── PLACEHOLDERS (swap with <img> tags) ── */
.img-placeholder {
  background: rgba(255,255,255,0.15); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5); font-size: 0.8rem; min-height: 220px;
}
.img-placeholder.on-white {
  background: rgba(0,0,0,0.06); color: #aaa;
}
.img-placeholder.screen {
  background: #e0e0e0; color: #999;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-radius: 8px;
}

/* ── WAVE DIVIDERS ── */
.wave svg { display: block; width: 100%; line-height: 0; }

/* ── SECTION HEADINGS ── */
.section-heading { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 2rem; }

/* ── FEATURE CARDS ── */
.feature-card { text-align: center; }
.icon-circle {
  width: 80px; height: 80px;
  border: 2.5px solid var(--epro-green); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; color: var(--epro-green); font-size: 1.6rem;
}

/* ── HOW IT WORKS STEPS ── */
.steps-connector { position: relative; }
.steps-connector::before {
  content: '';
  position: absolute; top: 28px;
  left: calc(16.66% + 20px); right: calc(16.66% + 20px);
  height: 3px; background: var(--epro-green); z-index: 0;
}
.step-item { text-align: center; position: relative; z-index: 1; }
.step-num {
  width: 56px; height: 56px; background: var(--epro-green); color: white;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Nunito', sans-serif; font-size: 1.4rem; font-weight: 800;
  margin: 0 auto 16px;
}

/* ── PLATFORM FEATURES ── */
.platform-feature { display: flex; align-items: flex-start; gap: 14px; }
.feat-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  background: var(--epro-green); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; color: white;
}

/* ── CONTACT INPUTS ── */
.contact-input {
  border: none; border-radius: 8px; padding: 13px 16px;
  font-size: 0.95rem; width: 100%; font-family: 'Open Sans', sans-serif;
  outline: none; transition: box-shadow 0.2s;
}
.contact-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.4); }
.contact-input::placeholder { color: #aaa; }
textarea.contact-input { min-height: 140px; resize: vertical; }

/* ── FOOTER ── */
.epro-footer { background: var(--epro-footer-bg); padding: 40px 0; }
.epro-footer .logo-epro { color: var(--epro-logo-blue); }
.epro-footer .logo-sub  { color: #4caf70; }
.epro-footer .footer-link { color: #aaa; text-decoration: none; font-size: 0.9rem; }
.epro-footer .footer-link:hover { color: white; }

/* ── BG UTILITIES ── */
.bg-epro-blue { background-color: var(--epro-blue) !important; }
.bg-epro-gray { background-color: var(--epro-gray-section) !important; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .steps-connector::before { display: none; }
}