@charset "utf-8";

/* CSS Document */

/* =========================
   LOKALE FONTS
========================= */

@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron/Orbitron-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron/Orbitron-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Orbitron";
  src: url("fonts/orbitron/Orbitron-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani/Rajdhani-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani/Rajdhani-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani/Rajdhani-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rajdhani";
  src: url("fonts/rajdhani/Rajdhani-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Rajdhani", sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  font-weight: 400;
}

/* Navigation */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 50px;
  background: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  z-index: 1000;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(164, 198, 57, 0.1);
}

nav.scrolled {
  padding: 15px 50px;
  background: rgba(10, 10, 10, 0.95);
  box-shadow: 0 5px 30px rgba(164, 198, 57, 0.2);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}

.logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  height: 100%;
}

.logo-img {
  height: 65px;
  width: auto;
  object-fit: contain;
  display: block;
}

.logo-svg {
  width: 40px;
  height: 40px;
}

@keyframes glow {
  0%,
  100% {
    filter: brightness(1);
    text-shadow: 0 0 30px rgba(255, 94, 0, 0.5);
  }
  50% {
    filter: brightness(1.5);
    text-shadow: 0 0 40px rgba(255, 94, 0, 0.8);
  }
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
}

.nav-links a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  transition: all 0.3s ease;
  padding: 8px 16px;
  font-family: "Orbitron", monospace;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
}

.nav-links a.active {
  opacity: 1;
  color: #a4c639;
}

.nav-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 1px solid transparent;
  transition: all 0.3s ease;
}

.nav-links a:hover::before,
.nav-links a.active::before {
  border-color: #5d28dd;
  box-shadow: inset 0 0 10px rgba(93, 40, 221, 0.5);
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #a4c639, #5d28dd);
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(255, 94, 0, 0.8);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Mobile menu */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
}

.menu-toggle span {
  width: 25px;
  height: 2px;
  background: #a4c639;
  transition: all 0.3s ease;
}

.menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Hero Section */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 80px 20px 20px;
}

.hero-content {
  text-align: center;
  max-width: 1200px;
  animation: fade-in-up 1s ease-out;
  z-index: 10;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Text Rotator Styles */
.text-rotator {
  position: relative;
  min-height: 100px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.text-set {
  position: absolute;
  width: 100%;
  opacity: 0;
  display: none;
}

.text-set.active {
  opacity: 1;
  display: block;
}

.glitch-text {
  font-family: "Orbitron", monospace;
  font-size: clamp(0.98rem, 2.94vw, 2.4rem);
  font-weight: 900;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(255, 94, 0, 0.5);
  overflow: hidden;
}

.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  animation: charFlyIn 0.5s ease-out forwards;
}

@keyframes charFlyIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.char.out {
  animation: charFlyOut 0.3s ease-in forwards;
}

@keyframes charFlyOut {
  to {
    opacity: 0;
    transform: translateY(-30px) rotateX(90deg);
  }
}

.subtitle {
  font-size: 1.5rem;
  margin: 20px 0;
  opacity: 0;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

.subtitle.visible {
  animation: subtitleFade 0.8s ease-out 0.5s forwards;
}

@keyframes subtitleFade {
  to {
    opacity: 0.6;
  }
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glitch-text {
  font-family: "Orbitron", monospace;
  font-size: clamp(2.6rem, 10vw, 3.8rem);
  font-weight: 900;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(93, 40, 221, 0.5);
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  animation: glitch-1 0.5s infinite;
  color: #5d28dd;
  z-index: -1;
  text-shadow: -2px 0 #5d28dd;
}

.glitch-text::after {
  animation: glitch-2 0.5s infinite;
  color: #a4c639;
  z-index: -1;
  text-shadow: 2px 0 #5d28dd;
}

@keyframes glitch-1 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(33% 0 33% 0);
    transform: translate(-2px);
  }
  40% {
    clip-path: inset(66% 0 0 0);
    transform: translate(2px);
  }
  60% {
    clip-path: inset(0 0 66% 0);
    transform: translate(1px);
  }
  80% {
    clip-path: inset(25% 0 50% 0);
    transform: translate(-1px);
  }
}

@keyframes glitch-2 {
  0%,
  100% {
    clip-path: inset(0 0 0 0);
    transform: translate(0);
  }
  20% {
    clip-path: inset(50% 0 25% 0);
    transform: translate(2px);
  }
  40% {
    clip-path: inset(0 0 75% 0);
    transform: translate(-2px);
  }
  60% {
    clip-path: inset(75% 0 0 0);
    transform: translate(-1px);
  }
  80% {
    clip-path: inset(40% 0 40% 0);
    transform: translate(1px);
  }
}

.subtitle {
  font-size: 1.5rem;
  margin: 20px 0;
  opacity: 0.6;
  animation: fade-in 1s ease-out 0.5s both;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  font-weight: 300;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.6;
  }
}

.cta-container {
  position: absolute;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  z-index: 100;
}

.cta-button {
  padding: 12px 30px;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: "Orbitron", monospace;
  font-weight: 700;
}

.cta-primary {
  background: linear-gradient(45deg, #5d28dd, #5d28dd);
  color: white;
  animation: pulse 2s infinite;
  box-shadow: 0 0 30px rgba(93, 40, 221, 0.5);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 30px rgba(93, 40, 221, 0.5);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 40px rgba(93, 40, 221, 0.8);
  }
}

.cta-secondary {
  background: transparent;
  color: #a4c639;
  border: 2px solid #5d28dd;
  box-shadow: inset 0 0 20px rgba(255, 94, 0, 0.1);
}

.cta-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.6s,
    height 0.6s;
}

.cta-button:hover::before {
  width: 300px;
  height: 300px;
}

.cta-secondary:hover {
  background: rgba(93, 40, 221, 0.1);
  color: white;
  transform: translateY(-2px);
  box-shadow:
    0 10px 40px rgba(93, 40, 221, 0.4),
    inset 0 0 30px rgba(93, 40, 221, 0.2);
  border-color: #ffffff;
}

/* Features Section with Tabs */
.features {
  padding: 100px 20px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.section-title {
  font-family: "Orbitron", monospace;
  font-size: 3rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 50px;
  background: linear-gradient(45deg, #ffffff, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.features-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 40px;
  align-items: start;
}

.feature-tabs {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(93, 40, 221, 0.2);
  border-radius: 10px;
  padding: 20px;
  backdrop-filter: blur(10px);
}

.tab-item {
  padding: 15px 20px;
  margin-bottom: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 1.1rem;
}

.tab-item:hover {
  background: rgba(164, 198, 57, 0.1);
  border-color: rgba(164, 198, 57, 0.3);
}

.tab-item.active {
  background: linear-gradient(
    45deg,
    rgba(164, 198, 57, 0.2),
    rgba(93, 40, 221, 0.2)
  );
  border-color: #5d28dd;
  box-shadow: 0 0 20px rgba(93, 40, 221, 0.3);
}

.tab-icon {
  font-size: 1.5rem;
}

.feature-content {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(93, 40, 221, 0.2);
  border-radius: 10px;
  padding: 40px;
  backdrop-filter: blur(10px);
  min-height: 400px;
}

.content-panel {
  display: none;
  animation: fadeIn 0.5s ease;
}

.content-panel.active {
  display: block;
}

.content-panel h3 {
  font-family: "Orbitron", monospace;
  font-size: 2rem;
  margin-bottom: 20px;
  background: linear-gradient(45deg, #a4c639, #a4c639);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.content-panel p {
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: 20px;
  font-size: 1.1rem;
}

.feature-list {
  list-style: none;
  margin-top: 20px;
}

.feature-list li {
  padding: 10px 0;
  padding-left: 30px;
  position: relative;
  opacity: 0.8;
}

.feature-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: #a4c639;
  font-size: 1.2rem;
}

/* About Section */
.about {
  padding: 70px 20px 60px; /* 30px minder bovenaan */
  max-width: 1200px;
  margin: 0 auto;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 35px; /* was 60 */
  align-items: center;
  margin-top: 40px; /* was 80 */
}

.about-text h2 {
  font-family: "Orbitron", monospace;
  font-size: 2.5rem;
  margin-bottom: 30px;
  background: linear-gradient(45deg, #5d28dd, #ffffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-text p {
  line-height: 1.8;
  opacity: 0.8;
  margin-bottom: 12px; /* was 20 */
  font-size: 1.1rem;
}

.about-visual {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-graphic {
  width: 240px;
  height: 240px;
  position: relative;
  animation: float 6s ease-in-out infinite;
}

.about-graphic::before,
.about-graphic::after {
  content: "";
  position: absolute;
  border: 2px solid #5d28dd;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(93, 40, 221, 0.5);
}

.about-graphic::before {
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

.about-graphic::after {
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  border-color: #5d28dd;
  animation: rotate 15s linear infinite reverse;
  box-shadow: 0 0 30px rgba(93, 40, 221, 0.5);
}

/* Alternative graphic for second row */
.about-graphic-alt {
  width: 240px;
  height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 6s ease-in-out infinite;
}

.hexagon {
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, #5d28dd, #00b2ff);
  opacity: 0.3;
  clip-path: polygon(
    30% 0%,
    70% 0%,
    100% 30%,
    100% 70%,
    70% 100%,
    30% 100%,
    0% 70%,
    0% 30%
  );
}

.hexagon:nth-child(1) {
  width: 150px;
  height: 150px;
  animation: hexagon-rotate 8s linear infinite;
}

.hexagon:nth-child(2) {
  width: 100px;
  height: 100px;
  animation: hexagon-rotate 12s linear infinite reverse;
  opacity: 0.5;
}

.hexagon:nth-child(3) {
  width: 200px;
  height: 200px;
  animation: hexagon-rotate 15s linear infinite;
  opacity: 0.2;
}

@keyframes hexagon-rotate {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.1);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Contact Section */
.contact {
  padding: 70px 20px 50px; /* top 70, bottom 50 */
  max-width: 1200px;
  margin: 0 auto;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.form-group {
  margin-bottom: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 10px;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(93, 40, 221, 0.3);
  color: white;
  font-size: 1rem;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-family: "Rajdhani", sans-serif;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #a4c639;
  box-shadow: 0 0 20px rgba(164, 198, 57, 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

.submit-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(45deg, #5d28dd, #a4c639);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Orbitron", monospace;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(164, 198, 57, 0.5);
}

.contact-info {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info h3 {
  font-family: "Orbitron", monospace;
  font-size: 2rem;
  margin-bottom: 30px;
  background: linear-gradient(45deg, #ffffff, #5d28dd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.info-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(45deg, #5d28dd, #00b2ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.info-details h4 {
  color: #5d28dd;
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.info-details p {
  opacity: 0.8;
}

/* Map Section */
.map-container {
  margin-top: 0px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(93, 40, 221, 0.2);
  border-radius: 10px;
  padding: 20px;
  backdrop-filter: blur(10px);
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.map-placeholder {
  text-align: center;
  opacity: 0.6;
}

.map-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(164, 198, 57, 0.1) 50%,
    transparent 60%
  );
  animation: scan 3s linear infinite;
}

@keyframes scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* Footer */
footer {
  background: rgba(0, 0, 0, 0.8);
  border-top: 1px solid rgba(93, 40, 221, 0.2);
  padding: 40px 20px;
  text-align: center;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 20px;
}

.footer-links a {
  color: #a4c639;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
}

.footer-links a:hover {
  color: #5d28dd;
  text-shadow: 0 0 10px currentColor;
}

.copyright {
  opacity: 0.6;
  font-size: 0.9rem;
}

.copyright a {
  color: #5d28dd;
  text-decoration: none;
  transition: all 0.3s ease;
}

.copyright a:hover {
  color: #a4c639;
  text-shadow: 0 0 10px currentColor;
}

/* Scanlines effect */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(transparent 50%, rgba(255, 94, 0, 0.01) 50%);
  background-size: 100% 4px;
  animation: scanlines 8s linear infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes scanlines {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 0 30px rgba(164, 198, 57, 0.5);
  }
  50% {
    transform: translateY(-10px);
    box-shadow: 0 10px 40px rgba(93, 40, 221, 0.7);
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 768px) {
  nav {
    padding: 15px 20px;
  }

  .nav-links {
    position: fixed;
    top: 70px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 70px);
    background: rgba(10, 10, 10, 0.95);
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 50px;
    transition: left 0.3s ease;
  }

  .nav-links.active {
    left: 0;
  }

  .menu-toggle {
    display: flex;
  }

  .hero-content {
    padding: 0 20px;
  }

  .glitch-text {
    font-size: clamp(1.2rem, 4.9vw, 2.4rem);
  }

  .text-rotator {
    min-height: 150px;
  }

  .subtitle {
    font-size: 1.2rem;
  }

  .cta-container {
    flex-direction: column;
    align-items: center;
  }

  .cta-button {
    width: 100%;
    max-width: 300px;
  }

  .features-container {
    grid-template-columns: 1fr;
  }

  .feature-tabs {
    display: block;
    padding: 20px;
    max-width: 100%;
  }

  .tab-item {
    width: 100%;
    margin-bottom: 10px;
  }

  .about-content,
  .contact-container {
    grid-template-columns: 1fr;
  }

  .about-graphic {
    width: 200px;
    height: 200px;
  }

  .shape-circle,
  .shape-triangle,
  .shape-square {
    transform: scale(0.6);
  }
}

.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -10;
  opacity: 1;
  filter: none;
}

/* --- SEO TEXT FIXES --- */

/* Algemene spacing voor alle SEO-zinnen */
.local-seo {
  display: block;
  margin-top: 25px;
  margin-bottom: 25px;
  line-height: 1.6;
  opacity: 0.85;
  text-align: center;
}

/* Features sectie spacing */
.features .local-seo {
  margin-bottom: 40px;
}

/* About sectie spacing */
.about-text .local-seo {
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Contact sectie spacing */
.contact-info .local-seo {
  margin-top: 15px;
  margin-bottom: 35px;
}

/* Zorg dat SEO-zinnen nooit te dicht op headings staan */
.section-title + .local-seo {
  margin-top: 35px;
}

/* Alleen de SEO-zinnen in de About-sectie links uitlijnen */
.about-text .local-seo {
  text-align: left !important;
}

/* --- CONTACT SECTION CLEAN FIX --- */

/* 2-koloms layout binnen contact-info */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Kolommen netjes onder elkaar */
.info-column {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* Info-items consistent uitlijnen */
.info-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  min-height: 50px;
}

/* ICON FIX – definitieve versie */
.info-icon {
  width: 40px;
  height: 40px;
  font-size: 1.6rem;
  background: linear-gradient(45deg, #5d28dd, #00b2ff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(93, 40, 221, 0.4);
}

/* Titels binnen info-details strakker */
.info-details h4 {
  margin-bottom: 5px;
}

/* Map netjes uitlijnen naast info-grid */
.map-container {
  margin-top: 0 !important;
  height: 80%;
  min-height: 160px;
}

.whatsapp-float {
  position: fixed;
  width: 64px;
  height: 64px;
  bottom: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 9999;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.whatsapp-float:hover {
  transform: scale(1.08);
  background: transparent;
  border: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 10px rgba(37, 211, 102, 0.28));
}

.whatsapp-icon {
  width: 52px;
  height: 52px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}

footer {
  position: relative;
  z-index: 10;
}

.whatsapp-float {
  z-index: 9999;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

* {
  max-width: 100%;
}

@media (max-width: 768px) {
  .features-container {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr !important;
  }
}

.map-container iframe {
  width: 100% !important;
}

/* ============================
   MOBIELE OPTIMALISATIE
============================ */

@media (max-width: 768px) {
  /* Grote titels kleiner maken */
  .section-title {
    font-size: 2rem;
    line-height: 1.2;
    word-break: break-word;
  }

  .about-text h2 {
    font-size: 1.8rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .content-panel h3 {
    font-size: 1.5rem;
    line-height: 1.3;
    word-break: break-word;
  }

  .contact-info h3 {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  /* Contact mobiel */

  .info-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-info {
    padding: 10px;
  }

  .map-container {
    height: 250px;
    margin-top: 30px;
  }

  .info-item {
    gap: 15px;
  }

  .info-details {
    min-width: 0;
  }

  .info-details p {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* =========================================================
   NEW OPTIONS / SERVICE CARD LAYOUT
   ========================================================= */
.options-section {
  max-width: 1280px;
  padding-top: 100px;
  padding-bottom: 110px;
}

.options-section > .local-seo {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}

.options-grid {
  display: flex;
  flex-direction: column;
  gap: 58px;
  margin-top: 55px;
}

.options-category {
  width: 100%;
}

.options-category-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}

.options-category-header h3 {
  flex: 0 0 auto;
  font-family: "Orbitron", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}

.options-category-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, rgba(93, 40, 221, 0.65));
}

.options-category-line:last-child {
  background: linear-gradient(90deg, rgba(164, 198, 57, 0.65), transparent);
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.service-card {
  min-height: 245px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.065),
    rgba(255, 255, 255, 0.018)
  );
  border: 1px solid rgba(93, 40, 221, 0.28);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 10px 35px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(93, 40, 221, 0.12),
    transparent 42%,
    rgba(164, 198, 57, 0.06)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-card:hover {
  transform: translateY(-7px);
  border-color: rgba(164, 198, 57, 0.6);
  background: linear-gradient(
    145deg,
    rgba(93, 40, 221, 0.13),
    rgba(255, 255, 255, 0.035)
  );
  box-shadow:
    0 18px 45px rgba(93, 40, 221, 0.22),
    0 0 25px rgba(164, 198, 57, 0.08);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card-icon,
.service-card-body,
.service-card-footer {
  position: relative;
  z-index: 1;
}

.service-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid rgba(93, 40, 221, 0.45);
  border-radius: 10px;
  background: rgba(93, 40, 221, 0.12);
  font-size: 1.45rem;
  box-shadow: 0 0 18px rgba(93, 40, 221, 0.16);
}

.service-card-category {
  display: block;
  margin-bottom: 7px;
  color: #a4c639;
  font-family: "Orbitron", monospace;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}

.service-card h4 {
  margin-bottom: 9px;
  font-family: "Orbitron", monospace;
  font-size: 1.02rem;
  line-height: 1.35;
  color: #fff;
}

.service-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.65;
}

.service-card-footer {
  margin-top: auto;
  padding-top: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.service-card-footer strong {
  color: #fff;
  font-family: "Orbitron", monospace;
  font-size: 1.15rem;
  white-space: nowrap;
}

.service-card-footer > span {
  color: #a4c639;
  font-family: "Orbitron", monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.service-card:hover .service-card-footer > span {
  transform: translateX(4px);
  color: #fff;
}

@media (max-width: 1000px) {
  .service-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .options-section {
    padding-top: 75px;
    padding-bottom: 80px;
  }

  .options-grid {
    gap: 42px;
    margin-top: 40px;
  }

  .options-category-header {
    gap: 10px;
  }

  .options-category-header h3 {
    font-size: 0.88rem;
    letter-spacing: 0.05em;
  }

  .service-cards {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-card {
    min-height: 215px;
    padding: 20px;
  }

  .service-card-footer {
    padding-top: 16px;
  }
}

/* =========================================================
   CARXPLOIT HOMEPAGE V2 — 2026 redesign
   ========================================================= */
:root { --cx-green:#a4c639; --cx-purple:#6c3ce6; --cx-bg:#08090b; --cx-muted:#9ba0aa; }
html { scroll-behavior:smooth; }
body { background:var(--cx-bg); }
nav { padding:18px 42px; background:rgba(8,9,11,.76); border-bottom:1px solid rgba(255,255,255,.07); backdrop-filter:blur(18px); }
nav.scrolled { padding:12px 42px; background:rgba(8,9,11,.94); box-shadow:0 10px 40px rgba(0,0,0,.28); }
.nav-container { max-width:1380px; height:54px; }
.logo-img { height:62px; }
.nav-links { gap:8px; align-items:center; }
.nav-links a { font-family:"Rajdhani",sans-serif; font-size:14px; font-weight:700; letter-spacing:1.4px; padding:10px 14px; opacity:.72; }
.nav-links a::before,.nav-links a::after { display:none; }
.nav-links a:hover,.nav-links a.active { color:#fff; opacity:1; }
.nav-links li:last-child a { border:1px solid rgba(164,198,57,.55); color:var(--cx-green); padding:10px 20px; margin-left:10px; }
.nav-links li:last-child a:hover { background:var(--cx-green); color:#0b0d08; }

.hero-v2 { min-height:100vh; padding:125px 42px 55px; align-items:stretch; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.06); }
.hero-v2 .hero-bg-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.24; filter:saturate(.75) contrast(1.12); }
.hero-v2-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,9,11,.98) 0%,rgba(8,9,11,.88) 43%,rgba(8,9,11,.56) 72%,rgba(8,9,11,.82) 100%),linear-gradient(0deg,rgba(8,9,11,.98) 0%,transparent 45%); z-index:1; }
.hero-v2::before { content:""; position:absolute; width:620px; height:620px; right:-170px; top:7%; background:radial-gradient(circle,rgba(93,40,221,.18),transparent 66%); z-index:2; pointer-events:none; }
.hero-v2::after { content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--cx-purple),var(--cx-green),transparent); opacity:.85; z-index:4; }
.hero-v2-inner { position:relative; z-index:5; width:100%; max-width:1380px; margin:auto; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr); gap:90px; align-items:center; }
.hero-v2-copy { max-width:830px; }
.hero-eyebrow { font-family:"Orbitron",sans-serif; color:#c6c9d0; font-size:12px; letter-spacing:2.3px; font-weight:700; margin-bottom:28px; display:flex; align-items:center; gap:12px; }
.hero-eyebrow span { width:36px; height:2px; background:var(--cx-green); box-shadow:0 0 16px rgba(164,198,57,.5); }
.hero-v2 h1 { font-family:"Orbitron",sans-serif; font-size:clamp(2.55rem,5.3vw,5.5rem); line-height:1.02; letter-spacing:-.045em; text-transform:none; max-width:900px; color:#f6f7f8; text-shadow:0 12px 50px rgba(0,0,0,.4); }
.hero-v2 h1 em { color:var(--cx-green); font-style:normal; }
.hero-lead { max-width:720px; margin-top:28px; color:#aeb2bb; font-size:clamp(1.08rem,1.55vw,1.32rem); line-height:1.6; font-weight:500; }
.hero-actions { display:flex; gap:14px; margin-top:38px; flex-wrap:wrap; }
.hero-v2 .cta-button { position:relative; min-width:180px; padding:15px 22px; border-radius:2px; font-family:"Orbitron",sans-serif; font-size:12px; letter-spacing:1px; font-weight:700; text-transform:uppercase; text-align:center; text-decoration:none; transition:.25s ease; }
.hero-v2 .cta-primary { background:var(--cx-green); color:#0a0c08; border:1px solid var(--cx-green); box-shadow:0 10px 35px rgba(164,198,57,.14); }
.hero-v2 .cta-primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(164,198,57,.25); }
.hero-v2 .cta-primary span { margin-left:10px; }
.hero-v2 .cta-secondary { color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.035); }
.hero-v2 .cta-secondary:hover { border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.07); }
.hero-proof { display:flex; gap:0; margin-top:58px; border-top:1px solid rgba(255,255,255,.1); max-width:760px; }
.hero-proof div { padding:19px 28px 0 0; margin-right:28px; border-right:1px solid rgba(255,255,255,.09); display:flex; flex-direction:column; gap:4px; }
.hero-proof div:last-child { border:0; }
.hero-proof strong { font-family:"Orbitron",sans-serif; font-size:12px; letter-spacing:1px; color:#f3f4f5; }
.hero-proof span { font-size:14px; color:#777d88; }
.hero-v2-panel { position:relative; min-height:490px; border:1px solid rgba(255,255,255,.1); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.012)); backdrop-filter:blur(8px); padding:26px; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.28); }
.hero-v2-panel::before,.hero-v2-panel::after { content:""; position:absolute; width:42px; height:42px; pointer-events:none; }
.hero-v2-panel::before { left:-1px; top:-1px; border-left:2px solid var(--cx-green); border-top:2px solid var(--cx-green); }
.hero-v2-panel::after { right:-1px; bottom:-1px; border-right:2px solid var(--cx-purple); border-bottom:2px solid var(--cx-purple); }
.panel-top,.panel-bottom { font-family:"Orbitron",sans-serif; font-size:9px; letter-spacing:1.5px; color:#727884; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--cx-green); margin-right:8px; box-shadow:0 0 12px var(--cx-green); }
.panel-mark { font-family:"Orbitron",sans-serif; font-size:clamp(5rem,9vw,8rem); font-weight:900; letter-spacing:-.08em; color:transparent; -webkit-text-stroke:1px rgba(164,198,57,.32); margin:auto 0; text-align:center; text-shadow:0 0 60px rgba(93,40,221,.15); }
.panel-lines { border-top:1px solid rgba(255,255,255,.08); }
.panel-lines div { display:flex; align-items:center; gap:17px; border-bottom:1px solid rgba(255,255,255,.07); padding:15px 2px; }
.panel-lines span { color:var(--cx-green); font-family:"Orbitron",sans-serif; font-size:9px; }
.panel-lines p { font-family:"Orbitron",sans-serif; font-size:10px; letter-spacing:1.1px; color:#c8cbd1; }
.panel-bottom { margin-top:22px; }
.hero-scroll { position:absolute; z-index:6; bottom:25px; left:50%; transform:translateX(-50%); color:#666c76; text-decoration:none; font-family:"Orbitron",sans-serif; font-size:8px; letter-spacing:2px; display:flex; align-items:center; gap:10px; }
.hero-scroll span { width:24px; height:1px; background:#555b64; }
.home-intro { padding:105px 42px 50px; background:#08090b; }
.home-intro-inner { max-width:1380px; margin:auto; display:grid; grid-template-columns:170px 1fr .8fr; gap:50px; align-items:end; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:55px; }
.section-kicker { color:var(--cx-green); font-family:"Orbitron",sans-serif; font-size:10px; letter-spacing:2px; align-self:start; padding-top:10px; }
.home-intro h2 { font-family:"Orbitron",sans-serif; font-size:clamp(2rem,3.3vw,3.4rem); line-height:1.12; letter-spacing:-.035em; }
.home-intro h2 em { color:#7770a4; font-style:normal; }
.home-intro p { color:#8f949e; font-size:18px; line-height:1.65; }
.options-section { padding-top:55px!important; }
.options-section>.section-title { font-size:clamp(1.7rem,3vw,2.7rem); }

@media (max-width:980px){
  nav,nav.scrolled{padding-left:22px;padding-right:22px}.hero-v2{padding-left:24px;padding-right:24px}.hero-v2-inner{grid-template-columns:1fr;gap:45px}.hero-v2-panel{display:none}.hero-v2-copy{max-width:760px}.home-intro{padding:80px 24px 35px}.home-intro-inner{grid-template-columns:1fr;gap:18px}.section-kicker{padding:0}.hero-scroll{display:none}
}
@media (max-width:700px){
  .hero-v2{padding-top:115px;min-height:92vh}.hero-v2 h1{font-size:clamp(2.25rem,11vw,3.8rem)}.hero-lead{font-size:1.05rem}.hero-proof{display:grid;grid-template-columns:1fr;margin-top:38px}.hero-proof div{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);margin:0;padding:12px 0}.hero-actions{display:grid;grid-template-columns:1fr}.hero-v2 .cta-button{width:100%}.home-intro{padding-top:65px}.nav-links li:last-child a{margin-left:0}
}

/* V1.1 - navigation active state */
.nav-links li:last-child a {
  border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
}
.nav-links li:last-child a:hover {
  border-color: rgba(164,198,57,.55);
  background: rgba(164,198,57,.08);
  color: var(--cx-green);
}
.nav-links a.active {
  color: var(--cx-green);
  opacity: 1;
}
.nav-links li:last-child a.active {
  border-color: rgba(164,198,57,.55);
  color: var(--cx-green);
  background: rgba(164,198,57,.06);
}

/* V1.2 - active navigation box follows current section */
.nav-links li:last-child a,
.nav-links li:last-child a:hover,
.nav-links li:last-child a.active {
  margin-left: 10px;
}
.nav-links li:last-child a {
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.72);
}
.nav-links a.active {
  border: 1px solid rgba(164,198,57,.38);
  background: rgba(164,198,57,.035);
  color: var(--cx-green);
  opacity: 1;
}
.nav-links li:last-child a.active {
  border: 1px solid rgba(164,198,57,.38);
  background: rgba(164,198,57,.035);
  color: var(--cx-green);
}
@media (max-width:700px){
  .nav-links li:last-child a,
  .nav-links li:last-child a:hover,
  .nav-links li:last-child a.active { margin-left:0; }
}

/* V1.3 — services section redesign */
.home-intro { position:relative; overflow:hidden; }
.home-intro::after { content:"01"; position:absolute; right:4vw; bottom:-45px; font-family:"Orbitron",sans-serif; font-size:clamp(8rem,16vw,15rem); font-weight:900; color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.025); pointer-events:none; }
.home-intro h2 em { color:#8e82c8; }
.features.options-section { max-width:none; width:100%; padding:62px 42px 120px!important; background:linear-gradient(180deg,#08090b 0%,#0a0b0e 55%,#08090b 100%); }
.features.options-section > * { max-width:1380px; margin-left:auto; margin-right:auto; }
.services-heading { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.65fr); gap:70px; align-items:end; margin-bottom:52px; padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,.08); }
.services-overline { display:block; margin-bottom:13px; color:var(--cx-green); font-family:"Orbitron",sans-serif; font-size:9px; letter-spacing:2.1px; }
.options-section .services-heading .section-title { margin:0; text-align:left; font-size:clamp(1.8rem,3vw,2.8rem); letter-spacing:-.025em; }
.options-section .services-heading .section-title::after { display:none; }
.options-section .services-heading .local-seo { max-width:560px; margin:0; text-align:left; color:#858b95; font-size:16px; line-height:1.65; }
.options-grid { gap:72px; margin-top:0; }
.options-category { position:relative; }
.options-category-header { display:grid; grid-template-columns:34px auto 1fr; gap:14px; margin-bottom:20px; }
.options-category-header::before { counter-increment:cxcat; content:"0" counter(cxcat); font-family:"Orbitron",sans-serif; font-size:9px; letter-spacing:1px; color:var(--cx-green); }
.options-grid { counter-reset:cxcat; }
.options-category-header .options-category-line:first-child { display:none; }
.options-category-header .options-category-line:last-child { height:1px; background:linear-gradient(90deg,rgba(255,255,255,.13),transparent); }
.options-category-header h3 { text-align:left; font-size:1rem; letter-spacing:.1em; }
.service-cards { gap:12px; }
.service-card { min-height:222px; padding:22px 22px 19px; border-radius:2px; border-color:rgba(255,255,255,.085); background:linear-gradient(145deg,rgba(255,255,255,.038),rgba(255,255,255,.012)); box-shadow:none; }
.service-card::after { content:""; position:absolute; left:0; top:0; width:2px; height:0; background:linear-gradient(var(--cx-green),var(--cx-purple)); transition:height .3s ease; }
.service-card:hover { transform:translateY(-4px); border-color:rgba(164,198,57,.3); background:linear-gradient(145deg,rgba(164,198,57,.055),rgba(108,60,230,.035)); box-shadow:0 16px 45px rgba(0,0,0,.24); }
.service-card:hover::after { height:100%; }
.service-card-icon { width:38px; height:38px; margin-bottom:16px; border-radius:2px; border-color:rgba(164,198,57,.2); background:rgba(164,198,57,.045); filter:grayscale(1); opacity:.82; font-size:1.1rem; }
.service-card-category { font-size:.56rem; letter-spacing:.13em; opacity:.62; }
.service-card h4 { font-size:.95rem; line-height:1.4; }
.service-card p { font-size:.9rem; color:#8c919a; opacity:1; }
.service-card-footer { padding-top:17px; border-top:1px solid rgba(255,255,255,.055); margin-top:18px; }
.service-card-footer strong { font-size:.95rem; }
.service-card-footer strong small { font-family:"Rajdhani",sans-serif; font-size:.68rem; font-weight:500; color:#737984; }
.service-card-footer > span { font-size:.57rem; opacity:.85; }
@media(max-width:980px){ .features.options-section{padding-left:24px!important;padding-right:24px!important}.services-heading{grid-template-columns:1fr;gap:16px}.options-category-header{grid-template-columns:28px auto 1fr} }
@media(max-width:700px){ .features.options-section{padding-top:45px!important;padding-bottom:80px!important}.services-heading{margin-bottom:38px;padding-bottom:25px}.options-grid{gap:52px}.options-category-header h3{font-size:.78rem}.service-card{min-height:205px} }

/* =========================================================
   REDESIGN V1.4 — OVER MIJ
   ========================================================= */
.CarXploit-about {
  max-width: 1460px !important;
  padding: 120px 32px 110px !important;
}
.CarXploit-about .about-intro {
  max-width: 100% !important;
  margin: 0 0 54px !important;
  text-align: left !important;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 34px;
}
.CarXploit-about .about-brand {
  margin-bottom: 18px !important;
  color: #a6cf32 !important;
}
.CarXploit-about .about-brand::before {
  width: 34px !important;
  background: #a6cf32 !important;
}
.CarXploit-about .about-brand::after { display:none !important; }
.CarXploit-about .about-intro h2 {
  max-width: 900px;
  font-size: clamp(2.65rem,5vw,4.8rem) !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
}
.CarXploit-about .about-intro h2 span:last-child {
  background: linear-gradient(90deg,#a6cf32 0%,#8db329 38%,#fff 100%) !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
}
.CarXploit-about .about-intro p {
  max-width: 720px !important;
  margin: 25px 0 0 !important;
  font-size: 1.13rem !important;
  color: rgba(255,255,255,.60) !important;
}
.CarXploit-about .about-main-panel {
  grid-template-columns: minmax(0,1.3fr) minmax(360px,.7fr) !important;
  gap: 54px !important;
  padding: 52px !important;
  background: linear-gradient(120deg,rgba(255,255,255,.032),rgba(255,255,255,.012)) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.CarXploit-about .about-main-panel::before {
  width: 110px !important;
  background: linear-gradient(90deg,#a6cf32,#713cff) !important;
}
.CarXploit-about .about-label {
  color:#a6cf32 !important;
  letter-spacing:.18em !important;
}
.CarXploit-about .about-copy h3 {
  font-size: clamp(2rem,3.25vw,3.55rem) !important;
  line-height:1.06 !important;
  letter-spacing:-.015em !important;
}
.CarXploit-about .about-copy h3 span { color:#a6cf32 !important; }
.CarXploit-about .about-copy p {
  max-width: 720px;
  color: rgba(255,255,255,.64) !important;
  font-size: 1.06rem !important;
  line-height: 1.75 !important;
}
.CarXploit-about .about-copy p strong { color:rgba(255,255,255,.9) !important; }
.CarXploit-about .about-experience {
  margin-top: 34px !important;
  padding-top: 28px !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
}
.CarXploit-about .experience-number {
  color:#a6cf32 !important;
  text-shadow:none !important;
}
.CarXploit-about .about-visual {
  min-height: 390px !important;
  border-left: 1px solid rgba(255,255,255,.08);
}
.CarXploit-about .visual-core-inner {
  box-shadow: 0 0 60px rgba(112,60,255,.12) !important;
}
.CarXploit-about .about-points {
  gap: 0 !important;
  margin-top: 22px !important;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.012);
}
.CarXploit-about .about-point {
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  padding: 34px 36px !important;
  background:transparent !important;
  min-height: 210px;
}
.CarXploit-about .about-point:last-child { border-right:0 !important; }
.CarXploit-about .about-point:hover {
  background:rgba(166,207,50,.035) !important;
  transform:none !important;
}
.CarXploit-about .point-number { color:#a6cf32 !important; }
.CarXploit-about .about-point h4 { color:#f4f4f4 !important; }
.CarXploit-about .about-point p { color:rgba(255,255,255,.54) !important; }
.CarXploit-about .about-bottom {
  margin-top:22px !important;
  padding: 28px 32px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(90deg,rgba(166,207,50,.025),rgba(112,60,255,.025)) !important;
}
.CarXploit-about .location-icon { color:#a6cf32 !important; }
.CarXploit-about .about-cta {
  background:#a6cf32 !important;
  color:#090b08 !important;
  border:1px solid #a6cf32 !important;
  box-shadow: 0 10px 35px rgba(166,207,50,.08) !important;
}
.CarXploit-about .about-cta:hover { background:#b7df3e !important; }
@media (max-width: 900px) {
  .CarXploit-about { padding:90px 20px 80px !important; }
  .CarXploit-about .about-main-panel { grid-template-columns:1fr !important; padding:32px 26px !important; gap:30px !important; }
  .CarXploit-about .about-visual { border-left:0; border-top:1px solid rgba(255,255,255,.08); min-height:330px !important; }
  .CarXploit-about .about-points { display:block !important; }
  .CarXploit-about .about-point { border-right:0 !important; border-bottom:1px solid rgba(255,255,255,.08) !important; min-height:0; }
  .CarXploit-about .about-point:last-child { border-bottom:0 !important; }
  .CarXploit-about .about-bottom { align-items:flex-start !important; gap:24px !important; }
}

/* =========================================================
   REDESIGN V1.5 — OVER MIJ: ONE-SCREEN DESKTOP LAYOUT
   ========================================================= */
@media (min-width: 1100px) and (min-height: 760px) {
  .CarXploit-about {
    min-height: calc(100vh - 80px) !important;
    height: auto !important;
    padding: 38px 32px 34px !important;
    display: grid !important;
    grid-template-rows: auto auto auto auto !important;
    align-content: center !important;
    gap: 14px !important;
    scroll-margin-top: 80px !important;
  }
  .CarXploit-about .about-intro {
    margin: 0 !important;
    padding-top: 18px !important;
  }
  .CarXploit-about .about-brand { margin-bottom: 10px !important; }
  .CarXploit-about .about-intro h2 {
    max-width: 100% !important;
    font-size: clamp(2.25rem, 3.7vw, 4rem) !important;
    line-height: .92 !important;
  }
  .CarXploit-about .about-intro p {
    max-width: 900px !important;
    margin-top: 12px !important;
    font-size: .96rem !important;
    line-height: 1.5 !important;
  }
  .CarXploit-about .about-main-panel {
    grid-template-columns: minmax(0,1.55fr) minmax(300px,.65fr) !important;
    gap: 30px !important;
    padding: 26px 34px !important;
  }
  .CarXploit-about .about-label { margin-bottom: 10px !important; }
  .CarXploit-about .about-copy h3 {
    font-size: clamp(1.75rem, 2.35vw, 2.65rem) !important;
    line-height: 1 !important;
    margin-bottom: 14px !important;
  }
  .CarXploit-about .about-copy p {
    font-size: .9rem !important;
    line-height: 1.5 !important;
    margin: 0 0 9px !important;
  }
  .CarXploit-about .about-experience {
    margin-top: 14px !important;
    padding-top: 12px !important;
  }
  .CarXploit-about .experience-number { font-size: 2.35rem !important; }
  .CarXploit-about .experience-copy { padding: 6px 14px !important; }
  .CarXploit-about .experience-copy strong { font-size: .75rem !important; }
  .CarXploit-about .experience-copy span { font-size: .76rem !important; }
  .CarXploit-about .about-visual {
    min-height: 265px !important;
    transform: scale(.82);
    transform-origin: center;
    margin: -24px -28px;
  }
  .CarXploit-about .about-points {
    margin-top: 0 !important;
  }
  .CarXploit-about .about-point {
    min-height: 0 !important;
    padding: 18px 24px !important;
  }
  .CarXploit-about .point-number { margin-bottom: 7px !important; font-size: .62rem !important; }
  .CarXploit-about .about-point h4 { margin-bottom: 6px !important; font-size: .9rem !important; }
  .CarXploit-about .about-point p { font-size: .78rem !important; line-height: 1.42 !important; }
  .CarXploit-about .about-bottom {
    margin-top: 0 !important;
    padding: 15px 22px !important;
  }
  .CarXploit-about .location-copy strong { font-size: .76rem !important; }
  .CarXploit-about .location-copy span { font-size: .75rem !important; }
  .CarXploit-about .about-cta { padding: 12px 20px !important; font-size: .72rem !important; }
}

/* =========================================================
   REDESIGN V1.7 — OVER MIJ FROM SCRATCH
   ========================================================= */
.CarXploit-about.about-v17{position:relative;min-height:calc(100vh - 80px);padding:clamp(52px,6vh,76px) 32px 46px!important;background:#08090a!important;overflow:hidden;scroll-margin-top:80px}
.CarXploit-about.about-v17:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(to bottom,transparent,black 25%,black 80%,transparent);pointer-events:none}
.about17-shell{position:relative;z-index:1;width:min(1320px,100%);margin:auto}
.about17-kicker{display:flex;align-items:center;gap:12px;color:#a6cf32;font:700 .76rem 'Orbitron',sans-serif;letter-spacing:.16em;margin-bottom:22px}.about17-kicker span{width:34px;height:2px;background:#a6cf32}
.about17-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);gap:68px;align-items:center}
.about17-copy h2{margin:0 0 24px;color:#f4f4f4;font:800 clamp(3.4rem,5vw,5.5rem)/.91 'Orbitron',sans-serif;letter-spacing:-.055em}.about17-copy h2 span{color:#a6cf32}
.about17-lead{max-width:760px;margin:0 0 16px;color:rgba(255,255,255,.78);font:500 clamp(1.1rem,1.25vw,1.28rem)/1.55 'Rajdhani',sans-serif}.about17-body{max-width:760px;margin:0;color:rgba(255,255,255,.55);font:500 1rem/1.58 'Rajdhani',sans-serif}
.about17-stats{display:flex;margin-top:30px;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.08)}.about17-stat{display:flex;align-items:center;gap:16px;padding:18px 34px 18px 0;margin-right:34px;border-right:1px solid rgba(255,255,255,.09)}.about17-stat:last-child{border:0}.about17-stat strong{color:#a6cf32;font:800 2.2rem/1 'Orbitron',sans-serif}.about17-stat span{color:rgba(255,255,255,.72);font:700 .7rem/1.55 'Orbitron',sans-serif;letter-spacing:.04em}
.about17-system{position:relative;height:430px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(93,40,221,.055));box-shadow:inset 0 0 80px rgba(93,40,221,.035)}.about17-system:before,.about17-system:after{content:"";position:absolute;width:42px;height:42px}.about17-system:before{left:-1px;top:-1px;border-left:2px solid #a6cf32;border-top:2px solid #a6cf32}.about17-system:after{right:-1px;bottom:-1px;border-right:2px solid #6b35ff;border-bottom:2px solid #6b35ff}.about17-system-top{height:62px;display:flex;align-items:center;gap:11px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.35);font:600 .58rem 'Orbitron',sans-serif;letter-spacing:.12em}.about17-dot{width:7px;height:7px;border-radius:50%;background:#a6cf32;box-shadow:0 0 14px #a6cf32}.about17-core-wrap{position:relative;height:300px;display:grid;place-items:center}.about17-orbit{position:absolute;border:1px solid rgba(111,58,255,.38);border-radius:50%}.orbit-a{width:220px;height:220px}.orbit-b{width:165px;height:165px}.about17-core{width:118px;height:118px;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(45deg);background:linear-gradient(145deg,#7441ff,#32136e);box-shadow:0 0 42px rgba(91,42,221,.25)}.about17-core-label{display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-45deg);text-align:center;line-height:1}.about17-core b,.about17-core small{display:block;transform:none}.about17-core b{color:white;font:800 1.55rem 'Orbitron',sans-serif}.about17-core small{color:#b4d94b;font:700 .48rem 'Orbitron',sans-serif;letter-spacing:.12em;margin-top:5px}.about17-tag{position:absolute;padding:7px 10px;border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.42);font:600 .5rem 'Orbitron',sans-serif}.tag-a{right:28px;top:54px}.tag-b{left:25px;top:112px}.tag-c{left:42px;bottom:48px}.about17-system-bottom{height:67px;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;border-top:1px solid rgba(255,255,255,.07)}.about17-system-bottom span{text-align:center;color:rgba(255,255,255,.46);font:600 .55rem 'Orbitron',sans-serif;letter-spacing:.08em;border-right:1px solid rgba(255,255,255,.07)}.about17-system-bottom span:last-child{border:0}
.about17-pillars{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-top:1px solid rgba(255,255,255,.11);border-bottom:1px solid rgba(255,255,255,.08)}.about17-pillars article{position:relative;padding:22px 28px 21px 0;margin-right:28px;border-right:1px solid rgba(255,255,255,.08)}.about17-pillars article:last-child{border:0;margin-right:0}.about17-pillars article:before{content:"";position:absolute;top:-1px;left:0;width:48px;height:2px;background:linear-gradient(90deg,#a6cf32,#6734e8)}.about17-pillars span{color:#a6cf32;font:700 .6rem 'Orbitron',sans-serif;letter-spacing:.08em}.about17-pillars h3{margin:9px 0 7px;color:#f1f1f1;font:700 .92rem 'Orbitron',sans-serif}.about17-pillars p{margin:0;color:rgba(255,255,255,.5);font:500 .9rem/1.45 'Rajdhani',sans-serif}
@media(max-width:1050px){.CarXploit-about.about-v17{min-height:auto;padding:76px 24px!important}.about17-grid{grid-template-columns:1fr;gap:38px}.about17-system{height:390px}.about17-pillars{grid-template-columns:1fr}.about17-pillars article{margin:0;padding:22px 0;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}}
@media(max-width:650px){.CarXploit-about.about-v17{padding:64px 18px!important}.about17-copy h2{font-size:clamp(2.45rem,12vw,3.6rem)}.about17-stats{display:block}.about17-stat{margin:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.about17-system{height:340px}.about17-core-wrap{height:235px}.about17-system-bottom{height:43px}.orbit-a{width:180px;height:180px}.orbit-b{width:135px;height:135px}.about17-core{width:96px;height:96px}}

/* V1.9 — Over Mij detail refinement */
.about17-pillars article{padding-left:0!important}
.about17-pillars article:before{left:0!important;width:64px!important;background:linear-gradient(90deg,#a6cf32 0 58%,#6734e8 58% 100%)!important}
.about17-pillars article>span,.about17-pillars article>h3,.about17-pillars article>p{margin-left:0!important}

.about17-system{overflow:hidden;background:
 radial-gradient(circle at 50% 48%,rgba(105,51,255,.10),transparent 36%),
 linear-gradient(145deg,rgba(255,255,255,.03),rgba(93,40,221,.055))!important}
.about17-core-wrap:before{content:"";position:absolute;inset:20px;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:26px 26px;mask-image:radial-gradient(circle,#000 20%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 20%,transparent 72%)}
.about17-core-wrap:after{content:"SYSTEM MAP / 03 NODES";position:absolute;right:18px;bottom:14px;color:rgba(255,255,255,.18);font:600 .42rem 'Orbitron',sans-serif;letter-spacing:.13em}
.about17-orbit{box-shadow:0 0 24px rgba(103,52,232,.05),inset 0 0 24px rgba(103,52,232,.025)}
.about17-core{position:relative;z-index:3}
.about17-core:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(166,207,50,.18)}
.about17-tag{z-index:4;background:rgba(7,8,10,.78);min-width:72px;text-align:center}
.tag-c{left:auto!important;right:34px!important;bottom:45px!important}
.about17-link{position:absolute;height:1px;z-index:1;transform-origin:left center;background:linear-gradient(90deg,rgba(166,207,50,.35),rgba(103,52,232,.12));opacity:.8}
.link-a{width:100px;right:74px;top:91px;transform:rotate(145deg)}
.link-b{width:92px;left:84px;top:147px;transform:rotate(8deg)}
.link-c{width:104px;right:78px;bottom:81px;transform:rotate(215deg)}
.about17-system-bottom{background:rgba(255,255,255,.012)}
.about17-system-bottom span{display:flex;align-items:center;justify-content:center;gap:9px}
.about17-system-bottom b{color:#a6cf32;font:700 .5rem 'Orbitron',sans-serif}


/* V2.0 — final polish About section */
.about17-stat .about17-one{font-size:1.55rem;letter-spacing:-.04em;white-space:nowrap}
.about17-pillars{border-top-color:rgba(255,255,255,.075);border-bottom-color:rgba(255,255,255,.055)}
.about17-pillars article{border-right-color:rgba(255,255,255,.045)}
.about17-pillars article:after{position:absolute;right:22px;top:18px;color:rgba(255,255,255,.035);font:800 2.1rem/1 'Orbitron',sans-serif;letter-spacing:-.06em;pointer-events:none}
.about17-pillars article:nth-child(1):after{content:"01"}
.about17-pillars article:nth-child(2):after{content:"02"}
.about17-pillars article:nth-child(3):after{content:"03"}
.about17-stats{border-top-color:rgba(255,255,255,.075);border-bottom-color:rgba(255,255,255,.055)}
.about17-stat{border-right-color:rgba(255,255,255,.055)}
@media(max-width:650px){.about17-stat .about17-one{font-size:1.35rem}}

/* CarXploit V2.4 — header logo optical centering */
.logo-link{height:54px;display:flex;align-items:center;overflow:visible}
.logo-img{height:72px;width:auto;display:block;object-fit:contain;object-position:center;transform:translateY(1px)}
@media(max-width:700px){.logo-img{height:58px;transform:none}}

/* V2.6 — Home panel + navigation alignment polish */
/* Optical centering for the outlined CX mark. Negative letter spacing otherwise makes
   the two-letter wordmark appear slightly right of the panel centre. */
.panel-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  letter-spacing:-.08em;
  text-indent:-.08em;
  transform:none;
}

/* Keep every navigation item on the same spacing system. Contact previously had an
   extra left margin, which made the whole row look shifted to the right. */
.nav-links li:last-child a,
.nav-links li:last-child a:hover,
.nav-links li:last-child a.active{
  margin-left:0 !important;
}
.nav-links{
  gap:8px;
}
.nav-links a,
.nav-links a:hover,
.nav-links a:active,
.nav-links a:focus,
.nav-links a:focus-visible{
  outline:none !important;
  box-shadow:none !important;
  -webkit-tap-highlight-color:transparent;
}
/* Disable the old pseudo-element flash completely and avoid transition:all, which
   caused the light/white box sweep while changing the active section. */
.nav-links a::before,
.nav-links a::after,
.nav-links a:hover::before,
.nav-links a:hover::after,
.nav-links a.active::before,
.nav-links a.active::after{
  content:none !important;
  display:none !important;
  box-shadow:none !important;
}
.nav-links a{
  transition:color .18s ease, opacity .18s ease, border-color .18s ease, background-color .18s ease !important;
}
.nav-links a.active{
  border:1px solid rgba(164,198,57,.38);
  background:rgba(164,198,57,.035);
  color:var(--cx-green);
}

/* V2.7 — final optical alignment fixes */
/* Reserve the active-state border on every item so activating Home/Diensten/Over Mij
   never changes the row width or pushes Contact sideways. */
.nav-links > li { margin:0 !important; padding:0 !important; }
.nav-links > li > .nav-link {
  box-sizing:border-box !important;
  border:1px solid transparent !important;
  margin:0 !important;
  transform:none !important;
  white-space:nowrap;
}
.nav-links > li > .nav-link.active {
  border-color:rgba(164,198,57,.38) !important;
}
/* Equal visual spacing independent of the different word lengths. */
.nav-links { column-gap:8px !important; }

/* The Orbitron C/X glyph pair has more visual mass on the right. Shift the actual
   wordmark slightly left instead of relying on text-indent/letter-spacing. */
.panel-mark {
  text-indent:0 !important;
  transform:translateX(-11px) !important;
}

/* No browser focus/click flash on the desktop navigation. */
.nav-links > li > .nav-link,
.nav-links > li > .nav-link:hover,
.nav-links > li > .nav-link:focus,
.nav-links > li > .nav-link:focus-visible,
.nav-links > li > .nav-link:active {
  box-shadow:none !important;
  outline:0 !important;
  transition:color .14s linear, opacity .14s linear, background-color .14s linear, border-color .14s linear !important;
}

/* V2.8 — exact navigation spacing */
@media (min-width: 901px) {
  .nav-links {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:20px !important;
    column-gap:20px !important;
    row-gap:0 !important;
  }
  .nav-links > li {
    flex:0 0 auto !important;
    margin:0 !important;
    padding:0 !important;
  }
  .nav-links > li > .nav-link,
  .nav-links > li:last-child > .nav-link {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:10px 14px !important;
    border:1px solid transparent !important;
    box-sizing:border-box !important;
  }
  .nav-links > li > .nav-link.active {
    border-color:rgba(164,198,57,.38) !important;
  }
}


/* =========================================================
   CLEAN SPACING RESET — based on uploaded Desktop.zip
   HOME is the reference. No previous V3.1/V3.2 overrides used.
   ========================================================= */

/* Desktop: fixed header is ~80px. Every destination starts immediately
   below it, then gets the same ~54px visual breathing room as Home. */
#features,
#about,
#contact {
  scroll-margin-top: 80px !important;
}

.features.options-section {
  padding-top: 54px !important;
}

.CarXploit-about.about-v17 {
  padding-top: 54px !important;
}

.contact.contact21 {
  padding-top: 54px !important;
}

/* Keep the first visible rows free from inherited top margins. */
#features .services-heading,
#about .about17-kicker,
#contact .c21-kicker {
  margin-top: 0 !important;
}

/* Mobile: use the same principle as the already-good Home layout:
   land below the header, then use one equal compact top gap. */
@media (max-width: 700px) {
  #features,
  #about,
  #contact {
    scroll-margin-top: 80px !important;
  }

  .features.options-section,
  .CarXploit-about.about-v17,
  .contact.contact21 {
    padding-top: 35px !important;
  }
}


/* === CarXploit: vaste navigatiebalk op hoofdpagina === */
.navbar {
    height: 110px !important;
    min-height: 110px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: none !important;
}
.nav-container {
    height: 110px !important;
    min-height: 110px !important;
    transition: none !important;
}
.logo, .logo img {
    transition: none !important;
}
.logo img {
    height: 64px !important;
    width: auto !important;
    max-height: 64px !important;
}
/* Houd dezelfde afmetingen wanneer JavaScript een scroll-status toepast. */
.navbar.scrolled,
.navbar.nav-scrolled,
.scrolled .navbar,
body.scrolled .navbar {
    height: 110px !important;
    min-height: 110px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.navbar.scrolled .nav-container,
.navbar.nav-scrolled .nav-container,
.scrolled .nav-container,
body.scrolled .nav-container {
    height: 110px !important;
    min-height: 110px !important;
}
.navbar.scrolled .logo img,
.navbar.nav-scrolled .logo img,
.scrolled .logo img,
body.scrolled .logo img {
    height: 64px !important;
    max-height: 64px !important;
}
@media (max-width: 768px) {
    .navbar,
    .navbar.scrolled,
    .navbar.nav-scrolled,
    .scrolled .navbar,
    body.scrolled .navbar,
    .nav-container,
    .navbar.scrolled .nav-container,
    .navbar.nav-scrolled .nav-container {
        height: 86px !important;
        min-height: 86px !important;
    }
    .logo img,
    .navbar.scrolled .logo img,
    .navbar.nav-scrolled .logo img,
    .scrolled .logo img,
    body.scrolled .logo img {
        height: 54px !important;
        max-height: 54px !important;
    }
}


/* Correcte selectors voor de home-header */
nav,
nav.scrolled {
    padding: 20px 50px !important;
    background: rgba(10,10,10,.8) !important;
    box-shadow: none !important;
    transition: none !important;
}
nav .nav-container,
nav.scrolled .nav-container {
    height: 50px !important;
    min-height: 50px !important;
}
nav .logo-img,
nav.scrolled .logo-img {
    height: 58px !important;
    max-height: 58px !important;
    width: auto !important;
    transition: none !important;
}
@media (max-width: 768px) {
    nav,
    nav.scrolled {
        padding: 15px 20px !important;
    }
    nav .nav-container,
    nav.scrolled .nav-container {
        height: 50px !important;
        min-height: 50px !important;
    }
    nav .logo-img,
    nav.scrolled .logo-img {
        height: 54px !important;
        max-height: 54px !important;
    }
}


/* === Exact match met de vaste balk van de dienstpagina's === */
nav, nav.scrolled {
  padding: 15px 50px !important;
  background: rgba(10,10,10,.82) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(164,198,57,.10) !important;
  box-shadow: none !important;
  transition: none !important;
}
nav .nav-container, nav.scrolled .nav-container {
  max-width: 1200px !important;
  height: 50px !important;
  min-height: 50px !important;
}
nav .logo-img, nav.scrolled .logo-img {
  height: 65px !important;
  max-height: 65px !important;
  width: auto !important;
  transition: none !important;
}
@media (max-width:800px) {
  nav, nav.scrolled { padding:12px 20px !important; }
  nav .logo-img, nav.scrolled .logo-img { height:55px !important; max-height:55px !important; }
}


/* === Home logo horizontal position — corrected to original Home alignment === */
nav .nav-container,
nav.scrolled .nav-container {
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* === Pixel-match Home header to service/privacy/terms pages === */
nav .logo-img,
nav.scrolled .logo-img {
    height: 64px !important;
    max-height: 64px !important;
}
@media (max-width: 700px) {
    nav .logo-img,
    nav.scrolled .logo-img {
        height: 54px !important;
        max-height: 54px !important;
    }
}


/* === Exact vertical logo alignment with all subpages === */
nav .logo-img,
nav.scrolled .logo-img {
    transform: none !important;
}