scroll-card-stack

				
					/* =========================================================
   ZAKAI LAB - SCROLL CARD STACK
========================================================= */

/* Allow stacking inside the LAB wrappers */
.zakai-lab-single:has(#zkl-stack),
.zakai-lab-single .lab-demo:has(#zkl-stack) {
  overflow: clip !important;
}

.lab-demo:has(#zkl-stack) .elementor-widget-html,
.lab-demo:has(#zkl-stack) .elementor-widget-container {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

/* Main demo */
#zkl-stack {
  --step: 18px;
  --stop: 90px;
  --card-height: min(560px, calc(100svh - 164px));

  direction: ltr;
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 60px 0 100px;
  color: #f7f3ec;
  border-radius: 24px;

  background:
    radial-gradient(
      circle at 73% 16%,
      #e56f2d3d,
      transparent 38%
    ),
    radial-gradient(
      circle at 35% 58%,
      #dda53212,
      transparent 34%
    ),
    linear-gradient(
      115deg,
      #080808,
      #160f0c 44%,
      #432113
    );
}

#zkl-stack,
#zkl-stack * {
  box-sizing: border-box;
}

/* Introduction */
#zkl-stack .zkl-intro {
  position: relative;
  width: 86%;
  min-height: 270px;
  margin: 0 auto 40px;
  text-align: center;
}

#zkl-stack .zkl-eyebrow {
  display: block;
  margin-bottom: 24px;
  color: #dda532;
  font: 500 12px/1 monospace;
  letter-spacing: .28em;
}

#zkl-stack .zkl-title {
  margin: 0;
  color: #f7f3ec;
  font: 300 clamp(42px, 4.4vw, 70px)/.98 Arial, sans-serif;
  letter-spacing: -.045em;
}

/* Decorative light */
#zkl-stack .zkl-glow,
#zkl-stack .zkl-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a24;
  box-shadow:
    0 0 8px #ff5a24,
    0 0 28px #e56f2d99;
}

#zkl-stack .zkl-glow {
  left: calc(50% - 4px);
  bottom: 22px;
}

/* Stack container */
#zkl-stack .zkl-deck {
  display: block;
  position: relative;
  width: min(1050px, 86%);
  margin: 0 auto;
  padding-bottom: calc(3 * var(--step) + 80px);
  overflow: visible;
}

/* Cards */
#zkl-stack .zkl-card {
  position: sticky;
  top: calc(var(--stop) + var(--i) * var(--step));
  z-index: calc(1 + var(--i));

  width: 100%;
  height: var(--card-height);
  min-height: 280px;
  margin: 0;
  padding: 48px 52px;

  border: 1px solid #dda53266;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 22px 55px #0003;

  color: #2d211b;
  background: linear-gradient(135deg, #faf6ee, #f3e9db);
}

#zkl-stack .zkl-card + .zkl-card {
  margin-top: 36px;
}

/* Card colors */
#zkl-stack .zkl-card--2 {
  background: linear-gradient(135deg, #efe0cd, #ddba91);
}

#zkl-stack .zkl-card--3 {
  color: #f7f3ec;
  background: linear-gradient(135deg, #6d3824, #321a13);
}

#zkl-stack .zkl-card--4 {
  color: #f7f3ec;
  background:
    radial-gradient(
      circle at 78% 18%,
      #e56f2d33,
      transparent 38%
    ),
    linear-gradient(135deg, #402116, #17100e);
}

/* Top row */
#zkl-stack .zkl-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#zkl-stack .zkl-number {
  color: #c64e28;
  font: 13px monospace;
  letter-spacing: .18em;
}

#zkl-stack .zkl-stars,
#zkl-stack .zkl-bottom {
  color: #d54232;
  font: 20px monospace;
}

/* Card content */
#zkl-stack .zkl-content {
  position: absolute;
  top: 50%;
  right: 54px;
  width: 75%;
  transform: translateY(-44%);
  text-align: right;
}

#zkl-stack .zkl-label {
  display: block;
  margin-bottom: 24px;
  color: #b64a26;
  font: 12px/1 monospace;
  letter-spacing: .24em;
}

#zkl-stack .zkl-card--3 .zkl-label,
#zkl-stack .zkl-card--4 .zkl-label,
#zkl-stack .zkl-card--3 .zkl-number,
#zkl-stack .zkl-card--4 .zkl-number {
  color: #dda532;
}

#zkl-stack .zkl-content h3 {
  margin: 0;
  color: inherit;
  font: 300 clamp(34px, 4.6vw, 70px)/.98 Arial, sans-serif;
  letter-spacing: -.05em;
  overflow-wrap: normal;
}

#zkl-stack .zkl-dot {
  left: 12%;
  top: 54%;
}

#zkl-stack .zkl-bottom {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
}

/* Mobile */
@media (max-width: 767px) {
  #zkl-stack {
    --step: 12px;
    --stop: 64px;
    --card-height: min(440px, calc(100svh - 124px));
    padding: 42px 0 64px;
  }

  #zkl-stack .zkl-intro {
    width: calc(100% - 28px);
    min-height: 210px;
    margin-bottom: 25px;
  }

  #zkl-stack .zkl-eyebrow {
    font-size: 9px;
    letter-spacing: .16em;
  }

  #zkl-stack .zkl-title {
    font-size: clamp(28px, 8vw, 48px);
  }

  #zkl-stack .zkl-deck {
    width: calc(100% - 24px);
  }

  #zkl-stack .zkl-card {
    padding: 24px 18px;
    border-radius: 24px;
  }

  #zkl-stack .zkl-card + .zkl-card {
    margin-top: 24px;
  }

  #zkl-stack .zkl-content {
    right: 18px;
    width: calc(100% - 36px);
  }

  #zkl-stack .zkl-content h3 {
    font-size: clamp(22px, 6.3vw, 48px);
  }

  #zkl-stack .zkl-label {
    font-size: 10px;
    letter-spacing: .16em;
    margin-bottom: 18px;
  }

  #zkl-stack .zkl-number {
    font-size: 10px;
  }

  #zkl-stack .zkl-stars,
  #zkl-stack .zkl-bottom {
    font-size: 15px;
  }

  #zkl-stack .zkl-dot {
    left: 24px;
    top: 72%;
  }
}