diff --git a/index.php b/index.php
index a90c0b5..0b843ed 100644
--- a/index.php
+++ b/index.php
@@ -55,17 +55,113 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
             background-color: var(--bg);
             color: var(--text-main);
             min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 24px;
+            padding: 24px 16px 60px;
             background-image: 
                 radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
                 radial-gradient(at 100% 100%, rgba(139, 92, 246, 0.15) 0px, transparent 50%);
         }
 
+        .main-wrapper {
+            max-width: 780px;
+            margin: 0 auto;
+        }
+
+        /* Top Menu Balk */
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid var(--card-border);
+            border-radius: 18px;
+            padding: 12px 24px;
+            margin-bottom: 24px;
+            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
+        }
+
+        .nav-brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            text-decoration: none;
+            color: white;
+        }
+
+        .nav-logo {
+            background: linear-gradient(135deg, var(--primary), var(--purple));
+            width: 38px;
+            height: 38px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.1rem;
+            color: white;
+            box-shadow: 0 4px 12px var(--primary-glow);
+        }
+
+        .nav-title {
+            font-size: 1.05rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+
+        .nav-menu {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.25);
+            padding: 4px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.04);
+        }
+
+        .nav-item {
+            text-decoration: none;
+            color: var(--text-muted);
+            font-size: 0.88rem;
+            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .nav-item:hover {
+            color: white;
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .nav-item.active {
+            background: rgba(59, 130, 246, 0.25);
+            color: #ffffff;
+            border: 1px solid rgba(59, 130, 246, 0.4);
+        }
+
+        .nav-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #34d399;
+            padding: 5px 12px;
+            border-radius: 9999px;
+            font-size: 0.78rem;
+            font-weight: 600;
+        }
+
+        @media (max-width: 760px) {
+            .navbar { flex-direction: column; gap: 12px; }
+            .nav-menu { width: 100%; justify-content: center; flex-wrap: wrap; }
+        }
+
         .container {
-            max-width: 680px;
             width: 100%;
             background: var(--card-bg);
             backdrop-filter: blur(20px);
@@ -326,37 +422,54 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
     </style>
 </head>
 <body>
-    <div class="container">
-        <!-- Header -->
-        <div class="header">
-            <div class="badges-row">
-                <span class="badge badge-success">
-                    <span class="pulse-dot"></span>
-                    Git Systeem Actief
-                </span>
-                <span class="badge badge-php">
-                    ⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
-                </span>
+    <div class="main-wrapper">
+        <!-- Bovenste Menu Balk (Navigatie) -->
+        <nav class="navbar">
+            <a href="index.php" class="nav-brand">
+                <div class="nav-logo">⚡</div>
+                <div class="nav-title">Web &amp; PC Studio</div>
+            </a>
+            <div class="nav-menu">
+                <a href="index.php" class="nav-item active">🏠 Home</a>
+                <a href="lab.php" class="nav-item">🧪 Dev Lab</a>
+                <a href="services.php" class="nav-item">🛠️ Diensten &amp; Offerte</a>
             </div>
-            <h1>Web & PC Studio</h1>
-            <p class="subtitle">
-                Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
-            </p>
-        </div>
+            <div class="nav-badge">
+                <span class="pulse-dot"></span>
+                <span>Git Online</span>
+            </div>
+        </nav>
 
-        <!-- Live Clock Bar (JavaScript) -->
-        <div class="clock-bar">
-            <span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
-            <span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
-        </div>
+        <div class="container">
+            <!-- Header -->
+            <div class="header">
+                <div class="badges-row">
+                    <span class="badge badge-success">
+                        <span class="pulse-dot"></span>
+                        Git Systeem Actief
+                    </span>
+                    <span class="badge badge-php">
+                        ⚡ PHP v<?= htmlspecialchars($phpVersion); ?> Live
+                    </span>
+                </div>
+                <h1>Web &amp; PC Studio</h1>
+                <p class="subtitle">
+                    Interactieve testomgeving ter verificatie van de Git webhook &amp; PHP server-runtime.
+                </p>
+            </div>
 
-        <!-- Tab Navigatie -->
-        <div class="tabs">
-            <button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
-            <button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
-            <button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
-            <a href="lab.php" class="tab-btn" style="text-decoration: none; text-align: center; color: #38bdf8; border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(6, 182, 212, 0.1);">✨ Dev Lab &rarr;</a>
-        </div>
+            <!-- Live Clock Bar (JavaScript) -->
+            <div class="clock-bar">
+                <span>Server (PHP): <strong id="server-time" style="color: #cbd5e1;"><?= htmlspecialchars($serverTime); ?></strong></span>
+                <span>Browser (JS): <strong id="client-time" style="color: #38bdf8;">--:--:--</strong></span>
+            </div>
+
+            <!-- Tab Navigatie -->
+            <div class="tabs">
+                <button class="tab-btn active" onclick="switchTab('tab-overzicht')">Overzicht</button>
+                <button class="tab-btn" onclick="switchTab('tab-diagnose')">Live JS/PHP Test</button>
+                <button class="tab-btn" onclick="switchTab('tab-git')">Git Info</button>
+            </div>
 
         <!-- Tab 1: Overzicht -->
         <div id="tab-overzicht" class="tab-content active">
@@ -387,9 +500,12 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
                 </div>
             </div>
 
-            <div style="margin-top: 16px;">
-                <a href="lab.php" class="btn btn-primary" style="text-decoration: none; width: 100%; box-shadow: 0 4px 16px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #3b82f6);">
-                    🚀 Open Interactief Developer Lab (Subpagina)
+            <div style="margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px;">
+                <a href="lab.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(6, 182, 212, 0.3); background: linear-gradient(135deg, #06b6d4, #2563eb);">
+                    🧪 Developer Lab
+                </a>
+                <a href="services.php" class="btn btn-primary" style="text-decoration: none; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25); background: linear-gradient(135deg, #10b981, #059669);">
+                    🛠️ Diensten &amp; Offerte
                 </a>
             </div>
         </div>
@@ -438,6 +554,7 @@ $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'HTTPS'
             &copy; <?= date('Y'); ?> <a href="https://www.webenpcstudio.nl" target="_blank">Web & PC Studio</a>. Alle systemen operationeel.
         </div>
     </div>
+    </div>
 
     <!-- JavaScript Functionaliteit -->
     <script>
diff --git a/lab.php b/lab.php
index 67971c4..eb48a78 100644
--- a/lab.php
+++ b/lab.php
@@ -433,9 +433,9 @@ $phpVersion = PHP_VERSION;
                 </div>
             </div>
             <nav class="nav-links">
-                <a href="index.php" class="btn-link">
-                    &larr; Terug naar Home
-                </a>
+                <a href="index.php" class="btn-link">🏠 Home</a>
+                <a href="lab.php" class="btn-link" style="background: rgba(6, 182, 212, 0.2); color: white; border-color: rgba(6, 182, 212, 0.4);">🧪 Dev Lab</a>
+                <a href="services.php" class="btn-link">🛠️ Diensten &amp; Offerte</a>
                 <button class="sound-toggle" id="sound-btn" onclick="toggleAudio()" title="Schakel geluidseffecten in/uit">
                     <span id="sound-icon">🔈</span> Geluid: <span id="sound-status">Uit</span>
                 </button>
diff --git a/services.php b/services.php
new file mode 100644
index 0000000..9527962
--- /dev/null
+++ b/services.php
@@ -0,0 +1,730 @@
+<?php
+// PHP Backend Handler voor formulierverzending (AJAX)
+if (isset($_GET['action']) && $_GET['action'] === 'submit') {
+    header('Content-Type: application/json; charset=utf-8');
+    
+    $naam = trim($_POST['naam'] ?? '');
+    $email = trim($_POST['email'] ?? '');
+    $diensten = $_POST['diensten'] ?? [];
+    $opmerking = trim($_POST['opmerking'] ?? '');
+    $totaal = floatval($_POST['totaal'] ?? 0);
+
+    if (empty($naam) || empty($email)) {
+        echo json_encode([
+            'status' => 'error',
+            'message' => 'Vul alstublieft een geldige naam en e-mailadres in.'
+        ]);
+        exit;
+    }
+
+    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
+        echo json_encode([
+            'status' => 'error',
+            'message' => 'Het opgegeven e-mailadres is ongeldig.'
+        ]);
+        exit;
+    }
+
+    // Genereer referentienummer
+    $refNummer = 'WPC-' . date('Y') . '-' . strtoupper(substr(md5(uniqid()), 0, 5));
+
+    echo json_encode([
+        'status' => 'success',
+        'referentie' => $refNummer,
+        'naam' => htmlspecialchars($naam),
+        'email' => htmlspecialchars($email),
+        'totaal' => '€' . number_format($totaal, 2, ',', '.'),
+        'aantal_diensten' => count($diensten),
+        'timestamp' => date('d-m-Y H:i:s'),
+        'message' => 'Uw aanvraag is succesvol geregistreerd door het PHP backend systeem!'
+    ]);
+    exit;
+}
+
+date_default_timezone_set('Europe/Amsterdam');
+$phpVersion = PHP_VERSION;
+?>
+<!DOCTYPE html>
+<html lang="nl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web & PC Studio - Diensten &amp; Offerte Calculator</title>
+    <style>
+        :root {
+            --primary: #3b82f6;
+            --primary-hover: #2563eb;
+            --primary-glow: rgba(59, 130, 246, 0.35);
+            --accent: #10b981;
+            --accent-glow: rgba(16, 185, 129, 0.3);
+            --bg: #0b0f19;
+            --panel-bg: rgba(23, 32, 51, 0.75);
+            --border: rgba(255, 255, 255, 0.08);
+            --text: #f8fafc;
+            --text-muted: #94a3b8;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            min-height: 100vh;
+            padding: 24px 16px 60px;
+            background-image: 
+                radial-gradient(at 0% 0%, rgba(59, 130, 246, 0.18) 0px, transparent 50%),
+                radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.15) 0px, transparent 50%);
+        }
+
+        .main-wrapper {
+            max-width: 960px;
+            margin: 0 auto;
+        }
+
+        /* Top Menu Balk */
+        .navbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: rgba(15, 23, 42, 0.85);
+            backdrop-filter: blur(16px);
+            -webkit-backdrop-filter: blur(16px);
+            border: 1px solid var(--border);
+            border-radius: 18px;
+            padding: 12px 24px;
+            margin-bottom: 32px;
+            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.3);
+        }
+
+        .nav-brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            text-decoration: none;
+            color: white;
+        }
+
+        .nav-logo {
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            width: 38px;
+            height: 38px;
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            font-size: 1.1rem;
+            color: white;
+            box-shadow: 0 4px 12px var(--primary-glow);
+        }
+
+        .nav-title {
+            font-size: 1.05rem;
+            font-weight: 700;
+            letter-spacing: -0.02em;
+        }
+
+        .nav-menu {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            background: rgba(0, 0, 0, 0.25);
+            padding: 4px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.04);
+        }
+
+        .nav-item {
+            text-decoration: none;
+            color: var(--text-muted);
+            font-size: 0.88rem;
+            font-weight: 600;
+            padding: 8px 16px;
+            border-radius: 8px;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .nav-item:hover {
+            color: white;
+            background: rgba(255, 255, 255, 0.05);
+        }
+
+        .nav-item.active {
+            background: rgba(59, 130, 246, 0.25);
+            color: #ffffff;
+            border: 1px solid rgba(59, 130, 246, 0.4);
+        }
+
+        .nav-badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            background: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #34d399;
+            padding: 5px 12px;
+            border-radius: 9999px;
+            font-size: 0.78rem;
+            font-weight: 600;
+        }
+
+        .pulse-dot {
+            width: 7px;
+            height: 7px;
+            background-color: var(--accent);
+            border-radius: 50%;
+            animation: pulse 2s infinite;
+        }
+
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
+            70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
+        }
+
+        /* Hero */
+        .hero {
+            text-align: center;
+            margin-bottom: 36px;
+        }
+
+        .hero h1 {
+            font-size: 2.2rem;
+            font-weight: 800;
+            letter-spacing: -0.02em;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, #60a5fa, #34d399);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+
+        .hero p {
+            color: var(--text-muted);
+            font-size: 1.02rem;
+            max-width: 600px;
+            margin: 0 auto;
+        }
+
+        /* Layout Grid */
+        .grid-2 {
+            display: grid;
+            grid-template-columns: 1.2fr 1fr;
+            gap: 24px;
+            margin-bottom: 36px;
+        }
+
+        @media (max-width: 820px) {
+            .grid-2 { grid-template-columns: 1fr; }
+            .navbar { flex-direction: column; gap: 14px; }
+            .nav-menu { width: 100%; justify-content: center; }
+        }
+
+        .card {
+            background: var(--panel-bg);
+            backdrop-filter: blur(18px);
+            -webkit-backdrop-filter: blur(18px);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            padding: 28px;
+            box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
+        }
+
+        .card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 20px;
+        }
+
+        .card-title {
+            font-size: 1.15rem;
+            font-weight: 700;
+            color: white;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* Interactieve Service Cards */
+        .service-option {
+            background: rgba(15, 23, 42, 0.6);
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            border-radius: 12px;
+            padding: 14px 18px;
+            margin-bottom: 12px;
+            cursor: pointer;
+            display: flex;
+            align-items: flex-start;
+            gap: 14px;
+            transition: all 0.2s ease;
+            position: relative;
+        }
+
+        .service-option:hover {
+            border-color: rgba(59, 130, 246, 0.4);
+            background: rgba(30, 41, 59, 0.6);
+        }
+
+        .service-option.checked {
+            border-color: var(--primary);
+            background: rgba(59, 130, 246, 0.12);
+            box-shadow: 0 0 16px rgba(59, 130, 246, 0.15);
+        }
+
+        .service-option input[type="checkbox"] {
+            margin-top: 4px;
+            width: 18px;
+            height: 18px;
+            accent-color: var(--primary);
+            cursor: pointer;
+        }
+
+        .service-info {
+            flex: 1;
+        }
+
+        .service-name {
+            font-weight: 600;
+            font-size: 0.95rem;
+            color: white;
+            margin-bottom: 2px;
+        }
+
+        .service-desc {
+            font-size: 0.82rem;
+            color: var(--text-muted);
+            line-height: 1.4;
+        }
+
+        .service-price {
+            font-weight: 700;
+            font-size: 0.95rem;
+            color: #34d399;
+            font-family: ui-monospace, SFMono-Regular, monospace;
+        }
+
+        /* Totale Prijs Box */
+        .total-box {
+            background: #080c14;
+            border: 1px solid rgba(59, 130, 246, 0.3);
+            border-radius: 14px;
+            padding: 18px;
+            margin-top: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .total-label {
+            font-size: 0.88rem;
+            color: var(--text-muted);
+        }
+
+        .total-amount {
+            font-size: 1.6rem;
+            font-weight: 800;
+            color: #60a5fa;
+            font-family: ui-monospace, SFMono-Regular, monospace;
+        }
+
+        /* Formulier Inputs */
+        .form-group {
+            margin-bottom: 16px;
+        }
+
+        .form-label {
+            display: block;
+            font-size: 0.84rem;
+            font-weight: 600;
+            color: var(--text-muted);
+            margin-bottom: 6px;
+        }
+
+        .form-input {
+            width: 100%;
+            background: rgba(15, 23, 42, 0.8);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+            padding: 10px 14px;
+            color: white;
+            font-size: 0.9rem;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+
+        .form-input:focus {
+            border-color: var(--primary);
+        }
+
+        textarea.form-input {
+            resize: vertical;
+            min-height: 80px;
+        }
+
+        .btn-submit {
+            width: 100%;
+            background: linear-gradient(135deg, var(--primary), #2563eb);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 0.95rem;
+            cursor: pointer;
+            box-shadow: 0 4px 16px var(--primary-glow);
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-submit:hover {
+            transform: translateY(-1px);
+            box-shadow: 0 6px 22px var(--primary-glow);
+        }
+
+        .btn-submit:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        /* Feedback Melding */
+        .alert-box {
+            display: none;
+            border-radius: 12px;
+            padding: 16px;
+            margin-top: 18px;
+            font-size: 0.88rem;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .alert-success {
+            background: rgba(16, 185, 129, 0.12);
+            border: 1px solid rgba(16, 185, 129, 0.3);
+            color: #34d399;
+        }
+
+        .alert-error {
+            background: rgba(239, 68, 68, 0.12);
+            border: 1px solid rgba(239, 68, 68, 0.3);
+            color: #f87171;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-4px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        /* Confetti Canvas */
+        #confetti-canvas {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            pointer-events: none;
+            z-index: 999;
+        }
+
+        .footer {
+            text-align: center;
+            font-size: 0.84rem;
+            color: var(--text-muted);
+            opacity: 0.8;
+            margin-top: 30px;
+        }
+
+        .footer a {
+            color: #60a5fa;
+            text-decoration: none;
+        }
+
+        .footer a:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="confetti-canvas"></canvas>
+
+    <div class="main-wrapper">
+        <!-- Bovenste Menu Balk (Navigatie) -->
+        <nav class="navbar">
+            <a href="index.php" class="nav-brand">
+                <div class="nav-logo">⚡</div>
+                <div class="nav-title">Web &amp; PC Studio</div>
+            </a>
+            <div class="nav-menu">
+                <a href="index.php" class="nav-item">🏠 Home</a>
+                <a href="lab.php" class="nav-item">🧪 Dev Lab</a>
+                <a href="services.php" class="nav-item active">🛠️ Diensten &amp; Offerte</a>
+            </div>
+            <div class="nav-badge">
+                <span class="pulse-dot"></span>
+                <span>Git Online</span>
+            </div>
+        </nav>
+
+        <!-- Hero Header -->
+        <header class="hero">
+            <h1>Diensten &amp; Offerte Calculator</h1>
+            <p>
+                Selecteer de gewenste modules voor direct financieel inzicht en verstuur een aanvraag via ons PHP backend systeem.
+            </p>
+        </header>
+
+        <!-- Grid: Calculator links, Contactformulier rechts -->
+        <div class="grid-2">
+            <!-- Linker Paneel: Interactieve Calculator -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>📦</span> Kies Diensten &amp; Modules
+                    </div>
+                    <span style="font-size: 0.8rem; color: var(--text-muted);">Real-time berekening</span>
+                </div>
+
+                <div class="service-option checked" onclick="toggleOption(this)">
+                    <input type="checkbox" value="450" checked name="srv" onchange="calcTotal()">
+                    <div class="service-info">
+                        <div class="service-name">Maatwerk Website &amp; Landing Page</div>
+                        <div class="service-desc">Moderne responsive website, dark/light styling en geoptimaliseerde code.</div>
+                    </div>
+                    <div class="service-price">€ 450,-</div>
+                </div>
+
+                <div class="service-option checked" onclick="toggleOption(this)">
+                    <input type="checkbox" value="175" checked name="srv" onchange="calcTotal()">
+                    <div class="service-info">
+                        <div class="service-name">Git CI/CD &amp; Webhook Deployment</div>
+                        <div class="service-desc">Automatische updates via push naar git.webenpcstudio.nl.</div>
+                    </div>
+                    <div class="service-price">€ 175,-</div>
+                </div>
+
+                <div class="service-option" onclick="toggleOption(this)">
+                    <input type="checkbox" value="120" name="srv" onchange="calcTotal()">
+                    <div class="service-info">
+                        <div class="service-name">PC Hulp &amp; Hardware Optimalisatie</div>
+                        <div class="service-desc">Complete schoonmaak, component-upgrades en dataherstel.</div>
+                    </div>
+                    <div class="service-price">€ 120,-</div>
+                </div>
+
+                <div class="service-option" onclick="toggleOption(this)">
+                    <input type="checkbox" value="95" name="srv" onchange="calcTotal()">
+                    <div class="service-info">
+                        <div class="service-name">Cloud Back-up &amp; Beveiligingsaudit</div>
+                        <div class="service-desc">Dagelijkse geautomatiseerde server snapshot en SSL verificatie.</div>
+                    </div>
+                    <div class="service-price">€ 95,-</div>
+                </div>
+
+                <!-- Totaal Box -->
+                <div class="total-box">
+                    <div>
+                        <div class="total-label">Geschatte Investering:</div>
+                        <div style="font-size: 0.75rem; color: #34d399;">Inclusief implementatie</div>
+                    </div>
+                    <div class="total-amount" id="total-display">€ 625,00</div>
+                </div>
+            </div>
+
+            <!-- Rechter Paneel: PHP Aanvraagformulier -->
+            <div class="card">
+                <div class="card-header">
+                    <div class="card-title">
+                        <span>✉️</span> Direct Aanvragen (PHP AJAX)
+                    </div>
+                    <span style="font-size: 0.78rem; background: rgba(59, 130, 246, 0.15); color: #60a5fa; padding: 2px 8px; border-radius: 6px;">PHP <?= htmlspecialchars($phpVersion); ?></span>
+                </div>
+
+                <form id="aanvraag-form" onsubmit="submitForm(event)">
+                    <div class="form-group">
+                        <label class="form-label" for="naam">Uw Naam / Bedrijf:</label>
+                        <input type="text" id="naam" class="form-input" placeholder="bijv. Niek Rabelink" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="email">E-mailadres:</label>
+                        <input type="email" id="email" class="form-input" placeholder="info@webenpcstudio.nl" required>
+                    </div>
+
+                    <div class="form-group">
+                        <label class="form-label" for="opmerking">Aanvullende Wensen (optioneel):</label>
+                        <textarea id="opmerking" class="form-input" placeholder="Vertel kort over uw project of situatie..."></textarea>
+                    </div>
+
+                    <button type="submit" class="btn-submit" id="submit-btn">
+                        <span>🚀</span> Verstuur Aanvraag naar PHP
+                    </button>
+                </form>
+
+                <!-- Feedback Alert Box -->
+                <div id="alert-box" class="alert-box"></div>
+            </div>
+        </div>
+
+        <!-- Footer -->
+        <footer class="footer">
+            &copy; <?= date('Y'); ?> <a href="index.php">Web &amp; PC Studio</a> &bull; Gekoppeld aan Git &bull; Alle systemen operationeel.
+        </footer>
+    </div>
+
+    <!-- JavaScript Functionaliteiten -->
+    <script>
+        // 1. Prijs Calculator
+        let currentTotal = 625;
+
+        function toggleOption(cardElement) {
+            const checkbox = cardElement.querySelector('input[type="checkbox"]');
+            if (event.target !== checkbox) {
+                checkbox.checked = !checkbox.checked;
+            }
+            if (checkbox.checked) {
+                cardElement.classList.add('checked');
+            } else {
+                cardElement.classList.remove('checked');
+            }
+            calcTotal();
+        }
+
+        function calcTotal() {
+            const checkboxes = document.querySelectorAll('input[name="srv"]:checked');
+            let sum = 0;
+            checkboxes.forEach(cb => sum += parseFloat(cb.value));
+            
+            animateNumber(currentTotal, sum, 300);
+            currentTotal = sum;
+        }
+
+        function animateNumber(from, to, duration) {
+            const display = document.getElementById('total-display');
+            const start = performance.now();
+
+            function step(time) {
+                const elapsed = time - start;
+                const progress = Math.min(elapsed / duration, 1);
+                const current = from + (to - from) * progress;
+                display.textContent = '€ ' + current.toLocaleString('nl-NL', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+                if (progress < 1) {
+                    requestAnimationFrame(step);
+                }
+            }
+            requestAnimationFrame(step);
+        }
+
+        // 2. AJAX Formulierverzending naar PHP backend
+        async function submitForm(e) {
+            e.preventDefault();
+            const btn = document.getElementById('submit-btn');
+            const alertBox = document.getElementById('alert-box');
+            
+            btn.disabled = true;
+            btn.innerHTML = '<span>⏳</span> Verwerken in PHP...';
+            alertBox.style.display = 'none';
+
+            const formData = new FormData();
+            formData.append('naam', document.getElementById('naam').value);
+            formData.append('email', document.getElementById('email').value);
+            formData.append('opmerking', document.getElementById('opmerking').value);
+            formData.append('totaal', currentTotal);
+
+            document.querySelectorAll('input[name="srv"]:checked').forEach(cb => {
+                formData.append('diensten[]', cb.value);
+            });
+
+            try {
+                const res = await fetch('services.php?action=submit', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await res.json();
+
+                if (data.status === 'success') {
+                    alertBox.className = 'alert-box alert-success';
+                    alertBox.style.display = 'block';
+                    alertBox.innerHTML = `🎉 <strong>${data.message}</strong><br><br>` +
+                        `<strong>Referentienummer:</strong> <code>${data.referentie}</code><br>` +
+                        `<strong>Klant:</strong> ${data.naam} (${data.email})<br>` +
+                        `<strong>Totaalbedrag:</strong> ${data.totaal}<br>` +
+                        `<strong>Tijdstip:</strong> ${data.timestamp}`;
+                    
+                    launchConfetti();
+                } else {
+                    alertBox.className = 'alert-box alert-error';
+                    alertBox.style.display = 'block';
+                    alertBox.innerHTML = `⚠️ <strong>Fout:</strong> ${data.message}`;
+                }
+            } catch (err) {
+                alertBox.className = 'alert-box alert-error';
+                alertBox.style.display = 'block';
+                alertBox.innerHTML = `❌ <strong>Verbindingsfout:</strong> ${err.message}`;
+            } finally {
+                btn.disabled = false;
+                btn.innerHTML = '<span>🚀</span> Verstuur Aanvraag naar PHP';
+            }
+        }
+
+        // 3. Canvas Confetti Effect
+        function launchConfetti() {
+            const canvas = document.getElementById('confetti-canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+
+            const pieces = [];
+            const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ec4899', '#8b5cf6', '#38bdf8'];
+
+            for (let i = 0; i < 70; i++) {
+                pieces.push({
+                    x: canvas.width / 2,
+                    y: canvas.height / 2,
+                    vx: (Math.random() - 0.5) * 16,
+                    vy: (Math.random() - 0.7) * 16,
+                    size: Math.random() * 8 + 4,
+                    color: colors[Math.floor(Math.random() * colors.length)],
+                    rot: Math.random() * 360,
+                    vRot: (Math.random() - 0.5) * 10
+                });
+            }
+
+            let frames = 0;
+            function render() {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                pieces.forEach(p => {
+                    p.x += p.vx;
+                    p.y += p.vy;
+                    p.vy += 0.35; // zwaartekracht
+                    p.rot += p.vRot;
+
+                    ctx.save();
+                    ctx.translate(p.x, p.y);
+                    ctx.rotate((p.rot * Math.PI) / 180);
+                    ctx.fillStyle = p.color;
+                    ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);
+                    ctx.restore();
+                });
+
+                frames++;
+                if (frames < 100) {
+                    requestAnimationFrame(render);
+                } else {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                }
+            }
+            render();
+        }
+    </script>
+</body>
+</html>
