/* =============================================================
   ClckIndex — SHARED subpage styles.
   Linked by every standalone page (About, Services, …) AFTER
   style.css and BEFORE each page's own stylesheet.
   Owns the cross-page patterns so one edit updates all pages:
     · .page-hero  (dark indigo hero + breadcrumb)
     · .cta-band   (closing call-to-action)
   ============================================================= */

/* ---------- PAGE HERO (dark indigo, reuses .hero-bg orbs) ---------- */
.page-hero{
  background:linear-gradient(125deg,var(--primary) 0%,#1f2f8f 100%);
  color:#fff;position:relative;overflow:hidden;
  padding:132px 0 96px;text-align:center;
}
.page-hero .container{position:relative;z-index:2;}
.breadcrumb{
  font-size:13px;font-weight:600;color:#b7c0f5;margin:0 0 22px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.breadcrumb a{color:#b7c0f5;transition:color .25s var(--ease);}
.breadcrumb a:hover{color:#fff;}
.breadcrumb span{opacity:.5;}
.breadcrumb .here{color:var(--accent-2);}
.page-hero h1{color:#fff;font-size:50px;line-height:1.12;margin:0 auto 20px;max-width:840px;}
.page-hero .lead{color:#d6dcff;font-size:18px;max-width:640px;margin:0 auto;}
.page-hero .hero-stats{justify-content:center;margin-top:52px;}

/* ---------- DARK RESULTS / PROOF BAND (stats on indigo) ---------- */
.results{
  background:var(--dark);color:#fff;text-align:center;
  background-image:linear-gradient(115deg,rgba(13,16,36,.96),rgba(31,47,143,.86));
}
.results h2{color:#fff;}
.results .lead{color:#c7cdf5;max-width:560px;margin:0 auto 8px;font-size:17px;}
.results .hero-stats{justify-content:center;gap:64px;margin-top:44px;flex-wrap:wrap;}

/* ---------- CTA BAND (closing prompt) ---------- */
.cta-band{
  background:var(--dark);color:#fff;text-align:center;
  background-image:linear-gradient(115deg,rgba(13,16,36,.96),rgba(31,47,143,.86));
}
.cta-band h2{color:#fff;font-size:36px;max-width:640px;margin:0 auto 14px;}
.cta-band p{color:#c7cdf5;max-width:520px;margin:0 auto 32px;font-size:17px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .page-hero{padding:104px 0 72px;}
  .page-hero h1{font-size:40px;}
  .results .hero-stats{gap:40px;}
}
@media (max-width:767px){
  .page-hero{padding:88px 0 56px;}
  .page-hero h1{font-size:30px;}
  .page-hero .hero-stats{gap:24px;}
  .cta-band h2{font-size:26px;}
}