@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;700&family=DM+Serif+Display&display=swap');

:root { --geel:#1F76BD; --donker:#333333; --grijs:#4A4A4A; --lichtgrijs:#F5F5F5; --wit:#FFFFFF; --border:#E8E8E8; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans','Helvetica Neue',sans-serif; color:var(--donker); background:var(--wit); line-height:1.6; overflow-x:hidden; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 5vw; height:80px; background:rgba(26,26,26,0.96); backdrop-filter:blur(12px); }
.nav-logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.nav-logo-circle { width:36px; height:36px; background:var(--geel); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.nav-logo-circle svg { width:22px; height:22px; }
.nav-logo-text { display:flex; flex-direction:column; }
.nav-logo-text .mkb { font-size:14px; font-weight:700; color:#fff; letter-spacing:1px; line-height:1; }
.nav-logo-text .server { font-size:12px; font-weight:400; color:var(--geel); letter-spacing:1px; line-height:1; margin-top:2px; }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { text-decoration:none; font-size:14px; font-weight:500; color:rgba(255,255,255,0.7); transition:color 0.2s; }
.nav-links a:hover { color:var(--geel); }
.nav-cta { background:var(--geel); color:#fff !important; padding:8px 20px; border-radius:4px; font-weight:700 !important; }
.nav-cta:hover { background:#1a68a8 !important; }

/* HERO */
.hero { background:var(--donker); min-height:100vh; display:flex; align-items:center; padding:120px 5vw 80px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; top:-40%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,rgba(31,118,189,0.08) 0%,transparent 70%); pointer-events:none; }
.hero-inner { max-width:1100px; margin:0 auto; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.hero-label { display:inline-flex; align-items:center; gap:8px; background:rgba(31,118,189,0.12); border:1px solid rgba(31,118,189,0.25); color:var(--geel); font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; padding:6px 14px; border-radius:100px; margin-bottom:28px; }
.hero-label::before { content:''; width:6px; height:6px; background:var(--geel); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
.hero h1 { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(42px,5vw,68px); font-weight:400; color:var(--wit); line-height:1.1; margin-bottom:24px; letter-spacing:-0.5px; }
.hero h1 em { font-style:italic; color:var(--geel); }
.hero-sub { font-size:17px; color:rgba(255,255,255,0.6); line-height:1.7; margin-bottom:40px; max-width:460px; font-weight:300; }
.hero-btns { display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary { display:inline-block; background:var(--geel); color:#fff; padding:14px 28px; border-radius:4px; font-size:15px; font-weight:700; text-decoration:none; transition:background 0.2s,transform 0.15s; }
.btn-primary:hover { background:#1a68a8; transform:translateY(-1px); }
.btn-ghost { display:inline-block; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.8); padding:14px 28px; border-radius:4px; font-size:15px; font-weight:500; text-decoration:none; transition:border-color 0.2s,color 0.2s; }
.btn-ghost:hover { border-color:rgba(255,255,255,0.5); color:#fff; }
.hero-visual { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:32px; }
.server-card { background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:20px; margin-bottom:12px; }
.server-card:last-child { margin-bottom:0; }
.server-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.server-name { font-size:13px; font-weight:600; color:rgba(255,255,255,0.9); }
.status-badge { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#4ade80; }
.status-dot { width:6px; height:6px; background:#4ade80; border-radius:50%; animation:pulse 2s infinite; }
.server-domain { font-size:12px; color:rgba(255,255,255,0.4); margin-bottom:12px; }
.progress-bar { height:3px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:var(--geel); border-radius:2px; }
.stat-row { display:flex; gap:20px; margin-top:10px; }
.stat { font-size:11px; color:rgba(255,255,255,0.4); }
.stat span { color:rgba(255,255,255,0.7); font-weight:500; }

/* SECTIONS */
.section { padding:100px 5vw; }
.section-inner { max-width:1100px; margin:0 auto; }
.section-label { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--geel); margin-bottom:16px; }
.section-title { font-family:'DM Serif Display',Georgia,serif; font-size:clamp(32px,4vw,52px); font-weight:400; line-height:1.15; letter-spacing:-0.3px; margin-bottom:20px; }
.section-sub { font-size:17px; color:var(--grijs); max-width:520px; line-height:1.7; font-weight:300; }

/* DIENSTEN */
#diensten { background:var(--lichtgrijs); }
.diensten-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:64px; border:2px solid var(--donker); }
.dienst-card { background:var(--wit); padding:44px 36px; transition:background 0.25s; }
.dienst-card:hover { background:var(--donker); }
.dienst-card:hover .dienst-titel, .dienst-card:hover .dienst-tekst, .dienst-card:hover .dienst-link { color:var(--wit); }
.dienst-card:hover .dienst-icon { background:var(--geel); color:var(--donker); }
.dienst-icon { width:48px; height:48px; background:var(--donker); color:var(--geel); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:24px; transition:background 0.25s,color 0.25s; }
.dienst-titel { font-size:20px; font-weight:700; margin-bottom:12px; transition:color 0.25s; }
.dienst-tekst { font-size:15px; color:var(--grijs); line-height:1.7; font-weight:300; transition:color 0.25s; margin-bottom:24px; }
.dienst-link { font-size:14px; font-weight:700; color:var(--donker); text-decoration:none; transition:color 0.25s; display:flex; align-items:center; gap:6px; }
.dienst-link::after { content:'→'; }

/* WAAROM */
#waarom { background:var(--wit); }
.waarom-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; margin-top:80px; }
.feature-list { list-style:none; display:flex; flex-direction:column; }
.feature-item { display:flex; gap:20px; padding:28px 0; border-bottom:1px solid var(--border); }
.feature-item:first-child { border-top:1px solid var(--border); }
.feature-num { font-size:11px; font-weight:700; color:var(--geel); letter-spacing:1px; padding-top:4px; min-width:28px; }
.feature-content h3 { font-size:17px; font-weight:700; margin-bottom:6px; }
.feature-content p { font-size:15px; color:var(--grijs); line-height:1.6; font-weight:300; }
.waarom-visual { background:var(--donker); border-radius:12px; padding:44px 40px; position:relative; overflow:hidden; }
.waarom-visual::before { content:''; position:absolute; bottom:-60px; right:-60px; width:200px; height:200px; background:radial-gradient(circle,rgba(31,118,189,0.15) 0%,transparent 70%); }
.visual-title { font-size:13px; font-weight:600; color:rgba(255,255,255,0.5); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:32px; }
.uptime-big { font-family:'DM Serif Display',Georgia,serif; font-size:72px; color:var(--geel); line-height:1; margin-bottom:8px; }
.uptime-label { font-size:14px; color:rgba(255,255,255,0.5); margin-bottom:40px; }
.metric-row { display:flex; flex-direction:column; gap:16px; }
.metric-item { display:flex; justify-content:space-between; align-items:center; padding-bottom:16px; border-bottom:1px solid rgba(255,255,255,0.07); }
.metric-item:last-child { border-bottom:none; padding-bottom:0; }
.metric-label { font-size:13px; color:rgba(255,255,255,0.5); }
.metric-value { font-size:15px; font-weight:700; color:var(--wit); }

/* PAKKETTEN */
#pakketten { background:var(--lichtgrijs); }
.pakketten-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:64px; }
.pakket-card { background:var(--wit); border:1px solid var(--border); border-radius:8px; padding:40px 36px; position:relative; transition:transform 0.2s,box-shadow 0.2s; }
.pakket-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.1); }
.pakket-card.featured { background:var(--donker); border-color:var(--geel); color:var(--wit); }
.pakket-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--geel); color:#fff; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:4px 16px; border-radius:100px; }
.pakket-naam { font-size:13px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:8px; }
.pakket-card.featured .pakket-naam { color:var(--geel); }
.pakket-card:not(.featured) .pakket-naam { color:var(--grijs); }
.pakket-prijs { font-family:'DM Serif Display',Georgia,serif; font-size:52px; line-height:1; margin-bottom:4px; letter-spacing:-1px; }
.pakket-card.featured .pakket-prijs { color:var(--wit); }
.pakket-periode { font-size:14px; color:var(--grijs); margin-bottom:32px; }
.pakket-card.featured .pakket-periode { color:rgba(255,255,255,0.5); }
.pakket-features { list-style:none; display:flex; flex-direction:column; gap:12px; margin-bottom:36px; }
.pakket-features li { font-size:14px; display:flex; align-items:flex-start; gap:10px; }
.pakket-card:not(.featured) .pakket-features li { color:var(--grijs); }
.pakket-card.featured .pakket-features li { color:rgba(255,255,255,0.75); }
.check { color:var(--geel); font-weight:700; font-size:16px; line-height:1.4; flex-shrink:0; }
.pakket-btn { display:block; text-align:center; padding:13px; border-radius:4px; font-size:14px; font-weight:700; text-decoration:none; transition:background 0.2s,color 0.2s; cursor:pointer; width:100%; }
.pakket-card:not(.featured) .pakket-btn { border:1.5px solid var(--donker); color:var(--donker); background:transparent; }
.pakket-card:not(.featured) .pakket-btn:hover { background:var(--donker); color:var(--wit); }
.pakket-card.featured .pakket-btn { background:var(--geel); color:#fff; border:none; }
.pakket-card.featured .pakket-btn:hover { background:#1a68a8; }

/* CONTACT */
#contact { background:var(--wit); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; margin-top:64px; }
.contact-info h3 { font-family:'DM Serif Display',Georgia,serif; font-size:32px; font-weight:400; margin-bottom:20px; line-height:1.2; }
.contact-info p { font-size:16px; color:var(--grijs); line-height:1.7; margin-bottom:36px; font-weight:300; }
.contact-item { display:flex; align-items:center; gap:14px; margin-bottom:16px; font-size:15px; }
.contact-icon { width:38px; height:38px; background:var(--lichtgrijs); border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
form { display:flex; flex-direction:column; gap:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
input, select, textarea { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:4px; font-size:15px; font-family:inherit; color:var(--donker); background:var(--wit); transition:border-color 0.2s; outline:none; resize:vertical; }
input:focus, select:focus, textarea:focus { border-color:var(--geel); }
input::placeholder, textarea::placeholder { color:#aaa; }
textarea { min-height:120px; }
.form-submit { background:var(--geel); color:#fff; border:none; padding:14px; border-radius:4px; font-size:15px; font-weight:700; font-family:inherit; cursor:pointer; transition:background 0.2s; }
.form-submit:hover { background:#1a68a8; }

/* FOOTER */
footer { background:var(--donker); padding:64px 5vw 40px; }
.footer-inner { max-width:1100px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:60px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.08); margin-bottom:32px; }
.footer-brand p { font-size:14px; color:rgba(255,255,255,0.45); line-height:1.7; margin-top:16px; font-weight:300; max-width:260px; }
.footer-col h4 { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:16px; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:10px; }
.footer-col ul li a { font-size:14px; color:rgba(255,255,255,0.6); text-decoration:none; transition:color 0.2s; font-weight:300; }
.footer-col ul li a:hover { color:var(--geel); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; font-size:13px; color:rgba(255,255,255,0.3); }

/* RESPONSIVE */
@media (max-width:900px) {
  .hero-inner, .waarom-grid, .contact-grid { grid-template-columns:1fr; gap:48px; }
  .hero-visual { display:none; }
  .diensten-grid, .pakketten-grid { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; gap:40px; }
  .footer-bottom { flex-direction:column; gap:12px; text-align:center; }
  .form-row { grid-template-columns:1fr; }
}

/* HAMBURGER + MOBILE MENU */
.nav-hamburger { display:none; flex-direction:column; justify-content:center; gap:5px; background:none; border:none; cursor:pointer; padding:10px; z-index:300; min-width:44px; min-height:44px; flex-shrink:0; }
.nav-hamburger span { display:block; width:26px; height:3px; background-color:#ffffff; border-radius:2px; transition:transform 0.25s, opacity 0.25s; pointer-events:none; }
.nav-hamburger.open span:nth-child(1) { transform:translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-8px) rotate(-45deg); }

#mobile-menu {
  display:none;
  position:fixed;
  top:0; right:0; bottom:0;
  width:290px;
  background-color:#1a1a1a;
  padding:100px 36px 40px;
  flex-direction:column;
  gap:0;
  z-index:200;
  transform:translateX(100%);
  transition:transform 0.3s ease;
  box-shadow:-8px 0 32px rgba(0,0,0,0.5);
}
#mobile-menu.open { transform:translateX(0); }
#mobile-menu a { display:block; color:rgba(255,255,255,0.85); text-decoration:none; font-size:18px; font-weight:500; padding:18px 0; border-bottom:1px solid rgba(255,255,255,0.08); transition:color 0.2s; }
#mobile-menu a:hover { color:#ffffff; }
#mobile-menu .mobile-cta { color:#1F76BD; font-weight:700; border-bottom:none; margin-top:16px; }

#nav-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:199; }
#nav-overlay.open { display:block; }

@media (max-width:900px) {
  .nav-links { display:none !important; }
  .nav-hamburger { display:flex; }
  #mobile-menu { display:flex; }
}