/* =====================================================================
   Kopou v2 — Home 08 "The Network" + brand rail. Locked 29 Oct 2026 · v1.
   Upload to /wp-content/uploads/kopou-network/ as kopou-network.css
   White sheet that rises over 07's Carbon room (40 px top corners).
   Two cards in a Mist frame (Conicorn two-card layout); a white raised
   highlight slides to the hovered card (kopou-network.js). Below the cards,
   on the same white, a brand icon rail that never pauses: grey, colour on hover.
   Without JS and in the Elementor editor: both cards white, no rail.
   ===================================================================== */

/* ---------- 0. Section: the white sheet over 07 ---------- */
body .kp-network.kp-network {
  --kp-carbon: #0F1417;
  --kp-purple: #6045F4;
  --kp-deep: #3218C4;
  --kp-mint: #53E6D4;
  --kp-mist: #F4F3F8;
  --kp-ink2: #4A4F5C;
  --kp-ease: cubic-bezier(.2, .7, .2, 1);
  --kp-seam: 40px;

  position: relative;                      /* no z-index: Contact (later in the page) must stay on top */
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: calc(var(--kp-seam) * -1) 0 0 !important;
  padding: 120px 0 calc(120px + 40px) !important;   /* + the Contact sheet's 40 px overlap */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  border-radius: var(--kp-seam) var(--kp-seam) 0 0 !important;
  background: #FFFFFF !important;
  color: var(--kp-carbon);
  font-family: 'Quicksand', system-ui, sans-serif;
  overflow: hidden;
}
body .kp-network *,
body .kp-network *::before,
body .kp-network *::after { box-sizing: border-box; }

/* ---------- 1. Header (shared pattern from Batch 1; H2 on one line on desktop) ---------- */
body .kp-network .kp-sec-head {
  padding: 0 24px !important;
  min-height: 0;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
body .kp-network .kp-sec-head .kp-h2,
body .kp-network .kp-sec-head h2 { max-width: 1200px; }
body .kp-network .kp-sec-head .kp-h2 span,
body .kp-network .kp-sec-head h2 span { color: var(--kp-purple); }

/* ---------- 2. Frame + cards ---------- */
body .kp-network .kp-network__cards {
  position: relative;
  width: calc(100% - 48px) !important;
  max-width: 940px;
  margin: 64px 0 0 !important;
  padding: 10px !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  border-radius: 40px;
  background: var(--kp-mist) !important;
}
body .kp-network .kp-network__card {
  position: relative;
  z-index: 1;
  width: auto !important;
  min-width: 0;
  min-height: 380px;
  margin: 0 !important;
  padding: 40px 38px 36px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  border-radius: 30px;
  background: #FFFFFF !important;                    /* no-JS / editor: both cards white */
  box-shadow: 0 18px 44px rgba(50, 24, 196, .09), 0 2px 6px rgba(15, 20, 23, .05);
}
/* with JS: cards are clear on Mist, the sliding highlight is the white card */
body .kp-network.kp-nw .kp-network__card { background: transparent !important; box-shadow: none; }
body .kp-network .kp-nw__hl {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  border-radius: 30px;
  background: #FFFFFF;
  box-shadow: 0 18px 44px rgba(50, 24, 196, .09), 0 2px 6px rgba(15, 20, 23, .05);
  pointer-events: none;
  transition: transform .6s var(--kp-ease), width .6s var(--kp-ease), height .6s var(--kp-ease);
}

/* icon tile (added by JS) */
body .kp-network .kp-nw__tile {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
body .kp-network .kp-nw__tile--dark {
  background: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1.4px) 0 0 / 7px 7px, #1A2026;
  box-shadow: 0 8px 20px rgba(15, 20, 23, .22);
}
body .kp-network .kp-nw__tile--dark i {
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85);
  display: flex; align-items: center; justify-content: center;
}
body .kp-network .kp-nw__tile--dark i::after {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--kp-mint); box-shadow: 0 0 10px rgba(83, 230, 212, .9);
}
body .kp-network .kp-nw__tile--iris {
  background: #F3EEFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 8px 20px rgba(149, 128, 249, .25);
}
body .kp-network .kp-nw__tile--iris::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 30% 70%, #F6A6EA 0%, rgba(246, 166, 234, 0) 45%),
    radial-gradient(circle at 72% 30%, #8EB2FF 0%, rgba(142, 178, 255, 0) 45%),
    radial-gradient(circle at 60% 72%, #9FF0E4 0%, rgba(159, 240, 228, 0) 40%),
    radial-gradient(circle at 40% 35%, #B38CFF 0%, rgba(179, 140, 255, 0) 45%);
  filter: blur(4px);
}
body .kp-network .kp-nw__tile--iris i {
  position: relative; width: 20px; height: 20px; border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .55) 72%, rgba(255, 255, 255, .95) 100%);
}

body .kp-network .kp-network__title,
body .kp-network .kp-network__card h3 {
  margin: 28px 0 0 !important;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--kp-carbon);
}
body .kp-network .kp-network__text {
  margin: 12px 0 0 !important;
  max-width: 396px;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--kp-ink2);
  text-wrap: pretty;
}
body .kp-network .kp-nw__num { font-family: 'Switzer', 'Inter Tight', sans-serif; font-weight: 700; color: var(--kp-carbon); }
body .kp-network .kp-nw__num b { font-weight: 700; color: var(--kp-purple); }

/* buttons: Advertisers = purple primary, Traffic Partners = outline with mint dot; both get the arrow orb */
body .kp-network .kp-network__btn,
body .kp-network a.kp-network__btn {
  margin: auto 0 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 52px;
  width: auto !important;
  padding: 0 8px 0 24px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--kp-purple) !important;
  color: #FFFFFF !important;
  font-family: 'Quicksand', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-transform: none !important;
  box-shadow: none;
  transition: transform .25s var(--kp-ease), background-color .25s var(--kp-ease);
}
body .kp-network .kp-network__card--tp .kp-network__btn,
body .kp-network .kp-network__card.is-tp .kp-network__btn {
  padding-left: 20px !important;
  background: transparent !important;
  color: var(--kp-carbon) !important;
  box-shadow: inset 0 0 0 1.5px var(--kp-carbon);
}
body .kp-network .kp-nw__btnwrap { margin-top: auto; padding-top: 32px; display: flex; }
body .kp-network .kp-nw__btnwrap .kp-network__btn { margin: 0 !important; }
body .kp-network .kp-nw__dot { width: 6px; height: 6px; flex: none; border-radius: 999px; background: var(--kp-mint); }
body .kp-network .kp-nw__orb {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  color: var(--kp-purple);
  transition: transform .25s var(--kp-ease), background-color .25s var(--kp-ease), color .25s var(--kp-ease);
}
body .kp-network .kp-network__card--tp .kp-nw__orb,
body .kp-network .kp-network__card.is-tp .kp-nw__orb { background: var(--kp-carbon); color: #FFFFFF; }
body .kp-network .kp-nw__orb svg { width: 14px; height: 14px; display: block; }
body .kp-network .kp-network__btn:hover { background-color: #5236EE !important; }
body .kp-network .kp-network__card--tp .kp-network__btn:hover,
body .kp-network .kp-network__card.is-tp .kp-network__btn:hover { background-color: rgba(15, 20, 23, .04) !important; }
body .kp-network .kp-network__btn:hover .kp-nw__orb { transform: rotate(45deg); background: var(--kp-mint) !important; color: var(--kp-carbon) !important; }
body .kp-network .kp-network__btn:active { transform: scale(.98); }
body .kp-network .kp-network__btn:focus-visible { outline: 2px solid var(--kp-purple); outline-offset: 4px; }

/* ---------- 3. Brand rail (filled by JS) ---------- */
body .kp-network .kp-network__rail {
  width: 100% !important;
  max-width: none;
  margin: 64px 0 0 !important;
  padding: 0 !important;
  display: block !important;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 200px, #000 calc(100% - 200px), transparent 100%);
}
body .kp-network .kp-network__rail:empty { display: none !important; }
body .kp-network .kp-nw__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: kpNwRail 52s linear infinite;            /* never pauses, not even on hover */
}
@keyframes kpNwRail { from { transform: translateX(0); } to { transform: translateX(-50%); } }
body .kp-network .kp-nw__logo { flex: none; display: block; margin-right: 56px; }
body .kp-network .kp-nw__logo img {
  display: block;
  width: 60px;
  height: 60px;
  max-width: none;
  border-radius: 16px;
  filter: grayscale(1) contrast(.9);
  opacity: .5;
  transition: filter .3s var(--kp-ease), opacity .3s var(--kp-ease);
}
body .kp-network .kp-nw__logo:hover img { filter: none; opacity: 1; }

/* ---------- 4. Reveal (JS only, never in the editor) ---------- */
html.kp-js body .kp-network.is-ready > * { transition: opacity .9s var(--kp-ease), transform .9s var(--kp-ease); }
html.kp-js body .kp-network.is-ready:not(.is-in) > * { opacity: 0; transform: translateY(18px); }
html.kp-js body .kp-network.is-ready > *:nth-child(2) { transition-delay: .1s; }
html.kp-js body .kp-network.is-ready > *:nth-child(3) { transition-delay: .2s; }

/* ---------- 5. Tablet / phone ---------- */
@media (max-width: 1023px) {
  body .kp-network .kp-network__card { min-height: 360px; padding: 34px 30px 30px !important; }
  body .kp-network .kp-network__title, body .kp-network .kp-network__card h3 { font-size: 24px; }
  body .kp-network .kp-network__text { font-size: 16px; }
}
@media (max-width: 767px) {
  body .kp-network.kp-network {
    --kp-seam: 32px;
    padding: 88px 0 calc(72px + 32px) !important;
  }
  body .kp-network .kp-sec-head { padding: 0 16px !important; }
  body .kp-network .kp-network__cards {
    width: calc(100% - 32px) !important;
    margin-top: 40px !important;
    padding: 8px !important;
    gap: 8px !important;
    grid-template-columns: minmax(0, 1fr);
    border-radius: 36px;
  }
  body .kp-network .kp-network__card { min-height: 0; padding: 28px 22px 22px !important; border-radius: 28px; }
  body .kp-network .kp-nw__hl { border-radius: 28px; }
  body .kp-network .kp-nw__tile { width: 44px; height: 44px; }
  body .kp-network .kp-network__title, body .kp-network .kp-network__card h3 { margin-top: 20px !important; font-size: 20px; }
  body .kp-network .kp-network__text { font-size: 16px; }
  body .kp-network .kp-nw__btnwrap { padding-top: 24px; }
  body .kp-network .kp-network__rail {
    margin-top: 40px !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  }
  body .kp-network .kp-nw__track { animation-duration: 40s; }
  body .kp-network .kp-nw__logo { margin-right: 32px; }
  body .kp-network .kp-nw__logo img { width: 48px; height: 48px; border-radius: 14px; }
}

/* ---------- 6. Reduced motion: rail stands still (one row, centred, wraps) ---------- */
@media (prefers-reduced-motion: reduce) {
  body .kp-network .kp-nw__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; padding: 0 24px; }
  body .kp-network .kp-nw__logo[aria-hidden="true"] { display: none; }
  body .kp-network .kp-network__rail { -webkit-mask-image: none; mask-image: none; }
  body .kp-network .kp-nw__hl, body .kp-network .kp-nw__logo img { transition: none; }
  html.kp-js body .kp-network.is-ready:not(.is-in) > * { opacity: 1; transform: none; }
}