/* ==================================================
   YourNode – Custom CSS (COMPLEET & STABIEL)
   - Support cards: 3 gelijke breedtes + gelijke hoogte (altijd)
   - Status tiles: blijven compact (niet slopen)
   ================================================== */

/* ==================================================
   HERO USP
   ================================================== */
.hero-usps {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.hero-usp {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dce8ff;
  font-size: 15px;
  font-weight: 500;
}

.hero-usp i {
  width: 20px;
  height: 20px;
  color: #6fd2ff;
}

/* ==================================================
   HERO COMPACT (override theme)
   ================================================== */
.hero1{
  padding-top: 70px !important;
  padding-bottom: 60px !important;
  min-height: 0 !important;
  height: auto !important;
}

.hero1 .hero-inner,
.hero1 .container-fluid,
.hero1 .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.hero1 .row{
  min-height: 0 !important;
  height: auto !important;
}

.hero1 .images img{
  max-height: 420px;
  width: auto;
}

.hero1 .main-heading1 h1{
  margin-bottom: 32px !important;
}
.hero1 .hero-usps{
  margin-top: 10px !important;
  margin-bottom: 36px !important;
}
.hero1 .buttons{
  margin-top: 34px !important;
}

@media (max-width: 768px){
  .hero1{
    padding-top: 55px !important;
    padding-bottom: 45px !important;
  }
  .hero1 .images img{
    max-height: 300px;
  }
}

.hero1 .col-lg-7 .images{
  transform: translate(-40px, 60px) !important;
}

.hero1 .col-lg-7 .images img{
  max-height: 460px;
}

/* ==================================================
   MENU + LOGIN
   ================================================== */
.vl-main-menu ul li > a{
  display: inline-flex !important;
  align-items: center !important;
}

.vl-main-menu ul li > a span{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
  margin-left: 8px;
}

.vl-main-menu ul li > a span i{
  display: block !important;
  font-size: 12px;
  line-height: 1 !important;
  margin-top: -2px;
}

.vl-main-menu ul li.has-dropdown > a span i{
  transition: transform .18s ease, opacity .18s ease;
  transform-origin: center;
}

.vl-main-menu ul li.has-dropdown:hover > a span i{
  transform: rotate(180deg);
}

.vl-main-menu ul li.has-dropdown.active > a span i,
.vl-main-menu ul li.has-dropdown.open > a span i,
.vl-main-menu ul li.has-dropdown.show > a span i{
  transform: rotate(180deg);
}

.yn-login-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.yn-login-link .icon img{
  width: 20px;
  height: 20px;
  max-width: none;
  display: block;
}

.yn-login-link .text{
  line-height: 1;
}

/* ==================================================
   HERO SUPPORT (titel + robot)
   ================================================== */
.hero-support h1{
  max-width: 720px;
  line-height: 1.15;
}

.hero-image img{
  max-width: 100%;
  height: auto;
}

.hero-support-wrap{
  position: relative;
  overflow: hidden;
}

.hero-support-art img{
  position: absolute;
  bottom: 0;
  width: 420px;
  height: auto;
  display: block;
  max-width: none;
  pointer-events: none;
  right: calc((100vw - 1320px) / 2 + 40px);
}

@media (max-width: 1399px){
  .hero-support-art img{ right: 40px; }
}

@media (max-width: 991px){
  .hero-support-art img{
    width: 360px;
    right: 20px;
  }
}

@media (max-width: 767px){
  .hero-support-art{ display: none !important; }
}

/* ==================================================
   SUPPORT CARDS – 3x gelijke breedte + gelijke hoogte
   ================================================== */

/* Zorg dat cards en status dezelfde visuele “breedtezone” gebruiken */
:root{
  --yn-block-width: 1200px;
  --yn-gap: 22px;
}

/* Het blok met 3 kaarten centreren en even breed als status */
.support-cards,
.yn-status-tiles-wrap{
  max-width: var(--yn-block-width);
  margin-left: auto;
  margin-right: auto;
}

/* Bootstrap row heeft negatieve margins; maak het strak zoals status */
.support-cards .yn-cards{
  margin-left: 0 !important;
  margin-right: 0 !important;
  row-gap: var(--yn-gap);
}

/* De kolommen moeten dezelfde hoogte “stretchen” */
.support-cards .yn-cards > [class*="col-"]{
  display: flex;              /* kolom wordt flex container */
}

/* Link reset */
.yn-card-link{
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

/* Card: altijd even hoog binnen dezelfde rij */
.support-cards .yn-card{
  width: 100%;
  flex: 1 1 auto;             /* vult de kolom */
  background: #ffffff;
  border: 2px solid rgba(21,52,98,.10);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* we regelen spacing via min-heights */
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Hover */
.support-cards .yn-card-link:hover .yn-card,
.support-cards .yn-card.yn-card-click:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  border-color: rgba(21,52,98,.18);
}

/* Icon bubble */
.support-cards .yn-icon{
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  background: rgba(21,52,98,.08);
  border: 2px solid rgba(21,52,98,.10);
}

.support-cards .yn-icon i{
  font-size: 30px;
  color: #153462;
}

/* Titel */
.support-cards .yn-card h5{
  font-weight: 800;
  font-size: 18px;
  margin: 0 0 10px;
  color: #0f1f33;
  min-height: 28px;           /* houdt titel-hoogte gelijk */
}

/* Badge */
.yn-badge{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  margin: 0 auto 12px;
}

.yn-badge-muted{
  background: #e9ecef;
  color: #0f1f33;
}

.yn-badge-tip{
  background: rgba(21,52,98,.10);
  color: #153462;
}

/* Tekst: maak hoogte gelijk ongeacht aantal regels */
.support-cards .yn-card p{
  margin: 0;
  color: rgba(15,30,58,.75);
  line-height: 1.55;
  font-size: 14.5px;
  min-height: 52px;           /* +/- 2 regels */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==================================================
   STATUS TILES – compact houden (zoals eerder goed was)
   ================================================== */

.yn-status-tiles-wrap{
  margin-top: 22px;
}

.yn-status-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--yn-gap);
}

/* Tile basis (compact) */
.yn-status-tile{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 16px;
  text-decoration: none;
  background: #fff;
  border: 2px solid rgba(21, 52, 98, .10);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.yn-status-tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  border-color: rgba(21, 52, 98, .18);
}

.yn-status-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.yn-status-text{
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.yn-status-title{
  font-weight: 700;
  color: #0f1e3a;
  font-size: 14px;
  opacity: .90;
}

.yn-status-msg{
  font-weight: 800;
  font-size: 18px;
  color: #153462;
}

/* Variants */
.yn-status-ok .yn-status-icon{
  background: rgba(16, 185, 129, .12);
  color: #10b981;
  border: 2px solid rgba(16, 185, 129, .22);
}

.yn-status-warn .yn-status-icon{
  background: rgba(245, 158, 11, .12);
  color: #f59e0b;
  border: 2px solid rgba(245, 158, 11, .22);
}

.yn-status-bad .yn-status-icon{
  background: rgba(239, 68, 68, .12);
  color: #ef4444;
  border: 2px solid rgba(239, 68, 68, .22);
}

.yn-status-unknown .yn-status-icon{
  background: rgba(100, 116, 139, .10);
  color: #64748b;
  border: 2px solid rgba(100, 116, 139, .18);
}

/* Note centreren */
.yn-status-note{
  margin-top: 12px;
  font-size: 13px;
  color: rgba(15, 30, 58, .72);
  text-align: center;
  width: 100%;
}

.yn-status-note a{
  color: #153462;
  text-decoration: underline;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 991px){
  :root{ --yn-block-width: 960px; }
}

@media (max-width: 767px){
  .yn-status-tiles{
    grid-template-columns: 1fr;
  }
  .yn-status-msg{
    font-size: 16px;
  }
  /* Teksthoogte op mobiel iets flexibeler */
  .support-cards .yn-card p{
    min-height: 0;
  }
}

/* ==================================================
   FIX: Support cards ECHT breder + spacing weer normaal
   (laat status tiles met rust)
   ================================================== */

.contact-page-sec .col-lg-9.m-auto{
  max-width: 1200px !important;
  flex: 0 0 1200px !important;
}

@media (max-width: 1199px){
  .contact-page-sec .col-lg-9.m-auto{
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

.support-cards .yn-cards{
  margin-top: 24px !important;  
  row-gap: 18px !important;
}

.yn-status-tiles-wrap{
  margin-top: 16px !important;
}

/* Als je een wrapper hebt met mt-30/mt-60, kill die margin ook */
.support-cards .mt-30{ margin-top: 24px !important; }
.yn-status-tiles-wrap .mt-30{ margin-top: 16px !important; }


/* ==================================================
   KB CTA – SINGLE SOURCE OF TRUTH (NIET KLOTEN)
   ================================================== */

/* Ruimte tussen status en CTA */
.yn-status-tiles-wrap{
  margin-bottom: 34px !important;
}

/* CTA wrapper */
.yn-kb-cta{
  margin-top: 22px !important;
}

.yn-kb-cta .bg-area{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
}

/* Tekstkolom: breder, maar niet achter robot */
.yn-kb-cta .heading1-w{
  max-width: 860px;
  position: relative;
  z-index: 3;
}

/* 1 regel titel forceren */
.yn-kb-cta .heading1-w h2{
  white-space: nowrap;
}

/* Zorg dat tekst nooit onder robot komt */
@media (min-width: 992px){
  .yn-kb-cta .heading1-w{
    padding-right: 260px; /* ruimte voor robot */
  }
}

/* ===== Search bar (stabiel pill model) ===== */
.yn-kb-cta-form{
  position: relative;
  width: 100%;
  max-width: 860px;
  margin-top: 18px;
  z-index: 4;
}

.yn-kb-cta-icon{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15,31,51,.55);
  pointer-events: none;
  z-index: 5;
}

.yn-kb-cta .cta1-form-area input[type="search"]{
  width: 100% !important;
  height: 60px;
  border-radius: 999px;
  padding-left: 52px;    /* ruimte voor icoon */
  padding-right: 170px;  /* ruimte voor knop */
  box-sizing: border-box;
}

/* Button netjes rechts in de pill */
.yn-kb-cta .cta1-form-area .button{
  position: absolute !important;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  z-index: 6;
}

/* Kill theme margins zoals mt_40 */
.yn-kb-cta .cta1-form-area .button button{
  margin: 0 !important;
  height: 46px;
  line-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
}

/* Links onder search */
.yn-kb-cta-links{
  margin-top: 12px;
  font-weight: 600;
  opacity: .95;
  position: relative;
  z-index: 4;
}

.yn-kb-cta-links a{
  color:#fff;
  text-decoration:none;
}
.yn-kb-cta-links a:hover{ text-decoration:underline; }
.yn-kb-cta-dot{ margin:0 10px; opacity:.8; }

/* ===== Robot (zoals hero) ===== */
.yn-kb-cta-right{
  position: static !important;
  min-height: 0 !important;
}

.yn-kb-cta-robot{
  position: absolute !important;
  right: 18px !important;
  bottom: -6px !important;
  z-index: 2;
  pointer-events: none;
}

.yn-kb-cta-robot img{
  width: 330px;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.18));
}

/* ===== Mobile: titel mag wrappen + knop onder input ===== */
@media (max-width: 991px){
  .yn-kb-cta .heading1-w{
    padding-right: 0;
    max-width: 100%;
  }

  .yn-kb-cta .heading1-w h2{
    white-space: normal;
  }

  .yn-kb-cta-form{
    max-width: 100%;
  }

  .yn-kb-cta .cta1-form-area input[type="search"]{
    padding-right: 52px; /* geen knop in input */
  }

  .yn-kb-cta .cta1-form-area .button{
    position: static !important;
    transform: none;
    margin-top: 12px !important;
  }

  .yn-kb-cta .cta1-form-area .button button{
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .yn-kb-cta-robot{
    position: static !important;
    margin-top: 18px !important;
    text-align: center;
  }

  .yn-kb-cta-robot img{
    width: 200px;
  }
}

/* ==================================================
   FIX: KB CTA search button netjes in pill
   ================================================== */

/* Form moet clippen zodat knop nooit buiten de pill steekt */
.yn-kb-cta-form{
  overflow: hidden;
}

/* Input: iets meer ruimte rechts zodat tekst nooit onder knop komt */
.yn-kb-cta .cta1-form-area input[type="search"]{
  padding-right: 190px !important;
}

/* Button wrapper exact binnen de pill */
.yn-kb-cta .cta1-form-area .button{
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Button zelf: geen rare theme padding/height */
.yn-kb-cta .cta1-form-area .button button{
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
}

/* Zorg dat theme geen extra pseudo/extra spans de boel oprekt */
.yn-kb-cta .cta1-form-area .button button span{
  display: none !important; /* jouw theme gebruikt soms <span> voor effect */
}

/* =========================
   YourNode – Review strip (overlap + outer card)
   ========================= */


.yn-review-cards > .container{
  max-width: 860px;
}


.yn-review-cards{
  position: relative;
  margin-top: -70px;
  z-index: 5; 
}


.yn-review-cards .yn-review-wrap{
  background: #fff;
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
}


.yn-review-cards .row{
  --bs-gutter-x: 24px;
  --bs-gutter-y: 16px;
}


.yn-review-cards .yn-review-item{
  padding: 6px 8px;
}


.yn-review-cards .yn-review-top{
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.yn-review-cards .yn-review-image{
  max-width: 150px;
  width: 100%;
  height: auto;
  display: block;
}

.yn-review-cards img[src*="google-reviews"]{
  max-width: 135px;
}

.yn-review-cards .yn-review-score{
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.yn-review-cards .yn-review-rating{
  font-size: 19px;
  font-weight: 700;
}

.yn-review-cards .yn-review-sep{
  opacity: .3;
  font-weight: 600;
}

.yn-review-cards .yn-review-count{
  font-size: 13px;
  font-weight: 500;
  opacity: .75;
}

.yn-review-cards .yn-review-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  opacity: .85;
}

/* Mobile */
@media (max-width: 991px){
  .yn-review-cards{
    margin-top: -40px;        
  }

  .yn-review-cards > .container{
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .yn-review-cards .yn-review-wrap{
    padding: 22px 18px;
  }
}

.yn-review-cards .yn-review-item{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yn-review-cards .yn-review-top{
  min-height: 44px;      
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.yn-review-cards .yn-review-score{
  min-height: 24px;
  margin-bottom: 6px;
}

.yn-review-cards .yn-review-note{
  min-height: 40px;     
}

.yn-review-cards img[src*="trustpilot"]{
  transform: scale(1.08) translateY(-5px);
}


/* =========================================================
   YourNode Pricing — FULL CSS (tuned)
   - Ruimte boven titel (tussen reviews en titel) iets meer
   - Afstand selector -> pakketten (rode lijn) veel kleiner
   - Selector groter
   - Compact cards (geen uitrekken / geen mega lege vlakken)
   - Aanbevolen ribbon steekt omhoog, duwt niet
   - Disclaimer altijd zichtbaar
   - Remove ONLY blue hover background (keep lift/shadow)
   - Icons never turn black on hover
   Scope: .yn-pricing
   ========================================================= */

:root{
  --yn-blue:#153462;
  --yn-blue-soft:rgba(21,52,98,.16);
  --yn-blue-soft2:rgba(21,52,98,.08);
  --yn-text:#0f172a;
  --yn-muted:rgba(15,23,42,.65);
  --yn-border:rgba(15,23,42,.10);
}

/* =========================================================
   Section spacing
   ========================================================= */
.yn-pricing{
  padding-top: 64px !important;     /* meer ruimte tussen reviews en titel */
  padding-bottom: 24px !important;
}

/* Heading: 1 regel op desktop */
.yn-pricing .heading2 h2{
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(28px, 3.0vw, 44px);
  text-align: center;
}
@media (max-width: 768px){
  .yn-pricing .heading2 h2{ white-space: normal; }
}

/* Compacter onder heading */
.yn-pricing .heading2 p.mt-16{
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

/* =========================================================
   Billing toggle (groter) + compacter naar kaarten
   ========================================================= */
.yn-pricing .yn-billing-toggle{
  display:flex;
  justify-content:center;
  margin: 8px 0 4px !important;      /* compacter */
}

.yn-pricing .yn-billing-pill{
  display:inline-flex;
  align-items:center;
  gap:12px !important;
  padding: 10px 12px !important;     /* groter */
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(8px);
}

.yn-pricing .yn-billing-btn{
  appearance:none;
  border:0;
  background: transparent;
  cursor:pointer;
  padding: 12px 18px !important;     /* groter */
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px !important;
  color: rgba(15,23,42,.70);
  line-height: 1;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}

.yn-pricing .yn-billing-btn:hover{ transform: translateY(-1px); }

.yn-pricing .yn-billing-btn.is-active{
  background: rgba(21,52,98,.12);
  color: var(--yn-blue);
}

.yn-pricing .yn-billing-note{
  display:inline-flex;
  align-items:center;
  margin-left: 6px;
  padding: 10px 12px !important;     /* groter */
  border-radius: 999px;
  font-size: 13px !important;
  font-weight: 900;
  background: rgba(21,52,98,.08);
  border: 1px solid rgba(21,52,98,.16);
  color: var(--yn-blue);
}

.yn-pricing .yn-billing-hint{
  text-align:center;
  margin: 4px 0 0 !important;        /* compacter */
  margin-bottom: 0 !important;       /* FIX rode lijn: geen extra gap */
  font-size: 13px;
  color: rgba(15,23,42,.65);
}

/* =========================================================
   FIX: afstand selector -> pakketten (rode lijn)
   - Bootstrap mt-30 + cards margins stapelen op
   ========================================================= */

/* Bootstrap row.mt-30 terugbrengen */
.yn-pricing .row.mt-30{
  margin-top: 6px !important;        /* was groot; nu strak */
}

/* Cards row zelf geen extra top margin */
.yn-pricing .yn-pricing-cards{
  margin-top: 0 !important;          /* FIX rode lijn */
  margin-bottom: 22px !important;
  position: relative;
  z-index: 2;
}

/* Ook de kolommen zelf compacter dan mt-30 */
.yn-pricing .yn-pricing-cards > [class*="col-"].mt-30{
  margin-top: 14px !important;       /* was 30px */
}

/* Disclaimer row altijd erboven */
.yn-pricing .yn-pricing-disclaimer-row{
  position: relative;
  z-index: 5;
  margin-top: 0 !important;
}

/* =========================================================
   Remove ONLY blue hover background (keep lift/shadow)
   ========================================================= */
.yn-pricing .page-pricing-box:hover,
.yn-pricing .page-pricing-box:focus,
.yn-pricing .page-pricing-box:focus-within{
  background-image: none !important;
}

.yn-pricing .page-pricing-box:hover::before,
.yn-pricing .page-pricing-box:hover::after,
.yn-pricing .page-pricing-box:focus::before,
.yn-pricing .page-pricing-box:focus::after,
.yn-pricing .page-pricing-box:focus-within::before,
.yn-pricing .page-pricing-box:focus-within::after{
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Theme hover tekst reset (niet iconen) */
.yn-pricing .page-pricing-box:hover :where(p,h1,h2,h3,h4,h5,h6,span,small,li,a,strong,em){
  color: inherit !important;
}

/* Icon kleuren vastzetten (nooit zwart) */
.yn-pricing .pricing-list .check i{ color:#fff !important; }
.yn-pricing .pricing-list .check.yn-ico-off i{ color: rgba(15,23,42,.70) !important; }
.yn-pricing .yn-tip i{ color: var(--yn-blue) !important; }
.yn-pricing .yn-badge i{ color: inherit !important; }

/* =========================================================
   Featured ribbon (Aanbevolen) — steekt omhoog, duwt niet
   ========================================================= */
.yn-pricing .yn-plan{ position: relative; }

.yn-pricing .yn-plan-featured{
  transform: translateY(-6px);
}

.yn-pricing .yn-recommended{
  position: absolute;
  left: 14px;
  right: 14px;
  top: -34px;
  height: 40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .2px;
  color:#fff;
  border-radius: 14px;
  background: linear-gradient(
    90deg,
    rgba(21,52,98,1) 0%,
    rgba(21,52,98,.92) 60%,
    rgba(21,52,98,.84) 100%
  );
  box-shadow: 0 10px 22px rgba(21,52,98,.22);
  z-index: 9;
}

/* =========================================================
   Badgebar (Gratis domeinnaam)
   ========================================================= */
.yn-pricing .yn-badgebar{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  z-index: 6;
  pointer-events:none;
}

.yn-pricing .yn-badges-left,
.yn-pricing .yn-badges-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.yn-pricing .yn-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  line-height:1;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--yn-border);
  color: var(--yn-text);
  backdrop-filter: blur(8px);
}

.yn-pricing .yn-badge--promo{
  background: rgba(21,52,98,.08);
  border-color: rgba(21,52,98,.16);
  color: var(--yn-blue);
}

/* =========================================================
   Price block (compact)
   ========================================================= */
.yn-pricing .yn-price-inline{
  text-align: center;
  padding: 56px 18px 12px;
}

.yn-pricing .yn-price-main{
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  line-height: 1;
}

.yn-pricing .yn-price-euro{
  font-size: 17px;
  font-weight: 900;
  opacity: .9;
  transform: translateY(-4px);
}

.yn-pricing .yn-price-value{
  font-size: 50px;
  font-weight: 950;
  letter-spacing: -0.03em;
  color: var(--yn-text);
}

.yn-pricing .yn-price-period{
  font-size: 13px;
  font-weight: 800;
  opacity: .75;
  color: var(--yn-muted);
}

.yn-pricing .yn-price-meta{
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(15,23,42,.60);
}

.yn-pricing .yn-meta-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.yn-pricing .yn-save{
  display:inline-flex;
  align-items:center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--yn-blue);
  background: rgba(21,52,98,.08);
  border: 1px solid rgba(21,52,98,.16);
}

/* =========================================================
   Lists (compact)
   ========================================================= */
.yn-pricing .pricing-list ul{
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.yn-pricing .pricing-list li{ margin: 0 !important; }

/* List icons */
.yn-pricing .pricing-list .check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background: var(--yn-blue);
  flex: 0 0 22px;
}
.yn-pricing .pricing-list .check i{
  color:#fff;
  font-size: 12px;
}
.yn-pricing .pricing-list .check.yn-ico-off{
  background: rgba(15,23,42,.14);
}

/* Speed row */
.yn-pricing .yn-speed-li{ align-items:center; }
.yn-pricing .yn-li-label{ white-space: nowrap; }

.yn-pricing .yn-speed{
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.yn-pricing .yn-speedbar{
  width: 128px;
  height: 9px;
  border-radius: 999px;
  background: var(--yn-blue-soft);
  position: relative;
  overflow: hidden;
}

.yn-pricing .yn-speedbar::after{
  content:"";
  position:absolute;
  inset:0;
  width: calc(var(--p) * 1%);
  background: var(--yn-blue);
  border-radius: 999px;
}

.yn-pricing .yn-speedlabel{
  font-size: 12px;
  font-weight: 800;
  color: var(--yn-blue);
}

/* Tooltip */
.yn-pricing .yn-tip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  background:transparent;
  padding:0;
  cursor: help;
  position: relative;
  z-index: 10;
}

.yn-pricing .yn-tip i{
  font-size:16px;
  color: var(--yn-blue);
  opacity:.95;
}

.yn-pricing .yn-tip::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
  width: 290px;
  max-width: 72vw;
  padding: 10px 12px;
  border-radius: 12px;
  background:#111;
  color:#fff;
  font-size:13px;
  line-height:1.4;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index:999;
}

.yn-pricing .yn-tip::before{
  content:"";
  position:absolute;
  left:50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  border:7px solid transparent;
  border-top-color:#111;
  opacity:0;
  transition: opacity .15s ease;
  pointer-events:none;
  z-index:1000;
}

.yn-pricing .yn-tip:hover::after,
.yn-pricing .yn-tip:hover::before{
  opacity:1;
}

.yn-pricing .yn-tip:hover::after{
  transform: translateX(-50%) translateY(0);
}

/* Highlight row (gratis domein) */
.yn-pricing .yn-feature-highlight{
  background: rgba(21,52,98,.05);
  border: 1px dashed rgba(21,52,98,.22);
  border-radius: 14px;
  padding: 11px 12px;
  align-items: center;
  margin-bottom: 4px;
}

.yn-pricing .yn-feature-highlight .yn-pill{
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(21,52,98,.16);
  color: var(--yn-blue);
  white-space: nowrap;
}

/* CTA spacing */
.yn-pricing .pricing-content .button{
  margin-top: 16px;
}

/* Disclaimer */
.yn-pricing .yn-pricing-disclaimer{
  font-size: 13px;
  line-height: 1.55;
  opacity: .75;
  text-align: center;
  margin-top: 0 !important;
}

/* Mobile tweaks */
@media (max-width: 480px){
  .yn-pricing{ padding-top: 48px !important; }

  .yn-pricing .yn-price-value{ font-size: 46px; }
  .yn-pricing .yn-speedbar{ width: 108px; }

  .yn-pricing .yn-billing-pill{
    padding: 9px 10px !important;
    gap: 10px !important;
  }
  .yn-pricing .yn-billing-btn{
    padding: 11px 14px !important;
    font-size: 13px !important;
  }
  .yn-pricing .yn-billing-note{
    padding: 9px 10px !important;
    font-size: 12px !important;
  }
}




/* =========================
   YourNode – Standaard voordelen
   Scoped: .yn-included
   ========================= */

:root{
  --yn-blue: #153462;
  --yn-blue-soft: rgba(21,52,98,.12);
  --yn-blue-soft2: rgba(21,52,98,.08);
}

/* Card */
.yn-included .yn-included-card{
  background: rgba(255,255,255,.9);
  border-radius: 18px;
  padding: 26px 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

/* Titel */
.yn-included .yn-included-title{
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 14px 0;
}

/* List */
.yn-included .yn-included-list{
  list-style: none;
  padding: 0;
  margin: 0;
}

.yn-included .yn-included-list li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.yn-included .yn-included-list li:last-child{
  border-bottom: 0;
}

/* Check icon in YourNode kleur */
.yn-included .yn-included-ico{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--yn-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-top: 2px;
}

.yn-included .yn-included-ico i{
  color: #fff;
  font-size: 12px;
}

/* Tooltip icon */
.yn-included .yn-tip{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--yn-blue-soft2);
  cursor: help;
  position: relative;
  z-index: 10;
  flex: 0 0 26px;
}

.yn-included .yn-tip i{
  font-size: 15px;
  color: var(--yn-blue);
  opacity: .95;
}

/* Tooltip bubble */
.yn-included .yn-tip::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(4px);
  width: 290px;
  max-width: 72vw;
  padding: 10px 12px;
  border-radius: 12px;
  background: #111;
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 999;
}

.yn-included .yn-tip::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #111;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 1000;
}

.yn-included .yn-tip:hover::after,
.yn-included .yn-tip:hover::before{
  opacity: 1;
}

.yn-included .yn-tip:hover::after{
  transform: translateX(-50%) translateY(0);
}

/* Disclaimer note */
.yn-included .yn-included-note{
  font-size: 13px;
  line-height: 1.5;
  opacity: .75;
  text-align: center;
}

/* Responsive */
@media (max-width: 991px){
  .yn-included .yn-included-card{
    padding: 22px 18px;
  }
}

/* =========================================================
   YourNode Features — 4 blocks, blue background
   Scoped: .yn-features
   ========================================================= */

:root{
  --yn-blue:#153462;
  --yn-blue-dark:#0f2a53;
  --yn-text:#0f172a;
  --yn-muted:rgba(15,23,42,.68);
  --yn-card:#ffffff;
  --yn-shadow:0 18px 55px rgba(2,10,27,.30);
}

/* Section */
.yn-features{
  position: relative;
  padding: 90px 0 100px;
  overflow: hidden;
}

/* Background */
.yn-features__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(650px 340px at 85% 35%, rgba(120,190,255,.12) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, var(--yn-blue-dark) 0%, var(--yn-blue) 100%);
  z-index: 0;
}

.yn-features .container{
  position: relative;
  z-index: 2;
}

/* Header */
.yn-features__header{
  text-align: center;
  max-width: 920px;
  margin: 0 auto 26px;
}

.yn-features__header h2{
  color:#fff;
  font-weight: 900;
  font-size: clamp(30px, 3vw, 48px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.yn-features__header p{
  color: rgba(255,255,255,.85);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
}

/* Grid */
.yn-features__grid{
  margin-top: 10px;
}

/* Card */
.yn-feature-card{
  background: rgba(255,255,255,.95);
  border-radius: 26px;
  padding: 36px 26px 34px;
  height: 100%;
  box-shadow: var(--yn-shadow);
  text-align: center;
  position: relative;
  transition: transform .18s ease, box-shadow .18s ease;
}

.yn-feature-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(2,10,27,.35);
}

/* Icon */
.yn-feature-card__icon{
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(21,52,98,.12);
  border: 1px solid rgba(21,52,98,.22);
}

.yn-feature-card__icon i{
  font-size: 26px;
  color: var(--yn-blue);
}

/* Title & text */
.yn-feature-card h3{
  font-size: 21px;
  font-weight: 900;
  margin-bottom: 12px;
  color: var(--yn-text);
}

.yn-feature-card p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--yn-muted);
  margin: 0;
}

/* Responsive */
@media (max-width: 991px){
  .yn-features{
    padding: 70px 0 80px;
  }
}

@media (max-width: 480px){
  .yn-feature-card{
    padding: 30px 22px 28px;
    border-radius: 22px;
  }
  .yn-feature-card__icon{
    width: 56px;
    height: 56px;
  }
}

/* =========================================================
   YourNode — Gratis Migratieservice
   ========================================================= */

:root{
  --yn-blue:#153462;
  --yn-blue-soft:rgba(21,52,98,.10);
  --yn-text:#0f172a;
  --yn-muted:rgba(15,23,42,.65);
}

/* Section */
.yn-migration{
  padding: 90px 0;
  background: #fff;
}

/* Visual */
.yn-migration__visual{
  position: relative;
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    rgba(21,52,98,.08),
    rgba(21,52,98,.02)
  );
  padding: 28px;
}

.yn-migration__visual img{
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.yn-migration__content{
  max-width: 520px;
}

.yn-migration__label{
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: var(--yn-blue-soft);
  color: var(--yn-blue);
}

.yn-migration__content h2{
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 16px;
  color: var(--yn-text);
}

.yn-migration__intro{
  font-size: 16px;
  line-height: 1.7;
  color: var(--yn-muted);
  margin-bottom: 20px;
}

/* Bullet list */
.yn-migration__list{
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}

.yn-migration__list li{
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 15px;
}

.yn-migration__list li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 900;
  color: var(--yn-blue);
}

/* Stats */
.yn-migration__stats{
  display: flex;
  gap: 26px;
  margin-bottom: 26px;
}

.yn-stat{
  text-align: center;
}

.yn-stat strong{
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--yn-blue);
}

.yn-stat span{
  font-size: 13px;
  color: var(--yn-muted);
}

/* Button (aansluitend bij je pricing buttons) */
.yn-btn-primary{
  display: inline-block;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--yn-blue);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}

.yn-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(21,52,98,.35);
}

/* Responsive */
@media (max-width: 991px){
  .yn-migration{
    padding: 70px 0;
  }
  .yn-migration__content{
    max-width: 100%;
  }
}

/* =========================================================
   Stronger pulse OUTSIDE badge (YourNode style)
   ========================================================= */

.yn-migration__label.yn-label-bubbles{
  position: relative !important;
  overflow: visible !important;
  isolation: isolate;
  z-index: 5;
}

/* Hoofdpulse */
.yn-migration__label.yn-label-bubbles::after{
  content:"";
  position:absolute;
  inset: -12px;
  border-radius: 999px;
  background: rgba(21,52,98,.20);      /* iets sterker */
  z-index: -1;
  animation: ynBadgePulseStrong 1.4s ease-out infinite;
}

/* Tweede, zachtere halo */
.yn-migration__label.yn-label-bubbles::before{
  content:"";
  position:absolute;
  inset: -22px;
  border-radius: 999px;
  background: rgba(21,52,98,.10);
  z-index: -2;
  animation: ynBadgePulseSoft 1.4s ease-out infinite;
}

/* Animaties */
@keyframes ynBadgePulseStrong{
  0%   { transform: scale(.88); opacity: .75; }
  60%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}

@keyframes ynBadgePulseSoft{
  0%   { transform: scale(.82); opacity: .45; }
  60%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}

/* Reduce motion respecteren */
@media (prefers-reduced-motion: reduce){
  .yn-migration__label.yn-label-bubbles::before,
  .yn-migration__label.yn-label-bubbles::after{
    animation: none !important;
  }
}

/* =========================================================
   YourNode FAQ tweaks
   ========================================================= */

.yn-faq .yn-faq-visual .image{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Maak afbeelding groter (desktop) */
@media (min-width: 992px){
  .yn-faq .yn-faq-visual img{
    width: 165%;
    max-width: 740px;   /* limiet zodat het nooit idioot groot wordt */
    height: auto;
    transform: translateX(4%); /* subtiel richting rechterkant zoals in screenshot */
  }
}

@media (max-width: 991px){
  .yn-faq .yn-faq-visual img{
    width: 100%;
    max-width: 520px;
    height: auto;
  }
}

/* ==========================================================
   YourNode – Domain prijzen & populaire extensies
   Gebruikt VOLLEDIG het theme-font (geen font-family)
   ========================================================== */

/* =========================
   Section wrapper
   ========================= */

.yn-domainblock{
  padding: 70px 0;
  position: relative;
  background: #fff;
  overflow: hidden; /* voorkomt doorsijpelende glows */
}

/* Titel */
.yn-domainblock h2{
  text-align: center;
  font-weight: 800;
  margin-bottom: 32px;
}

/* =========================
   Kill ongewenste glow/vlek
   ========================= */

/* Alles binnen dit block mag geen overlay of filter krijgen */
.yn-domainblock *,
.yn-domainblock *::before,
.yn-domainblock *::after{
  filter: none !important;
  box-shadow: none;
}

/* =========================
   Populaire extensies
   ========================= */

.yn-popular-section{
  margin-bottom: 60px;
}

/* Grid altijd netjes gecentreerd */
.yn-popular-domains{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Card */
.yn-popular-card{
  background: #fff;
  border-radius: 22px;
  padding: 26px 18px;
  text-align: center;
  border: 1px solid rgba(21,52,98,.12);
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.yn-popular-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(15,23,42,.14);
}

.yn-popular-card .tld{
  font-size: 42px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* Prijs pill */
.yn-popular-card .price{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(21,52,98,.10);
  border: 1px solid rgba(21,52,98,.18);
  font-weight: 700;
  margin-bottom: 14px;
}

.yn-popular-card .per{
  opacity: .7;
  font-weight: 600;
}

/* Link */
.yn-popular-card a{
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* =========================
   Prijzentabel
   ========================= */

.yn-pricetable{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.yn-pricetable__card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(21,52,98,.12);
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
}

/* Header */
.yn-pricetable__head{
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 140px;
  background: linear-gradient(90deg, #153462, #2b6fd6);
  color: #fff;
  padding: 16px 18px;
  font-weight: 700;
}

.yn-pricetable__head > div{
  text-align: center;
}

.yn-pricetable__head > div:first-child{
  text-align: left;
}

.yn-pricetable__head > div:last-child{
  text-align: right;
}

/* Rows */
.yn-pricetable__row{
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 140px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.yn-pricetable__row:nth-child(even){
  background: rgba(246,248,252,.6);
}

/* TLD */
.yn-pricetable__tld{
  font-weight: 700;
}

/* Price cell */
.yn-pricetable__cell{
  text-align: center;
}

.yn-pricetable__amount{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.yn-pricetable__period{
  font-size: 12px;
  opacity: .7;
}

/* Action */
.yn-pricetable__action{
  text-align: right;
}

.yn-pricetable__action a{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(21,52,98,.10);
  border: 1px solid rgba(21,52,98,.18);
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* =========================
   Meer zien
   ========================= */

.yn-pricetable__footer{
  text-align: center;
  margin-top: 24px;
}

.yn-pricetable__more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.yn-pricetable__more:hover{
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 768px){
  .yn-pricetable__head{
    display: none;
  }

  .yn-pricetable__row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .yn-pricetable__cell,
  .yn-pricetable__action{
    text-align: left;
  }
}

/* ==========================================================
   Domain pricelist – CSS (theme font)
   ========================================================== */

.yn-domainblock{
  padding: 70px 0;
  position: relative;
  background: #fff;
  overflow: hidden;
}

.yn-domainblock__container{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.yn-domainblock__title{
  text-align: center;
  font-weight: 800;
  margin: 0 0 28px;
}

.yn-domainblock__spacer{
  height: 55px;
}

/* Populaire cards grid (altijd center) */
.yn-popular-domains{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
  gap: 32px;
  margin: 0 auto;
}

.yn-popular-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(21,52,98,.12);
  box-shadow: 0 14px 36px rgba(15,23,42,.10);
  text-decoration: none;
  color: inherit;
  text-align: center;
  transition: transform .15s ease, box-shadow .15s ease;
}

.yn-popular-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 52px rgba(15,23,42,.14);
}

.yn-popular-tld{
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.yn-popular-price{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(21,52,98,.10);
  border: 1px solid rgba(21,52,98,.18);
  font-weight: 700;
}

.yn-popular-cta{
  font-weight: 700;
  opacity: .85;
}

/* Tabel wrapper */
.yn-pricetable{
  margin-top: 18px;
}

.yn-pricetable__card{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(21,52,98,.12);
  box-shadow: 0 18px 55px rgba(15,23,42,.08);
}

.yn-pricetable__head{
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 140px;
  background: linear-gradient(90deg, #153462, #2b6fd6);
  color: #fff;
  padding: 16px 18px;
  font-weight: 700;
}

.yn-pricetable__head > div{
  text-align: center;
}

.yn-pricetable__head > div:first-child{
  text-align: left;
}

.yn-pricetable__head > div:last-child{
  text-align: right;
}

.yn-pricetable__row{
  display: grid;
  grid-template-columns: 140px 1fr 1fr 1fr 140px;
  align-items: center;
  padding: 18px;
  border-bottom: 1px solid rgba(15,23,42,.06);
}

.yn-pricetable__row:nth-child(even){
  background: rgba(246,248,252,.6);
}

.yn-pricetable__row.is-hidden{
  display: none;
}

.yn-pricetable__tld{
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.yn-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  color: rgba(185,28,28,1);
}

.yn-pricetable__cell{
  text-align: center;
}

.yn-pricetable__amount{
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.yn-pricetable__period{
  font-size: 12px;
  opacity: .7;
}

.yn-pricetable__action{
  text-align: right;
}

.yn-pricetable__btn{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(21,52,98,.10);
  border: 1px solid rgba(21,52,98,.18);
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

/* Footer + meer zien */
.yn-pricetable__footer{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
}

.yn-pricetable__count{
  font-size: 12px;
  opacity: .7;
  font-weight: 700;
}

.yn-pricetable__more{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.12);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.yn-pricetable__arrow{
  display: inline-block;
  transition: transform .18s ease;
}

/* Mobile */
@media (max-width: 768px){
  .yn-pricetable__head{
    display: none;
  }

  .yn-pricetable__row{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .yn-pricetable__action,
  .yn-pricetable__cell{
    text-align: left;
  }

  .yn-popular-tld{
    font-size: 38px;
  }
}

/* =================================================
   YourNode – Domain Hero (FINAL, calm & balanced)
   ================================================= */

/* =========================
   HERO POSITION & HEIGHT
   ========================= */

/* Header is overlay → hero start eronder */
.yn-domain-hero{
  padding-top: 200px;     /* ruimte voor header */
  padding-bottom: 160px;  /* rust naar reviews */
}

/* Geen min-height rommel uit theme */
.yn-domain-hero,
.yn-domain-hero .container,
.yn-domain-hero .row{
  min-height: unset;
}

/* =========================
   CONTENT BLOCK
   ========================= */

.yn-domain-hero__content{
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

/* Titel strak */
.yn-domain-hero h2{
  margin-bottom: 6px;   /* 👈 hier zat je pijn */
  line-height: 1.25;
}

/* =========================
   DOMAIN SEARCH (PILL)
   ========================= */

.yn-domain-search-wide{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 6px;      /* 👈 nóg dichter op titel */
}

/* Zoekbalk */
.input-form.yn-domain-hero__inputform{
  width: 100%;
  max-width: 1040px;

  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px;
  border-radius: 999px;

  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

/* Input */
.input-form.yn-domain-hero__inputform input{
  flex: 1;
  height: 60px;

  background: transparent;
  border: 0;
  outline: none;

  padding: 0 18px;
  color: #fff;
  font-size: 17px;
}

.input-form.yn-domain-hero__inputform input::placeholder{
  color: rgba(255,255,255,.75);
}

/* Button */
.yn-domain-hero__button .theme-btn1{
  margin: 0;
  height: 60px;
  padding: 0 26px;
  border-radius: 999px;
  white-space: nowrap;
}

/* =========================
   USP’S & SUBTEXT
   ========================= */

.yn-domain-hero__usps{
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.yn-domain-hero__usps .hero-usp{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

/* Kleine tekst onder USP’s */
.yn-domain-hero p{
  margin-top: 10px;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px){
  .yn-domain-hero{
    padding-top: 130px;
    padding-bottom: 140px;
  }
}

@media (max-width: 767px){
  .input-form.yn-domain-hero__inputform{
    flex-direction: column;
    border-radius: 22px;
  }

  .yn-domain-hero__button .theme-btn1{
    width: 100%;
  }
}

/* =========================
   Domain / KB CTA – FINAL FIX (no overlap USPs + no ticket link)
   Scoped: .yn-domain-upsell only
   ========================= */

.yn-domain-upsell{ overflow: hidden; }

/* Text */
.yn-domain-upsell .yn-upsell-text{
  margin-bottom: 16px !important;
  max-width: 560px;
  line-height: 1.6;
}
.yn-domain-upsell .yn-upsell-note{ opacity: .9; font-weight: 500; }

/* Force CTA button placement (kill inherited absolute/transform) */
.yn-domain-upsell .cta1-form-area,
.yn-domain-upsell .yn-upsell-cta,
.yn-domain-upsell .yn-upsell-cta .button{
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.yn-domain-upsell .yn-upsell-cta .button{
  display: block !important;
  margin-top: 14px !important;
}
.yn-domain-upsell .yn-upsell-cta .theme-btn1{
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  white-space: nowrap;
}

/* =========================
   USP ROW – FIX: no collision/overlap
   Your issue happens because 3 items don't fit in 1 line when forced nowrap.
   Solution: 3 equal columns + allow wrapping inside each item.
   ========================= */
.yn-domain-upsell .yn-upsell-usp-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* equal thirds */
  column-gap: 18px !important;
  row-gap: 10px !important;
  margin-top: 18px !important;
  width: 100% !important;
  max-width: 560px; /* mag je ook weghalen als je 'm breder wil */
}

.yn-domain-upsell .yn-upsell-usp{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;            /* belangrijk voor wrapping */
  color: #fff !important;
  opacity: .95;
}

.yn-domain-upsell .yn-upsell-usp i{
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 14px;
  opacity: .9;
}

.yn-domain-upsell .yn-upsell-usp span{
  min-width: 0 !important;
  white-space: normal !important;     /* 🔥 laat tekst wrappen i.p.v. botsen */
  line-height: 1.3 !important;
}

/* Desktop robot */
.yn-domain-upsell .yn-kb-cta-robot img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Mobile robot default hidden */
.yn-domain-upsell .yn-mobile-robot{
  display: none;
  margin-top: 18px;
  justify-content: center;
}
.yn-domain-upsell .yn-mobile-robot img{
  width: min(220px, 70vw);
  height: auto;
  display: block;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 991px){
  .yn-domain-upsell .bg-area{
    height: auto !important;
    min-height: 0 !important;
    padding: 24px 16px !important;
  }

  /* Hide right column on mobile/tablet (prevents huge empty space) */
  .yn-domain-upsell .yn-kb-cta-right{
    display: none !important;
  }

  /* Show robot at bottom on mobile/tablet */
  .yn-domain-upsell .yn-mobile-robot{
    display: flex;
  }

  /* USP's mogen 1 of 2 kolommen pakken op tablet */
  .yn-domain-upsell .yn-upsell-usp-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575px){
  /* Button full width */
  .yn-domain-upsell .yn-upsell-cta .theme-btn1{
    width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }

  /* USP's onder elkaar */
  .yn-domain-upsell .yn-upsell-usp-grid{
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    margin-top: 14px !important;
  }

  .yn-domain-upsell .yn-mobile-robot img{
    width: min(200px, 78vw);
  }
}

/* =========================================================
   VOLLEDIGE CSS: assets/css/yn-header-mega.css
   - Namespaced mega menus (breekt theme niet)
   - Hosting/Domein: tile-style + snel-naar
   - Over ons: premium v5 layout
   ========================================================= */

:root{
  --yn-blue:#153462;
  --yn-ink:#0b1b33;
  --yn-muted:#4a5d78;
}

/* voorkom clipping */
#vl-header-sticky,
.vl-header-area1,
.header1-bg,
.yn-header-row{
  overflow: visible;
}

.yn-mm{ position: relative; }

/* Desktop */
@media (min-width: 992px){

  /* theme dropdown weg op desktop */
  .yn-mm > .sub-menu{ display:none !important; }

  /* hover bridge */
  .yn-mm::after{
    content:"";
    position:absolute;
    left:-14px;
    right:-14px;
    top:100%;
    height:26px;
    background:transparent;
  }

  /* panel */
  .yn-mm__panel{
    position:absolute;
    left:50%;
    top:calc(100% + 10px);
    transform:translateX(-50%);
    width:min(980px, calc(100vw - 32px));

    background:#fff;
    border:1px solid rgba(21,52,98,.14);
    border-radius:20px;
    box-shadow:0 22px 70px rgba(0,0,0,.18);

    padding:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
    z-index:9999;
  }

  .yn-mm__panel::before{
    content:"";
    position:absolute;
    top:-10px;
    left:50%;
    transform:translateX(-50%);
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:10px solid #fff;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.14));
  }

  .yn-mm:hover .yn-mm__panel,
  .yn-mm:focus-within .yn-mm__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(2px);
  }

  /* harde readability fix */
  .yn-mm .yn-mm__panel{ color: var(--yn-ink) !important; }
  .yn-mm .yn-mm__panel *{
    opacity: 1 !important;
    filter:none !important;
    text-shadow:none !important;
  }
  .yn-mm .yn-mm__panel a{
    color: var(--yn-ink) !important;
    text-decoration:none !important;
  }

  /* inner split */
  .yn-mm__inner{
    display:grid;
    grid-template-columns: 1.25fr .75fr;
    min-height: 330px;
  }

  /* LEFT tiles */
  .yn-mm__left--tiles{
    padding: 18px;
    display:grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }

  .yn-mm__tile{
    border-radius: 16px;
    padding: 14px 14px;
    background:#fff;
    border:1px solid rgba(21,52,98,.12);
    box-shadow:0 12px 30px rgba(0,0,0,.06);

    display:grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items:center;

    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  }

  .yn-mm__tile:hover{
    transform: translateY(-2px);
    border-color: rgba(21,52,98,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.10);
  }

  .yn-mm__tileIcon{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    background: rgba(21,52,98,.08);
    border: 1px solid rgba(21,52,98,.14);
    color: var(--yn-blue) !important;
    font-size: 16px;
  }

  .yn-mm__tileTitle{
    display:block;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--yn-ink) !important;
  }

  .yn-mm__tileDesc{
    display:block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--yn-muted) !important;
  }

  .yn-mm__tileArrow{
    color: var(--yn-blue) !important;
    font-size: 12px;
  }

  /* RIGHT quick links */
  .yn-mm__right{
    padding: 18px;
    background: rgba(21,52,98,.03);
    border-left: 1px solid rgba(21,52,98,.10);
  }

  .yn-mm__rightHead{
    font-weight: 800;
    font-size: 13px;
    color: var(--yn-blue) !important;
    margin-bottom: 12px;
  }

  .yn-mm__quick{
    display:flex;
    align-items:center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    font-weight: 700;
    transition: background .12s ease, transform .12s ease;
  }

  .yn-mm__quick i{
    color: var(--yn-blue) !important;
    font-size: 12px;
  }

  .yn-mm__quick span{
    color: var(--yn-ink) !important;
  }

  .yn-mm__quick:hover{
    background: rgba(21,52,98,.06);
    transform: translateX(2px);
  }

  /* =========================================================
     ABOUT v5 (premium, andere look)
     ========================================================= */
  .yn-mm__panel--about{
    width: min(980px, calc(100vw - 32px));
  }

  .yn-about-v5{
    padding: 18px;
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 14px;
  }

  .yn-about-v5__intro{
    border-radius: 18px;
    padding: 18px;
    background: linear-gradient(180deg, rgba(21,52,98,.06), rgba(21,52,98,.02));
    border: 1px solid rgba(21,52,98,.12);
  }

  .yn-about-v5__kicker{
    font-weight: 800;
    font-size: 12px;
    color: var(--yn-blue) !important;
    letter-spacing: .2px;
  }

  .yn-about-v5__title{
    margin-top: 8px;
    font-weight: 800;
    font-size: 18px;
    line-height: 1.22;
    color: var(--yn-ink) !important;
  }

  .yn-about-v5__sub{
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--yn-muted) !important;
    max-width: 60ch;
  }

  .yn-about-v5__chips{
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .yn-about-v5__chip{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.85);
    border: 1px solid rgba(21,52,98,.14);
    color: var(--yn-ink) !important;
    font-size: 12px;
    font-weight: 700;
  }

  .yn-about-v5__chip i{
    color: var(--yn-blue) !important;
    font-size: 12px;
  }

  .yn-about-v5__primary{
    margin-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;

    background: #fff;
    border: 1px solid rgba(21,52,98,.16);
    box-shadow: 0 10px 26px rgba(0,0,0,.08);

    color: var(--yn-blue) !important;
    font-weight: 800;
    text-decoration: none !important;
  }

  .yn-about-v5__primary i{ font-size: 12px; }
  .yn-about-v5__primary:hover{ transform: translateY(-1px); }

  .yn-about-v5__tiles{
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
  }

  .yn-about-v5__tile{
    border-radius: 16px;
    padding: 14px 14px;
    background: #fff;
    border: 1px solid rgba(21,52,98,.12);
    box-shadow: 0 12px 30px rgba(0,0,0,.06);

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
  }

  .yn-about-v5__tile:hover{
    transform: translateY(-2px);
    border-color: rgba(21,52,98,.22);
    box-shadow: 0 18px 44px rgba(0,0,0,.10);
  }

  .yn-about-v5__tileTop{
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 12px;
    align-items: center;
  }

  .yn-about-v5__ico{
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(21,52,98,.08);
    border: 1px solid rgba(21,52,98,.14);
    color: var(--yn-blue) !important;
    font-size: 16px;
  }

  .yn-about-v5__tileTitle{
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    color: var(--yn-ink) !important;
  }

  .yn-about-v5__tileDesc{
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--yn-muted) !important;
  }

  .yn-about-v5__tileArrow{
    margin-top: 10px;
    display: inline-flex;
    justify-content: flex-end;
    color: var(--yn-blue) !important;
    font-size: 12px;
  }

  .yn-about-v5__tileMeta{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--yn-muted) !important;
    font-size: 12px;
    font-weight: 700;
  }

  .yn-about-v5__tileMeta i{
    color: var(--yn-blue) !important;
    font-size: 12px;
    margin-right: 6px;
  }
}

/* Mobile: panels uit, offcanvas gebruikt sub-menu */
@media (max-width: 991.98px){
  .yn-mm__panel{ display:none !important; }
}

/* =========================
   YourNode – Misbruik melden
   Scoped styling: alleen #abuse
   ========================= */

#abuse {
  --yn-primary: #153462;
  --yn-primary-dark: #0f2749;
  --yn-bg: #f6f8fb;
  --yn-card: #ffffff;
  --yn-border: rgba(21, 52, 98, 0.14);
  --yn-text: #0f172a;
  --yn-muted: rgba(15, 23, 42, 0.72);
  --yn-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}

/* Section spacing (als ptb-100 niet consistent is) */
#abuse.contact-us-section {
  padding: 90px 0;
}

/* Heading block */
#abuse .text-center h2 {
  color: var(--yn-text);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

#abuse .text-center .lead {
  color: var(--yn-muted);
  max-width: 720px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Form card */
#abuse #abuse-form-container.contact-us-form-wrap {
  background: var(--yn-card) !important;
  border: 1px solid var(--yn-border);
  border-radius: 18px;
  box-shadow: var(--yn-shadow);
  padding: 32px !important; /* overrides p-5 if needed */
  text-align: left !important; /* overrides text-center */
}

/* Alerts */
#abuse .alert {
  border-radius: 14px;
  border: 1px solid var(--yn-border);
  padding: 14px 16px;
  font-weight: 600;
  line-height: 1.5;
}
#abuse .alert a { color: var(--yn-primary); text-decoration: underline; }

/* Labels */
#abuse .contact-us-form label {
  display: inline-block;
  font-weight: 700;
  color: var(--yn-text);
  margin-bottom: 8px;
}

/* Inputs */
#abuse .contact-us-form .form-control,
#abuse .contact-us-form .form-select,
#abuse .contact-us-form select,
#abuse .contact-us-form input,
#abuse .contact-us-form textarea {
  width: 100%;
  border: 1px solid var(--yn-border);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  color: var(--yn-text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

/* Textarea polish */
#abuse .contact-us-form textarea {
  resize: vertical;
  min-height: 160px;
}

/* Placeholder */
#abuse .contact-us-form ::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

/* Focus */
#abuse .contact-us-form .form-control:focus,
#abuse .contact-us-form .form-select:focus,
#abuse .contact-us-form input:focus,
#abuse .contact-us-form textarea:focus,
#abuse .contact-us-form select:focus {
  outline: none;
  border-color: rgba(21, 52, 98, 0.55);
  box-shadow: 0 0 0 4px rgba(21, 52, 98, 0.12);
}

/* Form group spacing */
#abuse .contact-us-form .form-group {
  margin-bottom: 18px;
}

/* Input group (landcode + nummer) */
#abuse .input-group {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

#abuse .input-group .form-select {
  max-width: 180px;
  flex: 0 0 auto;
}

#abuse .input-group .form-control {
  flex: 1 1 auto;
  min-width: 0;
}

/* Small helper text */
#abuse .form-text,
#abuse small.form-text {
  display: block;
  margin-top: 8px;
  color: rgba(15, 23, 42, 0.55) !important;
  font-weight: 600;
}

/* Button */
#abuse .btn.btn-primary,
#abuse #btnAbuseSubmit {
  background: var(--yn-primary);
  border: 1px solid var(--yn-primary);
  color: #fff;
  border-radius: 14px;
  padding: 12px 20px;
  font-weight: 800;
  letter-spacing: 0.2px;
  box-shadow: 0 10px 20px rgba(21, 52, 98, 0.18);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

#abuse .btn.btn-primary:hover,
#abuse #btnAbuseSubmit:hover {
  background: var(--yn-primary-dark);
  border-color: var(--yn-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(21, 52, 98, 0.24);
}

#abuse .btn.btn-primary:active,
#abuse #btnAbuseSubmit:active {
  transform: translateY(0);
  box-shadow: 0 10px 18px rgba(21, 52, 98, 0.18);
}

/* Make the submit area feel centered even though form is left-aligned */
#abuse .contact-us-form .text-center {
  text-align: center;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 991px) {
  #abuse.contact-us-section { padding: 70px 0; }
  #abuse #abuse-form-container.contact-us-form-wrap { padding: 24px !important; }
}

@media (max-width: 575px) {
  #abuse #abuse-form-container.contact-us-form-wrap { border-radius: 16px; }
  #abuse .input-group { flex-direction: column; gap: 10px; }
  #abuse .input-group .form-select { max-width: 100%; }
  #abuse .btn.btn-primary, #abuse #btnAbuseSubmit { width: 100%; }
}

/* ======= Polish voor abuse formulier ======= */
#abuse .contact-us-form label{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(15, 23, 42, 0.9);
}

#abuse .contact-us-form .form-control,
#abuse .contact-us-form .form-select{
  height: 48px;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 15px;
}

#abuse .contact-us-form textarea.form-control{
  height: auto;
  padding: 14px 14px;
  line-height: 1.6;
}

#abuse .contact-us-form .form-group{
  margin-bottom: 16px;
}

/* Select: nettere caret + wat meer “premium” */
#abuse .contact-us-form .form-select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23153462' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  padding-right: 44px;
}

/* Kleine helpertekst iets netter */
#abuse .form-text{
  font-size: 13px;
  font-weight: 600;
}

/* ===== Keuzehulp Popup ===== */
.yn-choice-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.65);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.yn-choice-overlay.active{ display:flex; }

.yn-choice-modal{
  background:#fff;
  width:100%;
  max-width:520px;
  border-radius:20px;
  padding:32px;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.yn-choice-close{
  position:absolute;
  top:14px;
  right:16px;
  background:none;
  border:0;
  font-size:28px;
  cursor:pointer;
}

.yn-choice-head h2{ font-weight:800; margin-bottom:6px; }
.yn-choice-head p{ color:#64748b; }

.yn-step{ display:none; margin-top:24px; }
.yn-step.is-active{ display:block; }

.yn-step label{
  display:block;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:12px;
  cursor:pointer;
  font-weight:600;
}

.yn-step input{ margin-right:10px; }

.yn-choice-actions{
  display:flex;
  justify-content:space-between;
  margin-top:24px;
}

@media(max-width:576px){
  .yn-choice-modal{ margin:0 14px; padding:24px; }
}

/* =========================================================
   HOME CATEGORY PRICING – addon
   Leunt op jouw bestaande .yn-pricing / .page-pricing-box CSS
   Zet dit NA je originele pricing stylesheet
   ========================================================= */

.yn-catpricing .yn-catplan {
  /* niets forceren: jouw originele card-styling blijft leidend */
}

/* Verwijder de “Meest gekozen” balk als je .yn-plan-featured die toevoegt */
.yn-catpricing .yn-recommended { display: none !important; }

/* “Vanaf” label in dezelfde rij als je price-inline */
.yn-catpricing .yn-catprice-inline .yn-price-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: center; /* pricing cards zijn vaak gecentreerd bij price */
}

.yn-catpricing .yn-catfrom {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-right: 2px;
}

/* CTA als pill (als je originele .yn-cta al pill is, doet dit niks) */
.yn-catpricing .yn-catcta {
  width: 100%;
  text-align: center;
  border-radius: 999px;
}

/* Actions zone onderaan dezelfde vibe als pricing */
.yn-catpricing .yn-cat-actions {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Link onder de knop */
.yn-catpricing .yn-catlink {
  font-weight: 900;
  color: inherit;
  text-decoration: none;
}
.yn-catpricing .yn-catlink:hover {
  text-decoration: underline;
}

/* =========================================================
   YourNode - Duurzaamheid sectie (FEATURES)
   - Subtiele noise achtergrond alleen voor deze sectie
   - Blauwe geanimeerde wave blijft theme-kleur houden (stop-color1/2)
   - Robot staat meer naar rechts (desktop), mobiel netjes gecentreerd
   - Geen overlap met volgende sectie (overflow hidden op sectie)
   - Geen afkappen van robot/schep (voldoende min-height + padding)
   ========================================================= */

/* ===== Sectie achtergrond ===== */
.features.yn-duurzaamheid{
  position: relative;
  background-image: url("assets/img/bg/noise-bg1.jpg");
  background-repeat: repeat;
  background-size: auto;
  background-color: #f7f9fc; /* fallback + subtiele tint */
  overflow: hidden;          /* KEY: voorkomt dat wave in volgende sectie valt */
}

/* Content boven background */
.features.yn-duurzaamheid .container{
  position: relative;
  z-index: 2;
}

/* ===== Rechter visual container ===== */
.features.yn-duurzaamheid .features-images{
  position: relative;
  min-height: 560px;     /* ruimte voor robot + schep */
  padding-bottom: 40px;  /* extra lucht onderin */
}

/* ===== Robot wrapper ===== */
.features.yn-duurzaamheid .features-images .image1{
  position: relative;
  z-index: 3;                   /* robot boven wave */
  display: flex;
  justify-content: flex-end;     /* robot meer naar rechts */
  align-items: flex-end;
  padding-right: 40px;           /* finetune desktop */
  overflow: visible !important;
}

/* Robot image */
.features.yn-duurzaamheid .features-images .image1 img{
  width: min(560px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.14));
}

/* Theme reveal/overflow reset (sommige themes zetten overflow hidden) */
.features.yn-duurzaamheid .features-images .reveal,
.features.yn-duurzaamheid .features-images .overflow-hidden{
  overflow: visible !important;
}

/* ===== Blauwe wave (achter robot) ===== */
.features.yn-duurzaamheid .features-images .shape-bg2{
  position: absolute;
  right: -60px;
  top: -40px;
  width: 720px;
  height: 600px;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
}

.features.yn-duurzaamheid .features-images .shape-bg2 svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* (optioneel) oude shapes uit, als ze nog in je HTML staan */
.features.yn-duurzaamheid .sec-shape,
.features.yn-duurzaamheid .sec-shape2{
  display: none !important;
}

/* =========================
   Responsive (tablet/mobiel)
   ========================= */
@media (max-width: 991px){
  .features.yn-duurzaamheid{
    padding-bottom: 10px;
  }

  .features.yn-duurzaamheid .features-images{
    min-height: 440px;
    margin-top: 28px;
    padding-bottom: 28px;
  }

  /* Mobiel: robot weer centreren */
  .features.yn-duurzaamheid .features-images .image1{
    justify-content: center;
    padding-right: 0;
  }

  .features.yn-duurzaamheid .features-images .shape-bg2{
    right: -30px;
    top: -20px;
    width: 560px;
    height: 460px;
  }

  .features.yn-duurzaamheid .features-images .image1 img{
    width: min(420px, 100%);
  }
}

@media (max-width: 575px){
  .features.yn-duurzaamheid .features-images{
    min-height: 400px;
  }

  .features.yn-duurzaamheid .features-images .shape-bg2{
    right: -20px;
    top: -15px;
    width: 500px;
    height: 420px;
  }
}

/* ===== Help CTA onder pricing ===== */
.yn-helpcta{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 80px; /* EXTRA witte ruimte eronder */
}

.yn-helpcta__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  border-radius: 22px;

  /* zelfde look & feel als pricing cards */
  background: #f4f7fb;
  border: 1px solid #e4ebf3;
}

.yn-helpcta__left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.yn-helpcta__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(21, 52, 98, 0.08);
  color: #153462;
  flex: 0 0 44px;
}

.yn-helpcta__title{
  font-weight: 800;
  font-size: 16px;
  color: #0f172a;
  line-height: 1.2;
}

.yn-helpcta__sub{
  font-size: 14px;
  color: rgba(15, 23, 42, 0.7);
  margin-top: 3px;
  max-width: 520px;
}

.yn-helpcta__actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* Buttons */
.yn-helpcta__btn{
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

/* Secondary = keuzehulp */
.yn-helpcta__btn--secondary{
  background: #e9f1ff;
  color: #153462;
}

.yn-helpcta__btn--secondary:hover{
  background: #dbe8ff;
}

/* Primary = livechat */
.yn-helpcta__btn--primary{
  background: #153462;
  color: #fff;
}

.yn-helpcta__btn--primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(21, 52, 98, 0.25);
}

.yn-helpcta__btn:active{
  transform: translateY(0);
}

/* Mobile */
@media (max-width: 767px){
  .yn-helpcta__inner{
    flex-direction: column;
    align-items: flex-start;
  }

  .yn-helpcta__actions{
    width: 100%;
    flex-direction: column;
  }

  .yn-helpcta__btn{
    width: 100%;
    text-align: center;
  }
}