/* =========================================================
   Global Styles – Ocean Blue palette (rgb(0,65,75)) & White
   ========================================================= */
:root {
  --ocean: rgb(0,65,75);
  --ocean-dark: rgb(0,55,63);
  --ocean-light: rgba(0,65,75,0.08);
  --white: #fff;
  --ring: rgba(25,211,255,0.35);
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--white); background: linear-gradient(180deg, var(--ocean-dark) 0%, var(--ocean) 60%, var(--ocean-dark) 100%); }
a { color: var(--white); text-decoration: none; }
a:focus { outline: 2px solid var(--ring); outline-offset: 2px; }
img { max-width: 100%; display:block; }

.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Header / Nav */
.header { position: sticky; top:0; z-index: 100; backdrop-filter: blur(6px); background: rgba(255,255,255,0.06); border-bottom: 1px solid rgba(255,255,255,0.15); }
.nav { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { font-weight: 800; letter-spacing: -0.02em; font-size: 20px; white-space: nowrap; }
.menu--desktop { display: none; }
.burger { display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:12px;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1); }
/* Mobile menu panel verbeterde spacing */
.menu-panel {
  display: none;
  padding: 24px 0;                /* ↑ meer verticale lucht */
}

.menu-panel a {
  display: block;
  padding: 14px 0;               /* ↑ meer klikbare ruimte per item */
  font-size: 18px;               /* iets groter voor leesbaarheid */
  line-height: 1.3;
}
.menu-panel a + a {
  border-top: 1px solid rgba(255,255,255,0.1);
}
.menu-panel.open {
  display: block;
}
.cta { background: var(--white); color: var(--ocean); border: 1px solid rgba(255,255,255,0.35); border-radius: 16px; padding: 10px 16px; font-weight: 700; box-shadow: 0 6px 22px rgba(0,0,0,0.12); display:inline-flex; align-items:center; justify-content:center; }
.cta:hover { transform: translateY(-1px); }

@media (min-width: 768px) {
  .burger{display:none;}
  .menu--desktop{display:flex; gap:20px; align-items:center;}
  .menu-panel{display:none!important;}
}

/* Logo sizing & responsive behavior */
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand .logo { height: 98px; width: auto; display: block; } /* desktop exact 98px */
@media (max-width: 767px) {
  .brand .logo { height: 56px; } /* mobiele schaal, voorkomt overflow */
}

/* Nav hoogte afstemmen op logo */
.nav { min-height: 80px; }                 /* mobile baseline */
@media (min-width: 768px) {
  .nav { min-height: 110px; }              /* ruimte voor 98px logo + padding */
}

/* Hero */
.hero { position: relative; height: 60vh; display:flex; align-items:center; }
.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.7; }
.hero .overlay { position:absolute; inset:0; background: linear-gradient(to bottom, rgba(0,0,0,0.4), var(--ocean)); }
.hero .content { position:relative; }
.h1 { font-size: clamp(32px, 5vw, 56px); font-weight: 800; line-height: 1.05; text-shadow: 0 2px 10px rgba(0,0,0,0.4); }
.lead { margin-top: 12px; max-width: 800px; font-size: 18px; opacity: 0.95; }

/* Sections */
.section { padding: 64px 0; }
.section.border { border-top: 1px solid rgba(255,255,255,0.15); border-bottom: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); }

.grid-3 { display:grid; grid-template-columns: repeat(1,1fr); gap: 16px; }
.grid-2 { display:grid; grid-template-columns: repeat(1,1fr); gap: 16px; }
@media (min-width: 768px) {
  .grid-3 { grid-template-columns: repeat(3,1fr); }
  .grid-2 { grid-template-columns: repeat(2,1fr); }
}

.card { border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.06); border-radius: 16px; padding: 20px; box-shadow: 0 10px 24px rgba(0,0,0,0.12); }
.card h3 { margin: 0 0 6px 0; font-size: 20px; }
.badge { display:inline-block; padding: 6px 10px; border:1px solid rgba(255,255,255,0.25); border-radius:999px; font-size:12px; background: rgba(255,255,255,0.08); margin-right: 8px; margin-bottom: 6px; }

/* Footer */
.footer { border-top: 1px solid rgba(255,255,255,0.15); padding: 32px 0; font-size: 14px; opacity: 0.9; display:flex; align-items:center; justify-content:space-between; gap: 16px; flex-wrap: wrap; }
.footer a { opacity:0.9; }
.footer a:hover { opacity: 1; }

/* Forms */
.form { display:grid; grid-template-columns: 1fr; gap: 12px; }
.form.two { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .form.two { grid-template-columns: 1fr 1fr; }
}
.input, .select, .textarea, .button { border-radius: 12px; border: 1px solid rgba(255,255,255,0.25); padding: 12px 14px; background: rgba(255,255,255,0.9); color: #000; font-size: 14px; }
.textarea { min-height: 120px; }
.button { background: var(--white); color: #000; cursor: pointer; font-weight:700; }
.small { font-size: 12px; opacity: 0.85; }