/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Montserrat',sans-serif;color:#333;overflow-x:hidden;background:#fff}
a{text-decoration:none;color:inherit}

/* GLOBAL GRADIENT */
:root{
  --grad:linear-gradient(135deg,#1A5FB4 0%,#00B4E6 100%);
  --c_0: #000000; /* Voor shadows uit pen */
}

/* UTIL */
.container{max-width:1200px;margin:0 auto;padding:0 2rem}

/* HEADER */
header{position:sticky;top:0;width:100%;z-index:300;height:80px;background:transparent}
.nav-bar{height:100%;display:flex;justify-content:center;position:relative;overflow:hidden}
.nav-bar .container{display:flex;justify-content:space-between;align-items:center;height:100%;width:100%;border-bottom:1px solid rgba(255,255,255,0.2)}
.nav-left{display:flex;align-items:center;gap:2rem}
.logo {
  max-height: 74px; /* Matcht de originele font-size hoogte */
  width: auto;    /* Houdt de verhoudingen intact */
  display: inline-block; /* Zorgt dat het als inline element gedraagt, net als de span */
}
.phone{color:#fff;font-weight:400;font-size:1rem}
.nav-right{display:flex;align-items:center}
nav{display:flex;gap:1.5rem;font-size:1rem;align-items:center}
nav a{color:#fff;font-weight:400;position:relative;transition:color 0.3s}
nav a::after{content:"";position:absolute;bottom:-4px;left:0;width:0;height:2px;background:#fff;transition:width .3s}
nav a:hover::after{width:100%}
.btn-contact{padding:.5rem 1.5rem;border:2px solid #fff;border-radius:25px;color:#fff;font-weight:400;transition:background 0.3s}
.btn-contact:hover{background:rgba(255,255,255,0.2)}
.nav-bg{position:absolute;inset:0;z-index:-1;overflow:hidden} /* Voor gekloonde wolken */

/* Hamburger styles */
.hamburger {
  display: none;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

/* HERO */
.hero{position:relative;height:500px;background:var(--grad);overflow:hidden;z-index:100;margin-top:-100px} /* Terug voor desktop overlap */
.hero .container{position:relative;z-index:2;padding-top:calc(80px + 4rem); transition: padding-top 0.3s ease;} /* Transition voor smooth effect */
.hero h1{color:#fff;font-size:3.8rem;font-weight:600;max-width:45%;line-height:1.1;margin-top:0.5em;margin-bottom:2rem}

/* CLOUDS */
.cloud{position:absolute;border-radius:40px;background:rgba(255,255,255,0.25);filter:blur(6px);animation:moveClouds linear infinite;pointer-events:none}
@keyframes moveClouds{from{transform:translateX(-35vw)}to{transform:translateX(135vw)}}

/* CARD BOARD */
.card-board{position:absolute;top:-270px;margin-top:-100px;right:0;z-index:200;width:100%;transform:translateY(50%)}
.card-board .container{display:flex;justify-content:flex-end}
.card-board-grid{display:flex;gap:1.5rem;width:max-content}
.card-column{display:flex;flex-direction:column;gap:1.5rem}
.card{background:#fff;border-radius:4px;box-shadow:0 8px 20px rgba(0,0,0,.08);padding:1.2rem 1.5rem;width:240px;transition:transform 0.3s;height:max-content;position:relative;perspective:1000px;transform-style:preserve-3d;will-change:transform;overflow:hidden;}
.card:hover{transform:translateY(-5px)}
.card h3{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;cursor:pointer} /* Voor accordion toggle */
.card .subheading{font-size:0.95rem;color:#333;line-height:1.4;margin-bottom:1rem}
.card .subtext{font-size:0.85rem;color:#007BFF;margin-top:0.5rem;transition:color 0.3s;display:flex;align-items:center;gap:0.3rem}
.card .subtext::after{content:'○';color:#007BFF;font-size:1rem;}
.card .subtext:hover{color:#0056b3}
.card.portfolio{background:#FFD966;color:#333}
.card img{max-width:100%;border-radius:4px;margin-top:1rem;}
.card-content{display:block;transition:max-height 0.3s ease;overflow:hidden;max-height:500px} /* Voor accordion */
.card-content.collapsed{max-height:0}

/* Gecombineerd tilt effect (CSS van eerste + JS van tweede) */
.card {
  transition-duration: 300ms;
  transition-property: transform, box-shadow;
  transition-timing-function: ease-out;
}

.card:hover {
  transition-duration: 150ms;
  box-shadow: 0 5px 20px 5px rgba(0,0,0,0.2);
}

.card .glow {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f);
  pointer-events: none;
}

.card::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: linear-gradient(226deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0.2) 42%, rgba(255,255,255,0) 60%);
  transform: translateY(-20%);
  will-change: transform;
  transition: transform .65s cubic-bezier(0.18, 0.9, 0.58, 1);
  pointer-events: none;
}

.card:hover::after {
  transform: translateY(0%);
}

.card::before {
  display: block;
  content: '';
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(var(--c_0), 0.5);
  box-shadow: 0 6px 12px 8px rgba(var(--c_0), 0.4);
  will-change: opacity, transform;
  transform-origin: top center;
  transform: skewX(.001deg);
  transition: transform .35s ease-in-out, opacity .5s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.card:hover::before {
  opacity: 0.6;
  transform: rotateX(4deg) translateY(-3px) scale(1);
}

.card > * {
  position: relative;
  z-index: 2;
}

/* CONTENT */
section.content{padding:6rem 0}
section.content:nth-child(even){background:#f8f9fa}
.flex{display:flex;flex-wrap:wrap;gap:3rem;align-items:center}
.flex .text{flex:1 1 400px}
.flex .text h2{font-size:1.8rem;font-weight:700;margin-bottom:1.5rem}
.flex .text p{font-size:1rem;margin-bottom:1.5rem;line-height:1.6}
.flex .image{flex:1 1 400px;text-align:center}
.flex .image img{max-width:100%;border-radius:8px}

/* FOOTER */
footer {
  position: relative;
  background: linear-gradient(135deg, #00B4E6 0%, #1A5FB4 100%); /* Basis gradient, wordt geanimeerd met JS */
  color: #fff;
  padding: 4rem 0 2rem;
  overflow: hidden;
  z-index: 10;
}
footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}
footer .footer-column {
  flex: 1;
  min-width: 200px;
}
footer h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
footer ul {
  list-style: none;
}
footer ul li {
  margin-bottom: 0.5rem;
}
footer ul li a {
  transition: opacity 0.3s;
}
footer ul li a:hover {
  opacity: 0.7;
}
footer .copyright {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.85rem;
  opacity: 0.8;
  width: 100%;
}


/* RESPONSIVE */
@media(max-width:768px){
  .phone{display:none}
  .hamburger { display: block; }
  .nav-right nav {
    display: none;
    position: absolute;
    top: 80px;
    left: 0;
    background: transparent; /* Transparant voor wolken doorschijnen */
    width: 100vw;
    flex-direction: column;
    padding: 1rem 2rem;
    align-items: flex-start;
    z-index: 299;
  }
  .nav-right nav.active { display: flex; }
  .nav-right nav a {
    margin-bottom: 1rem;
    width: 100%;
  }
  .btn-contact {
    margin-top: 1rem;
    width: auto;
  }
  .hero{height:auto;padding-bottom:3rem;margin-top:-80px} /* Overlap met nav */
  .hero .container{padding-top:calc(80px + 2rem)}
  .hero h1{text-align:left;font-size:2.5rem;max-width:100%;margin-top:0}
  .card-board{position:relative;transform:none;margin-top:15rem;z-index:10;padding-bottom:0} /* Aangepast margin, geen padding bottom */
  .card-board .container{justify-content:center;padding:0 2rem}
  .card-board-grid{flex-direction:column;gap:1rem;width:100%}
  .card-column{flex-direction:column;gap:1rem}
  .card{width:100%;box-shadow:0 4px 10px rgba(0,0,0,.05);cursor:pointer} /* Full width accordions */
  .card h3{margin-bottom:0} /* Voor toggle feel */
  .card.portfolio{background:#FFD966}
  .flex{flex-direction:column;gap:2rem}
  section.content{padding:2rem 0;margin-top:-150px} /* Verminder padding, negative margin om ruimte te sluiten */
  .card:hover::before, .card::after {display: none;} /* Disable tilt op mobile */
  .nav-bar.menu-open {
    overflow: visible !important;
  }
   /* Footer responsive */
  footer { padding: 3rem 0 1rem; }
  footer .container { flex-direction: column; }
  footer .footer-column { min-width: 100%; }
}  

@media(max-width:768px){
/*  ===== NAV =====  */
  .phone{display:none;}                    /* nummer verbergen, menu laten staan  */
  nav{
    display:flex;                          /* niet verbergen maar tonen           */
    flex-direction:column;
    position:absolute;                     /* dropdown onder de balk              */
    top:80px;
    left:0;
    width:100%;
    background: transparent; /* Transparant voor wolken doorschijnen */
    padding:1rem 2rem;
    z-index:299;
  }
  nav a{margin-bottom:1rem;width:100%;}
  .btn-contact{margin-top:.5rem;width:auto;}

  /*  ===== HERO =====  */
  .hero{
    height:auto;
    padding-bottom:3rem;
    margin-top:-80px;                      /* hero weer onder de transparante nav */
  }
  .hero .container{padding-top:calc(80px + 2rem);}
  .hero h1{text-align:left;font-size:2.5rem;max-width:100%;margin-top:0}

  /*  ===== CARD BOARD =====  */
  .card-board{
    position:relative;
    top:0;               /* ↩︎ corrigeert -150px uit desktop‑CSS  */
    transform:none;
    margin-top:2.5rem;    /* zoals je hem ‘perfect’ vond          */
margin-bottom:2.5rem;
  }
  .card-board .container{justify-content:center;padding:0 2rem;}
  .card-board-grid{flex-direction:column;gap:1rem;width:100%;}
  .card{width:100%;}

  /*  ===== CONTENT =====  */
  .flex{flex-direction:column;gap:2rem;}
  section.content{padding:4rem 0;margin-top:0;} /* geen negatieve marge meer      */
  .nav-bar.menu-open {
    overflow: visible !important;
  }
}