/* ============================================================
   Freedom and Success — homepage hero
   Full-width reddish gradient light rising from the bottom, the
   flat-red halo ring behind Karina (bg lines masked to sit BEHIND
   the circle), the swappable freedom motif and the entrance.
   ============================================================ */

.elementor-element-khero01 {
  position: relative;
  overflow: hidden;
  background-color: #131017 !important;
}


/* full-width reddish gradient light rising from the bottom edge */
.elementor-element-khero01::before {
  /* Elementor containers own .e-con::before for their background overlay
     (content: var(--background-overlay)), so force ours back on. */
  content: "" !important;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(165% 64% at 50% 96%, rgba(224, 49, 43, .72) 0%, rgba(224, 49, 43, .46) 24%, rgba(224, 49, 43, .18) 46%, rgba(224, 49, 43, 0) 64%),
    linear-gradient(to top, rgba(224, 49, 43, .55) 0%, rgba(224, 49, 43, .28) 10%, rgba(224, 49, 43, 0) 30%),
    radial-gradient(120% 95% at 8% 4%, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 55%);
}
.elementor-element-khero01::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(19, 16, 23, .85) 0%, rgba(19, 16, 23, 0) 20%);
}

/* ---------- motif engine (rides above the glow) ---------- */
.fas-fx {
  position: absolute;
  inset: 0;
  /* behind everything: the lines pass under the halo and under Karina */
  z-index: 0;
  will-change: transform;
  pointer-events: none;
  overflow: hidden;
}
.fas-contour-svg {
  /* promoted to its own layer so the drift composites instead of repainting */
  will-change: transform;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.fas-mote {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 6px 1px rgba(247, 244, 240, .28);
}
.fas-fx-birds .fas-bird {
  position: absolute;
  display: block;
  will-change: transform, opacity;
}

/* ---------- halo behind Karina ---------- */
.elementor-element-khero09 { position: relative; }
.fas-halo {
  will-change: transform;
  position: absolute;
  left: 50%;
  top: 44%;
  width: 104%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
}
.fas-halo svg { width: 100%; height: 100%; display: block; }
.elementor-element-khero09 > .elementor-widget-image { position: relative; z-index: 1; }

/* ---------- layering ---------- */
.elementor-element-khero01 > .e-con-inner,
.elementor-element-khero02 { position: relative; z-index: 2 !important; }
.elementor-element-khero03,
.elementor-element-khero09 { position: relative; z-index: 2 !important; }
.elementor-element-kstat01 { position: relative; z-index: 3 !important; }

/* ---------- entrance ---------- */
.fas-anim .elementor-element-khero04,
.fas-anim .elementor-element-khero05,
.fas-anim .elementor-element-kherobrand,
.fas-anim .elementor-element-khero06,
.fas-anim .elementor-element-kherocta,
.fas-anim .elementor-element-khero10,
.fas-anim .elementor-element-kstat02 { opacity: 0; }

/* ---------- buttons (both primary + secondary) ---------- */
.elementor-element-khero01 .elementor-button {
  transition: transform .45s cubic-bezier(.16, 1, .3, 1),
              box-shadow .45s cubic-bezier(.16, 1, .3, 1),
              background-color .3s ease;
}
.elementor-element-khero07 .elementor-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px -14px rgba(224, 49, 43, .75);
}
.elementor-element-khero11 .elementor-button:hover {
  transform: translateY(-2px);
  background-color: rgba(247, 244, 240, .16) !important;
}

/* ---------- preview switcher (only injected with ?compare=1) ---------- */
.fas-fx-switch {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 26, 30, .86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 244, 240, .14);
  border-radius: 100px;
  padding: 7px 8px 7px 14px;
  box-shadow: 0 12px 40px -12px rgba(0, 0, 0, .6);
  font-family: Archivo, sans-serif;
}
.fas-fx-switch .fas-fx-label {
  color: #8D8780;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  margin-right: 4px;
}
.fas-fx-switch button {
  cursor: pointer;
  border: 0;
  border-radius: 100px;
  padding: 8px 15px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  color: #EFEAE4;
  background: transparent;
  transition: background .2s, color .2s;
}
.fas-fx-switch button:hover { background: rgba(247, 244, 240, .08); }
.fas-fx-switch button.active { background: #E0312B; color: #fff; }

/* ---------- tablet (stacked hero) ---------- */
@media (max-width: 1024px) {
  .fas-halo { width: 440px; top: 46%; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
  .fas-fx { opacity: .8; }
  .fas-halo { width: 360px; top: 48%; }
  .elementor-element-khero01::before {
    background:
      radial-gradient(210% 46% at 50% 97%, rgba(224, 49, 43, .60) 0%, rgba(224, 49, 43, .34) 28%, rgba(224, 49, 43, 0) 60%),
      linear-gradient(to top, rgba(224, 49, 43, .48) 0%, rgba(224, 49, 43, 0) 26%),
      radial-gradient(120% 90% at 12% 6%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 60%);
  }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fas-anim .elementor-element-khero04,
  .fas-anim .elementor-element-khero05,
  .fas-anim .elementor-element-kherobrand,
  .fas-anim .elementor-element-khero06,
  .fas-anim .elementor-element-kherocta,
  .fas-anim .elementor-element-khero10,
  .fas-anim .elementor-element-kstat02 { opacity: 1; }
}

/* the hero image is animated on load and on scroll - keep it on its own layer */
.elementor-element-khero10 { will-change: transform; }