/* ── Design tokens ──────────────────────────────────────── */
:root {
  --brand:       #00AF9F;
  --brand-hover: #008f81;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Pe-icon-7-stroke font ──────────────────────────────── */
@font-face {
  font-family: 'Pe-icon-7-stroke';
  src: url('../fonts/Pe-icon-7-stroke_-2irksn.woff') format('woff');
  font-weight: normal; font-style: normal;
}
[class^="pe-7s-"], [class*=" pe-7s-"] {
  display: inline-block;
  font-family: 'Pe-icon-7-stroke';
  speak: none; font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1;
  -webkit-font-smoothing: antialiased;
}
.pe-7s-home::before   { content: "\e648"; }
.pe-7s-users::before  { content: "\e693"; }
.pe-7s-like2::before  { content: "\e6a1"; }
.pe-7s-user::before   { content: "\e685"; }
.pe-7s-phone::before  { content: "\e627"; }
.pe-7s-search::before { content: "\e617"; }

/* ── Base ───────────────────────────────────────────────── */
body {
  font: 15px/26px 'Open Sans', Helvetica, Arial, sans-serif;
  color: #808080;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 {
  font-family: 'Montserrat', sans-serif;
  color: #333;
}
a { color: var(--brand); text-decoration: none; transition: color .3s; }
a:hover { color: var(--brand-hover); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }

/* ── Layout helpers ─────────────────────────────────────── */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── Section base ───────────────────────────────────────── */
section { padding: 80px 0; }
.gray { background: #f3f3f3; }

.section-title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
}
.section-title::after,
.section-title-small::after {
  content: '';
  display: block;
  width: 30px;
  height: 2px;
  background: var(--brand);
  margin: 12px auto 40px;
}
.section-body {
  font: 18px/29px 'Open Sans', sans-serif;
  font-weight: 300;
  max-width: 800px;
  margin: 0 auto;
}
.section-body ul { list-style: disc; padding-left: 24px; margin-top: 12px; }
.section-body li { margin-bottom: 6px; }
.section-body p + p,
.section-body ul + p { margin-top: 20px; }

/* ── Shared overlay ─────────────────────────────────────── */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.52);
  pointer-events: none;
}

/* ── Navigation ─────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 80px;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid #e6e6e6;
  z-index: 999;
  display: flex;
  align-items: center;
}
#nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#nav .logo { flex-shrink: 0; }
#nav .logo img { width: 200px; }
#nav ul {
  display: flex;
  align-items: center;
}
#nav ul li a {
  display: block;
  padding: 0 12px;
  line-height: 80px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  color: #808080;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  white-space: nowrap;
  transition: color .2s;
}
#nav ul li a:hover { color: var(--brand); }

/* ── Hero ───────────────────────────────────────────────── */
#hero {
  position: relative;
  padding: 0;
  height: 100vh;
  min-height: 500px;
  background-image: url('../images/section5.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#hero .school-logo {
  position: absolute;
  top: 95px;
  right: 20px;
  width: 140px;
  z-index: 2;
}
#hero .inner {
  position: relative;
  z-index: 2;
  padding: 0 20px;
}
#hero h1 {
  font-size: 52px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
}
#hero h1 span { color: var(--brand); }
.cursor {
  color: var(--brand);
  animation: blink .7s step-end infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
#hero .tagline {
  font-size: 22px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 30px;
}
#hero .cta {
  display: inline-block;
  padding: 10px 30px;
  border: 2px solid var(--brand);
  border-radius: 10px;
  color: var(--brand);
  background: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .3s, color .3s;
}
#hero .cta:hover { background: var(--brand); color: #fff; }

/* ── Parallax sections ───────────────────────────────────── */
.parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 0;
}
.parallax .inner {
  position: relative;
  z-index: 2;
}

/* ── Quote (in de praktijk) ─────────────────────────────── */
#quote { background-image: url('../images/praktijk.jpg'); }
#quote h2 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
#quote p {
  color: rgba(255,255,255,.9);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

/* ── Stats ──────────────────────────────────────────────── */
#stats { background-image: url('../images/section1.jpg'); }
.stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
}
.stat {
  text-align: center;
  color: #fff;
  flex: 1 1 160px;
}
.stat i {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
  color: #fff;
  transition: background .3s;
}
.stat i:hover { background: var(--brand-hover); }
.stat .number {
  font-size: 48px;
  font-weight: 300;
  color: var(--brand);
  display: block;
  margin-bottom: 8px;
}
.stat .desc {
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ── Features ───────────────────────────────────────────── */
#features { text-align: center; }
.features-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
}
.feature {
  flex: 1 1 200px;
  max-width: 240px;
}
.feature i {
  font-size: 46px;
  color: var(--brand);
}
.feature h3 {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 16px 0 10px;
}
.feature p { font-size: 15px; color: #808080; }

/* ── Partners ───────────────────────────────────────────── */
#partners .logos-slider {
  overflow: hidden;
  margin-top: 20px;
}
#partners .logos-track {
  display: flex;
  gap: 30px;
  transition: transform .7s ease-in-out;
}
#partners .logos-track img {
  flex: 0 0 calc(25% - 22.5px); /* 4 zichtbaar: (100% - 3×30px) / 4 */
  filter: grayscale(30%);
  transition: filter .3s;
}
#partners .logos-track img:hover { filter: none; }

/* ── Accreditation ──────────────────────────────────────── */
#accreditatie { text-align: center; }
.section-title-small {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
}
#accreditatie img { margin: 0 auto; }

/* ── Contact ────────────────────────────────────────────── */
#contact { text-align: center; }
#contact p { font-size: 18px; font-weight: 300; }

/* ── Footer ─────────────────────────────────────────────── */
footer {
  background: #1a1a1a;
  color: #808080;
  text-align: center;
  padding: 30px 20px;
  font-size: 13px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #nav ul { display: none; }
  #hero h1 { font-size: 32px; }
  .section-title { font-size: 28px; }
  #hero .school-logo { width: 90px; top: 88px; }
  .parallax, #hero { background-attachment: scroll; }
}