:root {
    --primary-blue: #0056a6;
    --dark-navy: #0A192F;
    --light-navy: #112240;
    --lightest-navy: #233554;
    --light-slate: #CCD6F6;
    --slate: #8892b0;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--dark-navy);
    color: var(--light-slate);
    overflow-x: hidden;
}
.font-mono { font-family: 'Roboto Mono', monospace; }

/* --- 3D Hero Canvas --- */
#hero-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; opacity: 0.5;
}

/* --- Header --- */
.glass-header {
    background-color: rgba(10, 25, 47, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--light-navy);
}

/* --- General Styling & Buttons --- */
.btn {
    display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.25rem;
    font-weight: 600; transition: all 0.3s ease;
}
.btn-primary {
    background-color: transparent; border: 1px solid var(--primary-blue);
    color: var(--primary-blue);
}
.btn-primary:hover {
    background-color: var(--primary-blue); color: #fff;
    box-shadow: 0 0 20px rgba(0, 86, 166, 0.5); transform: translateY(-3px);
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Form Input Styling --- */
.form-input {
    width: 100%;
    background-color: var(--dark-navy);
    border: 2px solid var(--lightest-navy);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: var(--light-slate);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 2px rgba(0, 86, 166, 0.5);
}


/* --- Section Styling --- */
.section-title {
    position: relative; display: flex; align-items: center;
    font-size: 1.75rem; font-weight: 800; color: var(--light-slate);
    margin-bottom: 2.5rem; font-family: 'Roboto Mono', monospace;
}
.section-title::before {
    content: '0' counter(section) '.';
    margin-right: 0.75rem; color: var(--primary-blue);
    font-size: 1.25rem;
}
.section-title::after {
    content: ''; display: block; position: relative;
    top: 2px; width: 200px; height: 1px;
    margin-left: 1.25rem; background-color: var(--lightest-navy);
}
body { counter-reset: section; }
.counted-section { counter-increment: section; }

/* --- Interactive Problem Section --- */
.problem-selector { position: relative; }
.problem-tab {
    padding: 1rem; cursor: pointer; border-left: 2px solid var(--lightest-navy);
    transition: all 0.3s ease; color: var(--slate);
}
.problem-tab.active { color: var(--primary-blue); background-color: var(--light-navy); }
.problem-indicator {
    position: absolute; left: 0; width: 2px; height: 68px; /* Adjust based on tab height */
    background-color: var(--primary-blue);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.problem-content {
    background: var(--light-navy); border: 1px solid var(--lightest-navy);
    min-height: 280px;
}
.problem-pane {
    opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease;
    position: absolute; width: 100%; visibility: hidden;
}
.problem-pane.active { opacity: 1; transform: translateY(0); position: relative; visibility: visible; }
.typing-cursor-small {
    display: inline-block; width: 8px; height: 1rem; background-color: var(--slate);
    animation: blink-small 1.2s infinite; vertical-align: middle;
}
@keyframes blink-small { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- Service Section Cards --- */
.service-card {
    background: var(--light-navy); border: 1px solid var(--lightest-navy);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; overflow: hidden;
}
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px -15px rgba(2, 12, 27, 0.7);
}
.service-card .icon-wrapper {
    background-color: var(--dark-navy);
    border: 1px solid var(--lightest-navy);
}
.service-card ul { list-style: none; padding-left: 0; }
.service-card ul li {
    position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem;
}
.service-card ul li::before {
    content: '✓'; position: absolute; left: 0; color: var(--primary-blue);
}

/* --- "Waarom Ons" Section --- */
.promise-item {
    border-left: 2px solid var(--primary-blue);
    transition: background-color 0.3s ease;
}
.promise-item:hover { background-color: rgba(0, 86, 166, 0.1); }

/* --- Scroll Animations --- */
.reveal {
    opacity: 0; transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }