/* =========================================================
   CapScaleTech — shared site styles
   Loaded on every page, on top of Bootstrap 5 + Bootstrap Icons.
   ========================================================= */

:root {
  --navy: #004d75;
  --navy-deep: #00324d;
  --sky: #86bbd8;
  --gold: #fcbf49;
  --sun: #f4d35e;
  --orange: #f77f00;
  --cream: #fffdf7;
  --ink: #17324a;
}

* { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; }

body { color: var(--ink); background: var(--cream); }
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; }

a { text-decoration: none; }

section { scroll-margin-top: 88px; }

/* ---------- Nav ---------- */
/* Transparent + overlaying the hero by default; solid white once the page is scrolled. */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: transparent;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
}
.navbar-brand { font-weight: 800; letter-spacing: -0.01em; color: #fff; transition: color 0.3s ease; }
.navbar-brand span { color: var(--sun); transition: color 0.3s ease; }
.nav-link { font-weight: 600; color: rgba(255, 255, 255, 0.92); transition: color 0.3s ease; }
.nav-link:hover { color: var(--sun); }

.navbar.navbar-scrolled {
  background: rgba(255, 253, 247, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 30, 50, 0.1);
}
.navbar.navbar-scrolled .navbar-brand { color: var(--navy); }
.navbar.navbar-scrolled .navbar-brand span { color: var(--orange); }
.navbar.navbar-scrolled .nav-link { color: var(--ink); }
.navbar.navbar-scrolled .nav-link:hover { color: var(--orange); }

.navbar-toggler { border: 0; padding: 0.25rem; line-height: 1; }
.navbar-toggler:focus { box-shadow: none; outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; border-radius: 4px; }
.navbar-toggler i { color: #fff; font-size: 1.6rem; transition: color 0.3s ease; }
.navbar.navbar-scrolled .navbar-toggler i { color: var(--navy); }
.navbar.navbar-scrolled .navbar-toggler:focus { outline-color: var(--navy); }

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: #fffdf7;
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  }
  .navbar-collapse .nav-link { color: var(--ink) !important; }
  .navbar-collapse .nav-link:hover { color: var(--orange) !important; }
}

.btn-sunrise {
  background: linear-gradient(90deg, var(--orange), var(--gold));
  border: none;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(247, 127, 0, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-sunrise:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); box-shadow: 0 14px 28px rgba(247, 127, 0, 0.4); }

.btn-outline-navy {
  border: 2px solid var(--navy);
  color: var(--navy);
  font-weight: 700;
  background: transparent;
  transition: all 0.15s ease;
}
.btn-outline-navy:hover { background: var(--navy); color: #fff; transform: translateY(-1px); }

.btn-white-navy {
  background: #fff;
  color: var(--navy);
  font-weight: 700;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-white-navy:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

/* ---------- Hero (homepage) ---------- */
.hero {
  background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 32%, #2f7fa3 55%, var(--sky) 76%, var(--sun) 100%);
  color: #fff;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 6.5rem 0 3rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -160px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 70%);
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -160px;
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, var(--sun) 0%, rgba(244, 211, 94, 0) 70%);
  transform: translateX(-50%);
  opacity: 0.8;
}
.hero .badge-pill {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hero h1 { font-weight: 800; line-height: 1.12; font-size: clamp(2.2rem, 4.4vw, 3.3rem); }
.hero .lead { color: rgba(255, 255, 255, 0.92); font-size: 1.15rem; }
.hero-fineprint { color: rgba(255,255,255,0.78); }

/* ---------- Page hero (privacy / terms / 404) ---------- */
.page-hero {
  background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 45%, #2f7fa3 100%);
  color: #fff;
  padding: 9.5rem 0 3.5rem;
  position: relative;
  overflow: hidden;
}
.page-hero h1 { font-weight: 800; }
.page-hero .lead { color: rgba(255, 255, 255, 0.85); }
.page-hero .updated-pill {
  display: inline-block;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.error-page.page-hero { min-height: 80vh; display: flex; align-items: center; }
.error-page .code { font-size: 5.5rem; font-weight: 800; color: var(--sun); line-height: 1; }

/* Legal document body copy (privacy / terms) */
.legal-content { max-width: 780px; margin: 0 auto; }
.legal-content h2 { margin-top: 2.5rem; margin-bottom: 0.75rem; font-size: 1.35rem; color: var(--navy); }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; font-size: 1.05rem; color: var(--navy); }
.legal-content p, .legal-content li { color: var(--ink); line-height: 1.7; }
.legal-content ul, .legal-content ol { padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content .callout {
  background: rgba(247, 127, 0, 0.08);
  border: 1px solid rgba(247, 127, 0, 0.25);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
}
.legal-content .pull-stat {
  background: var(--navy-deep);
  color: #fff;
  border-radius: 1rem;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.legal-content .pull-stat .big { font-size: 2.2rem; font-weight: 800; color: var(--sun); line-height: 1; }
.legal-content .pull-stat p { color: rgba(255,255,255,0.85); margin: 0.4rem 0 0; }
.legal-content .sources { font-size: 0.85rem; color: #6c757d; }
.legal-content .sources li { margin-bottom: 0.35rem; }

/* ---------- Blog ---------- */
.blog-meta { color: var(--ink); opacity: 0.65; font-size: 0.88rem; }
.blog-card {
  border: 1px solid rgba(0, 77, 117, 0.1);
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 77, 117, 0.12); }
.blog-card-thumb {
  height: 160px;
  background: linear-gradient(150deg, var(--navy-deep), var(--navy) 60%, #2f7fa3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.blog-card-thumb i { color: rgba(255,255,255,0.85); font-size: 2.2rem; }
.blog-card-tag {
  background: rgba(247,127,0,0.1);
  color: var(--orange);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  display: inline-block;
}

/* Phone / live-call demo card (homepage) */
.phone-card {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 30px 70px rgba(0, 30, 50, 0.4);
  color: var(--navy);
  overflow: hidden;
}
.phone-card .call-header {
  background: var(--navy-deep);
  color: #fff;
  padding: 1rem 1.25rem;
}
.call-status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: background 0.3s ease, color 0.3s ease;
}
.call-status-badge.ringing { background: rgba(255,255,255,0.18); color: #fff; }
.call-status-badge.live { background: #2ecc8f; color: #06301f; }
.call-status-badge.booked { background: var(--sun); color: var(--navy-deep); }

.waveform { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.waveform span {
  width: 5px;
  background: var(--orange);
  border-radius: 3px;
  animation: wave 1.2s ease-in-out infinite;
  height: 10px;
}
.waveform.is-active span { animation-play-state: running; }
.waveform:not(.is-active) span { animation-play-state: paused; height: 6px !important; opacity: 0.4; }
.waveform span:nth-child(2) { animation-delay: 0.1s; background: var(--gold); }
.waveform span:nth-child(3) { animation-delay: 0.2s; background: var(--sun); }
.waveform span:nth-child(4) { animation-delay: 0.3s; background: var(--gold); }
.waveform span:nth-child(5) { animation-delay: 0.4s; background: var(--orange); }
@keyframes wave { 0%, 100% { height: 10px; } 50% { height: 36px; } }

.call-transcript-line { min-height: 3.2em; transition: opacity 0.2s ease; }
.call-footer-row { min-height: 1.4em; }

@media (prefers-reduced-motion: reduce) {
  .waveform span { animation: none !important; height: 20px !important; opacity: 1 !important; }
}

.section-eyebrow {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---------- Stat strip ---------- */
.stat-strip { background: var(--navy-deep); color: #fff; }
.stat-strip .stat-num { font-weight: 800; font-size: 2.15rem; color: var(--sun); }

.icon-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--sun), var(--orange));
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.feature-card, .industry-card, .step-card, .price-card, .testimonial-card, .stat-card {
  border: 1px solid rgba(0, 77, 117, 0.1);
  border-radius: 1rem;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}
.feature-card:hover, .industry-card:hover, .stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 77, 117, 0.12);
}

.stat-card .num { font-weight: 800; font-size: 2.4rem; color: var(--orange); line-height: 1; }
.stat-card .note { font-size: 0.72rem; color: #94a3b8; }

.step-num {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
}

.price-card.featured {
  border: 2px solid var(--orange);
  box-shadow: 0 20px 40px rgba(247, 127, 0, 0.15);
  transform: scale(1.03);
}
.price-card .price { font-weight: 800; color: var(--navy); }
.price-card .price small { font-size: 1rem; font-weight: 600; color: #6c757d; }

.billing-switch { display: inline-flex; align-items: center; gap: 0.75rem; }
.billing-switch .form-check-input { width: 3em; height: 1.6em; cursor: pointer; }
.billing-switch .form-check-input:checked { background-color: var(--orange); border-color: var(--orange); }
.save-pill { background: #dcfce7; color: #15803d; font-weight: 700; font-size: 0.75rem; padding: 0.25rem 0.6rem; border-radius: 999px; }

.testimonial-card .stars { color: var(--orange); }

.accordion-button:not(.collapsed) {
  background: rgba(247, 127, 0, 0.08);
  color: var(--navy);
  box-shadow: none;
}
.accordion-button:focus { box-shadow: none; border-color: rgba(247,127,0,0.3); }

.cta-band {
  background: linear-gradient(120deg, var(--navy-deep), var(--navy) 55%, #0d6a99);
  color: #fff;
  border-radius: 1.5rem;
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute;
  right: -80px; bottom: -100px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--sun) 0%, rgba(244,211,94,0) 70%);
  opacity: 0.5;
}

footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.85); }
footer a { color: #fff; }
footer a:hover { color: var(--sun); }

.badge-soft { background: rgba(134, 187, 216, 0.2); color: var(--navy); font-weight: 600; }

.placeholder-flag { color: #b45309; font-weight: 600; }