/* =====================================================================
   Kopou v2 — Inner page heroes: "Satin" (Advertisers + Traffic Partners) and "Echo" (About Us)
   v2 · 30 Oct 2026 (adds Echo + header spacer rule; Satin unchanged). Upload to /wp-content/uploads/kopou-ihero/
   Loaded sitewide from the header; every rule is scoped to .kp-ihero,
   except section 7 (the Home "Grow." gradient fix).
   ===================================================================== */

/* ---------- 1. Section (about 85% of the screen) ---------- */
body .kp-ihero {
  --kp-mint: #53E6D4;
  --kp-head: 'Switzer', 'Inter Tight', system-ui, sans-serif;
  --kp-body: 'Quicksand', system-ui, sans-serif;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 85vh;
  min-height: 85svh;
  margin: 0 !important;
  padding: 128px 24px 112px !important;   /* bottom clears the next white sheet (it rises 40 px) */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(180deg, #1B1552 0%, #3A2AB8 48%, #6B55F0 100%);  /* shows until the satin draws, and without WebGL */
  color: #FFFFFF;
  text-align: center;
}
/* soft veil behind the copy, above the satin */
body .kp-ihero::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: min(1060px, 110%);
  height: 560px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(20, 14, 64, .38), rgba(20, 14, 64, 0));
  pointer-events: none;
}

/* ---------- 2. The satin (HTML widget) ---------- */
.kp-ihero .kp-ihero__media {
  position: absolute !important;
  inset: 0;
  z-index: 0;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  pointer-events: none;
}
/* Elementor wraps the HTML widget in its own boxes: make every wrapper fill the hero */
.kp-ihero .kp-ihero__media > :not(.kp-satin):not(script),
.kp-ihero .kp-ihero__media .elementor-element,
.kp-ihero .kp-ihero__media .elementor-widget,
.kp-ihero .kp-ihero__media .elementor-widget-container,
.kp-ihero .kp-ihero__media .e-con,
.kp-ihero .kp-ihero__media .e-con-inner {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.kp-ihero .kp-satin { position: absolute; inset: 0; }
.kp-ihero .kp-satin__cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.kp-ihero .kp-satin.is-fallback .kp-satin__cv { display: none; }

/* ---------- 3. Copy ---------- */
.kp-ihero .kp-ihero__content {
  position: relative !important;
  z-index: 2;
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.kp-ihero .kp-ihero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  margin: 0;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  font-family: var(--kp-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #F1EEFF;
}
.kp-ihero .kp-ihero__eyebrow::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--kp-mint);
  box-shadow: 0 0 10px var(--kp-mint);
}
.kp-ihero .kp-ihero__title {
  margin: 24px 0 0;
  font-family: var(--kp-head);
  font-weight: 700;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .98;
  letter-spacing: -.045em;
  color: #FFFFFF;
  text-shadow: 0 4px 30px rgba(15, 20, 23, .45);
}
/* second line: Elementor drops classes on spans inside headings, so target the span itself */
.kp-ihero .kp-ihero__title span,
.kp-ihero .kp-ihero__title em {
  font-style: normal;
  background: linear-gradient(92deg, #E7E1FF 0%, #B9A9FF 45%, #7FF2E2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  padding-right: .04em;
}
.kp-ihero .kp-ihero__lede {
  margin: 26px 0 0;
  max-width: 600px;
  font-family: var(--kp-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 18px rgba(15, 20, 23, .6);
}
.kp-ihero .kp-ihero__actions {
  margin: 34px 0 0 !important;
  padding: 0 !important;
  width: auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.kp-ihero .kp-ihero__actions .kp-btn--primary,
.kp-ihero .kp-ihero__actions .kp-btn--primary * { font-family: var(--kp-body) !important; font-weight: 600 !important; }
.kp-ihero .kp-ihero__actions .kp-btn--primary {
  box-shadow: 0 12px 34px rgba(20, 14, 64, .45), inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------- 4. Load-in ---------- */
@keyframes kpIheroRise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.kp-ihero .kp-ihero__content > * { animation: kpIheroRise .9s cubic-bezier(.2, .7, .2, 1) both; }
.kp-ihero .kp-ihero__content > :nth-child(1) { animation-delay: .25s; }
.kp-ihero .kp-ihero__content > :nth-child(2) { animation-delay: .40s; }
.kp-ihero .kp-ihero__content > :nth-child(3) { animation-delay: .58s; }
.kp-ihero .kp-ihero__content > :nth-child(4) { animation-delay: .74s; }
body.elementor-editor-active .kp-ihero * { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .kp-ihero .kp-ihero__content > * { animation: none !important; }
}

/* ---------- 5. Tablet ---------- */
@media (max-width: 1023px) {
  body .kp-ihero { padding: 120px 24px 104px !important; }
}

/* ---------- 6. Phone ---------- */
@media (max-width: 767px) {
  body .kp-ihero { min-height: 82svh; padding: 112px 16px 96px !important; }
  body .kp-ihero::after { width: 140%; height: 520px; }
  .kp-ihero .kp-ihero__eyebrow { font-size: 12px; height: 30px; padding: 0 12px; }
  .kp-ihero .kp-ihero__title { font-size: clamp(40px, 11.5vw, 52px); margin-top: 20px; }
  .kp-ihero .kp-ihero__lede { font-size: 16px; margin-top: 18px; }
  .kp-ihero .kp-ihero__actions { width: 100% !important; max-width: 360px; margin-top: 28px !important; }
  .kp-ihero .kp-ihero__actions > *,
  .kp-ihero .kp-ihero__actions a { width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
}

/* ---------- 7. Home fix: "Grow." gradient (Elementor drops the span's class) ---------- */
body .kp-hero-a .kp-hero-a__title span {
  background: linear-gradient(92deg, #C9BCFF 0%, #8F78FA 38%, #53E6D4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  padding-right: .04em;
}

/* ---------- 8. No header spacer above these heroes (they start under the floating header) ---------- */
body:has(.kp-ihero) .kp-nav-spacer { display: none !important; }

/* ---------- 9. Light variant "Echo" (About Us): lavender top, white light, royal to navy band at the bottom ---------- */
body .kp-ihero.kp-ihero--light {
  padding-bottom: 176px !important;      /* copy sits higher, clear of the purple band */
  background: linear-gradient(180deg, #E2DEFC 0%, #DCD7FB 62%, #8F78FA 80%, #3A2AB8 91%, #1B1552 100%);
  color: #0F1417;
}
body .kp-ihero.kp-ihero--light::after {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
}
.kp-ihero--light .kp-ihero__eyebrow {
  background: rgba(255, 255, 255, .72);
  border-color: rgba(96, 69, 244, .18);
  color: #3218C4;
}
.kp-ihero--light .kp-ihero__eyebrow::before { box-shadow: none; }
.kp-ihero--light .kp-ihero__title {
  color: #0F1417;
  text-shadow: 0 2px 24px rgba(255, 255, 255, .75);
}
.kp-ihero--light .kp-ihero__title span,
.kp-ihero--light .kp-ihero__title em {
  background: linear-gradient(92deg, #6045F4 0%, #8F78FA 45%, #1FB3A3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.kp-ihero--light .kp-ihero__lede {
  max-width: 640px;
  color: #3F4452;
  text-shadow: 0 1px 16px rgba(255, 255, 255, .85);
}
@media (max-width: 767px) {
  body .kp-ihero.kp-ihero--light { padding-bottom: 140px !important; }
}