/* ===== shaheer.ceo STANDARDS BUNDLE — single source of truth =====
   Motion + buttons + back-to-top + keyboard focus. Loaded on EVERY page
   (hs-nav.css/js carries the navbar). Change here -> updates sitewide. */

/* ── Motion standard ── */

/* ============================================================
   shaheer.ceo MOTION STANDARD  (reuse on EVERY page)
   Entrance reveal = rise + fade · 0.6s · ease-out
   Hover = transform lift ~180ms · ease-out (specific props, never transition:all)
   Timing scale: micro 150ms · standard 250ms · entrance 600ms
   Easing: ease-out for entrances/hovers; linear ONLY for the marquee
   ============================================================ */
.elementor-618 .animated{
  animation-duration:0.6s !important;
  animation-timing-function:cubic-bezier(0.16,1,0.3,1) !important;
}
/* unify the flat fade-ins with a subtle upward rise */
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(16px); }
  to{   opacity:1; transform:translateY(0); }
}
/* respect users who ask for less motion (covers our custom effects too) */
@media (prefers-reduced-motion: reduce){
  .elementor-618 .animated{ animation:none !important; }
  .elementor-618 .elementor-invisible{ opacity:1 !important; }
  .hs-mq-track{ animation:none !important; }
  .hs-btn, .hs-hero-social a, .link-card, .dp-btn{ transition:none !important; }
}


/* ── Button standard (.hs-btn) ── */

/* ============================================================
   shaheer.ceo SITE-WIDE BUTTON STANDARD  (pill buttons)
   Reuse anywhere:
     <a class="hs-btn hs-btn-primary" href="...">Label</a>   (green fill, on any bg)
     <a class="hs-btn hs-btn-outline" href="...">Label</a>    (white outline, for DARK sections)
     <a class="hs-btn hs-btn-outline-dark" href="...">Label</a>(dark outline, for LIGHT sections)
     <a class="hs-btn hs-btn-dark" href="...">Label</a>        (dark fill, for LIGHT sections)
   Wrap a row in <div class="hs-hero-cta"> for spacing.
   ============================================================ */
.hs-btn{ display:inline-flex; align-items:center; justify-content:center;
  padding:14px 34px; border-radius:999px; border:2px solid transparent;
  font-family:'Roboto',sans-serif; font-size:16px; font-weight:600; letter-spacing:.2px;
  text-decoration:none; cursor:pointer; line-height:1.1;
  transition:transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.hs-btn-primary{ background:#82ff1f; color:#111111; box-shadow:0 8px 24px rgba(130,255,31,.28); }
.hs-btn-primary:hover{ background:#6fe614; transform:translateY(-2px); }
.hs-btn-outline{ background:transparent; color:#ffffff; border-color:rgba(255,255,255,.55); }
.hs-btn-outline:hover{ border-color:#82ff1f; color:#82ff1f; transform:translateY(-2px); }
.hs-btn-outline-dark{ background:transparent; color:#111111; border-color:rgba(17,17,17,.35); }
.hs-btn-outline-dark:hover{ border-color:#82ff1f; color:#111111; transform:translateY(-2px); }
.hs-btn-dark{ background:#111111; color:#ffffff; }
.hs-btn-dark:hover{ background:#000000; transform:translateY(-2px); }
.hs-hero-cta{ display:flex; flex-wrap:wrap; gap:16px; margin-top:8px; }


/* ── Back-to-top ── */

#ast-scroll-top{
  width:56px; height:56px; padding:0 !important;
  border-radius:50%;
  display:flex !important; align-items:center; justify-content:center;
  font-size:22px; line-height:1;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease, visibility .3s ease, transform .2s ease;
}
#ast-scroll-top.hs-show{ opacity:1; visibility:visible; pointer-events:auto; }
#ast-scroll-top .ast-icon,
#ast-scroll-top .ast-icon.icon-arrow{
  display:flex; align-items:center; justify-content:center;
  margin:0; padding:0; line-height:0; width:auto; height:auto;
}
#ast-scroll-top .ast-icon svg,
#ast-scroll-top .ast-icon.icon-arrow svg{
  width:1em; height:1em; display:block; vertical-align:middle;
  fill:#000000; color:#000000;
}


/* ── A11y standard: visible keyboard focus (brand green), mouse stays clean ──
   Links/buttons/cards get the outline ring. Form controls are EXCLUDED here:
   they carry their own focus design (below) — one indicator, never stacked. */
.hs-card-clickable:focus-visible,
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #82ff1f !important;
  outline-offset:3px;
  border-radius:6px;
}

/* ── Form-control focus STANDARD (sitewide): green border + soft glow.
   Replaces the generic outline AND the theme's dotted-border focus quirk. */
input:focus, select:focus, textarea:focus,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none !important;
  border-color:#82ff1f !important;
  border-style:solid !important;
  box-shadow:0 0 0 4px rgba(130,255,31,.16) !important;
}

/* accordion: keep the +/x marker rotated while the close animation runs */
details[data-closing] > summary::after{ transform:rotate(45deg); }