/* ════════════════════════════════════════════════════════════
   Sterling Tax Expert — UI polish layer  (additive, loads last)
   Interactive hovers, animated-stat band, focus states, mobile.
   Builds on the existing design tokens. Nothing here is required
   for the site to work — this file can be removed with no breakage.
   ════════════════════════════════════════════════════════════ */

/* ── Card hover micro-lift (radiused cards) ─────────────────── */
.why-card,.hsvc,.tool-card,.bc,.dl-c,.kpi,.hp-audience-tile{
  transition:transform .28s var(--ease,cubic-bezier(.16,1,.3,1)),
             box-shadow .28s ease, border-color .2s ease, background .2s ease;
}
.why-card:hover,.hsvc:hover,.tool-card:hover,.bc:hover,.dl-c:hover,
.kpi:hover,.hp-audience-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lg,0 12px 40px rgba(11,30,61,.12));
}

/* Testimonial cards sit on the navy band — give them a darker lift */
.tcard{transition:transform .28s var(--ease,cubic-bezier(.16,1,.3,1)),
                  box-shadow .28s ease, border-color .2s ease, background .2s ease}
.tcard:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  border-color:rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
}

/* Full-bleed homepage panels: subtle depth without breaking grid seams */
.hp-trust-item,.hp-step{
  transition:background .25s ease, box-shadow .25s ease;
}
.hp-trust-item:hover,.hp-step:hover{
  box-shadow:inset 0 0 0 1px var(--br), 0 10px 30px rgba(11,30,61,.07);
}

/* Icon pop when its card is hovered */
.why-ic,.hsvc-ic,.trust-ic{transition:transform .28s var(--ease,cubic-bezier(.16,1,.3,1))}
.why-card:hover .why-ic,.hsvc:hover .hsvc-ic{transform:translateY(-2px) scale(1.08)}

/* ── Buttons: lift + glow on hover ──────────────────────────── */
.btn{transition:transform .15s var(--ease,cubic-bezier(.16,1,.3,1)),
               background .15s ease, box-shadow .2s ease, border-color .15s ease}
.btn-indigo:hover,.btn-navy:hover,.btn-blue:hover,.btn-white:hover{transform:translateY(-1px)}
.btn-indigo:hover{box-shadow:0 8px 24px rgba(99,102,241,.32)}
.btn:active{transform:translateY(0)}
.pm-hero-ghost{transition:transform .15s var(--ease,cubic-bezier(.16,1,.3,1)),
                          background .2s ease, border-color .2s ease}
.pm-hero-ghost:hover{transform:translateY(-1px)}

/* ── Animated "at a glance" stats band (reuses .creds-strip) ── */
.stx-stats .cred-n{font-variant-numeric:tabular-nums}

/* ── Accessibility: clear keyboard focus ────────────────────── */
a:focus-visible,button:focus-visible,.btn:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--indigo);
  outline-offset:2px;
  border-radius:4px;
}

/* ── Mobile refinements ─────────────────────────────────────── */
@media (max-width:768px){
  .btn{min-height:42px}          /* comfortable tap target */
}
@media (max-width:600px){
  .stx-stats{padding:18px 14px}
  .stx-stats .cred-div{display:none}        /* drop vertical rules */
  .stx-stats .cred-item{flex:0 0 50%;padding:12px 8px;box-sizing:border-box}
  .stx-stats .cred-n{font-size:22px}
}

/* ── Respect reduced motion: no hover transforms ────────────── */
@media (prefers-reduced-motion: reduce){
  .why-card:hover,.hsvc:hover,.tool-card:hover,.bc:hover,.dl-c:hover,
  .kpi:hover,.hp-audience-tile:hover,.tcard:hover,
  .btn-indigo:hover,.btn-navy:hover,.btn-blue:hover,.btn-white:hover,
  .pm-hero-ghost:hover,
  .why-card:hover .why-ic,.hsvc:hover .hsvc-ic{transform:none}
}