/* ============================================
   FuseIoT — Statement Section
   Large headline with body text, parallax image,
   and decorative SVG curve
   Ref: 02-bold-ideas-statement.md
   ============================================ */

/* --- Section --- */
.statement {
  background: var(--bg-alternate);
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

/* --- Inner wrapper --- */
.statement__inner {
  position: relative;
}

/* --- Headline wrapper --- */
.statement__headline-wrap {
  position: relative;
  z-index: var(--z-content, 30);
  margin-bottom: 48px;
}

/* --- Headline --- */
.statement__headline {
  font-size: clamp(3rem, 10vw, 12rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--text-primary);
}

/* --- Body Text wrapper (right side) --- */
.statement__body-wrap {
  position: relative;
  z-index: var(--z-content, 30);
  max-width: 45%;
  margin-left: auto;
  margin-bottom: 60px;
}

/* --- Body Text --- */
.statement__body {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

/* --- CTA Button --- */
.statement__cta {
  display: inline-flex;
  margin-top: 8px;
}

/* --- Parallax Image (left side) --- */
.statement__image {
  position: relative;
  z-index: var(--z-images, 10);
  max-width: 45%;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 60px;
}

.statement__image-inner {
  width: 100%;
  height: 120%;
  background: linear-gradient(135deg,
    rgba(52, 54, 177, 0.15),
    rgba(207, 42, 46, 0.1),
    rgba(244, 125, 78, 0.08)
  );
}

/* --- SVG Curve (Decorative) --- */
.statement__curve {
  position: absolute;
  inset: 0;
  z-index: var(--z-curves, 20);
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.statement__curve-path {
  /* will-change removed — auto-promoted during animation */
}