/* =====================================================================
   CardLink Pro v1.5 — Homepage content sections (hs- namespace)
   Loaded by includes/home_sections.php on the public portal home.
   Theme-aware: uses the portal CSS variables set by includes/themes.php
   (v1.5 adds glass presets — translucent surfaces come from the theme
   block, nothing hard-coded here). Mobile-first, no blue/indigo, no emoji.
   ===================================================================== */

/* ---------- accessibility helpers ---------- */
.hs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- shared section chrome ---------- */
.hs-section{padding:44px 0;border-top:1px solid var(--border)}
.hs-section-alt{background:var(--surface)}
.hs-title{display:flex;align-items:center;gap:10px;font-size:1.45rem;margin:0 0 6px;color:var(--text)}
.hs-title i{color:var(--primary)}
.hs-sub{color:var(--muted);margin:0 0 24px;font-size:.95rem}
.hs-grid{display:grid;gap:16px}
.hs-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 10px rgba(2,8,20,.04)}
.hs-section-alt .hs-card{background:var(--bg)}

/* ---------- 1. stats band ---------- */
.hs-band{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hs-stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:22px 0}
.hs-stat{display:flex;align-items:center;gap:12px;justify-content:center;padding:8px 6px}
.hs-stat-icon{width:48px;height:48px;border-radius:13px;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.hs-stat-body{display:flex;flex-direction:column;line-height:1.25}
.hs-stat-num{font-size:1.4rem;font-weight:800;color:var(--text)}
.hs-stat-label{color:var(--muted);font-size:.82rem;font-weight:600}
@media (min-width:721px){
  .hs-stats-grid{grid-template-columns:repeat(4,1fr)}
}

/* ---------- 2. how it works ---------- */
.hs-grid-how{grid-template-columns:1fr;gap:18px}
.hs-how-card{position:relative;padding:22px 18px 18px;text-align:center;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}
.hs-how-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(2,8,20,.08)}
.hs-how-num{position:absolute;top:8px;right:14px;font-size:2.1rem;font-weight:800;line-height:1;color:var(--primary-soft)}
.hs-how-icon{width:56px;height:56px;margin:0 auto 12px;border-radius:50%;background:var(--primary-soft);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:1.35rem}
.hs-how-icon i{font-size:1.35rem}
.hs-how-name{font-size:1.02rem;margin:0 0 6px}
.hs-how-desc{color:var(--muted);font-size:.9rem;margin:0}
@media (min-width:561px){ .hs-grid-how{grid-template-columns:repeat(2,1fr)} }
@media (min-width:901px){ .hs-grid-how{grid-template-columns:repeat(4,1fr)} }

/* ---------- 3. why choose us ---------- */
.hs-grid-why{grid-template-columns:1fr}
.hs-why-card{padding:20px}
.hs-why-icon{width:46px;height:46px;border-radius:13px;background:var(--primary-soft);color:var(--primary-dark);display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:10px}
.hs-why-name{font-size:1rem;margin:0 0 5px}
.hs-why-desc{color:var(--muted);font-size:.9rem;margin:0}
@media (min-width:561px){ .hs-grid-why{grid-template-columns:repeat(2,1fr)} }
@media (min-width:901px){ .hs-grid-why{grid-template-columns:repeat(3,1fr)} }

/* ---------- 4. testimonials (slider layout: v1.4 block below) ---------- */
.hs-tst{margin:0;padding:20px;display:flex;flex-direction:column;gap:10px;transition:transform .18s ease,box-shadow .18s ease}
.hs-tst:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(2,8,20,.08)}
.hs-stars{display:inline-flex;gap:2px}
.hs-star{color:#f59e0b;font-size:.85rem}
.hs-star-off{color:var(--muted);opacity:.45}
.hs-tst-quote{margin:0;color:var(--text);font-size:.94rem;line-height:1.65}
.hs-tst-person{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:4px}
.hs-tst-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--primary-soft);flex-shrink:0}
.hs-tst-avatar-txt{display:inline-flex;align-items:center;justify-content:center;background:var(--primary-soft);color:var(--primary-dark);font-weight:800;font-size:.9rem;letter-spacing:.5px}
.hs-tst-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.hs-tst-name{color:var(--text);font-size:.93rem}
.hs-tst-role{color:var(--muted);font-size:.8rem}

/* ---------- 5. FAQ accordion (native details/summary) ---------- */
.hs-faq{display:grid;gap:10px;max-width:820px}
.hs-faq-item{border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden}
.hs-section-alt .hs-faq-item{background:var(--bg)}
.hs-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-weight:600;font-size:.97rem;color:var(--text);transition:color .15s ease}
.hs-faq-item summary::-webkit-details-marker{display:none}
.hs-faq-item summary:hover{color:var(--primary)}
.hs-faq-q{flex:1;min-width:0}
.hs-faq-chev{color:var(--muted);flex-shrink:0;transition:transform .18s ease}
.hs-faq-item[open] summary{color:var(--primary);border-bottom:1px dashed var(--border)}
.hs-faq-item[open] .hs-faq-chev{transform:rotate(180deg)}
.hs-faq-body{padding:13px 16px 15px;color:var(--text);font-size:.93rem;line-height:1.65}

/* ---------- 6. final CTA band ---------- */
.hs-cta{border-top:1px solid var(--border);background:linear-gradient(135deg,var(--primary),var(--primary-dark));padding:50px 0;text-align:center}
.hs-cta-title{color:#fff;font-size:1.55rem;margin:0 0 8px}
.hs-cta-sub{color:rgba(255,255,255,.88);margin:0 0 24px;font-size:.98rem}
.hs-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hs-cta .hs-cta-btn{border:0}
.hs-cta .hs-cta-btn.btn-primary{background:#fff;color:var(--primary-dark)}
.hs-cta .hs-cta-btn.btn-primary:hover{background:rgba(255,255,255,.9);color:var(--primary-dark)}
.hs-cta .hs-cta-btn.btn-outline{border:1px solid rgba(255,255,255,.65);color:#fff;background:transparent}
.hs-cta .hs-cta-btn.btn-outline:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .hs-how-card,.hs-tst,.hs-faq-item summary,.hs-faq-chev{transition:none!important}
  .hs-how-card:hover,.hs-tst:hover{transform:none}
}

/* =====================================================================
   v1.4 — testimonials slider (hs-sw-*)
   Dependency-free, 3 layers:
   1. No JS      -> .hs-sw-viewport is a native scroll-snap carousel.
   2. JS active  -> home.js adds .hs-sw-ready: overflow hidden, the track
                    is moved with transform + .4s transition.
   3. All fit    -> home.js adds .hs-sw-static to .hs-sw-nav (hidden)
                    and keeps the plain flex row (no drag, no nav).
   Breakpoints mirror the old grid: 1 slide <701px, 2 >=701px, 3 >=1061px.
   ===================================================================== */
.hs-sw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;margin-bottom:24px}
.hs-sw-head .hs-sub{margin-bottom:0}
.hs-sw-nav{display:flex;gap:8px;margin-left:auto}
.hs-sw-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;padding:0;transition:border-color .15s ease,color .15s ease,opacity .15s ease}
.hs-sw-btn:hover{border-color:var(--primary);color:var(--primary)}
.hs-sw-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.hs-sw-btn:disabled{opacity:.35;cursor:default}
.hs-sw-btn:disabled:hover{border-color:var(--border);color:var(--text)}
.hs-sw-nav.hs-sw-static{display:none}

/* fallback: native horizontal scroll + snap (also the pre-JS paint) */
.hs-sw-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y}
.hs-sw-viewport::-webkit-scrollbar{display:none}
.hs-sw-viewport:focus-visible{outline:2px solid var(--primary);outline-offset:4px;border-radius:4px}
.hs-sw-track{display:flex;gap:16px}
.hs-sw-slide{flex:0 0 100%;scroll-snap-align:start}
@media (min-width:701px){ .hs-sw-slide{flex-basis:calc(50% - 8px)} }
@media (min-width:1061px){ .hs-sw-slide{flex-basis:calc(33.333% - 11px)} }

/* JS mode: transform-driven track */
.hs-swiper.hs-sw-ready .hs-sw-viewport{overflow:hidden;scroll-snap-type:none;cursor:grab}
.hs-swiper.hs-sw-ready .hs-sw-track{transition:transform .4s cubic-bezier(.22,.61,.36,1);will-change:transform}
.hs-swiper.hs-sw-ready.hs-sw-dragging .hs-sw-viewport{cursor:grabbing}
.hs-swiper.hs-sw-ready.hs-sw-dragging .hs-sw-track{transition:none}
.hs-swiper.hs-sw-ready.hs-sw-dragging{-webkit-user-select:none;user-select:none}

@media (prefers-reduced-motion: reduce){
  .hs-swiper.hs-sw-ready .hs-sw-track{transition:none!important}
}

/* =====================================================================
   v1.4 — social marquee band (hs-mq-*)
   Endless platform-name loop that replaced the stats band. TWO identical
   groups produce a seamless -50% loop; the pure-CSS keyframe animation
   is the NO-JS fallback. Hover / keyboard focus pauses the motion.
   v1.5 — JS-driven mode: OS-level "reduce motion" settings (Android
   battery saver, Windows animation effects, iOS Reduce Motion) silently
   freeze CSS keyframes, which is why the band looked stopped for many
   users. When home.js runs it adds .hs-mq-js below and scrolls the
   track itself with requestAnimationFrame — which keeps the marquee
   running on EVERY device, regardless of the OS setting.
   Theme vars only — no blue/indigo, no emoji.
   ===================================================================== */
.hs-mq-band{padding:0}
.hs-marquee{overflow:hidden;padding:16px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hs-mq-track{display:flex;width:max-content;animation:hs-mq-scroll 42s linear infinite;will-change:transform}
.hs-marquee:hover .hs-mq-track,.hs-marquee:focus-within .hs-mq-track{animation-play-state:paused}
@keyframes hs-mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hs-mq-group{display:flex;align-items:center;flex-shrink:0;gap:12px;padding-right:12px}
.hs-mq-item{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-weight:600;font-size:.88rem;white-space:nowrap}
.hs-mq-item i{color:var(--primary);font-size:1rem}

/* reduced motion: for the NO-JS fallback show a static wrapped pill list
   instead of the moving band. With JS active (.hs-mq-js) home.js owns the
   track — it keeps scrolling (the marquee is the requested behaviour and
   rAF is not affected by the OS setting), so those overrides must NOT hit
   the JS-driven track. */
@media (prefers-reduced-motion: reduce){
  .hs-marquee:not(.hs-mq-js) .hs-mq-track{animation:none;flex-wrap:wrap;width:auto}
  .hs-marquee:not(.hs-mq-js) .hs-mq-group[aria-hidden="true"]{display:none}
}

/* =====================================================================
   v1.5 — JS-driven marquee mode (added by assets/js/home.js)
   home.js adds .hs-mq-js to .hs-marquee and moves the track with
   translate3d every animation frame (speed = one group width / 42s,
   identical to the CSS loop). This overrides the keyframe animation
   and keeps the band endlessly running on every device; hover and
   keyboard focus still pause it, exactly like the CSS version.
   ===================================================================== */
.hs-marquee.hs-mq-js .hs-mq-track{animation:none;will-change:transform}