/* =========================================
   STOOMPALEIS HERO — STEAM THEME (LIGHT + LUXE)
   ========================================= */

:root{
  --sp-orange: #F28C00;
  --sp-orange-dark: #E07E00;
  --sp-black: #111111;
  --sp-text: #232323;
  --sp-muted: rgba(17,17,17,.68);

  --sp-bg: #ffffff;
  --sp-soft: #f6f6f6;

  --sp-shadow: 0 22px 60px rgba(0,0,0,.10);
  --sp-shadow-soft: 0 14px 34px rgba(0,0,0,.08);
  --sp-radius: 22px;
}

/* HERO WRAP */
.sp-hero{
  position: relative;
  overflow: hidden;
  background: var(--sp-bg);
  padding: clamp(110px, 10vw, 140px) 0 70px;
}

/* Inner container (eigen, los van .container) */
.sp-hero__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;

  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(26px, 5vw, 80px);
  align-items: center;

  position: relative;
  z-index: 2;
}

/* ---------- STEAM LAYERS (subtiel, niet vlak) ---------- */
.sp-steam{
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  filter: blur(46px);
  opacity: .95;
}

.sp-steam--a{
  background:
    radial-gradient(40% 30% at 18% 20%, rgba(242,140,0,.22), transparent 70%),
    radial-gradient(35% 30% at 35% 48%, rgba(242,140,0,.14), transparent 72%),
    radial-gradient(45% 35% at 15% 80%, rgba(0,0,0,.05), transparent 76%);
}

.sp-steam--b{
  inset: -35%;
  opacity: .70;
  filter: blur(62px);
  background:
    radial-gradient(45% 35% at 78% 20%, rgba(242,140,0,.18), transparent 72%),
    radial-gradient(55% 45% at 70% 70%, rgba(242,140,0,.10), transparent 78%);
}

.sp-steam--c{
  inset: -40%;
  opacity: .55;
  filter: blur(80px);
  background:
    radial-gradient(70% 50% at 50% 15%, rgba(242,140,0,.08), transparent 75%),
    radial-gradient(70% 50% at 50% 95%, rgba(0,0,0,.04), transparent 78%);
}

/* ---------- COPY ---------- */
.sp-hero__copy{
  max-width: 56ch;
}

.sp-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(242,140,0,.10);
  border: 1px solid rgba(242,140,0,.18);
  color: rgba(17,17,17,.80);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .01em;
  margin-bottom: 18px;
}

.sp-badge__dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--sp-orange);
  box-shadow: 0 0 0 6px rgba(242,140,0,.18);
}

/* Title */
.sp-hero__title{
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--sp-black);
  margin: 0 0 16px;
}

/* typed wrap: reserve width (no layout shift!) */
.sp-typewrap{
  display: inline-block;
  width: var(--typedW, 12ch); /* pas aan naar langste woord */
  white-space: nowrap;
  vertical-align: baseline;
  color: var(--sp-orange-dark);
}

.sp-typetarget{
  font-weight: 900;
}

.sp-caret{
  display: inline-block;
  width: .8ch;
  opacity: .65;
  color: var(--sp-orange-dark);
  transform: translateY(-.02em);
}

/* Subtitle */
.sp-hero__sub{
  color: var(--sp-muted);
  line-height: 1.7;
  margin: 0 0 22px;
  font-size: 16px;
}

/* CTAs */
.sp-hero__ctas{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sp-btn{
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.sp-btn--primary{
  background: linear-gradient(180deg, var(--sp-orange), var(--sp-orange-dark));
  color: #fff;
  box-shadow: 0 18px 44px rgba(242,140,0,.26);
}

.sp-btn--primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(242,140,0,.32);
}

.sp-btn--ghost{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(17,17,17,.10);
  color: var(--sp-black);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

.sp-btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,.10);
}

/* Proof chips */
.sp-hero__proof{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sp-proof{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,17,17,.08);
  color: rgba(17,17,17,.78);
  font-weight: 800;
  font-size: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}

.sp-proof__icon{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(242,140,0,.12);
  color: var(--sp-orange-dark);
  font-weight: 900;
}

/* ---------- MEDIA ---------- */
.sp-hero__media{
  display: grid;
  gap: 14px;
  justify-items: center;
}

.sp-mediaCard{
  width: min(520px, 100%);
  border-radius: var(--sp-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: var(--sp-shadow);
  position: relative;
}

.sp-mediaCard__img{
  width: 100%;
  height: clamp(260px, 24vw, 320px);
  object-fit: cover;
  display: block;
}

.sp-mediaCard__tag{
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(17,17,17,.10);
  font-weight: 900;
  font-size: 12px;
  color: rgba(17,17,17,.86);
}

/* Mini stats */
.sp-miniStats{
  width: min(520px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.sp-stat{
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17,17,17,.08);
  box-shadow: var(--sp-shadow-soft);
  padding: 14px 14px;
  text-align: center;
}

.sp-stat__num{
  font-weight: 950;
  font-size: 18px;
  color: var(--sp-black);
  letter-spacing: -0.02em;
}

.sp-stat__lbl{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(17,17,17,.62);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
  .sp-hero__inner{
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 0 18px;
  }

  .sp-hero{
    padding: 102px 0 56px;
  }

  .sp-typewrap{ width: 10ch; } /* typed words op mobiel */
}

@media (max-width: 420px){
  .sp-hero__ctas{
    flex-direction: column;
  }
  .sp-btn{
    width: 100%;
  }
}