/* ============================================
   STROOM Custom Styles
   Tailwind CSS companion - custom properties,
   components & animations only
   ============================================ */

/* ===========================================
   CSS Custom Properties
   =========================================== */
:root {
   --dark: #09090b;
   --light: #ffffff;
   --gray: #666666;

   /* STROOM Brand Colors */
   --red: #FF8C42;
   --orange: #FFB575;
   --blue: #2D3099;
   --blue-light: #8C8FC7;

   /* Functional colors */
   --accent: #FF8C42;
   --primary: #FF8C42;
   --secondary: #2D3099;

   /* Gradients */
   --gradient-warm: linear-gradient(135deg, #FF8C42 0%, #2D3099 100%);
   --gradient-cool: linear-gradient(135deg, #2D3099 0%, #8C8FC7 100%);
   --gradient-splash: linear-gradient(135deg, #FF8C42 0%, #8C8FC7 50%, #2D3099 100%);
}

/* ===========================================
   Base Styles
   =========================================== */
body {
   overflow-x: hidden;
   /* Font rendering verbetering */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

html {
   scroll-behavior: smooth;
   animation: scrollbarColorCycle 30s ease-in-out infinite;
}
html.snap-enabled {
   scroll-snap-type: y mandatory;
}

/* ===========================================
   Snap Sections
   =========================================== */
.content-page > section {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   scroll-snap-align: start;
   scroll-snap-stop: always;
   position: relative;
}
/* Ruimte voor fixed header op niet-hero secties */
.content-page > section:not(:first-child) {
   padding-top: max(var(--section-padding), 100px);
}
.footer {
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   scroll-snap-align: start;
   scroll-snap-stop: always;
}

/* Scroll-pijl onderaan elke sectie */
.section-scroll-hint {
   position: absolute;
   bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   cursor: pointer;
   z-index: 5;
   animation: bounceDown 2s ease-in-out infinite;
}
.section-scroll-hint svg {
   width: 28px;
   height: 28px;
   opacity: 0.3;
   transition: opacity 0.3s ease;
}
.section-scroll-hint:hover svg {
   opacity: 0.7;
}
@keyframes bounceDown {
   0%, 100% { transform: translateX(-50%) translateY(0); }
   50% { transform: translateX(-50%) translateY(8px); }
}

/* ===========================================
   Section Nav - dots rechts met regenboog
   =========================================== */
.section-nav {
   position: fixed;
   right: 24px;
   top: 50%;
   transform: translateY(-50%);
   z-index: 999;
   display: flex;
   flex-direction: column;
   gap: 12px;
   align-items: center;
}
.section-nav-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: rgba(0,0,0,0.2);
   border: none;
   cursor: pointer;
   transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   position: relative;
}
.section-nav-dot:hover {
   background: rgba(0,0,0,0.35);
   transform: scale(1.3);
}
/* Regenboog active state - animated gradient */
.section-nav-dot.active {
   width: 12px;
   height: 12px;
   background: linear-gradient(135deg, #EB3300, #FF8C42, #FFB575, #77c5d5, #3F43AD);
   background-size: 300% 300%;
   border-color: transparent;
   box-shadow: 0 0 14px rgba(235,51,0,0.4), 0 0 14px rgba(63,67,173,0.3);
   animation: navDotRainbow 4s ease-in-out infinite, navDotPulse 2s ease-in-out infinite;
   transform: scale(1.4);
}
@keyframes navDotRainbow {
   0%   { background-position: 0% 50%; }
   50%  { background-position: 100% 50%; }
   100% { background-position: 0% 50%; }
}
@keyframes navDotPulse {
   0%, 100% { box-shadow: 0 0 8px rgba(235,51,0,0.3), 0 0 8px rgba(63,67,173,0.2); }
   50% { box-shadow: 0 0 18px rgba(235,51,0,0.5), 0 0 18px rgba(63,67,173,0.4); }
}
/* Transitie-animatie bij wisselen van sectie */
.section-nav-dot.transitioning {
   animation: navDotFlash 0.6s ease-out;
}
@keyframes navDotFlash {
   0% { transform: scale(2); opacity: 0.5; }
   100% { transform: scale(1); opacity: 1; }
}
/* Label tooltip */
.section-nav-dot::before {
   content: attr(data-label);
   position: absolute;
   right: 24px;
   top: 50%;
   transform: translateY(-50%) translateX(8px);
   background: var(--dark, #09090b);
   color: white;
   font-size: 12px;
   font-weight: 600;
   padding: 4px 10px;
   border-radius: 6px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-nav-dot:hover::before {
   opacity: 1;
   transform: translateY(-50%) translateX(0);
}

/* ===========================================
   Custom Scrollbar (animated)
   =========================================== */
@property --scrollbar-color {
   syntax: '<color>';
   initial-value: #FF9A56;
   inherits: true;
}

@keyframes scrollbarColorCycle {
   0%   { --scrollbar-color: #FF9A56; }
   5%   { --scrollbar-color: #FF9A56; }
   33%  { --scrollbar-color: #FF9A56; }
   38%  { --scrollbar-color: #B7DDE1; }
   66%  { --scrollbar-color: #B7DDE1; }
   71%  { --scrollbar-color: #8C8FC7; }
   95%  { --scrollbar-color: #8C8FC7; }
   100% { --scrollbar-color: #FF9A56; }
}

::-webkit-scrollbar {
   width: 8px;
}
::-webkit-scrollbar-track {
   background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
   background: var(--scrollbar-color);
   border: 2px solid #ffffff;
   border-radius: 4px;
}

/* ===========================================
   STROOM Logo
   =========================================== */
.stroom-logo {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   text-decoration: none;
   transition: all 0.3s ease;
}
.stroom-logo {
   margin-left: clamp(-30px, -2vw, 0px);
}
.stroom-logo img {
   height: 55px;
   width: auto;
   filter: brightness(0) invert(1);
}
.stroom-logo .logo-text {
   font-family: 'Poppins', sans-serif;
   font-size: 36px;
   font-weight: 800;
   color: #ffffff;
   letter-spacing: -0.5px;
   margin-left: 10px;
}
.stroom-logo:hover {
   opacity: 0.9;
   transform: scale(1.02);
}
.stroom-logo-large {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   text-decoration: none;
   transition: all 0.3s ease;
}
.stroom-logo-large img {
   height: 55px;
   width: auto;
}
.stroom-logo-large .logo-text {
   font-family: 'Poppins', sans-serif;
   font-size: 36px;
   font-weight: 800;
   color: white;
   letter-spacing: -0.5px;
}
.stroom-logo-large:hover {
   opacity: 0.9;
   transform: scale(1.02);
}

/* ===========================================
   Header
   =========================================== */
.header-fixed {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 20px 0 20px;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background: linear-gradient(135deg, #EB3300 0%, #FF9A56 100%);
   overflow: hidden;
}
.header-fixed.scrolled {
   background: rgba(235, 51, 0, 0.95);
   backdrop-filter: blur(10px);
   padding: 14px 0 14px;
}

/* Header kleuren per menu categorie */
.header-fixed.header-methode {
   background: linear-gradient(135deg, #EB3300 0%, #FF9A56 100%);
}
.header-fixed.header-methode.scrolled {
   background: rgba(235, 51, 0, 0.95);
}
.header-fixed.header-agency {
   background: linear-gradient(135deg, #2E8FA6 0%, #D0EDF2 100%);
}
.header-fixed.header-agency.scrolled {
   background: rgba(46, 143, 166, 0.95);
}
.header-fixed.header-software {
   background: linear-gradient(135deg, #2D3099 0%, #8C8FC7 100%);
}
.header-fixed.header-software.scrolled {
   background: rgba(45, 48, 153, 0.95);
}

/* Header hover preview - overlay layers met opacity fade */
.header-hover-layer {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   z-index: 0;
   pointer-events: none;
}
.header-hover-methode {
   background: linear-gradient(135deg, #FF9A56 0%, #EB3300 100%);
}
.header-hover-agency {
   background: linear-gradient(135deg, #D0EDF2 0%, #2E8FA6 100%);
}
.header-hover-software {
   background: linear-gradient(135deg, #8C8FC7 0%, #2D3099 100%);
}
.header-hover-layer.active {
   opacity: 1;
}
.header-fixed > *:not(.header-hover-layer) {
   position: relative;
   z-index: 1;
}

/* Homepage header - animated gradient cycle */
@property --home-grad-1 {
   syntax: '<color>';
   initial-value: #EB3300;
   inherits: false;
}
@property --home-grad-2 {
   syntax: '<color>';
   initial-value: #FF9A56;
   inherits: false;
}

.header-fixed.header-home {
   background: linear-gradient(135deg, var(--home-grad-1) 0%, var(--home-grad-2) 100%);
   animation: headerGradientCycle 30s ease-in-out infinite;
}
.header-fixed.header-home.scrolled {
   background: linear-gradient(135deg, var(--home-grad-1) 0%, var(--home-grad-2) 100%);
   backdrop-filter: blur(10px);
}

@keyframes headerGradientCycle {
   0%   { --home-grad-1: #EB3300; --home-grad-2: #FF9A56; }
   5%   { --home-grad-1: #EB3300; --home-grad-2: #FF9A56; }
   33%  { --home-grad-1: #EB3300; --home-grad-2: #FF9A56; }
   38%  { --home-grad-1: #2E8FA6; --home-grad-2: #D0EDF2; }
   66%  { --home-grad-1: #2E8FA6; --home-grad-2: #D0EDF2; }
   71%  { --home-grad-1: #2D3099; --home-grad-2: #8C8FC7; }
   95%  { --home-grad-1: #2D3099; --home-grad-2: #8C8FC7; }
   100% { --home-grad-1: #EB3300; --home-grad-2: #FF9A56; }
}

/* Scroll progress indicator - verborgen */
.scroll-progress {
   display: none;
}

/* ===========================================
   Navigation Links
   =========================================== */
.nav-link-custom {
   color: #ffffff;
   text-decoration: none;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   font-size: 15px;
   padding-bottom: 3px;
   position: relative;
   transition: all 0.3s ease;
   line-height: 1;
   display: inline-flex;
   align-items: center;
}
.nav-link-custom:hover {
   color: #ffffff;
   opacity: 1;
}

/* Animated underline on hover */
.nav-link-custom::after {
   content: '';
   position: absolute;
   bottom: -8px;
   left: 0;
   width: 0;
   height: 1px;
   background: #ffffff;
   transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.nav-link-custom:hover::after {
   width: 100%;
}

/* ===========================================
   Hamburger Menu
   =========================================== */
.hamburger {
   width: 40px;
   height: 40px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   gap: 5px;
   cursor: pointer;
   transition: all 0.3s;
   position: relative;
   padding-right: 2px;
}
.hamburger span {
   height: 2px;
   background: #ffffff;
   transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   transform-origin: right center;
   position: relative;
   border-radius: 2px;
}
/* Varied widths for visual interest */
.hamburger span:nth-child(1) {
   width: 24px;
}
.hamburger span:nth-child(2) {
   width: 18px;
}
.hamburger span:nth-child(3) {
   width: 22px;
}

/* Hamburger bars - subtle breathing animation */
.hamburger:not(.active) span:nth-child(1) {
   animation: barBreathe1 3s ease-in-out infinite;
}
.hamburger:not(.active) span:nth-child(2) {
   animation: barBreathe2 3s ease-in-out infinite 0.3s;
}
.hamburger:not(.active) span:nth-child(3) {
   animation: barBreathe3 3s ease-in-out infinite 0.6s;
}

@keyframes barBreathe1 {
   0%, 100% { width: 24px; }
   50% { width: 18px; }
}
@keyframes barBreathe2 {
   0%, 100% { width: 18px; }
   50% { width: 24px; }
}
@keyframes barBreathe3 {
   0%, 100% { width: 22px; }
   50% { width: 16px; }
}

/* Hover state - all bars align */
.hamburger:not(.active):hover span {
   width: 26px !important;
}
.hamburger:not(.active):hover span:nth-child(1) {
   animation: bar_slide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hamburger:not(.active):hover span:nth-child(2) {
   animation: bar_slide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
}
.hamburger:not(.active):hover span:nth-child(3) {
   animation: bar_slide 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

@keyframes bar_slide {
   0% { transform: translateX(0); }
   50% { transform: translateX(-4px); }
   100% { transform: translateX(0); }
}

/* Hamburger active state (X) */
.hamburger.active {
   align-items: center;
}
.hamburger.active span:nth-child(1) {
   width: 24px;
   transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
   width: 0;
   opacity: 0;
}
.hamburger.active span:nth-child(3) {
   width: 24px;
   transform: rotate(-45deg) translate(5px, -5px);
}

/* ===========================================
   Offcanvas Menu
   =========================================== */
.offcanvas-menu {
   position: fixed;
   top: 0;
   right: -450px;
   width: 450px;
   height: 100vh;
   background: linear-gradient(160deg, #EB3300 0%, #FF9A56 20%, #9DD0D9 50%, #A3C4E0 80%, #7BA4CC 100%);
   z-index: 10000;
   transition: right 0.6s cubic-bezier(0.77, 0, 0.175, 1);
   padding: 60px 50px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
}
.offcanvas-menu.active {
   right: 0;
}
.offcanvas-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0,0,0,0.85);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s;
   backdrop-filter: blur(0px);
}
.offcanvas-overlay.active {
   opacity: 1;
   visibility: visible;
   backdrop-filter: blur(10px);
}
.offcanvas-close {
   position: absolute;
   top: 30px;
   right: 30px;
   width: 40px;
   height: 40px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   opacity: 0;
   transform: scale(0);
}
.offcanvas-menu.active .offcanvas-close {
   opacity: 1;
   transform: scale(1);
   transition-delay: 0.4s;
}
.offcanvas-close:hover {
   transform: scale(1.1) rotate(90deg);
}
.offcanvas-close::before,
.offcanvas-close::after {
   content: '';
   position: absolute;
   width: 24px;
   height: 2px;
   background: white;
   transition: all 0.3s;
}
.offcanvas-close::before { transform: rotate(45deg); }
.offcanvas-close::after { transform: rotate(-45deg); }
.offcanvas-close:hover::before,
.offcanvas-close:hover::after {
   background: rgba(255, 255, 255, 0.5);
}

/* Offcanvas logo animation */
.offcanvas-logo {
   opacity: 0;
   transform: translateY(-20px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   margin-left: -15px;
}
.offcanvas-menu.active .offcanvas-logo {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.2s;
}

/* Offcanvas nav links with staggered animation */
.offcanvas-nav a {
   display: block;
   font-family: 'Poppins', sans-serif;
   font-size: 38px;
   font-weight: 800;
   color: white;
   text-decoration: none;
   margin-bottom: 20px;
   text-shadow: 0 1px 3px rgba(0,0,0,0.12);
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   transform: translateX(-40px);
   opacity: 0;
   position: relative;
   overflow: hidden;
}
.offcanvas-nav a::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 0;
   height: 2px;
   background: rgba(255, 255, 255, 0.4);
   transition: width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.offcanvas-nav a:hover::before {
   width: 100%;
}
.offcanvas-menu.active .offcanvas-nav a,
.offcanvas-menu.active .offcanvas-nav .offcanvas-group {
   transform: translateX(0);
   opacity: 1;
}
.offcanvas-menu.active .offcanvas-nav > :nth-child(1) { transition-delay: 0.15s; }
.offcanvas-menu.active .offcanvas-nav > :nth-child(2) { transition-delay: 0.2s; }
.offcanvas-menu.active .offcanvas-nav > :nth-child(3) { transition-delay: 0.25s; }
.offcanvas-menu.active .offcanvas-nav > :nth-child(4) { transition-delay: 0.3s; }
.offcanvas-menu.active .offcanvas-nav > :nth-child(5) { transition-delay: 0.35s; }

.offcanvas-nav a:hover {
   transform: translateX(10px);
   opacity: 0.7;
}

/* Doelgroepen groep */
.offcanvas-group {
   margin-top: 30px;
   margin-bottom: 20px;
   transform: translateX(-40px);
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.offcanvas-group-label {
   display: block;
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.5);
   text-transform: uppercase;
   letter-spacing: 2px;
   margin-bottom: 14px;
}
.offcanvas-group-item {
   display: block;
   font-family: 'Poppins', sans-serif;
   font-size: 34px;
   font-weight: 800;
   color: white;
   text-decoration: none;
   margin-bottom: 8px;
   text-shadow: 0 1px 3px rgba(0,0,0,0.12);
   transition: all 0.3s ease;
   position: relative;
}
.offcanvas-group-item:hover {
   transform: translateX(10px);
   opacity: 0.7;
}

/* Offcanvas contact animation */
.offcanvas-contact {
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.offcanvas-menu.active .offcanvas-contact {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.5s;
}

/* ===========================================
   Mega Menu - Agency Overlay
   =========================================== */
.mega-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #2E8FA6 0%, #D0EDF2 100%);
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   overflow-y: auto;
   padding: 40px;
}
.mega-menu-overlay.active {
   opacity: 1;
   visibility: visible;
}

/* Mega Menu Close Button */
.mega-menu-close {
   position: absolute;
   top: 40px;
   right: 40px;
   width: 50px;
   height: 50px;
   cursor: pointer;
   z-index: 10;
}
.mega-menu-close::before,
.mega-menu-close::after {
   content: '';
   position: absolute;
   top: 50%;
   left: 50%;
   width: 30px;
   height: 2px;
   background: white;
   transition: transform 0.3s;
}
.mega-menu-close::before {
   transform: translate(-50%, -50%) rotate(45deg);
}
.mega-menu-close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
}
.mega-menu-close:hover::before {
   transform: translate(-50%, -50%) rotate(135deg);
}
.mega-menu-close:hover::after {
   transform: translate(-50%, -50%) rotate(45deg);
}

/* Mega Menu Content */
.mega-menu-content {
   width: 100%;
   max-width: 1400px;
   padding: 0 60px;
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}
.mega-menu-overlay.active .mega-menu-content,
.methode-menu-overlay.active .mega-menu-content,
.software-menu-overlay.active .mega-menu-content {
   opacity: 1;
   transform: translateY(0);
}

/* Mega Menu Header - matching template style */
.mega-menu-header {
   margin-bottom: 60px;
   text-align: center;
}
.mega-menu-header .label {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-size: 14px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
   color: white;
   margin-bottom: 20px;
}
.mega-menu-header .label::before {
   content: '';
   width: 8px;
   height: 8px;
   background: white;
   border-radius: 50%;
}
.mega-menu-header h2 {
   font-size: clamp(40px, 8vw, 80px);
   font-weight: 800;
   color: white;
   margin-bottom: 0;
   letter-spacing: -3px;
   line-height: 1;
}

/* Mega Menu Grid */
.mega-menu-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 25px;
}
.mega-menu-grid-3 {
   grid-template-columns: repeat(3, 1fr);
   max-width: 1100px;
   margin: 0 auto;
}
.mega-menu-grid-2 {
   grid-template-columns: repeat(2, 1fr);
   max-width: 800px;
   margin: 0 auto;
}

/* ===========================================
   Mega Menu - Methode Overlay
   =========================================== */
.methode-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #EB3300 0%, #FF9A56 100%);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
   overflow-y: auto;
}
.methode-menu-overlay.active {
   opacity: 1;
   visibility: visible;
}
.methode-menu-overlay .mega-menu-content {
   max-width: 1000px;
}

/* Methode Menu Item Animation */
.methode-menu-overlay.active .mega-menu-item {
   opacity: 1;
   transform: translateY(0);
}
.methode-menu-overlay.active .mega-menu-item:nth-child(1) { transition-delay: 0.25s; }
.methode-menu-overlay.active .mega-menu-item:nth-child(2) { transition-delay: 0.3s; }

/* ===========================================
   Mega Menu - Software Overlay
   =========================================== */
.software-menu-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(135deg, #2D3099 0%, #8C8FC7 100%);
   z-index: 9999;
   opacity: 0;
   visibility: hidden;
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
   overflow-y: auto;
}
.software-menu-overlay.active {
   opacity: 1;
   visibility: visible;
}
.software-menu-overlay .mega-menu-content {
   max-width: 1100px;
}

/* Software Menu Item Animation */
.software-menu-overlay.active .mega-menu-item {
   opacity: 1;
   transform: translateY(0);
}
.software-menu-overlay.active .mega-menu-item:nth-child(1) { transition-delay: 0.25s; }
.software-menu-overlay.active .mega-menu-item:nth-child(2) { transition-delay: 0.3s; }
.software-menu-overlay.active .mega-menu-item:nth-child(3) { transition-delay: 0.35s; }

/* ===========================================
   Mega Menu Items
   =========================================== */
.mega-menu-item {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   cursor: pointer;
   opacity: 0;
   transform: translateY(40px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   text-decoration: none;
   display: block;
}
.mega-menu-overlay.active .mega-menu-item {
   opacity: 1;
   transform: translateY(0);
}
.mega-menu-overlay.active .mega-menu-item:nth-child(1) { transition-delay: 0.25s; }
.mega-menu-overlay.active .mega-menu-item:nth-child(2) { transition-delay: 0.3s; }
.mega-menu-overlay.active .mega-menu-item:nth-child(3) { transition-delay: 0.35s; }
.mega-menu-overlay.active .mega-menu-item:nth-child(4) { transition-delay: 0.4s; }

.mega-menu-item .mega-menu-item-thumb {
   position: relative;
   overflow: hidden;
   border-radius: 16px;
   height: 280px;
   margin-bottom: 20px;
}
.mega-menu-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-item:hover img {
   transform: scale(1.08);
}

/* Mega Menu Item Content - below image like portfolio */
.mega-menu-item-content {
   padding: 0;
}
.mega-menu-item-content .title {
   font-family: 'Poppins', sans-serif;
   font-size: 22px;
   font-weight: 700;
   color: white;
   margin-bottom: 8px;
   transition: color 0.3s;
   text-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.mega-menu-item:hover .mega-menu-item-content .title {
   color: var(--dark);
   text-shadow: none;
}
.mega-menu-item-content .cat {
   font-size: 13px;
   font-weight: 500;
   color: rgba(255,255,255,0.6);
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* Mega Menu View Arrow - appears on image hover */
.mega-menu-item-arrow {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(0);
   width: 60px;
   height: 60px;
   background: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 2;
   opacity: 0;
   transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.mega-menu-item:hover .mega-menu-item-arrow {
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
}
.mega-menu-item-arrow svg {
   width: 20px;
   height: 20px;
   color: var(--dark);
   transition: transform 0.3s;
}
.mega-menu-item:hover .mega-menu-item-arrow svg {
   transform: rotate(-45deg);
}

/* ===========================================
   Mega Menu Footer & CTA
   =========================================== */
.mega-menu-footer {
   margin-top: 60px;
   text-align: center;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-overlay.active .mega-menu-footer {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.5s;
}

.mega-menu-cta {
   text-align: center;
   margin-top: 20px;
   opacity: 0;
   transform: translateY(20px);
   transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-overlay.active .mega-menu-cta,
.methode-menu-overlay.active .mega-menu-cta,
.software-menu-overlay.active .mega-menu-cta {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.15s;
}
.mega-menu-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   padding: 14px 32px;
   background: rgba(255, 255, 255, 0.15);
   border: 2px solid rgba(255, 255, 255, 0.4);
   border-radius: 50px;
   color: white;
   font-size: 16px;
   font-weight: 600;
   text-decoration: none;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   backdrop-filter: blur(10px);
}
.mega-menu-cta-btn:hover {
   background: white;
   color: var(--dark);
   border-color: white;
   transform: translateX(5px);
}
.mega-menu-cta-btn svg {
   transition: transform 0.3s;
}
.mega-menu-cta-btn:hover svg {
   transform: translateX(5px);
}

/* ===========================================
   Mega Menu Wave Bars
   =========================================== */
.mega-menu-waves {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 30%;
   pointer-events: none;
   z-index: 1;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   padding: 0;
   opacity: 0;
   transform: translateY(100%);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-overlay.active .mega-menu-waves,
.methode-menu-overlay.active .mega-menu-waves,
.software-menu-overlay.active .mega-menu-waves {
   opacity: 1;
   transform: translateY(0);
   transition-delay: 0.3s;
}

/* Individual vertical wave bars */
.wave-bar {
   width: 3px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 2px 2px 0 0;
   transform-origin: bottom center;
   flex-shrink: 0;
   height: 40%;
}

/* Opacity variations for depth */
.wave-bar:nth-child(odd) { background: rgba(255, 255, 255, 0.1); }
.wave-bar:nth-child(even) { background: rgba(255, 255, 255, 0.06); }
.wave-bar:nth-child(3n) { background: rgba(255, 255, 255, 0.12); }

/* Ocean wave animations - duidelijke golfbeweging */
@keyframes wave1 {
   0% { height: 10%; }
   25% { height: 55%; }
   50% { height: 15%; }
   75% { height: 45%; }
   100% { height: 10%; }
}

@keyframes wave2 {
   0% { height: 15%; }
   30% { height: 50%; }
   60% { height: 12%; }
   100% { height: 15%; }
}

@keyframes wave3 {
   0% { height: 8%; }
   35% { height: 48%; }
   65% { height: 18%; }
   100% { height: 8%; }
}

/* Geen animatie standaard */
.wave-bar {
   animation-name: none;
   animation-duration: 4s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
}

/* Golvende animatie actief in mega menus */
.mega-menu-overlay.active .wave-bar,
.methode-menu-overlay.active .wave-bar,
.software-menu-overlay.active .wave-bar {
   animation-name: wave1;
}

/* Variatie voor organisch golfpatroon */
.mega-menu-overlay.active .wave-bar:nth-child(3n+1),
.methode-menu-overlay.active .wave-bar:nth-child(3n+1),
.software-menu-overlay.active .wave-bar:nth-child(3n+1) {
   animation-name: wave2;
   animation-duration: 4.5s;
}

.mega-menu-overlay.active .wave-bar:nth-child(5n+2),
.methode-menu-overlay.active .wave-bar:nth-child(5n+2),
.software-menu-overlay.active .wave-bar:nth-child(5n+2) {
   animation-name: wave3;
   animation-duration: 3.5s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .mega-menu-waves {
      height: 20%;
   }
   .wave-bar {
      width: 2px;
   }
}

/* ===========================================
   Section Wave Bars (divider between sections)
   =========================================== */
.section-waves {
   position: relative;
   width: 100%;
   height: 120px;
   overflow: hidden;
}
.section-waves.section-waves--bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   z-index: 1;
}
.section-waves-container {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
   padding: 0;
}
.section-wave-bar {
   width: 3px;
   background: rgba(183, 221, 225, 0.3);
   border-radius: 2px 2px 0 0;
   transform-origin: bottom center;
   flex-shrink: 0;
   height: 40%;
   animation-duration: 4s;
   animation-timing-function: ease-in-out;
   animation-iteration-count: infinite;
   animation-name: sectionWave1;
}
.section-wave-bar:nth-child(odd) { background: rgba(183, 221, 225, 0.35); }
.section-wave-bar:nth-child(even) { background: rgba(183, 221, 225, 0.2); }
.section-wave-bar:nth-child(3n) { background: rgba(183, 221, 225, 0.4); }

.section-wave-bar:nth-child(3n+1) {
   animation-name: sectionWave2;
   animation-duration: 4.5s;
}
.section-wave-bar:nth-child(5n+2) {
   animation-name: sectionWave3;
   animation-duration: 3.5s;
}

@keyframes sectionWave1 {
   0% { height: 10%; }
   25% { height: 55%; }
   50% { height: 15%; }
   75% { height: 45%; }
   100% { height: 10%; }
}
@keyframes sectionWave2 {
   0% { height: 15%; }
   30% { height: 50%; }
   60% { height: 12%; }
   100% { height: 15%; }
}
@keyframes sectionWave3 {
   0% { height: 8%; }
   35% { height: 48%; }
   65% { height: 18%; }
   100% { height: 8%; }
}

@media (max-width: 768px) {
   .section-waves { height: 80px; }
   .section-wave-bar { width: 2px; }
}

/* ===========================================
   Mega Menu Footer Links
   =========================================== */
.mega-menu-footer a {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: white;
   text-decoration: none;
   font-size: 15px;
   font-weight: 600;
   padding: 16px 32px;
   border: 2px solid rgba(255,255,255,0.3);
   border-radius: 50px;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mega-menu-footer a:hover {
   background: white;
   border-color: white;
   color: var(--accent);
}
.mega-menu-footer a svg {
   transition: transform 0.3s;
}
.mega-menu-footer a:hover svg {
   transform: translateX(5px);
}

/* ===========================================
   Menu Trigger Arrows
   =========================================== */
.projects-trigger,
.methode-trigger,
.software-trigger {
   cursor: pointer;
   position: relative;
}
.projects-trigger::after,
.methode-trigger::after,
.software-trigger::after {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 5px solid currentColor;
   margin-left: 6px;
   transition: transform 0.3s;
}
.projects-trigger:hover::after,
.methode-trigger:hover::after,
.software-trigger:hover::after {
   transform: translateY(2px);
}

/* ===========================================
   Responsive Mega Menu
   =========================================== */
@media (max-width: 1200px) {
   .mega-menu-grid {
      grid-template-columns: repeat(2, 1fr);
   }
}
@media (max-width: 768px) {
   .mega-menu-grid,
   .mega-menu-grid-2,
   .mega-menu-grid-3 {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
   }
   .mega-menu-content {
      padding: 0 16px;
   }
   .mega-menu-header {
      margin-bottom: 16px;
   }
   .mega-menu-header h2 {
      font-size: clamp(24px, 7vw, 40px);
   }
   .mega-menu-header .label {
      font-size: 11px;
      margin-bottom: 8px;
   }
   .mega-menu-item {
      aspect-ratio: auto;
   }
   .mega-menu-item .mega-menu-item-thumb {
      height: 80px;
      margin-bottom: 6px;
      border-radius: 10px;
   }
   .mega-menu-item-content {
      padding: 0;
   }
   .mega-menu-item-content .title {
      font-size: 14px;
      margin-bottom: 2px;
   }
   .mega-menu-item-content .cat {
      font-size: 10px;
   }
   .mega-menu-item-arrow {
      width: 28px;
      height: 28px;
   }
   .mega-menu-overlay,
   .methode-menu-overlay,
   .software-menu-overlay {
      padding: 60px 0 20px;
      align-items: flex-start;
      overflow-y: auto;
   }
   .mega-menu-cta {
      margin-top: 12px;
   }
   .mega-menu-cta-btn {
      font-size: 13px;
      padding: 8px 16px;
   }
}

/* ===========================================
   Back to Top
   =========================================== */
.back-to-top {
   position: fixed;
   bottom: 40px;
   right: 120px;
   width: 50px;
   height: 50px;
   background: white;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   opacity: 0;
   visibility: hidden;
   transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
   z-index: 998;
   transform: translateY(20px);
}
.back-to-top.visible {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}
.back-to-top:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}
.back-to-top svg {
   transition: transform 0.3s;
}
.back-to-top:hover svg {
   transform: translateY(-3px);
}

/* ===========================================
   Button Components
   =========================================== */
@property --btn-bg-1 {
   syntax: '<color>';
   initial-value: #EB3300;
   inherits: false;
}
@property --btn-bg-2 {
   syntax: '<color>';
   initial-value: #FF9A56;
   inherits: false;
}

.btn-stroom {
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: 10px;
   padding: 16px 32px;
   background: linear-gradient(135deg, var(--btn-bg-1) 0%, var(--btn-bg-2) 100%);
   color: white;
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   border-radius: 50px;
   transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   border: none;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   animation: btnColorCycle 30s ease-in-out infinite;
}
.btn-stroom:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(0,0,0,0.25);
   color: white;
}

/* Button color cycle: synced with header/footer/text 30s cycle */
@keyframes btnColorCycle {
   0%   { --btn-bg-1: #EB3300; --btn-bg-2: #FF9A56; }
   5%   { --btn-bg-1: #EB3300; --btn-bg-2: #FF9A56; }
   33%  { --btn-bg-1: #EB3300; --btn-bg-2: #FF9A56; }
   38%  { --btn-bg-1: #2E8FA6; --btn-bg-2: #D0EDF2; }
   66%  { --btn-bg-1: #2E8FA6; --btn-bg-2: #D0EDF2; }
   71%  { --btn-bg-1: #2D3099; --btn-bg-2: #8C8FC7; }
   95%  { --btn-bg-1: #2D3099; --btn-bg-2: #8C8FC7; }
   100% { --btn-bg-1: #EB3300; --btn-bg-2: #FF9A56; }
}
svg.arrow {
   flex-shrink: 0;
   display: inline-block;
   vertical-align: middle;
}
.btn-stroom .arrow {
   transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn-stroom:hover .arrow {
   transform: translateX(8px);
}
.btn-stroom-outline {
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: 10px;
   padding: 16px 32px;
   background: transparent;
   color: #09090b;
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   border-radius: 50px;
   border: 2px solid #09090b;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   cursor: pointer;
}
.btn-stroom-outline:hover {
   background: #09090b;
   color: white;
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}
.btn-stroom-accent {
   display: inline-flex;
   align-items: center;
   flex-wrap: nowrap;
   gap: 10px;
   padding: 16px 32px;
   background: linear-gradient(135deg, #FF8C42 0%, #2D3099 100%);
   color: white;
   text-decoration: none;
   font-weight: 600;
   font-size: 15px;
   border-radius: 50px;
   border: none;
   transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   cursor: pointer;
   box-shadow: 0 4px 20px rgba(254, 84, 66, 0.3);
}
.btn-stroom-accent:hover {
   transform: translateY(-3px);
   box-shadow: 0 15px 40px rgba(254, 84, 66, 0.5);
   color: white;
}

/* ===========================================
   Card Lift Effect
   =========================================== */
.card-lift {
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.card-lift:hover {
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0,0,0,0.12);
}

/* ===========================================
   Animated Gradient Text (synced with header)
   =========================================== */
@property --hero-text-1 {
   syntax: '<color>';
   initial-value: #EB3300;
   inherits: false;
}
@property --hero-text-2 {
   syntax: '<color>';
   initial-value: #FF9A56;
   inherits: false;
}
@property --hero-text-3 {
   syntax: '<color>';
   initial-value: #2E8FA6;
   inherits: false;
}
@property --hero-text-4 {
   syntax: '<color>';
   initial-value: #8C8FC7;
   inherits: false;
}
@property --hero-text-5 {
   syntax: '<color>';
   initial-value: #2D3099;
   inherits: false;
}

.gradient-text-animated {
   background: linear-gradient(135deg, var(--hero-text-1) 0%, var(--hero-text-2) 25%, var(--hero-text-3) 50%, var(--hero-text-4) 75%, var(--hero-text-5) 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
   animation: heroTextGradientCycle 30s ease-in-out infinite;
}

/* Vaste kleurverloop voor koppen */
.gradient-text {
   background: linear-gradient(135deg, #EB3300 0%, #FF9A56 25%, #2E8FA6 50%, #8C8FC7 75%, #2D3099 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

@keyframes heroTextGradientCycle {
   0%   { --hero-text-1: #EB3300; --hero-text-2: #FF9A56; --hero-text-3: #2E8FA6; --hero-text-4: #8C8FC7; --hero-text-5: #2D3099; }
   5%   { --hero-text-1: #EB3300; --hero-text-2: #FF9A56; --hero-text-3: #2E8FA6; --hero-text-4: #8C8FC7; --hero-text-5: #2D3099; }
   33%  { --hero-text-1: #EB3300; --hero-text-2: #FF9A56; --hero-text-3: #2E8FA6; --hero-text-4: #8C8FC7; --hero-text-5: #2D3099; }
   38%  { --hero-text-1: #2E8FA6; --hero-text-2: #D0EDF2; --hero-text-3: #8C8FC7; --hero-text-4: #2D3099; --hero-text-5: #EB3300; }
   66%  { --hero-text-1: #2E8FA6; --hero-text-2: #D0EDF2; --hero-text-3: #8C8FC7; --hero-text-4: #2D3099; --hero-text-5: #EB3300; }
   71%  { --hero-text-1: #2D3099; --hero-text-2: #8C8FC7; --hero-text-3: #EB3300; --hero-text-4: #FF9A56; --hero-text-5: #2E8FA6; }
   95%  { --hero-text-1: #2D3099; --hero-text-2: #8C8FC7; --hero-text-3: #EB3300; --hero-text-4: #FF9A56; --hero-text-5: #2E8FA6; }
   100% { --hero-text-1: #EB3300; --hero-text-2: #FF9A56; --hero-text-3: #2E8FA6; --hero-text-4: #8C8FC7; --hero-text-5: #2D3099; }
}

/* ===========================================
   Animations
   =========================================== */
.fade-in {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Staggered fade in */
.fade-in-stagger {
   opacity: 0;
   transform: translateY(30px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in-stagger.visible {
   opacity: 1;
   transform: translateY(0);
}

/* Slide in from left */
.slide-in-left {
   opacity: 0;
   transform: translateX(-50px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-in-left.visible {
   opacity: 1;
   transform: translateX(0);
}

/* Slide in from right */
.slide-in-right {
   opacity: 0;
   transform: translateX(50px);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-in-right.visible {
   opacity: 1;
   transform: translateX(0);
}

/* Scale in */
.scale-in {
   opacity: 0;
   transform: scale(0.9);
   transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scale-in.visible {
   opacity: 1;
   transform: scale(1);
}

/* Levitate animation for images */
@keyframes levitate {
   0%, 100% { transform: translateY(0); }
   50% { transform: translateY(-10px); }
}
.levitate {
   animation: levitate 3s ease-in-out infinite;
}

/* ===========================================
   Reveal Animations
   =========================================== */
.img-reveal {
   position: relative;
   overflow: hidden;
}
.img-reveal::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--dark);
   transform: scaleX(1);
   transform-origin: right;
   transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.img-reveal.visible::after {
   transform: scaleX(0);
}

.text-reveal {
   overflow: hidden;
   display: inline-block;
}
.text-reveal span {
   display: inline-block;
   transform: translateY(100%);
   transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
.text-reveal.visible span {
   transform: translateY(0);
}

/* ===========================================
   Magnetic & Cursor
   =========================================== */
.magnetic {
   display: inline-block;
   transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cursor-follower {
   position: fixed;
   width: 40px;
   height: 40px;
   border: 1px solid var(--dark);
   border-radius: 50%;
   pointer-events: none;
   z-index: 99999;
   transition: transform 0.15s, width 0.3s, height 0.3s, opacity 0.3s;
   transform: translate(-50%, -50%);
   opacity: 0;
}
.cursor-follower.visible {
   opacity: 1;
}
.cursor-follower.hover {
   width: 60px;
   height: 60px;
   background: rgba(255, 107, 53, 0.1);
   border-color: var(--accent);
}

/* ===========================================
   Gallery Track Animation
   =========================================== */
.gallery-track {
   display: flex;
   align-items: center;
   gap: 20px;
   animation: scrollBack 60s linear infinite alternate;
   width: max-content;
   padding-left: 20px;
}
.gallery-track:hover {
   animation-play-state: paused;
}
@keyframes scrollBack {
   0% { transform: translateX(0); }
   100% { transform: translateX(calc(-3500px + 100vw - 60px)); }
}

/* Gallery Items */
.gallery-item {
   flex-shrink: 0;
   width: 180px;
   height: 240px;
   border-radius: 12px;
   overflow: hidden;
   transition: transform 0.4s;
}
.gallery-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}
.gallery-item:hover {
   animation-play-state: paused;
   transform: scale(1.05) translateY(-10px) !important;
}

/* Golvend effect - elke 10 items herhaalt het patroon */
.gallery-item:nth-child(10n+1) { animation: waveFloat1 3s ease-in-out infinite; }
.gallery-item:nth-child(10n+2) { animation: waveFloat2 3s ease-in-out infinite 0.1s; }
.gallery-item:nth-child(10n+3) { animation: waveFloat3 3s ease-in-out infinite 0.2s; }
.gallery-item:nth-child(10n+4) { animation: waveFloat4 3s ease-in-out infinite 0.3s; }
.gallery-item:nth-child(10n+5) { animation: waveFloat3 3s ease-in-out infinite 0.4s; }
.gallery-item:nth-child(10n+6) { animation: waveFloat2 3s ease-in-out infinite 0.5s; }
.gallery-item:nth-child(10n+7) { animation: waveFloat1 3s ease-in-out infinite 0.6s; }
.gallery-item:nth-child(10n+8) { animation: waveFloat5 3s ease-in-out infinite 0.7s; }
.gallery-item:nth-child(10n+9) { animation: waveFloat6 3s ease-in-out infinite 0.8s; }
.gallery-item:nth-child(10n+10) { animation: waveFloat5 3s ease-in-out infinite 0.9s; }

@keyframes waveFloat1 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-10px); }
}
@keyframes waveFloat2 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-14px); }
}
@keyframes waveFloat3 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-8px); }
}
@keyframes waveFloat4 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-12px); }
}
@keyframes waveFloat5 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-6px); }
}
@keyframes waveFloat6 {
   0%, 100% { transform: translateY(0px); }
   50% { transform: translateY(-10px); }
}

/* Gallery slider fade edges */
.gallery-slider {
   position: relative;
}
.gallery-slider::before,
.gallery-slider::after {
   content: '';
   position: absolute;
   top: 0;
   width: 100px;
   height: 100%;
   z-index: 2;
   pointer-events: none;
}
.gallery-slider::before {
   left: 0;
   background: linear-gradient(to right, rgba(183,221,225,0.25) 0%, transparent 100%);
}
.gallery-slider::after {
   right: 0;
   background: linear-gradient(to left, rgba(183,221,225,0.25) 0%, transparent 100%);
}

/* ===========================================
   Parallax Image Container
   =========================================== */
.parallax-img { overflow: hidden; border-radius: 16px; }
.parallax-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; will-change: transform; }

/* ===========================================
   Footer
   =========================================== */
/* Footer gradient animation - synced with header */
@property --footer-grad-1 {
   syntax: '<color>';
   initial-value: #EB3300;
   inherits: false;
}
@property --footer-grad-2 {
   syntax: '<color>';
   initial-value: #FF9A56;
   inherits: false;
}

.footer {
   background: linear-gradient(135deg, var(--footer-grad-1) 0%, var(--footer-grad-2) 100%);
   animation: footerGradientCycle 30s ease-in-out infinite;
   padding: 100px 0 40px;
}

@keyframes footerGradientCycle {
   0%   { --footer-grad-1: #EB3300; --footer-grad-2: #FF9A56; }
   5%   { --footer-grad-1: #EB3300; --footer-grad-2: #FF9A56; }
   33%  { --footer-grad-1: #EB3300; --footer-grad-2: #FF9A56; }
   38%  { --footer-grad-1: #2E8FA6; --footer-grad-2: #D0EDF2; }
   66%  { --footer-grad-1: #2E8FA6; --footer-grad-2: #D0EDF2; }
   71%  { --footer-grad-1: #2D3099; --footer-grad-2: #8C8FC7; }
   95%  { --footer-grad-1: #2D3099; --footer-grad-2: #8C8FC7; }
   100% { --footer-grad-1: #EB3300; --footer-grad-2: #FF9A56; }
}
.footer-title {
   font-size: 18px;
   font-weight: 600;
   color: white;
   margin-bottom: 25px;
}
.footer-links a {
   display: block;
   color: rgba(255,255,255,0.6);
   text-decoration: none;
   margin-bottom: 12px;
   transition: all 0.3s;
}
.footer-links a:hover {
   color: white;
   transform: translateX(5px);
}
.footer-big-text {
   font-family: 'Poppins', sans-serif;
   font-size: clamp(50px, 10vw, 140px);
   font-weight: 800;
   color: white;
   text-decoration: none;
   display: block;
   transition: opacity 0.3s ease;
   line-height: 1;
   position: relative;
}
.footer-big-text:hover {
   opacity: 0.8;
   color: white;
}
.footer-bottom {
   border-top: 1px solid rgba(255,255,255,0.1);
   padding-top: 30px;
   margin-top: 60px;
}
.footer-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 45px;
   height: 45px;
   border: 1px solid rgba(255,255,255,0.2);
   border-radius: 50%;
   color: white;
   margin-right: 10px;
   transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.footer-social a:hover {
   background: white;
   color: var(--dark);
   transform: translateY(-5px);
}

/* ===========================================
   Responsive - Offcanvas & Footer
   =========================================== */
@media (max-width: 991px) {
   .back-to-top {
      right: 20px;
      bottom: 20px;
   }
   .offcanvas-menu {
      width: 100%;
      right: -100%;
      padding: 40px 30px;
   }
   .offcanvas-nav a {
      font-size: 26px;
      margin-bottom: 14px;
   }
   .offcanvas-group-item {
      font-size: 22px;
      margin-bottom: 6px;
   }
   .offcanvas-group-label {
      font-size: 14px;
      margin-bottom: 10px;
   }
   .offcanvas-group {
      margin-top: 20px;
      margin-bottom: 14px;
   }
   .footer-big-text {
      font-size: clamp(40px, 8vw, 80px);
   }
   /* Section nav dots verbergen op tablet/mobiel */
   .section-nav {
      display: none;
   }
   /* Scroll-pijl verbergen op mobiel */
   .section-scroll-hint {
      display: none;
   }
}

/* ===========================================
   Responsive - Staircase items op medium schermen
   =========================================== */
@media (max-width: 1024px) {
   .staircase-item-01 { margin-left: 0% !important; }
   .staircase-item-02 { margin-left: 10% !important; }
   .staircase-item-03 { margin-left: 20% !important; }
   .staircase-item-04 { margin-left: 30% !important; }
}
@media (max-width: 640px) {
   .staircase-item-01 { margin-left: 0% !important; }
   .staircase-item-02 { margin-left: 5% !important; }
   .staircase-item-03 { margin-left: 10% !important; }
   .staircase-item-04 { margin-left: 15% !important; }
}

/* ===========================================
   Responsive - Mobiel (<768px)
   =========================================== */
@media (max-width: 768px) {
   /* Section min-height aanpassen */
   .content-page > section {
      min-height: auto;
   }
   .footer {
      min-height: auto;
      padding: 60px 0 30px;
   }

   /* Logo responsive */
   .stroom-logo {
      margin-left: -10px;
   }
   .stroom-logo img {
      height: 40px;
   }
   .stroom-logo .logo-text {
      font-size: 26px;
      margin-left: 6px;
   }

   /* Header padding verkleinen */
   .header-fixed {
      padding: 14px 0;
   }

   /* Gallery items kleiner op mobiel */
   .gallery-item {
      width: 140px;
      height: 190px;
      border-radius: 10px;
   }
   .gallery-track {
      gap: 14px;
   }

   /* Buttons compacter */
   .btn-stroom,
   .btn-stroom-outline,
   .btn-stroom-accent {
      padding: 12px 24px;
      font-size: 14px;
   }

   /* Mega menu close button */
   .mega-menu-close {
      top: 16px;
      right: 16px;
      width: 40px;
      height: 40px;
   }

   /* Offcanvas finetuning */
   .offcanvas-menu {
      padding: 30px 24px;
   }
   .offcanvas-nav a {
      font-size: 22px;
      margin-bottom: 12px;
   }
   .offcanvas-group-item {
      font-size: 19px;
      margin-bottom: 5px;
   }
   .offcanvas-group-label {
      font-size: 12px;
      margin-bottom: 8px;
   }
   .offcanvas-group {
      margin-top: 16px;
      margin-bottom: 10px;
   }
   .offcanvas-close {
      top: 20px;
      right: 20px;
   }

   /* Footer compacter */
   .footer-bottom {
      margin-top: 40px;
   }

   /* Body tekst iets kleiner op mobiel */
   .text-lg {
      font-size: 1rem;
      line-height: 1.7;
   }

   /* Tekst in CTA sectie */
   .text-xl {
      font-size: 1.05rem;
   }
}

/* ===========================================
   Responsive - Kleine mobiel (<480px)
   =========================================== */
@media (max-width: 480px) {
   .stroom-logo {
      margin-left: -6px;
   }
   .stroom-logo img {
      height: 34px;
   }
   .stroom-logo .logo-text {
      font-size: 22px;
   }

   /* Gallery nog compacter */
   .gallery-item {
      width: 120px;
      height: 160px;
   }
   .gallery-track {
      gap: 10px;
   }

   /* Offcanvas finetuning */
   .offcanvas-nav a {
      font-size: 20px;
      margin-bottom: 10px;
   }
   .offcanvas-group-item {
      font-size: 17px;
      margin-bottom: 4px;
   }
   .offcanvas-group-label {
      font-size: 11px;
      margin-bottom: 6px;
   }
   .offcanvas-group {
      margin-top: 14px;
      margin-bottom: 10px;
   }
}