/* High-end converting homepage */
.home-v2{
  background:
    radial-gradient(circle at 12% 5%, rgba(32,134,255,.20), transparent 34%),
    radial-gradient(circle at 90% 18%, rgba(53,212,134,.10), transparent 28%),
    linear-gradient(180deg,#030b18 0%,#06142a 48%,#071634 100%);
  min-height:100vh;
}
.home-v2-hero{
  padding:72px 0 56px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.home-v2-hero-grid{
  display:grid;
  grid-template-columns:1.1fr .78fr;
  gap:54px;
  align-items:center;
}
.home-v2-copy h1{
  max-width:870px;
  font-size:clamp(46px,6vw,82px);
  line-height:.98;
  letter-spacing:-.06em;
  margin:0 0 24px;
}
.home-v2-copy .lead{
  max-width:760px;
  font-size:22px;
  line-height:1.55;
  color:#dbe7ff;
}
.home-v2-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:30px;
}
.hero-btn{
  font-size:18px;
  padding:16px 24px;
}
.hero-btn-secondary{
  font-size:18px;
  padding:16px 24px;
}
.home-v2-trust{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:22px;
  color:#dbe7ff;
  font-weight:900;
}
.home-v2-score-card{
  border:1px solid rgba(32,134,255,.28);
  background:
    radial-gradient(circle at 50% 0%, rgba(32,134,255,.22), transparent 36%),
    rgba(255,255,255,.045);
  border-radius:28px;
  padding:30px;
  box-shadow:0 28px 90px rgba(0,0,0,.34);
}
.score-card-top{
  text-align:center;
}
.score-card-top span{
  color:#39a7ff;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.08em;
}
.score-card-top strong{
  display:block;
  font-size:68px;
  letter-spacing:-.06em;
  color:#35d486;
  margin:10px 0 4px;
}
.score-card-top p{
  color:#dbe7ff;
}
.score-bars{
  display:grid;
  gap:12px;
  margin:24px 0;
}
.score-bars div{
  display:grid;
  gap:8px;
}
.score-bars span{
  color:#b9c6df;
  font-size:13px;
}
.score-bars div:after{
  content:"";
  display:block;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  grid-row:2;
}
.score-bars i{
  display:block;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#1685ff,#35d486);
  grid-row:2;
  margin-top:-18px;
}
.score-card-foot{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.score-card-foot div{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:16px;
  padding:14px 10px;
  text-align:center;
}
.score-card-foot strong{
  display:block;
  color:#fff;
  font-size:24px;
}
.score-card-foot span{
  color:#b9c6df;
  font-size:12px;
}
.home-v2-problem,
.home-v2-outcomes,
.home-v2-flow,
.home-v2-live,
.home-v2-audience,
.home-v2-pricing,
.home-v2-final{
  margin-top:28px;
}
.problem-card,
.flow-panel,
.audience-panel,
.final-panel{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:26px;
  padding:32px;
  box-shadow:0 20px 70px rgba(0,0,0,.20);
}
.problem-card{
  border-color:rgba(255,199,44,.26);
  background:
    radial-gradient(circle at 90% 0%, rgba(255,199,44,.10), transparent 30%),
    rgba(255,255,255,.04);
}
.problem-card h2,
.flow-panel h2,
.audience-panel h2,
.final-panel h2{
  font-size:clamp(30px,3.4vw,48px);
  letter-spacing:-.04em;
  margin:6px 0 20px;
}
.problem-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.problem-list div,
.outcome-card,
.live-card,
.price-card-v2{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:18px;
  padding:20px;
}
.problem-list strong,
.outcome-card h3,
.live-card strong,
.price-card-v2 h3{
  color:#fff;
}
.problem-list span,
.outcome-card p,
.live-card p,
.price-card-v2 p{
  color:#b9c6df;
  line-height:1.6;
}
.problem-list span{
  display:block;
  margin-top:8px;
}
.outcome-grid,
.live-grid,
.home-v2-price-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.outcome-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(32,134,255,.14);
  color:#48a7ff;
  font-weight:950;
  margin-bottom:16px;
}
.outcome-card h3{
  font-size:24px;
  margin:0 0 8px;
}
.flow-panel{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:30px;
  align-items:center;
}
.flow-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.flow-steps div{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:18px;
  padding:18px;
}
.flow-steps span{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#1685ff;
  color:#fff;
  font-weight:950;
  margin-bottom:12px;
}
.flow-steps strong{
  color:#fff;
  display:block;
  margin-bottom:8px;
}
.flow-steps p{
  color:#b9c6df;
  margin:0;
  line-height:1.5;
}
.live-card span{
  color:#b9c6df;
  display:block;
  margin-bottom:8px;
}
.live-card strong{
  display:block;
  font-size:42px;
  letter-spacing:-.05em;
  margin-bottom:8px;
}
.audience-panel{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  align-items:center;
}
.audience-panel ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}
.audience-panel li{
  color:#eaf2ff;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  border-radius:14px;
  padding:14px;
}
.audience-panel li:before{
  content:"✓ ";
  color:#ffc72c;
  font-weight:950;
}
.home-v2-price-grid{
  grid-template-columns:repeat(3,1fr);
}
.price-card-v2 span{
  color:#39a7ff;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.08em;
}
.price-card-v2 h3{
  font-size:26px;
  margin:10px 0;
}
.price-card-v2 strong{
  display:block;
  color:#fff;
  font-size:25px;
  margin-bottom:10px;
}
.price-card-v2.featured{
  border-color:rgba(255,199,44,.48);
  background:rgba(255,199,44,.055);
}
.final-panel{
  text-align:center;
  padding:46px 32px;
  border-color:rgba(53,212,134,.25);
  background:
    radial-gradient(circle at 50% 0%, rgba(53,212,134,.10), transparent 34%),
    rgba(255,255,255,.04);
}
.final-panel p{
  color:#dbe7ff;
  max-width:760px;
  margin:0 auto 24px;
  line-height:1.6;
}
.final-panel small{
  display:block;
  color:#9fb0cc;
  margin-top:18px;
}
@keyframes homeV2Fade{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
.home-v2-copy,
.home-v2-score-card,
.problem-card,
.outcome-card,
.flow-panel,
.live-card,
.audience-panel,
.price-card-v2,
.final-panel{
  animation:homeV2Fade .65s ease both;
}
@media(max-width:1100px){
  .home-v2-hero-grid,
  .flow-panel,
  .audience-panel{
    grid-template-columns:1fr;
  }
  .outcome-grid,
  .live-grid,
  .problem-list{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:760px){
  .home-v2-hero{
    padding:38px 0 34px;
  }
  .home-v2-copy h1{
    font-size:42px;
  }
  .home-v2-copy .lead{
    font-size:19px;
  }
  .home-v2-actions .btn{
    width:100%;
  }
  .outcome-grid,
  .live-grid,
  .problem-list,
  .flow-steps,
  .home-v2-price-grid,
  .score-card-foot{
    grid-template-columns:1fr;
  }
  .problem-card,
  .flow-panel,
  .audience-panel,
  .final-panel{
    padding:24px;
  }
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none!important;
    transition:none!important;
  }
}


/* Clean high-end benchmark card - vervangt rommelige grafiek */
.clean-benchmark-card{
  padding:30px!important;
  border-radius:30px!important;
  border:1px solid rgba(255,255,255,.13)!important;
  background:
    radial-gradient(circle at 30% 0%, rgba(32,134,255,.22), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.38)!important;
}
.clean-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding-bottom:18px;
  margin-bottom:24px;
}
.clean-card-header span{
  color:#39a7ff;
  text-transform:uppercase;
  font-weight:950;
  letter-spacing:.08em;
  font-size:13px;
}
.clean-card-header strong{
  color:#fff;
  font-size:18px;
}
.clean-score-block{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:24px;
  align-items:center;
}
.clean-score-ring{
  width:150px;
  height:150px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center, #071634 0 57%, transparent 58%),
    conic-gradient(#35d486 calc(var(--score) * 1%), rgba(255,255,255,.12) 0);
  box-shadow:0 0 40px rgba(53,212,134,.12);
}
.clean-score-ring > div{
  width:112px;
  height:56px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  background:rgba(3,11,24,.86);
  border:1px solid rgba(255,255,255,.08);
}
.clean-score-ring strong{
  color:#35d486;
  font-size:48px;
  line-height:1;
  letter-spacing:-.06em;
}
.clean-score-ring span{
  color:#dbe7ff;
  font-weight:900;
  margin-top:-6px;
}
.clean-score-copy h3{
  color:#fff;
  font-size:26px;
  line-height:1.15;
  margin:0 0 10px;
  letter-spacing:-.03em;
}
.clean-score-copy p{
  color:#b9c6df;
  line-height:1.6;
  margin:0;
}
.clean-card-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:26px;
}
.clean-card-metrics div{
  min-height:92px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:18px;
  padding:16px 12px;
  text-align:center;
}
.clean-card-metrics strong{
  display:block;
  color:#fff;
  font-size:30px;
  line-height:1;
  margin-bottom:8px;
}
.clean-card-metrics span{
  color:#aebbd4;
  font-size:13px;
  line-height:1.35;
}
.clean-card-note{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:18px;
  padding:14px;
  border-radius:16px;
  background:rgba(53,212,134,.07);
  border:1px solid rgba(53,212,134,.18);
}
.clean-card-note span{
  color:#35d486;
  font-weight:950;
}
.clean-card-note p{
  margin:0;
  color:#dbe7ff;
  line-height:1.45;
  font-size:14px;
}
.clean-benchmark-card .score-bars,
.clean-benchmark-card .score-card-top,
.clean-benchmark-card .score-card-foot{
  display:none!important;
}
@media(max-width:760px){
  .clean-score-block{
    grid-template-columns:1fr;
    text-align:center;
  }
  .clean-score-ring{
    margin:0 auto;
  }
  .clean-card-metrics{
    grid-template-columns:1fr;
  }
  .clean-card-header{
    display:block;
  }
  .clean-card-header strong{
    display:block;
    margin-top:6px;
  }
}


/* MSP-Check.nl logo exact groot zoals voorbeeld */
.brand-logo-only {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-decoration: none !important;
    flex: 0 0 auto !important;
}

.brand-logo-only span,
.brand-logo-only strong,
.brand-logo-only small,
.brand-logo-only .m-logo {
    display: none !important;
}

.msp-logo-header {
    display: block !important;
    height: 56px !important;
    width: auto !important;
    max-width: 310px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 9px rgba(42,255,214,.42)) !important;
}

/* Header exact ruimer maken, zodat het grote logo niet wordt weggedrukt */
header,
.topbar,
.site-header,
.main-header,
.navbar {
    min-height: 90px !important;
    height: auto !important;
}

header .container,
.topbar .container,
.site-header .container,
.main-header .container,
.navbar .container,
.nav-wrap,
.navbar-inner {
    min-height: 90px !important;
    display: flex !important;
    align-items: center !important;
}

/* Navigation blijft rechts zoals in voorbeeld */
nav,
.nav,
.main-nav,
.nav-links {
    margin-left: auto !important;
}

/* Footer-logo iets kleiner */
footer .msp-logo-header,
.footer .msp-logo-header {
    height: 86px !important;
    max-width: 470px !important;
}

@media (max-width: 1100px) {
    .msp-logo-header {
        height: 44px !important;
        max-width: 215px !important;
    }
    header,
    .topbar,
    .site-header,
    .main-header,
    .navbar,
    header .container,
    .topbar .container,
    .site-header .container,
    .main-header .container,
    .navbar .container,
    .nav-wrap,
    .navbar-inner {
        min-height: 72px !important;
    }
}

@media (max-width: 700px) {
    .msp-logo-header {
        height: 32px !important;
        max-width: 150px !important;
    }
    header,
    .topbar,
    .site-header,
    .main-header,
    .navbar,
    header .container,
    .topbar .container,
    .site-header .container,
    .main-header .container,
    .navbar .container,
    .nav-wrap,
    .navbar-inner {
        min-height: 58px !important;
    }
}