@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --ink:#FAFAFB;        /* page background */
  --surface:#FFFFFF;
  --surface-2:#F2F4F8;
  --line:#E4E7EC;
  --red:#E2293B;
  --red-dim:#B01B2A;
  --blue:#2563EB;
  --muted:#5C6672;
  --text:#12151B;       /* primary tekstkleur */
}

*{ -webkit-tap-highlight-color: transparent; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body{
  background-color: var(--ink);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-feature-settings: "ss01" on;
}

h1,h2,h3,h4,h5,.font-display{
  font-family: 'Outfit', sans-serif;
}

::selection{
  background: var(--red);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-track{ background: var(--surface-2); }
::-webkit-scrollbar-thumb{ background: #CBD2DC; border-radius: 999px; border: 2px solid var(--surface-2); }
::-webkit-scrollbar-thumb:hover{ background: var(--red); }

/* Gradient text */
.text-gradient{
  background: linear-gradient(90deg, var(--text) 0%, #3C4550 55%, var(--blue) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero noise / grain overlay */
.grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hero: witte waas over de foto.
   Mobiel egaal (tekst loopt over de volle breedte), vanaf lg een verloop dat
   links dicht is voor de tekst en rechts openbreekt zodat de motor zichtbaar blijft. */
.hero-wash{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.84);
}
@media (min-width: 1024px){
  .hero-wash{
    background: linear-gradient(100deg,
      rgba(255,255,255,.97)   0%,
      rgba(255,255,255,.93)  36%,
      rgba(255,255,255,.55)  60%,
      rgba(255,255,255,.10)  84%,
      rgba(255,255,255,0)   100%);
  }
}

/* Boven- en onderrand van de hero: navbar leesbaar houden en netjes overlopen
   in de paginakleur. */
.hero-fade-top{
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 8rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.75), rgba(255,255,255,0));
}
.hero-fade-bottom{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12rem;
  background: linear-gradient(to top, var(--ink), rgba(250,250,251,0));
}

/* Donkere garagefoto iets optillen zodat het rood spreekt op een lichte pagina */
.hero-photo{
  filter: brightness(1.08) contrast(1.06) saturate(1.06);
}

/* Hero image: slow Ken Burns zoom-out on load */
@keyframes hero-zoom{
  from{ transform: scale(1.12); }
  to{ transform: scale(1); }
}
.hero-img{
  animation: hero-zoom 14s cubic-bezier(.16,1,.3,1) both;
  transform-origin: center;
  will-change: transform;
}

/* Reveal-on-scroll */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="zoom"]{ transform: scale(.94); }
[data-reveal="zoom"].is-visible{ transform: scale(1); }
[data-reveal="left"]{ transform: translateX(-32px); }
[data-reveal="left"].is-visible{ transform: translateX(0); }
[data-reveal="right"]{ transform: translateX(32px); }
[data-reveal="right"].is-visible{ transform: translateX(0); }

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: .6rem;
  padding: .85rem 1.75rem;
  transition: transform .25s cubic-bezier(.16,1,.3,1), background-color .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn:active{ transform: scale(.97); }

.btn-primary{
  background: var(--red);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(226,41,59,.6);
}
.btn-primary:hover{
  background: #ff2f44;
  box-shadow: 0 10px 30px -6px rgba(226,41,59,.75);
  transform: translateY(-2px);
}

.btn-outline{
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
}
.btn-outline:hover{
  border-color: var(--blue);
  background: rgba(37,99,235,.06);
  transform: translateY(-2px);
}

.btn-ghost{
  background: rgba(18,21,27,.04);
  color: var(--text);
  border: 1px solid rgba(18,21,27,.10);
}
.btn-ghost:hover{
  background: rgba(18,21,27,.07);
}

/* Logo
   Het logo-bestand is wit artwork voor een donkere achtergrond. Met invert wordt
   het woordmerk donker; de hue-rotate zet het blauwe L-blok terug naar blauw. */
.logo-img{
  height:3.4rem;
  width:auto;
  display:block;
  filter: invert(1) hue-rotate(180deg);
}

/* Nav link underline */
.nav-link{
  position: relative;
  color: #4B5563;
  transition: color .2s ease;
}
.nav-link::after{
  content:'';
  position:absolute;
  left:0; right:100%;
  bottom:-6px;
  height:2px;
  background: var(--red);
  transition: right .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover{ color: var(--text); }
.nav-link:hover::after,
.nav-link.active::after{ right:0; }
.nav-link.active{ color: var(--text); }

/* Cards */
.card{
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F9FC 100%);
  border: 1px solid var(--line);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(16,24,40,.05);
  transition: border-color .3s ease, transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
.card:hover{
  border-color: rgba(226,41,59,.45);
  transform: translateY(-6px);
  box-shadow: 0 22px 44px -26px rgba(16,24,40,.35);
}

/* Pricing card highlight */
.card-pop{
  border-color: var(--red);
  box-shadow: 0 20px 50px -26px rgba(226,41,59,.55);
}

/* Navbar */
#navbar{
  transition: background-color .35s ease, border-color .35s ease, padding .35s ease, box-shadow .35s ease;
}
/* Zachte witte onderlegger zolang de navbar transparant over de hero ligt,
   zodat de links en het telefoonnummer leesbaar blijven. */
#navbar::before{
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,.98), rgba(255,255,255,.72) 60%, rgba(255,255,255,0));
  transition: opacity .35s ease;
}
#navbar.scrolled::before{ opacity: 0; }
#navbar.scrolled{
  background-color: rgba(255,255,255,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px -22px rgba(16,24,40,.45);
}

/* Mobile menu */
#mobile-menu{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
#mobile-menu.open{
  max-height: 32rem;
}

/* Hamburger */
.hamburger span{
  display:block;
  height:2px;
  width:24px;
  background: var(--text);
  transition: transform .3s ease, opacity .3s ease;
}
.hamburger.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity: 0; }
.hamburger.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* Marquee */
.marquee-track{
  display:flex;
  gap: 3rem;
  animation: marquee 28s linear infinite;
  width: max-content;
}
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Floating badge animation */
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}
.float{ animation: float 5s ease-in-out infinite; }
.float-slow{ animation: float 7s ease-in-out infinite; animation-delay: .8s; }

/* Pulse ring (CTA) */
@keyframes pulse-ring{
  0%{ box-shadow: 0 0 0 0 rgba(226,41,59,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(226,41,59,0); }
  100%{ box-shadow: 0 0 0 0 rgba(226,41,59,0); }
}
.pulse{ animation: pulse-ring 2.4s cubic-bezier(.4,0,.6,1) infinite; }

/* Tabs */
.tab-btn{
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.tab-active{
  background: var(--red) !important;
  color: #fff !important;
  border-color: var(--red) !important;
}

/* Accordion */
.accordion-content{
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.16,1,.3,1);
}
.accordion-item.open .accordion-content{ max-height: 20rem; }
.accordion-item .chevron{ transition: transform .3s ease; }
.accordion-item.open .chevron{ transform: rotate(180deg); }

/* Back to top */
#back-to-top{
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease;
}
#back-to-top.show{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Section divider glow */
.glow{
  position:absolute;
  border-radius: 9999px;
  filter: blur(120px);
  opacity: .6;
  pointer-events:none;
  z-index:0;
}

/* Form fields */
input, select, textarea{
  color: var(--text);
}
input::placeholder, textarea::placeholder{
  color: #98A1AE;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .float,.float-slow,.pulse,.marquee-track{ animation: none !important; }
  *{ transition-duration: .01ms !important; animation-duration: .01ms !important; }
}