.toolkit {
  display: flex;
  align-items: center;
  gap: 12px; /* spacing between text and icons */
  }

  .toolkit img {
  width: 32px; /* icon size */
  height: auto;
  filter: brightness(0) invert(1);
  }

	#glitch-container {
  isolation: isolate;
}

#glitch-canvas,
.vignette-center,
.vignette-outer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.foreground-content {
  position: relative;
  z-index: 2;
}

.hero-stack {
  position: relative;
  width: 100%;
  max-width: 400px;   /* wider spread */
  height: 450px;      /* more vertical breathing room */
  margin: 0 auto;
}

.hero-img {
  position: absolute;
  width: 68%;         /* smaller images = more negative space */
  height: auto;
  border-radius: 18px;
  box-shadow: 0 18px 36px rgba(0,0,0,0.35);
}

/* Bottom-left image */
.img-1 {
  z-index: 3;
  top: 150px;         /* pushed down */
  left: -95px;       /* pushed outward */
  transform: rotate(-6deg);
}

/* Bottom-right image */
.img-2 {
  z-index: 1;
  top: 200px;         /* pushed down */
  right: -35px;      /* pushed outward */
  transform: rotate(5deg);
}

/* Top image — centered between bottom two */
.img-3 {
  z-index: 2;
  top: -25px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
}

/* Subtle depth hover (optional) */
.hero-stack:hover .img-1 {
  transform: rotate(-6deg) translateY(-8px);
}

.hero-stack:hover .img-2 {
  transform: rotate(5deg) translateY(-8px);
}

.hero-stack:hover .img-3 {
  transform: translateX(-50%) rotate(-1.5deg) translateY(-12px);
}

/* Mobile refinement */
@media (max-width: 768px) {
  .hero-stack {
    max-width: 340px;
    height: 600px;
  }

  .hero-img {
    width: 76%;
  }

  .img-1 {
    top: 140px;
    left: -20px;
  }

  .img-2 {
    top: 350px !important;
    right: -20px;
  }

   .img-3 {
    top: -65px !important;
    right: -20px;
  }
}

  .card ul li {
      color: #cccccc !important;
    }
   
	.card ul {
      list-style: none;       /* Removes default bullets */
      padding-left: 0;        /* Reset the UL padding */
    }
  .card ul li {
      position: relative;
      padding-left: 1.5rem;   /* Space for icon */
      text-indent: 0;         /* Ensures wrap under the text */
    }
  .card ul li::before {
      content: "◉ ";
      color: #00f5a3;
      position: absolute;
      left: 0;
      top: 0;
    }

.slideshow-section::before {
  background: transparent !important;
}

.video-bg {
  position: relative;
  height: 100vh;              /* 👈 REQUIRED */
  overflow: hidden;
  background: linear-gradient(
    to top,
    #d0d0d2 0%,
    #e6e6e8 50%,
    #d0d0d2 100%
  );
}

.video-bg video {
  position: absolute;
  inset: 0;                   /* top/right/bottom/left = 0 */
  width: 100%;
  height: 100%;
  object-fit: contain; 
  mix-blend-mode: darken;       /* 👈 full height always visible */
}


.video-bg .content {
  position: relative;
  z-index: 1;
}

  .video-16x9 {
  width: 100%;
  aspect-ratio: 16 / 9;   /* Forces 1920x1080 ratio */
  overflow: hidden;
  border-radius: 8px;
}

.video-16x9 video {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* Crops instead of stretching */
  object-position: top center; /* 👈 keeps crop aligned to top */
}

.sticky-wrap {
  position: sticky;
  top: 100px; /* adjust for your header */
  align-self: flex-start;
}

.vertical-hr {
  width: 1px;
  height: 100%;
  background-color: rgba(255,255,255,0.35);
  border: none;
}