/* =====================================================================
   Kopou v2 — Home 07 "Verticals" (dark, pinned rings). Locked 29 Oct 2026 · v1.
   Upload to /wp-content/uploads/kopou-verticals/ as kopou-verticals.css
   Carbon room with slowly turning rings; "Every app grows differently."
   in the centre; the section pins for three screens while the eight
   vertical chips appear one per scroll step (kopou-verticals.js).
   Also gives 05 Pricing its rounded bottom corners (the seam into 07).
   Without JS and in the Elementor editor: a plain dark section with the
   header and the eight chips in a grid (name + sub-categories visible).
   ===================================================================== */

/* ---------- 0. Section + tokens (fallback layout first) ---------- */
body .kp-verticals.kp-verticals {
  --kp-carbon: #0F1417;
  --kp-lilac: #C4BDF0;
  --kp-mint: #53E6D4;
  --kp-night: #1B1640;
  --kp-ease: cubic-bezier(.2, .7, .2, 1);
  --kp-soft: cubic-bezier(.45, 0, .55, 1);
  --kp-seam: 40px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: calc(var(--kp-seam) * -1) 0 0 !important;   /* sits under 05's rounded bottom corners */
  padding: calc(140px + var(--kp-seam)) 24px 180px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0 !important;
  background: var(--kp-carbon) !important;
  color: #F2F2F5;
  font-family: 'Quicksand', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body .kp-verticals *,
body .kp-verticals *::before,
body .kp-verticals *::after { box-sizing: border-box; }

/* 05 Pricing ends in a white sheet with rounded bottom corners over the Carbon room.
   :has() covers it without JS; the JS also adds .kp-seam-into-dark for older browsers. */
html body .kp-pricing:has(+ .kp-verticals),
html body .kp-pricing.kp-seam-into-dark,
html body .kp-seam-into-dark {
  position: relative;
  z-index: 2;
  border-radius: 0 0 40px 40px !important;
}

/* ---------- 1. Header (dark variant of the shared section header) ---------- */
body .kp-verticals .kp-sec-head {
  padding: 0 !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center;
}
body .kp-verticals .kp-sec-head .kp-eyebrow-pill {
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
  color: var(--kp-lilac);
}
body .kp-verticals .kp-sec-head .kp-eyebrow-pill__num { color: #8E92A3; }
body .kp-verticals .kp-sec-head .kp-h2,
body .kp-verticals .kp-sec-head h2 {
  margin: 24px 0 0;
  font-family: 'Switzer', 'Inter Tight', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 4.45vw, 64px);
  line-height: 1.02;
  letter-spacing: -.04em;
  color: #FFFFFF;
  text-wrap: balance;
}

/* ---------- 2. Chips (shared look) ---------- */
body .kp-verticals .kp-verticals__list {
  width: 100%;
  max-width: 1200px;
  margin: 64px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px !important;
  background: none !important;
}
body .kp-verticals .kp-vertical {
  margin: 0 !important;
  padding: 18px 20px !important;
  min-height: 44px;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: #F2F2F5;
  text-align: left;
}
body .kp-verticals .kp-vertical__name {
  margin: 0 !important;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  color: #F2F2F5;
}
body .kp-verticals .kp-vertical__tags {
  margin: 0 !important;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kp-lilac);
}
@media (max-width: 1023px) {
  body .kp-verticals .kp-verticals__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  body .kp-verticals.kp-verticals {
    --kp-seam: 32px;
    padding: calc(88px + var(--kp-seam)) 16px 120px !important;
  }
  html body .kp-pricing:has(+ .kp-verticals),
  html body .kp-pricing.kp-seam-into-dark,
  html body .kp-seam-into-dark { border-radius: 0 0 32px 32px !important; }
  body .kp-verticals .kp-sec-head .kp-h2,
  body .kp-verticals .kp-sec-head h2 { margin-top: 18px; }
  body .kp-verticals .kp-verticals__list { margin-top: 40px !important; grid-template-columns: minmax(0, 1fr); gap: 12px !important; }
}

/* =====================================================================
   3. The pinned room (JS adds .kp-vx; never in the editor)
   ===================================================================== */
body .kp-verticals.kp-vx {
  display: block !important;
  padding: 0 !important;
  height: calc(var(--kp-vh, 100vh) * 4);          /* 1 screen + 3 screens of pin */
}
body .kp-verticals.kp-vx.is-static { height: max(var(--kp-vh, 100vh), 720px); }

body .kp-verticals .kp-vx__stage {
  position: sticky;
  top: 0;
  height: var(--kp-vh, 100vh);
  overflow: hidden;
}
body .kp-verticals.is-static .kp-vx__stage { position: relative; height: 100%; }
body .kp-verticals .kp-vx__inner {
  position: absolute;
  inset: 0;
  will-change: opacity, transform;
}
body .kp-verticals .kp-vx__fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body .kp-verticals .kp-vx__glow { position: absolute; inset: 0; }
body .kp-verticals .kp-vx__rings { position: absolute; left: 0; top: 0; overflow: visible; }
body .kp-verticals .kp-vx__breathe,
body .kp-verticals .kp-vx__arc1,
body .kp-verticals .kp-vx__arc2 { transform-box: view-box; }
body .kp-verticals .kp-vx__arc1 { animation: kpVxSpin 70s linear infinite; animation-play-state: paused; }
body .kp-verticals .kp-vx__arc2 { animation: kpVxSpin 110s linear infinite reverse; animation-play-state: paused; }
body .kp-verticals .kp-vx__breathe { animation: kpVxBreathe 12s var(--kp-soft) infinite; animation-play-state: paused; }
body .kp-verticals.is-live .kp-vx__arc1,
body .kp-verticals.is-live .kp-vx__arc2,
body .kp-verticals.is-live .kp-vx__breathe { animation-play-state: running; }
@keyframes kpVxSpin { to { transform: rotate(360deg); } }
@keyframes kpVxBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.016); } }

/* header sits in the centre of the room */
body .kp-verticals.kp-vx .kp-sec-head {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, calc(100% - 32px));
  max-width: none;
  margin: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}
body .kp-verticals .kp-vx__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 20px;
  margin-top: 28px;
}
body .kp-verticals .kp-vx__dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  transition: width .4s var(--kp-ease), background-color .4s var(--kp-ease);
}
body .kp-verticals .kp-vx__dots span.is-on { background: rgba(196, 189, 240, .55); }
body .kp-verticals .kp-vx__dots span.is-pick { width: 18px; background: var(--kp-mint); }
body .kp-verticals .kp-vx__cap { display: none; }

/* chips float in the room */
body .kp-verticals.kp-vx .kp-verticals__list {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0 !important;
  display: block !important;
  z-index: 2;
}
body .kp-verticals.kp-vx .kp-vertical {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 20px 10px 10px !important;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) scale(.9);
  box-shadow: 0 10px 30px rgba(8, 6, 28, .25);
  transition: opacity .7s var(--kp-ease), transform .8s var(--kp-ease), filter .7s var(--kp-ease),
    background-color .25s var(--kp-ease), border-color .25s var(--kp-ease), box-shadow .35s var(--kp-ease);
}
body .kp-verticals.kp-vx .kp-vertical:not(.is-on) { pointer-events: none; }
body .kp-verticals.kp-vx .kp-vertical.is-on {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
}
body .kp-verticals.kp-vx .kp-vertical.is-active {
  z-index: 3;
  background: rgba(255, 255, 255, .12) !important;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: 0 18px 50px rgba(8, 6, 28, .55);
}
body .kp-verticals.kp-vx .kp-vertical:focus-visible { outline: 2px solid var(--kp-mint); outline-offset: 3px; }

body .kp-verticals .kp-vx__disc {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--disc);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .75), 0 0 14px rgba(var(--rgb), .28);
  transition: box-shadow .35s var(--kp-ease);
}
body .kp-verticals .kp-vertical.is-active .kp-vx__disc { box-shadow: inset 0 1px 1px rgba(255, 255, 255, .75), 0 0 26px rgba(var(--rgb), .55); }
body .kp-verticals .kp-vx__disc svg { width: 18px; height: 18px; display: block; }
body .kp-verticals .kp-vx__text { display: flex; flex-direction: column; min-width: 0; }

/* orbit (desktop/landscape): the newest or hovered chip opens to show its sub-categories */
body .kp-verticals.kp-vx .kp-vertical__tags {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  max-height: 0;
  max-width: 0;
  opacity: 0;
  margin: 0 !important;
  transition: max-height .45s var(--kp-ease), max-width .5s var(--kp-ease), opacity .35s var(--kp-ease), margin .45s var(--kp-ease);
}
body .kp-verticals.kp-vx .kp-vertical.is-active .kp-vertical__tags {
  max-height: 26px;
  max-width: 520px;
  opacity: 1;
  margin-top: 3px !important;
}

/* stack (phone / portrait): chips above and below the headline, sub-categories as a caption */
body .kp-verticals.kp-vx.is-stack .kp-vertical {
  gap: 10px !important;
  padding: 6px 16px 6px 6px !important;
  min-height: 42px;
}
body .kp-verticals.kp-vx.is-stack .kp-vertical::after {     /* 44 px tap target */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
body .kp-verticals.kp-vx.is-stack .kp-vx__disc { width: 30px; height: 30px; }
body .kp-verticals.kp-vx.is-stack .kp-vx__disc svg { width: 16px; height: 16px; }
body .kp-verticals.kp-vx.is-stack .kp-vertical__name { font-size: 15px; }
body .kp-verticals.kp-vx.is-stack .kp-vertical__tags,
body .kp-verticals.kp-vx.is-stack .kp-vertical.is-active .kp-vertical__tags {
  position: absolute;                     /* still read by screen readers */
  width: 1px;
  height: 1px;
  max-width: none;
  max-height: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: 0 !important;
}
body .kp-verticals.kp-vx.is-stack .kp-sec-head .kp-h2,
body .kp-verticals.kp-vx.is-stack .kp-sec-head h2 { font-size: 40px; line-height: 1.04; margin-top: 18px; }
body .kp-verticals.kp-vx.is-stack .kp-vx__cap {
  display: block;
  min-height: 46px;
  max-width: 300px;
  margin: 16px auto 0;
  font-family: 'Quicksand', system-ui, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.5;
  color: var(--kp-lilac);
  opacity: 0;
  transition: opacity .35s var(--kp-ease);
}
body .kp-verticals.kp-vx.is-stack .kp-vx__cap.is-on { opacity: 1; }
body .kp-verticals.kp-vx.is-stack .kp-vx__dots { gap: 7px; height: 18px; margin-top: 6px; }

/* ---------- 4. Reduced motion: no pin, everything shown, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  body .kp-verticals .kp-vx__arc1,
  body .kp-verticals .kp-vx__arc2,
  body .kp-verticals .kp-vx__breathe { animation: none; }
  body .kp-verticals.kp-vx .kp-vertical,
  body .kp-verticals.kp-vx .kp-vertical__tags,
  body .kp-verticals .kp-vx__dots span,
  body .kp-verticals .kp-vx__cap { transition: none; }
}