/* ==========================================================================
   Cenematic home-c — "Introducing Cénematic" product reveal section

   White stage with a gradient-clipped wordmark. The product shot ships on a
   solid white background, so it blends straight onto the section via
   `mix-blend-mode: multiply` (the white box drops out), with a soft glow
   pooled beneath it.
   ========================================================================== */

.reveal {
  position: relative;
  padding: 96px 40px 110px;
  overflow: hidden;
  text-align: center;
  background: #ffffff;
}

.reveal__inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
}

.reveal__eyebrow {
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 500;
  color: var(--muted);
}

.reveal__headline {
  margin: 8px auto 0;
  max-width: 840px;
  font-size: clamp(30px, 4.2vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.reveal__powered {
  margin-top: 36px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
}

.reveal__wordmark {
  font-size: clamp(56px, 11vw, 150px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.03em;
  background: linear-gradient(105deg, #ffc107, #ff8a00, #ff4d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.reveal__media {
  position: relative;
  margin: 32px auto 0;
  max-width: 760px;
  mix-blend-mode: multiply; /* drop the white box onto the white stage */
}
.reveal__media img { display: block; width: 100%; }

/* soft glow pooled under the product */
.reveal__media::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(121, 22, 255, 0.16), transparent 70%);
  filter: blur(30px);
  z-index: -1;
}

/* Responsive -------------------------------------------------------------- */
@media (max-width: 760px) {
  .reveal { padding: 64px 22px 80px; }
}