/* Homepage only */

/* Homepage hero image only */
.home-hero{ --hero-bg: url('/assets/img/sa-web-background.png') }

/* Stat card in hero */
.stat-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 10px 24px rgba(0,0,0,.06); display:grid; gap:10px }
.stat{ display:flex; gap:10px; align-items:baseline; color:var(--gray-dark) }
.stat span{ font-size:1.6rem; font-weight:800; color:var(--red) }

/* Feature cards */
.feature-grid .feature{ text-align:left; background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px }
.feature__icon{ font-size:1.4rem; line-height:1; margin-bottom:6px }
.feature p{ color:var(--gray-dark) }

/* Security split */
.security{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center }
.security__copy .check-list{ list-style:none; padding:0; margin:12px 0 18px }
.security__copy .check-list li{ margin:8px 0; padding-left:18px; position:relative }
.security__copy .check-list li::before{ content:"•"; position:absolute; left:0; color:var(--red); font-weight:900 }
.security__panel{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start }
.badge{ background:#fff; border:2px solid var(--red); color:var(--red); border-radius:999px; padding:8px 12px; font-weight:800; font-size:.9rem }
.badge--alt{ border-color:var(--orange); color:var(--orange) }
@media (max-width:900px){ .security{ grid-template-columns:1fr } }

/* Steps */
.steps{ counter-reset:step; display:grid; gap:14px; grid-template-columns:repeat(4,1fr); list-style:none; padding:0; margin:0 }
.steps li{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px }
.steps li h4{ margin:0 0 6px 0; font-size:1.05rem }
.steps li p{ color:var(--gray-dark); margin:0 }
.steps li::before{ counter-increment:step; content:counter(step); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; margin-bottom:8px; background:var(--red); color:#fff; font-weight:800 }
@media (max-width:1024px){ .steps{ grid-template-columns:1fr 1fr } }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }

/* Final call-to-action block */
.section--cta .cta{ text-align:center }
.section--cta .cta h2{ margin:0 0 6px 0; font-size:2rem }
.section--cta .cta .lead{ color:var(--gray-dark); margin-bottom:12px }
.cta__buttons{ display:inline-flex; gap:12px; flex-wrap:wrap }
@media (max-width:980px){ .hero--enhanced .stat-card{ max-width:100% } }
/* Hero stat card — right align + shrink-wrap */
.hero__art{
  justify-self: end;            /* push the card to the right side */
}

.hero__art .stat-card{
  display: inline-grid;         /* shrink to content */
  gap: 10px;
  padding: 16px 18px;
  inline-size: fit-content;     /* modern shrink-to-fit */
  max-inline-size: 520px;       /* safety cap */
  margin-inline-start: auto;    /* extra nudge to the right if needed */
}

/* On small screens let it span naturally */
@media (max-width: 980px){
  .hero__art{ justify-self: start; }
  .hero__art .stat-card{
    display: grid;
    inline-size: auto;
    max-inline-size: 100%;
    margin-inline-start: 0;
  }
}
/* === Home page CTA alignment (non-hero) === */

/* Core Services: the "See all services" wrapper */
.section__cta{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;          /* space from content above */
}

/* If you ever drop multiple buttons in .section__cta */
.section__cta .btn + .btn{ margin-left:12px; }

/* Security section: center the single button only (don't affect headings/text) */
.security__copy .btn{
  display:block;            /* allow auto margins to center */
  width:max-content;
  margin:14px auto 0;       /* space above + centered */
}