/* =========================================================
  FONIFIX • INTRO + HOE WERKT HET — FINAL
  - Exacte hero-uitlijning
  - Geen full-width lekken
  - Theme / Elementor / Astra proof
  - + KICKER (model + repairtype + optioneel locatie) boven H2
========================================================= */

.fxFlowX1{
  isolation:isolate;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#0f2940;
  background:#fff;

  display:block;
  width:100%;
  max-width:100%;
  clear:both;
}

/* =========================================================
  HERO-ALIGNED CONTAINER (IDENTIEK AAN HERO)
========================================================= */
.fxFlowX1__container{
  max-width:1280px;
  margin:0 auto;
  padding:0 30px;

  box-sizing:border-box;
}

/* TEKSTKOLOM — zelfde als hero */
.fxFlowX1__content{
  max-width:760px;
}

/* SECTION SPACING */
.fxFlowX1__section{
  padding:64px 0;
}

/* =========================================================
  KICKER (boven H2)
  - Subtiel, scanbaar, hoort visueel bij H2
  - Geen "blauwe link" styling
========================================================= */
.fxFlowX1__kicker{
  margin:0 0 10px;
  font-weight:900;
  font-size:13px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(15,41,64,.62);
  text-decoration:none !important;
}

/* subtiele accent lijn (rustig) */
.fxFlowX1__kicker::after{
  content:"";
  display:block;
  width:56px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:rgba(255,107,59,.35);
}

/* als theme er ooit een link van maakt */
.fxFlowX1__kicker a,
.fxFlowX1__kicker a:link,
.fxFlowX1__kicker a:visited{
  color:inherit !important;
  text-decoration:none !important;
  border-bottom:0 !important;
}

/* =========================================================
  TITELS & TEKST
========================================================= */
.fxFlowX1__h2{
  margin:0 0 14px;
  font-size:28px;
  font-weight:1000;
  letter-spacing:-.02em;
  line-height:1.2;
}

.fxFlowX1__p{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.65;
  color:rgba(15,41,64,.78);
}

.fxFlowX1__strong{
  font-weight:900;
  color:#0f2940;
}

/* =========================================================
  GRID — START OP HERO-LIJN
========================================================= */
.fxFlowX1__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;

  margin-top:28px;
  width:100%;

  /* ✅ EXTRA RUIMTE ONDER DE TEGELS (VOOR CTA) */
  margin-bottom:18px;
}

/* CARD */
.fxFlowX1__card{
  background:#f6fafc;
  border-radius:18px;
  padding:22px;
  border:1px solid rgba(15,41,64,.08);
}

/* LABEL */
.fxFlowX1__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:92px;
  padding:6px 14px;
  margin-bottom:10px;

  border-radius:999px;
  background:#fff;
  border:1px solid rgba(15,41,64,.10);

  color:#FF6B3B;
  font-weight:1000;
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* TITLE + TEXT */
.fxFlowX1__title{
  margin:0 0 6px;
  font-size:16px;
  font-weight:1000;
}

.fxFlowX1__text{
  margin:0;
  font-size:16px;
  line-height:1.65;
  color:rgba(15,41,64,.78);
}

/* =========================================================
  RESPONSIVE
========================================================= */
@media (max-width:900px){
  .fxFlowX1__grid{
    grid-template-columns:1fr;

    /* ✅ IETS MINDER RUIMTE OP MOBILE */
    margin-bottom:16px;
  }

  /* padding blijft gelijk aan hero */
  .fxFlowX1__container{
    padding:0 30px;
  }

  .fxFlowX1__section{
    padding:56px 0;
  }

  .fxFlowX1__kicker{
    margin-bottom:8px;
  }

  .fxFlowX1__kicker::after{
    margin-top:8px;
  }
}