:root{
  --bg:#0f172a;
  --bg2:#111827;
  --card:#ffffff;
  --text:#333;
  --muted:#666;
  --brand:#2563eb;
  --brand2:#3a6ef2;
  --line:#e2e8f0;
  --shadow:0 20px 50px rgba(15,23,42,.12);
  --radius:22px;
  --container:1180px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(135deg, #eef3ff, #f9f2d6)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

.container{width:min(var(--container),calc(100% - 32px));margin:0 auto}

.header{
  position:sticky;top:0;z-index:1000;
  background:#1149db;
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px 0;color:#fff
}
.brand{font-weight:800;letter-spacing:.2px;font-size:1.1rem}
.menu{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.menu a{
  color:#cbd5e1;font-weight:600;font-size:.95rem;padding:8px 0;border-bottom:2px solid transparent
}
.menu a.active,.menu a:hover{color:#fff;border-color:var(--brand2)}

.hero{
  background:
    linear-gradient(135deg, rgba(58, 110, 242, 0.86), rgba(37, 99, 235, 0.72)),
    url('partnerpage-hero-back.jpg?auto=format&fit=crop&w=1600&q=80') center/cover;
  color:#fff;
  padding:90px 0 70px;
}
.hero-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center
}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  padding:8px 14px;border-radius:999px;font-size:.92rem;margin-bottom:18px
}
.hero h1{font-size:clamp(2.1rem,4vw,4.3rem);line-height:1.02;margin:0 0 16px}
.hero p{font-size:1.08rem;line-height:1.7;color:#dbeafe;max-width:60ch;margin:0 0 26px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 20px;border-radius:14px;font-weight:700;border:1px solid transparent
}
.btn-primary {
  background: rgba(255, 255, 255, 0.8); /* Wit met 80% opacity */
  color: var(--bg);
  transition: background-color 0.2s ease; /* Zorgt voor een vloeiende overgang */
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 1); /* Wit met 100% opacity bij mouseover */
}
.btn-submit {
  /* Een mooie, actieve groentint (RGB van #28a745) met 80% opacity */
  background: rgba(40, 167, 69, 0.8); 
  color: #fff; /* Witte tekst voor optimaal contrast op het groen */
  padding: 15px 25px; /* Geeft de knop body (echte knopvorm) */
  border: none; /* Verwijdert de standaard browser-rand */
  border-radius: 4px; /* Subtiel afgeronde hoeken voor een moderne look */
  cursor: pointer; /* Zorgt voor het handje bij mouseover */
  font-weight: 600; /* Maakt de tekst net wat krachtiger */
  transition: background-color 0.2s ease; /* Zorgt voor de vloeiende overgang */
}

.btn-submit:hover {
  /* Dezelfde groentint, maar dan 100% dekkend bij mouseover */
  background: rgba(40, 167, 69, 1); 
}


.btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-secondary:hover{background:rgba(255,255,255,.08)}

.hero-card{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)
}
.hero-card img{border-radius:18px;aspect-ratio:4/3;object-fit:cover}

.section{padding:10px 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow)
}
.card h2 {margin-top:0;color:#3a6ef2}
.card h3{margin-top:0;color:#333}
.lead{color:var(--muted);line-height:1.8}
ul,ol{line-height:1.8;color:#334155}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pill{
  background:#eff6ff;color:#1d4ed8;border:1px solid #dbeafe;
  padding:8px 12px;border-radius:999px;font-size:.92rem;font-weight:600
}

.steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px
}
.step{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px
}
.step .num{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;font-weight:800;margin-bottom:14px
}

.footer{
  background:transparent:#cbd5e1;padding:26px 0;margin-top:40px
}
.footer a{color:#fff}

.form{
  display:grid;gap:14px
}
input,textarea,select{
  width:100%;padding:13px 14px;border:1px solid #cbd5e1;border-radius:12px;
  font:inherit;background:#fff
}
textarea{min-height:140px;resize:vertical}

.note{font-size:.95rem;color:var(--muted)}

@media (max-width: 900px){
  .hero-grid,.grid-2,.steps{grid-template-columns:1fr}
  .nav{flex-direction:column;align-items:flex-start}
}

.info-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px;
  box-shadow:var(--shadow);
}

.info-block h2{
  margin-top:0;
color: #3a6ef2;
}

.info-block p{
  line-height:1.8;
  color:#334155;
}

.example-box{
  margin-top:18px;
  padding:18px 20px;
  border-left:4px solid var(--brand);
  background:#eff1f7;
  border-radius:14px;
}

.example-box h3{
  margin:0 0 8px;
  font-size:1.02rem;
}

.info-emphasis{
  margin-top:18px;
  padding:14px 16px;
  background:#eff1f7;
  border:1px solid #e1e7f9;
  border-radius:14px;
  font-weight:600;
  color:#1e3a8a;
}

.styled-list{
  padding-left:20px;
  margin:12px 0 0;
}

.styled-list li{
  margin-bottom:10px;
}

.full-width-band{
  padding-top:10px;
}




.partner-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:22px;
}

.partner-card{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:18px;
  padding:22px;
  box-shadow:none;
}

.partner-card h3{
  margin:0 0 6px;
  font-size:1.25rem;
}

.partner-subtitle{
  margin:0 0 14px;
  font-size:.98rem;
  font-weight:600;
  color:#475569;
}

.partner-card p:last-child{
  margin-bottom:0;
  line-height:1.75;
  color:#334155;
}

.partner-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  margin-bottom:14px;
  font-size:1.1rem;
  color:#fff;
}

.partner-card-basic .partner-icon{
  background:#2563eb;
}

.partner-card-standard .partner-icon{
  background:#2563eb;
}

.partner-card-premium .partner-icon{
  background:#2563eb;
}

.partner-card-basic{
  background:#eff1f7;
}

.partner-card-standard{
  background:#eff1f7;
}

.partner-card-premium{
  background:#eff1f7;
}

@media (max-width: 900px){
  .partner-grid{
    grid-template-columns:1fr;
  }
}
ul.checklist {
  list-style: none;
  padding-left: 0;
}

ul.checklist li {
  position: relative;
  padding-left: 28px;
}

ul.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #ff4500;
  font-weight: bold;
}
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #00ce7c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 40px;
}