/* DelTeaser styles — homepage section that points at /pipeline */

.del-teaser {
  padding: 96px 32px;
  background: linear-gradient(180deg, transparent 0%, var(--del-navy-deep) 50%, transparent 100%);
}
.del-teaser-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 280px 1fr 233px;
  gap: 56px;
  align-items: center;
}
.del-teaser-mascot {
  width: 100%;
  border-radius: 14px;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,.5));
}
.del-teaser-card img {
  width: 100%;
  border-radius: 14px;
  box-shadow: 0 14px 32px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05);
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 280ms;
}
.del-teaser-card img:hover {
  transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 20px 50px rgba(0,0,0,.7), 0 0 0 1.5px var(--del-purple);
}

/* Single-card sections (Prompt, Pipeline overview, Response) */
.pw-single { padding: 48px 32px; }
.pw-single-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  max-width: 900px;
  margin: 0 auto;
  flex-wrap: wrap;
}

/* Card flip + hover glow */
.del-scene {
  width: 233px;
  height: 350px;
  perspective: 1200px;
  cursor: pointer;
  position: relative;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
  flex-shrink: 0;
}
.del-scene::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 22px;
  background: var(--pw-glow, conic-gradient(from 200deg, #E5E5E5, #B0B0B0, #FFFFFF, #707070, #A0A0A0));
  filter: blur(14px);
  opacity: 0;
  transition: opacity 320ms cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  z-index: 0;
}
.del-scene:hover { transform: translateY(-6px); }
.del-scene:hover::before { opacity: 0.65; }

.del-card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 700ms cubic-bezier(.65, 0, .35, 1);
  z-index: 1;
}
.del-scene.flipped .del-card { transform: rotateY(180deg); }

.del-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,0.55);
}
.del-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.del-back { transform: rotateY(180deg); }


.del-teaser-eyebrow {
  font-family: var(--font-poster);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--del-gold);
  font-size: 13px;
  margin-bottom: 10px;
}
.del-teaser-h2 {
  font-family: var(--font-poster);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fg1);
  font-size: clamp(36px, 4vw, 52px);
  margin: 0 0 18px;
  line-height: 1.05;
}
.del-teaser-p {
  color: var(--fg1);
  font-size: 17px;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 520px;
}
.del-teaser-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 22px;
}

@media (max-width: 980px) {
  .del-teaser-inner {
    grid-template-columns: 1fr;
    gap: 36px;
    text-align: center;
  }
  .del-teaser-mascot { max-width: 240px; margin: 0 auto; }
  .del-teaser-card  { max-width: 200px; margin: 0 auto; }
  .del-teaser-p { margin-left: auto; margin-right: auto; }
  .del-teaser-cta-row { justify-content: center; }
}